/* BME Julejakten – julestemning oppå det vanlige designet.
   Fjernes ved å ta bort <link rel="stylesheet" href="/julejakten/jul.css"> fra sidene.
   - Snø som daler på de mørke og gule sidene (ikke over arbeidsflaten i admin/kontrollrom)
   - Lysslynge langs målebåndet (.tape)
   - Nisselue på BME-merket
   - Litt glitter på årstallet og store tall
   Alt står stille for dem som har valgt redusert bevegelse. */

:root {
  --jul-rod: #E5483B;
  --jul-gull: #F5BD45;
  --jul-gronn: #3AC45A;
  --jul-is: #DDF3FF;
}

/* ── Snø ───────────────────────────────────────────────────────────────── */
/* To lag med ulik størrelse og fart. Flyttes med transform (billig for telefonen).
   Ligger på <html>, fordi flere sider bruker body::before/::after til bakgrunnsbildet. */
html:has(> body.flate-svart)::before, html:has(> body.flate-svart)::after,
html:has(> body.flate-gul)::before, html:has(> body.flate-gul)::after {
  content: "";
  position: fixed;
  left: 0; right: 0;
  top: -320px; height: calc(100% + 320px);
  pointer-events: none;
  z-index: 3;
  will-change: transform;
}
html:has(> body.flate-svart)::before, html:has(> body.flate-gul)::before {
  background-image:
    radial-gradient(circle at 20px 30px, rgba(255,255,255,.95) 0 1.6px, transparent 2.4px),
    radial-gradient(circle at 110px 140px, rgba(255,255,255,.8) 0 1.3px, transparent 2px),
    radial-gradient(circle at 210px 60px, rgba(255,255,255,.9) 0 1.8px, transparent 2.6px),
    radial-gradient(circle at 260px 240px, rgba(255,255,255,.75) 0 1.2px, transparent 2px),
    radial-gradient(circle at 60px 210px, rgba(255,255,255,.85) 0 1.5px, transparent 2.3px),
    radial-gradient(circle at 160px 290px, rgba(255,255,255,.7) 0 1.1px, transparent 1.9px);
  background-size: 320px 320px;
  opacity: .55;
  animation: jul-snoe 22s linear infinite;
}
html:has(> body.flate-svart)::after, html:has(> body.flate-gul)::after {
  background-image:
    radial-gradient(circle at 70px 80px, rgba(255,255,255,.95) 0 2.6px, transparent 3.6px),
    radial-gradient(circle at 300px 200px, rgba(255,255,255,.9) 0 2.2px, transparent 3.2px),
    radial-gradient(circle at 190px 10px, rgba(255,255,255,.85) 0 3px, transparent 4px),
    radial-gradient(circle at 400px 120px, rgba(255,255,255,.8) 0 2px, transparent 3px);
  background-size: 480px 320px;
  opacity: .45;
  animation: jul-snoe-stor 14s linear infinite;
}
/* På den gule påmeldingssiden er snøen svakere, så teksten står like klart */
html:has(> body.flate-gul)::before { opacity: .45; }
html:has(> body.flate-gul)::after { opacity: .35; }

@keyframes jul-snoe {
  0%   { transform: translate3d(0, 0, 0); }
  50%  { transform: translate3d(14px, 160px, 0); }
  100% { transform: translate3d(0, 320px, 0); }
}
@keyframes jul-snoe-stor {
  0%   { transform: translate3d(0, 0, 0); }
  50%  { transform: translate3d(-18px, 160px, 0); }
  100% { transform: translate3d(0, 320px, 0); }
}

