/**
 * parkData seasonal themes — visual overlays, motion, and brand accents.
 * Palette variables are injected via html[data-season] (site_assets / seasonThemes.js).
 */

/* ── Shared motion ───────────────────────────────────────────────────────── */
@keyframes pd-season-glow {
  0%, 100% { filter: drop-shadow(0 0 0 transparent); opacity: 1; }
  50% { filter: drop-shadow(0 0 10px color-mix(in srgb, var(--pd-brand) 70%, transparent)); opacity: 0.96; }
}

@keyframes pd-season-shimmer {
  0% { background-position: 0% 50%; }
  100% { background-position: 200% 50%; }
}

@keyframes pd-season-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}

@keyframes pd-season-pulse-ring {
  0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--pd-brand) 45%, transparent); }
  70% { box-shadow: 0 0 0 14px transparent; }
  100% { box-shadow: 0 0 0 0 transparent; }
}

@keyframes pd-season-rise-in {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Particle canvas */
.pd-season-fx {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 40;
  overflow: hidden;
}

.pd-season-banner {
  position: sticky;
  top: 0;
  z-index: 45;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.45rem 1rem;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--pd-text-on-brand, #071730);
  background: linear-gradient(
    90deg,
    color-mix(in srgb, var(--pd-brand) 88%, var(--pd-accent)),
    var(--pd-brand),
    color-mix(in srgb, var(--pd-brand) 80%, var(--pd-accent))
  );
  background-size: 200% 100%;
  animation: pd-season-shimmer 8s linear infinite, pd-season-rise-in 0.45s ease-out;
  border-bottom: 1px solid var(--pd-brand-border);
}

.pd-season-banner[hidden] { display: none !important; }

/* Brand accent follows season brand token */
html[data-season]:not([data-season="default"]) .pd-brand-accent {
  color: var(--pd-brand);
  animation: pd-season-glow 2.8s ease-in-out infinite;
}

html[data-season]:not([data-season="default"]) .pd-btn--flag,
html[data-season]:not([data-season="default"]) .pd-btn--primary {
  animation: pd-season-pulse-ring 2.8s ease-out infinite;
}

html[data-season]:not([data-season="default"]) .pd-nav-brand {
  animation: pd-season-float 4.5s ease-in-out infinite;
}

/* Hero seasonal scrim + media tint */
html[data-season]:not([data-season="default"]) .pd-hero__media::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  mix-blend-mode: soft-light;
  opacity: 0.55;
  background: radial-gradient(
    120% 80% at 70% 20%,
    color-mix(in srgb, var(--pd-brand) 55%, transparent),
    color-mix(in srgb, var(--pd-accent) 35%, transparent) 45%,
    transparent 70%
  );
  animation: pd-season-shimmer 12s ease-in-out infinite alternate;
}

html[data-season]:not([data-season="default"]) .pd-hero__scrim {
  background:
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--pd-bg-body) 35%, transparent) 0%,
      color-mix(in srgb, var(--pd-bg-body) 78%, transparent) 55%,
      var(--pd-bg-body) 100%
    ),
    radial-gradient(
      90% 70% at 20% 10%,
      color-mix(in srgb, var(--pd-brand) 28%, transparent),
      transparent 60%
    );
}

/* Subtle page atmosphere (non-invasive; no stacking-context on all children) */
html[data-season]:not([data-season="default"]) body {
  background-image:
    radial-gradient(ellipse 80% 50% at 10% -10%, color-mix(in srgb, var(--pd-brand) 28%, transparent), transparent 55%),
    radial-gradient(ellipse 70% 45% at 100% 0%, color-mix(in srgb, var(--pd-accent) 22%, transparent), transparent 50%);
  background-attachment: fixed;
}

/* ── Halloween ───────────────────────────────────────────────────────────── */
html[data-season="halloween"] .pd-hero__media::after {
  background:
    radial-gradient(circle at 20% 30%, rgba(255, 107, 0, 0.55), transparent 40%),
    radial-gradient(circle at 80% 20%, rgba(168, 85, 247, 0.5), transparent 45%),
    linear-gradient(180deg, rgba(26, 11, 46, 0.2), rgba(26, 11, 46, 0.55));
  mix-blend-mode: color;
  opacity: 0.7;
  animation: pd-halloween-flicker 5s ease-in-out infinite;
}

