/* ============================================================
   JULESTRIBEN

   Ligger i foden lige under de fire loefter, saa den er en del af dem og
   ikke et banner, der er klistret paa. Findes ét sted og bruges af alle
   sider - ogsaa forsiden, som ellers har sin egen kopi af alt i foden.

   build.sh fjerner markup'en helt uden for september-januar, og
   assets/jul.js skjuler den, naar fristen er passeret, og paa selve
   julesiden - et baand, der peger paa den side, man staar paa, er stoej.
   ============================================================ */

.julstribe {
  display: flex; align-items: center; gap: 14px;
  /* Ligger inde i .wrap, som allerede holder sidemargenen - saa fuld
     bredde her betyder "praecis saa bred som de fire trin ovenover". */
  width: 100%;
  margin: clamp(18px, 2vw, 26px) 0 0; padding: 14px 18px;
  background: var(--ash, #F4F4F3);
  border: 1px solid var(--line, #E4E4E1);
  border-radius: var(--radius, 6px);
  color: var(--ink, #0B0B0C);
  font-size: 15px; line-height: 1.4;
  transition: border-color .2s var(--ease), background .2s var(--ease);
}
.julstribe:hover { border-color: var(--ink, #0B0B0C); background: var(--bg-card, #fff); }

/* Maerket med huen. Huen sidder som et lag ovenpaa, saa den kan haenge ud
   over hjoernet uden at skubbe teksten. */
.js-mark {
  position: relative; flex: none;
  font-family: var(--f-mono); font-size: 10.5px; letter-spacing: .09em;
  text-transform: uppercase; color: #fff;
  background: var(--accent, #E64124);
  padding: 5px 9px; border-radius: 4px;
}
/* Huen skal laeses paa et roedt maerke. Derfor er den loeftet op, saa
   stoerstedelen haenger over kanten paa den lyse bund, og keglen er en
   moerkere roed end maerket - ellers forsvinder den bare i fladen. */
.js-hue {
  position: absolute; left: 1px; top: -20px;
  width: 40px; height: 24px; pointer-events: none;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,.22));
}

.js-txt { flex: 1; min-width: 0; }
.js-txt b { font-weight: 600; }

/* Nedtaellingen tikker, saa tallene skal staa stille. Tabular-nums giver
   alle cifre samme bredde - ellers hopper linjen for hvert sekund. */
.js-ur {
  flex: none; display: flex; align-items: baseline; gap: 7px;
  font-family: var(--f-mono); font-size: 12px; letter-spacing: .04em;
  color: var(--mid, #6A6A6E); white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.js-ur b { font-weight: 500; color: var(--ink, #0B0B0C); }
.js-ur i { font-style: normal; color: var(--mute, #A8A8AC); margin-left: 1px; }

@media (max-width: 860px) {
  .julstribe { flex-wrap: wrap; gap: 10px 12px; font-size: 14px; }
  .js-txt { flex: 1 1 100%; order: 3; }
  .julstribe .ar { order: 2; margin-left: auto; }
}
@media (prefers-reduced-motion: reduce) {
  .julstribe { transition: none; }
}

/* ---------- sneen ----------
   Vises kun, mens man peger paa striben. Laget ligger fast over hele
   skaermen og tager ikke imod klik, saa man kan bruge siden imens.
   Billedet ligger hos os selv: vores CSP tillader kun billeder fra eget
   domaene, saa det oprindelige CDN-link ville blive blokeret uden en lyd. */
/* ============================================================
   SNEEN

   Fnuggene laves af jul.js, men bevaegelsen ligger HER. To lag:
   den ydre faelder, den indre svajer og drejer. Delt op, fordi de to
   skal have hver sin takt - et fnug, der svajer i samme rytme som det
   falder, ser mekanisk ud.

   Hvert fnug faar sine egne tal med som --variabler, saa der ikke er
   to ens. Ingen JavaScript rammer dem, efter de er lagt ud - browseren
   klarer resten, og det er derfor de kan vaere mange uden at hakke.
   ============================================================ */
.sne {
  position: fixed; inset: 0; z-index: 100;
  pointer-events: none; overflow: hidden;
}

/* Ydre lag: faldet. Starter over kanten og ender under. */
.sne i {
  position: absolute;
  top: calc(var(--start, 0) * 1%);
  left: calc(var(--x, 50) * 1%);
  width: calc(var(--str, 1) * 15px);
  aspect-ratio: 1;
  animation: sne-fald calc(var(--fart, 10) * 1s) linear var(--vent, 0s) infinite;
}
@keyframes sne-fald {
  from { transform: translateY(-20vh); }
  to   { transform: translateY(120vh); }
}

/* Indre lag: svajet og drejningen. Fnugget selv er en maske, saa
   farven kan saettes bagfra - paa en hvid side forsvinder en naesten
   hvid silhuet, og saa skal den kunne gores kraftigere. */
.sne b {
  display: block; width: 100%; height: 100%;
  background: #6FB9E0;
  -webkit-mask: url('./fnug.svg') center / contain no-repeat;
          mask: url('./fnug.svg') center / contain no-repeat;
  opacity: var(--klar, .8);
  filter: drop-shadow(0 1px 2px rgba(28, 86, 124, .22));
  animation:
    sne-svaj calc(var(--svaj, 3) * 1s) ease-in-out infinite alternate,
    sne-drej calc(var(--drej, 6) * 1s) ease-in-out infinite alternate;
}
@keyframes sne-svaj {
  from { translate: calc(var(--vidde, 20) * -1px) 0; }
  to   { translate: calc(var(--vidde, 20) * 1px) 0; }
}
@keyframes sne-drej {
  from { rotate: -22deg; }
  to   { rotate: 22deg; }
}

/* Hvert fjerde fnug i husets roede. Ikke flere: farven er kraftig, og
   bliver den almindelig, holder den op med at vaere et glimt. Skyggen
   skifter med, ellers ligger der en blaa kant om en roed figur. */
.sne i.roed b {
  background: var(--accent, #E64124);
  filter: drop-shadow(0 1px 2px rgba(124, 40, 28, .26));
}

/* Har nogen slaaet bevaegelse fra, falder der ingen sne. Den baerer
   ingen betydning - den er stemning. */
@media (prefers-reduced-motion: reduce) {
  .sne { display: none; }
}