/* Gio system 2026 - motion. Everything here is inside no-preference.
   Without it (reduced motion, old browsers) the page is fully static and complete.
   Rules: transform/opacity only, no layout shift, never on running text,
   never animate the LCP element from opacity 0. Budget: 0 JS, 0 libraries. */

@property --n{syntax:"<integer>";inherits:false;initial-value:0}

/* Progress bar exists only with scroll timelines. */
.progress{display:none}

/* Ticker static fallback: wraps as a plain list. */
.ticker__track{flex-wrap:wrap;width:auto}

@media (prefers-reduced-motion: no-preference){

  /* 1. Hero entrance: transform only, LCP text and photo are painted at once. */
  @keyframes rise{from{translate:0 1.25rem}to{translate:0 0}}
  @keyframes slide-in{from{translate:-1.5rem 0}to{translate:0 0}}
  @keyframes pop{from{translate:0 1.5rem;scale:.96}to{translate:0 0;scale:1}}
  .m-hero > *{animation:rise var(--d-slow) var(--ease-out) both}
  .m-hero > *:nth-child(2){animation-delay:.06s}
  .m-hero > *:nth-child(3){animation-delay:.12s}
  .m-hero > *:nth-child(4){animation-delay:.18s}
  .m-hero-photo{animation:pop .8s var(--ease-snap) .1s both}
  .m-hero-slant{animation:slide-in var(--d-slow) var(--ease-out) both}

  /* 2. Cards: the round 6 sweep lives in home.css (the card box never moves). */
  @keyframes tick-up{from{--n:0}}
  .btn{transition:transform var(--d-fast) var(--ease-out)}
  .btn:hover{transform:translateY(-2px)}
  .btn:active{transform:translateY(1px) scale(.98)}
  /* 3. Ticker (h5): no auto-run and no Pause button. It moves only while the visitor scrolls
        (home.js, scripting enabled only; see home.css). Nothing on the page moves on its own. */

  /* 4. Scroll-driven: reveals and giant numbers. Guarded; without support
        everything just sits there, already visible. */
  @supports (animation-timeline: view()){
    @keyframes reveal{from{translate:0 3rem;scale:.97}to{translate:0 0;scale:1}}
    @keyframes num-in{from{translate:18% 0}to{translate:0 0}}
    @keyframes count{from{--n:0}}
    @keyframes grow{from{transform:scaleX(0)}to{transform:scaleX(1)}}
    .reveal{animation:reveal linear both;animation-timeline:view();animation-range:entry 0% entry 55%}
    .week__n{animation:num-in linear both;animation-timeline:view();animation-range:entry 0% entry 80%}
    /* h3 fix: counters are NOT scrubbed by scroll any more. A reader who stopped mid-range saw a
       wrong number (8 MIN on a 12 min workout). They tick once on a clock: see .tick.in in home.css. */
    .progress{display:block;position:fixed;left:0;top:0;height:.3125rem;width:100%;background:var(--yellow);transform-origin:0 50%;z-index:30;animation:grow linear both;animation-timeline:scroll(root)}
    @keyframes parallax{to{translate:0 -2.5rem}}
    /* h3 fix: .m-parallax goes on a WRAPPER of .m-hero-photo; on the same element the
       parallax animation replaced the pop entrance (both set animation and translate). */
    .m-parallax{animation:parallax linear both;animation-timeline:scroll(root);animation-range:0 70vh}
  }

  /* 5. Cross-document View Transitions (home <-> plan). Chromium and Safari 18.2+;
        others just navigate. Shared elements are named, the rest cross-fades. */
  @view-transition{navigation:auto}
  .vt-tab{view-transition-name:gio-tab}
  .vt-min{view-transition-name:big-minutes}
  ::view-transition-group(*){animation-duration:var(--d-view);animation-timing-function:var(--ease-out)}
  ::view-transition-old(root){animation:vt-out .18s ease both}
  ::view-transition-new(root){animation:vt-in .26s ease .04s both}
  @keyframes vt-out{to{opacity:0}}
  @keyframes vt-in{from{opacity:0}}
}