@keyframes pd-halloween-flicker {
  0%, 100% { opacity: 0.65; filter: hue-rotate(0deg); }
  40% { opacity: 0.8; }
  42% { opacity: 0.45; }
  44% { opacity: 0.78; }
  70% { opacity: 0.7; filter: hue-rotate(-8deg); }
}

html[data-season="halloween"] .pd-btn--flag {
  background: linear-gradient(135deg, #ff6b00, #a855f7);
  border-color: transparent;
  color: #fff;
}

/* ── Winter ──────────────────────────────────────────────────────────────── */
html[data-season="winter"] .pd-hero__media::after {
  background:
    radial-gradient(circle at 50% 0%, rgba(56, 189, 248, 0.45), transparent 50%),
    linear-gradient(180deg, rgba(12, 25, 41, 0.15), rgba(12, 25, 41, 0.55));
  mix-blend-mode: screen;
  opacity: 0.55;
}

html[data-season="winter"] .pd-brand-accent {
  text-shadow: 0 0 18px rgba(56, 189, 248, 0.55);
}

/* ── Lente ───────────────────────────────────────────────────────────────── */
html[data-season="lente"] .pd-hero__media::after {
  background:
    radial-gradient(circle at 30% 20%, rgba(74, 222, 128, 0.45), transparent 45%),
    radial-gradient(circle at 80% 40%, rgba(249, 168, 212, 0.4), transparent 40%);
  mix-blend-mode: soft-light;
}

html[data-season="lente"] .pd-btn--flag {
  background: linear-gradient(135deg, #4ade80, #db2777);
  border-color: transparent;
  color: #052e16;
}

/* ── Zomer ───────────────────────────────────────────────────────────────── */
html[data-season="zomer"] .pd-hero__media::after {
  background:
    radial-gradient(circle at 70% 10%, rgba(250, 204, 21, 0.55), transparent 40%),
    radial-gradient(circle at 20% 60%, rgba(34, 211, 238, 0.35), transparent 45%);
  mix-blend-mode: soft-light;
  animation: pd-season-shimmer 10s ease-in-out infinite alternate;
}

html[data-season="zomer"] .pd-btn--flag {
  background: linear-gradient(135deg, #facc15, #22d3ee);
  border-color: transparent;
  color: #082f49;
}

/* ── Feest ───────────────────────────────────────────────────────────────── */
html[data-season="feest"] .pd-hero__media::after {
  background:
    radial-gradient(circle at 25% 25%, rgba(244, 114, 182, 0.5), transparent 40%),
    radial-gradient(circle at 75% 20%, rgba(167, 139, 250, 0.5), transparent 40%),
    radial-gradient(circle at 50% 80%, rgba(255, 209, 102, 0.25), transparent 45%);
  mix-blend-mode: color-dodge;
  opacity: 0.45;
}

html[data-season="feest"] .pd-btn--flag {
  background: linear-gradient(135deg, #f472b6, #a78bfa, #facc15);
  background-size: 200% 200%;
  animation: pd-season-shimmer 4s linear infinite, pd-season-pulse-ring 2.8s ease-out infinite;
  border-color: transparent;
  color: #1e1033;
}

html[data-season="feest"] .pd-brand-accent {
  background: linear-gradient(90deg, #f472b6, #a78bfa, #facc15, #f472b6);
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: pd-season-shimmer 3s linear infinite;
  filter: none;
}

/* Links / chips pick up brand */
html[data-season]:not([data-season="default"]) .pd-chip[aria-current="true"],
html[data-season]:not([data-season="default"]) .pd-nav-links a[aria-current="page"] {
  color: var(--pd-brand);
  background: var(--pd-brand-bg);
  border-color: var(--pd-brand-border);
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  html[data-season] .pd-brand-accent,
  html[data-season] .pd-btn--flag,
  html[data-season] .pd-btn--primary,
  html[data-season] .pd-nav-brand,
  html[data-season] .pd-hero__media::after,
  html[data-season] .pd-season-banner {
    animation: none !important;
  }
  .pd-season-fx { display: none !important; }
}