/* Motivtestsidan (motiv.html): samma linjestil som startsidans dygnscen (css/ny-scen.css).
   Allt rörligt är transform/opacity, så det går på kompositorn. */
:root {
  --bg: #0e0c09; --himmel1: #090806; --himmel2: #24190f;
  --linje: rgba(240,228,212,.8); --mitt: rgba(240,228,212,.55); --svag: rgba(240,228,212,.32);
  --yta: rgba(255,255,255,.05); --amber: #e5a077; --rod: #d0503a; --gron: #6fcf97; --mane: #f3e6cf;
  --glas-bg: rgba(20,17,13,.62); --glas-kant: rgba(255,255,255,.1); --text: #f1e8dc; --text2: rgba(241,232,220,.62);
  color-scheme: dark;
}
[data-theme="light"] {
  --bg: #f7f2ea; --himmel1: #fcfaf6; --himmel2: #f1e3d4;
  --linje: #3d342a; --mitt: rgba(61,52,42,.6); --svag: rgba(61,52,42,.34);
  --yta: rgba(61,52,42,.04); --amber: #d27c45; --mane: #e7b98e;
  --glas-bg: rgba(255,255,255,.66); --glas-kant: rgba(0,0,0,.08); --text: #2a231c; --text2: rgba(42,35,28,.6);
  color-scheme: light;
}

* { box-sizing: border-box; }
html { scroll-snap-type: y proximity; }
body { margin: 0; background: var(--bg); color: var(--text); font: 15px/1.5 system-ui, -apple-system, "Segoe UI", sans-serif; }
.mv-defs { position: absolute; }
.s-amber { stop-color: var(--amber); }
.s-linje { stop-color: var(--linje); }

/* ---- topplisten ---- */
.mv-topp {
  position: fixed; z-index: 10; top: 12px; left: 12px; right: 12px;
  display: flex; align-items: center; gap: 12px; padding: 8px 10px 8px 14px;
  background: var(--glas-bg); border: 1px solid var(--glas-kant); border-radius: 18px;
  backdrop-filter: blur(18px) saturate(1.4); -webkit-backdrop-filter: blur(18px) saturate(1.4);
}
.mv-topp h1 { margin: 0; font-size: 14px; font-weight: 600; white-space: nowrap; }
.mv-tillbaka { display: inline-flex; align-items: center; gap: 2px; color: var(--text2); text-decoration: none; font-size: 13px; white-space: nowrap; }
.mv-tillbaka svg, .mv-topp button svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.mv-val { flex: 1; min-width: 0; display: flex; align-items: center; justify-content: center; gap: 4px; }
.mv-valj { position: relative; min-width: 0; flex: 0 1 300px; display: flex; }
.mv-valj select { width: 100%; appearance: none; font: inherit; font-size: 14px; font-weight: 600; color: var(--text); background: transparent; border: 1px solid var(--glas-kant); border-radius: 999px; padding: 5px 30px 5px 14px; cursor: pointer; text-overflow: ellipsis; }
.mv-valj select:hover { background: var(--glas-kant); }
.mv-valj svg { position: absolute; right: 10px; top: 50%; translate: 0 -50%; width: 14px; height: 14px; pointer-events: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; color: var(--text2); }
.mv-topp button.mv-ikon { width: 32px; height: 32px; padding: 0; display: grid; place-items: center; flex: none; }
.mv-topp button:hover { background: var(--glas-kant); }
.mv-topp :focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; }
.mv-knappar { display: flex; gap: 4px; }
.mv-topp button { font: inherit; font-size: 13px; padding: 5px 11px; border-radius: 999px; border: 1px solid var(--glas-kant); background: transparent; color: var(--text); cursor: pointer; white-space: nowrap; }
.mv-topp button[aria-pressed="true"] { background: var(--text); color: var(--bg); }
@media (max-width: 767px) {
  .mv-topp { flex-wrap: wrap; left: 8px; right: 8px; top: 8px; }
  .mv-topp h1 { display: none; }
  .mv-val { order: 3; flex-basis: 100%; }
}

/* ---- scenerna ---- */
.motiv {
  position: relative; height: 100svh; min-height: 560px; overflow: hidden; scroll-snap-align: start;
  background: linear-gradient(180deg, var(--himmel1) 0%, var(--himmel2) 100%);
}
.motiv > svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.motiv::after { /* samma nedtoning uppifrån som prods .ny-hero__sky-bas, så texten har något att stå på */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(14,12,9,.55) 0%, rgba(14,12,9,0) 42%);
}
[data-theme="light"] .motiv::after { background: linear-gradient(180deg, rgba(255,255,255,.6) 0%, rgba(255,255,255,0) 42%); }
.mv-etikett {
  position: absolute; z-index: 2; left: 16px; bottom: 16px; max-width: min(440px, calc(100% - 32px));
  padding: 10px 14px; border-radius: 14px; background: var(--glas-bg); border: 1px solid var(--glas-kant);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
}
.mv-etikett b { display: block; font-size: 14px; }
.mv-etikett span { display: block; font-size: 12.5px; color: var(--text2); }
.mv-rubrik { display: none; position: absolute; z-index: 2; left: clamp(16px, 6vw, 96px); top: clamp(96px, 16vh, 180px); max-width: 44ch; }
.visa-rubrik .mv-rubrik { display: block; }
.mv-rubrik h2 { margin: 0; font: 600 clamp(32px, 5vw, 72px)/1.07 Georgia, "Times New Roman", serif; letter-spacing: -.012em; }
.mv-rubrik p { margin: 18px 0 0; color: var(--text2); max-width: 46ch; }

