/* Scroll scenes. Base layout in styles.css is the finished, static state; everything that
   depends on motion is scoped under html.motion so reduced-motion visitors get a calm page. */

/* Hero: parallax glow and a scroll cue */
.hero { position: relative; overflow: hidden; isolation: isolate; }
.hero__glow {
  position: absolute; z-index: -1; left: 50%; top: 38%;
  width: min(1100px, 140vw); aspect-ratio: 1.6; transform: translate3d(-50%, 0, 0);
  background:
    radial-gradient(closest-side at 35% 55%, rgba(43, 89, 255, 0.16), transparent 70%),
    radial-gradient(closest-side at 68% 45%, rgba(122, 92, 255, 0.12), transparent 70%);
  filter: blur(20px); pointer-events: none;
}
.hero__content { will-change: transform, opacity; }
.hero__cue { display: none; }
.motion .hero { min-height: calc(100svh - 52px); display: flex; flex-direction: column; justify-content: center; }
.motion .hero__cue {
  display: block; margin-top: 64px; font-size: 13px; color: var(--graphite);
}
.motion .hero__cue::after {
  content: ""; display: block; width: 1px; height: 36px; margin: 10px auto 0;
  background: linear-gradient(var(--graphite), transparent);
  animation: cue 2.2s var(--ease) infinite;
}
@keyframes cue {
  0% { transform: scaleY(0); transform-origin: top; }
  50% { transform: scaleY(1); transform-origin: top; }
  51% { transform-origin: bottom; }
  100% { transform: scaleY(0); transform-origin: bottom; }
}

/* Privacy story: static by default, pinned with motion */
.scrolly { padding: 0 22px 96px; }
.scrolly__sticky {
  max-width: var(--max); margin: 0 auto;
  display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center;
}
.beats { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.beat {
  font-size: clamp(32px, 4.4vw, 56px); font-weight: 700; line-height: 1.08; letter-spacing: -0.04em;
}
.scrolly .stage { margin: 0; justify-self: center; width: 100%; max-width: 480px; text-align: center; }
.scrolly .stage .receipt { margin-top: 24px; }

.motion .scrolly { height: 320vh; padding-bottom: 0; }
.motion .scrolly__sticky { position: sticky; top: 52px; height: calc(100svh - 52px); }
.motion .beats { display: block; position: relative; min-height: 3.4em; }
.motion .beat {
  position: absolute; inset: 0 0 auto 0;
  opacity: 0; transform: translateY(24px); filter: blur(6px);
  transition: opacity 0.6s var(--ease), transform 0.6s var(--ease), filter 0.6s var(--ease);
}
.motion .beat.is-active { opacity: 1; transform: none; filter: none; }
.motion .stage { will-change: transform, opacity; transform-origin: 50% 80%; }
.motion .segmented:focus-within { opacity: 1 !important; }

/* Proof: word-by-word reveal (opacity set per word by motion.js) */
.word { transition: opacity 0.15s linear; }
.lede--dark .word { color: var(--night-text); }

/* Report checks tick in once the card arrives */
.motion .report__checks li { opacity: 0.25; transition: opacity 0.5s var(--ease); }
.motion .report__checks svg { transform: scale(0.4); opacity: 0; transition: transform 0.5s var(--ease), opacity 0.3s var(--ease); }
.motion .report.is-in .report__checks li { opacity: 1; }
.motion .report.is-in .report__checks svg { transform: none; opacity: 1; }
.motion .report.is-in .report__checks li:nth-child(2), .motion .report.is-in .report__checks li:nth-child(2) svg { transition-delay: 0.35s; }
.motion .report.is-in .report__checks li:nth-child(3), .motion .report.is-in .report__checks li:nth-child(3) svg { transition-delay: 0.7s; }

/* Steps: a line draws through 1 → 2 → 3 */
.steps-wrap { position: relative; max-width: var(--max); margin: 72px auto 0; }
.steps-wrap .steps { margin-top: 0; }
.steps__line {
  position: absolute; top: 20px; left: 20px; right: calc((100% - 96px) / 3 - 20px);
  height: 1.5px; background: var(--hairline);
}
.steps__line span { position: absolute; inset: 0; background: var(--ink); transform-origin: left; transform: scaleX(1); }
.step { position: relative; }
.step__num { position: relative; z-index: 1; background: var(--paper); transition: background-color 0.3s var(--ease), color 0.3s var(--ease); }
.motion .steps__line span { transform: scaleX(0); }
.motion .step.is-on .step__num { background: var(--ink); color: var(--paper); }

/* Tiles drift at different speeds (transform set by motion.js) */
.motion [data-drift] { will-change: transform; }

/* Finale wordmark: letters rise in turn, the full stop lands in Alibi blue */
.finale {
  margin: 0 auto 72px; text-align: center; line-height: 0.86; overflow: hidden; padding-bottom: 0.04em;
  font-size: clamp(120px, 27vw, 380px); font-weight: 700; letter-spacing: -0.07em; color: var(--ink);
  user-select: none;
}
.finale__letter { display: inline-block; will-change: transform, opacity; }
.finale__letter:last-child { transition: color 0.6s var(--ease); }
.finale.is-done .finale__letter:last-child, .finale:not(.is-split) { color: var(--ink); }
.finale.is-done .finale__letter:last-child { color: var(--blue); }

/* Small screens: stack the pinned story, beats above the card */
@media (max-width: 860px) {
  .scrolly__sticky { grid-template-columns: 1fr; gap: 20px; text-align: center; }
  .motion .scrolly__sticky { align-content: center; }
  .motion .beats { min-height: 2.3em; }
  .beat { font-size: clamp(28px, 8vw, 40px); }
  .steps__line { top: 20px; bottom: 0; left: 19px; right: auto; width: 1.5px; height: auto; }
  .steps__line span { transform-origin: top; transform: scaleY(1); }
  .motion .steps__line span { transform: scaleY(0); }
  .step { padding-left: 64px; }
  /* End the line at the last circle */
  .step:last-child::after {
    content: ""; position: absolute; left: 17px; top: 40px; bottom: -2px; width: 6px; background: var(--paper);
  }
  .step__num { position: absolute; left: 0; top: 0; }
  .step h3 { margin-top: 4px; }
}
@media (max-width: 520px) {
  .motion .scrolly .stage .receipt { margin-top: 16px; }
  .motion .scrolly .receipt { padding: 20px 18px 8px; }
  .motion .scrolly .receipt__amount { margin: 10px 0 12px; }
  .motion .scrolly .row { padding: 11px 0; }
  .motion .scrolly .stage__caption { margin-top: 14px; }
}