/* hz-flip-smooth.css (2026-11-01 v2) - Horizon Morning<->Night flip with NO content dip and NO per-frame repaint. Load AFTER Horizon (+ fusion). Inert on pages without html[data-rd].
   Why: the old flip (a) transitioned 15 inherited @property colour tokens on :root for 900ms (whole-tree style recalc + gradient repaint every frame) and
   (b) hid the content for 160ms (.dip) to cover the ink swap, so the founder saw "just the dark colours, nothing else".
   Now: both skies are always painted as two stacked, pinned-token layers ([data-sk]); the NIGHT layer sits on top and fades by opacity (compositor only) over the always-opaque MORNING layer,
   so no frame ever shows a hole. Text/surface ink (data-hzink) steps ONCE, at the instant the sky blend crosses 50% (hz-flip-smooth.js), where both inks are >=3:1 on the blended sky.
   Content never fades. Without JS nothing flips at all, and the first paint is the right theme (head script sets data-theme/data-ink before any CSS). */
/* 1. no registered-colour interpolation on the root; the dip is dead */
html[data-rd],html[data-rd][data-theme=night],html[data-rd][data-hz=night]{transition:none!important}
html[data-rd] .hz-page.dip{animation:none!important}

/* 2. pinned scene tokens: each scene keeps its own palette forever, so nothing inside it ever changes colour (kit + live namespaces) */
html[data-rd] .hz-scene[data-sk=morning]{--sky-a:#0593C6;--sky-b:#5CBEE2;--sky-c:#B4E1F1;--sky-d:#EAF4FA;--ground:#F3F9FC;--limb:#F9FCFE;--glow:rgba(254,129,209,.40);--hot:rgba(254,129,209,.9);--aur1:rgba(255,255,255,.55);--aur2:rgba(16,91,255,.12);--rim:rgba(255,255,255,.95);--star:0;--mix:1;--sun-a:72deg;--moon-a:-72deg;
  --hz-sky-a:#0593C6;--hz-sky-b:#5CBEE2;--hz-sky-c:#B4E1F1;--hz-sky-d:#EAF4FA;--hz-ground:#F3F9FC;--hz-limb:#F9FCFE;--hz-glow:rgba(254,129,209,.40);--hz-hot:rgba(254,129,209,.9);--hz-aur1:rgba(255,255,255,.55);--hz-aur2:rgba(16,91,255,.12);--hz-rim:rgba(255,255,255,.95);--hz-star:0;--hz-mix:1;--hz-sun-a:72deg;--hz-moon-a:-72deg}
html[data-rd] .hz-scene[data-sk=night]{--sky-a:#02070A;--sky-b:#121A44;--sky-c:#0A3552;--sky-d:#1A2F86;--ground:#04101F;--limb:#0A2A5E;--glow:rgba(254,129,209,.22);--hot:rgba(254,129,209,.6);--aur1:rgba(20,200,208,.2);--aur2:rgba(12,165,196,.3);--rim:rgba(111,189,217,.5);--star:1;--mix:0;--sun-a:-72deg;--moon-a:56deg;
  --hz-sky-a:#02070A;--hz-sky-b:#121A44;--hz-sky-c:#0A3552;--hz-sky-d:#1A2F86;--hz-ground:#04101F;--hz-limb:#0A2A5E;--hz-glow:rgba(254,129,209,.22);--hz-hot:rgba(254,129,209,.6);--hz-aur1:rgba(20,200,208,.2);--hz-aur2:rgba(12,165,196,.3);--hz-rim:rgba(111,189,217,.5);--hz-star:1;--hz-mix:0;--hz-sun-a:-72deg;--hz-moon-a:56deg}
@media (max-width:640px){
  html[data-rd] .hz-scene[data-sk=morning]{--sun-a:70deg;--moon-a:-80deg;--hz-sun-a:70deg;--hz-moon-a:-80deg}
  html[data-rd] .hz-scene[data-sk=night]{--hot:rgba(254,129,209,.4);--rim:rgba(111,189,217,.3);--sun-a:-80deg;--moon-a:112deg;--hz-hot:rgba(254,129,209,.4);--hz-rim:rgba(111,189,217,.3);--hz-sun-a:-80deg;--hz-moon-a:112deg}
}

/* 2b. html-level sky tokens (read by the topbar tint, menu panels, washes and footers OUTSIDE the scenes) follow the ink step, not a frozen value: they change in the same single commit as the ink tokens, so a flip still
   costs ONE tree-wide style update. (v2 froze them to the night values, which tinted the morning topbar dark; the scenes themselves stay pinned above.) data-hzink is set by the head script on first paint, so there is no post-load colour jump. */
html[data-rd][data-hzink=morning]{--sky-a:#0593C6;--sky-b:#5CBEE2;--sky-c:#B4E1F1;--sky-d:#EAF4FA;--ground:#F3F9FC;--limb:#F9FCFE;--glow:rgba(254,129,209,.40);--hot:rgba(254,129,209,.9);--aur1:rgba(255,255,255,.55);--aur2:rgba(16,91,255,.12);--rim:rgba(255,255,255,.95);--star:0;--mix:1;--hz-sky-a:#0593C6;--hz-sky-b:#5CBEE2;--hz-sky-c:#B4E1F1;--hz-sky-d:#EAF4FA;--hz-ground:#F3F9FC;--hz-limb:#F9FCFE;--hz-glow:rgba(254,129,209,.40);--hz-hot:rgba(254,129,209,.9);--hz-aur1:rgba(255,255,255,.55);--hz-aur2:rgba(16,91,255,.12);--hz-rim:rgba(255,255,255,.95);--hz-star:0;--hz-mix:1}
html[data-rd][data-hzink=night]{--sky-a:#02070A;--sky-b:#121A44;--sky-c:#0A3552;--sky-d:#1A2F86;--ground:#04101F;--limb:#0A2A5E;--glow:rgba(254,129,209,.22);--hot:rgba(254,129,209,.6);--aur1:rgba(20,200,208,.2);--aur2:rgba(12,165,196,.3);--rim:rgba(111,189,217,.5);--star:1;--mix:0;--hz-sky-a:#02070A;--hz-sky-b:#121A44;--hz-sky-c:#0A3552;--hz-sky-d:#1A2F86;--hz-ground:#04101F;--hz-limb:#0A2A5E;--hz-glow:rgba(254,129,209,.22);--hz-hot:rgba(254,129,209,.6);--hz-aur1:rgba(20,200,208,.2);--hz-aur2:rgba(12,165,196,.3);--hz-rim:rgba(111,189,217,.5);--hz-star:1;--hz-mix:0}
@media (max-width:640px){html[data-rd][data-hzink=night]{--hot:rgba(254,129,209,.4);--rim:rgba(111,189,217,.3);--hz-hot:rgba(254,129,209,.4);--hz-rim:rgba(111,189,217,.3)}}
html[data-rd][data-rd]{background:#0A3552}
html[data-rd][data-rd][data-hzink=morning]{background:#B4E1F1}

/* 3. stack: [morning][night] in DOM order. Morning is always opaque; night fades on top. Opacity only (compositor).
   The fade runs in TWO phases keyed on html[data-fs]: A) night layer to exactly 50% (ease-in), JS then steps the ink while the sky is parked at 50% (both inks >=3:1 there)
   and only after that frame has been committed starts B) 50% to target (ease-out). So a slow main thread can never let the sky run past the swap: contrast is safe by construction.
   Without JS (no data-fs) the sky simply follows data-theme with no animation to speak of. */
html[data-rd] .hz-scene[data-sk=night]{opacity:0;will-change:opacity;transition:opacity 320ms cubic-bezier(0,0,.4,1)}
html[data-rd][data-fs=night] .hz-scene[data-sk=night],html[data-rd]:not([data-fs]):is([data-theme=night],[data-hz=night]) .hz-scene[data-sk=night]{opacity:1}
html[data-rd][data-fs=mid] .hz-scene[data-sk=night]{opacity:.5;transition:opacity 280ms cubic-bezier(.42,0,1,1)}
/* the moon rises / sets by transform in the same two phases */
html[data-rd] .hz-scene[data-sk=night] .hz-orbit{transform:translate3d(0,24px,0);transition:transform 320ms cubic-bezier(0,0,.4,1)}
html[data-rd][data-fs=night] .hz-scene[data-sk=night] .hz-orbit,html[data-rd]:not([data-fs]):is([data-theme=night],[data-hz=night]) .hz-scene[data-sk=night] .hz-orbit{transform:none}
html[data-rd][data-fs=mid] .hz-scene[data-sk=night] .hz-orbit{transform:translate3d(0,12px,0);transition:transform 280ms cubic-bezier(.42,0,1,1)}
/* (a "pause hidden night layer animations" rule lived here: its `*` subject made every data-fs/data-theme change invalidate the whole tree, ~130ms on /bands.php at 4x; hz-soft.css already sets those loops to none) */

/* 4. page-long atmosphere (kit): two translucent washes, swapped with the ink in the same frame (no per-frame work on a page-tall layer; a transition on these pseudo-elements cost more than it looked) */
html[data-rd] .hz-page::before{--glow:rgba(254,129,209,.40);--sky-c:#B4E1F1;--sky-a:#0593C6}
html[data-rd] .hz-page::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:0;--glow:rgba(254,129,209,.22);--sky-c:#0A3552;--sky-a:#02070A;
  background:radial-gradient(ellipse 46% 420px at 88% 860px,var(--glow),transparent 72%),radial-gradient(ellipse 50% 460px at 6% 1760px,var(--glow),transparent 72%),
   radial-gradient(ellipse 60% 520px at 92% 2620px,var(--glow),transparent 72%),radial-gradient(ellipse 80% 340px at 50% 100%,var(--glow),transparent 70%),
   linear-gradient(180deg,transparent 14%,color-mix(in srgb,var(--sky-c) 70%,transparent) 62%,color-mix(in srgb,var(--sky-a) 90%,transparent) 100%)}
html[data-rd][data-hzink=night] .hz-page::before,html[data-rd]:not([data-hzink])[data-ink=night] .hz-page::before{opacity:0}
html[data-rd][data-hzink=night] .hz-page::after,html[data-rd]:not([data-hzink])[data-ink=night] .hz-page::after{opacity:1}

/* 5. ink: same two token sets Horizon uses, keyed on data-hzink (set by hz-flip-smooth.js at the 50% point). Same specificity as data-ink rules, loaded later, so they win once JS is up. */
html[data-rd][data-hzink=morning]{--ink:#02070A;--ink-2:#0A1A36;--surface:rgba(255,255,255,.80);--line:rgba(9,49,141,.16);--border:#35527A;--link:#091B4A;--pink-text:#B01F73;--bar:#09318D;--edge:#C0267F;color-scheme:light;--pop:#FFFFFF;--bar-lo:#0A76A3;--grib:rgba(9,49,141,.05);--toplight:rgba(255,255,255,.55);--gline:rgba(255,255,255,.95);
  --hz-ink:#02070A;--hz-ink2:#0A1A36;--hz-surface:rgba(255,255,255,.80);--hz-line:rgba(9,49,141,.16);--hz-border:#35527A;--hz-link:#091B4A;--hz-pink-text:#B01F73;--hz-bar:#09318D;--hz-edge:#C0267F;--hz-surface2:rgba(255,255,255,.55);--hz-base:#F0F0F0;--hz-pop:#FFFFFF;--hz-field:rgba(255,255,255,.9);--hz-tint:rgba(9,49,141,.1);--hz-shadow:0 14px 36px -22px rgba(2,7,10,.55)}
html[data-rd][data-hzink=night]{--ink:#F0F0F0;--ink-2:#C9D6DE;--surface:rgba(8,26,58,.64);--line:rgba(240,240,240,.14);--border:#7F95A8;--link:#7ADBE6;--pink-text:#FE81D1;--bar:#6FC4E0;--edge:rgba(192,38,127,0);color-scheme:dark;--pop:#0A1A38;--bar-lo:#2A7FA3;--grib:rgba(255,255,255,.045);--toplight:rgba(116,255,237,.07);--gline:rgba(150,205,235,.26);
  --hz-ink:#F0F0F0;--hz-ink2:#C9D6DE;--hz-surface:rgba(8,26,58,.64);--hz-line:rgba(240,240,240,.14);--hz-border:#7F95A8;--hz-link:#7ADBE6;--hz-pink-text:#FE81D1;--hz-bar:#6FC4E0;--hz-edge:rgba(192,38,127,0);--hz-surface2:rgba(8,26,58,.42);--hz-base:#02070A;--hz-pop:#0A1A38;--hz-field:rgba(2,7,10,.5);--hz-tint:rgba(111,189,217,.14);--hz-shadow:0 14px 36px -22px rgba(0,0,0,.8)}

/* 6. component colour tweens are off: when ink tokens step, a 180ms background/colour transition would pass through grey on a freshly swapped surface. Transform/opacity/shadow hover motion is untouched.
   (Replaces a class toggled on <html> during the flip: that cost two whole-subtree style recalcs.) */
html[data-rd] :is(a,button,input,.btn,.card,.chip,.tr,.hd__menu,.ask){transition-property:transform,opacity,box-shadow}
/* the active switch segment recolours only once its thumb has mostly arrived (discrete step, no tween) */
html[data-rd] .hz-switch button{transition:transform 120ms var(--out),color 0s linear 200ms}
/* instant mode (reduced motion, bfcache restore): no intermediate frame at all */
html.hz-still .hz-scene,html.hz-still .hz-orbit,html.hz-still .hz-thumb{transition:none!important}
@media (prefers-reduced-motion:reduce){html[data-rd] .hz-scene,html[data-rd] .hz-orbit{transition:none!important}}
/* layer diet: Horizon's entrance (.rise) keeps its end state with fill-mode "both", which leaves every tile, row and card promoted to its own compositor layer for the life of the page
   (36 layers on rd-fusion.php); applied below the hero only, so the first-screen entrance and its LCP behaviour stay exactly as before and makes every ink swap repaint/raster 36 layers. The end keyframe equals the natural style, so "backwards" is identical to the eye and releases them. */
html[data-rd] .sec .rise{animation-fill-mode:backwards}

/* 2c. page-specific orb angles, ported from the live :has() rules in tevos-horizon-site.css (those set html-level tokens, which the pinned scenes above mask).
   Below 1000px the orb centres in a clear sky band above the content on: jobs (.jobs-main), job detail (.jbp), company (.cp-wrap), Gulf (.gx-wrap), company directory (.cd-hero), 404 (.hz-nf), home (main>.hero).
   Morning: sun 90deg (moon unchanged). Night: sun -72deg, moon 90deg. Same selector list and breakpoint as the originals, so only the specificity target moved (html -> scene). */
@media (max-width:1000px){
  html[data-rd]:has(:is(.jobs-main,.jbp,.cp-wrap,.gx-wrap,.cd-hero,.hz-nf,main>.hero)) .hz-scene[data-sk=morning]{--hz-sun-a:90deg;--sun-a:90deg}
  html[data-rd]:has(:is(.jobs-main,.jbp,.cp-wrap,.gx-wrap,.cd-hero,.hz-nf,main>.hero)) .hz-scene[data-sk=night]{--hz-sun-a:-72deg;--sun-a:-72deg;--hz-moon-a:90deg;--moon-a:90deg}
}

/* 3b. layer diet: the sky that is not visible is not painted. Settled morning hides the night layer, settled night hides the morning layer underneath it (visibility flips only AFTER the fade has finished,
   and back to visible instantly when a flip starts), which roughly halves the compositor layers the scene keeps (every scene layer carries scroll-linked animations). */
html[data-rd][data-fs=morning] .hz-scene[data-sk=night]{visibility:hidden;transition:opacity 320ms cubic-bezier(0,0,.4,1),visibility 0s linear 340ms}
html[data-rd][data-fs=night] .hz-scene[data-sk=morning]{visibility:hidden;transition:visibility 0s linear 340ms}
@media (prefers-reduced-motion:reduce){html[data-rd][data-fs=morning] .hz-scene[data-sk=night],html[data-rd][data-fs=night] .hz-scene[data-sk=morning]{transition:none!important}}
html[data-rd].hz-warm[data-fs=morning] .hz-scene[data-sk=night],html[data-rd].hz-warm[data-fs=night] .hz-scene[data-sk=morning]{visibility:visible}
/* (r3) morning->night: park the sky at 38% (not 50%) while the ink steps, so the outgoing dark ink never sits on a sky darker than it can take (measured 2.1-2.5:1 at ~250ms). night->morning keeps 50%. */
html[data-rd][data-fs=mid][data-fd=night] .hz-scene[data-sk=night]{opacity:.62}
/* (r4) night->morning parks slightly darker (45%) so light ink stays >=3:1 until the swap */
html[data-rd][data-fs=mid][data-fd=morning] .hz-scene[data-sk=night]{opacity:.45}