/* ============================================================
   Ground Truth · Check-in, Option 2: the form is the badge.
   The credential (dark card, Volt gradient border: same object
   as the "Ground truth: verified" card on the home page) fills
   in as the attendee answers, then flips to a thank-you.
   Depends on tokens.css, base.css, checkin.css.
   ============================================================ */

.stage {
  width: 100%;
  max-width: 1040px;
  margin-inline: auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1.75rem, 5vw, 3rem);
  align-items: start;
}
/* grid children must be allowed to shrink below their content width */
.stage > * { min-width: 0; }
@media (min-width: 840px) {
  .stage { grid-template-columns: minmax(300px, 380px) minmax(0, 1fr); gap: clamp(3rem, 8vw, 7rem); }
  .stage__badge { position: sticky; top: 24px; }
}

/* ---------- Badge (3D flip container) ------------------
   Geometry comes from the Figma frame "Opt. 0_FRONT" (1050 x 1650).
   Every measurement is a percentage of the card width (cqw), so the
   card scales without breaking: 1cqw = 10.5px at the Figma size.
   ------------------------------------------------------- */
.badge {
  width: min(300px, 100%);
  margin-inline: auto;
  aspect-ratio: 1050 / 1650;
  perspective: 1800px;
  margin-top: 0;
  container-type: inline-size;
}
@media (min-width: 840px) {
  .badge { width: min(360px, 100%); }
}
.badge__card {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transition: transform 900ms var(--ease-in-out);
}
.badge.is-flipped .badge__card { transform: rotateY(180deg); }

.badge__face {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: var(--radius-md);
  background: var(--color-midnight-100);        /* 1f231f: the dark bottom block */
  color: var(--color-night);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  box-shadow:
    0 0 0 1px var(--color-stone-60),
    0 2px 4px rgba(13, 14, 13, 0.06),
    0 12px 24px -8px rgba(13, 14, 13, 0.18),
    0 40px 64px -32px rgba(13, 14, 13, 0.35);
}
.badge__face--back { transform: rotateY(180deg); }

/* 01 · Top block: white, 861/1050 of the width tall */
.badge__top {
  position: absolute;
  inset: 0 0 auto 0;
  height: 82cqw;
  background: var(--color-white);
}
.badge__face--back .badge__top { background: var(--color-midnight-100); }

/* Name: Cambon Light 160px at 1050 = 15.24cqw, bottom-anchored 55px above the band */
.badge__name {
  position: absolute;
  left: 7.15cqw;
  right: 7.15cqw;
  bottom: calc(100% - 82cqw + 5.2cqw);
  font-family: var(--font-primary);
  font-weight: var(--weight-light);
  font-size: 15.24cqw;
  line-height: 1.08;
  letter-spacing: -0.01em;
  color: var(--color-night);
  white-space: pre-line;
  overflow-wrap: anywhere;
  transition: color var(--dur-base) var(--ease-out);
}
.badge__name.is-long { font-size: 11cqw; }
.badge__name.is-very-long { font-size: 8.5cqw; }

/* The device-line band: brand gradient masked by the Figma "Device" shape.
   Mask frame is 1448 x 494 at (-199, 861) on the 1050-wide card. */