/* ---- linjestilen ---- */
.motiv svg { stroke-linecap: round; stroke-linejoin: round; }
.land { fill: var(--bg); stroke: var(--linje); stroke-width: 1.3; }
.land.fjarr { stroke: var(--svag); }
.land.mitt { stroke: var(--mitt); }
.t { fill: var(--bg); stroke: var(--linje); stroke-width: 1.3; }
.k { fill: var(--yta); stroke: var(--linje); stroke-width: 1.3; }
.l { fill: none; stroke: var(--linje); stroke-width: 1.1; }
.l.tjock { stroke-width: 2.4; }
.l.svag, .svag .l, .svag .t { stroke: var(--svag); }
.mitt .t, .mitt .l { stroke: var(--mitt); }
.streckad { stroke-dasharray: 14 18; }
.rod { fill: color-mix(in srgb, var(--rod) 22%, var(--bg)); }
.f { fill: var(--amber); stroke: none; }
.glas { fill: color-mix(in srgb, var(--amber) 28%, transparent); stroke: var(--linje); stroke-width: .8; }
.r { fill: var(--rod); stroke: none; }
.gron { fill: var(--gron); stroke: none; }
.kagla { fill: url(#g-ljus); stroke: none; }
.spar { fill: url(#g-spar); stroke: none; }
.skylt { fill: var(--linje); font: 700 10px system-ui, sans-serif; letter-spacing: .14em; }
.stj { fill: var(--linje); }
.mane { fill: var(--mane); }
.mane-glo { fill: var(--mane); opacity: .06; }
.vatten { fill: var(--bg); }
.vag { stroke: var(--svag); stroke-width: 1.2; }
.vag.mane-spegel { stroke: var(--mane); opacity: .5; }
.snoflinga { fill: var(--linje); opacity: .75; }
.cont { stroke: var(--linje); stroke-width: .9; }
.c0 { fill: color-mix(in srgb, var(--amber) 30%, var(--bg)); }
.c1 { fill: color-mix(in srgb, var(--rod) 30%, var(--bg)); }
.c2 { fill: color-mix(in srgb, #6d9ad6 30%, var(--bg)); }
.c3 { fill: color-mix(in srgb, var(--gron) 26%, var(--bg)); }
.norrsken { filter: blur(22px); }
.nsk { fill: url(#g-nsk); opacity: .75; }
.nsk1 { fill: url(#g-nsk2); }
[data-theme="light"] .nsk { opacity: .35; }

/* ---- rörelsen ---- */
.kor { animation: kor var(--d) linear var(--dl, 0s) infinite; }
.kor.fram { animation-direction: alternate; animation-timing-function: ease-in-out; }
@keyframes kor { from { transform: translate(var(--x0), var(--y0)); } to { transform: translate(var(--x1), var(--y1)); } }
.rot { transform-origin: 0 0; animation: snurr var(--d, 1s) linear infinite; }
@keyframes snurr { to { transform: rotate(360deg); } }
.rotor { transform-origin: 0 0; animation: rotor .16s linear infinite alternate; }
@keyframes rotor { to { transform: scaleX(.12); } }
.gunga { transform-box: fill-box; transform-origin: 50% 100%; animation: gunga 4.2s ease-in-out var(--dl, 0s) infinite alternate; }
@keyframes gunga { from { transform: rotate(-2.2deg); } to { transform: rotate(2.2deg) translateY(-3px); } }
.svava { animation: svava 6s ease-in-out var(--dl, 0s) infinite alternate; }
@keyframes svava { to { transform: translateY(-10px); } }
.ben { transform-origin: 0 0; animation: ben .9s ease-in-out infinite alternate; }
.ben2 { animation-delay: -.9s; }
@keyframes ben { from { transform: rotate(-22deg); } to { transform: rotate(22deg); } }
.paddel { transform-origin: 0 0; animation: paddel 2.4s ease-in-out infinite alternate; }
@keyframes paddel { from { transform: rotate(-24deg); } to { transform: rotate(18deg); } }
.blink { animation: blink 1.8s steps(1, end) var(--dl, 0s) infinite; }
@keyframes blink { 0% { opacity: 1; } 50% { opacity: .08; } }
.f.av { animation: lyse 40s linear var(--dl, 0s) infinite both; }
@keyframes lyse { 0%, 43% { opacity: 0; } 52%, 89% { opacity: 1; } 100% { opacity: 0; } }
.stj1 { animation: glimt 6.7s ease-in-out infinite; }
.stj2 { animation: glimt 8.4s ease-in-out -3s infinite; }
@keyframes glimt { 50% { opacity: .25; } }
.vag { animation: vag 5s ease-in-out var(--dl, 0s) infinite alternate; }
@keyframes vag { from { transform: translateX(0); opacity: .35; } to { transform: translateX(16px); opacity: 1; } }
.rok { transform-box: fill-box; transform-origin: center; fill: var(--svag); stroke: none; animation: rok 6s ease-out var(--dl, 0s) infinite; }
@keyframes rok { from { transform: translate(0, 0) scale(.4); opacity: .8; } to { transform: translate(-40px, -70px) scale(2.2); opacity: 0; } }
.bana { animation: bana 2.6s linear var(--dl, 0s) infinite; }
@keyframes bana { 0%, 6% { opacity: 1; } 18%, 100% { opacity: .15; } }
.fyr { transform-origin: 0 0; animation: fyr 7s linear infinite; }
@keyframes fyr { 0% { transform: scaleX(1); opacity: 1; } 25% { transform: scaleX(0); opacity: .2; } 50% { transform: scaleX(-1); opacity: 1; } 75% { transform: scaleX(0); opacity: .2; } 100% { transform: scaleX(1); opacity: 1; } }
.nsk { animation: nsk 16s ease-in-out var(--dl, 0s) infinite alternate; }
@keyframes nsk { from { transform: translateX(-80px) scaleY(.85); } to { transform: translateX(60px) scaleY(1.15); } }
.pendel { animation: pendel 26s var(--dl, 0s) infinite; }
@keyframes pendel {
  0% { transform: translateX(-1500px); animation-timing-function: cubic-bezier(.2,.7,.35,1); }
  38%, 62% { transform: translateX(240px); animation-timing-function: cubic-bezier(.6,0,.9,.5); }
  100% { transform: translateX(1900px); }
}
.nal { transform-box: fill-box; transform-origin: 50% 100%; animation: nal 2.2s ease-in-out infinite alternate; }
@keyframes nal { to { transform: translateY(-10px); } }
.regn { stroke: var(--svag); stroke-width: 1; }
.radar { animation: radar 9s ease-in-out infinite alternate; }
@keyframes radar { from { transform: scaleX(1); } to { transform: scaleX(-1); } }
.flamma { transform-box: fill-box; transform-origin: 50% 0; animation: flamma .12s linear infinite alternate; }
@keyframes flamma { to { transform: scaleY(.6); } }
.uppskjut { animation: uppskjut 24s infinite; }
@keyframes uppskjut { 0%, 30% { transform: translateY(0); animation-timing-function: cubic-bezier(.5,0,1,.7); } 100% { transform: translateY(-1600px); } }
.landa { animation: landa 30s infinite; }
@keyframes landa {
  0% { transform: translate(-300px, 380px) rotate(5deg); animation-timing-function: cubic-bezier(.3,.3,.5,1); }
  55% { transform: translate(820px, 806px) rotate(0deg); animation-timing-function: cubic-bezier(.2,.6,.5,1); }
  90% { transform: translate(1180px, 806px); opacity: 1; }
  100% { transform: translate(1190px, 806px); opacity: 0; }
}
/* Vandringen: lagren delar längd med tonen, så klippet vid varvet döljs av en kort nedtoning. */
.film-tona { animation: tona var(--d) linear infinite; }
@keyframes tona { 0% { opacity: 0; } 2%, 97% { opacity: 1; } 100% { opacity: 0; } }
.film-norr { opacity: 0; animation: norrfilm var(--d) linear infinite; }
@keyframes norrfilm { 0%, 72% { opacity: 0; } 84%, 96% { opacity: 1; } 100% { opacity: 0; } }
/* Terrängens nyanser: blandade mot --bg så de följer båda temana. */
.land.dis { fill: color-mix(in srgb, #6d9ad6 12%, var(--bg)); }
.land.fjall { fill: color-mix(in srgb, #6d9ad6 16%, color-mix(in srgb, var(--linje) 4%, var(--bg))); }
.ang { fill: color-mix(in srgb, var(--gron) 16%, var(--bg)); }
.mossa { fill: color-mix(in srgb, var(--gron) 24%, color-mix(in srgb, var(--linje) 8%, var(--bg))); }
.akr { fill: color-mix(in srgb, var(--amber) 16%, color-mix(in srgb, #e6c34a 12%, var(--bg))); }
.akr2 { fill: color-mix(in srgb, #e6c34a 26%, var(--bg)); }
.hed { fill: color-mix(in srgb, var(--gron) 12%, color-mix(in srgb, var(--amber) 10%, color-mix(in srgb, var(--linje) 6%, var(--bg)))); }
.sjo { fill: color-mix(in srgb, #6d9ad6 22%, var(--bg)); }
.ton-gran .t { fill: color-mix(in srgb, var(--gron) 26%, color-mix(in srgb, var(--linje) 10%, var(--bg))); }
.ton-lov .t { fill: color-mix(in srgb, var(--gron) 34%, var(--bg)); }
.ton-bjork .t { fill: color-mix(in srgb, #e6c34a 20%, color-mix(in srgb, var(--gron) 14%, var(--bg))); }
.l.stra { stroke: color-mix(in srgb, var(--amber) 55%, var(--linje)); }
.blomma { stroke: none; }
/* Vind i säd, gräs och trädkronor; fåglar som flaxar. */
.vind { transform-box: fill-box; transform-origin: 50% 100%; animation: vind 3.4s ease-in-out var(--dl, 0s) infinite alternate; }
@keyframes vind { from { transform: skewX(-4deg); } to { transform: skewX(7deg); } }
.flax { transform-box: fill-box; transform-origin: 50% 100%; animation: flax var(--fl, .4s) ease-in-out var(--dl, 0s) infinite alternate; }
@keyframes flax { to { transform: scaleY(-.5); } }
/* Vandringen som film: varje lager är en egen <svg> i en egen div, så resan, zoomen och höjden flyttas av
   GPU:n i stället för att hela scenen målas om varje bildruta. --s = scenens skala (satt av skala() i motiv.js). */
.har-film { --s: 1;
  --f-bg: var(--bg); --f-ang: color-mix(in srgb, var(--gron) 16%, var(--bg)); --f-mossa: color-mix(in srgb, var(--gron) 24%, color-mix(in srgb, var(--linje) 8%, var(--bg)));
  --f-akr: color-mix(in srgb, var(--amber) 16%, color-mix(in srgb, #e6c34a 12%, var(--bg))); --f-akr2: color-mix(in srgb, #e6c34a 26%, var(--bg));
  --f-hed: color-mix(in srgb, var(--gron) 12%, color-mix(in srgb, var(--amber) 10%, color-mix(in srgb, var(--linje) 6%, var(--bg)))); --f-sjo: color-mix(in srgb, #6d9ad6 22%, var(--bg)); }
.film-norr, .film-tona, .kamera, .hojd { position: absolute; inset: 0; pointer-events: none; }
.film-norr svg { width: 100%; height: 100%; display: block; }
.lag {
  position: absolute; bottom: calc(-100px * var(--s)); left: calc(50% - 1100px * var(--s));
  width: calc(var(--lw) * 1px * var(--s)); height: calc(1000px * var(--s)); overflow: visible;
  will-change: transform; animation: resa var(--d) linear infinite;
}
@keyframes resa { to { transform: translateX(calc(var(--rx) * var(--s))); } }
/* Kameran: en åkning i tagningar. Zoom kring marken i mitten, höjden ger parallax (--k per lager: fjärran rör sig minst).
   Varje tagning mjukstartar och mjuklandar; 0 % och 100 % är samma bild så varvet syns inte. */
.kamera { transform-origin: 50% 84%; will-change: transform; animation: kamera var(--d) cubic-bezier(.45, 0, .55, 1) infinite; }
@keyframes kamera {
  0%, 4% { transform: scale(1.1); }   /* lågt i stan */
  14% { transform: scale(1); }        /* kranen lyfter */
  28% { transform: scale(.86); }      /* vidvinkel över fälten */
  40% { transform: scale(.95); }
  52% { transform: scale(1.08); }     /* nere i skogen */
  63% { transform: scale(.92); }
  76% { transform: scale(.8); }       /* högt över sjön */
  90% { transform: scale(.88); }      /* fjället */
  100% { transform: scale(1.1); }
}
.hojd { will-change: transform; animation: hojd var(--d) cubic-bezier(.45, 0, .55, 1) infinite; }
@keyframes hojd {
  0%, 4% { transform: translateY(calc(-30px * var(--k) * var(--s))); }
  14% { transform: translateY(calc(20px * var(--k) * var(--s))); }
  28% { transform: translateY(calc(55px * var(--k) * var(--s))); }
  40% { transform: translateY(calc(10px * var(--k) * var(--s))); }
  52% { transform: translateY(calc(-28px * var(--k) * var(--s))); }
  63% { transform: translateY(calc(30px * var(--k) * var(--s))); }
  76% { transform: translateY(calc(60px * var(--k) * var(--s))); }
  90% { transform: translateY(calc(40px * var(--k) * var(--s))); }
  100% { transform: translateY(calc(-30px * var(--k) * var(--s))); }
}
/* Två andra kameraåkningar: kam-b börjar högt och dyker, kam-c är lugn. */
.kam-b .kamera { animation-name: kamera-b; } .kam-b .hojd { animation-name: hojd-b; }
.kam-c .kamera { animation-name: kamera-c; } .kam-c .hojd { animation-name: hojd-c; }
@keyframes kamera-b { 0%, 100% { transform: scale(.82); } 18% { transform: scale(1); } 34% { transform: scale(1.12); } 50% { transform: scale(.9); } 66% { transform: scale(1.04); } 82% { transform: scale(.84); } }
@keyframes hojd-b {
  0%, 100% { transform: translateY(calc(60px * var(--k) * var(--s))); } 18% { transform: translateY(0); }
  34% { transform: translateY(calc(-30px * var(--k) * var(--s))); } 50% { transform: translateY(calc(40px * var(--k) * var(--s))); }
  66% { transform: translateY(calc(-10px * var(--k) * var(--s))); } 82% { transform: translateY(calc(55px * var(--k) * var(--s))); }
}
@keyframes kamera-c { 0%, 100% { transform: scale(1); } 25% { transform: scale(.94); } 50% { transform: scale(1.04); } 75% { transform: scale(.9); } }
@keyframes hojd-c {
  0%, 100% { transform: translateY(0); } 25% { transform: translateY(calc(20px * var(--k) * var(--s))); }
  50% { transform: translateY(calc(-15px * var(--k) * var(--s))); } 75% { transform: translateY(calc(30px * var(--k) * var(--s))); }
}

/* Målade vandringar (malad() i motiv.js): startsidans stil, en palett per film. --p-dis = luftens färg som avlägsna lager tonas mot. */
.pv-sommar { --p-h1: #6fa8dc; --p-h2: #cfe6f2; --p-h3: #fbeed3; --p-sken: rgba(255,244,205,.8); --p-sol: #fff6d8; --p-moln: rgba(255,255,255,.9); --p-dis: #d6e8f1;
  --p-fjall: #93afc4; --p-sno: #f4f8fb; --p-skog: #2f5a40; --p-lov: #4f8a3c; --p-bjork: #f1efe8; --p-stam: #5a4636; --p-ang: #7fb24f; --p-mossa: #4f7f45;
  --p-akr: #e8c84a; --p-hed: #a7a36a; --p-sjo: #5f9fcf; --p-hus: #b0432f; --p-tak: #3a2f2c; --p-fonster: #fffaf0; --p-blom: #fff4c9; --p-fg: #1f3a2a; }
.pv-kvall { --p-h1: #3b3f7a; --p-h2: #e0788a; --p-h3: #ffc27a; --p-sken: rgba(255,190,120,.75); --p-sol: #ffe3a8; --p-moln: rgba(255,190,175,.7); --p-dis: #f0a58f;
  --p-fjall: #7d5f8f; --p-sno: #ffd9cf; --p-skog: #3a3350; --p-lov: #6f6a3a; --p-bjork: #f3d6c6; --p-stam: #3a2a2e; --p-ang: #9c8a4a; --p-mossa: #5f5a45;
  --p-akr: #e0a24a; --p-hed: #9a6f6a; --p-sjo: #f0a08a; --p-hus: #9c3a34; --p-tak: #2c2230; --p-fonster: #ffe08a; --p-blom: #ffd0a0; --p-fg: #2a1f2e; }
.pv-host { --p-h1: #8fb3cf; --p-h2: #e8e2d2; --p-h3: #f6d9a8; --p-sken: rgba(255,230,180,.7); --p-sol: #fff0cc; --p-moln: rgba(255,255,255,.8); --p-dis: #e6ddd0;
  --p-fjall: #9aa6b0; --p-sno: #f4f4f2; --p-skog: #34503e; --p-lov: #d9772e; --p-bjork: #f0ece2; --p-stam: #4e3a2e; --p-ang: #b5a14a; --p-mossa: #7a6a3a;
  --p-akr: #c9a05a; --p-hed: #a68a58; --p-sjo: #7aa3bf; --p-hus: #a8412f; --p-tak: #3a2f2c; --p-fonster: #fffaf0; --p-blom: #ffd24a; --p-fg: #3a2418; }
.pv-vinter { --p-h1: #8aa6cf; --p-h2: #f2d8e0; --p-h3: #ffe6cf; --p-sken: rgba(255,220,200,.7); --p-sol: #fff1e0; --p-moln: rgba(255,255,255,.8); --p-dis: #e8e8f2;
  --p-fjall: #b0bdd8; --p-sno: #ffffff; --p-skog: #3f5a5e; --p-lov: #cfd8e0; --p-bjork: #f4f4f4; --p-stam: #5a4a48; --p-ang: #f1f4fa; --p-mossa: #dce4ee;
  --p-akr: #eceff6; --p-hed: #e2e5ef; --p-sjo: #c2d8ea; --p-hus: #b54a3a; --p-tak: #f7f8fb; --p-fonster: #ffd98a; --p-blom: #ffffff; --p-fg: #2e3d4a; }
.pv-natt { --p-h1: #050b1c; --p-h2: #12284a; --p-h3: #24466a; --p-sken: rgba(200,220,255,.25); --p-sol: #eef3ff; --p-moln: rgba(160,180,220,.16); --p-dis: #1a3050;
  --p-fjall: #2a4064; --p-sno: #9fb4d4; --p-skog: #0d1f26; --p-lov: #15302a; --p-bjork: #8a9ab0; --p-stam: #0f1a1f; --p-ang: #17322d; --p-mossa: #12261f;
  --p-akr: #2a3a36; --p-hed: #22303a; --p-sjo: #1e3d64; --p-hus: #6a2a28; --p-tak: #0c1016; --p-fonster: #ffd27a; --p-blom: #c9d6f0; --p-fg: #04080e; }
/* Lugna resan: sidfotens färger. Mörkt = sidfotens skymning (indigo, violett, rosa), ljust = dess gyllene eftermiddag; kullarna i sidfotens två gröna. */
.pv-fot { --p-h1: #1c1f4a; --p-h2: #5b3f78; --p-h3: #c07a7a; --p-sken: rgba(255,170,150,.45); --p-sol: #ffd2b0; --p-moln: rgba(220,170,190,.35); --p-dis: #6a4f7a;
  --p-fjall: #4a4470; --p-sno: #c9b8d8; --p-skog: #0f2626; --p-lov: #24453a; --p-bjork: #b8a8b8; --p-stam: #1a1418; --p-ang: #2f4a3a; --p-mossa: #1f3a32;
  --p-akr: #6a5a48; --p-hed: #4a4450; --p-sjo: #4a4a7a; --p-hus: #6a2e34; --p-tak: #141018; --p-fonster: #ffd27a; --p-blom: #e0c0d0; --p-fg: #0a1417; }
[data-theme="light"] .pv-fot { --p-h1: #8cc4e8; --p-h2: #ffe4b0; --p-h3: #ffc890; --p-sken: rgba(255,214,150,.75); --p-sol: #fff1d0; --p-moln: rgba(255,250,240,.85); --p-dis: #f3dcc0;
  --p-fjall: #a7a9b8; --p-sno: #fbf6ee; --p-skog: #24453a; --p-lov: #5f8a48; --p-bjork: #f1ebe0; --p-stam: #4e3c30; --p-ang: #6f9a5a; --p-mossa: #4f7a48;
  --p-akr: #e0b85a; --p-hed: #a39a62; --p-sjo: #6fa8cf; --p-hus: #b0432f; --p-tak: #3a2f2c; --p-fonster: #fffaf0; --p-blom: #ffe9b0; --p-fg: #16302a; }
/* kam-d (Lugna resan): fler sorters rörelser än zoom och höjd. Sidled (--x) panorerar, lutningen (--r) tiltar, skalan dollyar.
   Tagningarna: stilla öppning, dolly in, kran upp till vidvinkel, panorering vänster, lågt över marken, lutning in i kurvan,
   högt översiktsläge, dyk, sidled höger, lugn mitt, nära igen, lyft, sista panorering och tillbaka till öppningen. */
.kam-d .kamera { animation-name: kamera-d; } .kam-d .hojd { animation-name: hojd-d; }
/* Lugna resan: inga djur i fjärran, stilla gräs, rök och vågor; kvar är färden, kameran, moln och ekorrarna i stammarna */
.pv-lugn .fjarr-d { display: none; }
.pv-lugn .svaj, .pv-lugn .vind, .pv-lugn .gunga, .pv-lugn .svava, .pv-lugn .vag, .pv-lugn .rok, .pv-lugn .blink { animation: none; }
@keyframes kamera-d {
  0%, 3% { transform: translateX(0) rotate(0) scale(1); }
  9% { transform: translateX(calc(-40px * var(--s))) rotate(0) scale(1.1); }
  16% { transform: translateX(calc(30px * var(--s))) rotate(-.4deg) scale(.86); }
  23% { transform: translateX(calc(120px * var(--s))) rotate(0) scale(.92); }
  30% { transform: translateX(calc(60px * var(--s))) rotate(.5deg) scale(1.16); }
  37% { transform: translateX(calc(-30px * var(--s))) rotate(.9deg) scale(1.06); }
  45% { transform: translateX(0) rotate(0) scale(.8); }
  52% { transform: translateX(calc(-80px * var(--s))) rotate(-.6deg) scale(1.08); }
  60% { transform: translateX(calc(-140px * var(--s))) rotate(0) scale(.94); }
  67% { transform: translateX(calc(-60px * var(--s))) rotate(.3deg) scale(1); }
  75% { transform: translateX(calc(20px * var(--s))) rotate(-.3deg) scale(1.14); }
  83% { transform: translateX(calc(90px * var(--s))) rotate(0) scale(.84); }
  91% { transform: translateX(calc(40px * var(--s))) rotate(.4deg) scale(.96); }
  100% { transform: translateX(0) rotate(0) scale(1); }
}
@keyframes hojd-d {
  0%, 3% { transform: translateY(0); }
  9% { transform: translateY(calc(-20px * var(--k) * var(--s))); }
  16% { transform: translateY(calc(55px * var(--k) * var(--s))); }
  23% { transform: translateY(calc(30px * var(--k) * var(--s))); }
  30% { transform: translateY(calc(-40px * var(--k) * var(--s))); }
  37% { transform: translateY(calc(-15px * var(--k) * var(--s))); }
  45% { transform: translateY(calc(65px * var(--k) * var(--s))); }
  52% { transform: translateY(calc(-25px * var(--k) * var(--s))); }
  60% { transform: translateY(calc(15px * var(--k) * var(--s))); }
  67% { transform: translateY(0); }
  75% { transform: translateY(calc(-35px * var(--k) * var(--s))); }
  83% { transform: translateY(calc(50px * var(--k) * var(--s))); }
  91% { transform: translateY(calc(20px * var(--k) * var(--s))); }
  100% { transform: translateY(0); }
}
.pv::after { display: none; }
.pv { --p-kaj: #b8b8ae; --p-klipp: #b8998a; --p-kran: #d8683c; --p-stad: #e9dcc4; --p-stad2: #c9a88a; }
/* Hamnkranens hiss, båtarnas gupp och vindkraftverken. */
/* Löpkatten: ut på bommen, ner, upp, in mellan benen, ner, upp, tillbaka (vagn i sidled, lyft och kabel i höjd). */
.vagn { animation: vagn 16s ease-in-out var(--dl) infinite; }
@keyframes vagn { 0%, 28%, 90%, 100% { transform: translateX(0); } 46%, 70% { transform: translateX(calc(1px * var(--sx))); } }
.lyft { animation: lyft 16s ease-in-out var(--dl) infinite; }
@keyframes lyft { 0%, 6%, 26%, 48%, 68%, 100% { transform: translateY(calc(-1px * var(--h))); } 14%, 18%, 56%, 60% { transform: translateY(0); } }
.kabel { transform-box: fill-box; transform-origin: 50% 0; animation: kabel 16s ease-in-out var(--dl) infinite; }
@keyframes kabel { 0%, 6%, 26%, 48%, 68%, 100% { transform: scaleY(var(--kq)); } 14%, 18%, 56%, 60% { transform: scaleY(1); } }
.gunga { animation: gunga 3.4s ease-in-out var(--dl) infinite alternate; }
@keyframes gunga { to { transform: translateY(-3px); } }
.pv-norr, .pv-sno, .film-skym { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.pv-norr svg { width: 100%; height: 100%; display: block; }
.pv-sno svg { position: absolute; left: 0; top: -100%; width: 100%; height: 200%; fill: #fff; opacity: .85; will-change: transform; animation: sno 16s linear infinite; }
@keyframes sno { to { transform: translateY(50%); } }
/* Mörkt tema: dagfilmerna skymmer (multiply med nattblått), nattfilmen står som den är. */
.film-skym { background: linear-gradient(180deg, rgba(20,32,70,.9), rgba(40,52,90,.55) 60%, rgba(30,40,70,.6)); mix-blend-mode: multiply; }
[data-theme="light"] .film-skym { display: none; }
/* Ljuslagret (fönster, lampor, fyren, masternas lampor) ligger ovanför skymningen; i ljust tema syns det bara på natten. */
[data-theme="light"] .pv:not(.pv-natt) .film-lys { display: none; }
/* Ljusstapeln bär markens svarta siluetter framför ljusen; screen gör svart osynligt, så bara ljusen syns och en kulle framför släcker dem. */
.film-lys { mix-blend-mode: screen; }
.film-lys .sil, .film-lys .sil * { fill: #000 !important; }
.film-lys .fyrsken { animation: fyrsken 5s ease-in-out infinite; }
@keyframes fyrsken { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }
/* Vinden: kronor och tuvor vaggar, strimmor drar förbi. */
.svaj { transform-box: view-box; animation: svaj 3.2s ease-in-out var(--dl, 0s) infinite alternate; }
@keyframes svaj { from { transform: rotate(-3deg); } to { transform: rotate(4.5deg); } }
.svaj.stra { animation-name: stra; animation-duration: 2.4s; }
@keyframes stra { from { transform: skewX(-7deg); } to { transform: skewX(11deg); } }
/* Förgrundens stora träd svajar lugnare; fabriksskorstenens rök stiger och vidgas. */
.svaj.lugn { animation-name: lugn; animation-duration: 5.5s; }
@keyframes lugn { from { transform: rotate(-.8deg); } to { transform: rotate(1.2deg); } }
.rok { transform-box: fill-box; transform-origin: 50% 50%; opacity: 0; animation: rok 7.2s linear var(--dl, 0s) infinite; }
@keyframes rok { 0% { transform: translate(0, 0) scale(.5); opacity: 0; } 12% { opacity: .75; } 100% { transform: translate(70px, -150px) scale(2.6); opacity: 0; } }
/* Sverigeresan är en loop: sista bilden är den första, så ingen toning vid varvet. */
.pv-loop .film-tona { animation: none; }
/* Vindstrimmorna: en kort bit linje löper längs en slingrande bana (ibland en ögla) medan hela banan driver med vinden. */
.pv-vind { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.pv-vind svg { position: absolute; overflow: visible; animation: vinddrift var(--vd) linear var(--dl) infinite; }
.pv-vind path { fill: none; stroke: #fff; stroke-width: 2.2; stroke-linecap: round; stroke-dasharray: 24 200; opacity: 0; animation: vindstrak var(--vd) ease-in-out var(--dl) infinite; }
@keyframes vinddrift { from { transform: translateX(-6vw); } to { transform: translateX(22vw); } }
@keyframes vindstrak { 0% { stroke-dashoffset: 24; opacity: 0; } 12% { opacity: .55; } 55% { opacity: .45; } 70%, 100% { stroke-dashoffset: -100; opacity: 0; } }
/* Traktorn plöjer fram och tillbaka (vänder med en kort sväng); tåget glider över bron. */
.plog { animation: plog var(--pd, 80s) linear var(--dl) infinite; }
@keyframes plog {
  0% { transform: translate(var(--x0), var(--y0)); } 47% { transform: translate(var(--x1), var(--y1)); }
  50% { transform: translate(var(--x1), var(--y1)) scaleX(-1); } 97% { transform: translate(var(--x0), var(--y0)) scaleX(-1); }
  100% { transform: translate(var(--x0), var(--y0)) scaleX(1); }
}
/* Ekorren på förgrundsträdets stam: klättrar upp i ryck, sitter en stund, vänder och springer ner med huvudet först. */
.klattra { animation: klattra 26s ease-in-out var(--dl) infinite; }
@keyframes klattra {
  0%, 6% { transform: translateY(var(--y0)) rotate(-90deg) scaleY(1); }
  12%, 15% { transform: translateY(calc(var(--y0) + (var(--y1) - var(--y0)) * .35)) rotate(-90deg) scaleY(1); }
  21%, 24% { transform: translateY(calc(var(--y0) + (var(--y1) - var(--y0)) * .7)) rotate(-90deg) scaleY(1); }
  29%, 56% { transform: translateY(var(--y1)) rotate(-90deg) scaleY(1); }
  58% { transform: translateY(var(--y1)) rotate(90deg) scaleY(-1); }
  72%, 75% { transform: translateY(calc(var(--y0) + (var(--y1) - var(--y0)) * .4)) rotate(90deg) scaleY(-1); }
  84% { transform: translateY(var(--y0)) rotate(90deg) scaleY(-1); }
  86%, 100% { transform: translateY(var(--y0)) rotate(-90deg) scaleY(1); }
}
.tagfard { animation: tagfard var(--td) linear var(--dl) infinite; }
@keyframes tagfard { from { transform: translateX(0); } to { transform: translateX(var(--tl)); } }

/* Scener utanför bild tas ur ritningen helt: content-visibility räckte inte, de 5 000 pausade animationerna
   och 37 000 elementen kostade ändå (Sverigeresan 56 → 99 bps i Chrome). Loopen börjar om när scenen kommer tillbaka. */
.motiv.vilar > * { display: none; }
.motiv.vilar *,.paus .motiv *,.motiv .ute,.motiv .ute * { animation-play-state: paused !important; }
.motiv.vilar,.paus .motiv,.motiv .ute { --spel: paused; } /* djur/fordon/växter: pausen når in i <use>-kopiorna bara som ärvd variabel */
/* En lagerbit utanför bild ritas inte alls: Chrome målar och lagerbygger annars hela det animerade lagret varje bildruta. */
div.lag > svg.ute { visibility: hidden; }
/* Telefon: färre rörliga SVG-barn (de målas om på huvudtråden varje bildruta). Gräset står still och vinden tas bort;
   fåglar, tåg, bilar och linbana rör sig kvar. Stilla strån rastreras dessutom in i canvasen av stelna(). */
@media (max-width: 767px) {
  .svaj.stra { animation: none; }
  .pv-vind { display: none; }
}
@media (prefers-reduced-motion: reduce) { .motiv { --spel: paused; } .motiv * { animation-play-state: paused !important; } }

/* Footern: sidfotens kullar (sida.css --sd-fot/--sd-fot-bak) står still, djuren har sina färger ur djur.css (blandade mot bakgrunden). */
:is(#m-footern, [id^="m-footern-"], [id^="m-backen-"], [id^="m-stugan-"], [id^="m-glantan-"], [id^="m-havet-"], [id^="m-fjallen-"], [id^="m-skargarden-"], [id^="m-skogen-"], [id^="m-sjon-"], [id^="m-angen-"], [id^="m-gard-"], [id^="m-industri-"], [id^="m-staden-"], [id^="m-kusten-"], [id^="m-hamnen-"], [id^="m-byn-"]) { --ft-bak: #132a2a; --ft-fram: #0a1417; --dm: 78%; }
[data-theme="light"] :is(#m-footern, [id^="m-footern-"], [id^="m-backen-"], [id^="m-stugan-"], [id^="m-glantan-"], [id^="m-havet-"], [id^="m-fjallen-"], [id^="m-skargarden-"], [id^="m-skogen-"], [id^="m-sjon-"], [id^="m-angen-"], [id^="m-gard-"], [id^="m-industri-"], [id^="m-staden-"], [id^="m-kusten-"], [id^="m-hamnen-"], [id^="m-byn-"]) { --ft-bak: #6f9a5a; --ft-fram: #24453a; --dm: 96%; }
:is(#m-footern, [id^="m-footern-"], [id^="m-backen-"], [id^="m-stugan-"], [id^="m-glantan-"], [id^="m-havet-"], [id^="m-fjallen-"], [id^="m-skargarden-"], [id^="m-skogen-"], [id^="m-sjon-"], [id^="m-angen-"], [id^="m-gard-"], [id^="m-industri-"], [id^="m-staden-"], [id^="m-kusten-"], [id^="m-hamnen-"], [id^="m-byn-"])::after { content: none; }
.ft-h1 { stop-color: color-mix(in oklab, var(--ft-h1, #2a4a6e) 45%, var(--bg)); } .ft-h2 { stop-color: color-mix(in oklab, var(--ft-h2, #3a5a6a) 12%, var(--bg)); }
[data-theme="light"] :is(#m-footern, [id^="m-footern-"], [id^="m-backen-"], [id^="m-stugan-"], [id^="m-glantan-"], [id^="m-havet-"], [id^="m-fjallen-"], [id^="m-skargarden-"], [id^="m-skogen-"], [id^="m-sjon-"], [id^="m-angen-"], [id^="m-gard-"], [id^="m-industri-"], [id^="m-staden-"], [id^="m-kusten-"], [id^="m-hamnen-"], [id^="m-byn-"]) .ft-h1 { stop-color: color-mix(in oklab, var(--ft-lh1, #9cc8e6) 70%, var(--bg)); } [data-theme="light"] :is(#m-footern, [id^="m-footern-"], [id^="m-backen-"], [id^="m-stugan-"], [id^="m-glantan-"], [id^="m-havet-"], [id^="m-fjallen-"], [id^="m-skargarden-"], [id^="m-skogen-"], [id^="m-sjon-"], [id^="m-angen-"], [id^="m-gard-"], [id^="m-industri-"], [id^="m-staden-"], [id^="m-kusten-"], [id^="m-hamnen-"], [id^="m-byn-"]) .ft-h2 { stop-color: color-mix(in oklab, var(--ft-lh2, #f3dcc0) 35%, var(--bg)); } .ft-bak { fill: var(--ft-bak); } .ft-fram { fill: var(--ft-fram); }
.ft-gran { fill: color-mix(in oklab, var(--ft-gran, #2f5a40) var(--dm), var(--bg)); } .ft-gran2 { fill: color-mix(in oklab, var(--ft-gran2, #3f6e4c) var(--dm), var(--bg)); }
.ft-lov { fill: color-mix(in oklab, var(--ft-lov, #4f8a3c) var(--dm), var(--bg)); } .ft-lov2 { fill: color-mix(in oklab, var(--ft-lov2, #64a04a) var(--dm), var(--bg)); }
.ft-stam { fill: color-mix(in oklab, #5a4636 var(--dm), var(--bg)); }
.ft-lov3 { fill: color-mix(in oklab, var(--ft-lov3, #72ad52) var(--dm), var(--bg)); } .ft-lov0 { fill: color-mix(in oklab, var(--ft-lov0, #3c6e30) var(--dm), var(--bg)); }
.ft-gren { fill: none; stroke: color-mix(in oklab, #5a4636 var(--dm), var(--bg)); stroke-linecap: round; }
.ft-bark { fill: none; stroke: color-mix(in oklab, #3e3027 var(--dm), var(--bg)); stroke-width: 1.3; stroke-linecap: round; }
.ft-bakom { --dm: 62%; } [data-theme="light"] :is(#m-footern, [id^="m-footern-"], [id^="m-backen-"], [id^="m-stugan-"], [id^="m-glantan-"], [id^="m-havet-"], [id^="m-fjallen-"], [id^="m-skargarden-"], [id^="m-skogen-"], [id^="m-sjon-"], [id^="m-angen-"], [id^="m-gard-"], [id^="m-industri-"], [id^="m-staden-"], [id^="m-kusten-"], [id^="m-hamnen-"], [id^="m-byn-"]) .ft-bakom { --dm: 82%; }
.ft-framfor { --dm: 90%; } [data-theme="light"] :is(#m-footern, [id^="m-footern-"], [id^="m-backen-"], [id^="m-stugan-"], [id^="m-glantan-"], [id^="m-havet-"], [id^="m-fjallen-"], [id^="m-skargarden-"], [id^="m-skogen-"], [id^="m-sjon-"], [id^="m-angen-"], [id^="m-gard-"], [id^="m-industri-"], [id^="m-staden-"], [id^="m-kusten-"], [id^="m-hamnen-"], [id^="m-byn-"]) .ft-framfor { --dm: 100%; }
.ft-djur { --p-dis: var(--bg); --p-fg: #1d1a17; }
/* Vinden: träden lutar fram och tillbaka runt foten, var och en med egen takt (--vt) och fas (--vd). */
.ft-vaj { animation: ft-vaj var(--vt, 4s) ease-in-out var(--vd, 0s) infinite alternate; }
@keyframes ft-vaj { 0% { transform: rotate(-1deg); } 60% { transform: rotate(1.8deg); } 75% { transform: rotate(1.3deg); } 100% { transform: rotate(2.2deg); } }

/* Eldflugor i mörkt läge: varje prick driver (--ed) och glöder upp och slocknar (--eb) i egen takt. */
.ft-eld circle { fill: #fff2a0; filter: drop-shadow(0 0 3px #ffe066) drop-shadow(0 0 7px rgba(255, 214, 90, .6)); }
.ft-eld > g { opacity: 0; animation: ft-eld-dr var(--ed) ease-in-out var(--ef) infinite alternate, ft-eld-gl var(--eb) ease-in-out var(--ef) infinite; }
[data-theme="light"] .ft-eld { display: none; }
@keyframes ft-eld-dr { to { transform: translate(var(--ex), var(--ey)); } }
@keyframes ft-eld-gl { 0%, 100% { opacity: 0; } 45%, 60% { opacity: .95; } }
@media (prefers-reduced-motion: reduce) { .ft-eld > g { animation: none; opacity: .6; } }

/* ?prov=stilla (motiv.js PROV): gräs och blommor står still, så stelna() ritar in dem i canvasen. */
.prov-stilla .svaj, .prov-stilla .v-vaj { animation: none !important; }
/* ?prov=klump: en grupp per marknivå skjuvas i stället för att roteras (rotation kring EN punkt skulle lyfta träden i ändarna). */
.svaj.svajgrupp { animation-name: svajs; }
@keyframes svajs { from { transform: skewX(-3deg); } to { transform: skewX(4.5deg); } }
.svaj.svajgrupp.lugn { animation-name: lugns; }
@keyframes lugns { from { transform: skewX(-.8deg); } to { transform: skewX(1.2deg); } }
.svaj.svajgrupp.stra { animation-name: stra; }
.v-vaj.svajgrupp { animation: v-vajs 2.2s ease-in-out var(--dl, 0s) infinite alternate; }
@keyframes v-vajs { from { transform: skewX(-4deg); } to { transform: skewX(4deg); } }

/* Footerns årstider (footern-var/-sommar/-host/-vinter i motiv.js): samma scen, egna färger. --ft-h* = himlen mörkt, --ft-lh* = ljust. */
:is(#m-footern-var, #m-backen-var, #m-stugan-var, #m-glantan-var, #m-havet-var, #m-fjallen-var, #m-skargarden-var, #m-skogen-var, #m-sjon-var, #m-angen-var, #m-gard-var, #m-industri-var, #m-staden-var, #m-kusten-var, #m-hamnen-var, #m-byn-var) { --ft-lov: #7cbf4e; --ft-lov2: #9bd466; --ft-lov3: #b8e486; --ft-lov0: #5fa03c; --ft-gran: #36664a; --ft-gran2: #4a7c58; --ft-bak: #1a3a2c; --ft-h1: #3a5a8a; --ft-lh1: #a8d4f0; --ft-lh2: #f0f4dc; }
[data-theme="light"] :is(#m-footern-var, #m-backen-var, #m-stugan-var, #m-glantan-var, #m-havet-var, #m-fjallen-var, #m-skargarden-var, #m-skogen-var, #m-sjon-var, #m-angen-var, #m-gard-var, #m-industri-var, #m-staden-var, #m-kusten-var, #m-hamnen-var, #m-byn-var) { --ft-bak: #8cbf64; --ft-fram: #3a6a44; }
:is(#m-footern-sommar, #m-backen-sommar, #m-stugan-sommar, #m-glantan-sommar, #m-havet-sommar, #m-fjallen-sommar, #m-skargarden-sommar, #m-skogen-sommar, #m-sjon-sommar, #m-angen-sommar, #m-gard-sommar, #m-industri-sommar, #m-staden-sommar, #m-kusten-sommar, #m-hamnen-sommar, #m-byn-sommar) { --ft-lov: #3f7a32; --ft-lov2: #548f40; --ft-lov3: #64a04a; --ft-lov0: #2f5e28; }
:is(#m-footern-host, #m-backen-host, #m-stugan-host, #m-glantan-host, #m-havet-host, #m-fjallen-host, #m-skargarden-host, #m-skogen-host, #m-sjon-host, #m-angen-host, #m-gard-host, #m-industri-host, #m-staden-host, #m-kusten-host, #m-hamnen-host, #m-byn-host) { --ft-lov: #c8642a; --ft-lov2: #e09232; --ft-lov3: #f0c048; --ft-lov0: #a03c26; --ft-bak: #2a2a1e; --ft-fram: #14140e; --ft-h1: #4a3a5a; --ft-h2: #6a4a3a; --ft-lh1: #b8c8d8; --ft-lh2: #f0d0a0; }
[data-theme="light"] :is(#m-footern-host, #m-backen-host, #m-stugan-host, #m-glantan-host, #m-havet-host, #m-fjallen-host, #m-skargarden-host, #m-skogen-host, #m-sjon-host, #m-angen-host, #m-gard-host, #m-industri-host, #m-staden-host, #m-kusten-host, #m-hamnen-host, #m-byn-host) { --ft-bak: #a8a05a; --ft-fram: #4a4a2a; }
:is(#m-footern-vinter, #m-backen-vinter, #m-stugan-vinter, #m-glantan-vinter, #m-havet-vinter, #m-fjallen-vinter, #m-skargarden-vinter, #m-skogen-vinter, #m-sjon-vinter, #m-angen-vinter, #m-gard-vinter, #m-industri-vinter, #m-staden-vinter, #m-kusten-vinter, #m-hamnen-vinter, #m-byn-vinter) { --ft-lov: #c8d4e0; --ft-lov2: #dde6ee; --ft-lov3: #f2f6fa; --ft-lov0: #a8b8c8; --ft-gran: #2a4448; --ft-gran2: #3a5658; --ft-bak: #3a4a60; --ft-fram: #24303f; --ft-h1: #1c2a4a; --ft-h2: #3a4a6a; --ft-lh1: #a8bcd8; --ft-lh2: #f4e0e6; }
[data-theme="light"] :is(#m-footern-vinter, #m-backen-vinter, #m-stugan-vinter, #m-glantan-vinter, #m-havet-vinter, #m-fjallen-vinter, #m-skargarden-vinter, #m-skogen-vinter, #m-sjon-vinter, #m-angen-vinter, #m-gard-vinter, #m-industri-vinter, #m-staden-vinter, #m-kusten-vinter, #m-hamnen-vinter, #m-byn-vinter) { --ft-bak: #e8eef6; --ft-fram: #cdd8e6; }
.ft-blom0 { fill: #f6f4ec; } .ft-blom1 { fill: #f2d65a; } .ft-blom2 { fill: #e0a8d0; }
:is(#m-footern-sommar, #m-backen-sommar, #m-stugan-sommar, #m-glantan-sommar, #m-havet-sommar, #m-fjallen-sommar, #m-skargarden-sommar, #m-skogen-sommar, #m-sjon-sommar, #m-angen-sommar, #m-gard-sommar, #m-industri-sommar, #m-staden-sommar, #m-kusten-sommar, #m-hamnen-sommar, #m-byn-sommar) .ft-blom1 { fill: #e85a4a; } :is(#m-footern-sommar, #m-backen-sommar, #m-stugan-sommar, #m-glantan-sommar, #m-havet-sommar, #m-fjallen-sommar, #m-skargarden-sommar, #m-skogen-sommar, #m-sjon-sommar, #m-angen-sommar, #m-gard-sommar, #m-industri-sommar, #m-staden-sommar, #m-kusten-sommar, #m-hamnen-sommar, #m-byn-sommar) .ft-blom2 { fill: #6a8ae0; }
.ft-snurr { animation: snurr var(--d) linear infinite; }

/* Footerns varianter (footern-brynet/-sjon/-fjallet/-hagen): björkar, tuvor, sjö, vass, fjäll, lada och gärdsgård. */
.ft-bjork { fill: none; stroke: color-mix(in oklab, #ebe6da var(--dm), var(--bg)); stroke-linecap: round; }
.ft-tuva { fill: color-mix(in oklab, var(--ft-fram) 80%, #8ab070); } .ft-tuva-b { fill: color-mix(in oklab, var(--ft-bak) 82%, #9ac080); }
.ft-horn { fill: none; stroke: var(--d-horn); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.ft-sjo { fill: var(--ft-sjo); } .ft-sjo2 { fill: color-mix(in oklab, var(--ft-sjo) 70%, var(--bg)); }
.ft-nack { fill: color-mix(in oklab, #4f8a3c var(--dm), var(--ft-sjo)); }
.ft-glitter path { stroke: color-mix(in oklab, #fff 55%, var(--ft-sjo)); stroke-width: 1.4; stroke-linecap: round; opacity: 0; animation: ft-glitter var(--gd) ease-in-out var(--gf) infinite; }
@keyframes ft-glitter { 0%, 100% { opacity: 0; } 50% { opacity: .8; } }
.ft-svall { fill: none; stroke: color-mix(in oklab, #fff 40%, var(--ft-sjo, #5e8fae)); stroke-width: 1.2; stroke-linecap: round; }
.ft-vass { fill: none; stroke: color-mix(in oklab, #7a8a4a var(--dm), var(--bg)); stroke-width: 1.6; stroke-linecap: round; }
.ft-kolv { fill: color-mix(in oklab, #5a3a26 var(--dm), var(--bg)); }
.ft-fjall { fill: color-mix(in oklab, var(--ft-fjall) 55%, var(--bg)); } .ft-snofl { fill: color-mix(in oklab, #f2f4f6 50%, var(--bg)); }
.ft-sten { fill: color-mix(in oklab, #7a7e80 var(--dm), var(--bg)); } .ft-sten2 { fill: color-mix(in oklab, #a0a4a6 var(--dm), var(--bg)); }
.ft-lada { fill: color-mix(in oklab, #a8382c var(--dm), var(--bg)); } .ft-tak { fill: color-mix(in oklab, #2a2624 var(--dm), var(--bg)); }
.ft-knut { fill: color-mix(in oklab, #f2ede2 var(--dm), var(--bg)); } .ft-kryss { fill: none; stroke: color-mix(in oklab, #f2ede2 var(--dm), var(--bg)); stroke-width: 2; }
.ft-hag { fill: none; stroke: color-mix(in oklab, #7a6248 var(--dm), var(--bg)); stroke-width: 2.6; stroke-linecap: round; }
#m-footern-sjon { --ft-sjo: #16303e; } [data-theme="light"] #m-footern-sjon { --ft-sjo: #7eb4d0; }
#m-footern-fjallet { --ft-bak: #2a3a34; --ft-fram: #141c1a; --ft-fjall: #4a5a6e; --ft-lov: #6a8a4a; --ft-lov2: #7e9e58; --ft-lov3: #94b468; }
[data-theme="light"] #m-footern-fjallet { --ft-bak: #8aa070; --ft-fram: #4a5e44; --ft-fjall: #8a9cb4; }
#m-footern-hagen { --ft-lov: #4f8a3c; } [data-theme="light"] #m-footern-hagen { --ft-bak: #8cb860; --ft-fram: #3a6640; }
:is(#m-footern-vinter, #m-backen-vinter, #m-stugan-vinter, #m-glantan-vinter, #m-havet-vinter, #m-fjallen-vinter, #m-skargarden-vinter, #m-skogen-vinter, #m-sjon-vinter, #m-angen-vinter, #m-gard-vinter, #m-industri-vinter, #m-staden-vinter, #m-kusten-vinter, #m-hamnen-vinter, #m-byn-vinter) .snoflinga { fill: #fff; opacity: .85; }
/* Backen (startsidans landningsbild): sjön och åsarna per årstid; vintersjön är is, vinterharen vit. */
[id^="m-backen-"] { --ft-sjo: #16303e; --ft-fjall: #3a4a62; } [data-theme="light"] [id^="m-backen-"] { --ft-sjo: #7eb4d0; --ft-fjall: #9ab0c8; }
#m-backen-host { --ft-sjo: #1e2c36; --ft-fjall: #4a3e52; } [data-theme="light"] #m-backen-host { --ft-sjo: #8aaebe; --ft-fjall: #b0a4b4; }
#m-backen-vinter { --ft-sjo: #4a5e74; --ft-fjall: #5a6a84; --hare-bas: #f4f3ef; } [data-theme="light"] #m-backen-vinter { --ft-sjo: #d4e2ee; --ft-fjall: #c4d2e2; }
/* Stugan: åsarna som Backen; fönstren lyser varmt bara i mörkt läge, röken stiger och tunnas ut, snön på taket. */
[id^="m-stugan-"] { --ft-fjall: #3a4a62; } [data-theme="light"] [id^="m-stugan-"] { --ft-fjall: #9ab0c8; }
#m-stugan-host { --ft-fjall: #4a3e52; } [data-theme="light"] #m-stugan-host { --ft-fjall: #b0a4b4; }
#m-stugan-vinter { --ft-fjall: #5a6a84; --hare-bas: #f4f3ef; } [data-theme="light"] #m-stugan-vinter { --ft-fjall: #c4d2e2; }
.ft-fonster { fill: #ffcf73; filter: drop-shadow(0 0 6px rgba(255, 190, 90, .7)); } [data-theme="light"] .ft-fonster { fill: #b4d0e2; filter: none; }
.ft-apple circle { fill: color-mix(in oklab, #e8261e var(--dm), var(--bg)); stroke: color-mix(in oklab, #6a1410 var(--dm), var(--bg)); stroke-width: 1.2; }
.ft-takso { fill: #f4f6fa; } [data-theme="light"] .ft-takso { fill: #fff; }
.ft-rok circle { fill: color-mix(in oklab, #c8ccd4 60%, transparent); opacity: 0; transform-box: fill-box; transform-origin: center; animation: ft-rok 6.4s ease-out var(--rd) infinite; }
@keyframes ft-rok { 0% { opacity: 0; transform: translate(0, 0) scale(.6); } 15% { opacity: .7; } 100% { opacity: 0; transform: translate(26px, -110px) scale(2.4); } }
@media (prefers-reduced-motion: reduce) { .ft-rok circle { animation: none; opacity: .4; } }
/* Gläntan: åsarna som Backen, flugsvampar, stubbens snittyta och harspåren i snön. */
[id^="m-glantan-"] { --ft-fjall: #3a4a62; } [data-theme="light"] [id^="m-glantan-"] { --ft-fjall: #9ab0c8; }
#m-glantan-host { --ft-fjall: #4a3e52; } [data-theme="light"] #m-glantan-host { --ft-fjall: #b0a4b4; }
#m-glantan-vinter { --ft-fjall: #5a6a84; --hare-bas: #f4f3ef; } [data-theme="light"] #m-glantan-vinter { --ft-fjall: #c4d2e2; }
.ft-stubbe { fill: color-mix(in oklab, #c8a878 var(--dm), var(--bg)); }
.ft-svamp { fill: color-mix(in oklab, #d8302a var(--dm), var(--bg)); } .ft-svampfot, .ft-prick { fill: color-mix(in oklab, #f2ece0 var(--dm), var(--bg)); }
.ft-spar ellipse { fill: color-mix(in oklab, #7a8aa4 45%, var(--ft-fram)); }
/* Havet: havet per årstid, granitklippor, fyren som blinkar i mörkt läge, segelbåten, gässen och isen. */
[id^="m-havet-"] { --ft-sjo: #1a3448; } [data-theme="light"] [id^="m-havet-"] { --ft-sjo: #6ea8cc; }
#m-havet-host { --ft-sjo: #1e2c3a; } [data-theme="light"] #m-havet-host { --ft-sjo: #7e9eb4; }
#m-havet-vinter { --ft-sjo: #3e5268; --hare-bas: #f4f3ef; } [data-theme="light"] #m-havet-vinter { --ft-sjo: #a8c0d4; }
.ft-klipp { fill: color-mix(in oklab, #8a7470 var(--dm), var(--bg)); } .ft-klipp2 { fill: color-mix(in oklab, #a08a84 var(--dm), var(--bg)); }
.ft-bakom .ft-klipp { fill: color-mix(in oklab, var(--ft-sjo) 55%, #5a5260); }
.ft-tallstam { fill: none; stroke: color-mix(in oklab, #8a5a3a var(--dm), var(--bg)); stroke-linecap: round; }
.ft-fyrvit { fill: color-mix(in oklab, #f0ece4 70%, var(--ft-sjo)); } .ft-fyrrod { fill: color-mix(in oklab, #c8342a 70%, var(--ft-sjo)); }
.ft-fyrljus { fill: #ffe9a0; filter: drop-shadow(0 0 6px #ffd76a) drop-shadow(0 0 14px rgba(255, 210, 100, .6)); animation: ft-fyr 4s ease-in-out infinite; }
[data-theme="light"] .ft-fyrljus { filter: none; animation: none; opacity: .6; }
@keyframes ft-fyr { 0%, 60%, 100% { opacity: .15; } 75% { opacity: 1; } }
.ft-is { fill: color-mix(in oklab, #e4eef6 70%, var(--ft-sjo)); }
.ft-trift { fill: #f0a0c0; }
.ft-batskrov { fill: color-mix(in oklab, #f0ece4 70%, var(--ft-sjo)); } .ft-segel { fill: color-mix(in oklab, #fbf8f0 80%, var(--ft-sjo)); }
.ft-bat > g { animation: ft-bat 140s linear infinite; } @keyframes ft-bat { from { transform: translate(-80px, 573px); } to { transform: translate(1680px, 573px); } }
.ft-gass path { fill: none; stroke: color-mix(in oklab, #2a2a30 70%, var(--bg)); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; transform-box: fill-box; transform-origin: center; animation: ft-flax .5s ease-in-out var(--fd) infinite alternate; }
[data-theme="light"] .ft-gass path { stroke: #3a3a44; } :root:not([data-theme="light"]) .ft-gass path { stroke: #c8ccd8; }
.ft-gass > g { animation: ft-gass 48s linear infinite; } @keyframes ft-gass { from { transform: translate(1720px, 220px); } to { transform: translate(-300px, 170px); } }
@keyframes ft-flax { to { transform: scaleY(-.6); } }
@media (prefers-reduced-motion: reduce) { .ft-bat > g, .ft-gass > g, .ft-gass path, .ft-fyrljus { animation: none; } }
/* Fjällen: fjällkedjan med snö som följer årstiden, heden och sjön, ruskan på hösten, ledkryss och norrsken. */
[id^="m-fjallen-"] { --ft-fjall: #3e4e66; --ft-sjo: #1a3448; } [data-theme="light"] [id^="m-fjallen-"] { --ft-fjall: #95abc6; --ft-sjo: #6ea8cc; }
#m-fjallen-host { --ft-bak: #3a1e1a; --ft-fram: #1e100e; --ft-sjo: #1e2c3a; } [data-theme="light"] #m-fjallen-host { --ft-bak: #c47448; --ft-fram: #7a3e2c; --ft-sjo: #7e9eb4; }
#m-fjallen-vinter { --ft-fjall: #5a6a86; --hare-bas: #f4f3ef; } [data-theme="light"] #m-fjallen-vinter { --ft-fjall: #c4d2e4; }
.fl-massiv { fill: color-mix(in oklab, color-mix(in oklab, var(--ft-fjall) 75%, #182030) 70%, var(--bg)); }
.fl-topp { fill: color-mix(in oklab, #f4f6fa 62%, var(--bg)); } [data-theme="light"] .fl-topp { fill: #fbfcfe; }
.fl-hed { fill: color-mix(in oklab, var(--ft-bak) 72%, var(--ft-fjall)); }
.fl-isjo { fill: color-mix(in oklab, #e4eef6 60%, var(--ft-fjall)); } .fl-isflak { fill: color-mix(in oklab, #f4f8fb 70%, var(--ft-sjo)); }
.fl-kryss path { fill: none; stroke: #d0382c; stroke-width: 3.4; stroke-linecap: round; } .fl-kryss .fl-stolpe { stroke: color-mix(in oklab, #5a4636 var(--dm), var(--bg)); stroke-width: 2.4; }
.fl-norr path { fill: none; stroke: #5af0a8; stroke-width: 46; stroke-linecap: round; opacity: .28; filter: blur(16px); animation: fl-norr 14s ease-in-out infinite alternate; }
.fl-norr .fl-norr2 { stroke: #7ad8f0; stroke-width: 30; opacity: .2; animation-duration: 19s; animation-delay: -6s; }
[data-theme="light"] .fl-norr { display: none; }
@keyframes fl-norr { from { transform: translateX(-40px); opacity: .12; } to { transform: translateX(40px); opacity: .34; } }
@media (prefers-reduced-motion: reduce) { .fl-norr path { animation: none; } }
/* Skärgården: fjärden och skären, sjöboden med bryggan och båten, vimpeln, rönnbären och isen med skridskospår. */
[id^="m-skargarden-"] { --ft-sjo: #183244; --ft-fjall: #2e3e50; } [data-theme="light"] [id^="m-skargarden-"] { --ft-sjo: #74aed0; --ft-fjall: #8aa2b8; }
#m-skargarden-host { --ft-sjo: #1c2a38; } [data-theme="light"] #m-skargarden-host { --ft-sjo: #82a2b8; }
#m-skargarden-vinter { --hare-bas: #f4f3ef; }
.sg-fjarr { fill: color-mix(in oklab, var(--ft-fjall) 60%, var(--ft-sjo)); } .sg-o { fill: color-mix(in oklab, #8a7470 var(--dm), var(--bg)); }
#m-skargarden-vinter .sg-fjarr, #m-skargarden-vinter .sg-o { fill: color-mix(in oklab, #eef2f7 62%, var(--bg)); } [data-theme="light"] #m-skargarden-vinter :is(.sg-fjarr, .sg-o) { fill: #f6f8fb; }
.sg-is { fill: color-mix(in oklab, #dfe9f2 52%, var(--bg)); } [data-theme="light"] .sg-is { fill: #dbe7f1; }
.sg-spar { fill: none; stroke: color-mix(in oklab, #9fb4c8 60%, var(--bg)); stroke-width: 1.2; stroke-dasharray: 26 8; }
.sg-pale, .sg-brygga { fill: color-mix(in oklab, #6a5442 var(--dm), var(--bg)); } .sg-brygga { fill: color-mix(in oklab, #9a7a5a var(--dm), var(--bg)); }
.sg-port { fill: color-mix(in oklab, #7a2820 var(--dm), var(--bg)); }
.sg-bat { fill: color-mix(in oklab, #f0ece2 var(--dm), var(--bg)); } .sg-bat2 { fill: color-mix(in oklab, #3a5a8a var(--dm), var(--bg)); }
.sg-gung { animation: sg-gung 5s ease-in-out infinite alternate; } @keyframes sg-gung { to { transform: translateY(2px); } }
.sg-vimpel { transform-origin: 0 7px; animation: sg-vimpel 3.2s ease-in-out infinite alternate; }
@keyframes sg-vimpel { from { transform: rotate(4deg) skewY(2deg) scaleX(.94); } to { transform: rotate(10deg) skewY(-3deg) scaleX(1); } }
.sg-vimpel-bla { fill: color-mix(in oklab, #1f5aa8 var(--dm), var(--bg)); } .sg-vimpel-gul { fill: color-mix(in oklab, #f2c230 var(--dm), var(--bg)); }
.sg-bar { fill: #d2261c; stroke: #7a1410; stroke-width: .6; }
@media (prefers-reduced-motion: reduce) { .sg-gung, .sg-vimpel { animation: none; } }
[id^="m-skogen-"] { --ft-sjo: #1a3242; } [data-theme="light"] [id^="m-skogen-"] { --ft-sjo: #6aa4c4; }
#m-skogen-vinter { --hare-bas: #f4f3ef; }
.so-mossa { fill: color-mix(in oklab, #6a8a3a var(--dm), var(--bg)); }
.so-myr { fill: color-mix(in oklab, #7a5636 var(--dm), var(--bg)); } .so-myr2 path { stroke: color-mix(in oklab, #4a3220 var(--dm), var(--bg)); stroke-width: 1.2; stroke-linecap: round; }
.so-orm path { fill: color-mix(in oklab, #4f8a3a var(--dm), var(--bg)); } #m-skogen-host .so-orm path { fill: color-mix(in oklab, #c8963a var(--dm), var(--bg)); }
.so-orm-ung path, .so-orm-ung circle { fill: none; stroke: color-mix(in oklab, #8ab84e var(--dm), var(--bg)); stroke-width: 2; stroke-linecap: round; }
.so-ris { fill: color-mix(in oklab, #4a8a3e var(--dm), var(--bg)); } #m-skogen-host .so-ris { fill: color-mix(in oklab, #3a6a34 var(--dm), var(--bg)); }
.so-blabar { fill: #3a4a9a; stroke: #1e2a60; stroke-width: .5; }
.so-kant { fill: color-mix(in oklab, #eaa628 var(--dm), var(--bg)); }
.so-flack { fill: color-mix(in oklab, #eef2f7 70%, var(--bg)); } [data-theme="light"] .so-flack { fill: #f6f8fb; }
.so-flyt { animation: so-flyt var(--fd) linear var(--ff) infinite; } @keyframes so-flyt { 0% { transform: translateX(0); opacity: 0; } 15%, 85% { opacity: 1; } 100% { transform: translateX(160px); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .so-flyt { animation: none; } }
[id^="m-sjon-"] { --ft-sjo: #1a3448; } [data-theme="light"] [id^="m-sjon-"] { --ft-sjo: #6eaacc; }
#m-sjon-host { --ft-sjo: #1e2c3a; } [data-theme="light"] #m-sjon-host { --ft-sjo: #86a6bc; }
#m-sjon-vinter { --hare-bas: #f4f3ef; }
.sn-spegel { fill: color-mix(in oklab, var(--ft-bak) 45%, var(--ft-sjo)); }
.sn-plank { stroke: color-mix(in oklab, #6a5442 var(--dm), var(--bg)); stroke-width: 1; }
.sn-kanot { fill: color-mix(in oklab, #c04a2c var(--dm), var(--bg)); } .sn-kanot2 { fill: color-mix(in oklab, #7a2c1c var(--dm), var(--bg)); }
.sn-blad { fill: color-mix(in oklab, #4a8a3a var(--dm), var(--bg)); } .sn-ros { fill: color-mix(in oklab, #fbf7f0 var(--dm), var(--bg)); } .sn-ros2 { fill: #f2c230; }
.sn-flak { animation: sn-flak var(--fd) ease-in-out var(--ff) infinite alternate; } @keyframes sn-flak { to { transform: translateX(40px); } }
.sn-dimma ellipse { fill: #e8ecf0; opacity: .14; animation: sn-dimma var(--fd) ease-in-out var(--ff) infinite alternate; } [data-theme="light"] .sn-dimma ellipse { fill: #fff; opacity: .45; }
@keyframes sn-dimma { to { transform: translateX(90px); } }
#m-sjon-sommar .ft-vass { stroke: color-mix(in oklab, #5a8a3a var(--dm), var(--bg)); } #m-sjon-host .ft-vass { stroke: color-mix(in oklab, #c8a248 var(--dm), var(--bg)); }
#m-sjon-vinter .ft-vass { stroke: color-mix(in oklab, #b8a478 var(--dm), var(--bg)); }
@media (prefers-reduced-motion: reduce) { .sn-flak, .sn-dimma ellipse { animation: none; } }
#m-angen-vinter { --hare-bas: #f4f3ef; }
.an-ho { fill: color-mix(in oklab, #a8a456 var(--dm), var(--bg)); } .an-ho2 { fill: color-mix(in oklab, #c8a050 var(--dm), var(--bg)); }
.an-stra { stroke: color-mix(in oklab, #7a6a34 var(--dm), var(--bg)); stroke-width: 1; fill: none; opacity: .6; }
.an-stjalk { fill: none; stroke: color-mix(in oklab, #5a8a3a var(--dm), var(--bg)); stroke-width: 1.2; }
.an-vinge { fill: #f2d65a; } .an-vinge2 { fill: #f6f4ec; }
.an-fj > g { animation: an-fj var(--fd) ease-in-out var(--ff) infinite alternate; } @keyframes an-fj { 50% { transform: translate(calc(var(--fx) * .5), calc(var(--fy) - 20px)); } to { transform: translate(var(--fx), var(--fy)); } }
.an-flax { transform-box: fill-box; transform-origin: center; animation: an-flax var(--fb) ease-in-out infinite alternate; } @keyframes an-flax { to { transform: scaleX(.25); } }
@media (prefers-reduced-motion: reduce) { .an-fj > g, .an-flax { animation: none; } }
#m-gard-vinter { --hare-bas: #f4f3ef; }
.jb-aker { fill: color-mix(in oklab, #6a4a32 var(--dm), var(--bg)); } .jb-fara path { fill: none; stroke: color-mix(in oklab, #4a3222 var(--dm), var(--bg)); }
#m-gard-sommar .jb-aker { fill: color-mix(in oklab, #c8a83a var(--dm), var(--bg)); } #m-gard-sommar .jb-fara path { stroke: color-mix(in oklab, #a8882a var(--dm), var(--bg)); }
#m-gard-host .jb-aker { fill: color-mix(in oklab, #a8945a var(--dm), var(--bg)); } #m-gard-host .jb-fara path { stroke: color-mix(in oklab, #8a7644 var(--dm), var(--bg)); }
#m-gard-vinter .jb-aker { fill: color-mix(in oklab, #e4ebf2 var(--dm), var(--bg)); } #m-gard-vinter .jb-fara path { stroke: color-mix(in oklab, #c8d4e0 var(--dm), var(--bg)); }
.jb-bal { fill: color-mix(in oklab, #d8b450 var(--dm), var(--bg)); } .jb-bal2 { fill: color-mix(in oklab, #c49a3a var(--dm), var(--bg)); } .jb-spiral { fill: none; stroke: color-mix(in oklab, #9a7628 var(--dm), var(--bg)); stroke-width: 1.2; }
.jb-trak { fill: color-mix(in oklab, #d8822a var(--dm), var(--bg)); } .jb-tak2 { fill: color-mix(in oklab, #2a2624 var(--dm), var(--bg)); }
.jb-ruta { fill: color-mix(in oklab, #9ab8c8 var(--dm), var(--bg)); } .jb-nav { fill: color-mix(in oklab, #e8c040 var(--dm), var(--bg)); }
#m-industri-vinter { --hare-bas: #f4f3ef; }
#m-staden-vinter { --hare-bas: #f4f3ef; }
[id^="m-kusten-"] { --ft-sjo: #1a3a4c; } [data-theme="light"] [id^="m-kusten-"] { --ft-sjo: #72b0cc; }
#m-kusten-host { --ft-sjo: #1e2e3c; } [data-theme="light"] #m-kusten-host { --ft-sjo: #80a2b6; }
#m-kusten-vinter { --ft-sjo: #3e5268; --hare-bas: #f4f3ef; } [data-theme="light"] #m-kusten-vinter { --ft-sjo: #a8c0d4; }
.kx-sand { fill: color-mix(in oklab, #e2cc98 var(--dm), var(--bg)); } .kx-dyn { fill: color-mix(in oklab, #d4bc86 var(--dm), var(--bg)); }
#m-kusten-vinter .kx-sand { fill: color-mix(in oklab, #e8ecf0 var(--dm), var(--bg)); } #m-kusten-vinter .kx-dyn { fill: color-mix(in oklab, #dde4ec var(--dm), var(--bg)); }
.kx-udde { fill: color-mix(in oklab, #6a7e78 var(--dm), var(--bg)); }
.kx-rag { fill: none; stroke: color-mix(in oklab, #7e9e8e var(--dm), var(--bg)); stroke-width: 1.6; stroke-linecap: round; }
#m-kusten-sommar .kx-rag { stroke: color-mix(in oklab, #8aa87a var(--dm), var(--bg)); } #m-kusten-host .kx-rag { stroke: color-mix(in oklab, #c4a868 var(--dm), var(--bg)); } #m-kusten-vinter .kx-rag { stroke: color-mix(in oklab, #b8a882 var(--dm), var(--bg)); }
.kx-h0 { fill: color-mix(in oklab, #7aa6cc var(--dm), var(--bg)); } .kx-h1 { fill: color-mix(in oklab, #d87a70 var(--dm), var(--bg)); }
.kx-h2 { fill: color-mix(in oklab, #e8c86a var(--dm), var(--bg)); } .kx-h3 { fill: color-mix(in oklab, #84b896 var(--dm), var(--bg)); }
.kx-vit { fill: color-mix(in oklab, #f4f1ea var(--dm), var(--bg)); } .kx-eka { fill: color-mix(in oklab, #c8665a var(--dm), var(--bg)); }
.kx-kol { fill: none; stroke: color-mix(in oklab, #f4f1ea var(--dm), var(--bg)); stroke-width: 3; stroke-linecap: round; }
[id^="m-hamnen-"] { --ft-sjo: #1a3448; } [data-theme="light"] [id^="m-hamnen-"] { --ft-sjo: #6aa4c8; }
#m-hamnen-host { --ft-sjo: #1e2c3a; } [data-theme="light"] #m-hamnen-host { --ft-sjo: #7e9eb4; }
#m-hamnen-vinter { --ft-sjo: #3e5268; --hare-bas: #f4f3ef; } [data-theme="light"] #m-hamnen-vinter { --ft-sjo: #a8c0d4; }
.hb-falu { fill: color-mix(in oklab, #b04a3e var(--dm), var(--bg)); } .hb-kaj { fill: color-mix(in oklab, #9a968e var(--dm), var(--bg)); }
.hb-fog { fill: none; stroke: color-mix(in oklab, #6e6a64 var(--dm), var(--bg)); stroke-width: 1.4; stroke-linecap: round; }
.hb-brygga { fill: color-mix(in oklab, #b0906c var(--dm), var(--bg)); } .hb-plank { fill: none; stroke: color-mix(in oklab, #7a6248 var(--dm), var(--bg)); stroke-width: 1; }
.hb-pir { fill: color-mix(in oklab, #7a7e84 var(--dm), var(--bg)); } .hb-lada { fill: color-mix(in oklab, #5a8ab4 var(--dm), var(--bg)); }
.hb-skrov { fill: color-mix(in oklab, #ecebe6 var(--dm), var(--bg)); } .hb-skrov2 { fill: color-mix(in oklab, #4f78a0 var(--dm), var(--bg)); } .hb-rand { fill: color-mix(in oklab, #c8504a var(--dm), var(--bg)); }
.hb-boj { fill: none; stroke: color-mix(in oklab, #e0563e var(--dm), var(--bg)); stroke-width: 4.5; stroke-dasharray: 6.3 6.3; }
.hb-gung { transform-box: fill-box; transform-origin: 50% 100%; animation: hb-gung var(--gd) ease-in-out var(--gf) infinite alternate; }
@keyframes hb-gung { from { transform: translateY(-1px) rotate(-1.5deg); } to { transform: translateY(2px) rotate(1.5deg); } }
@media (prefers-reduced-motion: reduce) { .hb-gung { animation: none; } }
#m-byn-vinter { --hare-bas: #f4f3ef; }
.bv-rod { fill: color-mix(in oklab, #b04a3e var(--dm), var(--bg)); } .bv-gul { fill: color-mix(in oklab, #e2c06a var(--dm), var(--bg)); } .bv-bla { fill: color-mix(in oklab, #7c9cba var(--dm), var(--bg)); }
.bv-skylt { fill: none; stroke: color-mix(in oklab, #b04a3e var(--dm), var(--bg)); stroke-width: 3; stroke-dasharray: 5 3; }
.bv-klocka { fill: color-mix(in oklab, #d4a848 var(--dm), var(--bg)); }
.bv-vag { fill: color-mix(in oklab, #c8b48e var(--dm), var(--bg)); } #m-byn-vinter .bv-vag { fill: color-mix(in oklab, #dfe3e8 var(--dm), var(--bg)); }
.bv-blomning circle { fill: color-mix(in oklab, #f8e0ea var(--dm), var(--bg)); } .bv-apple circle { fill: color-mix(in oklab, #d8443a var(--dm), var(--bg)); }
.bv-stang { fill: none; stroke: color-mix(in oklab, #5e8e4a var(--dm), var(--bg)); stroke-width: 6; stroke-linecap: round; }
.bv-band { fill: none; stroke: color-mix(in oklab, #3e6eb4 var(--dm), var(--bg)); stroke-width: 2.4; stroke-linecap: round; } .bv-band2 { fill: none; stroke: color-mix(in oklab, #f0c840 var(--dm), var(--bg)); stroke-width: 2.4; stroke-linecap: round; }
.sd-h0 { fill: color-mix(in oklab, #d8a848 var(--dm), var(--bg)); } .sd-h1 { fill: color-mix(in oklab, #b85a40 var(--dm), var(--bg)); } .sd-h2 { fill: color-mix(in oklab, #e6d49a var(--dm), var(--bg)); }
.sd-h3 { fill: color-mix(in oklab, #6f9a7a var(--dm), var(--bg)); } .sd-h4 { fill: color-mix(in oklab, #d88a86 var(--dm), var(--bg)); }
.sd-kyrka { fill: color-mix(in oklab, #d6cebe var(--dm), var(--bg)); } .sd-koppar { fill: color-mix(in oklab, #5a9a8a var(--dm), var(--bg)); } .sd-fjarr { fill: color-mix(in oklab, #7a8a9a var(--dm), var(--bg)); }
.sd-ur { fill: color-mix(in oklab, #f4efe4 var(--dm), var(--bg)); } .sd-visare { fill: none; stroke: color-mix(in oklab, #2a2624 var(--dm), var(--bg)); stroke-width: 2; stroke-linecap: round; }
.sd-snokant { fill: none; stroke: #f4f6fa; stroke-width: 6; stroke-linecap: round; stroke-linejoin: round; } [data-theme="light"] .sd-snokant { stroke: #fff; }
.ix-tegel { fill: color-mix(in oklab, #b0563c var(--dm), var(--bg)); } .ix-tegel2 { fill: color-mix(in oklab, #8a3e2c var(--dm), var(--bg)); } .ix-rand { fill: color-mix(in oklab, #ece6dc var(--dm), var(--bg)); }
.ix-tak { fill: color-mix(in oklab, #5c6068 var(--dm), var(--bg)); }
.ix-plank { fill: none; stroke: color-mix(in oklab, #3a2c22 var(--dm), var(--bg)); stroke-width: 1.6; }
.ix-tank { fill: color-mix(in oklab, #9aa8b4 var(--dm), var(--bg)); } .ix-tank2 { fill: color-mix(in oklab, #bcc8d2 var(--dm), var(--bg)); }
.ix-band, .ix-stege { fill: none; stroke: color-mix(in oklab, #6a7884 var(--dm), var(--bg)); stroke-width: 1.6; }
.ix-rok circle { fill: color-mix(in oklab, #e4e8ec calc(var(--dm) - 8%), var(--bg)); opacity: 0; transform-box: fill-box; transform-origin: center; animation: ix-rok var(--rd) ease-out var(--rf) infinite; }
[data-theme="light"] .ix-rok circle { fill: #a4acb4; }
@keyframes ix-rok { 0% { opacity: 0; transform: translate(0, 0) scale(.4); } 12% { opacity: .85; } 100% { opacity: 0; transform: translate(var(--rx), var(--ry)) scale(2.4); } }
@media (prefers-reduced-motion: reduce) { .ix-rok circle { animation-play-state: paused; } }

/* Fler landningsbilder: Lugna resan i andra ljus. */
.pv-var { --p-h1: #7fb8e6; --p-h2: #d8eef6; --p-h3: #f4f6dc; --p-sken: rgba(255,250,215,.75); --p-sol: #fffbe0; --p-moln: rgba(255,255,255,.9); --p-dis: #dcecf0;
  --p-fjall: #9ab4c8; --p-sno: #f6f9fb; --p-skog: #33634a; --p-lov: #8cc85a; --p-bjork: #f3f1ea; --p-stam: #5a4636; --p-ang: #9ccb62; --p-mossa: #6a9a52;
  --p-akr: #b8a070; --p-hed: #b0b07a; --p-sjo: #6aaed6; --p-hus: #b0432f; --p-tak: #3a2f2c; --p-fonster: #fffaf0; --p-blom: #fff6f0; --p-fg: #1f3a2a; }
.pv-gryning { --p-h1: #8a8ac0; --p-h2: #f0c4c0; --p-h3: #ffe2bc; --p-sken: rgba(255,214,180,.8); --p-sol: #fff0d8; --p-moln: rgba(255,226,220,.75); --p-dis: #e8d4dc;
  --p-fjall: #a89ab8; --p-sno: #fbeef0; --p-skog: #3e5450; --p-lov: #6a8a5a; --p-bjork: #f2e6e2; --p-stam: #4e3e3e; --p-ang: #8aa070; --p-mossa: #6a7a5a;
  --p-akr: #d8b07a; --p-hed: #a8968a; --p-sjo: #e0bcc8; --p-hus: #a84a42; --p-tak: #3a2f34; --p-fonster: #ffe6b0; --p-blom: #fff0e4; --p-fg: #2a2a34; }
.pv-ljusnatt { --p-h1: #4a6a9e; --p-h2: #c8a8c8; --p-h3: #ffc8a0; --p-sken: rgba(255,200,170,.6); --p-sol: #ffe0c0; --p-moln: rgba(230,200,220,.6); --p-dis: #9a90b0;
  --p-fjall: #6a6a96; --p-sno: #e8dcec; --p-skog: #1e3632; --p-lov: #34503e; --p-bjork: #d8ccd4; --p-stam: #2a2228; --p-ang: #44604a; --p-mossa: #34483c;
  --p-akr: #8a7a64; --p-hed: #6a6474; --p-sjo: #b8a0c4; --p-hus: #8a3a3c; --p-tak: #1e1a22; --p-fonster: #ffd27a; --p-blom: #f0d8e4; --p-fg: #141a1e; }

/* Landningsbilderna (Sjöstranden, Kalfjället, Hagmarken, Havsklipporna, Skogsgläntan, Myren, Vinterskogen, Forsen, Höstskogen, Sanddynerna, Vårbäcken, Viken, Ljungheden, Bokskogen, Älvbrinken, Dammen; lnTopp m.fl. i motiv.js).
   Fristående från footern. Tokens per scen: mörkt = skymning, ljust = dag. Djurens rörelser: ln-* nedan. */
#m-sjostranden { --ln-h1: #0f1628; --ln-h2: #5a4258; --ln-sol: #f2b27a; --ln-0: #2c3650; --ln-sno: #8a98b4; --ln-1: #1c2a2e; --ln-skog: #142024; --ln-vatten: #1c2a40; --ln-3: #0e1618; --ln-t0: #13241e; --ln-t1: #22382a; --ln-stam: #2a221c; --ln-bjst: #9a9a90; --ln-djur: #07090b; --ln-ljus: #c8c4b8; --ln-moln: #2a3048; }
[data-theme="light"] #m-sjostranden { --ln-h1: #8ec3e8; --ln-h2: #f4ead6; --ln-sol: #fff1c8; --ln-0: #8fa6c4; --ln-sno: #f6f9fc; --ln-1: #5f8a6c; --ln-skog: #3f6a50; --ln-vatten: #7fb2d4; --ln-3: #3d6248; --ln-t0: #2f5a40; --ln-t1: #6a9a4a; --ln-stam: #5a4636; --ln-bjst: #eceae2; --ln-djur: #2a2f33; --ln-ljus: #f4f1ea; --ln-moln: #fff; }
#m-kalfjallet { --ln-h1: #12162a; --ln-h2: #6a4a5a; --ln-sol: #f0a070; --ln-0: #2e3450; --ln-sno: #9aa4bc; --ln-1: #262c3a; --ln-2: #2a2c26; --ln-3: #181a14; --ln-t1: #6a6430; --ln-bjst: #8a8a80; --ln-djur: #0c0c0e; --ln-ljus: #b8b4a8; --ln-moln: #2c3048; }
[data-theme="light"] #m-kalfjallet { --ln-h1: #9cc4e4; --ln-h2: #f6e6cc; --ln-sol: #fff0c0; --ln-0: #9aaac2; --ln-sno: #f8fafc; --ln-1: #8a9a86; --ln-2: #b0a870; --ln-3: #7a6a40; --ln-t1: #d4b448; --ln-bjst: #ece8de; --ln-djur: #3a3430; --ln-ljus: #f0ece4; --ln-moln: #fff; }
#m-hagmarken { --ln-h1: #101a2c; --ln-h2: #5a4a4a; --ln-sol: #f0b070; --ln-0: #1e2c24; --ln-skog: #16241c; --ln-1: #22301e; --ln-2: #1a2618; --ln-3: #121a10; --ln-t1: #1e3020; --ln-stam: #241c16; --ln-bjst: #8a8a80; --ln-djur: #0e0c0a; --ln-ljus: #c8c0b0; --ln-moln: #2a2c40; --ln-lada: #4a1e18; }
[data-theme="light"] #m-hagmarken { --ln-h1: #a8d0ee; --ln-h2: #f8f0d8; --ln-sol: #fff4cc; --ln-0: #7aa064; --ln-skog: #5a8a4a; --ln-1: #9cc070; --ln-2: #7cac58; --ln-3: #5a8a40; --ln-t1: #4f8a3c; --ln-stam: #5a4636; --ln-bjst: #eceae2; --ln-djur: #6a4430; --ln-ljus: #fff; --ln-moln: #fff; --ln-lada: #a8392c; }
#m-havsklipporna { --ln-h1: #0e1628; --ln-h2: #4a3a50; --ln-sol: #e8a070; --ln-0: #1e2a3c; --ln-vatten: #172438; --ln-1: #2a2428; --ln-2: #241e22; --ln-3: #161214; --ln-t0: #13241e; --ln-tallst: #3a2a20; --ln-djur: #0c0c10; --ln-ljus: #c8ccd4; --ln-moln: #262c44; }
[data-theme="light"] #m-havsklipporna { --ln-h1: #8cc0e6; --ln-h2: #f2ecdc; --ln-sol: #fff2c8; --ln-0: #8ea4b8; --ln-vatten: #5e9cc4; --ln-1: #a88e80; --ln-2: #9a8478; --ln-3: #7a6a60; --ln-t0: #3a5a44; --ln-tallst: #8a5a3c; --ln-djur: #4a4a50; --ln-ljus: #fff; --ln-moln: #fff; }
#m-skogsglantan { --ln-h1: #0a1210; --ln-h2: #2a3a34; --ln-sol: #c8d0a0; --ln-0: #14201c; --ln-skog: #0e1814; --ln-1: #16221a; --ln-3: #0c140e; --ln-t0: #0c1a12; --ln-stam: #1a1612; --ln-djur: #0a0908; --ln-ljus: #b8b0a0; --ln-moln: #1a2420; }
[data-theme="light"] #m-skogsglantan { --ln-h1: #a4cce0; --ln-h2: #eef0d8; --ln-sol: #fff6d0; --ln-0: #6a8a6a; --ln-skog: #4a6e52; --ln-1: #6a9050; --ln-3: #3c6034; --ln-t0: #2a4a34; --ln-stam: #4a3a30; --ln-djur: #5a4434; --ln-ljus: #f0e8d8; --ln-moln: #fff; }
:is(#m-sjostranden, #m-kalfjallet, #m-hagmarken, #m-havsklipporna, #m-skogsglantan) .ln-oga { fill: #f2c84a; }

.ln-h1 { stop-color: var(--ln-h1); } .ln-h2 { stop-color: var(--ln-h2); }
.ln-sol { fill: var(--ln-sol); } .ln-solglo { fill: var(--ln-sol); opacity: .3; filter: blur(34px); }
.ln-0 { fill: var(--ln-0); } .ln-1 { fill: var(--ln-1); } .ln-2 { fill: var(--ln-2); } .ln-3 { fill: var(--ln-3); }
.ln-sno { fill: var(--ln-sno); } .ln-skog { fill: var(--ln-skog); } .ln-vatten { fill: var(--ln-vatten); }
.ln-spegel { opacity: .3; } .ln-refl { opacity: .22; }
.ln-t0 { fill: var(--ln-t0); } .ln-t1 { fill: var(--ln-t1); } .ln-stam { fill: var(--ln-stam); }
.ln-bjst { fill: none; stroke: var(--ln-bjst); stroke-linecap: round; } .ln-tallst { fill: none; stroke: var(--ln-tallst); stroke-linecap: round; }
.ln-bark { fill: none; stroke: var(--ln-djur); stroke-width: 2; opacity: .25; } .ln-gren { fill: none; stroke: var(--ln-stam); stroke-width: 9; stroke-linecap: round; }
.ln-djur { fill: var(--ln-djur); } .ln-ben, .ln-tagg { fill: none; stroke: var(--ln-djur); stroke-width: 1.6; stroke-linecap: round; }
.ln-vit { fill: var(--ln-ljus); } .ln-ljus { fill: none; stroke: var(--ln-ljus); stroke-width: 1; opacity: .5; }
.ln-rod { fill: #c8402c; } .ln-nabb { fill: #d8a040; } .ln-fisk { fill: var(--ln-ljus); }
.ln-stuga, .ln-lada rect { fill: var(--ln-lada, #a8392c); } .ln-tak { fill: #3a2c28; } .ln-brygga { fill: #6a5442; } .ln-knut { fill: none; stroke: #f2ece2; stroke-width: 2.4; }
.ln-gard { fill: none; stroke: #8a7058; stroke-width: 2.6; stroke-linecap: round; } :root:not([data-theme="light"]) .ln-gard { stroke: #2a221a; }
.ln-sten { fill: #8a8a86; } :root:not([data-theme="light"]) .ln-sten { fill: #2a2a2e; }
.ln-fyr { fill: #f4f2ee; } .ln-svamp rect { fill: #f0ebe0; } .ln-hatt { fill: #c83a2a; }
.ln-blom0 { fill: #f6f4ec; } .ln-blom1 { fill: #f2d65a; } .ln-blom2 { fill: #c8a0e0; }
:root:not([data-theme="light"]) :is(.ln-blom0, .ln-blom1, .ln-blom2, .ln-svamp, .ln-fyr) { opacity: .45; }
.ln-gul { fill: #f2c84a; } .ln-vitv { fill: #f6f4ec; } .ln-bla { fill: #7a9ae6; }

/* himmel, vatten, ljus */
.ln-moln { fill: var(--ln-moln); opacity: .75; animation: ln-moln var(--d) linear var(--dl) infinite; }
@keyframes ln-moln { from { transform: translateX(-400px); } to { transform: translateX(2000px); } }
.ln-glitt { stroke: var(--ln-sol); stroke-width: 1.6; stroke-linecap: round; opacity: 0; animation: ln-glitt 5s ease-in-out var(--dl) infinite; }
@keyframes ln-glitt { 50% { opacity: .75; } }
.ln-vag { fill: none; stroke: var(--ln-ljus); stroke-width: 1.4; stroke-linecap: round; opacity: .35; animation: ln-vag var(--sv) ease-in-out var(--sd) infinite alternate; }
@keyframes ln-vag { from { transform: translateX(-10px); opacity: .1; } to { transform: translateX(10px); opacity: .45; } }
.ln-skum ellipse { fill: var(--ln-ljus); opacity: .5; transform-box: fill-box; transform-origin: center; animation: ln-skum 4s ease-in-out var(--sd) infinite; }
@keyframes ln-skum { 50% { transform: scaleX(1.25); opacity: .15; } }
.ln-fyrglo { fill: #ffe9a0; filter: blur(8px); animation: ln-fyr 6s ease-in-out infinite; }
@keyframes ln-fyr { 0%, 60%, 100% { opacity: .15; } 75% { opacity: 1; } }
[data-theme="light"] .ln-fyrglo { display: none; }
.ln-strale { fill: var(--ln-sol); opacity: .1; filter: blur(10px); animation: ln-strale 9s ease-in-out var(--sd) infinite alternate; }
@keyframes ln-strale { to { opacity: .28; } }
:root:not([data-theme="light"]) .ln-strale { display: none; }
.ln-lysmask circle { fill: #e8f080; filter: drop-shadow(0 0 4px #e8f080); opacity: 0; animation: ln-lys var(--sv) ease-in-out var(--sd) infinite; }
@keyframes ln-lys { 0%, 100% { opacity: 0; transform: translate(0, 0); } 50% { opacity: .9; transform: translate(14px, -10px); } }
[data-theme="light"] .ln-lysmask { display: none; }

/* växter: träden gungar och böjer sig lite i toppen, vassen fortare */
.ln-svaj { transform-box: fill-box; transform-origin: 50% 100%; animation: ln-svaj var(--sv) ease-in-out var(--sd) infinite; }
@keyframes ln-svaj { 0%, 100% { transform: rotate(-.7deg); } 40% { transform: rotate(1.3deg) skewX(-1.2deg); } 70% { transform: rotate(.2deg); } }
.ln-vass { fill: none; stroke: var(--ln-3); stroke-width: 2; stroke-linecap: round; transform-box: fill-box; transform-origin: 50% 100%; animation: ln-vass var(--sv) ease-in-out var(--sd) infinite alternate; }
@keyframes ln-vass { from { transform: rotate(-5deg); } to { transform: rotate(7deg); } }

/* Djurens färger: djur.css:s --d-* blandade mot scenens luft. Dag = egna färger, skymning = blandat mot bergens ton. */
.ln { --dm: 96%; --p-dis: var(--ln-h2); }
:root:not([data-theme="light"]) .ln { --dm: 64%; --p-dis: var(--ln-0); }
.ln-hben, .ln-tben path, .ln-fot, .ln-igfot, .ln-ravben { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.ln-hben { stroke: var(--d-hager-ben); stroke-width: 1.3; }
.ln-hstreck, .ln-plym { fill: none; stroke: var(--d-oga); stroke-width: .9; stroke-linecap: round; } .ln-plym { stroke-width: 1.1; }
.ln-vlinje { fill: none; stroke: var(--ln-ljus); stroke-width: .7; opacity: .55; }
.ln-ben { stroke: var(--d-gas-mork); stroke-width: 1.8; } .ln-rad .ln-ben { stroke: var(--d-rad-mork); }
.ln-horn { fill: none; stroke: var(--d-horn); stroke-width: 1.5; stroke-linecap: round; }
.ln-salprick { fill: color-mix(in oklab, var(--d-sal) 62%, #000); }
.ln-mustasch { fill: none; stroke: var(--d-sal-ljus); stroke-width: .35; opacity: .8; }
.ln-masvinge { fill: color-mix(in oklab, #b4bcc6 var(--dm), var(--p-dis)); }
.ln-uggstreck { fill: none; stroke: var(--d-uggla-mork); stroke-width: .8; stroke-linecap: round; }
.ln-spettband { fill: none; stroke: var(--d-vit); stroke-width: .8; stroke-linecap: round; }
.ln-flisor rect { fill: color-mix(in oklab, #d8b07a var(--dm), var(--p-dis)); opacity: 0; transform-box: fill-box; transform-origin: center; animation: ln-flis var(--T) ease-out var(--dl) infinite; }
.ln-flisor rect:nth-child(2n) { animation-delay: calc(var(--dl) + var(--T) * .04); }
@keyframes ln-flis { 0% { opacity: 0; transform: none; } 1% { opacity: 1; } 6%, 100% { opacity: 0; transform: translate(var(--fx), var(--fy)) rotate(200deg); } }
.ln-igfot { stroke: var(--d-igel-ansikte); stroke-width: 1.4; }
.ln-tagg { stroke: color-mix(in oklab, var(--d-igel) 70%, #000); stroke-width: .9; }
.ln-lomkropp { fill: var(--d-oga); } .ln-lomprick rect { fill: var(--d-vit); } .ln-lomhals { fill: none; stroke: var(--d-vit); stroke-width: .5; }
.ln-lomoga { fill: color-mix(in oklab, #c8302a var(--dm), var(--p-dis)); }
.ln-ejderh { fill: color-mix(in oklab, #7e5c3e var(--dm), var(--p-dis)); } .ln-ejdnacke { fill: color-mix(in oklab, #b8d4a0 var(--dm), var(--p-dis)); }
.ln-kotte { fill: color-mix(in oklab, #8a5a30 var(--dm), var(--p-dis)); } .ln-kottefjall { fill: none; stroke: color-mix(in oklab, #4a2e18 var(--dm), var(--p-dis)); stroke-width: .5; }
.ln-tben path { stroke: var(--d-oga); stroke-width: 1.6; } .ln-tkrona { fill: color-mix(in oklab, #d03a2c var(--dm), var(--p-dis)); }
.ln-gas { fill: none; stroke: var(--d-gas-mork); stroke-width: 2; stroke-linecap: round; transform-box: fill-box; transform-origin: 50% 100%; animation: ln-gasslag .8s ease-in-out var(--dl) infinite alternate; }
@keyframes ln-gasslag { to { transform: scaleY(-.6); } }
.ln-ravben { stroke: var(--d-rav-mork); stroke-width: 2.2; }
.ln-fot { stroke: var(--d-oga); stroke-width: .7; }
.ln-dom-rygg { fill: color-mix(in oklab, #8a8e98 var(--dm), var(--p-dis)); } .ln-dom-brost { fill: color-mix(in oklab, #e4564a var(--dm), var(--p-dis)); } .ln-dom-hona { fill: color-mix(in oklab, #b8a090 var(--dm), var(--p-dis)); }
.ln-str { fill: color-mix(in oklab, #3a2e2a var(--dm), var(--p-dis)); } .ln-strhuvud { fill: color-mix(in oklab, #6a4a34 var(--dm), var(--p-dis)); }

/* Häger: steg (benen går bara när den flyttar sig), stilla, hugg med fångst, vänd, tillbaka */
.ln-vada { animation: ln-vada var(--T) ease-in-out var(--dl) infinite; }
@keyframes ln-vada { 0% { transform: translateX(0) scaleX(1); } 8%, 22% { transform: translateX(-16px) scaleX(1); } 30%, 46% { transform: translateX(-32px) scaleX(1); } 49% { transform: translateX(-32px) scaleX(-1); } 57%, 72% { transform: translateX(-16px) scaleX(-1); } 80%, 97% { transform: translateX(0) scaleX(-1); } 100% { transform: translateX(0) scaleX(1); } }
.ln-hb1 { transform-origin: 1px -23px; animation: ln-hben var(--T) ease-in-out var(--dl) infinite; }
.ln-hb2 { transform-origin: 5px -23px; animation: ln-hben2 var(--T) ease-in-out var(--dl) infinite; }
@keyframes ln-hben { 0%, 8%, 22%, 30%, 49%, 57%, 72%, 80%, 100% { transform: none; } 2%, 6%, 24%, 28%, 51%, 55%, 74%, 78% { transform: rotate(16deg); } 4%, 26%, 53%, 76% { transform: rotate(-12deg); } }
@keyframes ln-hben2 { 0%, 8%, 22%, 30%, 49%, 57%, 72%, 80%, 100% { transform: none; } 2%, 6%, 24%, 28%, 51%, 55%, 74%, 78% { transform: rotate(-12deg); } 4%, 26%, 53%, 76% { transform: rotate(16deg); } }
.ln-hals { transform-origin: -6px -32px; animation: ln-hugg var(--T) ease-in-out var(--dl) infinite; }
@keyframes ln-hugg { 0%, 33%, 46%, 85%, 94%, 100% { transform: rotate(0); } 35% { transform: rotate(8deg); } 37%, 40% { transform: rotate(-58deg); } 42%, 44% { transform: rotate(-14deg); } 87%, 90% { transform: rotate(-58deg); } }
.ln-fangst { opacity: 0; transform-origin: -22px -50px; animation: ln-fangst var(--T) linear var(--dl) infinite; }
@keyframes ln-fangst { 0%, 39% { opacity: 0; transform: none; } 39.5%, 44% { opacity: 1; transform: none; } 44.5% { transform: rotate(80deg); } 47% { opacity: 1; transform: rotate(90deg) scale(.6); } 48%, 100% { opacity: 0; transform: rotate(90deg) scale(.2); } }
/* Bäver: simmar, svansklatsch, dyker, kommer upp */
.ln-simma { animation: ln-simma var(--T) linear var(--dl) infinite; }
@keyframes ln-simma { 0% { transform: translateX(var(--x0)); opacity: 0; } 3%, 45% { opacity: 1; } 47%, 54% { opacity: 0; } 57%, 97% { opacity: 1; } 100% { transform: translateX(var(--x1)); opacity: 0; } }
.ln-gupp { animation: ln-gupp 2.2s ease-in-out infinite alternate; }
@keyframes ln-gupp { to { transform: translateY(1.5px); } }
.ln-kolv { fill: none; stroke: var(--ln-ljus); stroke-width: 1; opacity: .45; }
.ln-bsvans { transform-origin: -14px 0; animation: ln-bsvans var(--T) ease-in var(--dl) infinite; }
@keyframes ln-bsvans { 0%, 42%, 100% { transform: none; } 43.6% { transform: rotate(55deg); } 44.4% { transform: rotate(-8deg); } 45% { transform: none; } }
.ln-plask { fill: none; stroke: var(--ln-ljus); stroke-width: 1.2; opacity: 0; transform-box: fill-box; transform-origin: center; animation: ln-plask var(--T) ease-out var(--dl) infinite; }
@keyframes ln-plask { 0%, 44.3% { opacity: 0; transform: scale(.4); } 44.5% { opacity: .9; } 49% { opacity: 0; transform: scale(2.8); } 56.9% { opacity: 0; transform: translateX(10px) scale(.4); } 57% { opacity: .7; } 61%, 100% { opacity: 0; transform: translateX(10px) scale(2.2); } }
/* Fisk: båge upp ur vattnet, ringar och stänk */
.ln-hopp { opacity: 0; animation: ln-hopp var(--T) linear var(--dl) infinite; }
@keyframes ln-hopp { 0% { transform: rotate(-105deg); opacity: 0; animation-timing-function: ease-out; } 1% { opacity: 1; } 5% { transform: rotate(0); animation-timing-function: ease-in; } 9% { opacity: 1; } 10%, 100% { transform: rotate(105deg); opacity: 0; } }
.ln-ring { fill: none; stroke: var(--ln-ljus); stroke-width: 1.2; opacity: 0; transform-box: fill-box; transform-origin: center; animation: ln-ring var(--T) ease-out var(--dl) infinite; }
.ln-ring2 { animation-name: ln-ring2; }
@keyframes ln-ring { 0% { transform: scale(.3); opacity: 0; } 1% { opacity: .8; } 7%, 100% { transform: scale(2.6); opacity: 0; } }
@keyframes ln-ring2 { 0%, 9% { transform: scale(.3); opacity: 0; } 10% { opacity: .8; } 17%, 100% { transform: scale(2.6); opacity: 0; } }
.ln-dropp { fill: var(--ln-ljus); opacity: 0; animation: ln-dropp1 var(--T) ease-out var(--dl) infinite; } .ln-dropp2 { animation-name: ln-dropp2; }
@keyframes ln-dropp1 { 0% { opacity: 0; transform: none; } .5% { opacity: .9; } 4% { transform: translate(var(--dx), var(--dy)); } 6%, 100% { opacity: 0; transform: translate(calc(var(--dx) * 1.4), 2px); } }
@keyframes ln-dropp2 { 0%, 9.5% { opacity: 0; transform: none; } 10% { opacity: .9; } 13% { transform: translate(var(--dx), var(--dy)); } 15%, 100% { opacity: 0; transform: translate(calc(var(--dx) * 1.4), 2px); } }
/* Örn: ellipsbana av två förskjutna pendlar, några vingslag ibland */
.ln-cx { animation: ln-cx var(--T) ease-in-out var(--dl) infinite alternate; }
.ln-cy { animation: ln-cy var(--T) ease-in-out var(--dl2) infinite alternate; }
.ln-bank { animation: ln-bank var(--T) ease-in-out var(--dl) infinite alternate; }
@keyframes ln-cx { from { transform: translateX(calc(var(--r) * -1)); } to { transform: translateX(var(--r)); } }
@keyframes ln-cy { from { transform: translateY(calc(var(--ry) * -1)); } to { transform: translateY(var(--ry)); } }
@keyframes ln-bank { from { transform: rotate(-7deg); } to { transform: rotate(7deg); } }
.ln-slag { transform-origin: 0 0; animation: ln-slag 11s ease-in-out var(--dl) infinite; }
@keyframes ln-slag { 0%, 78%, 100% { transform: none; } 81%, 87%, 93% { transform: scaleY(-.35); } 84%, 90% { transform: scaleY(1.1); } }
/* Ren: ledet går (benen växlar, huvudet nickar), de andra betar */
.ln-led { animation: ln-led var(--T) linear var(--dl) infinite; }
@keyframes ln-led { from { transform: translateX(var(--x0)); } to { transform: translateX(var(--x1)); } }
.ln-gar :is(.ln-benA, .ln-benB) { transform-box: fill-box; transform-origin: 50% 0; animation: ln-steg var(--st) ease-in-out infinite alternate; }
.ln-gar .ln-benB { animation-delay: calc(var(--st) * -1); }
@keyframes ln-steg { from { transform: skewX(-14deg); } to { transform: skewX(14deg); } }
.ln-renhuvud { transform-origin: 15px -24px; }
.ln-gar .ln-renhuvud { animation: ln-nick var(--st) ease-in-out infinite alternate; }
@keyframes ln-nick { to { transform: rotate(6deg); } }
.ln-betar .ln-renhuvud { animation: ln-bete var(--T) ease-in-out var(--dl) infinite; }
@keyframes ln-bete { 0%, 10% { transform: rotate(0); } 18%, 60% { transform: rotate(58deg); } 62%, 64% { transform: rotate(50deg); } 66%, 78% { transform: rotate(58deg); } 86%, 100% { transform: rotate(0); } }
/* Rådjur: betar, spanar, skuttar i väg i bågar, kommer tillbaka */
.ln-skutt { animation: ln-skutt var(--T) ease-in-out var(--dl) infinite; }
@keyframes ln-skutt { 0%, 54% { transform: translate(0, 0); opacity: 1; } 57% { transform: translate(50px, -18px); } 60% { transform: translate(100px, 0); } 63% { transform: translate(150px, -18px); } 66% { transform: translate(200px, 0); } 69% { transform: translate(250px, -18px); } 72% { transform: translate(300px, 0); opacity: 1; } 75% { transform: translate(340px, -10px); opacity: 0; } 90% { transform: translate(0, 0); opacity: 0; } 95%, 100% { transform: translate(0, 0); opacity: 1; } }
.ln-radhuvud { transform-origin: 12px -21px; animation: ln-spana var(--T) ease-in-out var(--dl) infinite; }
@keyframes ln-spana { 0%, 18% { transform: rotate(55deg); } 22%, 30% { transform: rotate(0); } 34%, 44% { transform: rotate(55deg); } 47%, 94% { transform: rotate(0); } 99%, 100% { transform: rotate(55deg); } }
/* Fjäril: sicksack och vingslag */
.ln-fladder { animation: ln-fladder var(--T) ease-in-out var(--dl) infinite; }
@keyframes ln-fladder { 0%, 100% { transform: translate(0, 0); } 10% { transform: translate(30px, -18px); } 20% { transform: translate(55px, 6px); } 30% { transform: translate(80px, -22px); } 40% { transform: translate(120px, -4px); } 50% { transform: translate(140px, -30px); } 60% { transform: translate(110px, -10px); } 70% { transform: translate(80px, -34px); } 80% { transform: translate(50px, -8px); } 90% { transform: translate(20px, -26px); } }
.ln-vinge { transform-box: fill-box; transform-origin: center; animation: ln-vinge .16s ease-in-out infinite alternate; }
@keyframes ln-vinge { to { transform: scaleX(.2); } }
/* Säl: andas, huvud och bakfenor upp i en båge, kliar sig med framfenan */
.ln-andas { transform-origin: 0 0; animation: ln-andas 4.4s ease-in-out var(--dl) infinite; }
@keyframes ln-andas { 50% { transform: scale(1.015, 1.06); } }
.ln-salhuvud { transform-origin: -13px -4px; animation: ln-salhuvud var(--T) ease-in-out var(--dl) infinite; }
.ln-salstjart { transform-origin: 13px -2px; animation: ln-salstjart var(--T) ease-in-out var(--dl) infinite; }
@keyframes ln-salhuvud { 0%, 28%, 66%, 100% { transform: rotate(0); } 36%, 58% { transform: rotate(28deg); } 46% { transform: rotate(22deg); } 80%, 88% { transform: rotate(-6deg); } }
@keyframes ln-salstjart { 0%, 34%, 62%, 100% { transform: rotate(0); } 42%, 54% { transform: rotate(-32deg); } 48% { transform: rotate(-24deg); } }
.ln-salfena { transform-origin: -6px -2.6px; animation: ln-salfena var(--T) ease-in-out var(--dl) infinite; }
@keyframes ln-salfena { 0%, 76%, 92%, 100% { transform: none; } 79%, 83%, 87% { transform: rotate(-70deg); } 81%, 85%, 89% { transform: rotate(-40deg); } }
/* Mås: glider i vågig bana, slår med vingarna i korta tag */
.ln-glid { animation: ln-led var(--T) linear var(--dl) infinite; }
.ln-gung { animation: ln-gung var(--gt) ease-in-out infinite alternate; }
@keyframes ln-gung { from { transform: translateY(-12px); } to { transform: translateY(12px); } }
.ln-mas { transform-box: fill-box; transform-origin: 50% 70%; animation: ln-mas 7s ease-in-out var(--dl) infinite; }
@keyframes ln-mas { 0%, 70%, 100% { transform: none; } 73%, 79%, 85% { transform: scaleY(-.6); } 76%, 82% { transform: scaleY(1.2); } }
/* Uggla: blinkar, vrider på huvudet, burrar upp sig och sträcker en vinge */
.ln-uggvrid { animation: ln-uggvrid var(--T) ease-in-out var(--dl) infinite; }
@keyframes ln-uggvrid { 0%, 36%, 100% { transform: none; } 40%, 58% { transform: translateX(3px) rotate(9deg); } 62%, 78% { transform: none; } 82%, 94% { transform: translateX(-3px) rotate(-11deg); } }
.ln-blink { transform-box: fill-box; transform-origin: center; animation: ln-blink 5.5s ease-in-out var(--dl) infinite; }
@keyframes ln-blink { 0%, 90%, 96%, 100% { transform: none; } 92%, 94% { transform: scaleY(.1); } }
.ln-uggkropp { transform-origin: 0 0; animation: ln-burra var(--T) ease-in-out var(--dl) infinite; }
@keyframes ln-burra { 0%, 14%, 26%, 100% { transform: none; } 18%, 22% { transform: scale(1.12, 1.04); } }
.ln-uggvinge { transform-origin: 8px -22px; animation: ln-uggvinge var(--T) ease-in-out var(--dl) infinite; }
@keyframes ln-uggvinge { 0%, 64%, 76%, 100% { transform: none; } 67%, 73% { transform: rotate(-58deg) scaleX(1.3); } 70% { transform: rotate(-52deg) scaleX(1.3); } }
/* Hackspett: trumskurar med flisor, klättrar uppåt i ryck */
.ln-klattra { animation: ln-klattra calc(var(--T) * 4) ease-in-out var(--dl) infinite; }
@keyframes ln-klattra { 0%, 20% { transform: translateY(0); opacity: 1; } 23%, 42% { transform: translateY(-16px); } 45%, 64% { transform: translateY(-32px); } 67%, 84% { transform: translateY(-48px); opacity: 1; } 88%, 92% { transform: translateY(-48px); opacity: 0; } 96%, 100% { transform: translateY(0); opacity: 1; } }
.ln-pick { transform-origin: 7px -13px; animation: ln-pick var(--T) linear var(--dl) infinite; }
@keyframes ln-pick { 0%, 2%, 4%, 6%, 8%, 10%, 100% { transform: rotate(0); } 1%, 3%, 5%, 7%, 9% { transform: rotate(-22deg); } 30% { transform: rotate(-6deg); } 34% { transform: rotate(10deg); } 38% { transform: none; } }
/* Igelkott: tassar i ryck med trippande ben, stannar och nosar, vänder */
.ln-tassa { animation: ln-tassa var(--T) ease-in-out var(--dl) infinite; }
@keyframes ln-tassa { 0% { transform: translateX(560px) scaleX(1); } 8%, 16% { transform: translateX(640px) scaleX(1); } 22%, 30% { transform: translateX(720px) scaleX(1); } 38%, 46% { transform: translateX(820px) scaleX(1); } 50% { transform: translateX(820px) scaleX(-1); } 58%, 66% { transform: translateX(720px) scaleX(-1); } 74%, 82% { transform: translateX(640px) scaleX(-1); } 92%, 96% { transform: translateX(560px) scaleX(-1); } 100% { transform: translateX(560px) scaleX(1); } }
.ln-trippa { animation: ln-trippa .22s ease-in-out infinite alternate; }
@keyframes ln-trippa { to { transform: translateY(-1px); } }
.ln-igben { transform-box: fill-box; transform-origin: 50% 0; animation: ln-igsteg .22s ease-in-out infinite alternate; } .ln-igbenB { animation-delay: -.22s; }
@keyframes ln-igsteg { from { transform: skewX(-24deg); } to { transform: skewX(24deg); } }
.ln-nos { transform-origin: 6px -6px; animation: ln-nos 1.3s ease-in-out infinite; }
@keyframes ln-nos { 0%, 40%, 100% { transform: none; } 50%, 70% { transform: rotate(-5deg); } 60% { transform: rotate(-2deg); } }
/* Trollslända: står still i luften, rycker i väg */
.ln-slanda { animation: ln-slanda var(--T) ease-in-out var(--dl) infinite; }
@keyframes ln-slanda { 0%, 18% { transform: translate(0, 0); } 22%, 40% { transform: translate(60px, -14px); } 44%, 58% { transform: translate(20px, -30px); } 62%, 80% { transform: translate(-40px, -8px); } 84%, 100% { transform: translate(0, 0); } }
.ln-svinge { transform-origin: 2px 0; animation: ln-surr .05s linear infinite alternate; }
@keyframes ln-surr { to { transform: scaleY(-.6); } }
/* Ejder: driver fram och tillbaka */
.ln-drift { animation: ln-drift var(--sv) ease-in-out var(--sd) infinite alternate; }
@keyframes ln-drift { from { transform: translateX(-26px); } to { transform: translateX(26px); } }
/* Ekorre: gnager, svansen rycker, hoppar runt på stubben */
.ln-ekhopp { animation: ln-ekhopp var(--T) ease-in-out var(--dl) infinite; }
@keyframes ln-ekhopp { 0%, 44% { transform: none; } 47% { transform: translate(-6px, -12px) scaleX(-1); } 50%, 92% { transform: scaleX(-1); } 95% { transform: translate(6px, -12px); } 98%, 100% { transform: none; } }
.ln-svans { transform-origin: -6px -3px; animation: ln-svans 3.2s ease-in-out var(--dl) infinite; }
@keyframes ln-svans { 0%, 60%, 100% { transform: none; } 64%, 72% { transform: rotate(10deg); } 68%, 76% { transform: rotate(-6deg); } }
.ln-gnag { transform-origin: 0 -14px; animation: ln-gnag .28s ease-in-out infinite alternate; }
@keyframes ln-gnag { to { transform: rotate(4deg); } }
/* Trana: bugar, hoppar med utbredda vingar, landar */
.ln-thopp { animation: ln-thopp var(--T) ease-in-out var(--dl) infinite; }
@keyframes ln-thopp { 0%, 36%, 58%, 100% { transform: none; } 38% { transform: translateY(3px); } 44% { transform: translateY(-46px); animation-timing-function: ease-in; } 52% { transform: none; } 54% { transform: translateY(2px); } }
.ln-tvinge { transform-origin: 0 -44px; opacity: 0; animation: ln-tvinge var(--T) ease-in-out var(--dl) infinite; }
@keyframes ln-tvinge { 0%, 33%, 60%, 100% { opacity: 0; transform: scale(.3) rotate(20deg); } 36% { opacity: 1; } 40%, 48% { transform: none; } 44%, 52% { transform: rotate(-24deg) scaleY(.7); } 57% { opacity: 1; } }
.ln-tbuga { transform-origin: 8px -42px; animation: ln-tbuga var(--T) ease-in-out var(--dl) infinite; }
@keyframes ln-tbuga { 0%, 14%, 30%, 70%, 100% { transform: none; } 19%, 25% { transform: rotate(72deg); } 40%, 52% { transform: rotate(-14deg); } 76%, 84% { transform: rotate(-6deg); } }
.ln-tben { transform-origin: 0 -30px; animation: ln-tben var(--T) ease-in-out var(--dl) infinite; }
@keyframes ln-tben { 0%, 39%, 50%, 100% { transform: none; } 43%, 46% { transform: scaleY(.7) skewX(-20deg); } }
/* Räv: lufsar, lyssnar, gör ett högt språng och dyker ner i snön; snön yr */
.ln-musa { animation: ln-musa var(--T) ease-in-out var(--dl) infinite; }
@keyframes ln-musa { 0% { transform: translateX(-90px); opacity: 1; animation-timing-function: linear; } 28%, 44% { transform: translateX(40px); } 47% { transform: translate(36px, 4px) rotate(-6deg); } 53% { transform: translate(86px, -70px) rotate(-30deg); animation-timing-function: ease-in; } 58% { transform: translate(126px, -6px) rotate(72deg); opacity: 1; } 59%, 66% { transform: translate(130px, 4px) rotate(80deg); opacity: 0; } 70% { transform: translate(132px, 0); opacity: 0; } 74% { transform: translate(132px, 0); opacity: 1; } 78% { transform: translate(132px, 0) scaleX(-1); animation-timing-function: linear; } 98% { transform: translateX(-90px) scaleX(-1); } 100% { transform: translateX(-90px); } }
.ln-ravbenA, .ln-ravbenB { transform-box: fill-box; transform-origin: 50% 0; animation: ln-ravsteg var(--T) linear var(--dl) infinite; } .ln-ravbenB { animation-name: ln-ravsteg2; }
@keyframes ln-ravsteg { 0%, 28%, 44%, 78%, 98%, 100% { transform: none; } 2.5%, 7.5%, 12.5%, 17.5%, 22.5%, 80.5%, 85.5%, 90.5%, 95.5% { transform: skewX(20deg); } 5%, 10%, 15%, 20%, 25%, 83%, 88%, 93% { transform: skewX(-20deg); } 49%, 56% { transform: skewX(-36deg); } }
@keyframes ln-ravsteg2 { 0%, 28%, 44%, 78%, 98%, 100% { transform: none; } 2.5%, 7.5%, 12.5%, 17.5%, 22.5%, 80.5%, 85.5%, 90.5%, 95.5% { transform: skewX(-20deg); } 5%, 10%, 15%, 20%, 25%, 83%, 88%, 93% { transform: skewX(20deg); } 49%, 56% { transform: skewX(36deg); } }
.ln-ravhuvud { transform-origin: 11px -14px; animation: ln-lyssna var(--T) ease-in-out var(--dl) infinite; }
@keyframes ln-lyssna { 0%, 29%, 46%, 100% { transform: none; } 32%, 36% { transform: rotate(22deg); } 39%, 43% { transform: rotate(32deg) translateY(1px); } }
.ln-snopuff circle { fill: var(--ln-sno); opacity: 0; animation: ln-puff var(--T) ease-out var(--dl) infinite; }
@keyframes ln-puff { 0%, 57.5% { opacity: 0; transform: none; } 58.5% { opacity: .95; } 66%, 100% { opacity: 0; transform: translate(var(--px), var(--py)) scale(1.6); } }
/* Domherre: burrar upp sig, hoppar ett steg och vänder */
.ln-hoppa { animation: ln-hoppa var(--T) ease-in-out var(--dl) infinite; }
@keyframes ln-hoppa { 0%, 30% { transform: none; } 33% { transform: translate(7px, -7px); } 36%, 60% { transform: translateX(14px); } 62% { transform: translateX(14px) scaleX(-1); } 65% { transform: translate(7px, -7px) scaleX(-1); } 68%, 95% { transform: scaleX(-1); } 97%, 100% { transform: none; } }
.ln-puff { transform-origin: 0 -4px; animation: ln-burra var(--T) ease-in-out var(--dl) infinite; }
/* Strömstare: niger, dyker i strömmen, kommer tillbaka */
.ln-doppa { animation: ln-doppa var(--T) ease-in-out var(--dl) infinite; }
@keyframes ln-doppa { 0%, 56% { transform: none; opacity: 1; } 60% { transform: translate(14px, -10px) rotate(20deg); } 64% { transform: translate(30px, 16px) rotate(70deg); opacity: 0; } 84% { transform: translate(-4px, 14px); opacity: 0; } 88% { transform: translate(-2px, -6px); opacity: 1; } 91%, 100% { transform: none; } }
.ln-nigning { transform-origin: 0 0; animation: ln-nig .7s ease-in-out infinite alternate; }
@keyframes ln-nig { to { transform: scaleY(.84) translateY(.4px); } }
/* Myren, Vinterskogen, Forsen + scenernas småsaker (stenar, näckrosor, ormbunkar, tuvull, stänk, snö, fors) */
#m-myren { --ln-h1: #101626; --ln-h2: #6a4a50; --ln-sol: #f0a878; --ln-0: #24303a; --ln-skog: #162228; --ln-1: #2e3226; --ln-2: #262a1e; --ln-3: #171a12; --ln-vatten: #2a3448; --ln-t0: #14221a; --ln-t1: #3a4a2a; --ln-stam: #2a221c; --ln-tallst: #3a2a20; --ln-djur: #0a0a0a; --ln-ljus: #c8c0b4; --ln-moln: #2c3046; --ln-tuva: #3a3824; }
[data-theme="light"] #m-myren { --ln-h1: #a4c8e4; --ln-h2: #f6e8d0; --ln-sol: #fff0c4; --ln-0: #7a9a7a; --ln-skog: #4a6e50; --ln-1: #b0a468; --ln-2: #9a9054; --ln-3: #6e7a3a; --ln-vatten: #8ab4d0; --ln-t0: #2f5a40; --ln-t1: #7a9a4a; --ln-stam: #5a4636; --ln-tallst: #8a5a3c; --ln-djur: #3a3430; --ln-ljus: #fff; --ln-moln: #fff; --ln-tuva: #8a8a44; }
#m-vinterskogen { --ln-h1: #0c1224; --ln-h2: #3a3c5a; --ln-sol: #e8c8a0; --ln-0: #2a3250; --ln-sno: #8a96b8; --ln-skog: #141c2a; --ln-1: #6a7494; --ln-2: #7a84a4; --ln-3: #5a6484; --ln-t0: #101c1c; --ln-stam: #241c18; --ln-bjst: #8a8a90; --ln-djur: #08090c; --ln-ljus: #d8dce8; --ln-moln: #262c44; }
[data-theme="light"] #m-vinterskogen { --ln-h1: #b4cce4; --ln-h2: #f2ecec; --ln-sol: #fff6e0; --ln-0: #9aaac4; --ln-sno: #fff; --ln-skog: #4a6458; --ln-1: #e4eaf2; --ln-2: #eef2f8; --ln-3: #dfe6f0; --ln-t0: #2a4a3c; --ln-stam: #4a3a30; --ln-bjst: #eceae2; --ln-djur: #3a3a40; --ln-ljus: #fff; --ln-moln: #fff; }
#m-forsen { --ln-h1: #0e1626; --ln-h2: #4a4256; --ln-sol: #e8b080; --ln-0: #263044; --ln-skog: #121e1e; --ln-1: #1c2826; --ln-2: #2a282a; --ln-3: #181618; --ln-vatten: #1e2e40; --ln-t0: #10201a; --ln-t1: #22382a; --ln-stam: #241c18; --ln-tallst: #3a2a20; --ln-djur: #08090a; --ln-ljus: #d0d8e0; --ln-moln: #283046; }
[data-theme="light"] #m-forsen { --ln-h1: #94c4e8; --ln-h2: #eef0e0; --ln-sol: #fff2c8; --ln-0: #86a2b4; --ln-skog: #3e6450; --ln-1: #5e8660; --ln-2: #8c8480; --ln-3: #6a625e; --ln-vatten: #5a92b8; --ln-t0: #2c5440; --ln-t1: #5a8a4a; --ln-stam: #4a3a30; --ln-tallst: #8a5a3c; --ln-djur: #3a3a40; --ln-ljus: #fff; --ln-moln: #fff; }
.ln-stenljus { fill: #fff; opacity: .18; } .ln-mossa { fill: var(--ln-t1, #5a7a3a); opacity: .85; }
.ln-nack { fill: #4a7a3a; } :root:not([data-theme="light"]) .ln-nack { fill: #1e3020; }
.ln-nackblom { fill: #f6f2ec; } :root:not([data-theme="light"]) :is(.ln-nackblom, .ln-trift, .ln-bar) { opacity: .5; }
.ln-segel { fill: #f4f2ee; } :root:not([data-theme="light"]) .ln-segel { fill: #8a8e98; } .ln-skrov { fill: #3a2c28; }
.ln-spricka { fill: none; stroke: #000; stroke-width: 1.6; stroke-linecap: round; opacity: .22; }
.ln-glans { fill: none; stroke: var(--ln-ljus); stroke-width: 2; stroke-linecap: round; opacity: .2; }
.ln-lav ellipse { fill: #d8c050; opacity: .6; } :root:not([data-theme="light"]) .ln-lav ellipse { opacity: .2; }
.ln-triftstra, .ln-tuvstra { fill: none; stroke: #5a7a3a; stroke-width: 1.2; stroke-linecap: round; } .ln-trift { fill: #e890b4; }
:root:not([data-theme="light"]) :is(.ln-triftstra, .ln-tuvstra) { stroke: #22301e; }
.ln-tuvull { fill: #f8f6f0; } :root:not([data-theme="light"]) .ln-tuvull { fill: #8a8a88; }
.ln-stank circle { fill: var(--ln-ljus); opacity: 0; animation: ln-stank var(--T) ease-out var(--dl) infinite; }
@keyframes ln-stank { 0%, 70% { opacity: 0; transform: none; } 72% { opacity: .8; } 82% { transform: translate(var(--dx), var(--dy)); } 92%, 100% { opacity: 0; transform: translate(calc(var(--dx) * 1.5), 4px); } }
.ln-stubbe { fill: var(--ln-stam); } .ln-arsring { fill: #c8a878; } :root:not([data-theme="light"]) .ln-arsring { fill: #4a3e30; }
.ln-arsringar { fill: none; stroke: #8a6a48; stroke-width: 1; opacity: .6; }
.ln-ormblad { fill: none; stroke: var(--ln-t1, #4a7a3a); stroke-linecap: round; } .ln-ormstam { fill: none; stroke: var(--ln-t0); stroke-width: 1.2; }
.ln-blad ellipse { fill: #2e5a2a; } :root:not([data-theme="light"]) .ln-blad ellipse { fill: #142218; } .ln-bar circle { fill: #d02a2a; }
.ln-damm circle { fill: #fff8d0; opacity: 0; animation: ln-damm var(--sv) ease-in-out var(--sd) infinite; }
@keyframes ln-damm { 0%, 100% { opacity: 0; transform: none; } 50% { opacity: .8; transform: translate(18px, -24px); } }
:root:not([data-theme="light"]) .ln-damm { display: none; }
.ln-gransno { fill: var(--ln-sno); }
.ln-gol { fill: var(--ln-vatten); } .ln-tuva path { fill: var(--ln-tuva); }
.ln-dimma ellipse { fill: var(--ln-ljus); opacity: .14; filter: blur(10px); animation: ln-dimma var(--sv) ease-in-out var(--sd) infinite alternate; }
@keyframes ln-dimma { from { transform: translateX(-80px); } to { transform: translateX(80px); opacity: .26; } }
.ln-spar ellipse { fill: var(--ln-3); opacity: .7; }
.ln-snokant { fill: none; stroke: var(--ln-sno); stroke-width: 5; stroke-linecap: round; }
.ln-snofall circle { fill: #fff; opacity: .85; animation: ln-snofall var(--sv) linear var(--sd) infinite; }
:root:not([data-theme="light"]) .ln-snofall circle { opacity: .55; }
@keyframes ln-snofall { from { transform: none; } 50% { transform: translate(calc(var(--sx) * .3), 470px); } to { transform: translate(var(--sx), 940px); } }
.ln-flod path { fill: none; stroke: var(--ln-ljus); stroke-width: 1.4; stroke-linecap: round; opacity: .35; animation: ln-flod var(--sv) linear infinite; }
@keyframes ln-flod { to { stroke-dashoffset: -80; } }
.ln-hylla { fill: var(--ln-2); }
.ln-fall path { fill: none; stroke: var(--ln-ljus); stroke-width: 6; stroke-linecap: round; stroke-dasharray: 10 8; opacity: .6; animation: ln-flod var(--sv) linear infinite; }
/* Höstskogen, Sanddynerna, Vårbäcken, Viken + älg, tärna, hare, svan */
#m-hostskogen { --ln-h1: #121424; --ln-h2: #6a4440; --ln-sol: #f0a060; --ln-0: #2a2e3c; --ln-skog: #1e2224; --ln-1: #2e2a20; --ln-2: #262418; --ln-3: #1a1610; --ln-t0: #121e18; --ln-t1: #5a2e18; --ln-stam: #2a201a; --ln-bjst: #8a8680; --ln-djur: #0a0908; --ln-ljus: #c8b8a4; --ln-moln: #2c2c40; --ln-hostgul: #5a4818; --ln-hostbryn: #3a2a1a; }
[data-theme="light"] #m-hostskogen { --ln-h1: #9ec0dc; --ln-h2: #f6e2c4; --ln-sol: #ffe8b4; --ln-0: #8a9aa8; --ln-skog: #8a6a3a; --ln-1: #b08a48; --ln-2: #8a7a3a; --ln-3: #5a5a2a; --ln-t0: #2c4a38; --ln-t1: #cc5e22; --ln-stam: #4a3a30; --ln-bjst: #eceae2; --ln-djur: #3a3430; --ln-ljus: #fff; --ln-moln: #fff; --ln-hostgul: #e4a82a; --ln-hostbryn: #c0702e; }
#m-dynerna { --ln-h1: #0e1628; --ln-h2: #6a5060; --ln-sol: #f4b880; --ln-vatten: #1e2c44; --ln-1: #4a4234; --ln-3: #3a3428; --ln-djur: #0a0a0a; --ln-ljus: #d0ccc4; --ln-moln: #2c3248; --ln-strand: #2a2a2a; }
[data-theme="light"] #m-dynerna { --ln-h1: #84bfe8; --ln-h2: #f4ecdc; --ln-sol: #fff2cc; --ln-vatten: #4a96c4; --ln-1: #ecd8a8; --ln-3: #dcc08a; --ln-djur: #3a3a3a; --ln-ljus: #fff; --ln-moln: #fff; --ln-strand: #c8b48a; }
#m-dynerna .ln-vass { stroke: color-mix(in oklab, var(--ln-3), #6a7a3a 50%); }
#m-varbacken { --ln-h1: #101a2a; --ln-h2: #4a5050; --ln-sol: #e8c890; --ln-0: #20302c; --ln-skog: #162420; --ln-1: #1e2c1c; --ln-3: #121c10; --ln-vatten: #1e2c3c; --ln-t1: #2a3c22; --ln-stam: #241c16; --ln-bjst: #8a8a84; --ln-djur: #0a0a0a; --ln-ljus: #c8ccc4; --ln-moln: #262c3c; }
[data-theme="light"] #m-varbacken { --ln-h1: #9ccbec; --ln-h2: #f2f4e2; --ln-sol: #fff8d4; --ln-0: #86aa8a; --ln-skog: #5e8a5a; --ln-1: #9cc46a; --ln-3: #6a9a44; --ln-vatten: #6aa8cc; --ln-t1: #a4cc5c; --ln-stam: #5a4636; --ln-bjst: #f0eee6; --ln-djur: #3a3430; --ln-ljus: #fff; --ln-moln: #fff; }
#m-viken { --ln-h1: #1a1a34; --ln-h2: #c07858; --ln-sol: #ffb870; --ln-0: #3a3450; --ln-skog: #1a2028; --ln-1: #22262c; --ln-2: #2e2a2c; --ln-3: #141618; --ln-vatten: #3a3448; --ln-t0: #121c1a; --ln-t1: #22342a; --ln-stam: #2a221c; --ln-tallst: #3a2a20; --ln-bjst: #8a8a90; --ln-djur: #0a0a0a; --ln-ljus: #f0c8a0; --ln-moln: #3a3050; }
[data-theme="light"] #m-viken { --ln-h1: #a8b8e0; --ln-h2: #fce0c0; --ln-sol: #fff0c0; --ln-0: #9a9ab8; --ln-skog: #3e6450; --ln-1: #5e7a68; --ln-2: #8a8486; --ln-3: #4a6a48; --ln-vatten: #a0b4d4; --ln-t0: #2c5440; --ln-t1: #6a9a4a; --ln-stam: #4a3a30; --ln-tallst: #8a5a3c; --ln-bjst: #eceae2; --ln-djur: #3a3a40; --ln-ljus: #fff; --ln-moln: #fff; }
.ln-hostgul { fill: var(--ln-hostgul); } .ln-hostbryn { fill: var(--ln-hostbryn); } .ln-strand { fill: var(--ln-strand); }
.ln-host0 { fill: #d8662a; } .ln-host1 { fill: #e8b030; } .ln-host2 { fill: #b03a22; }
:root:not([data-theme="light"]) .ln-lovfall { opacity: .45; }
.ln-lovfall path { transform-box: fill-box; transform-origin: center; animation: ln-lovfall var(--sv) linear var(--sd) infinite; }
@keyframes ln-lovfall { from { transform: none; } 25% { transform: translate(calc(var(--sx) * .5), 230px) rotate(160deg); } 50% { transform: translate(calc(var(--sx) * -.2), 460px) rotate(340deg); } 75% { transform: translate(calc(var(--sx) * .7), 690px) rotate(520deg); } to { transform: translate(var(--sx), 920px) rotate(720deg); } }
.ln-fagelspar path { fill: none; stroke: var(--ln-3); stroke-width: 1.2; opacity: .6; }
/* Älg: kliver fram, betar sälgkvistar och tuggar, lyssnar, vänder och går */
.ln-algben { fill: none; stroke: var(--d-alg-ben); stroke-width: 2.6; stroke-linecap: round; }
.ln-algljus { fill: #fff; opacity: .12; }
.ln-algga { animation: ln-algga var(--T) linear var(--dl) infinite; }
@keyframes ln-algga { 0% { transform: translateX(-90px); opacity: 0; } 4% { opacity: 1; } 22%, 76% { transform: none; } 78% { transform: scaleX(-1); } 96% { opacity: 1; } 98% { transform: translateX(-90px) scaleX(-1); opacity: 0; } 100% { transform: translateX(-90px); opacity: 0; } }
.ln-algbenA, .ln-algbenB { transform-box: fill-box; transform-origin: 50% 0; animation: ln-algsteg var(--T) linear var(--dl) infinite; } .ln-algbenB { animation-name: ln-algsteg2; }
@keyframes ln-algsteg { 0%, 22%, 78%, 98%, 100% { transform: none; } 2.75%, 8.25%, 13.75%, 19.25%, 80.75%, 86.25%, 91.75% { transform: skewX(14deg); } 5.5%, 11%, 16.5%, 83.5%, 89%, 94.5% { transform: skewX(-14deg); } }
@keyframes ln-algsteg2 { 0%, 22%, 78%, 98%, 100% { transform: none; } 2.75%, 8.25%, 13.75%, 19.25%, 80.75%, 86.25%, 91.75% { transform: skewX(-14deg); } 5.5%, 11%, 16.5%, 83.5%, 89%, 94.5% { transform: skewX(14deg); } }
.ln-alghuvud { transform-origin: 18px -42px; animation: ln-algbeta var(--T) ease-in-out var(--dl) infinite; }
@keyframes ln-algbeta { 0%, 24%, 74%, 100% { transform: none; } 28%, 34%, 40%, 46%, 64%, 70% { transform: rotate(30deg); } 31%, 37%, 43%, 67% { transform: rotate(25deg); } 50%, 60% { transform: rotate(-6deg); } }
/* Fisktärna: fladdrar och står still, störtdyker, plaskar och stiger */
.ln-tarnvinge { fill: color-mix(in oklab, #c8ccd2 var(--dm), var(--p-dis)); } .ln-tarnnabb { fill: color-mix(in oklab, #d8402a var(--dm), var(--p-dis)); }
.ln-tslag { transform-origin: 0 -1.6px; animation: ln-tslag .22s ease-in-out infinite alternate; } .ln-tslag2 { animation-direction: alternate-reverse; opacity: .75; }
@keyframes ln-tslag { to { transform: scaleY(-.7); } }
.ln-tarnflyg { animation: ln-tarnflyg var(--T) ease-in-out var(--dl) infinite; }
@keyframes ln-tarnflyg { 0%, 100% { transform: translateX(-40px); opacity: 1; } 40%, 52% { transform: translate(40px, -8px); } 46% { transform: translate(42px, -11px); } 56% { transform: translate(42px, -12px) rotate(-10deg); animation-timing-function: ease-in; } 62% { transform: translate(44px, 86px) rotate(80deg); opacity: 1; } 63%, 72% { transform: translate(44px, 86px) rotate(80deg); opacity: 0; } 74% { transform: translate(44px, 82px) rotate(-30deg); opacity: 1; } 86% { transform: translate(10px, -6px) rotate(-10deg); } }
.ln-tarnplask { fill: none; stroke: var(--ln-ljus); stroke-width: 1.2; opacity: 0; transform-box: fill-box; transform-origin: center; animation: ln-tarnplask var(--T) ease-out var(--dl) infinite; }
@keyframes ln-tarnplask { 0%, 61.5% { opacity: 0; transform: scale(.3); } 63% { opacity: .8; } 74%, 100% { opacity: 0; transform: scale(1.8); } }
/* Fälthare: skuttar fram, sätter sig, reser sig och spetsar öronen, skuttar tillbaka */
.ln-harskutt { animation: ln-harskutt var(--T) ease-in-out var(--dl) infinite; }
@keyframes ln-harskutt { 0% { transform: translateX(-150px); } 2.5% { transform: translate(-131px, -14px); } 5% { transform: translateX(-112px); } 7.5% { transform: translate(-94px, -14px); } 10% { transform: translateX(-75px); } 12.5% { transform: translate(-56px, -14px); } 15% { transform: translateX(-37px); } 17.5% { transform: translate(-19px, -14px); } 20%, 60% { transform: none; } 62% { transform: scaleX(-1); } 64.5% { transform: translate(-19px, -14px) scaleX(-1); } 67% { transform: translateX(-37px) scaleX(-1); } 69.5% { transform: translate(-56px, -14px) scaleX(-1); } 72% { transform: translateX(-75px) scaleX(-1); } 74.5% { transform: translate(-94px, -14px) scaleX(-1); } 77% { transform: translateX(-112px) scaleX(-1); } 79.5% { transform: translate(-131px, -14px) scaleX(-1); } 82%, 97% { transform: translateX(-150px) scaleX(-1); } 100% { transform: translateX(-150px); } }
.ln-harres { transform-origin: -8px 0; animation: ln-harres var(--T) ease-in-out var(--dl) infinite; }
@keyframes ln-harres { 0%, 28%, 50%, 100% { transform: none; } 32%, 46% { transform: rotate(-28deg); } }
.ln-oron { transform-origin: 9px -16px; animation: ln-oron var(--T) ease-in-out var(--dl) infinite; }
@keyframes ln-oron { 0%, 19%, 64%, 81%, 100% { transform: rotate(-24deg); } 22%, 35%, 38%, 41%, 44%, 61%, 84%, 97% { transform: none; } 36.5% { transform: rotate(-10deg); } 42.5% { transform: rotate(10deg); } }
/* Knölsvan: böjer halsen och doppar huvudet */
.ln-svanhals { transform-origin: 7px -6px; animation: ln-svanhals var(--T) ease-in-out var(--dl) infinite; }
@keyframes ln-svanhals { 0%, 50%, 72%, 100% { transform: none; } 56% { transform: rotate(60deg); } 58%, 66% { transform: rotate(95deg); } }
/* Ljungheden, Bokskogen, Älvbrinken, Dammen + orre, vildsvin, utter, kungsfiskare, groda, humla */
#m-ljungheden { --ln-t0: #141e1a; --ln-h1: #141428; --ln-h2: #7a5068; --ln-sol: #f6b48a; --ln-0: #2e2c40; --ln-skog: #1a1e22; --ln-1: #2a2430; --ln-2: #2a2028; --ln-3: #1a1418; --ln-t1: #1e2a22; --ln-stam: #2a221c; --ln-tallst: #3a2a20; --ln-bjst: #8a8680; --ln-djur: #0a0a0a; --ln-ljus: #e4c8c8; --ln-moln: #2e2840; --ln-lj0: #5a3a5a; --ln-lj1: #6a4468; }
[data-theme="light"] #m-ljungheden { --ln-t0: #2c5440; --ln-h1: #a8b4dc; --ln-h2: #fadcd0; --ln-sol: #fff0d0; --ln-0: #9a90b0; --ln-skog: #4a5a50; --ln-1: #8a7a8a; --ln-2: #7a5a74; --ln-3: #5a3e54; --ln-t1: #3e6448; --ln-stam: #4a3a30; --ln-tallst: #8a5a3c; --ln-bjst: #eceae2; --ln-djur: #3a3a3a; --ln-ljus: #fff; --ln-moln: #fff; --ln-lj0: #b46aa8; --ln-lj1: #d28ac4; }
#m-bokskogen { --ln-h1: #121c18; --ln-h2: #2a3a28; --ln-sol: #d8e4a0; --ln-1: #2a241a; --ln-2: #2e261a; --ln-3: #1e1810; --ln-bok0: #262a28; --ln-bok1: #343836; --ln-krona: #1e3020; --ln-djur: #0a0a0a; --ln-ljus: #c8d0b8; --ln-moln: #1e2a20; }
[data-theme="light"] #m-bokskogen { --ln-h1: #c8e4a4; --ln-h2: #eef6d4; --ln-sol: #fffad0; --ln-1: #b0905a; --ln-2: #a07a44; --ln-3: #7a5a32; --ln-bok0: #b4b8b4; --ln-bok1: #8a8e8c; --ln-krona: #8ac25a; --ln-djur: #3a3430; --ln-ljus: #fff; --ln-moln: #fff; }
#m-alvbrinken { --ln-h1: #101828; --ln-h2: #4a5464; --ln-sol: #e8d0a0; --ln-0: #222c38; --ln-skog: #141c1c; --ln-1: #1a2420; --ln-3: #161c14; --ln-vatten: #1c2a38; --ln-t0: #10201a; --ln-t1: #22342a; --ln-stam: #2a221c; --ln-bjst: #8a8a84; --ln-djur: #0a0a0a; --ln-ljus: #c8d0d4; --ln-moln: #242c3c; }
[data-theme="light"] #m-alvbrinken { --ln-h1: #94c0e4; --ln-h2: #e8f0ec; --ln-sol: #fff6d4; --ln-0: #7e98a8; --ln-skog: #3a5a48; --ln-1: #4e6e54; --ln-3: #5a7a40; --ln-vatten: #5a94b8; --ln-t0: #2c5440; --ln-t1: #7aa458; --ln-stam: #4a3a30; --ln-bjst: #eceae2; --ln-djur: #3a3a3a; --ln-ljus: #fff; --ln-moln: #fff; }
#m-dammen { --ln-t0: #121e18; --ln-h1: #0e1a2c; --ln-h2: #4a5a58; --ln-sol: #f0d8a0; --ln-0: #20302a; --ln-skog: #162420; --ln-1: #1e2c1c; --ln-3: #142010; --ln-vatten: #1a2a34; --ln-t1: #22341e; --ln-stam: #241c16; --ln-bjst: #8a8a84; --ln-djur: #0a0a0a; --ln-ljus: #c8d0c4; --ln-moln: #262c3c; --ln-blad: #1a3020; }
[data-theme="light"] #m-dammen { --ln-t0: #121e18; --ln-h1: #8cc4ec; --ln-h2: #f0f6e4; --ln-sol: #fff6cc; --ln-0: #7aa486; --ln-skog: #4e7e4e; --ln-1: #8ebc5c; --ln-3: #5e9640; --ln-vatten: #5a9ab4; --ln-t1: #8cbc4c; --ln-stam: #5a4636; --ln-bjst: #f0eee6; --ln-djur: #3a3430; --ln-ljus: #fff; --ln-moln: #fff; --ln-blad: #4a8a3a; }
.ln-ljung0 { fill: var(--ln-lj0); } .ln-ljung1 { fill: var(--ln-lj1); }
.ln-bokstam0 { fill: var(--ln-bok0); } .ln-bokstam1 { fill: var(--ln-bok1); } .ln-bokkrona { fill: var(--ln-krona); opacity: .92; }
.ln-strimma path { fill: var(--ln-sol); opacity: .05; filter: blur(8px); animation: ln-strimma 12s ease-in-out var(--sd) infinite alternate; }
[data-theme="light"] .ln-strimma path { opacity: .18; }
@keyframes ln-strimma { to { opacity: .14; } }
.ln-nblad { fill: var(--ln-blad); } .ln-nackros { fill: #f4eef0; } .ln-klover circle { fill: #c86a9a; }
:root:not([data-theme="light"]) :is(.ln-nackros, .ln-klover) { opacity: .45; }
/* Orrtupp: bugar med stjärten rest, hoppar upp i spelet */
.ln-orre { fill: color-mix(in oklab, #1a1c24 var(--dm), var(--p-dis)); } .ln-orrvinge { fill: color-mix(in oklab, #3a3430 var(--dm), var(--p-dis)); }
.ln-orrvit { fill: color-mix(in oklab, #f2f0ec var(--dm), var(--p-dis)); } .ln-orrkam { fill: color-mix(in oklab, #e0302a var(--dm), var(--p-dis)); } .ln-orrglans { fill: #4a6ac0; opacity: .5; }
.ln-orrspel { transform-origin: 0 -6px; animation: ln-orrspel var(--T) ease-in-out var(--dl) infinite; }
@keyframes ln-orrspel { 0%, 20%, 38%, 44%, 60%, 76%, 82%, 100% { transform: none; } 24%, 34%, 64%, 72% { transform: rotate(16deg); } 29%, 68% { transform: rotate(13deg) scale(1.05); } 41% { transform: translateY(-16px); } 79% { transform: translateY(-11px) rotate(-6deg); } }
/* Vildsvin: lunkar som älgen (ln-algga), bökar med trynet */
.ln-svin { fill: color-mix(in oklab, #3a2e26 var(--dm), var(--p-dis)); } .ln-svinljus { fill: color-mix(in oklab, #6a564a var(--dm), var(--p-dis)); }
.ln-kulting { fill: color-mix(in oklab, #7a5a3a var(--dm), var(--p-dis)); } .ln-kultrand { fill: none; stroke: color-mix(in oklab, #d8bc8a var(--dm), var(--p-dis)); stroke-width: 1.4; }
.ln-svinben { fill: none; stroke: color-mix(in oklab, #2a201a var(--dm), var(--p-dis)); stroke-width: 3; stroke-linecap: round; }
.ln-bok { transform-origin: 14px -18px; animation: ln-bok var(--T) ease-in-out var(--dl) infinite; }
@keyframes ln-bok { 0%, 24%, 74%, 100% { transform: none; } 28%, 33%, 38%, 43%, 62%, 67% { transform: rotate(24deg); } 30.5%, 35.5%, 40.5%, 64.5%, 69.5% { transform: rotate(18deg) translateX(1px); } 50%, 56% { transform: rotate(-6deg); } }
/* Utter på stenen: böjer ner huvudet och tuggar */
.ln-uttertugg { transform-origin: 2px -20px; animation: ln-uttertugg var(--T) ease-in-out var(--dl) infinite; }
@keyframes ln-uttertugg { 0%, 50%, 100% { transform: none; } 60% { transform: rotate(18deg); } 68% { transform: rotate(10deg); } 76% { transform: rotate(16deg); } 84% { transform: rotate(8deg); } }
/* Kungsfiskare: sitter, störtdyker (samma takt som tärnans plask), flyger tillbaka */
.ln-kfrygg { fill: color-mix(in oklab, #1aa0c8 var(--dm), var(--p-dis)); } .ln-kfbrost { fill: color-mix(in oklab, #e8762a var(--dm), var(--p-dis)); }
.ln-kfdyk { animation: ln-kfdyk var(--T) ease-in-out var(--dl) infinite; }
@keyframes ln-kfdyk { 0%, 50%, 92%, 100% { transform: none; opacity: 1; } 56% { transform: translate(3px, -4px) rotate(-10deg); animation-timing-function: ease-in; } 62% { transform: translate(40px, 82px) rotate(75deg); opacity: 1; } 63%, 72% { transform: translate(40px, 82px) rotate(75deg); opacity: 0; } 74% { transform: translate(36px, 78px) rotate(-40deg); opacity: 1; } 88% { transform: translate(2px, -6px) rotate(-10deg); } }
/* Groda: kväker, hoppar i vattnet (plasket = ln-tarnplask), dyker upp på bladet igen */
.ln-grodmun { fill: none; stroke: var(--d-groda-mork); stroke-width: .5; }
.ln-grodblasa { transform-origin: 7px -6px; animation: ln-kvack 1.6s ease-in-out infinite; }
@keyframes ln-kvack { 0%, 45%, 100% { transform: scale(.2); } 12%, 32% { transform: scale(1.2); } 22% { transform: scale(.9); } }
.ln-grodhopp { animation: ln-grodhopp var(--T) ease-in-out var(--dl) infinite; }
@keyframes ln-grodhopp { 0%, 56%, 96%, 100% { transform: none; opacity: 1; } 59% { transform: translate(30px, -26px) rotate(-10deg); } 62% { transform: translate(60px, 10px) rotate(20deg); opacity: 1; } 63%, 90% { transform: translate(60px, 10px); opacity: 0; } 91% { transform: none; opacity: 0; } }
/* Landningsbildernas djur ett i taget (lnTurer i motiv.js): gömda tills det är deras tur, gången är Web Animations i JS.
   Fjällens lä-sidor (lnSkugga) i skugga. */
.ln-turer .ln-tur:not(.pa) { visibility: hidden; }
.ln-tur :is(.ln-benA, .ln-benB) { transform-box: fill-box; transform-origin: 50% 0; }
.ln-fskugga { fill: #06080e; opacity: .26; }
[data-theme="light"] .ln-fskugga { fill: #1a2a48; opacity: .16; }

/* Tid på dygnet för landningsbilderna och sidfoten ([data-tid] på sektionen resp. .ny-fot__scen, tidNu() + tidHimmel() i motiv.js), oberoende av årstid och ljust/mörkt läge.
   Färgerna lånade från skal-lab/hero-djur.css. Himlen via variablerna på svg:n (barnet slår årstidens värden på sektionen, ingen id-specificitetsstrid). */
.ft-tid, .ft-tton { display: none; }
[data-tid] :is(.ft-tid, .ft-tton) { display: inline; }
.ft-tid > :is(.ft-tglod, .ft-tstj, .ft-tsol, .ft-tmane) { display: none; }
[data-tid="morgon"] > svg { --ft-lh1: #a9c6e0; --ft-lh2: #fde0c4; --ft-h1: #4a5a8a; --ft-h2: #c8805a; }
[data-tid="kvall"] > svg { --ft-lh1: #7d86b8; --ft-lh2: #f7b98a; --ft-h1: #3c3a6e; --ft-h2: #b0583c; }
[data-tid="natt"] > svg { --ft-lh1: #6680ad; --ft-lh2: #c9d0e2; }
:is([data-tid="morgon"], [data-tid="kvall"]) .ft-tglod,
:is([data-tid="kvall"], [data-tid="natt"]) .ft-tstj,
[data-tid]:not([data-tid="natt"]) .ft-tsol, [data-tid="natt"] .ft-tmane { display: inline; }
.ft-tg0 { stop-color: #ffd7b8; stop-opacity: 0; } .ft-tg1 { stop-color: #ffc9a0; stop-opacity: .55; }
[data-tid="kvall"] .ft-tg0 { stop-color: #9c7fc0; } [data-tid="kvall"] .ft-tg1 { stop-color: #ffab6e; stop-opacity: .6; }
:root:not([data-theme="light"]) .ft-tglod { opacity: .5; }
.ft-ts0 { stop-color: #fff3c8; stop-opacity: .55; } .ft-ts1 { stop-color: #ffe2a0; stop-opacity: 0; }
.ft-tsolk { fill: #fff6d8; filter: drop-shadow(0 0 10px rgba(255, 230, 160, .8)); }
[data-tid="morgon"] .ft-tsol { transform: translate(1440px, 380px); } [data-tid="morgon"] .ft-tsolk { fill: #ffe0b0; }
[data-tid="dag"] .ft-tsol { transform: translate(1260px, 140px); }
[data-tid="kvall"] .ft-tsol { transform: translate(1420px, 400px); } [data-tid="kvall"] .ft-tsolk { fill: #ffc58a; }
.ft-tmane { transform: translate(1300px, 170px); }
.ft-tmane > circle:first-child { opacity: .45; }
.ft-tmanek { fill: #f2f0e4; filter: drop-shadow(0 0 8px rgba(230, 236, 255, .7)); }
.ft-tstj circle { fill: #fff; opacity: .45; }
.ft-tstj .ft-tstj0 { animation: ft-tblink 4s ease-in-out infinite alternate; } /* bara var tredje blinkar: SVG ritar om bilden för varje blinkande stjärna */
[data-tid="kvall"] .ft-tstj { opacity: .35; }
@keyframes ft-tblink { from { opacity: .12; } to { opacity: .75; } }
@media (prefers-reduced-motion: reduce) { .ft-tstj .ft-tstj0 { animation: none; } }
/* Tonen som variabel: sidfoten (footer.ny-fot bär också data-tid) lägger samma ton på sin mark, annars syns en kant mot kullen (sida.css). */
.ft-tton { fill: var(--tid-ton, transparent); pointer-events: none; }
[data-tid="morgon"] { --tid-ton: rgba(255, 200, 170, .07); }
[data-tid="kvall"] { --tid-ton: rgba(255, 140, 80, .08); }
[data-theme="light"] [data-tid="natt"] { --tid-ton: rgba(40, 60, 110, .2); }
/* Nattens ljus följer tiden i stället för temat: eldflugor, tända fönster och fyren på kvällen och natten, norrsken bara på natten. */
[data-tid] .ft-eld, [data-tid]:not([data-tid="natt"]) .fl-norr { display: none; }
:is([data-tid="kvall"], [data-tid="natt"]) .ft-eld, [data-tid="natt"] .fl-norr { display: inline; }
:is([data-tid="morgon"], [data-tid="dag"]) .ft-fonster { fill: color-mix(in oklab, #b4d0e2 70%, var(--bg)); filter: none; }
:is([data-tid="kvall"], [data-tid="natt"]) .ft-fonster { fill: #ffcf73; filter: drop-shadow(0 0 6px rgba(255, 190, 90, .7)); }
:is([data-tid="morgon"], [data-tid="dag"]) .ft-fyrljus { filter: none; animation: none; opacity: .6; }
:is([data-tid="kvall"], [data-tid="natt"]) .ft-fyrljus { filter: drop-shadow(0 0 6px #ffd76a) drop-shadow(0 0 14px rgba(255, 210, 100, .6)); animation: ft-fyr 4s ease-in-out infinite; opacity: 1; }
/* Sidfoten (fot() + footern i motiv.js) ser bara himlen ovanför kullarna (y 390–590): solen, månen och stjärnorna flyttas ner dit. */
[id^="m-footern"] .ft-tstj { transform: translateY(380px); }
[id^="m-footern"][data-tid="morgon"] .ft-tsol { transform: translate(1440px, 500px) scale(.7); }
[id^="m-footern"][data-tid="dag"] .ft-tsol { transform: translate(1260px, 450px) scale(.7); }
[id^="m-footern"][data-tid="kvall"] .ft-tsol { transform: translate(1420px, 505px) scale(.7); }
[id^="m-footern"] .ft-tmane { transform: translate(1300px, 455px) scale(.7); }
/* Byts tiden medan sidan står öppen (tidNu() i minuten) tonar himlen över i stället för att hoppa. */
.ft-h1, .ft-h2 { transition: stop-color 4s ease; }
/* Sidfotens himmel är sida.css:s CSS-tonin (svg:ns egen rektangel är dold), så tiden når den via --tid-* på .ny-fot__scen.
   Solen, stjärnorna, skenet och tonen tonas in ovanifrån (#ft-tfade i fot()), annars får de en kant där sidfoten börjar. */
.ny-fot__scen[data-tid="morgon"] { --tid-lh1: #a9c6e0; --tid-lh2: #fde0c4; --tid-h1: #4a5a8a; --tid-h2: #c8805a; }
.ny-fot__scen[data-tid="kvall"] { --tid-lh1: #7d86b8; --tid-lh2: #f7b98a; --tid-h1: #3c3a6e; --tid-h2: #b0583c; }
.ny-fot__scen[data-tid="natt"] { --tid-lh1: #6680ad; --tid-lh2: #c9d0e2; }
.ny-fot__scen :is(.ft-tid, .ft-tton) { mask: url(#ft-tfade); }