/* ============================================================
   DRIVE — themes.css   (colours + glow for every seasonal theme)
   ============================================================

   The active theme is chosen in core/themes.js (one line there).
   That script puts  data-season="halloween"  (or xmas, easter…) on
   the <html> tag, and the blocks below react to it.

   'drive' (the normal look) has NO block here on purpose — with
   data-season="drive" nothing in this file applies.

   Themes in this file: halloween, blackfriday, newyear, xmas,
   valentine, easter.

   HOW TO ADD A NEW THEME
   ----------------------
   1. Copy one of the blocks in section 3 (Halloween, Xmas, Easter…).
   2. Change the name in html[data-season="…"] and the colours.
   3. Add the same name to the THEMES list in core/themes.js.
   ============================================================ */


/* ── 1. LAYERS (shared by every theme) ──────────────────────
   Built by themes.js. All of them ignore taps and clicks.     */
.theme-grade,
.theme-tint,
.theme-fog,
.theme-flash,
.theme-fx {
  position: fixed;
  pointer-events: none;
}
.theme-grade, .theme-tint, .theme-flash { inset: 0; }

/* flat colour wash that shifts the whole picture's colour */
.theme-grade { z-index: 3; background: var(--th-grade, transparent); mix-blend-mode: color; }

/* glow from the corners + dark vignette */
.theme-tint  { z-index: 3; background: var(--th-tint, transparent); animation: themeGlow 7s ease-in-out infinite; }

/* low mist (only themes that ask for it) */
.theme-fog {
  z-index: 3; left: -6%; width: 112%; bottom: 0; height: 46vh;
  background: var(--th-fog, transparent);
  opacity: .6;
  animation: themeFogDrift 42s ease-in-out infinite alternate;
}

/* lightning */
.theme-flash {
  z-index: 4; opacity: 0;
  background:
    radial-gradient(ellipse at 50% -5%, rgba(255,232,205,.55), rgba(170,130,255,.16) 55%, transparent 80%);
}
.theme-flash.go { animation: themeFlash .95s ease-out 1; }

/* rain / snow / petals canvas — above the nav bar, below menus */
.theme-fx { inset: 0; width: 100%; height: 100%; z-index: 150; }

/* second, slower mist moving the other way */
.theme-fog::after {
  content: ''; position: absolute; inset: 0;
  background: var(--th-fog, transparent);
  transform: scaleX(-1);
  opacity: .8;
  animation: themeFogDrift 63s ease-in-out infinite alternate-reverse;
}

/* "signal" look (Black Friday): scan lines + a slow bright bar */
.theme-scan {
  position: fixed; inset: 0; z-index: 149; pointer-events: none; overflow: hidden;
  background: repeating-linear-gradient(0deg, rgba(0,0,0,.20) 0 1px, transparent 1px 3px);
  opacity: .55;
  transition: opacity .1s linear;
}
.theme-scan::after {
  content: ''; position: absolute; left: 0; right: 0; top: -18vh; height: 18vh;
  background: linear-gradient(to bottom, transparent, rgba(255,212,0,.07), transparent);
  animation: themeScanBar 7s linear infinite;
}
.theme-scan.still::after { display: none; }
@keyframes themeScanBar { to { transform: translateY(130vh); } }

/* short colour-split glitch on titles and buttons (Black Friday) */
html.th-glitch .tile-title,
html.th-glitch .tile-btn,
html.th-glitch .section-title {
  text-shadow: 2px 0 rgba(255,0,60,.75), -2px 0 rgba(0,220,255,.75);
}
html.th-glitch .tile-title-logo-img {
  filter: drop-shadow(2px 0 rgba(255,0,60,.7)) drop-shadow(-2px 0 rgba(0,220,255,.7));
  transform: translateX(2px);
}
html.th-glitch .theme-scan { opacity: .95; }

/* story pages ("reader"): softer, and nothing that could get in the way of reading */
html[data-season-scope="reader"] .theme-grade { opacity: .55; }
html[data-season-scope="reader"] .theme-tint  { opacity: .6; animation: none; }
html[data-season-scope="reader"] .theme-fog,
html[data-season-scope="reader"] .theme-flash,
html[data-season-scope="reader"] .theme-scan  { display: none; }
body.immersive .theme-badge { opacity: 0; pointer-events: none; }   /* header hidden while reading */

