/* Tracklyst seasonal theme — Halloween.
   Layout code (index.html) only ever references the generic `.holiday-*`
   class names and [data-season="halloween"] attribute below — a future
   holiday theme can ship its own /theme/<name>/theme.css defining the same
   [data-season="<name>"] hook with its own palette/artwork, swapped in by
   changing which <link> is included, without editing layout code. */

/* ── PALETTE — every icon in icons.js reads its colors from these ── */
/* Defined globally (not gated behind [data-season="halloween"]) so the
   season-picker card in Settings can render a correctly-colored pumpkin
   even while the theme itself is toggled off — actual decor visibility is
   controlled separately, by the display:none rules further down. */
:root {
  --holiday-pumpkin: #ff8c1a;
  --holiday-pumpkin-shade: #c8600a;
  --holiday-pumpkin-face: #3a1a06;
  --holiday-pumpkin-glow: rgba(255, 140, 26, 0.65);
  --holiday-stem: #6b7f3a;
  --holiday-bat: #2b2b30;
  --holiday-ghost: #eef0f4;
  --holiday-ghost-eye: rgba(20, 20, 25, 0.55);
  --holiday-skull: #dfe1e6;
  --holiday-skull-shade: rgba(30, 30, 35, 0.55);
  --holiday-leaf-a: #d9711c;
  --holiday-leaf-b: #b6371f;
  --holiday-leaf-vein: rgba(0, 0, 0, 0.25);
  --holiday-leaf-stem: #6b4423;
  --holiday-web: rgba(150, 150, 150, 0.55);
  --holiday-moon: #f3ecd2;
  --holiday-leaf: var(--holiday-leaf-a);
  --holiday-eye-white: #f4f1e6;
  --holiday-eye-outline: rgba(0, 0, 0, 0.35);
  --holiday-eye-iris: #c8a83c;
  --holiday-eye-pupil: #1a1408;
  --holiday-eye-vein: rgba(200, 30, 30, 0.7);
  --holiday-skull-eye: #d21f1f;
  --holiday-skull-eye-glow: rgba(210, 31, 31, 0.85);
}
/* Same hooks as the app's existing light "paper" background handling —
   a few colors need more contrast against a light surface. */
html[data-bg="paper"] {
  --holiday-bat: #35322e;
  --holiday-ghost-eye: rgba(20, 20, 25, 0.6);
  --holiday-skull-shade: rgba(20, 20, 25, 0.6);
  --holiday-web: rgba(90, 90, 90, 0.5);
}
.holiday-leaf.leaf-alt { --holiday-leaf: var(--holiday-leaf-b); }

/* ── DASHBOARD DECOR ── */
#screen-dashboard[data-season="halloween"] {
  background-image:
    radial-gradient(ellipse 1400px 800px at 8% -5%, rgba(255, 140, 26, 0.13), transparent 78%),
    radial-gradient(ellipse 1500px 900px at 100% 100%, rgba(120, 40, 0, 0.18), transparent 80%);
  cursor: var(--holiday-cursor-uri, auto);
}
#screen-dashboard[data-season="halloween"] .dash-header {
  border-bottom: 2px solid var(--holiday-pumpkin);
  padding-bottom: 0.75rem;
  margin-bottom: 0.75rem;
  position: relative;
}

/* Small inline icons next to text (dashboard title, sidebar nav item) —
   sized in `em` so they scale with whatever text they sit beside. Hidden
   unless the season is actually active, same as the other decor below. */
.holiday-icon-inline {
  display: none;
  width: 2em;
  height: 2em;
  vertical-align: -0.5em;
  margin-left: 0.3em;
}
#screen-dashboard[data-season="halloween"] .holiday-icon-inline { display: inline-block; }
.holiday-icon-inline svg { width: 100%; height: 100%; display: block; }
.holiday-icon-inline .holiday-icon-pumpkin {
  animation: holidayPumpkinFlicker 3s ease-in-out infinite;
}

/* Eyeball beside the "Conjure Playlist" button — the pupil's transform is
   set by _initHolidayEye() in index.html on mousemove, not by CSS. */
.holiday-eye-wrap { display: none; width: 60px; height: 42px; flex-shrink: 0; }
#screen-dashboard[data-season="halloween"] .holiday-eye-wrap { display: inline-block; }
.holiday-eye-wrap svg { width: 100%; height: 100%; display: block; overflow: visible; }
.holiday-eye-pupil { transition: transform 0.06s linear; }
.holiday-eye-blink {
  transform-box: fill-box; transform-origin: center;
  animation: holidayEyeBlink 10s ease-in-out infinite;
}
@keyframes holidayEyeBlink {
  0%, 92%, 100% { transform: scaleY(1); }
  94%           { transform: scaleY(0.08); }
  96%           { transform: scaleY(1); }
}

/* Cobwebs tucked in the sidebar's top-left and the header's top-right corner */
.holiday-cobweb { display: none; position: absolute; width: 60px; height: 60px; pointer-events: none; }
.holiday-cobweb svg { width: 100%; height: 100%; display: block; }
#screen-dashboard[data-season="halloween"] .holiday-cobweb { display: block; }
.holiday-cobweb-tl { top: 0; left: 0; }
.holiday-cobweb-tr { top: -14px; right: -8px; transform: scaleX(-1); }

