/* ============================================================
   Sæsontema. tema.js sætter data-tema på <html>. Hvert tema skifter
   farven på banneret (mørk tekst på lys flade) og på de blå
   videoflader (hvid tekst på mørk flade), og får lidt pynt.
   Pynten rører aldrig klik: pointer-events: none.
   ============================================================ */

[data-tema="halloween"] { --tema-lys: #FF8A1F; --tema-moerk: #4B2A85; }
[data-tema="jul"]       { --tema-lys: #FFD9D6; --tema-moerk: #0F6B3A; }
[data-tema="nytaar"]    { --tema-lys: #FFD86B; --tema-moerk: #1B1F5E; }
[data-tema="vinter"]    { --tema-lys: #DCEEFF; --tema-moerk: #1F4E8C; }
[data-tema="fastelavn"] { --tema-lys: #FFC9E6; --tema-moerk: #6A2C91; }
[data-tema="paaske"]    { --tema-lys: #FFE46B; --tema-moerk: #2F7D32; }
[data-tema="foraar"]    { --tema-lys: #C9F0B8; --tema-moerk: #B0306A; }
[data-tema="sommer"]    { --tema-lys: #FFE08A; --tema-moerk: #0B6E99; }
[data-tema="efteraar"]  { --tema-lys: #FFC48A; --tema-moerk: #8A3B12; }

[data-tema] .hero, [data-tema] .fanart-top { background: var(--tema-lys); }
[data-tema] .videoer, [data-tema] .shorts { background: var(--tema-moerk); }

.tema-flade { position: relative; overflow: hidden; }
.tema-flade > :not(.tema-pynt) { position: relative; z-index: 1; }

.tema-pynt {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}
/* emoji-rækken langs toppen af fladen, bag indholdet */
.tema-pynt span {
  position: absolute;
  top: 0.2rem;
  font-size: clamp(1.4rem, 3vw, 2.2rem);
  opacity: 0.85;
  animation: tema-vippe 3s ease-in-out infinite alternate;
}
@keyframes tema-vippe {
  from { rotate: -10deg; translate: 0 0; }
  to   { rotate: 10deg;  translate: 0 -6px; }
}
/* sne: små hvide prikker, der daler */
.tema-pynt i {
  position: absolute;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 0 1px rgba(31, 26, 51, 0.15);
  opacity: 0.8;
  animation: tema-sne 10s linear infinite;
}
@keyframes tema-sne {
  from { translate: 0 -60vh; }
  to   { translate: 20px 60vh; }
}

.tema-linje {
  display: inline-block;
  margin: 0 0 0.6rem;
  padding: 0.3rem 0.9rem;
  border: var(--streg);
  border-radius: 999px;
  background: var(--hvid);
  color: var(--blaek);
  font-family: var(--overskrift);
  font-size: 1.1rem;
}