@keyframes themeGlow {
  0%, 100% { opacity: 1; }
  38%      { opacity: .86; }
  44%      { opacity: .98; }
  71%      { opacity: .9; }
}
@keyframes themeFogDrift {
  from { transform: translateX(-4%); }
  to   { transform: translateX(4%); }
}
@keyframes themeFlash {
  0%   { opacity: 0; }
  8%   { opacity: .9; }
  20%  { opacity: .12; }
  32%  { opacity: .6; }
  100% { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .theme-tint, .theme-fog, .theme-fog::after, .theme-scan::after { animation: none; }
}


/* ── 2. SHARED RULES: make the site read the theme variables ─
   (Every theme block in section 3 only has to fill in the
   --th-… colours; these rules do the rest.)                   */
html[data-season]:not([data-season="drive"]):not([data-season-scope="reader"]) {
  --bg:     var(--th-bg);
  --border: var(--th-line);
  --green:  var(--th-good);
  --muted:  var(--th-muted);
  background: var(--th-bg) !important;   /* beats the inline background on <html> */
}
html[data-season]:not([data-season="drive"]):not([data-season-scope="reader"]) body { background: var(--th-bg); }

/* The home hero tints its accent per experience through inline styles,
   so these need !important to take over for the season. (The little
   experience cards in the strip keep their own colour.) */
html[data-season]:not([data-season="drive"]):not([data-season-scope="reader"]),
html[data-season]:not([data-season="drive"]):not([data-season-scope="reader"]) #experienceCarousel {
  --active-accent:      var(--th-accent) !important;
  --active-accent-text: var(--th-accent-text) !important;
  --active-accent-fill: var(--th-fill) !important;
}

/* the DRIVE title logos take the season's colour too */
html[data-season]:not([data-season="drive"]):not([data-season-scope="reader"]) .tile-title-logo-img {
  filter: var(--th-logo-filter, none);
}

/* warm/cool shadow instead of the neutral blue-black */
html[data-season]:not([data-season="drive"]):not([data-season-scope="reader"]) .tile::after {
  background: linear-gradient(to bottom,
    rgba(var(--th-shade), .08) 0%,
    rgba(var(--th-shade), .48) 45%,
    rgba(var(--th-shade), .94) 100%);
}
html[data-season]:not([data-season="drive"]):not([data-season-scope="reader"]) .hero-panel::after {
  background: linear-gradient(to bottom,
    rgba(var(--th-shade), .05) 0%,
    rgba(var(--th-shade), .32) 50%,
    rgba(var(--th-shade), .86) 100%);
}
html[data-season]:not([data-season="drive"]):not([data-season-scope="reader"]) .nav { background: rgba(var(--th-shade), .45); }

html[data-season]:not([data-season="drive"]):not([data-season-scope="reader"]) .tile-btn,
html[data-season]:not([data-season="drive"]):not([data-season-scope="reader"]) .welcome-btn {
  border-color: var(--th-line-strong);
  background: var(--th-fill);
}
html[data-season]:not([data-season="drive"]):not([data-season-scope="reader"]) .tile-btn:hover,
html[data-season]:not([data-season="drive"]):not([data-season-scope="reader"]) .welcome-btn:hover {
  border-color: var(--th-accent-text);
  background: var(--th-fill);
  box-shadow: 0 0 22px var(--th-fill);
}
html[data-season]:not([data-season="drive"]):not([data-season-scope="reader"]) .tile-btn,
html[data-season]:not([data-season="drive"]):not([data-season-scope="reader"]) .welcome-btn,
html[data-season]:not([data-season="drive"]):not([data-season-scope="reader"]) .section-title { color: var(--th-accent-text); }

html[data-season]:not([data-season="drive"]):not([data-season-scope="reader"]) .welcome-screen { background: rgba(var(--th-shade), .74); }
html[data-season]:not([data-season="drive"]):not([data-season-scope="reader"]) .welcome-box {
  background: rgba(var(--th-shade), .93);
  border-color: var(--th-line-strong);
  box-shadow: 0 40px 120px rgba(0,0,0,.5), 0 0 60px var(--th-fill);
}
html[data-season]:not([data-season="drive"]):not([data-season-scope="reader"]) .welcome-line { background: var(--th-line-strong); }


