/* Motion foundation: state hooks, the few transitions that exist, and reduced motion.
   Animate transform and opacity only. Default DOM state is the final state; a story root
   receives .is-armed only from JavaScript when motion is allowed. */

/* State hooks. No-ops for now: each story module (Tasks 3–6) defines what its own
   .is-armed / .is-playing / .is-complete mean, scoped to its root. */
.is-armed,
.is-playing,
.is-complete {
  /* intentionally empty */
}

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }

  .button,
  .chip,
  .nav-links a,
  .nav-signin,
  .wordmark,
  .faq-list summary,
  .faq-list summary::before,
  .faq-list summary::after,
  .contact-form input,
  .site-nav {
    transition:
      background-color var(--dur-hover) var(--ease-snap),
      border-color var(--dur-hover) var(--ease-snap),
      color var(--dur-hover) var(--ease-snap),
      text-decoration-color var(--dur-hover) var(--ease-snap),
      transform var(--dur-value) var(--ease-snap);
  }

  .parallax-layer {
    will-change: transform;
    transition: transform var(--dur-stage) var(--ease-field);
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    animation-delay: 0s !important;
    transition-delay: 0s !important;
    scroll-behavior: auto !important;
  }

  /* Parallax and any pre-animation state collapse to the final, visible layout. */
  .parallax-layer,
  [data-parallax] {
    transform: none !important;
  }

  .is-armed,
  .is-armed *,
  .is-playing,
  .is-playing * {
    opacity: 1 !important;
    transform: none !important;
    visibility: visible !important;
  }
}

/* ---------------------------------------------------------------------------
   Quiet field. One finite text reveal; lifecycle panels settle without layout
   motion after direct or automatic selection.
   --------------------------------------------------------------------------- */

@media (prefers-reduced-motion: no-preference) {
  .hero-message > .eyebrow {
    animation: quiet-field-text-reveal 480ms var(--ease-field) both;
  }

  .hero-message > h1 {
    animation: quiet-field-text-reveal 620ms var(--ease-field) 80ms both;
  }

  .hero-visual[data-enhanced] .lifecycle-panel {
    transition: opacity 420ms var(--ease-snap), transform 420ms var(--ease-snap);
  }

  @starting-style {
    .hero-visual[data-enhanced] .lifecycle-panel:not([hidden]) {
      opacity: 0;
      transform: translateY(6px);
    }
  }

  @keyframes quiet-field-text-reveal {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: none; }
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-message > .eyebrow,
  .hero-message > h1,
  .hero-visual .lifecycle-panel {
    animation: none !important;
    transition: none !important;
    transform: none !important;
  }

  .hero-visual [data-autoplay-stop] {
    display: none !important;
  }
}

/* The explorer sheet arrives with a little paper weight; the scrim fades. */
@media (prefers-reduced-motion: no-preference) {
  .has-js .explorer.is-open {
    animation: explorer-scrim 220ms var(--ease-snap) both;
  }

  .has-js .explorer.is-open .explorer-panel {
    animation: explorer-sheet 300ms var(--ease-field) both;
  }

  @keyframes explorer-scrim {
    from { opacity: 0; }
    to { opacity: 1; }
  }

  @keyframes explorer-sheet {
    from { opacity: 0; transform: translateY(16px); }
    to { opacity: 1; transform: none; }
  }
}

