/* premium-fx.css — Phase 6 cinema layer. * * Adds the moving / breathing visual effects that promote the site * from "themed" to "alive": * * 1. Hero text — animated gradient sweep in the theme's accent * pair (no PNG needed; it's pure CSS, lighter than an APNG and * smoother than any rasterised animation). * 2. Hero photo — slow Ken-Burns pan + zoom (no video file; pure * CSS keyframes on a ::before layer that holds the image). * 3. Per-panel hero photos — every .t-panel and .premium-panel * gets a faint theme-keyed photo as a watermark behind content. * 4. 3D announcement ticker — perspective-tilted rolling banner * pinned to the bottom of every viewport. Reads from * data-announce attribute on body OR /api/bot/recent-events. * * All effects are CSS-only — no JS frameworks, no extra binaries. * Loaded after premium-overlay.css so its specificity wins on the * narrow set of properties it overrides. */ /* ── 1. Animated hero text gradient ──────────────────────────────── */ /* Hero title: SOLID theme colour + breathing glow + heavy * defensive shadow stack. Multiple earlier passes shipped a * background-clip:text + transparent-fill trick that ghosted the * title on certain Ken-Burns frames. This version uses no clip * trick at all: solid colour, !important everywhere, an extra * black drop-shadow so the glyphs always carve out from the * photo behind them, and a stack-of-glows that breathes. */ [data-theme="naturalist"] .hero h1, [data-theme="obsidian-codex"] .hero h1, [data-theme="cretaceous-greenhouse"] .hero h1, [data-theme="volcanic-glass"] .hero h1, [data-theme="polar-field-lab"] .hero h1, [data-theme="vellum-atlas"] .hero h1, [data-theme="naturalist"] .aegis-hero h1, [data-theme="obsidian-codex"] .aegis-hero h1, [data-theme="cretaceous-greenhouse"] .aegis-hero h1, [data-theme="volcanic-glass"] .aegis-hero h1, [data-theme="polar-field-lab"] .aegis-hero h1, [data-theme="vellum-atlas"] .aegis-hero h1 { background: none !important; background-image: none !important; background-clip: border-box !important; -webkit-background-clip: border-box !important; -webkit-text-fill-color: var(--ink) !important; color: var(--ink) !important; /* Five-layer text-shadow: * 1–2: hard black drop-shadow at 0/2 px so the glyph always has * an ink-dark outline regardless of theme. * 3: accent halo (~22 px) — visible bloom. * 4: accent-2 halo (~44 px) — secondary bloom. * 5: long soft halo (~80 px) for cinematic feel. */ text-shadow: 0 0 1px rgba(0, 0, 0, 0.85), 0 2px 4px rgba(0, 0, 0, 0.65), 0 0 22px color-mix(in srgb, var(--accent), transparent 35%), 0 0 44px color-mix(in srgb, var(--accent-2), transparent 60%), 0 0 80px color-mix(in srgb, var(--accent), transparent 75%); animation: nx-hero-glow 5.6s ease-in-out infinite; } /* Vellum-atlas is the LIGHT theme — black drop-shadows would punch a * hole in the cream background. Override with a parchment shadow. */ [data-theme="vellum-atlas"] .hero h1, [data-theme="vellum-atlas"] .aegis-hero h1 { text-shadow: 0 0 1px rgba(47, 38, 24, 0.85), 0 2px 3px rgba(47, 38, 24, 0.45), 0 0 22px color-mix(in srgb, var(--accent), transparent 35%), 0 0 44px color-mix(in srgb, var(--accent-2), transparent 60%) !important; } @keyframes nx-hero-glow { 0%, 100% { text-shadow: 0 0 18px color-mix(in srgb, var(--accent), transparent 45%), 0 0 36px color-mix(in srgb, var(--accent-2), transparent 70%), 0 2px 0 color-mix(in srgb, var(--bg), transparent 30%); } 50% { text-shadow: 0 0 36px color-mix(in srgb, var(--accent), transparent 25%), 0 0 64px color-mix(in srgb, var(--accent-2), transparent 50%), 0 2px 0 color-mix(in srgb, var(--bg), transparent 30%); } } /* Respect prefers-reduced-motion. */ @media (prefers-reduced-motion: reduce) { [data-theme="naturalist"] .hero h1, [data-theme="obsidian-codex"] .hero h1, [data-theme="cretaceous-greenhouse"] .hero h1, [data-theme="volcanic-glass"] .hero h1, [data-theme="polar-field-lab"] .hero h1, [data-theme="vellum-atlas"] .hero h1, [data-theme="naturalist"] .aegis-hero h1, [data-theme="obsidian-codex"] .aegis-hero h1, [data-theme="cretaceous-greenhouse"] .aegis-hero h1, [data-theme="volcanic-glass"] .aegis-hero h1, [data-theme="polar-field-lab"] .aegis-hero h1, [data-theme="vellum-atlas"] .aegis-hero h1 { animation: none; } } /* ── 2. Hero photo — Ken Burns slow pan + zoom ───────────────────── */ [data-theme="naturalist"] .hero, [data-theme="obsidian-codex"] .hero, [data-theme="cretaceous-greenhouse"] .hero, [data-theme="volcanic-glass"] .hero, [data-theme="polar-field-lab"] .hero, [data-theme="vellum-atlas"] .hero, [data-theme="naturalist"] .aegis-hero, [data-theme="obsidian-codex"] .aegis-hero, [data-theme="cretaceous-greenhouse"] .aegis-hero, [data-theme="volcanic-glass"] .aegis-hero, [data-theme="polar-field-lab"] .aegis-hero, [data-theme="vellum-atlas"] .aegis-hero { position: relative; overflow: hidden; isolation: isolate; } /* Lift the previously-mounted photo from `background:` (overlay sheet) * onto a child ::before so we can animate transform without re-laying- * out the page. The veil moves to ::after on top of the photo. * * NOTE: this layer pulls the photo URL from the per-theme handle set * in the overlay sheet via background-image inheritance — but to make * the Ken-Burns animation possible we need an explicit declaration. * Each theme block below sets its own primary photo URL on ::before. */ [data-theme="naturalist"] .hero::before, [data-theme="naturalist"] .aegis-hero::before { content: ""; position: absolute; inset: -4%; background: url('/static/img/heroes/naturalist/ridgeline-mist.jpeg') center/cover no-repeat; z-index: -2; animation: nx-hero-kenburns-a 32s ease-in-out infinite; } [data-theme="obsidian-codex"] .hero::before, [data-theme="obsidian-codex"] .aegis-hero::before { content: ""; position: absolute; inset: -4%; background: url('/static/img/heroes/obsidian-codex/vitrine-singleton.jpeg') center/cover no-repeat; z-index: -2; animation: nx-hero-kenburns-b 32s ease-in-out infinite; } [data-theme="cretaceous-greenhouse"] .hero::before, [data-theme="cretaceous-greenhouse"] .aegis-hero::before { content: ""; position: absolute; inset: -4%; background: url('/static/img/heroes/cretaceous-greenhouse/kew-canopy.jpeg') center/cover no-repeat; z-index: -2; animation: nx-hero-kenburns-a 32s ease-in-out infinite; } [data-theme="volcanic-glass"] .hero::before, [data-theme="volcanic-glass"] .aegis-hero::before { content: ""; position: absolute; inset: -4%; background: url('/static/img/heroes/volcanic-glass/lava-river.jpeg') center/cover no-repeat; z-index: -2; animation: nx-hero-kenburns-c 32s ease-in-out infinite; } [data-theme="polar-field-lab"] .hero::before, [data-theme="polar-field-lab"] .aegis-hero::before { content: ""; position: absolute; inset: -4%; background: url('/static/img/heroes/polar-field-lab/tundra-low-sun.jpeg') center/cover no-repeat; z-index: -2; animation: nx-hero-kenburns-b 32s ease-in-out infinite; } [data-theme="vellum-atlas"] .hero::before, [data-theme="vellum-atlas"] .aegis-hero::before { content: ""; position: absolute; inset: -4%; background: url('/static/img/heroes/vellum-atlas/audubon-plate.jpeg') center/cover no-repeat; z-index: -2; animation: nx-hero-kenburns-c 32s ease-in-out infinite; } /* Veil over the moving photo so headline contrast stays correct. */ [data-theme="naturalist"] .hero::after, [data-theme="obsidian-codex"] .hero::after, [data-theme="cretaceous-greenhouse"] .hero::after, [data-theme="volcanic-glass"] .hero::after, [data-theme="polar-field-lab"] .hero::after, [data-theme="vellum-atlas"] .hero::after, [data-theme="naturalist"] .aegis-hero::after, [data-theme="obsidian-codex"] .aegis-hero::after, [data-theme="cretaceous-greenhouse"] .aegis-hero::after, [data-theme="volcanic-glass"] .aegis-hero::after, [data-theme="polar-field-lab"] .aegis-hero::after, [data-theme="vellum-atlas"] .aegis-hero::after { content: ""; position: absolute; inset: 0; background: var(--texture-hero-veil); z-index: -1; pointer-events: none; } /* When premium-fx is loaded, the overlay sheet's static background- * image becomes redundant — wipe it so the moving ::before layer is * the only photo source on screen. */ [data-theme="naturalist"] .hero, [data-theme="obsidian-codex"] .hero, [data-theme="cretaceous-greenhouse"] .hero, [data-theme="volcanic-glass"] .hero, [data-theme="polar-field-lab"] .hero, [data-theme="vellum-atlas"] .hero, [data-theme="naturalist"] .aegis-hero, [data-theme="obsidian-codex"] .aegis-hero, [data-theme="cretaceous-greenhouse"] .aegis-hero, [data-theme="volcanic-glass"] .aegis-hero, [data-theme="polar-field-lab"] .aegis-hero, [data-theme="vellum-atlas"] .aegis-hero { background-image: none; background-color: var(--bg); } @keyframes nx-hero-kenburns-a { 0% { transform: scale(1.0) translate(0, 0); } 50% { transform: scale(1.10) translate(-2%, -1%); } 100% { transform: scale(1.0) translate(0, 0); } } @keyframes nx-hero-kenburns-b { 0% { transform: scale(1.05) translate(1%, 1%); } 50% { transform: scale(1.12) translate(-2%, -2%); } 100% { transform: scale(1.05) translate(1%, 1%); } } @keyframes nx-hero-kenburns-c { 0% { transform: scale(1.0) translate(-1%, 0); } 50% { transform: scale(1.08) translate(2%, -1%); } 100% { transform: scale(1.0) translate(-1%, 0); } } @media (prefers-reduced-motion: reduce) { [data-theme="naturalist"] .hero::before, [data-theme="obsidian-codex"] .hero::before, [data-theme="cretaceous-greenhouse"] .hero::before, [data-theme="volcanic-glass"] .hero::before, [data-theme="polar-field-lab"] .hero::before, [data-theme="vellum-atlas"] .hero::before, [data-theme="naturalist"] .aegis-hero::before, [data-theme="obsidian-codex"] .aegis-hero::before, [data-theme="cretaceous-greenhouse"] .aegis-hero::before, [data-theme="volcanic-glass"] .aegis-hero::before, [data-theme="polar-field-lab"] .aegis-hero::before, [data-theme="vellum-atlas"] .aegis-hero::before { animation: none; } } /* ── 3. Per-panel theme-photo watermark ──────────────────────────── */ /* Each panel under a Phase-6 theme gets a low-opacity, blurred photo * watermark behind its content. Adds depth WITHOUT competing with * the body text. Photo is the second-pick hero from each theme so * the page doesn't feel monotonous. */ [data-theme="naturalist"] .t-panel { --panel-bg-img: url('/static/img/heroes/naturalist/temperate-canopy.jpeg'); } [data-theme="obsidian-codex"] .t-panel { --panel-bg-img: url('/static/img/heroes/obsidian-codex/gallery-corridor.jpeg'); } [data-theme="cretaceous-greenhouse"] .t-panel { --panel-bg-img: url('/static/img/heroes/cretaceous-greenhouse/eden-biome.jpeg'); } [data-theme="volcanic-glass"] .t-panel { --panel-bg-img: url('/static/img/heroes/volcanic-glass/basalt-columns.jpeg'); } [data-theme="polar-field-lab"] .t-panel { --panel-bg-img: url('/static/img/heroes/polar-field-lab/snowfield-rule.jpeg'); } [data-theme="vellum-atlas"] .t-panel { --panel-bg-img: url('/static/img/heroes/vellum-atlas/leather-journal.jpeg'); } [data-theme="naturalist"] .t-panel, [data-theme="obsidian-codex"] .t-panel, [data-theme="cretaceous-greenhouse"] .t-panel, [data-theme="volcanic-glass"] .t-panel, [data-theme="polar-field-lab"] .t-panel, [data-theme="vellum-atlas"] .t-panel { isolation: isolate; } /* The watermark layer — sits above the panel solid background but * below the panel content. Filtered to blur + desaturate so it reads * as texture rather than a competing photo. */ [data-theme="naturalist"] .t-panel > *:not(.t-panel-head):not(.t-panel-body), [data-theme="obsidian-codex"] .t-panel > *:not(.t-panel-head):not(.t-panel-body), [data-theme="cretaceous-greenhouse"] .t-panel > *:not(.t-panel-head):not(.t-panel-body), [data-theme="volcanic-glass"] .t-panel > *:not(.t-panel-head):not(.t-panel-body), [data-theme="polar-field-lab"] .t-panel > *:not(.t-panel-head):not(.t-panel-body), [data-theme="vellum-atlas"] .t-panel > *:not(.t-panel-head):not(.t-panel-body) { position: relative; z-index: 2; } /* ── 4. 3D announcement ticker — bottom of every Phase-6 page ────── */ /* The ticker DOM is mounted by /static/js/premium-ticker.js — it * reads first, then tries * /api/bot/recent-events for live event headlines, then falls back * to a default field-station list. CSS-content with attr() fallback * is too new for safe cross-browser use, so we keep it pure JS. */ /* ── 5. Page-body theme background — every page gets imagery ─────── */ /* Body-level photo behind ALL content (not just .hero blocks). * Heavily blurred + dimmed via the texture-hero-veil token so it * reads as ambient texture, never competes with foreground text. * Per-route selection via [data-page=] on body picks a * different photo than the hero so the same page-load doesn't * feel like one repeated image. */ /* Picked the DARKEST natural-light photo per theme so when the body * scrim is removed the photo doesn't wash out content. Earlier picks * (manuscript-page on obsidian, fern-floor on greenhouse) were too * bright and made the page read as light-grey under the dark theme. */ [data-theme="naturalist"] body { --body-photo: url('/static/img/heroes/naturalist/fossil-cabinet.jpeg'); } [data-theme="obsidian-codex"] body { --body-photo: url('/static/img/heroes/obsidian-codex/carbon-skull.jpeg'); } [data-theme="cretaceous-greenhouse"] body { --body-photo: url('/static/img/heroes/cretaceous-greenhouse/eden-biome.jpeg'); } [data-theme="volcanic-glass"] body { --body-photo: url('/static/img/heroes/volcanic-glass/ember-night.jpeg'); } [data-theme="polar-field-lab"] body { --body-photo: url('/static/img/heroes/polar-field-lab/instrument-panel.jpeg'); } [data-theme="vellum-atlas"] body { --body-photo: url('/static/img/heroes/vellum-atlas/leather-journal.jpeg'); } /* Phase-6.x: 4 new themes. They reuse existing hero photos that * match each theme's mood — no new binaries needed. */ [data-theme="solarpunk"] body { --body-photo: url('/static/img/heroes/cretaceous-greenhouse/eden-biome.jpeg'); } [data-theme="bioluminescent-deep"] body { --body-photo: url('/static/img/heroes/obsidian-codex/carbon-skull.jpeg'); } [data-theme="steampunk-foundry"] body { --body-photo: url('/static/img/heroes/volcanic-glass/ember-night.jpeg'); } [data-theme="martian-survey"] body { --body-photo: url('/static/img/heroes/volcanic-glass/iceland-rift.jpeg'); } /* Per-page override — body[data-page=] picks a fresher photo * so visiting /species feels different from /handbook even on the * same theme. Set body[data-page=...] in each template's content * block (see _base.html __block extra). */ [data-theme="naturalist"] body[data-page="species"] { --body-photo: url('/static/img/heroes/naturalist/temperate-canopy.jpeg'); } [data-theme="naturalist"] body[data-page="handbook"] { --body-photo: url('/static/img/heroes/naturalist/ledger-by-lantern.jpeg'); } [data-theme="naturalist"] body[data-page="territories"] { --body-photo: url('/static/img/heroes/naturalist/ridgeline-mist.jpeg'); } [data-theme="naturalist"] body[data-page="rules"] { --body-photo: url('/static/img/heroes/naturalist/field-station-desk.jpeg'); } [data-theme="cretaceous-greenhouse"] body[data-page="species"] { --body-photo: url('/static/img/heroes/cretaceous-greenhouse/vine-wall.jpeg'); } [data-theme="cretaceous-greenhouse"] body[data-page="handbook"] { --body-photo: url('/static/img/heroes/cretaceous-greenhouse/rain-on-leaves.jpeg'); } [data-theme="cretaceous-greenhouse"] body[data-page="territories"] { --body-photo: url('/static/img/heroes/cretaceous-greenhouse/eden-biome.jpeg'); } [data-theme="obsidian-codex"] body[data-page="species"] { --body-photo: url('/static/img/heroes/obsidian-codex/carbon-skull.jpeg'); } [data-theme="obsidian-codex"] body[data-page="handbook"] { --body-photo: url('/static/img/heroes/obsidian-codex/lit-from-above.jpeg'); } [data-theme="volcanic-glass"] body[data-page="species"] { --body-photo: url('/static/img/heroes/volcanic-glass/basalt-columns.jpeg'); } [data-theme="volcanic-glass"] body[data-page="handbook"] { --body-photo: url('/static/img/heroes/volcanic-glass/ember-night.jpeg'); } [data-theme="polar-field-lab"] body[data-page="species"] { --body-photo: url('/static/img/heroes/polar-field-lab/instrument-panel.jpeg'); } [data-theme="polar-field-lab"] body[data-page="handbook"] { --body-photo: url('/static/img/heroes/polar-field-lab/snowfield-rule.jpeg'); } [data-theme="vellum-atlas"] body[data-page="species"] { --body-photo: url('/static/img/heroes/vellum-atlas/audubon-plate.jpeg'); } [data-theme="vellum-atlas"] body[data-page="handbook"] { --body-photo: url('/static/img/heroes/vellum-atlas/haeckel-plate.jpeg'); } [data-theme="vellum-atlas"] body[data-page="territories"] { --body-photo: url('/static/img/heroes/vellum-atlas/antique-globe.jpeg'); } /* Mount the body photo as a fixed-position layer that scrolls with * the viewport, blurred + dimmed via the veil so headline + content * stay readable. Using a separate ::before on body so we don't fight * the existing `body { background: ... }` declarations from site.css * or aegis.html.j2's local style block. * * IMPORTANT: opacity hardened to 0.18 + heavier blur + heavier dim * so the photo reads as TEXTURE not foreground, and so paragraph * text on every theme always meets a 4.5:1 contrast ratio. The * earlier 0.35 + 6 px blur was washing out content under cretaceous * (fern-floor photo) and bleaching paragraph text under vellum. */ [data-theme="naturalist"] body::before, [data-theme="obsidian-codex"] body::before, [data-theme="cretaceous-greenhouse"] body::before, [data-theme="volcanic-glass"] body::before, [data-theme="polar-field-lab"] body::before, [data-theme="vellum-atlas"] body::before { content: ""; position: fixed; inset: 0; background-image: var(--body-photo); background-size: cover; background-position: center; background-repeat: no-repeat; background-color: var(--bg); /* hard fallback so the photo never sits on a transparent layer that lets browser white show through. */ z-index: -100; pointer-events: none; /* Heavier blur + much stronger brightness clamp = photo reads as * mood, not subject. Was 0.55 brightness × 0.22 opacity, but the * user reported the background still painting bright on dark * themes. Push to 0.30 brightness × 0.18 opacity. */ /* User report: blur 14 px reads as "grainy and mushy". Pulled to * 5 px so the photo retains shape but doesn't smear. Brightness * 0.40 keeps it dim enough that content panels still win without * the photo turning into a grey blob. */ filter: blur(5px) saturate(0.65) brightness(0.40); animation: nx-body-drift 90s ease-in-out infinite !important; opacity: 0.22; } /* Earlier revision had a body::after fixed-position scrim painting a * near-opaque var(--bg) over the photo. Under vellum-atlas (light * theme, --bg = cream) this turned every page WHITE. Removed. * * Contrast is now achieved through: * 1. body::before photo at opacity 0.22, blur 10px, brightness 0.55 * (photo reads as faint texture only). * 2. .t-panel + .premium-panel have their own var(--panel) bg via * premium-overlay.css §3 — content blocks land on opaque panels. * 3. Hero h1 has the 5-layer text-shadow stack so it always carves * from the photo behind it (premium-fx.css §1). * * No global scrim required. Bumping the ticker z-index just to be * safe against any future stacking context surprise. */ .nx-ticker { z-index: 250; } @keyframes nx-body-drift { 0%, 100% { transform: scale(1.04) translate(0, 0); } 50% { transform: scale(1.10) translate(-1%, -0.5%); } } /* Veil layer above the body photo — uses the theme's hero veil * gradient so the page bg always meets headline-contrast targets. */ [data-theme="naturalist"] body::after.fx-bg-veil, [data-theme="obsidian-codex"] body::after.fx-bg-veil, [data-theme="cretaceous-greenhouse"] body::after.fx-bg-veil, [data-theme="volcanic-glass"] body::after.fx-bg-veil, [data-theme="polar-field-lab"] body::after.fx-bg-veil, [data-theme="vellum-atlas"] body::after.fx-bg-veil { /* (kept for future use; the existing nx-ticker takes the body::after * slot — we layer the veil via the hero ::before for now.) */ } /* Light theme — vellum-atlas — uses a paler veil so the photo doesn't * darken the cream background. */ [data-theme="vellum-atlas"] body::before { filter: blur(8px) saturate(0.9) brightness(1.15); opacity: 0.22; } @media (prefers-reduced-motion: reduce) { [data-theme="naturalist"] body::before, [data-theme="obsidian-codex"] body::before, [data-theme="cretaceous-greenhouse"] body::before, [data-theme="volcanic-glass"] body::before, [data-theme="polar-field-lab"] body::before, [data-theme="vellum-atlas"] body::before { animation: none; } } .nx-ticker { position: fixed; left: 0; right: 0; bottom: 0; height: 38px; z-index: 250; pointer-events: none; perspective: 800px; perspective-origin: 50% 100%; /* Phase 17i v3 — watercolor wash instead of plain near-black. * Three radial blooms (warm brown, cool ink, warm brown) layered * over an ink base lift the contrast for the ticker text and * give the area painterly texture. Scoped to this surface so we * don't disturb other backgrounds. */ background: radial-gradient(ellipse 60% 120% at 12% 50%, color-mix(in srgb, var(--accent, #b98a6b), #000 55%) 0%, transparent 70%), radial-gradient(ellipse 70% 140% at 50% 50%, color-mix(in srgb, var(--ink, #f5f7ee), #000 88%) 0%, transparent 80%), radial-gradient(ellipse 60% 120% at 88% 50%, color-mix(in srgb, var(--accent-2, #6bc3d6), #000 60%) 0%, transparent 70%), linear-gradient(180deg, color-mix(in srgb, var(--bg, #0a0d12), #000 20%) 0%, color-mix(in srgb, var(--bg, #0a0d12), #000 50%) 80%); border-top: 1px solid color-mix(in srgb, var(--accent), transparent 35%); overflow: hidden; /* Reveal once page is interactive — premium-loader.js sets * `.np-ready` on on dismiss, OR we just animate from 0. */ opacity: 0; animation: nx-ticker-reveal 1.2s ease 0.6s forwards; } @keyframes nx-ticker-reveal { 0% { opacity: 0; transform: translateY(20px); } 100% { opacity: 1; transform: translateY(0); } } .nx-ticker__rail { position: absolute; inset: 0; display: flex; align-items: center; white-space: nowrap; transform-style: preserve-3d; transform: rotateX(8deg); transform-origin: 50% 100%; } .nx-ticker__line { display: inline-flex; gap: 64px; padding-right: 64px; font-family: var(--font-mono); font-size: 0.78rem; letter-spacing: 0.32em; text-transform: uppercase; color: var(--ink-soft); animation: nx-ticker-roll 48s linear infinite; } .nx-ticker__line span { color: var(--accent); font-weight: 500; } .nx-ticker__line span::before { content: "▸ "; color: var(--accent-2); } @keyframes nx-ticker-roll { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } } .nx-ticker__edge { position: absolute; top: 0; bottom: 0; width: 80px; z-index: 2; pointer-events: none; } .nx-ticker__edge-l { left: 0; background: linear-gradient(90deg, var(--bg), transparent); } .nx-ticker__edge-r { right: 0; background: linear-gradient(270deg, var(--bg), transparent); } @media (prefers-reduced-motion: reduce) { .nx-ticker__line { animation-duration: 240s; } } /* ── §6. Phase-6.x — 4 NEW THEMES wired into every shared surface ─── * solarpunk / bioluminescent-deep / steampunk-foundry / martian-survey * inherit the same body::before photo, ::after scrim, hero h1 stack, * panel watermark, and Ken-Burns drift treatment as the original six. * Replicating selectors here so we don't have to retrofit every * grouped selector above. */ [data-theme="solarpunk"] body::before, [data-theme="bioluminescent-deep"] body::before, [data-theme="steampunk-foundry"] body::before, [data-theme="martian-survey"] body::before { content: ""; position: fixed; inset: 0; background-image: var(--body-photo); background-size: cover; background-position: center; background-repeat: no-repeat; background-color: var(--bg); z-index: -100; pointer-events: none; filter: blur(5px) saturate(0.65) brightness(0.40); animation: nx-body-drift 90s ease-in-out infinite !important; opacity: 0.22; } [data-theme="solarpunk"] .hero h1, [data-theme="bioluminescent-deep"] .hero h1, [data-theme="steampunk-foundry"] .hero h1, [data-theme="martian-survey"] .hero h1, [data-theme="solarpunk"] .aegis-hero h1, [data-theme="bioluminescent-deep"] .aegis-hero h1, [data-theme="steampunk-foundry"] .aegis-hero h1, [data-theme="martian-survey"] .aegis-hero h1 { background: none !important; background-image: none !important; background-clip: border-box !important; -webkit-background-clip: border-box !important; -webkit-text-fill-color: var(--ink) !important; color: var(--ink) !important; text-shadow: 0 0 1px rgba(0, 0, 0, 0.85), 0 2px 4px rgba(0, 0, 0, 0.65), 0 0 22px color-mix(in srgb, var(--accent), transparent 35%), 0 0 44px color-mix(in srgb, var(--accent-2), transparent 60%), 0 0 80px color-mix(in srgb, var(--accent), transparent 75%); animation: nx-hero-glow 5.6s ease-in-out infinite; } /* Hero Ken-Burns ::before per theme — picks one hero photo each. */ [data-theme="solarpunk"] .hero::before, [data-theme="solarpunk"] .aegis-hero::before { content: ""; position: absolute; inset: -4%; background: url('/static/img/heroes/cretaceous-greenhouse/kew-canopy.jpeg') center/cover no-repeat; z-index: -2; animation: nx-hero-kenburns-a 32s ease-in-out infinite; } [data-theme="bioluminescent-deep"] .hero::before, [data-theme="bioluminescent-deep"] .aegis-hero::before { content: ""; position: absolute; inset: -4%; background: url('/static/img/heroes/obsidian-codex/lit-from-above.jpeg') center/cover no-repeat; z-index: -2; animation: nx-hero-kenburns-b 32s ease-in-out infinite; } [data-theme="steampunk-foundry"] .hero::before, [data-theme="steampunk-foundry"] .aegis-hero::before { content: ""; position: absolute; inset: -4%; background: url('/static/img/heroes/volcanic-glass/basalt-columns.jpeg') center/cover no-repeat; z-index: -2; animation: nx-hero-kenburns-c 32s ease-in-out infinite; } [data-theme="martian-survey"] .hero::before, [data-theme="martian-survey"] .aegis-hero::before { content: ""; position: absolute; inset: -4%; background: url('/static/img/heroes/volcanic-glass/iceland-rift.jpeg') center/cover no-repeat; z-index: -2; animation: nx-hero-kenburns-a 32s ease-in-out infinite; } [data-theme="solarpunk"] .hero, [data-theme="bioluminescent-deep"] .hero, [data-theme="steampunk-foundry"] .hero, [data-theme="martian-survey"] .hero, [data-theme="solarpunk"] .aegis-hero, [data-theme="bioluminescent-deep"] .aegis-hero, [data-theme="steampunk-foundry"] .aegis-hero, [data-theme="martian-survey"] .aegis-hero { position: relative; overflow: hidden; isolation: isolate; background-image: none; background-color: var(--bg); } [data-theme="solarpunk"] .hero::after, [data-theme="bioluminescent-deep"] .hero::after, [data-theme="steampunk-foundry"] .hero::after, [data-theme="martian-survey"] .hero::after, [data-theme="solarpunk"] .aegis-hero::after, [data-theme="bioluminescent-deep"] .aegis-hero::after, [data-theme="steampunk-foundry"] .aegis-hero::after, [data-theme="martian-survey"] .aegis-hero::after { content: ""; position: absolute; inset: 0; background: var(--texture-hero-veil); z-index: -1; pointer-events: none; } /* Panel watermarks — inherit the photo + isolation pattern from §3. */ [data-theme="solarpunk"] .t-panel { --panel-bg-img: url('/static/img/heroes/cretaceous-greenhouse/rain-on-leaves.jpeg'); isolation: isolate; } [data-theme="bioluminescent-deep"] .t-panel { --panel-bg-img: url('/static/img/heroes/obsidian-codex/gallery-corridor.jpeg'); isolation: isolate; } [data-theme="steampunk-foundry"] .t-panel { --panel-bg-img: url('/static/img/heroes/volcanic-glass/geothermal-steam.jpeg'); isolation: isolate; } [data-theme="martian-survey"] .t-panel { --panel-bg-img: url('/static/img/heroes/polar-field-lab/snowfield-rule.jpeg'); isolation: isolate; }