/* Opt-in animated background (partials/globe_bg.html + gs-globe-bg.js): globe of station 09 (default) or the rack
   corridor of station 02 (data-scene="racks"). Strict CSP: external file.
   Page mode (default): the fixed canvas sits at z-index -1 in the root stacking context, i.e. above the page colour
   (moved from body to html on these pages) and below ALL page content — no need to lift individual elements;
   opaque sections (trust badges, footer) simply cover it.
   Section mode (data-scope="section", e.g. the /main hero): absolutely positioned inside its section, scrolls with it;
   the section content (data-globe-content, positioned) paints above it; off-screen it stops and fades out. */
html:has(> body > .gs-globe-bg) { background-color: var(--gs-bg); }
html:has(> body > .gs-globe-bg) body.bg-primary { background-color: transparent !important; }
.gs-globe-bg {
  position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden;
  opacity: 0; transition: opacity .9s ease; contain: strict;
}
.gs-globe-bg[data-scope="section"] { position: absolute; z-index: 0; }
.gs-globe-bg canvas { display: block; width: 100%; height: 100%; }
/* dark theme: screen blend → the near-black clear colour disappears, only the scene's light adds up */
.gs-globe-bg.is-ready { opacity: .5; mix-blend-mode: screen; }
.gs-globe-bg[data-scene="racks"].is-ready { opacity: .34; }
.gs-globe-bg[data-scope="section"].is-ready { opacity: .42; }
/* light theme: invert the frame (near-black → near-white, glow → deep blue/violet) and multiply */
html.light .gs-globe-bg canvas { filter: invert(1) hue-rotate(180deg); }
html.light .gs-globe-bg.is-ready { opacity: .28; mix-blend-mode: multiply; }
html.light .gs-globe-bg[data-scene="racks"].is-ready { opacity: .2; }
html.light .gs-globe-bg[data-scope="section"].is-ready { opacity: .24; }
.gs-globe-bg.is-ready.is-off { opacity: 0; }
.gs-globe-bg.is-fallback { display: none; }

/* ---- readability (content wrapper marked data-globe-content) ----
   glass cards blur the moving scene; headings/text directly on the background get a soft halo in the page colour;
   blocks marked data-globe-text (page intro, category headings, period switch) get a frosted backing so their
   contrast does not depend on what moves behind them (WCAG AA ≥ 4.5:1, measured dark + light). */
