/* Anthem mode (static/js/anthem.js; Bliss, 2026-10-17: "when someone selects the theme, the dashboard transitions a
   bit. it shifts towards this darker theme instead ... the dashboard could pulse with the beat").
   While "Liora's theme" plays from the music panel, the site eases into the dark (finished by the time the first 808
   lands), and a glow behind everything breathes with the song: soft in the bridge, brightest in the final chorus,
   one flare at the drop. It never flashes, everything stays readable, and it eases back when the song stops. */

/* The colours are registered so they can fade instead of snapping (browsers without this just switch). */
@property --bg-primary { syntax: '<color>'; inherits: true; initial-value: #313338; }
@property --bg-secondary { syntax: '<color>'; inherits: true; initial-value: #2b2d31; }
@property --bg-tertiary { syntax: '<color>'; inherits: true; initial-value: #1e1f22; }
@property --bg-floating { syntax: '<color>'; inherits: true; initial-value: #111214; }
@property --header-primary { syntax: '<color>'; inherits: true; initial-value: #f2f3f5; }
@property --header-secondary { syntax: '<color>'; inherits: true; initial-value: #b5bac1; }
@property --text-normal { syntax: '<color>'; inherits: true; initial-value: #dbdee1; }
@property --text-muted { syntax: '<color>'; inherits: true; initial-value: #949ba4; }
@property --text-link { syntax: '<color>'; inherits: true; initial-value: #00a8fc; }
@property --interactive-normal { syntax: '<color>'; inherits: true; initial-value: #b5bac1; }
@property --interactive-hover { syntax: '<color>'; inherits: true; initial-value: #dee1e5; }
@property --interactive-active { syntax: '<color>'; inherits: true; initial-value: #ffffff; }
@property --border-color { syntax: '<color>'; inherits: true; initial-value: rgba(255, 255, 255, 0.06); }
@property --bg-modifier-hover { syntax: '<color>'; inherits: true; initial-value: rgba(255, 255, 255, 0.06); }
/* the Library-style pages (library.css) */
@property --bg { syntax: '<color>'; inherits: true; initial-value: #110d09; }
@property --bg-2 { syntax: '<color>'; inherits: true; initial-value: #18120c; }
@property --card { syntax: '<color>'; inherits: true; initial-value: rgba(255, 232, 196, 0.045); }
@property --line { syntax: '<color>'; inherits: true; initial-value: rgba(255, 210, 150, 0.13); }
@property --text { syntax: '<color>'; inherits: true; initial-value: #f7ecdb; }
@property --muted { syntax: '<color>'; inherits: true; initial-value: #b9a88f; }

:root.anthem-easing {
    transition-property: --bg-primary, --bg-secondary, --bg-tertiary, --bg-floating, --header-primary, --header-secondary,
        --text-normal, --text-muted, --text-link, --interactive-normal, --interactive-hover, --interactive-active, --border-color,
        --bg-modifier-hover, --bg, --bg-2, --card, --line, --text, --muted;
    transition-duration: var(--anthem-ease, 3s);
    transition-timing-function: ease-in-out;
}
:root.anthem-easing .home-card, :root.anthem-easing .home-btn-ghost, :root.anthem-easing .home-clock-figures li,
:root.anthem-easing .home-steps li, :root.anthem-easing #main-wrapper {
    transition: background-color var(--anthem-ease, 3s) ease-in-out, border-color var(--anthem-ease, 3s) ease-in-out;
}

/* ------------------------------------------------------------------ the dark: black, embers and her gold */
:root[data-anthem="on"] {
    --bg-primary: #050304;
    --bg-secondary: rgba(16, 9, 8, 0.86);
    --bg-tertiary: #020101;
    --bg-floating: #0b0606;
    --header-primary: #ffe9c2;
    --header-secondary: #d9a866;
    --text-normal: #f1e2c8;
    --text-muted: #ad906b;
    --text-link: #ffbf47;
    --interactive-normal: #cfae7c;
    --interactive-hover: #ffe0a3;
    --interactive-active: #fff4d8;
    --border-color: rgba(255, 138, 31, 0.22);
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.5);
    --shadow-md: 0 4px 14px rgba(0, 0, 0, 0.55);
    --shadow-lg: 0 8px 30px rgba(0, 0, 0, 0.6);
    --bg-modifier-hover: rgba(255, 150, 40, 0.09);
    --bg: #050304;
    --bg-2: #0d0806;
    --card: rgba(255, 170, 90, 0.05);
    --line: rgba(255, 150, 60, 0.18);
    --text: #f5e6cc;
    --muted: #b39572;
    color-scheme: dark;
}
/* the light theme paints a few cards cream directly: keep them dark too, so the cream text stays readable */
:root[data-anthem="on"] .home-card, :root[data-anthem="on"] .home-btn-ghost, :root[data-anthem="on"] .home-clock-figures li {
    background: rgba(16, 9, 8, 0.86); border-color: rgba(255, 138, 31, 0.22);
}
:root[data-anthem="on"] .home-steps li { border-color: rgba(255, 138, 31, 0.22); }
:root[data-anthem="on"] .home-promise code { background: rgba(255, 170, 90, 0.08); }
/* the dashboard's content area lets the glow through (the page underneath is already near-black) */
:root[data-anthem="on"] #main-wrapper { background-color: transparent; }
/* her hidden theme's own faint gem steps aside for the beating one */
:root[data-anthem="on"][data-theme="liora"] body::before { opacity: 0; transition: opacity 2s ease; }

/* ------------------------------------------------------------------ the glow behind everything */
/* z-index -1: above the page's background, below every bit of its content, on any page */
.anthem-layer {
    position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden;
    opacity: 0; transition: opacity var(--anthem-ease, 3s) ease-in-out;
    --glow: 0; --pulse: 0;
}
:root[data-anthem="on"] .anthem-layer { opacity: 1; }
.anthem-layer > div { position: absolute; pointer-events: none; }

/* the room's light, rising and falling with the song */
.anthem-room {
    inset: 0; opacity: var(--glow);
    background:
        radial-gradient(ellipse 75% 55% at 50% 118%, rgba(255, 106, 18, 0.34), transparent 70%),
        radial-gradient(ellipse 60% 42% at 50% -18%, rgba(255, 184, 0, 0.16), transparent 70%);
}
/* each 808, a warm swell from below */
.anthem-beat {
    inset: 0; opacity: var(--pulse);
    background: radial-gradient(ellipse 85% 48% at 50% 108%, rgba(255, 138, 20, 0.30), transparent 72%);
}
/* the edges always fall away into the dark */
.anthem-vignette { inset: 0; background: radial-gradient(ellipse at 50% 50%, transparent 52%, rgba(0, 0, 0, 0.6) 100%); }
/* her gem, a heartbeat behind the page */
.anthem-heart {
    left: 50%; top: 50%; width: min(58vh, 520px); aspect-ratio: 1;
    background: url("/static/liora_gem.png") center / contain no-repeat;
    filter: drop-shadow(0 0 36px rgba(255, 140, 0, 0.55));
    transform: translate(-50%, -50%) scale(calc(1 + var(--pulse) * 0.035));
    opacity: calc(0.025 + var(--glow) * 0.05);
    will-change: transform, opacity;
}
.anthem-layer.has-sidebar .anthem-heart { left: calc(var(--sidebar-width, 240px) + (100vw - var(--sidebar-width, 240px)) / 2); }
/* the sidebar's edge lights up on the beat */
.anthem-edge {
    display: none; top: 0; bottom: 0; left: calc(var(--sidebar-width, 240px) - 1px); width: 2px;
    background: linear-gradient(transparent, #ff9a1f 25%, #ffd05a 50%, #ff9a1f 75%, transparent);
    box-shadow: 0 0 18px 4px rgba(255, 140, 20, 0.45);
    opacity: calc(0.15 + var(--pulse) * 0.75);
}
@media (min-width: 900px) { .anthem-layer.has-sidebar .anthem-edge { display: block; } }
/* the drop: one slow bloom, never a strobe */
.anthem-flare {
    inset: 0; opacity: 0;
    background: radial-gradient(ellipse 70% 60% at 50% 60%, rgba(255, 196, 80, 0.32), rgba(255, 110, 20, 0.12) 45%, transparent 75%);
}
.anthem-flare.go { animation: anthem-flare 2.4s ease-out both; }
@keyframes anthem-flare { 0% { opacity: 0; } 8% { opacity: 1; } 100% { opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
    .anthem-heart { transform: translate(-50%, -50%); }
    .anthem-flare.go { animation: none; }
}