/* ── årstidene samlet (arstider/samle.py, 21.10.2026). Startbildet har data-arstider når lagene er med (ARSTIDER i bygg.py). Med skript står kystlinjen usynlig til arstider.js har lest tilstanden (data-klar), og tones så inn, så den aldri vises i feil årstid og så skifter; står noe fast, setter skriptet data-klar etter 2,5 s, og uten skript er det sommer og sol som i dag. Årstidens bunn («Fjell og trær») ligger i .arstid-bunn, rett etter sommerbildet, som en tom flate med klassen scene-bunn, så glidningen går fra siden ble åpnet og står likt med sommerbildet; skriptet legger bildet inn fra malen. Når det er lastet (vist), legges sommerbildet bak (bak), først når overgangen er ferdig, så det aldri blir et tomt bånd. Med redusert bevegelse skjer alt med en gang (regelen øverst i stil.css) ── */
.js .himmel--kyst[data-arstider] .scene { opacity: 0; transition: opacity .9s ease; }
.js .himmel--kyst[data-arstider][data-klar] .scene { opacity: 1; }
.himmel.himmel--kyst .scene .arstid-bunn { opacity: 0; transition: opacity 1.2s ease; pointer-events: none; }
/* bildet fra malen ligger i et <picture> inne i flaten; med display: contents står img rett i flaten, som i sommerbildet, og bredden regnes ut av høyden (uten det ble flaten 0 bred i Chromium, også med display: block og height: 100% på <picture>, og glidningen la den utenfor skjermen) */
.himmel.himmel--kyst .scene .arstid-bunn > picture { display: contents; }
.himmel.himmel--kyst .scene .arstid-bunn.vist { opacity: 1; }
.himmel.himmel--kyst .scene > picture.scene-bunn.bak img { visibility: hidden; transition: visibility 0s linear 1.2s; }
.bunn .vaer-kilde { margin: 6px 0 0; }
.bunn .vaer-kilde a { color: inherit; }

