/* ============================================================
   DAY / NIGHT (2026-10-07) — the headlight switch.
   Night is the site as designed. Day is every colour flipped to its
   daylight twin, written per page by scripts/build-day-theme.cjs into
   day/<page>.css. This file holds:
     1. the headlight switch in the nav (headlights on = night)
     2. the change-over animation
     3. hand-made day fixes: the wireframe artwork drawn as a blueprint
        (dark lines on paper) instead of glowing lines on black, and the
        few places the automatic flip gets wrong.
   Loads after day/<page>.css on every page.
   ============================================================ */

/* ---------- 1. the switch ---------- */
.nav-end{display:flex;align-items:center;gap:12px}
.hl-toggle{display:none}
html[data-theme] .hl-toggle{
  display:inline-flex;align-items:center;justify-content:center;
  height:36px;padding:0 10px;margin:0;border-radius:8px;cursor:pointer;
  background:transparent;color:var(--ink);border:1px solid var(--line);
  transition:border-color .2s,background-color .2s;-webkit-tap-highlight-color:transparent;
}
.hl-toggle:hover{border-color:color-mix(in srgb,var(--ink) 35%,transparent)}
.hl-toggle:focus-visible{outline:2px solid #E8490F;outline-offset:2px}
.hl-toggle svg{display:block;width:50px;height:22px;overflow:visible}
.hl-cab{fill:none;stroke:currentColor;stroke-width:1.6;stroke-linejoin:round;stroke-linecap:round}
.hl-beam{transform-box:fill-box;transform-origin:0% 50%;transition:opacity .35s ease,transform .45s cubic-bezier(.2,.8,.2,1)}
.hl-lamp{transition:fill .3s,stroke .3s}
/* headlights on: night */
html[data-theme="night"] .hl-beam{opacity:1;transform:scaleX(1)}
html[data-theme="night"] .hl-lamp{fill:#FFE6BF;stroke:#FFE6BF;filter:drop-shadow(0 0 3px rgba(255,214,150,.95))}
/* headlights off: day. The beam stays as a faint dashed outline, so the switch reads as "lights off" */
html[data-theme="day"] .hl-beam{opacity:.32;transform:scaleX(1);fill:none;stroke:currentColor;stroke-width:1;stroke-dasharray:2 2.5}
html[data-theme="day"] .hl-lamp{fill:transparent;stroke:currentColor;stroke-width:1.4}
/* the click that switches them on flickers like a real lamp warming up */
.hl-toggle.hl-flick .hl-beam{animation:hlFlick .7s steps(1,end) both}
@keyframes hlFlick{0%{opacity:0}12%{opacity:.85}22%{opacity:.1}34%{opacity:1}48%{opacity:.45}60%,100%{opacity:1}}

@media(max-width:1180px){
  .nav-end{margin-left:auto}
  .nav-end>.alink{display:none}
}
@media(max-width:900px){.hl-toggle svg{width:44px;height:20px}}

/* ---------- 2. the change-over ---------- */
/* the new look spreads out from the headlight (site-theme.js drives the circle) */
::view-transition-old(root),::view-transition-new(root){animation:none;mix-blend-mode:normal}
::view-transition-new(root){z-index:2}
@media(prefers-reduced-motion:reduce){.hl-beam,.hl-lamp{transition:none}.hl-toggle.hl-flick .hl-beam{animation:none}}

/* ---------- 3. day fixes ---------- */
html[data-theme="day"]{color-scheme:light}

/* The wireframe artwork (glowing orange lines on black) becomes a blueprint:
   orange-brown lines on paper. invert + hue-rotate keeps the orange's hue. */
html[data-theme="day"] img:is([src*="scene-"],[src*="lane-"],[src*="hero-floor"],[src*="rig-"],[src*="svc-holo"]){
  filter:invert(1) hue-rotate(180deg) saturate(1.15)!important;
}
/* artwork laid on with the screen blend at night is multiplied by day, so the paper shows through */
html[data-theme="day"] .rig-band-bg img{mix-blend-mode:multiply!important}
html[data-theme="day"] img[src*="hero-floor"]{filter:invert(1) hue-rotate(180deg) saturate(.75)!important;opacity:.9}

/* the wordmark is dark artwork: at night it is flipped light, by day it shows as drawn */
html[data-theme="day"] nav .logo img,html[data-theme="day"] footer .logo img{filter:none!important}
/* page-opening scenes sit behind the headline: a little quieter by day so the type leads */
html[data-theme="day"] .pg-scene img{filter:invert(1) hue-rotate(180deg) saturate(.85)!important;opacity:.8}
/* the walkthrough phone's lock screen: the road grid wallpaper as a blueprint, with a light
   wash so the dark clock reads. The wash is written dark because the filter flips it light. */
html[data-theme="day"] .lp-screen{background:#F3F0EA}
html[data-theme="day"] .lp-screen::before{
  background:linear-gradient(180deg,rgba(0,0,0,.18),rgba(0,0,0,.55)),url(/images/hero-floor.webp) center/cover no-repeat;
  filter:invert(1) hue-rotate(180deg) saturate(.8);
}
/* the role card's road grid, drawn as a blueprint by day like the rest of the artwork */
html[data-theme="day"] .rw-phone::before{filter:invert(1) hue-rotate(180deg) saturate(.8);opacity:.85}