/* ── 3. THE THEMES ──────────────────────────────────────────
   --th-bg           page background
   --th-shade        r,g,b of the dark overlays on cards
   --th-line         thin borders         --th-line-strong  button borders
   --th-muted        dimmed text
   --th-good         the little status dot
   --th-accent       main colour          --th-accent-text  lighter version for small text
   --th-fill         soft fill behind buttons / selected card
   --th-grade        colour wash over the whole page (soft)
   --th-tint         corner glows + vignette
   --th-fog          mist along the bottom (Halloween only)    */

/* ---------- HALLOWEEN ---------- */
html[data-season="halloween"] {
  --th-bg: #09050a;
  --th-shade: 12, 5, 9;
  --th-line: rgba(255,140,50,.16);
  --th-line-strong: rgba(255,140,50,.42);
  --th-muted: rgba(255,226,200,.52);
  --th-good: #ff8a2b;
  --th-logo-filter: sepia(.7) saturate(1.8) hue-rotate(-8deg) brightness(1.05);
  --th-accent: #ff7a1a;
  --th-accent-text: #ffa04d;
  --th-fill: rgba(255,122,26,.14);
  --th-grade: rgba(255,100,20,.10);
  --th-tint:
    radial-gradient(120% 70% at 50% 110%, rgba(255,106,0,.30), transparent 62%),
    radial-gradient(90% 60% at 6% -8%,   rgba(120,50,220,.24), transparent 60%),
    radial-gradient(80% 55% at 100% 0%,  rgba(255,90,0,.10),  transparent 55%),
    radial-gradient(ellipse at center, transparent 52%, rgba(0,0,0,.5) 100%);
  --th-fog:
    radial-gradient(60% 100% at 18% 100%, rgba(255,160,90,.22), transparent 70%),
    radial-gradient(70% 100% at 78% 100%, rgba(150,110,220,.20), transparent 70%);
}

/* ---------- CHRISTMAS ---------- */
html[data-season="xmas"] {
  --th-bg: #050a08;
  --th-shade: 5, 11, 9;
  --th-line: rgba(255,255,255,.10);
  --th-line-strong: rgba(255,90,100,.42);
  --th-muted: rgba(230,245,235,.55);
  --th-good: #5fe38a;
  --th-logo-filter: sepia(.6) saturate(2) hue-rotate(-45deg) brightness(1.05);
  --th-accent: #ff4d5a;
  --th-accent-text: #ff9097;
  --th-fill: rgba(255,77,90,.13);
  --th-grade: rgba(255,60,70,.05);
  --th-tint:
    radial-gradient(100% 60% at 0% 0%,    rgba(255,60,70,.22), transparent 60%),
    radial-gradient(100% 60% at 100% 100%, rgba(40,200,110,.20), transparent 60%),
    radial-gradient(ellipse at center, transparent 55%, rgba(0,0,0,.42) 100%);
}

/* ---------- EASTER ---------- */
html[data-season="easter"] {
  --th-bg: #0a0a10;
  --th-shade: 10, 10, 18;
  --th-line: rgba(255,200,230,.14);
  --th-line-strong: rgba(255,170,215,.42);
  --th-muted: rgba(245,235,255,.56);
  --th-good: #8be8c7;
  --th-logo-filter: sepia(.45) saturate(1.5) hue-rotate(285deg) brightness(1.1);
  --th-accent: #ff9ccf;
  --th-accent-text: #ffc4e4;
  --th-fill: rgba(255,156,207,.13);
  --th-grade: rgba(255,170,220,.04);
  --th-tint:
    radial-gradient(100% 60% at 0% 0%,     rgba(190,160,255,.22), transparent 60%),
    radial-gradient(100% 60% at 100% 100%, rgba(140,235,200,.18), transparent 60%),
    radial-gradient(70% 50% at 100% 0%,    rgba(255,236,160,.10), transparent 60%),
    radial-gradient(ellipse at center, transparent 58%, rgba(0,0,0,.38) 100%);
}


/* ── 4. THE "TEMPORARY OVERLAY" BUTTON ─────────────────────
   Small pill inside the top bar. themes.js sets its position,
   text and colour. Works even when the visitor switched the
   overlay off, so it does not depend on the --th-… variables.   */
