/* ─────────────────────────────────────────────────────────────
   Motion layer for the waitlist landing
   ─────────────────────────────────────────────────────────────
   Restrained editorial motion. CSS-only. Three classes of work:

     1. Load-time entrance for hero copy (the cacophony already
        moves, so the words arrive on a deliberate beat).
     2. Scroll-driven reveals for every section block, gated by
        @supports (animation-timeline: view()). Content is fully
        visible without it, so the fallback is "no animation."
     3. Hover and active states on cards, buttons, and FAQ rows.

   prefers-reduced-motion replaces motion with a 120ms fade
   instead of zeroing durations (zero causes layout pop).
   ───────────────────────────────────────────────────────────── */

:root {
  --ease-in: cubic-bezier(0.4, 0, 1, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-page: 600ms;
  --dur-page-exit: 420ms;
}

/* ─── Load-time hero copy entrance ─────────────────────────── */
@keyframes mo-rise {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}

body.landing-shell .hero-copy__eyebrow,
body.landing-shell .hero-copy h1,
body.landing-shell .hero-copy__body,
body.landing-shell .hero-copy__actions {
  animation: mo-rise var(--dur-page) var(--ease-out) both;
}
body.landing-shell .hero-copy__eyebrow  { animation-delay:  80ms; }
body.landing-shell .hero-copy h1        { animation-delay: 220ms; }
body.landing-shell .hero-copy__body     { animation-delay: 380ms; }
body.landing-shell .hero-copy__actions  { animation-delay: 520ms; }

/* ─── Scroll-driven reveals ────────────────────────────────── */
@supports (animation-timeline: view()) {
  @keyframes mo-reveal {
    from { opacity: 0; transform: translateY(20px); }
    to   { opacity: 1; transform: translateY(0); }
  }

  /* Section heads */
  .wire-eyebrow,
  .wire-copy-block h2,
  .wire-section-head h2,
  .wire-final h2,
  .wire-copy-block p:not(.wire-eyebrow) {
    animation: mo-reveal linear both;
    animation-timeline: view();
    animation-range: entry 0% entry 60%;
  }

  /* Cards and panels */
  .voc-card,
  .wire-step,
  .feedback-pane,
  .fit-card,
  .faq-item,
  .record-strip article,
  .product-shot,
  .deal-drop-card {
    animation: mo-reveal linear both;
    animation-timeline: view();
    animation-range: entry 0% entry 55%;
  }

  /* Step grid stagger, read left-to-right. */
  .wire-step:nth-child(1) { animation-range: entry  0% entry 40%; }
  .wire-step:nth-child(2) { animation-range: entry  8% entry 48%; }
  .wire-step:nth-child(3) { animation-range: entry 16% entry 56%; }
  .wire-step:nth-child(4) { animation-range: entry 24% entry 64%; }

  /* Feedback panes, center first, then sides. */
  .feedback-pane                   { animation-range: entry  6% entry 50%; }
  .feedback-pane--middle           { animation-range: entry  0% entry 44%; }

  /* Record strip stagger */
  .record-strip article:nth-child(1) { animation-range: entry  0% entry 38%; }
  .record-strip article:nth-child(2) { animation-range: entry  6% entry 44%; }
  .record-strip article:nth-child(3) { animation-range: entry 12% entry 50%; }

  /* FAQ list stagger */
  .faq-item:nth-child(1) { animation-range: entry  0% entry 36%; }
  .faq-item:nth-child(2) { animation-range: entry  4% entry 40%; }
  .faq-item:nth-child(3) { animation-range: entry  8% entry 44%; }
  .faq-item:nth-child(4) { animation-range: entry 12% entry 48%; }
  .faq-item:nth-child(5) { animation-range: entry 16% entry 52%; }

  /* Shell peek partner read drifts up as it enters. */
  @keyframes mo-peek {
    from { transform: translateY(56px); opacity: .85; }
    to   { transform: translateY(0);    opacity: 1;   }
  }
  .shell-peek__inner {
    animation: mo-peek linear both;
    animation-timeline: view();
    animation-range: entry 0% entry 85%;
    will-change: transform;
  }
}

/* ─── Hover and focus polish ───────────────────────────────── */
.voc-card,
.wire-step,
.feedback-pane,
.fit-card,
.product-shot,
.deal-drop-card,
.record-strip article {
  transition:
    transform var(--dur-base) var(--ease-out),
    border-color var(--dur-base) var(--ease-out),
    box-shadow var(--dur-base) var(--ease-out);
}

.voc-card:hover,
.wire-step:hover,
.feedback-pane:hover,
.fit-card:hover,
.product-shot:hover,
.record-strip article:hover {
  transform: translateY(-2px);
  border-color: color-mix(in oklch, var(--fg) 22%, transparent);
}

.deal-drop-card:hover {
  transform: translateY(-3px);
  box-shadow:
    0 1px 2px color-mix(in oklch, var(--fg) 12%, transparent),
    0 24px 56px -32px color-mix(in oklch, var(--fg) 46%, transparent);
}

/* Wire-step badge nudges forward when card lifts */
.wire-step b {
  transition: transform var(--dur-base) var(--ease-out);
}
.wire-step:hover b {
  transform: translateY(-1px);
}

/* ─── CTA buttons ──────────────────────────────────────────── */
body.landing-shell .hero-copy__actions a,
.wire-button-row a {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  transition:
    transform var(--dur-fast) var(--ease-out),
    background var(--dur-fast) var(--ease-out),
    box-shadow var(--dur-fast) var(--ease-out);
}

body.landing-shell .hero-copy__actions a:hover,
.wire-button-row a:hover {
  transform: translateY(-1px);
  background: var(--tw-forest-deep);
  box-shadow:
    0 4px 14px -3px color-mix(in oklch, var(--tw-forest) 38%, transparent),
    0 2px 4px  -1px color-mix(in oklch, var(--tw-forest) 26%, transparent);
}

body.landing-shell .hero-copy__actions a:active,
.wire-button-row a:active {
  transform: translateY(0);
  transition-duration: 90ms;
}

/* Shimmer sweep across the CTA on hover */
body.landing-shell .hero-copy__actions a::before,
.wire-button-row a::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(
    115deg,
    transparent 32%,
    color-mix(in oklch, #ffffff 28%, transparent) 50%,
    transparent 68%
  );
  transform: translateX(-120%);
  transition: transform 720ms var(--ease-out);
  pointer-events: none;
}
body.landing-shell .hero-copy__actions a:hover::before,
.wire-button-row a:hover::before {
  transform: translateX(120%);
}

/* ─── FAQ ──────────────────────────────────────────────────── */
.faq-item {
  transition:
    border-color var(--dur-base) var(--ease-out),
    background   var(--dur-base) var(--ease-out);
}
.faq-item:hover {
  border-color: color-mix(in oklch, var(--fg) 22%, transparent);
  background:   color-mix(in oklch, var(--tw-paper) 92%, transparent);
}

/* Replace the +/- content swap with a single + that rotates 45deg
   on open. Content swap can't transition; rotate can. */
.faq-item summary::after,
.faq-item[open] summary::after {
  content: "+";
}
.faq-item summary::after {
  transition:
    transform   var(--dur-base) var(--ease-out),
    background  var(--dur-base) var(--ease-out),
    border-color var(--dur-base) var(--ease-out),
    color       var(--dur-base) var(--ease-out);
}
.faq-item[open] summary::after {
  transform: translateY(-50%) rotate(45deg);
  background: var(--tw-forest);
  border-color: var(--tw-forest);
  color: #fff;
}

.faq-item p {
  animation: mo-rise var(--dur-base) var(--ease-out) both;
}

/* ─── Reduced motion ───────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  /* Replace motion with a brief cross-fade, never zero because it would pop. */
  body.landing-shell .hero-copy__eyebrow,
  body.landing-shell .hero-copy h1,
  body.landing-shell .hero-copy__body,
  body.landing-shell .hero-copy__actions,
  .faq-item p {
    animation-duration: 120ms;
    animation-delay: 0ms;
  }

  @supports (animation-timeline: view()) {
    .wire-eyebrow,
    .wire-copy-block h2,
    .wire-section-head h2,
    .wire-final h2,
    .wire-copy-block p:not(.wire-eyebrow),
    .voc-card,
    .wire-step,
    .feedback-pane,
    .fit-card,
    .faq-item,
    .record-strip article,
    .product-shot,
    .deal-drop-card,
    .shell-peek__inner {
      animation: none;
      opacity: 1;
      transform: none;
    }
  }

  /* Keep color and border transitions, drop position changes */
  .voc-card:hover,
  .wire-step:hover,
  .feedback-pane:hover,
  .fit-card:hover,
  .product-shot:hover,
  .record-strip article:hover,
  .deal-drop-card:hover,
  body.landing-shell .hero-copy__actions a:hover,
  .wire-button-row a:hover,
  .wire-step:hover b {
    transform: none;
  }
  body.landing-shell .hero-copy__actions a::before,
  .wire-button-row a::before {
    display: none;
  }
}