/* Future Proof Foundry · Motion layer
 * Premium, editorial motion for the paper/ink design language.
 * Loaded on every page AFTER site-white.css (index) / page.css (all other routes).
 *
 * Safety contract:
 *   1. Every rule is gated by BOTH `html.js-motion` (added by page.js) AND
 *      `@media (prefers-reduced-motion: no-preference)`.
 *   2. If JS never runs, `.js-motion` is absent -> no hidden states -> content
 *      is fully visible (no opacity:0 traps).
 *   3. Reduced-motion users match the media query's negative case -> zero motion,
 *      identical to the prior static experience.
 * Reveal selector lists are mirrored in page.js (motion IIFE) — keep in sync.
 * Uses only transform/opacity for scroll work; --ease/--accent resolve on both
 * stylesheets (defined in tokens.css) with literal fallbacks.
 */

@keyframes fpfRevealUp {
  from { opacity: 0; transform: translateY(24px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes fpfRevealFade {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes fpfHeadline {
  from { opacity: 0; transform: translateY(0.34em); clip-path: inset(0 0 105% 0); }
  to { opacity: 1; transform: translateY(0); clip-path: inset(-18% -18% -18% -18%); }
}
@keyframes fpfTrackInSmall {
  from { opacity: 0; letter-spacing: 0.34em; }
  to { opacity: 1; letter-spacing: 0.04em; }
}
@keyframes fpfTrackInWide {
  from { opacity: 0; letter-spacing: 0.42em; }
  to { opacity: 1; letter-spacing: 0.14em; }
}
@keyframes fpfPop {
  from { opacity: 0; transform: scale(0.72); }
  to { opacity: 1; transform: scale(1); }
}
@keyframes fpfFlow {
  0% { left: 0; opacity: 0; }
  15% { opacity: 1; }
  85% { opacity: 1; }
  100% { left: 100%; opacity: 0; }
}

@media (prefers-reduced-motion: no-preference) {
  /* ---------------------------------------------------------------------
   * 1. Hero entrance sequence (index + secondary heroes)
   * ------------------------------------------------------------------- */
  html.js-motion .hero > .overline {
    animation: fpfTrackInSmall 0.8s var(--ease, cubic-bezier(.16, 1, .3, 1)) both;
  }
  html.js-motion .hero .eyebrow {
    display: inline-block;
    animation: fpfTrackInWide 0.8s var(--ease, cubic-bezier(.16, 1, .3, 1)) both;
  }
  html.js-motion .hero h1 {
    animation: fpfHeadline 0.85s var(--ease, cubic-bezier(.16, 1, .3, 1)) 0.08s both;
  }
  html.js-motion .hero-intro > p,
  html.js-motion .hero .lead {
    animation: fpfRevealUp 0.7s var(--ease, cubic-bezier(.16, 1, .3, 1)) 0.16s both;
  }
  html.js-motion .hero-actions,
  html.js-motion .hero .cta-row {
    animation: fpfRevealUp 0.7s var(--ease, cubic-bezier(.16, 1, .3, 1)) 0.24s both;
  }

  /* ---------------------------------------------------------------------
   * 2. Sitewide scroll reveals (JS toggles .is-visible)
   *    FADE_UP: opacity + translateY.  FADE_ONLY: opacity (elements that
   *    carry their own :hover transform, so we never fight it).
   * ------------------------------------------------------------------- */
  html.js-motion :is(
    .section-heading,
    .offer-index > li,
    .install-spec > article,
    .engagements > article,
    .result-ledger > article,
    .testimonials > article,
    .founder-section > div,
    .trusted,
    .system-stage,
    .list > li,
    .band,
    .faq details,
    .final-cta > p,
    .final-cta > h2,
    [data-reveal]
  ) {
    opacity: 0;
    transform: translateY(24px);
  }
  html.js-motion :is(
    .section-heading,
    .offer-index > li,
    .install-spec > article,
    .engagements > article,
    .result-ledger > article,
    .testimonials > article,
    .founder-section > div,
    .trusted,
    .system-stage,
    .list > li,
    .band,
    .faq details,
    .final-cta > p,
    .final-cta > h2,
    [data-reveal]
  ).is-visible {
    animation: fpfRevealUp 0.7s var(--ease, cubic-bezier(.16, 1, .3, 1)) both;
  }

  html.js-motion .card { opacity: 0; }
  html.js-motion .card.is-visible {
    animation: fpfRevealFade 0.7s var(--ease, cubic-bezier(.16, 1, .3, 1)) both;
  }

  /* Section headings: short accent rule scaling in from the left. */
  html.js-motion .section-heading { position: relative; }
  html.js-motion .section-heading::before {
    content: "";
    position: absolute;
    top: -1rem;
    left: 0;
    width: 2.5rem;
    height: 2px;
    background: var(--accent, #a84f2a);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.6s var(--ease, cubic-bezier(.16, 1, .3, 1)) 0.15s;
  }
  html.js-motion .section-heading.is-visible::before { transform: scaleX(1); }
  html.js-motion .section-heading.inverse::before { background: var(--accent, #a84f2a); }

  /* ---------------------------------------------------------------------
   * 3. System-stage choreography — the signature moment (index)
   * ------------------------------------------------------------------- */
  html.js-motion .system-stage figcaption { opacity: 0; }
  html.js-motion .system-stage .surface-list span,
  html.js-motion .system-stage .worker-list span { opacity: 0; transform: translateY(10px); }
  html.js-motion .system-stage .orchestrator { opacity: 0; transform: scale(0.72); }

  html.js-motion .system-stage.is-visible figcaption {
    animation: fpfRevealFade 0.6s var(--ease, cubic-bezier(.16, 1, .3, 1)) both;
  }
  html.js-motion .system-stage.is-visible .surface-list span,
  html.js-motion .system-stage.is-visible .worker-list span {
    animation: fpfRevealUp 0.5s var(--ease, cubic-bezier(.16, 1, .3, 1)) both;
  }
  html.js-motion .system-stage.is-visible .surface-list span:nth-child(1) { animation-delay: 0.15s; }
  html.js-motion .system-stage.is-visible .surface-list span:nth-child(2) { animation-delay: 0.22s; }
  html.js-motion .system-stage.is-visible .surface-list span:nth-child(3) { animation-delay: 0.29s; }
  html.js-motion .system-stage.is-visible .surface-list span:nth-child(4) { animation-delay: 0.36s; }
  html.js-motion .system-stage.is-visible .surface-list span:nth-child(5) { animation-delay: 0.43s; }
  html.js-motion .system-stage.is-visible .surface-list span:nth-child(6) { animation-delay: 0.50s; }
  html.js-motion .system-stage.is-visible .orchestrator {
    animation: fpfPop 0.6s var(--ease, cubic-bezier(.16, 1, .3, 1)) 0.5s both;
  }
  html.js-motion .system-stage.is-visible .worker-list span:nth-child(1) { animation-delay: 0.68s; }
  html.js-motion .system-stage.is-visible .worker-list span:nth-child(2) { animation-delay: 0.75s; }
  html.js-motion .system-stage.is-visible .worker-list span:nth-child(3) { animation-delay: 0.82s; }
  html.js-motion .system-stage.is-visible .worker-list span:nth-child(4) { animation-delay: 0.89s; }
  html.js-motion .system-stage.is-visible .worker-list span:nth-child(5) { animation-delay: 0.96s; }
  html.js-motion .system-stage.is-visible .worker-list span:nth-child(6) { animation-delay: 1.03s; }

  /* Flow lines: draw in on desktop, then a continuous accent pulse travels them. */
  @media (min-width: 1121px) {
    html.js-motion .system-stage .flow-line { transform: scaleX(0); transform-origin: left; }
    html.js-motion .system-stage.is-visible .flow-line {
      transform: scaleX(1);
      transition: transform 0.6s var(--ease, cubic-bezier(.16, 1, .3, 1)) 0.4s;
    }
    html.js-motion .system-stage.is-visible .flow-line { position: relative; }
    html.js-motion .system-stage.is-visible .flow-line::before {
      content: "";
      position: absolute;
      top: 50%;
      left: 0;
      width: 2.2rem;
      height: 2px;
      transform: translate(-50%, -50%);
      background: linear-gradient(90deg, transparent, var(--accent, #a84f2a), transparent);
      opacity: 0;
      animation: fpfFlow 2.6s var(--ease, cubic-bezier(.16, 1, .3, 1)) 1.1s infinite;
      will-change: left, opacity;
    }
  }
  @media (max-width: 1120px) {
    html.js-motion .system-stage .flow-line { opacity: 0; }
    html.js-motion .system-stage.is-visible .flow-line {
      animation: fpfRevealFade 0.5s var(--ease, cubic-bezier(.16, 1, .3, 1)) 0.4s both;
    }
  }

  /* ---------------------------------------------------------------------
   * 4. Micro-interactions
   * ------------------------------------------------------------------- */
  /* Button accent underline sweep (existing hover lift is preserved). */
  html.js-motion .button,
  html.js-motion .btn { position: relative; }
  html.js-motion .button::before,
  html.js-motion .btn::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 2px;
    background: var(--accent, #a84f2a);
    transform: scaleX(0);
    transform-origin: right;
    transition: transform 0.35s var(--ease, cubic-bezier(.16, 1, .3, 1));
  }
  html.js-motion .button:hover::before,
  html.js-motion .btn:hover::before { transform: scaleX(1); transform-origin: left; }

  /* List hover: inset accent edge. */
  html.js-motion .offer-index li { transition: padding 0.18s var(--ease, cubic-bezier(.16, 1, .3, 1)), background 0.18s var(--ease, cubic-bezier(.16, 1, .3, 1)), box-shadow 0.18s var(--ease, cubic-bezier(.16, 1, .3, 1)); }
  html.js-motion .offer-index li:hover { box-shadow: inset 3px 0 0 var(--accent, #a84f2a); }
  html.js-motion .list li { transition: color 0.18s var(--ease, cubic-bezier(.16, 1, .3, 1)), box-shadow 0.18s var(--ease, cubic-bezier(.16, 1, .3, 1)); }
  html.js-motion .list li:hover { box-shadow: inset 3px 0 0 var(--accent, #a84f2a); }

  /* Header gains blur + shadow after scroll (JS toggles .is-scrolled). */
  html.js-motion .site-header,
  html.js-motion .topbar {
    transition: box-shadow 0.3s var(--ease, cubic-bezier(.16, 1, .3, 1)), backdrop-filter 0.3s var(--ease, cubic-bezier(.16, 1, .3, 1)), background-color 0.3s var(--ease, cubic-bezier(.16, 1, .3, 1));
  }
  html.js-motion .site-header.is-scrolled,
  html.js-motion .topbar.is-scrolled {
    box-shadow: 0 10px 30px -18px rgba(16, 16, 16, 0.5);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    background-color: color-mix(in srgb, var(--paper, #f5f3ee) 82%, transparent);
  }

  /* Marquee: pause the infinite scroll on hover. */
  html.js-motion .marquee:hover .marquee-track { animation-play-state: paused; }
}