.theme-badge {
  position: fixed;
  left: 50%;
  top: 22px;
  transform: translateX(-50%);
  z-index: 160;                        /* above the nav and rain, below menus and popups */
  height: 28px;
  display: inline-flex;
  align-items: center;
  padding: 0 12px;
  font-size: 9px;
  letter-spacing: .12em;
  white-space: nowrap;
  cursor: pointer;
  color: #ccc;
  background: rgba(0,0,0,.45);
  border: 1px solid rgba(255,255,255,.2);
  border-color: color-mix(in srgb, currentColor 40%, transparent);
  border-radius: 999px;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  transition: background .25s ease, border-color .25s ease;
}
.theme-badge:hover,
.theme-badge:active { background: rgba(255,255,255,.08); border-color: currentColor; }


/* ---------- BLACK FRIDAY (black + warning yellow, "signal" look) ---------- */
html[data-season="blackfriday"] {
  --th-bg: #050505;
  --th-shade: 4, 4, 4;
  --th-line: rgba(255,212,0,.16);
  --th-line-strong: rgba(255,212,0,.46);
  --th-muted: rgba(255,246,200,.52);
  --th-good: #ffd400;
  --th-logo-filter: sepia(1) saturate(3) hue-rotate(-3deg) brightness(1.1);
  --th-accent: #ffd400;
  --th-accent-text: #ffe44d;
  --th-fill: rgba(255,212,0,.12);
  --th-grade: rgba(255,200,0,.05);
  --th-tint:
    radial-gradient(100% 60% at 0% 0%,     rgba(255,212,0,.16), transparent 58%),
    radial-gradient(100% 60% at 100% 100%, rgba(255,70,0,.14),  transparent 60%),
    radial-gradient(ellipse at center, transparent 50%, rgba(0,0,0,.55) 100%);
}

/* ---------- NEW YEAR (gold + deep violet) ---------- */
html[data-season="newyear"] {
  --th-bg: #07060d;
  --th-shade: 8, 6, 14;
  --th-line: rgba(255,210,110,.15);
  --th-line-strong: rgba(255,200,90,.44);
  --th-muted: rgba(255,240,215,.54);
  --th-good: #ffc53d;
  --th-logo-filter: sepia(.8) saturate(1.7) hue-rotate(5deg) brightness(1.08);
  --th-accent: #ffc53d;
  --th-accent-text: #ffd97a;
  --th-fill: rgba(255,197,61,.13);
  --th-grade: rgba(255,190,70,.06);
  --th-tint:
    radial-gradient(110% 65% at 50% 112%, rgba(255,190,60,.26), transparent 62%),
    radial-gradient(90% 60% at 0% -6%,    rgba(130,70,230,.24), transparent 60%),
    radial-gradient(90% 60% at 100% -4%,  rgba(255,90,170,.12), transparent 58%),
    radial-gradient(ellipse at center, transparent 55%, rgba(0,0,0,.45) 100%);
}

/* ---------- VALENTINE'S DAY (rose + crimson) ---------- */
html[data-season="valentine"] {
  --th-bg: #0b0508;
  --th-shade: 12, 5, 9;
  --th-line: rgba(255,120,160,.16);
  --th-line-strong: rgba(255,110,155,.44);
  --th-muted: rgba(255,225,235,.54);
  --th-good: #ff6f9c;
  --th-logo-filter: sepia(.6) saturate(2.2) hue-rotate(-35deg) brightness(1.05);
  --th-accent: #ff4f86;
  --th-accent-text: #ff8fb0;
  --th-fill: rgba(255,79,134,.14);
  --th-grade: rgba(255,70,130,.07);
  --th-tint:
    radial-gradient(110% 65% at 50% 112%, rgba(255,60,120,.28), transparent 62%),
    radial-gradient(90% 60% at 0% -6%,    rgba(190,40,100,.22), transparent 60%),
    radial-gradient(ellipse at center, transparent 55%, rgba(0,0,0,.45) 100%);
}

/* very narrow gap (story pages on small phones): just the symbol */
.theme-badge--icon { width: 28px; padding: 0; justify-content: center; font-size: 12px; letter-spacing: 0; }

.theme-badge:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }