/* 5.41 Studio — v15 scenes (companion to js/bg.js).
   js/bg.js writes the colour tokens (--ink, --dim, --faint, --line, --tx-body, --tx-title, --amber, --glass-thin, --hud-bg,
   --panel, --panel-2, --bg and the --scene-* aliases) for the scene the page is in, fitted for WCAG AA, and sets html[data-lit]
   when the pane is light (dark ink). On the night studio (landing, contact) it removes them, so base.css rules unchanged.
   Everything below only handles what a token cannot: things that must FLIP with the pane (halos, logos, filled buttons, the
   drawing), and the dark surfaces that stay dark whatever the room (players, viewer, screens, text laid on photographs). */

:root { --amber-fill: #f3a712; --hud-bg: rgba(4, 5, 8, .42); --hud-line: rgba(236, 235, 231, .16); --t: 0; }
html[data-lit] { color-scheme: light; }
body { background: var(--bg); }

/* no engine (no GPU): the ground is the scene's flat colour; the CSS glass only shows while the pane is dark */
html:not(.gr-bg-live) #gr-atmos { opacity: calc(1 - var(--t)); }

/* HUD bars + nav card follow the pane */
#gr-hud-top {
  background: color-mix(in srgb, var(--hud-bg) calc(var(--bar) * 100%), transparent);
  border-bottom-color: color-mix(in srgb, var(--hud-line) calc(var(--bar) * 100%), transparent);
}
html[data-lit] .gr-nav-card { box-shadow: 0 10px 30px rgba(20, 22, 26, .14); }
html[data-lit] .gr-hud-dot, html[data-lit] #gr-hud-top .gr-hud-dot { background: var(--amber-fill); }
html[data-lit] :focus-visible { outline-color: var(--amber); }
html[data-lit] ::selection { background: var(--amber-fill); color: #0b0b0b; }

/* the dark halos behind text are for a dark pane */
html[data-lit] #gr-story .gr-chapter :is(p, li, dt, dd, label, figcaption, blockquote, .gr-dim, .gr-mono, .gr-cover-line, .gr-lm-t, h2, h3, h4),
html[data-lit] :is(.gr-md-intro, .gr-md-row, .gr-bio-p, .gr-cl-head, .gr-vw, .gr-tile-title) { text-shadow: none; }

/* amber FILLS keep the bright amber (dark text on it); amber LINES / TEXT use the fitted --amber */
html[data-lit] :is(.gr-btn:hover, .gr-btn:focus-visible, .gr-menu-btn:hover, .gr-menu-btn:focus-visible, .gr-menu-btn:active,
  .gr-ix-folder[aria-current], .gr-chip[aria-pressed="true"], .gr-pn:hover .gr-pn-play, .gr-pn:focus-visible .gr-pn-play, .gr-tile:hover .gr-pn-play, .gr-tile:focus-visible .gr-pn-play,
  .gr-skip-link) { background: var(--amber-fill); border-color: var(--amber-fill); color: #0b0b0b; }
/* primary buttons: ink-filled on a light pane, amber on hover */
html[data-lit] #gr-story :is(.gr-cta, .gr-send):not(:hover):not(:focus-visible) { background: var(--ink); border-color: var(--ink); color: #f6f4ef; -webkit-backdrop-filter: none; backdrop-filter: none; }
html[data-lit] #gr-story :is(.gr-cta, .gr-send):is(:hover, :focus-visible) { background: var(--amber-fill); border-color: var(--amber-fill); color: #0b0b0b; }
html[data-lit] .gr-menu-btn, html[data-lit] .gr-btn { border-color: var(--line); }
/* the outlined call to action (frosted fill) needs light text on a dark pane */
html:not([data-lit]) #gr-story .gr-cta:not(:hover):not(:focus-visible) { color: var(--ink); }
/* the projects index strip on narrower screens is a glass strip, not a black one */
@media (max-width: 1200px) { html #gr-story .gr-ix { background: var(--glass-thin); } }

/* covers: the feathered photograph is a ghost on a light pane */
html[data-lit] .gr-cover-media { opacity: calc(.4 - .24 * var(--t)); }

/* text that sits ON photographs stays light, with its dark scrim, in every room */
:is(.gr-pn-meta, .gr-pn-play, .gr-tile .gr-pn-meta) {
  --ink: #ecebe7; --tx-title: rgba(255, 255, 255, .92); --tx-body: rgba(255, 255, 255, .72); --line: rgba(236, 235, 231, .4); --bg: #0b0d12;
}
:is(.gr-pn-meta, .gr-tile .gr-pn-meta) :is(.gr-pn-title, .gr-pn-client, .gr-tile-title) { text-shadow: 0 1px 12px rgba(0, 0, 0, .6); }

/* overlays stay dark: screens, the video player, the photo viewer */
:is(.gr-screen, .gr-player, .gr-viewer) {
  --bg: #000; --panel: #0b0b0b; --panel-2: #141414; --ink: #ecebe7; --dim: #8d8c87; --faint: #4a4a47; --line: rgba(236, 235, 231, .22);
  --tx-body: rgba(255, 255, 255, .6); --tx-title: rgba(255, 255, 255, .9); --amber: #f3a712; --glass-thin: rgba(6, 8, 12, .44);
  --glass-thick: rgba(4, 5, 8, .6); color: #ecebe7; color-scheme: dark;
}

/* client logos: mono logos are white on a dark pane, near-black on a light one; tone logos screen on dark, multiply on light */
html[data-lit] .gr-cl-logo { filter: brightness(0); opacity: .82; }
html[data-lit] .gr-cl-logo.is-tone { filter: grayscale(1) contrast(1.2) invert(1); mix-blend-mode: multiply; opacity: .85; }
html[data-lit] .gr-cl-item:hover .gr-cl-logo { opacity: 1; }

/* about: the statement's photograph is only a ghost on the golden pane; the blueprint drawing (white lines on black, lightened onto the
   page) is native to the blueprint-blue pane and needs nothing */
html[data-lit] .gr-st-bg-plate { opacity: .2; }
html[data-lit] .gr-bp-box picture { mix-blend-mode: multiply; filter: invert(1); }

/* form fields, status, stray amber text */
html[data-lit] .gr-input { background: var(--glass-thin); }
html[data-lit] .gr-input::placeholder { color: var(--dim); }
html[data-lit] .gr-status.is-error { color: #8a2a10; }
html[data-lit] .gr-w { color: var(--faint); }