/* Scroll polish: hero entrance, staggered chapter reveals, chapter
 * focus transitions, progress bar, micro-interactions.
 * Only transform and opacity are animated. Everything that hides content
 * waits for html.polish (set by js/polish.js) and lives inside
 * prefers-reduced-motion: no-preference, so no-JS and reduced-motion
 * visitors always get the full static page. */

/* Top scroll progress bar (always present; static under reduced motion). */
.scroll-progress {
  position: fixed; inset: 0 0 auto 0; height: 3px; z-index: 30;
  background: linear-gradient(90deg, var(--accent), #8b7bff);
  transform-origin: 0 50%; transform: scaleX(0);
  pointer-events: none;
}

@media (prefers-reduced-motion: no-preference) {
  /* Restrained motion (task-motion-premium): opacity + small translate only,
     220-360 ms, ease-out, short staggers. Nothing waits more than ~200 ms
     to start, and nothing is ever dimmed once revealed. */

  /* 1. Hero entrance: everything is legible within ~0.5 s. */
  .polish .hero > * {
    animation: rise 360ms var(--ease-out) both;
  }
  .polish .hero > .hero-status { animation-delay: 0ms; }
  .polish .hero > .hero-name   { animation-delay: 30ms; }
  .polish .hero > .hero-hook   { animation-delay: 60ms; }
  .polish .hero > .hero-who    { animation-delay: 90ms; }
  .polish .hero > .hero-cta    { animation-delay: 120ms; }
  .polish .hero > .metrics     { animation-delay: 0ms; animation-name: fade; }
  .polish .hero .metric        { animation: rise 360ms var(--ease-out) both; }
  .polish .hero .metric:nth-child(1) { animation-delay: 140ms; }
  .polish .hero .metric:nth-child(2) { animation-delay: 170ms; }
  .polish .hero .metric:nth-child(3) { animation-delay: 200ms; }
  .polish .hero > .skim        { animation-delay: 200ms; }
  .polish .hero > .site-hint   { animation-delay: 240ms; }
  .site-hint::after { content: " ↓"; display: inline-block; animation: nudge 2.4s ease-in-out 1.5s 3; }

  /* 2. Chapter copy: soft fade + 10px rise, triggered before the section is
     fully on screen (js/engine.js rootMargin), 40 ms staggers. */
  .polish .scene .chapter-kicker,
  .polish .scene .chapter-title,
  .polish .scene .chapter-body,
  .polish .scene .chapter-takeaway,
  .polish .scene .scene-stage,
  .polish .scene .case-card,
  .polish .scene .now-card,
  .polish .scene .labs-note,
  .polish .scene .chapter-contact {
    opacity: 0; transform: translate3d(0, 10px, 0);
    transition: opacity 320ms var(--ease-out), transform 360ms var(--ease-out);
  }
  .polish .scene.is-revealed .chapter-kicker   { transition-delay: 0ms; }
  .polish .scene.is-revealed .chapter-title    { transition-delay: 40ms; }
  .polish .scene.is-revealed .chapter-body     { transition-delay: 80ms; }
  .polish .scene.is-revealed .chapter-takeaway { transition-delay: 120ms; }
  .polish .scene.is-revealed .scene-stage      { transition-delay: 160ms; }
  .polish .scene.is-revealed .case-card        { transition-delay: 200ms; }
  .polish .scene.is-revealed .now-card:nth-child(1) { transition-delay: 160ms; }
  .polish .scene.is-revealed .now-card:nth-child(2) { transition-delay: 200ms; }
  .polish .scene.is-revealed :is(.now-card:nth-child(n+3), .labs-note) { transition-delay: 240ms; }
  .polish .scene.is-revealed :is(.chapter-kicker, .chapter-title, .chapter-body, .chapter-takeaway, .scene-stage, .case-card, .now-card, .labs-note, .chapter-contact) {
    opacity: 1; transform: none;
  }
  .polish .scene.is-instant :is(.chapter-kicker, .chapter-title, .chapter-body, .chapter-takeaway, .scene-stage, .case-card, .now-card, .labs-note, .chapter-contact) {
    transition: none;
  }

  /* Takeaway accent line draws in (scaleX). */
  .chapter-takeaway { position: relative; }
  .polish .chapter-takeaway::before {
    content: ""; position: absolute; left: 0; top: -0.6rem; width: 3rem; height: 2px;
    background: var(--accent); transform: scaleX(0); transform-origin: 0 50%;
    transition: transform 400ms var(--ease-out) 200ms;
  }
  .polish .scene.is-revealed .chapter-takeaway::before { transform: scaleX(1); }

  /* 3. Contact section reveal. */
  .polish .contact { opacity: 0; transform: translate3d(0, 12px, 0);
    transition: opacity 320ms var(--ease-out), transform 360ms var(--ease-out); }
  .polish .contact.is-in { opacity: 1; transform: none; }

  /* 4. Micro-interactions: a 2px lift and a soft glow, no 3D tilt. The lift
     waits for the reveal so it never fights the entrance transition. */
  .now-card, .metric { position: relative; overflow: hidden; }
  .now-card::after, .metric::after {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background: radial-gradient(14rem 14rem at 50% 0%, rgba(100, 255, 218, 0.12), transparent 70%);
    opacity: 0; transition: opacity 220ms var(--ease-out);
  }
  .now-card:hover::after, .now-card:focus-within::after, .metric:hover::after { opacity: 1; }
  .polish .scene.is-revealed .now-card {
    transition: opacity 320ms var(--ease-out), transform 220ms var(--ease-out);
  }
  .polish .scene.is-revealed .now-card:is(:hover, :focus-within) { transform: translate3d(0, -2px, 0); }
  .metric { transition: transform 220ms var(--ease-out); }
  .metric:hover { transform: translate3d(0, -2px, 0); }

  .btn { position: relative; overflow: hidden; transition: transform 160ms var(--ease-out); }
  .btn::after {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, 0.28) 50%, transparent 70%);
    transform: translate3d(-120%, 0, 0); pointer-events: none;
  }
  .btn:hover::after, .btn:focus-visible::after { transform: translate3d(120%, 0, 0); transition: transform 500ms var(--ease-out); }
  .btn:hover { transform: translate3d(0, -1px, 0); }
  .btn:active { transform: scale(0.98); }
}

@keyframes rise { from { opacity: 0; transform: translate3d(0, 10px, 0); } to { opacity: 1; transform: none; } }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes nudge { 0%, 100% { transform: translate3d(0, 0, 0); } 50% { transform: translate3d(0, 4px, 0); } }

/* Reduced motion: no transforms, no hidden states, static progress bar. */
@media (prefers-reduced-motion: reduce) {
  .scroll-progress { transition: none; }
  .site-hint::after { content: none; }
}