.badge__band {
  position: absolute;
  top: 82cqw;
  left: -18.95cqw;
  width: 137.94cqw;
  height: 47.05cqw;
  background: linear-gradient(-83.85deg, var(--color-mint) 2.31%, #48b45f 10.44%, #6ae654 46.61%, var(--color-volt) 87.24%);
  -webkit-mask: url("../Assets/badge/device-line-mask.svg") no-repeat 0 0 / 100% 100%;
          mask: url("../Assets/badge/device-line-mask.svg") no-repeat 0 0 / 100% 100%;
  pointer-events: none;
}

/* Info row on the band: "Ground Truth" (Cambon Regular 56px) + "2026" */
.badge__info {
  position: absolute;
  top: 89.9cqw;
  left: 6.1cqw;
  right: 6.1cqw;
  height: 3.75cqw;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: var(--color-night);
}
.badge__event {
  font-family: var(--font-primary);
  font-weight: var(--weight-regular);
  font-size: 5.24cqw;
  line-height: 1;
  letter-spacing: -0.01em;
}
.badge__year {
  font-family: var(--font-secondary);
  font-weight: var(--weight-regular);
  font-size: 3.7cqw;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

/* Footer: Sphere + a16z lockup, 1050 x 211 at the bottom */
.badge__logos {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 20.1cqw;
  display: block;
  width: 100%;
}

/* Back face: Figma "Opt. 0_BACK". "You're in." (Cambon Light 160px at 1050,
   centred, top 462) over the device lines (1259 x 588 at left -104, bottom 0). */
.badge__face--back {
  background: var(--color-midnight-100);
  /* no light hairline on the dark face: it read as a dashed edge under the lines */
  box-shadow:
    0 2px 4px rgba(13, 14, 13, 0.06),
    0 12px 24px -8px rgba(13, 14, 13, 0.18),
    0 40px 64px -32px rgba(13, 14, 13, 0.35);
}
/* Animated paths get their own layers, which can slip past overflow + radius
   on a 3D-rotated face, and the flipped face rounds to whole pixels, so the
   last row of the lines could show 1px under the card. The clip stops 2px
   above the bottom edge, where the lines are already the card colour. */
.badge__clip {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  overflow: hidden;
  clip-path: inset(0 0 2px 0 round var(--radius-md));
}
.badge__youre-in {
  position: absolute;
  top: 44cqw;
  left: 0;
  right: 0;
  margin: 0;
  text-align: center;
  font-family: var(--font-primary);
  font-weight: var(--weight-light);
  font-size: 15.24cqw;
  line-height: 1.08;
  letter-spacing: -0.018em;
  color: var(--color-white);
  white-space: nowrap;
}
.badge__devices {
  position: absolute;
  left: -9.9cqw;
  bottom: 0;
  width: 119.9cqw;
  max-width: none;
  height: 56cqw;
  overflow: visible;
}
.badge__devices path { transform-box: fill-box; transform-origin: 50% 100%; }

/* Device lines: they rise from the bottom as the card turns over, left to
   right, and stay put. */
@media (prefers-reduced-motion: no-preference) {
  .badge.is-flipped .badge__devices path {
    animation: devrise 700ms calc(450ms + var(--i) * 28ms) cubic-bezier(0.16, 1, 0.3, 1) both;
  }
  @keyframes devrise { from { transform: scaleY(0); opacity: 0; } to { transform: scaleY(1); opacity: 1; } }
}

/* A settle when a value lands on the card */
@media (prefers-reduced-motion: no-preference) {
  .badge__name.is-set { animation: settle 520ms var(--ease-out) both; }
  @keyframes settle { from { opacity: 0.4; transform: translateY(0.6cqw); } to { opacity: 1; transform: none; } }
}
@media (prefers-reduced-motion: reduce) {
  .badge__card { transition: none; }
}

/* ---------- Steps panel -------------------------------- */
.steps { min-width: 0; display: flex; flex-direction: column; gap: clamp(1.5rem, 4vw, 2rem); }
.steps__head { display: flex; flex-direction: column; gap: var(--space-12); }
.steps__title { text-wrap: balance; }
.steps__lead { color: var(--color-midnight-60); max-width: 44ch; }

.step { display: none; flex-direction: column; gap: var(--space-24); }
.step.is-active { display: flex; }
.step__q {
  font-family: var(--font-primary);
  font-weight: var(--weight-light);
  font-size: clamp(1.5rem, 1.3rem + 1vw, var(--fs-h4));
  line-height: var(--lh-h4);
  letter-spacing: var(--tr-h4);
  text-wrap: balance;
}
.step__copy { color: var(--color-midnight-60); max-width: 48ch; }
.step__nav { display: flex; align-items: center; justify-content: space-between; gap: var(--space-16); flex-wrap: wrap; }
.step__nav > .btn:only-child { margin-left: auto; }
.step__count { font-size: 0.875rem; color: var(--color-midnight-40); }
@media (prefers-reduced-motion: no-preference) {
  .step.is-active { animation: stepin 420ms var(--ease-out) both; }
  @keyframes stepin { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
}

/* Done panel (after the flip) */
.finish { display: none; flex-direction: column; gap: var(--space-24); }
.finish.is-visible { display: flex; }
.finish__copy { color: var(--color-midnight-60); max-width: 44ch; }
/* Photography notice: small print under the door line */
.finish__note {
  max-width: 44ch;
  font-size: 0.8125rem;
  line-height: 1.4;
  letter-spacing: 0.01em;
  color: var(--color-midnight-40);
}
/* single column: sit the copy under the centred card */
@media (max-width: 839px) {
  .finish__copy, .finish__note { text-align: center; text-wrap: balance; margin-inline: auto; }
}

/* ---------- Panels (the questions column) -------------- */
.stage { padding-top: clamp(0.5rem, 3vw, 2rem); }
.panel { display: none; flex-direction: column; gap: var(--space-24); }
.panel.is-active { display: flex; }
.finish.is-visible { display: flex; }

/* ---------- Motion --------------------------------------
   Page load: card lands (rise + tilt), band prints left to
   right, then "Welcome to Ground Truth" inks in.
   Typing: each new character inks in as you type.
   Panel change: the old one slides up, the new one fades up.
   ------------------------------------------------------- */
.badge__name span { display: inline-block; }
@media (prefers-reduced-motion: no-preference) {
  .stage.is-entering .badge { animation: cardin 820ms var(--ease-out) both; transform-origin: 50% 80%; }
  @keyframes cardin {
    from { opacity: 0; transform: perspective(1400px) translateY(56px) rotateX(10deg) scale(0.96); }
    to   { opacity: 1; transform: none; }
  }
  .stage.is-entering .badge__band { animation: print 720ms 220ms cubic-bezier(0.65, 0, 0.35, 1) both; }
  @keyframes print { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
  .stage.is-entering .badge__info,
  .stage.is-entering .badge__logos { animation: fadein 500ms 700ms var(--ease-out) both; }
  @keyframes fadein { from { opacity: 0; } to { opacity: 1; } }
  .stage.is-entering .steps { animation: stepin 520ms 900ms var(--ease-out) both; }

  .badge__name span.is-new { animation: inkin 380ms var(--ease-out) both; animation-delay: calc(var(--k, 0) * 28ms); }
  .stage.is-entering .badge__name span.is-new { animation-delay: calc(650ms + var(--k, 0) * 38ms); }
  @keyframes inkin { from { opacity: 0; transform: translateY(0.35em); filter: blur(4px); } to { opacity: 1; transform: none; filter: blur(0); } }

  .panel.is-active { animation: stepin 420ms var(--ease-out) both; }
  .panel.is-leaving { animation: leave 200ms cubic-bezier(0.4, 0, 1, 1) both; pointer-events: none; }
  @keyframes leave { to { opacity: 0; transform: translateY(-10px); } }
}