/* Ljusfesten: blå botten, ordet över hela bredden, snö, och en bonad överst och nederst. Färger och typsnitt ur profil/. */
@font-face {
  font-family: "Libre Baskerville";
  src: url("typsnitt/LibreBaskerville-Regular-latin.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Work Sans";
  src: url("typsnitt/WorkSans-latin-variabel.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}
:root {
  color-scheme: dark;
  --natt: #2F4260;
  --kalkvit: #F5F4F1;
  --rimfrost: #D8D5D0;
  --kant: max(clamp(20px, 5vw, 72px), env(safe-area-inset-left, 0px), env(safe-area-inset-right, 0px));
  --smal: max(16px, 1.8vw, env(safe-area-inset-left, 0px), env(safe-area-inset-right, 0px)); /* ordets marginal */
  --u: 4px;                     /* en ruta i bonaden, som är lika stor överst och nederst */
  --a: clamp(34px, 4.2vw, 72px); /* aktörsloggornas storlek */
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { background: var(--natt); -webkit-text-size-adjust: 100%; }
body { background: var(--natt); color: var(--kalkvit); font-family: "Work Sans", Arial, sans-serif; }
main { position: relative; min-height: 100svh; display: flex; flex-direction: column; overflow: hidden; }
.sno { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.sno-bak { z-index: 0; }
.sno-fram { z-index: 2; }

.mitt { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: clamp(10px, 2svh, 24px); padding-block: calc(var(--u) * 5.6 + clamp(8px, 2svh, 28px)) clamp(12px, 2.4svh, 28px); }
.ordet { position: relative; z-index: 1; padding-inline: var(--smal); font-size: inherit; font-weight: 400; }
.ordet svg { display: block; width: min(100%, calc(40svh * 7.006)); height: auto; margin-inline: auto; fill: var(--rimfrost); }
.ordet .ord-tva { display: none; width: 100%; }

.rad { position: relative; z-index: 3; padding-inline: var(--kant); text-align: center; }
.datum { font-family: "Libre Baskerville", Georgia, serif; font-size: clamp(32px, min(4.6vw, 8.4svh), 72px); line-height: 1.12; letter-spacing: -.015em; }
.datum time { display: flex; flex-wrap: wrap; justify-content: center; column-gap: .62em; }
.plats { font-size: clamp(19px, min(2.05vw, 3.6svh), 30px); line-height: 1.4; margin-top: .5em; }
.paus { position: absolute; z-index: 3; right: var(--kant); bottom: 0; width: 44px; height: 44px; border-radius: 50%; border: 1.5px solid rgba(245, 244, 241, .55); background: none; color: var(--kalkvit); cursor: pointer; display: grid; place-items: center; }
.paus:hover { border-color: var(--kalkvit); }
.paus:focus-visible, .presenteras a:focus-visible { outline: 2px solid var(--kalkvit); outline-offset: 3px; }
.paus svg { width: 16px; height: 16px; fill: currentColor; }
.i-spela, .stilla .i-paus { display: none; }
.stilla .i-spela { display: inline; }

/* Loggorna: en centrerad rad. Varje etikett står rakt ovanför första loggan i sin grupp. */
.avsandare { position: relative; z-index: 3; display: flex; justify-content: center; align-items: flex-start; gap: clamp(24px, 4.4vw, 72px); padding: 0 var(--kant) calc(var(--u) * 5.6 + clamp(8px, 1.6svh, 18px)); }
.avsandare p { font-weight: 600; font-size: 11px; line-height: 1.2; letter-spacing: .16em; text-transform: uppercase; color: rgba(245, 244, 241, .82); margin-bottom: 10px; }
.presenteras, .tillsammans { flex: none; }
.presenteras a, .tillsammans ul { display: flex; align-items: center; height: calc(var(--a) * .72); }
.presenteras img { display: block; width: clamp(170px, 14.5vw, 230px); height: auto; }
.tillsammans ul { list-style: none; gap: clamp(14px, 2.2vw, 34px); }
.tillsammans img { display: block; }
/* Elden ligger i en duk ovanpå loggan och syns bara inne i den. Rutan är lika bred som loggan, annars dras elden ut åt sidan. */
.tand { position: relative; display: block; width: fit-content; }
.tand canvas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }

.bonad, .lista { position: relative; z-index: 4; flex: none; background: var(--kalkvit); }
.bonad { height: calc(var(--u) * 24 + env(safe-area-inset-bottom)); }
.lista { height: calc(var(--u) * 24 + env(safe-area-inset-top)); }
.bonad svg, .lista svg { display: block; position: absolute; left: 50%; top: 0; width: calc(var(--u) * 960); height: calc(var(--u) * 24); transform: translateX(-50%); overflow: visible; }
/* Listen ligger över snön, så flingorna kommer fram under den. */
.lista svg { top: env(safe-area-inset-top); }
/* Gnistorna: släckta nästan hela tiden, och tänds en kort stund i sin egen takt. */
.gnista { transform-box: fill-box; transform-origin: center; opacity: 0; animation: gnista var(--t) ease-in-out infinite; animation-delay: calc(var(--d) * -1); }
@keyframes gnista { 0%, 94%, 100% { opacity: 0; transform: scale(.1) rotate(-8deg); } 95.5% { opacity: 1; transform: scale(1) rotate(0deg); } 97% { opacity: .7; transform: scale(.55) rotate(4deg); } 98.5% { opacity: 1; transform: scale(.85) rotate(8deg); } }
.stilla .gnista { animation-play-state: paused; }
@media (min-width: 1800px) and (min-height: 900px) {
  :root { --u: 5px; }
  .avsandare p { font-size: 12px; }
}
/* Smalare: datumet tar hela raden, så knappen flyttar upp i hörnet. */
@media (max-width: 899px) {
  :root { --u: 3px; }
  .rad { position: static; }
  .tider { position: relative; z-index: 3; }
  .paus { top: calc(var(--u) * 30 + 8px + env(safe-area-inset-top, 0px)); bottom: auto; right: var(--smal); }
}
/* Telefon: loggorna får inte plats på en rad, så grupperna läggs under varandra, centrerade. */
@media (max-width: 759px) {
  :root { --a: min(10.6vw, 44px); }
  .datum { font-size: clamp(24px, 7vw, 46px); }
  .plats { font-size: clamp(16px, 4.9vw, 24px); }
  .avsandare { flex-direction: column; align-items: center; gap: 20px; }
  .presenteras a { height: auto; }
  .tillsammans ul { display: grid; grid-template-columns: repeat(3, auto); gap: 14px 20px; height: auto; justify-content: start; }
}
/* Telefon på höjden: ordet står på två rader, LJUS och FESTEN, så att bokstäverna kan bli mycket större. */
@media (max-width: 759px) and (orientation: portrait) {
  .ordet .ord-en { display: none; }
  .ordet .ord-tva { display: block; }
}
/* Små telefoner: allt lite tätare, så att bandet syns utan att man behöver scrolla. */
@media (max-width: 759px) and (max-height: 640px) {
  :root { --u: 2px; --a: min(9vw, 34px); }
  .mitt { padding-block: calc(var(--u) * 5.6 + 6px) 8px; }
  .avsandare { gap: 10px; padding-bottom: calc(var(--u) * 5.6 + 6px); }
  .avsandare p { margin-bottom: 5px; }
  .tillsammans ul { gap: 8px 18px; }
}
/* Telefon på tvären: loggorna på en rad, och knappen tillbaka bredvid datumet. */
@media (max-height: 520px) and (min-width: 561px) {
  :root { --u: 1.5px; --a: 28px; }
  .datum { font-size: clamp(24px, 7.4svh, 36px); }
  .plats { font-size: 18px; margin-top: .25em; }
  .rad { position: relative; }
  .paus { top: auto; bottom: 0; right: var(--kant); }
  .avsandare { flex-direction: row; align-items: flex-start; gap: 24px; padding-bottom: calc(var(--u) * 5.6 + 4px); }
  .avsandare p { margin-bottom: 5px; }
  .presenteras a, .tillsammans ul { display: flex; height: calc(var(--a) * .72); }
  .tillsammans ul { gap: 12px; }
  .mitt { gap: 6px; padding-block: calc(var(--u) * 5.6 + 4px) 6px; }
}
/* Den som valt bort rörelse får allt stilla. */
@media (prefers-reduced-motion: reduce) {
  .gnista { animation: none; }
  .paus { display: none; }
}