/* top_prism — the hero (from prototype/prism/lite). Its colours are scoped to #top_prism.
   The background fades out at the bottom so the diagonal border into the next section shows. */
:root{ --pv-hi:#eaf3ff; --pv-mid:#9fbbe6; --pv-lo:#1a2c57; --pv-dark:#050a18; --pv-edge:#ffffff; }
:root[data-theme="light"]{ --pv-hi:#ffffff; --pv-mid:#c9d3e0; --pv-lo:#5d6a80; --pv-dark:#2a3446; --pv-edge:#ffffff; }
#top_prism{ --hp-muted:#8fa3cc; --hp-line:rgba(255,255,255,.18);
  position:relative; min-height:100vh; min-height:100svh; overflow:hidden; color:var(--ink); font-family:var(--f-name); }
:root[data-theme="light"] #top_prism{ --hp-muted:rgba(255,255,255,.86); --hp-line:rgba(255,255,255,.35); }
/* white text on the blue day sky gets a soft shadow (like the sun_moon prototype) */
:root[data-theme="light"] #top_prism h1, :root[data-theme="light"] #top_prism .tagline, :root[data-theme="light"] #top_prism .hello{ text-shadow:0 1px 3px rgba(10,40,90,.35); }
/* two background layers that cross-fade: a gradient can't be animated, so the light layer fades in/out
   over the sun & moon travel time (--dur, set by sun_moon.js; 0.8s before it has loaded) */
#top_prism .hp-bg{ position:absolute; inset:0; -webkit-mask-image:linear-gradient(#000 72%,transparent 98%); mask-image:linear-gradient(#000 72%,transparent 98%); }
#top_prism .hp-dark{ background:radial-gradient(120% 90% at 55% 45%, #16224a 0%, #0a1129 45%, #04070f 100%); }
#top_prism .hp-light{ background:linear-gradient(180deg, #1963a8 0%, #2c8bcb 50%, #58b1e7 100%);   /* day sky (from the sun_moon prototype) */
  opacity:0; transition:opacity var(--dur,.8s) ease-in-out; }
:root[data-theme="light"] #top_prism .hp-light{ opacity:1; }
#top_prism .hp-dark{ transition:opacity var(--dur,.8s) ease-in-out; }
:root[data-theme="light"] #top_prism .hp-dark{ opacity:0; }   /* or the navy shows through where the bottom fades out */
/* the prism's glass colours fade too (registered so the browser can animate them) */
@property --pv-hi{ syntax:'<color>'; inherits:true; initial-value:#eaf3ff; }
@property --pv-mid{ syntax:'<color>'; inherits:true; initial-value:#9fbbe6; }
@property --pv-lo{ syntax:'<color>'; inherits:true; initial-value:#1a2c57; }
@property --pv-dark{ syntax:'<color>'; inherits:true; initial-value:#050a18; }
@property --hp-muted{ syntax:'<color>'; inherits:true; initial-value:#8fa3cc; }
:root{ transition:--pv-hi var(--dur,.8s) ease-in-out, --pv-mid var(--dur,.8s) ease-in-out, --pv-lo var(--dur,.8s) ease-in-out, --pv-dark var(--dur,.8s) ease-in-out; }
#top_prism{ transition:color var(--dur,.8s) ease-in-out, --hp-muted var(--dur,.8s) ease-in-out; }
#top_prism #wavecv{ position:absolute; left:0; top:0; z-index:0; pointer-events:none; -webkit-mask-image:linear-gradient(#000 80%,transparent); mask-image:linear-gradient(#000 80%,transparent); }
#top_prism .hp-in{ position:relative; z-index:1; min-height:100vh; min-height:100svh; display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:clamp(8px,2vh,24px); padding:0 16px 6vh; }
#top_prism #art{ display:block; width:min(92vw, calc(60vh * 680 / 580)); height:auto; aspect-ratio:680/580; overflow:visible; }
:root[data-theme="light"] #top_prism #beam rect:last-of-type{ fill:#fff; }
:root[data-theme="light"] #top_prism #beam rect:nth-of-type(2){ fill-opacity:.28; }
#top_prism h1{ margin:clamp(4px,2.5vh,36px) 0 0; font-family:var(--f-name); font-weight:200; font-size:clamp(34px,6.4vw,84px); letter-spacing:.14em; text-indent:.14em; line-height:1; white-space:nowrap; }
#top_prism h1 b{ font-weight:500; }
#top_prism .tagline{ margin:clamp(2px,1vh,12px) 0 0; display:flex; flex-wrap:wrap; justify-content:center; gap:4px 0;
  font-weight:300; font-size:clamp(11px,1.25vw,16px); letter-spacing:.26em; text-transform:uppercase; color:var(--hp-muted); }
#top_prism .tagline span{ white-space:nowrap; padding:0 .9em; }
#top_prism .tagline span + span{ border-left:1px solid var(--hp-line); }
#top_prism .hello{ margin:6px 0 0; font:400 15px/1.4 var(--f-body); color:var(--hp-muted); }
@media (max-width:640px){ #top_prism .tagline{ flex-direction:column; align-items:center; letter-spacing:.2em; } #top_prism .tagline span + span{ border-left:0; } }
/* comic mode: the name in comic letters */
[data-site-mode="comic"] #top_prism h1{ font-weight:400; letter-spacing:.08em; text-shadow:4px 4px 0 rgba(0,0,0,.35); }
[data-site-mode="comic"] #top_prism h1 b{ font-weight:400; color:#ffd23f; }

/* layers inside the hero, back to front: sky colour (.hp-bg) → stars (#heroSky) → glows → sun & moon (#stage)
   → aurora wave → prism + name. sun_moon.js moves #heroSky, #glows and #stage in here (data-sky-host). */
#top_prism .hp-bg{ z-index:0; }
#top_prism #heroSky{ z-index:1; height:100%; }
#top_prism #heroSky .hs-day, #top_prism #heroSky .hs-tint{ display:none; }
#top_prism #heroSky .hs-night{ background:none; }
#top_prism #glows{ z-index:2!important; height:100%; }
#top_prism #stage{ z-index:3; height:100%; }
#top_prism #wavecv{ z-index:4; }
#top_prism .hp-in{ z-index:5; }

/* pro mode, light theme: the "Morning Haze" sky (light blue fading to pale; dark type, no text shadow).
   From prototype/background/sections (2026-10-05). The section's light bg in section.json = the sky's bottom colour. */
[data-site-mode="pro"] #top_prism .hp-light{ background:linear-gradient(180deg,#5c9ed8 0%,#9dc8ec 48%,#e2eef9 100%); }
:root[data-site-mode="pro"][data-theme="light"] #top_prism{ --hp-muted:#3b557f; --hp-line:rgba(14,26,54,.22); }
:root[data-site-mode="pro"][data-theme="light"] #top_prism h1, :root[data-site-mode="pro"][data-theme="light"] #top_prism .tagline,
:root[data-site-mode="pro"][data-theme="light"] #top_prism .hello{ text-shadow:none; }