/* ── årstidene: laget «Himmel» (LAG i arstider/lag_ark.py, 21.10.2026). Tegnet av arstider/lag_himmel.py. Laget ligger først i startbildet, bak skybildet og kystlinjen og rett over sidens himmelfarge: en flate som toner himmelen, og skyer i den flate stilen. Skybildet om dagen blandes inn med multiply og tones derfor av flaten; skyene står bare der bildet er hvitt eller utenfor det, så det ikke blir kanter inne i bildet (sjekk_hinder i lag_himmel.py). Plassene regnes fra skybildets bredde (--sky-b) og topp (--lh-t), så de følger det på alle skjermer. Uten skript, uten tilstand.json og ved sommer og sol (og vår og sol) vises laget ikke, så startbildet er som i dag. Skyene glir sakte fram og tilbake; med redusert bevegelse står de stille (regelen øverst) ── */
.himmel--kyst .lag-himmel {
  display: none; position: absolute; inset: 0; overflow: hidden; pointer-events: none;
  background: var(--lh-bg); --lh-t: var(--sky-topp); --lh-s: var(--kyst-topp); --lh-h: calc(max(100svh, 520px) - var(--lh-s)); --lh-fri: calc(var(--sky-b) * 0.41);
  --lh-sky: #fff; --lh-dekke: #fff; --lh-rull: #fff; --lh-lys: .5; --lh-sk: #000; --lh-sko: .08;
}
.himmel--kyst .lh-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.himmel--kyst .lag-himmel .lh {
  position: absolute; overflow: visible; max-width: none; translate: 0 calc(var(--rull, 0) * .45px);
  left: calc(50% + var(--x) * var(--sky-b) - (var(--w) * var(--sky-b) + var(--wt) * var(--lh-t)) / 2); top: max(calc(var(--a) * var(--lh-t) + var(--c) * var(--lh-s) + var(--k) * var(--lh-h) + var(--y) * var(--sky-b)), calc(var(--m) * (var(--lh-t) + var(--lh-fri))));
  width: calc(var(--w) * var(--sky-b) + var(--wt) * var(--lh-t)); height: auto; aspect-ratio: var(--ar);
  animation: lh-gli var(--tid) ease-in-out var(--fs) infinite alternate;
}
.himmel--kyst .lag-himmel .lh-spredt { --lh-f: var(--lh-sky); display: var(--vis, var(--lh-v-spredt)); }
.himmel--kyst .lag-himmel .lh-ruller { --lh-f: var(--lh-rull); display: var(--vis, var(--lh-v-ruller)); }
/* Båndet øverst: bredere enn skjermen, så glidningen aldri viser en kant, og buene følger høyden (slice) */
.himmel--kyst .lag-himmel .lh.lh-dekke, .himmel--dybde .lag-himmel .lh.lh-dekke {
  --lh-f: var(--lh-dekke); display: var(--lh-v-dekke);
  left: -4%; top: 0; width: 108%; height: calc(var(--lh-t) * .9); translate: none; aspect-ratio: auto;
  /* sjefen 21.10.2026: «myk det opp, så det glir over i himmelen og ikke ser ut som en gardinkappe». Buene henger fra en linje som bølger (BOELGE i lag_himmel.py), og de tones ut nedover, så kanten blir et skydekke som går over i himmelen, ikke en rad med buer */
  -webkit-mask-image: linear-gradient(#000 0 12%, rgba(0, 0, 0, .62) 40%, rgba(0, 0, 0, .25) 66%, rgba(0, 0, 0, .06) 86%, transparent);
  mask-image: linear-gradient(#000 0 12%, rgba(0, 0, 0, .62) 40%, rgba(0, 0, 0, .25) 66%, rgba(0, 0, 0, .06) 86%, transparent);
}
/* Når man ruller, følger skyene skybildet, så de aldri glir inn bak de fargede delene av det og gir kanter der: 0,45 av --rull som .himmel picture, og med himmel--dybde 0,14 av --rull, eller rullestyrt med dybde-navn der nettleseren kan det, som picture.sky-stor og .natt-sky. Båndet øverst står, fordi skybildet bare glir bort fra det. translate er derfor rullingen, transform glidningen, og midten står i left */
.himmel--dybde .lag-himmel .lh { translate: 0 calc(var(--rull, 0) * .14px) 0; }
@supports (animation-timeline: scroll()) {
  .himmel--dybde .lag-himmel .lh:not(.lh-dekke) {
    animation: lh-gli var(--tid) ease-in-out var(--fs) infinite alternate, dybde-navn linear both;
    animation-timeline: auto, scroll(root block); animation-range: normal, 0 100vh;
  }
}
@keyframes lh-gli { from { transform: translateX(calc(var(--sky-b) * -.022)); } to { transform: translateX(calc(var(--sky-b) * .022)); } }
/* Stående skjerm: de andre plassene (--xs og så videre); en sky uten plass der har --viss: none, og båndet øverst veier mer og står som før */
@media (orientation: portrait) {
  .himmel--kyst .lag-himmel .lh {
    left: calc(50% + var(--xs) * var(--sky-b) - (var(--ws) * var(--sky-b) + var(--wts) * var(--lh-t)) / 2); top: max(calc(var(--as) * var(--lh-t) + var(--cs) * var(--lh-s) + var(--ks) * var(--lh-h) + var(--ys) * var(--sky-b)), calc(var(--ms) * (var(--lh-t) + var(--lh-fri))));
    width: calc(var(--ws) * var(--sky-b) + var(--wts) * var(--lh-t));
  }
  .himmel--kyst .lag-himmel .lh-spredt { display: var(--viss, var(--lh-v-spredt)); }
  .himmel--kyst .lag-himmel .lh-ruller { display: var(--viss, var(--lh-v-ruller)); }
}
/* Telefon med «vid»: skybildet og kystlinjen står lenger ned (--ekstra), og laget følger */
@media (max-aspect-ratio: 5/8) {
  .himmel--kyst.himmel--vid .lag-himmel { --lh-t: calc(var(--sky-topp) + var(--ekstra) * .25); --lh-s: calc(var(--kyst-topp) + var(--ekstra) * .5); --lh-h: var(--vid-h); }
}
.himmel--kyst[data-vaer="skyet"] .lag-himmel { display: block; --lh-bg:#DAE3EA; --lh-sky:#F7F9FB; --lh-lys:0.6; --lh-v-spredt:block; --lh-v-dekke:none; --lh-v-ruller:none; }
.himmel--kyst[data-vaer="regn"] .lag-himmel { display: block; --lh-bg:#BAC4CC; --lh-dekke:#A5B0B9; --lh-rull:#AEB8C0; --lh-lys:0.18; --lh-sk:#1E3346; --lh-sko:0.05; --lh-v-spredt:none; --lh-v-dekke:block; --lh-v-ruller:block; }
.himmel--kyst[data-aarstid="hoest"][data-vaer="sol"] .lag-himmel { display: block; --lh-bg:#D0E1EF; --lh-v-spredt:none; --lh-v-dekke:none; --lh-v-ruller:none; }
.himmel--kyst[data-aarstid="hoest"][data-vaer="skyet"] .lag-himmel { display: block; --lh-bg:#C8D0D7; --lh-sky:#DEE3E7; --lh-lys:0.45; --lh-v-spredt:block; --lh-v-dekke:none; --lh-v-ruller:none; }
.himmel--kyst[data-aarstid="hoest"][data-vaer="regn"] .lag-himmel { display: block; --lh-bg:#A6B0B9; --lh-dekke:#8F9AA4; --lh-rull:#99A4AD; --lh-lys:0.14; --lh-sk:#18293A; --lh-sko:0.06; --lh-v-spredt:none; --lh-v-dekke:block; --lh-v-ruller:block; }
.himmel--kyst[data-aarstid="hoest"][data-vaer="snoe"] .lag-himmel { display: block; --lh-bg:#DDE2E6; --lh-dekke:#E9ECEF; --lh-rull:#E6E9EC; --lh-lys:0.5; --lh-sk:#3A4A58; --lh-sko:0.04; --lh-v-spredt:none; --lh-v-dekke:block; --lh-v-ruller:block; }
.himmel--kyst[data-aarstid="vinter"][data-vaer="sol"] .lag-himmel { display: block; --lh-bg:radial-gradient(ellipse 34% 22% at 16% calc(var(--lh-s) + 4%), rgba(255, 233, 214, .85), rgba(255, 233, 214, 0)), linear-gradient(#CFDDE8, #DCE5EC calc(var(--lh-s) * .5), #EAE6EB calc(var(--lh-s) * .9), #F2E3E3 calc(var(--lh-s) + 2%), #F4E6E2); --lh-v-spredt:none; --lh-v-dekke:none; --lh-v-ruller:none; }
.himmel--kyst[data-aarstid="vinter"][data-vaer="skyet"] .lag-himmel { display: block; --lh-bg:#DFE4E8; --lh-sky:#ECEFF2; --lh-lys:0.55; --lh-v-spredt:block; --lh-v-dekke:none; --lh-v-ruller:none; }
.himmel--kyst[data-aarstid="vinter"][data-vaer="regn"] .lag-himmel { display: block; --lh-bg:#A9B1B9; --lh-dekke:#939DA6; --lh-rull:#9DA6AE; --lh-lys:0.14; --lh-sk:#1B2A38; --lh-sko:0.06; --lh-v-spredt:none; --lh-v-dekke:block; --lh-v-ruller:block; }
.himmel--kyst[data-aarstid="vinter"][data-vaer="snoe"] .lag-himmel { display: block; --lh-bg:#CCD3D9; --lh-dekke:#DDE2E6; --lh-rull:#E2E6EA; --lh-lys:0.5; --lh-sk:#3A4A58; --lh-sko:0.04; --lh-v-spredt:none; --lh-v-dekke:block; --lh-v-ruller:block; }
.himmel--kyst[data-vaer="snoe"] .lag-himmel { display: block; --lh-bg:#BAC4CC; --lh-dekke:#A5B0B9; --lh-rull:#AEB8C0; --lh-lys:0.18; --lh-sk:#1E3346; --lh-sko:0.05; --lh-v-spredt:none; --lh-v-dekke:block; --lh-v-ruller:block; }
/* Natten (mørk modus): sol er som i dag, og ellers dekker skylaget stjernene */
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="lys"]) .himmel--kyst[data-vaer="skyet"] .lag-himmel { display: block; --lh-bg:rgba(22, 32, 48, .84); --lh-sky:#2C3A50; --lh-lys:0.1; --lh-v-spredt:block; --lh-v-dekke:none; --lh-v-ruller:none; }
  :root:not([data-tema="lys"]) .himmel--kyst[data-vaer="regn"] .lag-himmel { display: block; --lh-bg:#1A2331; --lh-dekke:#232E3E; --lh-rull:#283445; --lh-lys:0.06; --lh-sk:#000; --lh-sko:0.11; --lh-v-spredt:none; --lh-v-dekke:block; --lh-v-ruller:block; }
  :root:not([data-tema="lys"]) .himmel--kyst[data-vaer="snoe"] .lag-himmel { display: block; --lh-bg:#2B3341; --lh-dekke:#384252; --lh-rull:#3D4757; --lh-lys:0.1; --lh-sk:#000; --lh-sko:0.08; --lh-v-spredt:none; --lh-v-dekke:block; --lh-v-ruller:block; }
  :root:not([data-tema="lys"]) .himmel--kyst[data-vaer="sol"] .lag-himmel { display: none; }
}
:root[data-tema="mork"] .himmel--kyst[data-vaer="skyet"] .lag-himmel { display: block; --lh-bg:rgba(22, 32, 48, .84); --lh-sky:#2C3A50; --lh-lys:0.1; --lh-v-spredt:block; --lh-v-dekke:none; --lh-v-ruller:none; }
:root[data-tema="mork"] .himmel--kyst[data-vaer="regn"] .lag-himmel { display: block; --lh-bg:#1A2331; --lh-dekke:#232E3E; --lh-rull:#283445; --lh-lys:0.06; --lh-sk:#000; --lh-sko:0.11; --lh-v-spredt:none; --lh-v-dekke:block; --lh-v-ruller:block; }
:root[data-tema="mork"] .himmel--kyst[data-vaer="snoe"] .lag-himmel { display: block; --lh-bg:#2B3341; --lh-dekke:#384252; --lh-rull:#3D4757; --lh-lys:0.1; --lh-sk:#000; --lh-sko:0.08; --lh-v-spredt:none; --lh-v-dekke:block; --lh-v-ruller:block; }
:root[data-tema="mork"] .himmel--kyst[data-vaer="sol"] .lag-himmel { display: none; }

/* ── årstidene: laget «Hus og tak» (eier 21.10.2026, LAG i arstider/lag_ark.py): om vinteren snø på takene og langs kaia, litt grå når det regner; i regn om sommeren, våren og høsten er takene litt mørkere; om natta tente vinduer som før og snø på takene om vinteren. Laget er egne bilder i samme utsnitt og målestokk som kystlinjen (arstider/lag_hus_og_tak.py), gjennomsiktige der laget ikke endrer noe, og de legges OPPÅ bunnbildet: vinter i scene--dag og scene--natt, regn bare i scene--dag. Hver variant er et tomt element med klassen scene-bunn, så det får samme plass, høyde og glidning som sommerbildet, og bredden er høyden ganger utsnittets forhold, aldri smalere enn skjermen (som img i scene-bunn). Bildet er bakgrunn i ::before og settes bare når tilstanden er dens: ⚠️ et img med loading="lazy" og display: none ble hentet likevel (Chromium, 21.10.2026), et bakgrunnsbilde hentes bare når regelen gjelder og scenen vises. Utsnittet følger de samme spørringene som sommerbildet (KYST_NETTBRETT_MEDIA og KYST_MOBIL_MEDIA i bygg.py), bredden velges etter høyden på vinduet som sizes i bygg.py, og tettheten med image-set. Bildet tones inn; med redusert bevegelse (regelen øverst) kommer det med en gang. Uten skript, uten tilstand.json og før siden har lest den, er det sommer og sol, og ingenting hentes. Laget står etter bunnbildene og foran laget «Lys» i scenen ── */
.himmel.himmel--kyst .scene .hus-og-tak { aspect-ratio: 14125 / 1620; min-width: 100vw; pointer-events: none; }
.himmel.himmel--kyst .scene .hus-og-tak::before { content: ""; position: absolute; inset: 0; background: no-repeat 50% 100% / cover; }
@media (orientation: portrait), (max-width: 1199px) and (max-aspect-ratio: 16/10), (max-width: 1366px) and (max-aspect-ratio: 27/20) { .himmel.himmel--kyst .scene .hus-og-tak { aspect-ratio: 4800 / 1620; } }
@media (max-aspect-ratio: 5/8) {
  .himmel.himmel--kyst .scene .hus-og-tak { aspect-ratio: 1582 / 1620; }
  .himmel.himmel--kyst.himmel--vid .scene .hus-og-tak { aspect-ratio: 3560 / 1620; }
  .himmel.himmel--kyst.himmel--vid .scene .hus-og-tak::before { -webkit-mask-image: linear-gradient(to top, transparent, #000 10%); mask-image: linear-gradient(to top, transparent, #000 10%); }
}
@keyframes hus-og-tak-inn { from { opacity: 0; } }
/* vinter, dag */
.himmel.himmel--kyst[data-aarstid="vinter"] .scene--dag .hus-og-tak--vinter::before { animation: hus-og-tak-inn .8s ease both; }
.himmel.himmel--kyst[data-aarstid="vinter"] .scene--dag .hus-og-tak--vinter::before { background-image: -webkit-image-set(url("bilder/kyst-hus-og-tak-vinter-dag-4796.webp") 1x, url("bilder/kyst-hus-og-tak-vinter-dag-5885.webp") 2x); background-image: image-set(url("bilder/kyst-hus-og-tak-vinter-dag-4796.webp") 1x, url("bilder/kyst-hus-og-tak-vinter-dag-5885.webp") 2x); }
@media (min-height: 566px) { .himmel.himmel--kyst[data-aarstid="vinter"] .scene--dag .hus-og-tak--vinter::before { background-image: -webkit-image-set(url("bilder/kyst-hus-og-tak-vinter-dag-4796.webp") 1x, url("bilder/kyst-hus-og-tak-vinter-dag-7062.webp") 2x); background-image: image-set(url("bilder/kyst-hus-og-tak-vinter-dag-4796.webp") 1x, url("bilder/kyst-hus-og-tak-vinter-dag-7062.webp") 2x); } }
@media (min-height: 674px) { .himmel.himmel--kyst[data-aarstid="vinter"] .scene--dag .hus-og-tak--vinter::before { background-image: -webkit-image-set(url("bilder/kyst-hus-og-tak-vinter-dag-4796.webp") 1x, url("bilder/kyst-hus-og-tak-vinter-dag-9591.webp") 2x); background-image: image-set(url("bilder/kyst-hus-og-tak-vinter-dag-4796.webp") 1x, url("bilder/kyst-hus-og-tak-vinter-dag-9591.webp") 2x); } }
@media (min-height: 907px) { .himmel.himmel--kyst[data-aarstid="vinter"] .scene--dag .hus-og-tak--vinter::before { background-image: -webkit-image-set(url("bilder/kyst-hus-og-tak-vinter-dag-5885.webp") 1x, url("bilder/kyst-hus-og-tak-vinter-dag-14125.webp") 2x); background-image: image-set(url("bilder/kyst-hus-og-tak-vinter-dag-5885.webp") 1x, url("bilder/kyst-hus-og-tak-vinter-dag-14125.webp") 2x); } }
@media (min-height: 1086px) { .himmel.himmel--kyst[data-aarstid="vinter"] .scene--dag .hus-og-tak--vinter::before { background-image: -webkit-image-set(url("bilder/kyst-hus-og-tak-vinter-dag-7062.webp") 1x, url("bilder/kyst-hus-og-tak-vinter-dag-14125.webp") 2x); background-image: image-set(url("bilder/kyst-hus-og-tak-vinter-dag-7062.webp") 1x, url("bilder/kyst-hus-og-tak-vinter-dag-14125.webp") 2x); } }
@media (min-height: 1240px) { .himmel.himmel--kyst[data-aarstid="vinter"] .scene--dag .hus-og-tak--vinter::before { background-image: -webkit-image-set(url("bilder/kyst-hus-og-tak-vinter-dag-9591.webp") 1x, url("bilder/kyst-hus-og-tak-vinter-dag-14125.webp") 2x); background-image: image-set(url("bilder/kyst-hus-og-tak-vinter-dag-9591.webp") 1x, url("bilder/kyst-hus-og-tak-vinter-dag-14125.webp") 2x); } }
@media (min-height: 1531px) { .himmel.himmel--kyst[data-aarstid="vinter"] .scene--dag .hus-og-tak--vinter::before { background-image: -webkit-image-set(url("bilder/kyst-hus-og-tak-vinter-dag-14125.webp") 1x, url("bilder/kyst-hus-og-tak-vinter-dag-14125.webp") 2x); background-image: image-set(url("bilder/kyst-hus-og-tak-vinter-dag-14125.webp") 1x, url("bilder/kyst-hus-og-tak-vinter-dag-14125.webp") 2x); } }
@media (orientation: portrait), (max-width: 1199px) and (max-aspect-ratio: 16/10), (max-width: 1366px) and (max-aspect-ratio: 27/20) { .himmel.himmel--kyst[data-aarstid="vinter"] .scene--dag .hus-og-tak--vinter::before { background-image: -webkit-image-set(url("bilder/kyst-hus-og-tak-vinter-dag-nettbrett-2400.webp") 1x, url("bilder/kyst-hus-og-tak-vinter-dag-nettbrett-4000.webp") 2x); background-image: image-set(url("bilder/kyst-hus-og-tak-vinter-dag-nettbrett-2400.webp") 1x, url("bilder/kyst-hus-og-tak-vinter-dag-nettbrett-4000.webp") 2x); } }
@media (orientation: portrait) and (max-height: 860px), (max-width: 1199px) and (max-aspect-ratio: 16/10) and (max-height: 860px), (max-width: 1366px) and (max-aspect-ratio: 27/20) and (max-height: 860px) { .himmel.himmel--kyst[data-aarstid="vinter"] .scene--dag .hus-og-tak--vinter::before { background-image: -webkit-image-set(url("bilder/kyst-hus-og-tak-vinter-dag-nettbrett-2400.webp") 1x, url("bilder/kyst-hus-og-tak-vinter-dag-nettbrett-3200.webp") 2x); background-image: image-set(url("bilder/kyst-hus-og-tak-vinter-dag-nettbrett-2400.webp") 1x, url("bilder/kyst-hus-og-tak-vinter-dag-nettbrett-3200.webp") 2x); } }
@media (max-aspect-ratio: 5/8) { .himmel.himmel--kyst[data-aarstid="vinter"] .scene--dag .hus-og-tak--vinter::before { background-image: -webkit-image-set(url("bilder/kyst-hus-og-tak-vinter-dag-mobil-791.webp") 1x, url("bilder/kyst-hus-og-tak-vinter-dag-mobil-1318.webp") 2x); background-image: image-set(url("bilder/kyst-hus-og-tak-vinter-dag-mobil-791.webp") 1x, url("bilder/kyst-hus-og-tak-vinter-dag-mobil-1318.webp") 2x); }
  .himmel.himmel--kyst.himmel--vid[data-aarstid="vinter"] .scene--dag .hus-og-tak--vinter::before { background-image: -webkit-image-set(url("bilder/kyst-hus-og-tak-vinter-dag-mobil-vid-1187.webp") 1x, url("bilder/kyst-hus-og-tak-vinter-dag-mobil-vid-1582.webp") 2x); background-image: image-set(url("bilder/kyst-hus-og-tak-vinter-dag-mobil-vid-1187.webp") 1x, url("bilder/kyst-hus-og-tak-vinter-dag-mobil-vid-1582.webp") 2x); } }
/* vinter-regn, dag: snøen litt grå */
.himmel.himmel--kyst[data-aarstid="vinter"][data-vaer="regn"] .scene--dag .hus-og-tak--vinter::before { background-image: -webkit-image-set(url("bilder/kyst-hus-og-tak-vinter-regn-dag-4796.webp") 1x, url("bilder/kyst-hus-og-tak-vinter-regn-dag-5885.webp") 2x); background-image: image-set(url("bilder/kyst-hus-og-tak-vinter-regn-dag-4796.webp") 1x, url("bilder/kyst-hus-og-tak-vinter-regn-dag-5885.webp") 2x); }
@media (min-height: 566px) { .himmel.himmel--kyst[data-aarstid="vinter"][data-vaer="regn"] .scene--dag .hus-og-tak--vinter::before { background-image: -webkit-image-set(url("bilder/kyst-hus-og-tak-vinter-regn-dag-4796.webp") 1x, url("bilder/kyst-hus-og-tak-vinter-regn-dag-7062.webp") 2x); background-image: image-set(url("bilder/kyst-hus-og-tak-vinter-regn-dag-4796.webp") 1x, url("bilder/kyst-hus-og-tak-vinter-regn-dag-7062.webp") 2x); } }
@media (min-height: 674px) { .himmel.himmel--kyst[data-aarstid="vinter"][data-vaer="regn"] .scene--dag .hus-og-tak--vinter::before { background-image: -webkit-image-set(url("bilder/kyst-hus-og-tak-vinter-regn-dag-4796.webp") 1x, url("bilder/kyst-hus-og-tak-vinter-regn-dag-9591.webp") 2x); background-image: image-set(url("bilder/kyst-hus-og-tak-vinter-regn-dag-4796.webp") 1x, url("bilder/kyst-hus-og-tak-vinter-regn-dag-9591.webp") 2x); } }
@media (min-height: 907px) { .himmel.himmel--kyst[data-aarstid="vinter"][data-vaer="regn"] .scene--dag .hus-og-tak--vinter::before { background-image: -webkit-image-set(url("bilder/kyst-hus-og-tak-vinter-regn-dag-5885.webp") 1x, url("bilder/kyst-hus-og-tak-vinter-regn-dag-14125.webp") 2x); background-image: image-set(url("bilder/kyst-hus-og-tak-vinter-regn-dag-5885.webp") 1x, url("bilder/kyst-hus-og-tak-vinter-regn-dag-14125.webp") 2x); } }
@media (min-height: 1086px) { .himmel.himmel--kyst[data-aarstid="vinter"][data-vaer="regn"] .scene--dag .hus-og-tak--vinter::before { background-image: -webkit-image-set(url("bilder/kyst-hus-og-tak-vinter-regn-dag-7062.webp") 1x, url("bilder/kyst-hus-og-tak-vinter-regn-dag-14125.webp") 2x); background-image: image-set(url("bilder/kyst-hus-og-tak-vinter-regn-dag-7062.webp") 1x, url("bilder/kyst-hus-og-tak-vinter-regn-dag-14125.webp") 2x); } }
@media (min-height: 1240px) { .himmel.himmel--kyst[data-aarstid="vinter"][data-vaer="regn"] .scene--dag .hus-og-tak--vinter::before { background-image: -webkit-image-set(url("bilder/kyst-hus-og-tak-vinter-regn-dag-9591.webp") 1x, url("bilder/kyst-hus-og-tak-vinter-regn-dag-14125.webp") 2x); background-image: image-set(url("bilder/kyst-hus-og-tak-vinter-regn-dag-9591.webp") 1x, url("bilder/kyst-hus-og-tak-vinter-regn-dag-14125.webp") 2x); } }
@media (min-height: 1531px) { .himmel.himmel--kyst[data-aarstid="vinter"][data-vaer="regn"] .scene--dag .hus-og-tak--vinter::before { background-image: -webkit-image-set(url("bilder/kyst-hus-og-tak-vinter-regn-dag-14125.webp") 1x, url("bilder/kyst-hus-og-tak-vinter-regn-dag-14125.webp") 2x); background-image: image-set(url("bilder/kyst-hus-og-tak-vinter-regn-dag-14125.webp") 1x, url("bilder/kyst-hus-og-tak-vinter-regn-dag-14125.webp") 2x); } }
@media (orientation: portrait), (max-width: 1199px) and (max-aspect-ratio: 16/10), (max-width: 1366px) and (max-aspect-ratio: 27/20) { .himmel.himmel--kyst[data-aarstid="vinter"][data-vaer="regn"] .scene--dag .hus-og-tak--vinter::before { background-image: -webkit-image-set(url("bilder/kyst-hus-og-tak-vinter-regn-dag-nettbrett-2400.webp") 1x, url("bilder/kyst-hus-og-tak-vinter-regn-dag-nettbrett-4000.webp") 2x); background-image: image-set(url("bilder/kyst-hus-og-tak-vinter-regn-dag-nettbrett-2400.webp") 1x, url("bilder/kyst-hus-og-tak-vinter-regn-dag-nettbrett-4000.webp") 2x); } }
@media (orientation: portrait) and (max-height: 860px), (max-width: 1199px) and (max-aspect-ratio: 16/10) and (max-height: 860px), (max-width: 1366px) and (max-aspect-ratio: 27/20) and (max-height: 860px) { .himmel.himmel--kyst[data-aarstid="vinter"][data-vaer="regn"] .scene--dag .hus-og-tak--vinter::before { background-image: -webkit-image-set(url("bilder/kyst-hus-og-tak-vinter-regn-dag-nettbrett-2400.webp") 1x, url("bilder/kyst-hus-og-tak-vinter-regn-dag-nettbrett-3200.webp") 2x); background-image: image-set(url("bilder/kyst-hus-og-tak-vinter-regn-dag-nettbrett-2400.webp") 1x, url("bilder/kyst-hus-og-tak-vinter-regn-dag-nettbrett-3200.webp") 2x); } }
@media (max-aspect-ratio: 5/8) { .himmel.himmel--kyst[data-aarstid="vinter"][data-vaer="regn"] .scene--dag .hus-og-tak--vinter::before { background-image: -webkit-image-set(url("bilder/kyst-hus-og-tak-vinter-regn-dag-mobil-791.webp") 1x, url("bilder/kyst-hus-og-tak-vinter-regn-dag-mobil-1318.webp") 2x); background-image: image-set(url("bilder/kyst-hus-og-tak-vinter-regn-dag-mobil-791.webp") 1x, url("bilder/kyst-hus-og-tak-vinter-regn-dag-mobil-1318.webp") 2x); }
  .himmel.himmel--kyst.himmel--vid[data-aarstid="vinter"][data-vaer="regn"] .scene--dag .hus-og-tak--vinter::before { background-image: -webkit-image-set(url("bilder/kyst-hus-og-tak-vinter-regn-dag-mobil-vid-1187.webp") 1x, url("bilder/kyst-hus-og-tak-vinter-regn-dag-mobil-vid-1582.webp") 2x); background-image: image-set(url("bilder/kyst-hus-og-tak-vinter-regn-dag-mobil-vid-1187.webp") 1x, url("bilder/kyst-hus-og-tak-vinter-regn-dag-mobil-vid-1582.webp") 2x); } }
/* vinter, natt */
.himmel.himmel--kyst[data-aarstid="vinter"] .scene--natt .hus-og-tak--vinter::before { animation: hus-og-tak-inn .8s ease both; }
.himmel.himmel--kyst[data-aarstid="vinter"] .scene--natt .hus-og-tak--vinter::before { background-image: -webkit-image-set(url("bilder/kyst-hus-og-tak-vinter-natt-4796.webp") 1x, url("bilder/kyst-hus-og-tak-vinter-natt-5885.webp") 2x); background-image: image-set(url("bilder/kyst-hus-og-tak-vinter-natt-4796.webp") 1x, url("bilder/kyst-hus-og-tak-vinter-natt-5885.webp") 2x); }
@media (min-height: 566px) { .himmel.himmel--kyst[data-aarstid="vinter"] .scene--natt .hus-og-tak--vinter::before { background-image: -webkit-image-set(url("bilder/kyst-hus-og-tak-vinter-natt-4796.webp") 1x, url("bilder/kyst-hus-og-tak-vinter-natt-7062.webp") 2x); background-image: image-set(url("bilder/kyst-hus-og-tak-vinter-natt-4796.webp") 1x, url("bilder/kyst-hus-og-tak-vinter-natt-7062.webp") 2x); } }
@media (min-height: 674px) { .himmel.himmel--kyst[data-aarstid="vinter"] .scene--natt .hus-og-tak--vinter::before { background-image: -webkit-image-set(url("bilder/kyst-hus-og-tak-vinter-natt-4796.webp") 1x, url("bilder/kyst-hus-og-tak-vinter-natt-9591.webp") 2x); background-image: image-set(url("bilder/kyst-hus-og-tak-vinter-natt-4796.webp") 1x, url("bilder/kyst-hus-og-tak-vinter-natt-9591.webp") 2x); } }
@media (min-height: 907px) { .himmel.himmel--kyst[data-aarstid="vinter"] .scene--natt .hus-og-tak--vinter::before { background-image: -webkit-image-set(url("bilder/kyst-hus-og-tak-vinter-natt-5885.webp") 1x, url("bilder/kyst-hus-og-tak-vinter-natt-14125.webp") 2x); background-image: image-set(url("bilder/kyst-hus-og-tak-vinter-natt-5885.webp") 1x, url("bilder/kyst-hus-og-tak-vinter-natt-14125.webp") 2x); } }
@media (min-height: 1086px) { .himmel.himmel--kyst[data-aarstid="vinter"] .scene--natt .hus-og-tak--vinter::before { background-image: -webkit-image-set(url("bilder/kyst-hus-og-tak-vinter-natt-7062.webp") 1x, url("bilder/kyst-hus-og-tak-vinter-natt-14125.webp") 2x); background-image: image-set(url("bilder/kyst-hus-og-tak-vinter-natt-7062.webp") 1x, url("bilder/kyst-hus-og-tak-vinter-natt-14125.webp") 2x); } }
@media (min-height: 1240px) { .himmel.himmel--kyst[data-aarstid="vinter"] .scene--natt .hus-og-tak--vinter::before { background-image: -webkit-image-set(url("bilder/kyst-hus-og-tak-vinter-natt-9591.webp") 1x, url("bilder/kyst-hus-og-tak-vinter-natt-14125.webp") 2x); background-image: image-set(url("bilder/kyst-hus-og-tak-vinter-natt-9591.webp") 1x, url("bilder/kyst-hus-og-tak-vinter-natt-14125.webp") 2x); } }
@media (min-height: 1531px) { .himmel.himmel--kyst[data-aarstid="vinter"] .scene--natt .hus-og-tak--vinter::before { background-image: -webkit-image-set(url("bilder/kyst-hus-og-tak-vinter-natt-14125.webp") 1x, url("bilder/kyst-hus-og-tak-vinter-natt-14125.webp") 2x); background-image: image-set(url("bilder/kyst-hus-og-tak-vinter-natt-14125.webp") 1x, url("bilder/kyst-hus-og-tak-vinter-natt-14125.webp") 2x); } }
@media (orientation: portrait), (max-width: 1199px) and (max-aspect-ratio: 16/10), (max-width: 1366px) and (max-aspect-ratio: 27/20) { .himmel.himmel--kyst[data-aarstid="vinter"] .scene--natt .hus-og-tak--vinter::before { background-image: -webkit-image-set(url("bilder/kyst-hus-og-tak-vinter-natt-nettbrett-2400.webp") 1x, url("bilder/kyst-hus-og-tak-vinter-natt-nettbrett-4000.webp") 2x); background-image: image-set(url("bilder/kyst-hus-og-tak-vinter-natt-nettbrett-2400.webp") 1x, url("bilder/kyst-hus-og-tak-vinter-natt-nettbrett-4000.webp") 2x); } }
@media (orientation: portrait) and (max-height: 860px), (max-width: 1199px) and (max-aspect-ratio: 16/10) and (max-height: 860px), (max-width: 1366px) and (max-aspect-ratio: 27/20) and (max-height: 860px) { .himmel.himmel--kyst[data-aarstid="vinter"] .scene--natt .hus-og-tak--vinter::before { background-image: -webkit-image-set(url("bilder/kyst-hus-og-tak-vinter-natt-nettbrett-2400.webp") 1x, url("bilder/kyst-hus-og-tak-vinter-natt-nettbrett-3200.webp") 2x); background-image: image-set(url("bilder/kyst-hus-og-tak-vinter-natt-nettbrett-2400.webp") 1x, url("bilder/kyst-hus-og-tak-vinter-natt-nettbrett-3200.webp") 2x); } }
@media (max-aspect-ratio: 5/8) { .himmel.himmel--kyst[data-aarstid="vinter"] .scene--natt .hus-og-tak--vinter::before { background-image: -webkit-image-set(url("bilder/kyst-hus-og-tak-vinter-natt-mobil-791.webp") 1x, url("bilder/kyst-hus-og-tak-vinter-natt-mobil-1318.webp") 2x); background-image: image-set(url("bilder/kyst-hus-og-tak-vinter-natt-mobil-791.webp") 1x, url("bilder/kyst-hus-og-tak-vinter-natt-mobil-1318.webp") 2x); }
  .himmel.himmel--kyst.himmel--vid[data-aarstid="vinter"] .scene--natt .hus-og-tak--vinter::before { background-image: -webkit-image-set(url("bilder/kyst-hus-og-tak-vinter-natt-mobil-vid-1187.webp") 1x, url("bilder/kyst-hus-og-tak-vinter-natt-mobil-vid-1582.webp") 2x); background-image: image-set(url("bilder/kyst-hus-og-tak-vinter-natt-mobil-vid-1187.webp") 1x, url("bilder/kyst-hus-og-tak-vinter-natt-mobil-vid-1582.webp") 2x); } }
/* regn, dag */
.himmel.himmel--kyst:is([data-aarstid="sommer"], [data-aarstid="vaar"], [data-aarstid="hoest"])[data-vaer="regn"] .scene--dag .hus-og-tak--regn::before { animation: hus-og-tak-inn .8s ease both; }
.himmel.himmel--kyst:is([data-aarstid="sommer"], [data-aarstid="vaar"], [data-aarstid="hoest"])[data-vaer="regn"] .scene--dag .hus-og-tak--regn::before { background-image: -webkit-image-set(url("bilder/kyst-hus-og-tak-regn-dag-4796.webp") 1x, url("bilder/kyst-hus-og-tak-regn-dag-5885.webp") 2x); background-image: image-set(url("bilder/kyst-hus-og-tak-regn-dag-4796.webp") 1x, url("bilder/kyst-hus-og-tak-regn-dag-5885.webp") 2x); }
@media (min-height: 566px) { .himmel.himmel--kyst:is([data-aarstid="sommer"], [data-aarstid="vaar"], [data-aarstid="hoest"])[data-vaer="regn"] .scene--dag .hus-og-tak--regn::before { background-image: -webkit-image-set(url("bilder/kyst-hus-og-tak-regn-dag-4796.webp") 1x, url("bilder/kyst-hus-og-tak-regn-dag-7062.webp") 2x); background-image: image-set(url("bilder/kyst-hus-og-tak-regn-dag-4796.webp") 1x, url("bilder/kyst-hus-og-tak-regn-dag-7062.webp") 2x); } }
@media (min-height: 674px) { .himmel.himmel--kyst:is([data-aarstid="sommer"], [data-aarstid="vaar"], [data-aarstid="hoest"])[data-vaer="regn"] .scene--dag .hus-og-tak--regn::before { background-image: -webkit-image-set(url("bilder/kyst-hus-og-tak-regn-dag-4796.webp") 1x, url("bilder/kyst-hus-og-tak-regn-dag-9591.webp") 2x); background-image: image-set(url("bilder/kyst-hus-og-tak-regn-dag-4796.webp") 1x, url("bilder/kyst-hus-og-tak-regn-dag-9591.webp") 2x); } }
@media (min-height: 907px) { .himmel.himmel--kyst:is([data-aarstid="sommer"], [data-aarstid="vaar"], [data-aarstid="hoest"])[data-vaer="regn"] .scene--dag .hus-og-tak--regn::before { background-image: -webkit-image-set(url("bilder/kyst-hus-og-tak-regn-dag-5885.webp") 1x, url("bilder/kyst-hus-og-tak-regn-dag-14125.webp") 2x); background-image: image-set(url("bilder/kyst-hus-og-tak-regn-dag-5885.webp") 1x, url("bilder/kyst-hus-og-tak-regn-dag-14125.webp") 2x); } }
@media (min-height: 1086px) { .himmel.himmel--kyst:is([data-aarstid="sommer"], [data-aarstid="vaar"], [data-aarstid="hoest"])[data-vaer="regn"] .scene--dag .hus-og-tak--regn::before { background-image: -webkit-image-set(url("bilder/kyst-hus-og-tak-regn-dag-7062.webp") 1x, url("bilder/kyst-hus-og-tak-regn-dag-14125.webp") 2x); background-image: image-set(url("bilder/kyst-hus-og-tak-regn-dag-7062.webp") 1x, url("bilder/kyst-hus-og-tak-regn-dag-14125.webp") 2x); } }
@media (min-height: 1240px) { .himmel.himmel--kyst:is([data-aarstid="sommer"], [data-aarstid="vaar"], [data-aarstid="hoest"])[data-vaer="regn"] .scene--dag .hus-og-tak--regn::before { background-image: -webkit-image-set(url("bilder/kyst-hus-og-tak-regn-dag-9591.webp") 1x, url("bilder/kyst-hus-og-tak-regn-dag-14125.webp") 2x); background-image: image-set(url("bilder/kyst-hus-og-tak-regn-dag-9591.webp") 1x, url("bilder/kyst-hus-og-tak-regn-dag-14125.webp") 2x); } }
@media (min-height: 1531px) { .himmel.himmel--kyst:is([data-aarstid="sommer"], [data-aarstid="vaar"], [data-aarstid="hoest"])[data-vaer="regn"] .scene--dag .hus-og-tak--regn::before { background-image: -webkit-image-set(url("bilder/kyst-hus-og-tak-regn-dag-14125.webp") 1x, url("bilder/kyst-hus-og-tak-regn-dag-14125.webp") 2x); background-image: image-set(url("bilder/kyst-hus-og-tak-regn-dag-14125.webp") 1x, url("bilder/kyst-hus-og-tak-regn-dag-14125.webp") 2x); } }
@media (orientation: portrait), (max-width: 1199px) and (max-aspect-ratio: 16/10), (max-width: 1366px) and (max-aspect-ratio: 27/20) { .himmel.himmel--kyst:is([data-aarstid="sommer"], [data-aarstid="vaar"], [data-aarstid="hoest"])[data-vaer="regn"] .scene--dag .hus-og-tak--regn::before { background-image: -webkit-image-set(url("bilder/kyst-hus-og-tak-regn-dag-nettbrett-2400.webp") 1x, url("bilder/kyst-hus-og-tak-regn-dag-nettbrett-4000.webp") 2x); background-image: image-set(url("bilder/kyst-hus-og-tak-regn-dag-nettbrett-2400.webp") 1x, url("bilder/kyst-hus-og-tak-regn-dag-nettbrett-4000.webp") 2x); } }
@media (orientation: portrait) and (max-height: 860px), (max-width: 1199px) and (max-aspect-ratio: 16/10) and (max-height: 860px), (max-width: 1366px) and (max-aspect-ratio: 27/20) and (max-height: 860px) { .himmel.himmel--kyst:is([data-aarstid="sommer"], [data-aarstid="vaar"], [data-aarstid="hoest"])[data-vaer="regn"] .scene--dag .hus-og-tak--regn::before { background-image: -webkit-image-set(url("bilder/kyst-hus-og-tak-regn-dag-nettbrett-2400.webp") 1x, url("bilder/kyst-hus-og-tak-regn-dag-nettbrett-3200.webp") 2x); background-image: image-set(url("bilder/kyst-hus-og-tak-regn-dag-nettbrett-2400.webp") 1x, url("bilder/kyst-hus-og-tak-regn-dag-nettbrett-3200.webp") 2x); } }
@media (max-aspect-ratio: 5/8) { .himmel.himmel--kyst:is([data-aarstid="sommer"], [data-aarstid="vaar"], [data-aarstid="hoest"])[data-vaer="regn"] .scene--dag .hus-og-tak--regn::before { background-image: -webkit-image-set(url("bilder/kyst-hus-og-tak-regn-dag-mobil-791.webp") 1x, url("bilder/kyst-hus-og-tak-regn-dag-mobil-1318.webp") 2x); background-image: image-set(url("bilder/kyst-hus-og-tak-regn-dag-mobil-791.webp") 1x, url("bilder/kyst-hus-og-tak-regn-dag-mobil-1318.webp") 2x); }
  .himmel.himmel--kyst.himmel--vid:is([data-aarstid="sommer"], [data-aarstid="vaar"], [data-aarstid="hoest"])[data-vaer="regn"] .scene--dag .hus-og-tak--regn::before { background-image: -webkit-image-set(url("bilder/kyst-hus-og-tak-regn-dag-mobil-vid-1187.webp") 1x, url("bilder/kyst-hus-og-tak-regn-dag-mobil-vid-1582.webp") 2x); background-image: image-set(url("bilder/kyst-hus-og-tak-regn-dag-mobil-vid-1187.webp") 1x, url("bilder/kyst-hus-og-tak-regn-dag-mobil-vid-1582.webp") 2x); } }

/* ── årstidene: laget «Vann» (LAG i arstider/lag_ark.py, raden «Vann»). Tegnet av arstider/lag_vann.py. Den godkjente kystlinjen er uendret: laget er en farget flate oppå vannet, fra kaikanten (y 1185 i kilden) ned til bunnen, med et hull der flytebrygga står. Om dagen gjør den vannet gråere og speilingene svakere når det er skyet, nesten uten speiling og med små ringer i regn, litt mørkere om høsten og mørkt og kaldt blått om vinteren. Om natten farges ikke vannet, så lyssøylene står som i nattutgaven; bare ringene i regn legges oppå, svakere. Flaten glir med kystlinjen (kyst-gli, --kyst-tid og --start, samme regnestykke som laget «Båter»). Uten skript, uten tilstand.json og før siden har lest den, er det sommer og sol, og flaten er tom og usynlig. ⚠️ Laget er aldri display: none, så glidningen følger bildet. Ringene er en flis (bilder/lag-vann-ringer-v1.svg) som bare hentes i regn; med redusert bevegelse står de stille (lag-vann-ringer-stille-v1.svg) ── */
.himmel--kyst .lag-vann { position: absolute; inset: 0; container-type: size; pointer-events: none; }
.himmel--kyst .lag-vann .flate {
  --hb: 100cqh; --u0: var(--u0-pc, 0); --cw: var(--cw-pc, 14125);
  position: absolute; left: 0; bottom: calc(100cqh - var(--hb));
  width: max(100vw, calc(var(--hb) * var(--cw) / 1620)); aspect-ratio: var(--cw) / 1620;
  --start: clamp(calc(100vw - 100%), calc(50vw - var(--kx) * 100%), 0px);
  transform: translateX(var(--start));
  animation: kyst-gli var(--kyst-tid) ease-in-out infinite;
}
/* Vannet: hele kildens bredde, flyttet så utsnittet står der bildet står. --lv-p er 1 når tilstanden har noe å vise, og fargen tones inn på 0,8 s */
.himmel--kyst .lag-vann .lv-vann, .himmel--kyst .lag-vann .lv-under {
  position: absolute; left: calc(var(--u0) / var(--cw) * -100%); width: calc(14125 / var(--cw) * 100%);
  opacity: var(--lv-p, 0); transition: opacity .8s ease;
}
.himmel--kyst .lag-vann .lv-vann {
  top: calc(1185.03 / 1620 * 100%); bottom: 0;
  background: linear-gradient(var(--lv-t0, transparent), var(--lv-t1, transparent));
  clip-path: polygon(evenodd, 0 0, 100% 0, 100% 100%, 0 100%, 0 0, 74.5133% 0, 74.3929% 100%, 75.0655% 100%, 74.9451% 0, 74.5133% 0);
}
/* Under bildet (telefon med «vid»): vannet som fortsetter, i fargen nederst */
.himmel--kyst .lag-vann .lv-under { display: none; top: 100%; height: calc(100cqh - var(--hb)); background: var(--lv-t1, transparent); }
.himmel--kyst .lag-vann .lv-ringer {
  position: absolute; inset: 0; opacity: var(--lv-ring, 1);
  background-repeat: repeat-x; background-size: calc(4800 / 14125 * 100%) 100%;
}
/* Nærmere i vannet under bildet er ringene større */
.himmel--kyst .lag-vann .lv-under .lv-ringer { background-size: calc(7680 / 14125 * 100%) auto; }
.himmel--kyst[data-aarstid="sommer"][data-vaer="skyet"] .lag-vann--dag { --lv-p: 1; --lv-t0: rgba(113, 130, 140, 0.42); --lv-t1: rgba(82, 98, 107, 0.50); }
.himmel--kyst[data-aarstid="sommer"][data-vaer="regn"] .lag-vann--dag { --lv-p: 1; --lv-t0: rgba(95, 112, 123, 0.70); --lv-t1: rgba(69, 84, 94, 0.76); }
.himmel--kyst[data-aarstid="sommer"][data-vaer="snoe"] .lag-vann--dag { --lv-p: 1; --lv-t0: rgba(95, 112, 123, 0.70); --lv-t1: rgba(69, 84, 94, 0.76); }
.himmel--kyst[data-aarstid="vaar"][data-vaer="skyet"] .lag-vann--dag { --lv-p: 1; --lv-t0: rgba(113, 130, 140, 0.42); --lv-t1: rgba(82, 98, 107, 0.50); }
.himmel--kyst[data-aarstid="vaar"][data-vaer="regn"] .lag-vann--dag { --lv-p: 1; --lv-t0: rgba(95, 112, 123, 0.70); --lv-t1: rgba(69, 84, 94, 0.76); }
.himmel--kyst[data-aarstid="vaar"][data-vaer="snoe"] .lag-vann--dag { --lv-p: 1; --lv-t0: rgba(95, 112, 123, 0.70); --lv-t1: rgba(69, 84, 94, 0.76); }
.himmel--kyst[data-aarstid="hoest"][data-vaer="sol"] .lag-vann--dag { --lv-p: 1; --lv-t0: rgba(20, 53, 76, 0.16); --lv-t1: rgba(15, 43, 63, 0.20); }
.himmel--kyst[data-aarstid="hoest"][data-vaer="skyet"] .lag-vann--dag { --lv-p: 1; --lv-t0: rgba(106, 122, 132, 0.46); --lv-t1: rgba(74, 89, 98, 0.55); }
.himmel--kyst[data-aarstid="hoest"][data-vaer="regn"] .lag-vann--dag { --lv-p: 1; --lv-t0: rgba(86, 102, 111, 0.72); --lv-t1: rgba(61, 74, 83, 0.78); }
.himmel--kyst[data-aarstid="hoest"][data-vaer="snoe"] .lag-vann--dag { --lv-p: 1; --lv-t0: rgba(34, 56, 74, 0.55); --lv-t1: rgba(24, 42, 57, 0.62); }
.himmel--kyst[data-aarstid="vinter"][data-vaer="sol"] .lag-vann--dag { --lv-p: 1; --lv-t0: rgba(28, 63, 102, 0.40); --lv-t1: rgba(20, 47, 82, 0.46); }
.himmel--kyst[data-aarstid="vinter"][data-vaer="skyet"] .lag-vann--dag { --lv-p: 1; --lv-t0: rgba(125, 135, 142, 0.52); --lv-t1: rgba(91, 101, 108, 0.60); }
.himmel--kyst[data-aarstid="vinter"][data-vaer="regn"] .lag-vann--dag { --lv-p: 1; --lv-t0: rgba(82, 93, 101, 0.72); --lv-t1: rgba(58, 67, 74, 0.78); }
.himmel--kyst[data-aarstid="vinter"][data-vaer="snoe"] .lag-vann--dag { --lv-p: 1; --lv-t0: rgba(42, 58, 70, 0.58); --lv-t1: rgba(29, 42, 51, 0.66); }
/* Ringene i regn, om dagen og om natten; om natten uten farge og svakere, så lyssøylene står */
.himmel--kyst[data-vaer="regn"] .lag-vann .lv-ringer, .himmel--kyst[data-aarstid="sommer"][data-vaer="snoe"] .lag-vann .lv-ringer, .himmel--kyst[data-aarstid="vaar"][data-vaer="snoe"] .lag-vann .lv-ringer { background-image: url(bilder/lag-vann-ringer-v1.svg); }
.himmel--kyst[data-vaer="regn"] .lag-vann--natt, .himmel--kyst[data-aarstid="sommer"][data-vaer="snoe"] .lag-vann--natt, .himmel--kyst[data-aarstid="vaar"][data-vaer="snoe"] .lag-vann--natt { --lv-p: 1; --lv-ring: 0.5; }
/* Nettbrett og telefon: utsnittet til bildet, med de samme spørringene som KYST_NETTBRETT_MEDIA og KYST_MOBIL_MEDIA i bygg.py */
@media (orientation: portrait), (max-width: 1199px) and (max-aspect-ratio: 16/10), (max-width: 1366px) and (max-aspect-ratio: 27/20) {
  .himmel--kyst .lag-vann .flate { --u0: var(--u0-nb, 1600); --cw: var(--cw-nb, 4800); }
}
@media (max-aspect-ratio: 5/8) {
  .himmel--kyst .lag-vann .flate { --u0: var(--u0-mob, 1620); --cw: var(--cw-mob, 3560); }
  .himmel--kyst.himmel--vid .lag-vann .flate { --hb: var(--vid-h); }
  .himmel--kyst.himmel--vid .lag-vann .lv-under { display: block; }
}
@media (prefers-reduced-motion: reduce) {
  .himmel--kyst .lag-vann .flate { animation: none; }
  .himmel--kyst .lag-vann .lv-vann, .himmel--kyst .lag-vann .lv-under { transition: none; }
  .himmel--kyst[data-vaer="regn"] .lag-vann .lv-ringer, .himmel--kyst[data-aarstid="sommer"][data-vaer="snoe"] .lag-vann .lv-ringer, .himmel--kyst[data-aarstid="vaar"][data-vaer="snoe"] .lag-vann .lv-ringer { background-image: url(bilder/lag-vann-ringer-stille-v1.svg); }
}

/* ── årstidene: laget «Båter», sommer og sol (eier 21.10.2026, LAG i arstider/lag_ark.py: «Sommer og sol: seilbåter er ute og seiler»). Laget er tegnet av arstider/lag_baater.py og ligger inne i scene--dag, så det bare finnes i lys modus og aldri om natten. Den godkjente kystlinjen er uendret: laget er en egen flate oppå, like stor som bildet og med samme glidning (kyst-gli, --kyst-tid og --start), så båtene ligger i vannet der de er tegnet. Utsnittet (--u0 og --cw, i kildens piksler) følger de samme spørringene som bildet. Hver båt seiler sakte fram og tilbake i sin bane og snur i endene; med redusert bevegelse står alt stille (regelen øverst og den her). Uten skript, uten tilstand.json og før siden har lest den, er det sommer og sol, så båtene vises ── */
.himmel--kyst .lag-baater { position: absolute; inset: 0; container-type: size; pointer-events: none; }
.himmel--kyst:not([data-aarstid="sommer"]) .lag-baater, .himmel--kyst:not([data-vaer="sol"]) .lag-baater { display: none; }
.himmel--kyst .lb-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
/* Flaten er bildet: bredden er høyden ganger utsnittets forhold, og aldri smalere enn skjermen (som img i scene-bunn). --hb er høyden på bildet, og bunnen står der bildets bunn står */
.himmel--kyst .lag-baater .flate {
  --hb: 100cqh; --u0: var(--u0-pc, 0); --cw: var(--cw-pc, 14125);
  position: absolute; left: 0; bottom: calc(100cqh - var(--hb));
  width: max(100vw, calc(var(--hb) * var(--cw) / 1620)); aspect-ratio: var(--cw) / 1620;
  --start: clamp(calc(100vw - 100%), calc(50vw - var(--kx) * 100%), 0px);
  transform: translateX(var(--start));
  animation: kyst-gli var(--kyst-tid) ease-in-out infinite;
}
.himmel--kyst .lag-baater .baat {
  position: absolute; overflow: visible;
  left: calc((var(--x) - var(--u0)) / var(--cw) * 100%);
  bottom: calc(var(--b) / 1620 * 100%); height: calc(var(--h) / 1620 * 100%); aspect-ratio: var(--ar);
  transform-origin: var(--o);
  animation: seil-h var(--tid) ease-in-out var(--fs) infinite, vugge-seil var(--vt) ease-in-out var(--vf) infinite alternate;
}
.himmel--kyst .lag-baater .baat.mot-venstre { scale: -1 1; animation-name: seil-v, vugge-seil; }
/* «smal»: flere båter der flaten er smalere enn 9:5 (telefon og stående nettbrett), som ser en kortere bit av kysten om gangen */
.himmel--kyst .lag-baater .baat.smal, .himmel--kyst .lag-baater .baat.naer { display: none; }
@container (max-aspect-ratio: 9/5) { .himmel--kyst .lag-baater .baat.smal { display: block; } }
/* Banen (--lop) er i prosent av båtens egen bredde, så den er like lang i meter på alle skjermer. Båten seiler i 45 prosent av runden hver vei og snur i 5: den smalner til baugen peker mot oss, og seiler tilbake */
@keyframes seil-h {
  0% { translate: 0 0; scale: 1 1; }
  45% { translate: var(--lop) 0; scale: 1 1; }
  50% { translate: var(--lop) 0; scale: -1 1; }
  95% { translate: 0 0; scale: -1 1; }
  100% { translate: 0 0; scale: 1 1; }
}
@keyframes seil-v {
  0% { translate: 0 0; scale: -1 1; }
  45% { translate: calc(var(--lop) * -1) 0; scale: -1 1; }
  50% { translate: calc(var(--lop) * -1) 0; scale: 1 1; }
  95% { translate: 0 0; scale: 1 1; }
  100% { translate: 0 0; scale: -1 1; }
}
@keyframes vugge-seil { from { rotate: -0.7deg; } to { rotate: 0.7deg; } }
/* Nettbrett og telefon: utsnittet til bildet, med de samme spørringene som KYST_NETTBRETT_MEDIA og KYST_MOBIL_MEDIA i bygg.py */
@media (orientation: portrait), (max-width: 1199px) and (max-aspect-ratio: 16/10), (max-width: 1366px) and (max-aspect-ratio: 27/20) {
  .himmel--kyst .lag-baater .flate { --u0: var(--u0-nb, 1600); --cw: var(--cw-nb, 4800); }
}
@media (max-aspect-ratio: 5/8) {
  .himmel--kyst .lag-baater .flate { --u0: var(--u0-mob, 1620); --cw: var(--cw-mob, 3560); }
  .himmel--kyst.himmel--vid .lag-baater .flate { --hb: var(--vid-h); }
  /* «naer»: i vannet som fortsetter under bildet med «vid», nærmest og størst */
  .himmel--kyst.himmel--vid .lag-baater .baat.naer { display: block; }
}
@media (prefers-reduced-motion: reduce) {
  .himmel--kyst .lag-baater .flate, .himmel--kyst .lag-baater .baat { animation: none; }
}

/* ── årstidene: laget «Lys» (LAG i arstider/lag_ark.py): et svakt filter over kystlinjen etter årstid og vær. Laget lages av arstider/lag_lys.py og ligger sist i scene--dag, så det bare finnes i lys modus: sommer og sol og natten er de godkjente bildene, uendret. Den godkjente kystlinjen endres ikke. Laget er en farget flate oppå (mix-blend-mode og alfa), og masken lag-lys-maske-v1.svg holder den til kystlinjen og borte fra himmelen. Flaten er like stor som bildet og glir med det (kyst-gli, --kyst-tid og --start), med det samme utsnittet (--u0 og --cw) i de samme spørringene. På telefon med «vid» dekker den også vannet under bildet. ⚠️ Laget er aldri display: none i lys modus, fordi glidningen da ville begynt etter bildets; i sommer og sol er flaten tom (opacity 0, uten maske og uten blanding), og masken hentes ikke. Lyset tones inn på 0,8 s når siden har lest tilstand.json; med redusert bevegelse står alt stille, uten overgang ── */
.himmel--kyst .lag-dagslys { position: absolute; inset: 0; container-type: size; pointer-events: none; forced-color-adjust: none; }
/* Flaten er bildet: bredden er høyden ganger utsnittets forhold, aldri smalere enn skjermen (som img i scene-bunn), og bunnen av bildet står ved --hb. Under det, på telefon med «vid», går flaten videre ned til kanten over vannet */
.himmel--kyst .lag-dagslys .flate {
  --hb: 100cqh; --u0: var(--u0-pc, 0); --cw: var(--cw-pc, 14125);
  --wf: max(100vw, calc(var(--hb) * var(--cw) / 1620));
  position: absolute; left: 0; bottom: 0; width: var(--wf); top: calc(var(--hb) - var(--wf) * 1620 / var(--cw));
  --start: clamp(calc(100vw - 100%), calc(50vw - var(--kx) * 100%), 0px);
  transform: translateX(var(--start));
  animation: kyst-gli var(--kyst-tid) ease-in-out infinite;
  opacity: 0; transition: opacity .8s ease-out;
}
/* kjoelig: Et svakt, kjølig filter: lyset under skyer er flatere og kaldere. (sommer skyet, vaar skyet, hoest skyet) */
.himmel--kyst:is([data-aarstid="sommer"], [data-aarstid="vaar"], [data-aarstid="hoest"])[data-vaer="skyet"] .lag-dagslys { mix-blend-mode: normal; --lys-farge: rgba(141, 156, 171, 0.2); }
/* regn: Et mørkere og blåere filter. (sommer regn, sommer snoe, vaar regn, vaar snoe, hoest regn) */
.himmel--kyst:is([data-aarstid="sommer"], [data-aarstid="vaar"], [data-aarstid="hoest"])[data-vaer="regn"] .lag-dagslys, .himmel--kyst:is([data-aarstid="sommer"], [data-aarstid="vaar"])[data-vaer="snoe"] .lag-dagslys { mix-blend-mode: normal; --lys-farge: rgba(58, 83, 107, 0.28); }
/* hoest-sol: Varmere og lavere sol: en svak gul tone. (hoest sol) */
.himmel--kyst[data-aarstid="hoest"][data-vaer="sol"] .lag-dagslys { mix-blend-mode: soft-light; --lys-farge: rgba(255, 195, 90, 0.2); }
/* vinter-lys: Kaldt og lyst, klart vinterlys. (hoest snoe, vinter sol) */
.himmel--kyst[data-aarstid="hoest"][data-vaer="snoe"] .lag-dagslys, .himmel--kyst[data-aarstid="vinter"][data-vaer="sol"] .lag-dagslys { mix-blend-mode: soft-light; --lys-farge: rgba(200, 222, 255, 0.7); }
/* vinter-graa: Et kaldt, grått filter. (vinter skyet) */
.himmel--kyst[data-aarstid="vinter"][data-vaer="skyet"] .lag-dagslys { mix-blend-mode: normal; --lys-farge: rgba(183, 194, 204, 0.26); }
/* vinter-regn: Et mørkere filter. (vinter regn) */
.himmel--kyst[data-aarstid="vinter"][data-vaer="regn"] .lag-dagslys { mix-blend-mode: normal; --lys-farge: rgba(86, 97, 108, 0.24); }
/* vinter-snoe: Kaldt og lyst, litt dempet. (vinter snoe) */
.himmel--kyst[data-aarstid="vinter"][data-vaer="snoe"] .lag-dagslys { mix-blend-mode: normal; --lys-farge: rgba(223, 231, 239, 0.24); }
/* Når lyset viser noe: fargen, og masken i to lag. Silhuetten i utsnittets størrelse og plass, og under bildet en hel flate ned til kanten (2 px inn i bildet, der silhuetten er helt dekket, så det ikke blir noen søm) */
.himmel--kyst:is([data-aarstid="sommer"], [data-aarstid="vaar"], [data-aarstid="hoest"], [data-aarstid="vinter"]):is([data-vaer="skyet"], [data-vaer="regn"], [data-vaer="snoe"]) .lag-dagslys .flate, .himmel--kyst:is([data-aarstid="hoest"], [data-aarstid="vinter"])[data-vaer="sol"] .lag-dagslys .flate {
  opacity: 1; background: var(--lys-farge);
  -webkit-mask-image: url(bilder/lag-lys-maske-v1.svg), linear-gradient(#000 0 0); mask-image: url(bilder/lag-lys-maske-v1.svg), linear-gradient(#000 0 0);
  -webkit-mask-size: calc(var(--wf) * 14125 / var(--cw)) calc(var(--wf) * 1620 / var(--cw)), 100% calc(100cqh - var(--hb) + 2px);
  mask-size: calc(var(--wf) * 14125 / var(--cw)) calc(var(--wf) * 1620 / var(--cw)), 100% calc(100cqh - var(--hb) + 2px);
  -webkit-mask-position: calc(var(--wf) * var(--u0) / var(--cw) * -1) 0, 0 100%; mask-position: calc(var(--wf) * var(--u0) / var(--cw) * -1) 0, 0 100%;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
}
/* Nettbrett og telefon: utsnittet til bildet, med de samme spørringene som KYST_NETTBRETT_MEDIA og KYST_MOBIL_MEDIA i bygg.py */
@media (orientation: portrait), (max-width: 1199px) and (max-aspect-ratio: 16/10), (max-width: 1366px) and (max-aspect-ratio: 27/20) {
  .himmel--kyst .lag-dagslys .flate { --u0: var(--u0-nb, 1600); --cw: var(--cw-nb, 4800); }
}
@media (max-aspect-ratio: 5/8) {
  .himmel--kyst .lag-dagslys .flate { --u0: var(--u0-mob, 1620); --cw: var(--cw-mob, 3560); }
  .himmel--kyst:not(.himmel--vid) .lag-dagslys .flate { --u0: var(--u0-tett, 3051); --cw: var(--cw-tett, 1582); }
  .himmel--kyst.himmel--vid .lag-dagslys .flate { --hb: var(--vid-h); }
}
@media (prefers-reduced-motion: reduce) {
  .himmel--kyst .lag-dagslys .flate { animation: none; transition: none; }
}

/* ── årstidene: laget «Nedbør» (LAG i arstider/lag_ark.py, 21.10.2026; eier: regn som lette, skrå streker i CSS, og snøfnugg som daler sakte). Tegnet av arstider/lag_nedbor.py. Laget ligger over hele startbildet, rett før «Rull ned», og er av i sol og skyet, uten skript, uten tilstand.json og før siden har lest den: da er startbildet som i dag. Regn i regn, og i snø om sommeren og våren (sludd, LAG); snø i snø om høsten og vinteren. Flisene er bakgrunner (side/bilder/lag-nedbor-*.svg) og hentes bare når laget vises. Hvert lag er én flis høyere enn startbildet og flyttes ned én flis med transform, så det går rundt uten skjøt og uten at noe tegnes på nytt; laget rundt er skjevt (skewX), så strekene og fallet blir skrå. Med redusert bevegelse står alt stille og synlig, så det fortsatt ser ut som regn (sjefen 21.10.2026; regelen øverst og den her). Natten har sine egne fliser ── */
.himmel--kyst .lag-nedbor { display: none; position: absolute; inset: 0; overflow: hidden; pointer-events: none; container-type: size; animation: ln-inn 1.6s ease-out both; }
.himmel--kyst:is([data-vaer="regn"], [data-vaer="snoe"]) .lag-nedbor { display: block; }
.himmel--kyst .lag-nedbor > * { display: none; position: absolute; top: 0; bottom: 0; }
.himmel--kyst[data-vaer="regn"] .ln-regn, .himmel--kyst[data-vaer="snoe"]:is([data-aarstid="sommer"], [data-aarstid="vaar"]) .ln-regn,
.himmel--kyst[data-vaer="snoe"]:is([data-aarstid="hoest"], [data-aarstid="vinter"]) .ln-snoe { display: block; }
.himmel--kyst .lag-nedbor > ::before { content: ""; position: absolute; left: 0; right: 0; bottom: 0; background-repeat: repeat; }
/* Regnet: flisen er 240 x 360 px og faller én flis på .55 s. Laget er skjevt 12 grader og går ut over sidene, så hjørnene er dekket */
.himmel--kyst .ln-regn { left: calc(-1 * calc(11.1cqh + 4px)); right: calc(-1 * calc(11.1cqh + 4px)); transform: skewX(-12deg); }
.himmel--kyst .ln-regn::before { top: -360px; background-image: url(bilder/lag-nedbor-regn-v1.svg); background-size: 240px 360px; animation: ln-regn .55s linear infinite; }
/* Snøen: to lag, det fjerne med flisen i 0,55 av størrelsen, svakere og saktere. Begge svaier litt sidelengs, i hver sin takt */
/* ⚠️ Fallet (transform) og svaiet (translate) står begge på ::before: med svaiet på laget rundt oppdaterte Chromium stilen på hovedtråden i hvert bilde (målt 21.10.2026) */
.himmel--kyst .ln-snoe { left: calc(-1 * calc(4.9cqh + 20px)); right: calc(-1 * calc(4.9cqh + 20px)); transform: skewX(-5deg); }
.himmel--kyst .ln-snoe.ln-fjern { opacity: .72; }
.himmel--kyst .ln-snoe::before { top: -320px; background-image: url(bilder/lag-nedbor-snoe-v1.svg); background-size: 320px 320px; animation: ln-snoe 6.4s linear infinite, ln-svai 5.6s ease-in-out -1.2s infinite alternate; }
.himmel--kyst .ln-snoe.ln-fjern::before { top: -176px; background-size: 176px 176px; background-position: 71px 43px; animation: ln-snoe-fjern 7.2s linear infinite, ln-svai 8.2s ease-in-out -5s infinite alternate; }
@keyframes ln-regn { to { transform: translateY(360px); } }
@keyframes ln-snoe { to { transform: translateY(320px); } }
@keyframes ln-snoe-fjern { to { transform: translateY(176px); } }
@keyframes ln-svai { from { translate: -16px 0; } to { translate: 16px 0; } }
@keyframes ln-inn { from { opacity: 0; } }
/* Natten: flisene i nattfarger */
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="lys"]) .himmel--kyst .ln-regn::before { background-image: url(bilder/lag-nedbor-regn-natt-v1.svg); }
  :root:not([data-tema="lys"]) .himmel--kyst .ln-snoe::before { background-image: url(bilder/lag-nedbor-snoe-natt-v1.svg); }
}
:root[data-tema="mork"] .himmel--kyst .ln-regn::before { background-image: url(bilder/lag-nedbor-regn-natt-v1.svg); }
:root[data-tema="mork"] .himmel--kyst .ln-snoe::before { background-image: url(bilder/lag-nedbor-snoe-natt-v1.svg); }
@media (prefers-reduced-motion: reduce) {
  .himmel--kyst .lag-nedbor, .himmel--kyst .lag-nedbor > *, .himmel--kyst .lag-nedbor > ::before { animation: none; }
}