/* pin.css — the First Curl pin and the moment you're given it.
   Everything else in the product is flat by choice; this is the one object
   with real weight, so it gets the full treatment: cast shadow, contact
   shadow, a gloss over the enamel, and a flip. Depends on tokens.css. */

.pin {
  position: relative;
  width: clamp(140px, 34vw, 176px);
  aspect-ratio: 200 / 450;
  perspective: 1000px;
  cursor: pointer;
  opacity: 0;
  transform: translateY(-52px) rotate(-9deg) scale(0.92);
}
.pin:focus-visible { outline: 2px solid var(--accent); outline-offset: 8px; border-radius: 6px; }

/* Arrival: it falls, lands slightly off-square, and settles. */
.pin.is-dropped {
  animation: pinDrop 720ms cubic-bezier(0.2, 1.5, 0.35, 1) forwards;
}
@keyframes pinDrop {
  0%   { opacity: 0; transform: translateY(-52px) rotate(-9deg) scale(0.92); }
  55%  { opacity: 1; transform: translateY(6px) rotate(2.5deg) scale(1.02); }
  78%  { transform: translateY(-2px) rotate(-1.5deg) scale(0.995); }
  100% { opacity: 1; transform: translateY(0) rotate(0deg) scale(1); }
}

.pin-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transition: transform 620ms cubic-bezier(0.25, 0.9, 0.25, 1);
}
/* Static pins (the board) flip on hover/focus. The interactive minting pin
   doesn't — you drag its face — so it flips only on the explicit control. */
.pin:not(.is-interactive):hover .pin-inner,
.pin:not(.is-interactive):focus-visible .pin-inner,
.pin.is-flipped .pin-inner { transform: rotateY(180deg); }

.pin-face {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  /* Cast shadow + a tight contact shadow: metal sitting ON something. */
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.45)) drop-shadow(0 18px 26px rgba(0, 0, 0, 0.42));
}
.pin-face.is-back { transform: rotateY(180deg); }
.pin-svg { width: 100%; height: 100%; display: block; }

/* ---- the needle: a live control that snaps between enamel bands ---- */
.pin-needle {
  position: absolute;
  top: 50%;
  width: 23%;
  aspect-ratio: 46 / 38;
  padding: 0;
  border: 0;
  background: none;
  transform: translate(-50%, -50%);
  transition: top 240ms cubic-bezier(0.34, 1.56, 0.5, 1);
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.4));
}
.pin-needle.no-anim { transition: none; }
.pin-needle svg { width: 100%; height: 100%; display: block; }
.pin.is-interactive .pin-needle { cursor: grab; touch-action: none; }
.pin.is-interactive .pin-needle:hover { filter: drop-shadow(0 3px 5px rgba(0, 0, 0, 0.5)); }
.pin.is-interactive .pin-needle.is-grabbing { cursor: grabbing; }
.pin-needle:focus-visible { outline: none; }
.pin.is-interactive .pin-needle:focus-visible svg rect:first-of-type {
  stroke: var(--accent);
  stroke-width: 2.5;
}

/* ---- the moment ---- */

.pin-overlay {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: grid;
  place-items: center;
  gap: var(--s-6);
  grid-auto-rows: min-content;
  align-content: center;
  padding: var(--s-6);
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  backdrop-filter: blur(10px) saturate(1.2);
  -webkit-backdrop-filter: blur(10px) saturate(1.2);
  opacity: 0;
  transition: opacity var(--dur-2) var(--ease);
}
.pin-overlay.is-in { opacity: 1; }
.pin-overlay.is-out { opacity: 0; }

.pin-card {
  display: grid;
  justify-items: center;
  gap: var(--s-4);
  text-align: center;
}
.pin-eyebrow {
  font-family: var(--font-mono);
  font-size: var(--t-data);
  color: var(--ok, #22c55e);
}
.pin-title {
  font-family: var(--font-ui);
  font-size: var(--t-title);
  font-weight: var(--w-semi);
  letter-spacing: -0.02em;
  color: var(--ink);
}
/* The live verdict: the machine's read, and your correction. */
.pin-verdict {
  font-family: var(--font-mono);
  font-size: var(--t-data);
  color: var(--ink-3);
  max-width: 34ch;
}
.pin-verdict strong { color: var(--accent); font-weight: var(--w-semi); }

.pin-controls { display: flex; gap: var(--s-3); align-items: center; }
.pin-flip,
.pin-keep {
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  background: transparent;
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: var(--t-data);
  padding: var(--s-2) var(--s-5);
  transition: color var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease), background var(--dur-1) var(--ease);
}
.pin-flip { border-color: transparent; color: var(--ink-4); padding-inline: var(--s-2); }
.pin-flip:hover { color: var(--ink-2); }
.pin-keep { color: var(--accent-ink); background: var(--accent); border-color: var(--accent); }
.pin-keep:hover { transform: translateY(-1px); }

