/*
 * Seasonal and holiday themes. The base house style (black, grain, Anton, hard cuts)
 * never changes; a theme only swaps the accent colours, gives the logo its own
 * variant and, with effects on, adds one subtle decoration.
 * The active theme is set server-side on <html data-theme="…">.
 */

/* ---------- colours ---------- */
[data-theme="spring"]    { --accent: #a6ff2e; --accent-2: #e8ff9e; --glow: rgba(166, 255, 46, .14); }
[data-theme="summer"]    { --accent: #ffb000; --accent-2: #ff5e00; --glow: rgba(255, 140, 0, .18); }
[data-theme="autumn"]    { --accent: #ff6a1a; --accent-2: #9c2f00; --glow: rgba(255, 106, 26, .16); }
[data-theme="winter"]    { --accent: #8fdcff; --accent-2: #e9f8ff; --glow: rgba(143, 220, 255, .14); }
[data-theme="valentine"] { --accent: #ff2e7e; --accent-2: #ff9ec4; --glow: rgba(255, 46, 126, .16); }
[data-theme="kingsday"]  { --accent: #ff7b00; --accent-2: #ffb366; --glow: rgba(255, 123, 0, .18); }
[data-theme="halloween"] { --accent: #ff7a00; --accent-2: #9d4dff; --glow: rgba(157, 77, 255, .2); }
[data-theme="christmas"] { --accent: #ff2a2a; --accent-2: #1fd17a; --glow: rgba(255, 42, 42, .16); }
[data-theme="newyear"]   { --accent: #ffcf3f; --accent-2: #fff4cc; --glow: rgba(255, 207, 63, .16); }

/* ---------- logo variants ---------- */
[data-theme="summer"] .wm-fm { background: linear-gradient(135deg, var(--accent), var(--accent-2)); }
[data-theme="autumn"] .wm-fm { background: repeating-linear-gradient(-45deg, var(--accent) 0 6px, #e65a10 6px 12px); }
[data-theme="winter"] .wm-fm { background: linear-gradient(180deg, #fff 0 18%, var(--accent) 18%); }
[data-theme="halloween"] .wm-fm { background: var(--accent); box-shadow: 4px 4px 0 var(--accent-2); }
[data-theme="newyear"] .wm-fm { background: linear-gradient(120deg, #ffe58a, var(--accent) 45%, #c99a12); }

.wordmark::after { position: absolute; pointer-events: none; }
/* Christmas: a tiny string of lights under the logo. */
[data-theme="christmas"] .wordmark::after {
  content: '';
  left: 0; right: 0; bottom: -7px; height: 5px;
  background:
    radial-gradient(circle, #ff2a2a 2px, transparent 2.5px) 0 0 / 18px 5px repeat-x,
    radial-gradient(circle, #1fd17a 2px, transparent 2.5px) 6px 0 / 18px 5px repeat-x,
    radial-gradient(circle, #ffd34d 2px, transparent 2.5px) 12px 0 / 18px 5px repeat-x;
}
/* New Year: a sparkle on the FM block. */
[data-theme="newyear"] .wordmark::after { content: '✦'; right: -12px; top: -10px; font-size: 14px; color: var(--accent-2); }
/* Valentine: a small heart. */
[data-theme="valentine"] .wordmark::after { content: '♥'; right: -12px; top: -9px; font-size: 13px; color: var(--accent); }
/* King's Day: a small crown above the FM block. */
[data-theme="kingsday"] .wordmark::after { content: '♛'; right: 8px; top: -15px; font-size: 14px; color: var(--accent); }
/* Halloween: the FM block drips. */
[data-theme="halloween"] .wordmark::after {
  content: '';
  right: 4px; bottom: -8px; width: 22px; height: 9px;
  background: radial-gradient(circle at 4px 0, var(--accent) 3px, transparent 3.5px), radial-gradient(circle at 15px 0, var(--accent) 2px, transparent 2.5px);
  background-repeat: no-repeat;
}

/* ---------- decorations (only with effects on) ---------- */
.decor { position: fixed; inset: 0; pointer-events: none; z-index: 60; display: none; }
[data-effects="on"] .decor { display: block; }
.decor-lights, .decor-particles { position: absolute; inset: 0; }

/* Christmas: a string of lights along the top edge, gently twinkling. */
[data-theme="christmas"] .decor-lights {
  bottom: auto;
  height: 16px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='16'%3E%3Cpath d='M0 2 Q18 10 36 2 T72 2' fill='none' stroke='%23333' stroke-width='1.5'/%3E%3C/svg%3E") repeat-x;
}
[data-theme="christmas"] .decor-lights::before,
[data-theme="christmas"] .decor-lights::after {
  content: '';
  position: absolute;
  inset: 0;
  background-repeat: repeat-x;
  animation: twinkle 3s ease-in-out infinite;
}
[data-theme="christmas"] .decor-lights::before {
  background-image:
    radial-gradient(4px 5px at 9px 8px, #ff3b3b 60%, transparent 70%),
    radial-gradient(4px 5px at 45px 8px, #ffd34d 60%, transparent 70%);
  background-size: 72px 16px;
  filter: drop-shadow(0 0 4px rgba(255, 80, 60, .8));
}
[data-theme="christmas"] .decor-lights::after {
  background-image:
    radial-gradient(4px 5px at 27px 8px, #1fd17a 60%, transparent 70%),
    radial-gradient(4px 5px at 63px 8px, #4db8ff 60%, transparent 70%);
  background-size: 72px 16px;
  filter: drop-shadow(0 0 4px rgba(80, 200, 255, .8));
  animation-delay: -1.5s;
}
@keyframes twinkle { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }

/* Winter and Christmas: very light snow. */
[data-theme="winter"] .decor-particles,
[data-theme="christmas"] .decor-particles {
  opacity: .5;
  background-image:
    radial-gradient(1.5px 1.5px at 20px 30px, #fff 50%, transparent 51%),
    radial-gradient(1px 1px at 90px 120px, #fff 50%, transparent 51%),
    radial-gradient(2px 2px at 160px 60px, #fff 50%, transparent 51%),
    radial-gradient(1px 1px at 230px 190px, #fff 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 280px 250px, #fff 50%, transparent 51%);
  background-size: 300px 300px;
  animation: snow 24s linear infinite;
}
@keyframes snow { from { background-position: 0 0; } to { background-position: 60px 300px; } }

/* New Year: slow sparkles in gold. */
[data-theme="newyear"] .decor-particles {
  opacity: .6;
  background-image:
    radial-gradient(1.5px 1.5px at 40px 50px, #ffe58a 50%, transparent 51%),
    radial-gradient(1px 1px at 130px 160px, #fff 50%, transparent 51%),
    radial-gradient(2px 2px at 210px 90px, #ffcf3f 50%, transparent 51%),
    radial-gradient(1px 1px at 300px 260px, #fff 50%, transparent 51%);
  background-size: 340px 340px;
  animation: sparkle 4s ease-in-out infinite, rise 40s linear infinite;
}
@keyframes sparkle { 0%, 100% { opacity: .2; } 50% { opacity: .7; } }
@keyframes rise { from { background-position: 0 0; } to { background-position: 0 -340px; } }

/* Halloween: a purple haze rising from the bottom. */
[data-theme="halloween"] .decor-particles { background: radial-gradient(ellipse at 50% 120%, rgba(157, 77, 255, .22), transparent 60%); }

/* Autumn: warm low light. Spring/summer: no extra decoration, just colour. */
[data-theme="autumn"] .decor-particles { background: radial-gradient(ellipse at 0% 100%, rgba(255, 106, 26, .1), transparent 55%); }

/* King's Day: an orange bar along the top. */
[data-theme="kingsday"] .decor-lights { bottom: auto; height: 4px; background: repeating-linear-gradient(90deg, var(--accent) 0 40px, #fff 40px 44px, #21468b 44px 48px, #fff 48px 52px); }

/* ---------- admin swatches ---------- */
.swatch-default { --sw: #ff1f1f; }
.swatch-spring { --sw: #a6ff2e; }
.swatch-summer { --sw: #ffb000; }
.swatch-autumn { --sw: #ff6a1a; }
.swatch-winter { --sw: #8fdcff; }
.swatch-valentine { --sw: #ff2e7e; }
.swatch-kingsday { --sw: #ff7b00; }
.swatch-halloween { --sw: #ff7a00; }
.swatch-christmas { --sw: #ff2a2a; }
.swatch-newyear { --sw: #ffcf3f; }