/* ─────────────────────────────────────────────────────────────
   Per-chapter visual themes.

   Each `.theme-*` is applied to the chapter <section>. It mostly
   overrides CSS vars (so existing components — Polaroid, Note,
   Ticket, etc — re-skin automatically), plus a few chrome tweaks
   for the sticky chapter-marker bar. Ornaments are rendered
   separately by chapter-themes.jsx into an `.ornaments` layer.
   ───────────────────────────────────────────────────────────── */

/* ── Shared ornament layer ────────────────────────────── */
.ornaments {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 0;
}
.ornaments > * { position: absolute; }

/* keep chapter content above ornaments */
section[data-chapter-id] { isolation: isolate; }
section[data-chapter-id] > *:not(.ornaments):not(.theme-bg) { position: relative; z-index: 1; }

/* Full-bleed colored backdrop for dark themes. Sits behind everything
   in the section, extends edge-to-edge of the section. */
.theme-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

/* ── II · Chromakopia (black + dim green, military / noir) ── */
.theme-chromakopia {
  --paper:        #0d130c;
  --paper-light:  #16201a;
  --paper-deep:   #060a06;
  --ink:          #dfe9d2;
  --ink-soft:     #a6b89b;
  --ink-faded:    #5e7058;
  --rose:         #7be072;     /* repurposed: accent green */
  --gold:         #c4d97a;
  --sage:         #7be072;
  --tape:         rgba(123, 224, 114, 0.32);
  --tape-yellow:  rgba(196, 217, 122, 0.32);
  color: var(--ink);
}
.theme-chromakopia .theme-bg {
  background:
    radial-gradient(ellipse at 20% 8%, rgba(123,224,114,0.07), transparent 55%),
    radial-gradient(ellipse at 85% 92%, rgba(60,90,40,0.18), transparent 60%),
    repeating-linear-gradient(0deg, rgba(255,255,255,0.014) 0 1px, transparent 1px 5px),
    #0d130c;
}
.theme-chromakopia .theme-bg::after {
  content: "";
  position: absolute; inset: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='1.1' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.18  0 0 0 0 0.32  0 0 0 0 0.14  0 0 0 0.55 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  opacity: 0.18;
  mix-blend-mode: screen;
}
.theme-chromakopia .chapter-marker {
  background: linear-gradient(to bottom, #0d130c 70%, transparent 100%);
  color: rgba(180, 200, 160, 0.55);
}
.theme-chromakopia .chapter-marker .roman { color: #9dcb86; }
.theme-chromakopia h2 {
  font-family: 'Oswald', 'JetBrains Mono', sans-serif !important;
  font-weight: 600 !important;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #b6e89c !important;
  text-shadow: 0 0 1px rgba(123,224,114,0.5), 0 2px 0 rgba(0,0,0,0.6);
}
.theme-chromakopia .swash::after { filter: hue-rotate(90deg) saturate(2.2) brightness(1.4); }
.theme-chromakopia .ticket {
  background: #0a100a;
  border-color: rgba(123,224,114,0.45);
  color: #b6e89c;
}
.theme-chromakopia .ticket::before,
.theme-chromakopia .ticket::after { background: #0d130c; }
.theme-chromakopia .divider-stitch { background-image: repeating-linear-gradient(90deg, rgba(123,224,114,0.5) 0 6px, transparent 6px 12px); }

/* ── I · Sicily (warm Mediterranean) ────────────────── */
.theme-sicily .theme-bg {
  background:
    radial-gradient(ellipse at 8% 6%, rgba(220,180,90,0.10), transparent 45%),
    radial-gradient(ellipse at 92% 94%, rgba(70,120,150,0.08), transparent 50%);
}

/* ── III · London (warm + cartoons) ─────────────────── */
/* Inherits warm palette; just adds ornaments. */

/* ── V · Graduation (warm + soft confetti) ──────────── */
.theme-graduation .theme-bg {
  background:
    radial-gradient(ellipse at 18% 8%, rgba(201,169,97,0.10), transparent 45%),
    radial-gradient(ellipse at 82% 92%, rgba(168,176,152,0.10), transparent 50%);
}

/* ── IV · Beach (warm + sea/sun) ────────────────────── */
.theme-beach .theme-bg {
  background:
    linear-gradient(180deg, transparent 60%, rgba(208,182,128,0.18) 88%, rgba(196,160,100,0.32) 100%);
}

/* ── VI · Music of the Spheres (cosmic) ─────────────── */
.theme-spheres {
  --paper:        #0a0e26;
  --paper-light:  #141a3a;
  --paper-deep:   #060820;
  --ink:          #ece7f5;
  --ink-soft:     #b8b0d8;
  --ink-faded:    #6e6a92;
  --rose:         #ffd86a;     /* sun-yellow accent */
  --gold:         #f7c14a;
  --tape:         rgba(255, 216, 106, 0.36);
  --tape-yellow:  rgba(255, 174, 220, 0.40);
  color: var(--ink);
}
.theme-spheres .theme-bg {
  background:
    radial-gradient(circle at 18% 14%, rgba(255,180,90,0.10), transparent 38%),
    radial-gradient(circle at 78% 84%, rgba(120,90,220,0.18), transparent 50%),
    radial-gradient(circle at 50% 50%, rgba(50,80,180,0.10), transparent 60%),
    #0a0e26;
}
.theme-spheres .theme-bg::before {
  content: "";
  position: absolute; inset: 0;
  background-image:
    radial-gradient(1.5px 1.5px at 12% 22%,  rgba(255,255,255,0.85), transparent 50%),
    radial-gradient(1px 1px at 28% 60%,      rgba(255,255,255,0.70), transparent 50%),
    radial-gradient(1.5px 1.5px at 44% 14%,  rgba(255,255,255,0.85), transparent 50%),
    radial-gradient(1px 1px at 62% 78%,      rgba(255,255,255,0.65), transparent 50%),
    radial-gradient(2px 2px at 80% 30%,      rgba(255,255,255,0.95), transparent 50%),
    radial-gradient(1px 1px at 92% 64%,      rgba(255,255,255,0.7),  transparent 50%),
    radial-gradient(1px 1px at 8%  82%,      rgba(255,255,255,0.6),  transparent 50%),
    radial-gradient(1.5px 1.5px at 33% 38%,  rgba(255,255,255,0.75), transparent 50%),
    radial-gradient(1px 1px at 55% 52%,      rgba(255,255,255,0.55), transparent 50%),
    radial-gradient(2px 2px at 70% 12%,      rgba(255,255,255,0.9),  transparent 50%),
    radial-gradient(1px 1px at 18% 48%,      rgba(255,255,255,0.55), transparent 50%),
    radial-gradient(1px 1px at 86% 4%,       rgba(255,255,255,0.7),  transparent 50%);
  background-size: 100% 100%;
  opacity: 0.95;
}
.theme-spheres .chapter-marker {
  background: linear-gradient(to bottom, #0a0e26 70%, transparent 100%);
  color: rgba(200, 195, 230, 0.55);
}
.theme-spheres .chapter-marker .roman { color: #ffd86a; font-style: italic; }
.theme-spheres h2 {
  color: #f3ecff !important;
  text-shadow: 0 0 18px rgba(160,140,255,0.35);
}
.theme-spheres .ticket {
  background: rgba(20,26,58,0.85);
  border-color: rgba(255,216,106,0.55);
  color: #ffd86a;
}
.theme-spheres .ticket::before,
.theme-spheres .ticket::after { background: #0a0e26; }
.theme-spheres .swash::after { filter: hue-rotate(200deg) saturate(2) brightness(1.5); }
.theme-spheres .divider-stitch { background-image: repeating-linear-gradient(90deg, rgba(255,216,106,0.55) 0 6px, transparent 6px 12px); }

/* ── VII · Christmas (warm + festive) ───────────────── */
.theme-christmas .theme-bg {
  background:
    radial-gradient(ellipse at 10% 4%, rgba(180,40,40,0.05), transparent 40%),
    radial-gradient(ellipse at 90% 96%, rgba(40,110,60,0.05), transparent 45%);
}
.theme-christmas .chapter-marker {
  background:
    repeating-linear-gradient(135deg,
      rgba(180,40,40,0.18) 0 10px,
      transparent 10px 20px,
      rgba(40,110,60,0.18) 20px 30px,
      transparent 30px 40px
    ),
    linear-gradient(to bottom, var(--paper) 80%, transparent 100%);
}

/* ── VIII · Tennis / cocktails / breakfast ──────────── */
/* Inherits warm; ornaments only. */

/* ── I · Sicily (warm + mediterranean) ──────────────── */
.theme-sicily .theme-bg {
  background:
    radial-gradient(ellipse at 92% 8%, rgba(218,140,70,0.07), transparent 45%),
    radial-gradient(ellipse at 6% 92%, rgba(120,140,80,0.06), transparent 45%);
}

/* ── V · Graduation (warm + soft gold confetti) ─────── */
.theme-graduation .theme-bg {
  background:
    radial-gradient(ellipse at 50% 0%, rgba(201,169,97,0.10), transparent 55%),
    radial-gradient(ellipse at 50% 100%, rgba(168,176,152,0.08), transparent 55%);
}