.keycap-stage { display: grid; place-items: center; padding: var(--s-4) 0; }

@media (prefers-reduced-motion: reduce) {
  .pin { opacity: 1; transform: none; }
  .pin.is-dropped { animation: none; }
  .pin-inner { transition: none; }
  .keycap.is-dropped { animation: none; }
}

/* ---- the keycap object ---- */
.keycap {
  position: relative;
  width: clamp(96px, 22vw, 128px);
  aspect-ratio: 1;
  cursor: pointer;
  transform: translateY(0);
  transition: transform 160ms cubic-bezier(0.34, 1.4, 0.5, 1);
  filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.4)) drop-shadow(0 14px 22px rgba(0, 0, 0, 0.4));
}
.keycap:focus-visible { outline: 2px solid var(--accent); outline-offset: 8px; border-radius: 8px; }
/* Hover presses it — the whole joke of a key. */
.keycap:hover { transform: translateY(3px); filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.4)) drop-shadow(0 6px 12px rgba(0, 0, 0, 0.45)); }
.keycap-svg { width: 100%; height: 100%; display: block; }
.keycap.is-dropped { animation: pinDrop 640ms cubic-bezier(0.2, 1.5, 0.35, 1) forwards; }

/* ---- the shelf (dashboard) ---- */
.shelf-head {
  display: flex; align-items: baseline; gap: var(--s-3);
  font-family: var(--font-mono); font-size: var(--t-label);
  margin-bottom: var(--s-5);
}
.shelf-count { color: var(--ink); font-weight: var(--w-semi); }
.shelf-tip { color: var(--ink-4); }

.shelf {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-8) var(--s-6);
  align-items: flex-end;
  padding: var(--s-8) var(--s-6) var(--s-6);
  border: 1px solid var(--border-soft);
  border-radius: var(--r-lg);
  /* a quiet studio surface — the one panel allowed a little depth, to seat
     objects that cast real shadows. */
  background:
    radial-gradient(120% 80% at 50% 0%, color-mix(in srgb, var(--ink) 5%, transparent), transparent 70%),
    var(--surface);
}
.shelf-slot {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-3);
  width: clamp(104px, 15vw, 140px);
  text-align: center;
}
.shelf-object {
  transform: rotate(var(--tilt, 0deg));
  transition: transform var(--dur-2) var(--ease);
}
.shelf-object.form-pin { width: clamp(60px, 9vw, 78px); }
.shelf-object.form-pin .pin { width: 100%; opacity: 1; transform: none; }
.shelf-object.form-keycap { width: clamp(84px, 12vw, 108px); }
.shelf-object.form-keycap .keycap { width: 100%; }
.shelf-object:hover { transform: rotate(0deg); }

.shelf-name { font-family: var(--font-ui); font-size: var(--t-sm); font-weight: var(--w-semi); color: var(--ink); }
.shelf-hint { font-family: var(--font-mono); font-size: var(--t-micro); color: var(--ink-4); line-height: 1.4; }

/* Locked slots: a dark silhouette of the form, dashed, waiting to be filled. */
.shelf-slot.is-locked { opacity: 0.72; }
.slot-lock {
  display: grid; place-items: center;
  background: color-mix(in srgb, var(--ink) 8%, var(--surface));
  border: 1.5px dashed var(--border);
  color: var(--ink-4);
}
.slot-lock.form-pin { width: clamp(52px, 8vw, 68px); aspect-ratio: 200 / 450; border-radius: 10px; }
.slot-lock.form-keycap { width: clamp(84px, 12vw, 108px); aspect-ratio: 1; border-radius: 18px; }
.slot-q { font-family: var(--font-mono); font-size: var(--t-label); letter-spacing: 0.1em; }