html:has(> body > .gs-globe-bg) [data-globe-content] .glass-panel { -webkit-backdrop-filter: blur(12px) saturate(1.1); backdrop-filter: blur(12px) saturate(1.1); }
html:has(> body > .gs-globe-bg) [data-globe-content] :is(h1, h2, p):not(.glass-panel *), .gs-globe-bg[data-scope="section"] ~ [data-globe-content] :is(h1, h2, p):not(.glass-panel *) { text-shadow: 0 1px 2px rgba(3, 8, 20, .9), 0 0 14px rgba(3, 8, 20, .85); }
html.light:has(> body > .gs-globe-bg) [data-globe-content] :is(h1, h2, p):not(.glass-panel *), html.light .gs-globe-bg[data-scope="section"] ~ [data-globe-content] :is(h1, h2, p):not(.glass-panel *) { text-shadow: 0 1px 2px rgba(255, 255, 255, .95), 0 0 14px rgba(255, 255, 255, .9); }
html:has(> body > .gs-globe-bg) [data-globe-content] [data-globe-text] {
  width: fit-content; max-width: 100%; padding: .75rem 1.25rem; border-radius: 1rem;
  background: color-mix(in srgb, var(--gs-bg) 84%, transparent);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
html.light:has(> body > .gs-globe-bg) [data-globe-content] [data-globe-text] { background: color-mix(in srgb, var(--gs-bg) 92%, transparent); }
html:has(> body > .gs-globe-bg) [data-globe-content] [data-globe-text="center"] { margin-left: auto; margin-right: auto; }
html:has(> body > .gs-globe-bg) [data-globe-content] [data-globe-text="start"] { margin-left: -1.25rem; }
html:has(> body > .gs-globe-bg) [data-globe-content] [data-globe-text="bar"] { padding: .5rem 1rem; border-bottom-color: transparent; }
html:has(> body > .gs-globe-bg) [data-globe-content] [data-globe-text="pill"] { padding: .45rem 1.1rem; border-radius: 999px; }
/* small text in the glass cards: the design greys (gray-400/500, accent #3b82f6, white on #3b82f6) are lighter/darker
   than AA allows on the translucent panels; slightly stronger tones on background pages only */
html:not(.light):has(> body > .gs-globe-bg) [data-globe-content] .glass-panel :is(.text-gray-400, .text-gray-500) { color: #c0cad8; }
html:not(.light):has(> body > .gs-globe-bg) [data-globe-content] .glass-panel .text-accent { color: #60a5fa; }
html:not(.light):has(> body > .gs-globe-bg) [data-globe-content] .glass-panel { background: rgba(16, 42, 78, .9) !important; }
html.light:has(> body > .gs-globe-bg) [data-globe-content] :is(.text-gray-400, .text-gray-500, .text-gray-600) { color: #475569 !important; }
html:has(> body > .gs-globe-bg) [data-globe-content] .bg-accent, .gs-globe-bg[data-scope="section"] ~ [data-globe-content] .bg-accent { background-color: #2563eb; }
html:has(> body > .gs-globe-bg) [data-globe-content] .bg-accent:hover, .gs-globe-bg[data-scope="section"] ~ [data-globe-content] .bg-accent:hover { background-color: #1d4ed8; }
/* section mode (/main hero): the text sits right on the globe → a soft radial scrim inside the layer (only dims the
   scene, not the page) keeps the centre calm; rim, rings and star stay visible around the text */
.gs-globe-bg[data-scope="section"]::after { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse 64% 56% at 50% 52%, rgba(3, 4, 10, .66) 0%, rgba(3, 4, 10, .5) 55%, rgba(3, 4, 10, 0) 100%); }
html.light .gs-globe-bg[data-scope="section"]::after { background: radial-gradient(ellipse 64% 56% at 50% 52%, rgba(255, 255, 255, .62) 0%, rgba(255, 255, 255, .45) 55%, rgba(255, 255, 255, 0) 100%); }
.gs-globe-bg[data-scope="section"] ~ [data-globe-content] .gradient-text { background-image: linear-gradient(90deg, #93c5fd, #a5b4fc, #c4b5fd); }
html.light .gs-globe-bg[data-scope="section"] ~ [data-globe-content] .gradient-text { background-image: linear-gradient(90deg, #1d4ed8, #4338ca, #6d28d9); }
html:not(.light) .gs-globe-bg[data-scope="section"] ~ [data-globe-content] .gs-hero-stats .text-gray-400 { color: #cbd5e1; }
html.light .gs-globe-bg[data-scope="section"] ~ [data-globe-content] .gs-hero-stats .text-gray-400 { color: #475569 !important; }
html.light:has(> body > .gs-globe-bg) [data-globe-content] [data-globe-text] .text-accent { color: #1d4ed8 !important; }
html.light:has(> body > .gs-globe-bg) [data-globe-content] [data-globe-text] .shop-period-label:not(.active) { color: #475569; }
/* section mode (/main hero): primary button gradient one step darker (white text ≥ 4.5:1), stats fully opaque */
.gs-globe-bg[data-scope="section"] ~ [data-globe-content] .btn-primary { background: linear-gradient(90deg, #2563eb, #4f46e5); }
html:not(.light) .gs-globe-bg[data-scope="section"] ~ [data-globe-content] .btn-secondary { background: rgba(11, 26, 51, .72); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.gs-globe-bg[data-scope="section"] ~ [data-globe-content] .gs-hero-stats span { text-shadow: 0 1px 2px rgba(3, 8, 20, .9), 0 0 12px rgba(3, 8, 20, .85); }
html.light .gs-globe-bg[data-scope="section"] ~ [data-globe-content] .gs-hero-stats span { text-shadow: 0 1px 2px rgba(255, 255, 255, .95), 0 0 12px rgba(255, 255, 255, .9); }
/* gradient headings (transparent text + background-clip) must not get a text-shadow (it would show through the glyphs):
   a drop-shadow filter follows the painted glyphs instead */
html:has(> body > .gs-globe-bg) [data-globe-content] .gradient-text, .gs-globe-bg[data-scope="section"] ~ [data-globe-content] .gradient-text { text-shadow: none; filter: drop-shadow(0 0 8px rgba(3, 8, 20, .9)); }
html.light:has(> body > .gs-globe-bg) [data-globe-content] .gradient-text, html.light .gs-globe-bg[data-scope="section"] ~ [data-globe-content] .gradient-text { filter: drop-shadow(0 0 8px rgba(255, 255, 255, .95)); }
@media (prefers-reduced-motion: reduce) { .gs-globe-bg { transition: none; } }