/* ═══ the card run ═════════════════════════════════════════════════════
   Three glass cards travel bottom-to-top across the same land the clouds
   uncovered — they enter below the frame, pass through the middle and
   leave over the top. Nothing parks. Each is large and roughly centred so
   it owns the viewport while it is the one being read, and the windows
   overlap enough that the next is already rising as the last clears.

   The 3D is real, not painted: the deck holds the perspective, each card
   is rotated on its own axes inside it, and the card's contents sit on a
   preserve-3d plane pushed toward the viewer — so as a card turns, its
   type parallaxes against its own surface.
   ══════════════════════════════════════════════════════════════════════ */

/* ── title card, between the reveal and the first card ─────────────────── */

.deck__head {
  position: absolute;
  z-index: 5;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: grid;
  justify-items: center;
  gap: 1rem;
  width: min(100% - 2 * var(--gutter), 44rem);
  text-align: center;
  color: var(--sand);
  will-change: transform, opacity;
  pointer-events: none;
}
.deck__head { opacity: 0; }

.deck__eyebrow {
  font-size: var(--fs-eyebrow);
  font-weight: 500;
  letter-spacing: clamp(0.16em, 0.06em + 0.4vw, 0.3em);
  text-transform: uppercase;
  color: color-mix(in srgb, var(--gold) 90%, transparent);
}

.deck__title {
  font-family: var(--font-display);
  font-size: clamp(2rem, 1.1rem + 3vw, 3.7rem);
  font-weight: 500;
  line-height: 1.05;
  letter-spacing: -0.015em;
  text-wrap: balance;
}

/* ── the run ───────────────────────────────────────────────────────────── */

.deck {
  position: absolute;
  z-index: 6;
  inset: 0;
  perspective: 1600px;
  perspective-origin: 50% 50%;
  transform-style: preserve-3d;
  pointer-events: none;
}

.card {
  --w: min(88vw, 46rem);
  --chamfer: 2.6rem;

  position: absolute;
  top: 50%;
  left: 50%;
  width: var(--w);
  transform-style: preserve-3d;
  will-change: transform, opacity;
  pointer-events: auto;
  /* JS owns transform and opacity from here */
}

.card { opacity: 0; }

/* soft contact shadow — a gradient, not a blur filter, so it costs nothing
   to move it every frame */
.card__cast {
  position: absolute;
  z-index: -1;
  inset: 6% -12% -16% -12%;
  background: radial-gradient(56% 46% at 50% 62%,
    rgba(1, 18, 14, 0.66) 0%,
    rgba(1, 18, 14, 0.30) 46%,
    transparent 74%);
}

.card__face {
  position: relative;
  transform-style: preserve-3d;
  padding: clamp(1.8rem, 1.1rem + 2.2vw, 3.2rem);
  padding-top: clamp(2.2rem, 1.3rem + 2.6vw, 3.6rem);
  min-height: min(51vh, 24rem);
  display: flex;
}

/* The glass itself. Separate element rather than a background on .card__face
   so the backdrop filter cannot flatten the 3D plane its siblings sit on. */
.card__glass {
  position: absolute;
  inset: 0;
  clip-path: polygon(
    0 0,
    calc(100% - var(--chamfer)) 0,
    100% var(--chamfer),
    100% 100%,
    0 100%);
  /* Dark-tinted, not white. The scene behind is a dark landscape — milky
     white panels wash out and the type loses contrast, whereas a smoked
     panel with a bright rim reads as glass and lets the copy sing. */
  background:
    linear-gradient(147deg,
      rgba(6, 42, 33, 0.56) 0%,
      rgba(2, 26, 20, 0.44) 46%,
      rgba(8, 48, 38, 0.54) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.30),
    inset 1px 0 0 rgba(255, 255, 255, 0.16),
    inset -1px -1px 0 rgba(0, 0, 0, 0.22);
}

/* real refraction only where there is budget for it */
html[data-tier='full'] .card__glass {
  backdrop-filter: blur(18px) saturate(150%);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
}
/* cheaper tiers: a heavier fill reads as frosted without the per-frame blur */
html:not([data-tier='full']) .card__glass {
  background:
    linear-gradient(147deg,
      rgba(6, 42, 33, 0.82) 0%,
      rgba(2, 26, 20, 0.74) 46%,
      rgba(8, 48, 38, 0.80) 100%);
}

/* the cut corner, lit — this is the edge that says "solid object" */
.card__edge {
  position: absolute;
  top: 0;
  left: calc(100% - var(--chamfer));
  width: calc(var(--chamfer) * 1.4143);
  height: 2px;
  transform-origin: 0 0;
  transform: rotate(45deg);
  background: linear-gradient(90deg,
    rgba(255, 255, 255, 0.92) 0%,
    rgba(255, 255, 255, 0.30) 100%);
}

/* contents float above the surface, so they parallax when the card turns */
.card__body {
  position: relative;
  transform: translateZ(30px);
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  color: var(--paper);
}

.card__index {
  font-family: var(--font-display);
  font-size: 1.05rem;
  letter-spacing: 0.08em;
  color: color-mix(in srgb, var(--gold) 92%, transparent);
}

.card__title {
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 1.3rem + 1.9vw, 3rem);
  font-weight: 500;
  line-height: 1.06;
  letter-spacing: -0.015em;
}

.card__text {
  max-width: 34ch;
  font-size: clamp(1rem, 0.94rem + 0.25vw, 1.15rem);
  font-weight: 300;
  line-height: 1.6;
  color: color-mix(in srgb, var(--paper) 86%, transparent);
}

.card__tag {
  margin-top: auto;
  padding-top: 1.4rem;
  font-size: 0.66rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--sand) 74%, transparent);
}

/* ── reduced motion ────────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  /* first static element in the stage — clears the pinned hero layers above */
  .deck__head {
    position: static;
    transform: none !important;
    opacity: 1 !important;
    width: auto;
    margin: 100vh auto 3rem;
    padding: 8vh var(--gutter) 0;
    color: var(--forest);
  }
  .deck__eyebrow { color: color-mix(in srgb, var(--forest) 70%, transparent); }
  .deck {
    position: static;
    display: grid;
    gap: 1.5rem;
    perspective: none;
    padding: 0 var(--gutter) 12vh;
  }
  .card {
    position: static;
    width: min(100%, 34rem);
    margin-inline: auto;
    opacity: 1 !important;
    transform: none !important;
  }
  .card__face { min-height: 0; }
  .card__body { transform: none; }
  .card__glass {
    background: var(--forest);
    backdrop-filter: none;
  }
}