/* hz-motion.css (2026-11-01) - Horizon motion polish for every redesign page. Loaded last in hzHeadCss(); every rule is under html[data-rd] (flag-off untouched).
   Law: transform/opacity only, no transition:all, <=2 ambient loops (none now), reduced motion respected, no layout-shifting motion, stagger in CSS (--i), no JS timers.
   Rollback: remove the hz-motion.css <link> in includes/hz-chrome.php. */

/* 1. entrance: one keyframe with ONLY a from-state, so the end state is the element's natural style, "backwards" fill releases the compositor layer once it has played */
@keyframes hzrise{from{opacity:0;transform:translate3d(0,12px,0)}}
html[data-rd] .rise{animation:hzrise 520ms var(--hz-out,cubic-bezier(.23,1,.32,1)) backwards;animation-delay:calc(min(var(--i,0),9)*55ms)}
/* below the hero the reveal is tied to scroll position (no timers, no observers, nothing to release): each block eases in as it enters the viewport */
@supports (animation-timeline:view()){@media (prefers-reduced-motion:no-preference){
  html[data-rd] .sec .rise{animation:hzrise linear backwards;animation-timeline:view();animation-range:entry 0% entry 38%;animation-delay:0s}
}}

/* 1b. home hero (legacy tevos-index.css entrances: 900ms/1200ms, fill "both" which kept 8 hero elements on their own compositor layers for the life of the page): same stagger delays, shorter, released after playing */
html[data-rd] .hero-text>*{animation-name:hzrise;animation-duration:640ms;animation-timing-function:var(--hz-out,cubic-bezier(.23,1,.32,1));animation-fill-mode:backwards}
html[data-rd] .score-card{animation-duration:800ms;animation-fill-mode:backwards}
html[data-rd] .aurora-blob{will-change:auto}

/* 2. layer diet: the sun/moon bodies are static transforms, they do not need a promoted layer of their own; the night sky layer is promoted by its own opacity transition while it runs */
html[data-rd] .hz-body{will-change:auto}
html[data-rd] .hz-scene[data-sk=night]{will-change:auto}

/* 3. micro-interactions: press is a transform, instant-feeling (80ms); hover/focus colour changes stay instant (no colour tween), nothing animates paint properties */
html[data-rd] :is(a,button,input,.btn,.card,.chip,.tr,.hd__menu,.ask){transition-property:transform,opacity}
html[data-rd] :is(.btn,.btn-primary,.btn-signin,.drawer-btn,.es-cta,.ask,.cn__m,.hz-switch button):active{transform:scale(.97);transition-duration:80ms}

/* 4. reduced motion: nothing moves, nothing fades; content is simply there */
@media (prefers-reduced-motion:reduce){
  html[data-rd] *,html[data-rd] *::before,html[data-rd] *::after{animation-duration:.01ms!important;animation-delay:0s!important;animation-iteration-count:1!important;animation-timeline:auto!important;transition:none!important;scroll-behavior:auto!important}
}

/* 5. /bands.php: 16 sections (87 cells, ~2.6k nodes) were all laid out and styled in the first task (275ms layout at 4x). From the third section on, skip render work until near the viewport.
   "auto" remembers the real height after first render, so there is no repeated shift; the estimate is the median section height (desktop 600px, phone 1400px). */
html[data-rd] .bd-section~.bd-section~.bd-section{content-visibility:auto;contain-intrinsic-size:auto 600px}
@media (max-width:640px){html[data-rd] .bd-section~.bd-section~.bd-section{contain-intrinsic-size:auto 1400px}}

/* 6. closed overlays are not painted: the menu dropdown panels and the two scrims were opacity:0 but still visible, so each held a compositor layer (3 of the 21). visibility flips after the fade out (delay = the fade), and instantly on open (the open rules never transition visibility). */
html[data-rd] .nav-item:not(.open) .nav-panel{visibility:hidden;transition:opacity .25s var(--ease),transform .25s var(--spring),visibility 0s linear .25s}
html[data-rd] .modal-scrim:not(.open){visibility:hidden;transition:opacity .14s ease-out,visibility 0s linear .14s}
html[data-rd] .drawer-scrim:not(.open){visibility:hidden;transition:opacity .2s ease-out,visibility 0s linear .2s}

/* 7. (r3) morning sky has --star:0, so its star field is invisible: do not keep it as a compositor layer (desktop morning 17 -> 16 visible layers). The night scene keeps its stars. */
html[data-rd] .hz-scene[data-sk=morning] .hz-stars{display:none}

/* 8. (r3) the scroll-linked scene blob/ribbon fades animated  (a filter animation: main-thread raster + extra layer cost); same visual, opacity only. Same keyframe names, so this later definition wins. */
@keyframes fzblob{to{opacity:.25}}
@keyframes fzrib{to{opacity:0}}

/* 9. (r3) mobile menu sheet: a backdrop blur over the whole page re-rasters the page behind it on every frame of the 220ms slide (long frames at 4x). The sheet is now near-opaque instead (no blur), same gradients; the scrim still dims the page. */
html[data-rd] .hzm{-webkit-backdrop-filter:none;backdrop-filter:none;
  background:radial-gradient(120% 55% at 100% 0%,var(--hz-aur1),transparent 62%),radial-gradient(110% 45% at 0% 100%,var(--hz-glow),transparent 66%),color-mix(in srgb,var(--hz-pop) 98%,transparent)}