/* Portal seasonal theme overrides */
:root[data-seasonal="spring"] {
  --portal-primary: #dc2626;
  --portal-secondary: #f59e0b;
  --portal-hero-from: #991b1b;
  --portal-hero-to: #ea580c;
}

:root[data-seasonal="national"] {
  --portal-primary: #dc2626;
  --portal-secondary: #fbbf24;
  --portal-hero-from: #7f1d1d;
  --portal-hero-to: #b45309;
}

:root[data-seasonal="midautumn"] {
  --portal-primary: #d97706;
  --portal-secondary: #fcd34d;
  --portal-hero-from: #92400e;
  --portal-hero-to: #78350f;
}

:root[data-seasonal="winter"] {
  --portal-primary: #2563eb;
  --portal-secondary: #38bdf8;
  --portal-hero-from: #1e3a8a;
  --portal-hero-to: #0ea5e9;
}

html[data-seasonal] .text-primary,
html[data-seasonal] .bg-primary {
  color: var(--portal-primary, #2563eb);
}

html[data-seasonal] .bg-primary {
  background-color: var(--portal-primary, #2563eb) !important;
}

html[data-seasonal] .border-primary {
  border-color: var(--portal-primary, #2563eb) !important;
}

html[data-seasonal] .from-primary {
  --tw-gradient-from: var(--portal-hero-from, #2563eb) var(--tw-gradient-from-position);
}

html[data-seasonal="winter"]::before {
  content: '';
  pointer-events: none;
  position: fixed;
  inset: 0;
  z-index: 9998;
  background-image: radial-gradient(2px 2px at 20px 30px, rgba(255,255,255,0.35), transparent),
    radial-gradient(2px 2px at 40px 70px, rgba(255,255,255,0.25), transparent),
    radial-gradient(1px 1px at 90px 40px, rgba(255,255,255,0.3), transparent);
  background-size: 200px 200px;
  animation: portal-snow 20s linear infinite;
  opacity: 0.4;
}

html[data-seasonal="spring"] #hero::after,
html[data-seasonal="national"] #hero::after {
  content: '🏮';
  position: absolute;
  top: 1.5rem;
  right: 1.5rem;
  font-size: 2rem;
  opacity: 0.6;
  pointer-events: none;
}

@keyframes portal-snow {
  from { background-position: 0 0, 0 0, 0 0; }
  to { background-position: 0 600px, 0 400px, 0 300px; }
}

@media (prefers-reduced-motion: reduce) {
  html[data-seasonal="winter"]::before {
    animation: none;
  }
}