/* Account story panels and the season marker. */
@media (prefers-reduced-motion: no-preference) {
  /* Outgoing panel fades first; the incoming one follows so the frame never shows two screens. */
  .has-js .story-panel {
    transition:
      opacity 220ms var(--ease-snap),
      transform 220ms var(--ease-snap),
      visibility 0s linear 220ms;
  }

  .has-js .story[data-state="position"] .story-panel[data-state="position"],
  .has-js .story[data-state="statements"] .story-panel[data-state="statements"],
  .has-js .story[data-state="context"] .story-panel[data-state="context"],
  .has-js .story[data-state="missing"] .story-panel[data-state="missing"],
  .has-js .story[data-state="arrive"] .story-panel[data-state="arrive"],
  .has-js .story[data-state="organize"] .story-panel[data-state="organize"],
  .has-js .story[data-state="read"] .story-panel[data-state="read"],
  .has-js .story[data-state="surface"] .story-panel[data-state="surface"],
  .has-js .story[data-state="update"] .story-panel[data-state="update"] {
    transition:
      opacity 360ms var(--ease-snap) 160ms,
      transform 360ms var(--ease-snap) 160ms,
      visibility 0s linear 0s;
  }

  .has-js .story-panels {
    transition: height var(--dur-stage) var(--ease-snap);
  }

  .season-marker {
    transition: transform var(--dur-stage) var(--ease-field);
  }
}

/* How-it-works path: drawn by default. Armed pulls the line back and hides the nodes;
   playing draws it left to right, the nodes landing as the line reaches them. */
.core-diagram.is-armed::before { transform: scaleX(0); }
.core-diagram.is-armed .core-node { opacity: 0; }

@media (prefers-reduced-motion: no-preference) {
  .core-diagram.is-playing::before {
    transition: transform 1400ms var(--ease-snap);
  }

  .core-diagram.is-playing .core-node {
    transition: opacity 320ms var(--ease-snap);
  }

  .core-diagram.is-playing .core-node--1 { transition-delay: 200ms; }
  .core-diagram.is-playing .core-node--2 { transition-delay: 650ms; }
  .core-diagram.is-playing .core-node--3 { transition-delay: 1100ms; }
  .core-diagram.is-playing .core-node--decision { transition-delay: 1450ms; }
}

@media (prefers-reduced-motion: reduce) {
  .core-diagram::before {
    transform: none !important;
  }

  .core-diagram .core-node {
    opacity: 1 !important;
  }
}

/* Living account: events light in order, each effect 200ms behind its event; the spine draws. */
.living-story.is-armed .event {
  opacity: 0;
  transform: translateY(6px);
}

.living-story.is-armed .event-effect {
  opacity: 0;
}

.living-story.is-armed .timeline::before {
  transform: scaleY(0);
}

.timeline::before {
  transform-origin: top;
}

@media (prefers-reduced-motion: no-preference) {
  .living-story.is-playing .event {
    transition:
      opacity var(--dur-value) var(--ease-snap),
      transform var(--dur-value) var(--ease-snap);
  }

  .living-story.is-playing .event-effect {
    transition: opacity var(--dur-value) var(--ease-snap);
  }

  .living-story.is-playing .timeline::before {
    transition: transform 2450ms linear;
  }

  .living-story.is-playing .event:nth-child(1) { transition-delay: 0ms; }
  .living-story.is-playing .event:nth-child(2) { transition-delay: 350ms; }
  .living-story.is-playing .event:nth-child(3) { transition-delay: 700ms; }
  .living-story.is-playing .event:nth-child(4) { transition-delay: 1050ms; }
  .living-story.is-playing .event:nth-child(5) { transition-delay: 1400ms; }
  .living-story.is-playing .event:nth-child(6) { transition-delay: 1750ms; }
  .living-story.is-playing .event:nth-child(7) { transition-delay: 2100ms; }
  .living-story.is-playing .event:nth-child(1) .event-effect { transition-delay: 200ms; }
  .living-story.is-playing .event:nth-child(2) .event-effect { transition-delay: 550ms; }
  .living-story.is-playing .event:nth-child(3) .event-effect { transition-delay: 900ms; }
  .living-story.is-playing .event:nth-child(4) .event-effect { transition-delay: 1250ms; }
  .living-story.is-playing .event:nth-child(5) .event-effect { transition-delay: 1600ms; }
  .living-story.is-playing .event:nth-child(6) .event-effect { transition-delay: 1950ms; }
  .living-story.is-playing .event:nth-child(7) .event-effect { transition-delay: 2300ms; }
}