/* Drifting bats/leaves/ghosts/skulls — decorative only, never intercepts clicks */
.holiday-fx { display: none; }
#screen-dashboard[data-season="halloween"] .holiday-fx {
  display: block; position: fixed; inset: 0; overflow: hidden; pointer-events: none; z-index: 3;
}
.holiday-bat, .holiday-leaf, .holiday-ghost, .holiday-skull { position: absolute; width: 22px; height: 22px; opacity: 0.55; }
.holiday-bat svg, .holiday-leaf svg, .holiday-ghost svg, .holiday-skull svg { width: 100%; height: 100%; display: block; }
.holiday-bat { left: -8vw; width: 72px; height: 72px; opacity: 0.9; animation-name: holidayBatFly; animation-timing-function: linear; animation-iteration-count: infinite; }
/* Wings flap independently of the bat's own flight-path animation above —
   a parent and its children can each carry a separate transform animation.
   Pivoting around the shoulder (the body-side edge of each wing's own
   bounding box) is what makes it read as a flap instead of a squash. */
.holiday-bat-wing { transform-box: fill-box; animation: holidayBatFlap 0.42s ease-in-out infinite; }
.holiday-bat-wing-r { transform-origin: 0% 50%; }
.holiday-bat-wing-l { transform-origin: 100% 50%; }

/* Leaves: falling (Y) and swaying (X + tumble) are two separate animations
   on two nested elements, not one. That's what keeps the leaf moving at
   every instant — a single eased transform would bring X, Y, and rotation
   all to a simultaneous stop at each keyframe boundary; splitting them
   means the fall never pauses even while the sway eases through a turn. */
.holiday-leaf { animation-name: holidayLeafFallY; animation-timing-function: linear; animation-iteration-count: infinite; }
.holiday-leaf-sway { display: block; width: 100%; height: 100%; animation-name: holidaySwayX; animation-timing-function: ease-in-out; animation-iteration-count: infinite; }
.holiday-leaf.leaf-alt .holiday-leaf-sway { animation-name: holidaySwayXAlt; }
.holiday-ghost { left: -6vw; width: 44px; height: 44px; animation-name: holidayGhostFloat; animation-timing-function: ease-in-out; animation-iteration-count: infinite; }
.holiday-skull { width: 76px; height: 76px; opacity: 0.9; animation-name: holidaySkullBob; animation-timing-function: ease-in-out; animation-iteration-count: infinite; }

/* ── ANIMATIONS ── */
@keyframes holidayBatFly {
  0%   { transform: translate(0, 0) rotate(0deg); }
  50%  { transform: translate(60vw, 6vh) rotate(-8deg); }
  100% { transform: translate(125vw, -4vh) rotate(6deg); }
}
@keyframes holidayBatFlap {
  0%, 100% { transform: scaleY(1); }
  50%      { transform: scaleY(0.35); }
}
@keyframes holidayLeafFallY {
  0%   { transform: translateY(-8vh); }
  100% { transform: translateY(112vh); }
}
@keyframes holidaySwayX {
  0%   { transform: translateX(0) rotate(0deg); }
  25%  { transform: translateX(6vw) rotate(80deg); }
  50%  { transform: translateX(0) rotate(180deg); }
  75%  { transform: translateX(-6vw) rotate(280deg); }
  100% { transform: translateX(0) rotate(360deg); }
}
@keyframes holidaySwayXAlt {
  0%   { transform: translateX(0) rotate(0deg); }
  25%  { transform: translateX(-6vw) rotate(-80deg); }
  50%  { transform: translateX(0) rotate(-180deg); }
  75%  { transform: translateX(6vw) rotate(-280deg); }
  100% { transform: translateX(0) rotate(-360deg); }
}
@keyframes holidayGhostFloat {
  0%   { transform: translate(0, 0) scale(1); opacity: 0.1; }
  12%  { opacity: 0.6; }
  50%  { transform: translate(45vw, -8vh) scale(1.08); opacity: 0.6; }
  88%  { opacity: 0.6; }
  100% { transform: translate(96vw, 5vh) scale(1); opacity: 0.05; }
}
@keyframes holidaySkullBob {
  0%, 100% { transform: translateY(0) rotate(-6deg); }
  50%      { transform: translateY(-8px) rotate(6deg); }
}
@keyframes holidayPumpkinFlicker {
  0%, 100% { filter: drop-shadow(0 0 1px var(--holiday-pumpkin-glow)); }
  50%      { filter: drop-shadow(0 0 3px var(--holiday-pumpkin-glow)); }
}
.holiday-skull-eye {
  transform-box: fill-box; transform-origin: center;
  animation: holidaySkullEyeGlow 8s ease-in-out infinite;
}
@keyframes holidaySkullEyeGlow {
  0%, 100% { opacity: 0.5; filter: drop-shadow(0 0 0.5px var(--holiday-skull-eye-glow)); }
  50%      { opacity: 1;   filter: drop-shadow(0 0 2.5px var(--holiday-skull-eye-glow)); }
}

/* Decorative motion opts out for anyone who's asked for reduced motion —
   the art stays visible, it just stops moving. */
@media (prefers-reduced-motion: reduce) {
  .holiday-bat, .holiday-leaf, .holiday-leaf-sway, .holiday-ghost, .holiday-skull,
  .holiday-bat-wing, .holiday-eye-blink, .holiday-skull-eye,
  .holiday-icon-inline .holiday-icon-pumpkin {
    animation: none !important;
  }
}