/* ── Lysslynge langs målebåndet ────────────────────────────────────────── */
.tape { position: relative; z-index: 5; }
.tape::before, .tape::after {
  content: "";
  position: absolute; left: 0; right: 0; top: 100%;
  height: 16px;
  pointer-events: none;
  background-repeat: repeat-x;
}
/* Ledningen og første sett pærer */
.tape::before {
  background-image:
    radial-gradient(ellipse 5px 7px at 12px 10px, var(--jul-rod) 0 4px, transparent 5.5px),
    radial-gradient(ellipse 5px 7px at 60px 10px, var(--jul-gull) 0 4px, transparent 5.5px),
    radial-gradient(ellipse 120% 10px at 50% -4px, transparent 0 7px, rgba(14,42,24,.85) 7.5px 8.6px, transparent 9px);
  background-size: 96px 16px, 96px 16px, 48px 16px;
  filter: drop-shadow(0 0 3px rgba(255, 210, 120, .55));
  animation: jul-blink 2.4s ease-in-out infinite;
}
/* Andre sett pærer, blinker i motfase */
.tape::after {
  background-image:
    radial-gradient(ellipse 5px 7px at 36px 10px, var(--jul-gronn) 0 4px, transparent 5.5px),
    radial-gradient(ellipse 5px 7px at 84px 10px, var(--jul-is) 0 4px, transparent 5.5px);
  background-size: 96px 16px, 96px 16px;
  filter: drop-shadow(0 0 3px rgba(200, 255, 220, .5));
  animation: jul-blink 2.4s ease-in-out 1.2s infinite;
}
@keyframes jul-blink { 0%, 100% { opacity: 1; } 50% { opacity: .45; } }
/* Plakaten og utskrift: ingen lys */
@media print { .tape::before, .tape::after, html::before, html::after { display: none !important; } }

/* ── Nisselue på BME-merket ────────────────────────────────────────────── */
.ordmerke { position: relative; }
.ordmerke::before {
  content: "";
  position: absolute;
  left: -.42em; top: -.46em;
  width: 1.15em; height: 1em;
  transform: rotate(-24deg);
  pointer-events: none;
  background: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 56'%3E%3Cpath d='M6 44 C10 22 24 6 42 8 C52 9 58 18 56 28 C50 22 44 22 40 26 C36 32 36 40 38 46 Z' fill='%23E5483B' stroke='%230E2A18' stroke-width='2.5' stroke-linejoin='round'/%3E%3Crect x='2' y='40' width='42' height='12' rx='6' fill='%23FFFFFF' stroke='%230E2A18' stroke-width='2.5'/%3E%3Ccircle cx='56' cy='30' r='6.5' fill='%23FFFFFF' stroke='%230E2A18' stroke-width='2.5'/%3E%3C/svg%3E");
}
/* Merket i innloggingsboksen ligger på grønn bakgrunn med marg – flytt luen tilsvarende */
.pin-lag .ordmerke::before { left: -.2em; top: -.62em; }

/* ── Glitter ───────────────────────────────────────────────────────────── */
/* Årstallet på forsiden og store gule tall får en rolig glans */
.tittel-xl .aar, .flate-svart .nedtelling, .bunn .tall {
  text-shadow: 0 0 18px rgba(245, 189, 69, .35);
}
/* Små stjerner ved den store overskriften på forsiden og i venterommet */
.tittel-xl, .vent h1 { position: relative; }
.tittel-xl::after, .vent h1::after {
  content: "✦";
  position: absolute;
  top: -.15em; right: -.35em;
  font-size: .32em;
  color: var(--jul-gull);
  text-shadow: 0 0 12px rgba(245, 189, 69, .8);
  animation: jul-blink 3.2s ease-in-out infinite;
}

/* ── Admin og kontrollrom: rolig julepreg, ingen snø over arbeidsflaten ─── */
.admin-topp {
  background-image:
    radial-gradient(circle at 18px 12px, rgba(255,255,255,.35) 0 1.4px, transparent 2px),
    radial-gradient(circle at 70px 34px, rgba(255,255,255,.28) 0 1.1px, transparent 1.8px),
    radial-gradient(circle at 130px 18px, rgba(255,255,255,.3) 0 1.6px, transparent 2.2px);
  background-size: 160px 44px;
}

/* ── Redusert bevegelse: alt står stille ───────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  html::before, html::after, .tape::before, .tape::after, .tittel-xl::after, .vent h1::after { animation: none !important; }
}