/* Djur och söta animationer (djur.html). Laddas efter motiv.css: topplisten, --p-*-paletterna och .vind kommer därifrån.
   Djurens färger blandas mot vandringens --p-dis, så de sjunker in i ljuset precis som landskapet (natten gör dem blå och mörka).
   Figurerna är <symbol>-kopior via <use>: stilregler når dem, men bara ärvda variabler når in, därav --spel och --vd. */
html:has(.dj-scener) { scroll-snap-type: none; }
* { animation-play-state: var(--spel, running) !important; }
.dj-paus { --spel: paused; }

.dj-scener {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(min(360px, 100%), 1fr)); gap: 16px;
  padding: 84px 16px 32px; max-width: 1600px; margin: 0 auto;
}
.dj-scener, .pv, .fjarr-d { --dm: 90%; }
.pv-natt.pv-natt { --dm: 58%; }
.pv-kvall.pv-kvall { --dm: 80%; }
.pv-vinter { --hare-bas: #f4f3ef; }
.dj-kort { margin: 0; border-radius: 18px; overflow: hidden; background: var(--glas-bg); border: 1px solid var(--glas-kant); }
.dj-kort svg { display: block; width: 100%; height: auto; aspect-ratio: 8 / 5; background: linear-gradient(180deg, var(--p-h1), var(--p-h2) 62%, var(--p-h3)); }
.dj-kort figcaption { padding: 10px 14px 12px; font-size: 13px; color: var(--text2); }
.dj-kort figcaption b { display: block; color: var(--text); font-size: 14px; }
.dj-topp h1 { flex: 1; }
@media (max-width: 767px) { .dj-scener { padding-top: 116px; } }

/* ---- landskapet ---- */
.dj-scener, .pv, .fjarr-d { --dx: color-mix(in oklab, var(--p-fg) 30%, transparent); }
.f-sjo { fill: var(--p-sjo); } .f-ang { fill: var(--p-ang); } .f-ang2 { fill: color-mix(in oklab, var(--p-ang) 62%, var(--p-dis)); }
.f-skog { fill: var(--p-skog); } .f-skog2 { fill: color-mix(in oklab, var(--p-skog) 52%, var(--p-dis)); }
.f-fjarr { fill: color-mix(in oklab, var(--p-fjall) 55%, var(--p-dis)); } .f-akr { fill: var(--p-akr); }
.f-stam { fill: var(--p-stam); } .f-stam2 { fill: color-mix(in oklab, var(--p-stam) 55%, var(--p-dis)); } .f-lov { fill: var(--p-lov); }
.f-mossa { fill: var(--p-mossa); } .f-klipp { fill: var(--p-klipp); } .f-klipp2 { fill: color-mix(in oklab, var(--p-klipp) 72%, var(--p-fg)); }
.f-sol { fill: var(--p-sol); } .f-moln { fill: var(--p-moln); } .f-blom { fill: var(--p-blom); } .f-hus { fill: var(--p-hus); } .f-tak { fill: var(--p-tak); }
.f-glans { fill: var(--p-sol); opacity: .4; } .f-puff { fill: color-mix(in oklab, var(--p-ang) 45%, #fff); }
.f-glod { fill: var(--p-sken); opacity: .5; filter: blur(22px); }

/* ---- djurens färger ---- */
.dj-scener, .pv, .fjarr-d, .ln, .ft-djur {
  --d-and: color-mix(in oklab, #8d6a48 var(--dm), var(--p-dis)); --d-and-vinge: color-mix(in oklab, #664a32 var(--dm), var(--p-dis)); --d-spegel: color-mix(in oklab, #3f63b0 var(--dm), var(--p-dis));
  --d-unge: color-mix(in oklab, #f0cf5a var(--dm), var(--p-dis)); --d-unge-mork: color-mix(in oklab, #8a6a38 var(--dm), var(--p-dis));
  --d-nabb: color-mix(in oklab, #eba23a var(--dm), var(--p-dis)); --d-oga: color-mix(in oklab, #1d1a17 var(--dm), var(--p-dis));
  --d-vit: color-mix(in oklab, #f7f3ea var(--dm), var(--p-dis)); --d-kind: color-mix(in oklab, #f2998a var(--dm), var(--p-dis));
  --d-ekorre: color-mix(in oklab, #bd5a2a var(--dm), var(--p-dis)); --d-ekorre-mork: color-mix(in oklab, #8a3c1a var(--dm), var(--p-dis)); --d-mage: color-mix(in oklab, #f2e2c4 var(--dm), var(--p-dis));
  --d-hare: color-mix(in oklab, var(--hare-bas, #a88b69) var(--dm), var(--p-dis)); --d-hare-mork: color-mix(in oklab, var(--hare-bas, #7c6448) 80%, var(--p-fg));
  --d-rav: color-mix(in oklab, #dc6a28 var(--dm), var(--p-dis)); --d-rav-mork: color-mix(in oklab, #3a2a24 var(--dm), var(--p-dis));
  --d-rad: color-mix(in oklab, #ad6a3a var(--dm), var(--p-dis)); --d-rad-mork: color-mix(in oklab, #6e4428 var(--dm), var(--p-dis));
  --d-fagel: color-mix(in oklab, #3b4a70 var(--dm), var(--p-dis)); --d-fagel-mork: color-mix(in oklab, #242f4c var(--dm), var(--p-dis));
  --d-gas: color-mix(in oklab, #9a8e80 var(--dm), var(--p-dis)); --d-gas-mork: color-mix(in oklab, #2b2724 var(--dm), var(--p-dis)); --d-gra: color-mix(in oklab, #a8b2bc var(--dm), var(--p-dis));
  --d-rodhake: color-mix(in oklab, #e8773a var(--dm), var(--p-dis)); --d-rodhake-kropp: color-mix(in oklab, #8f7d5e var(--dm), var(--p-dis));
  --d-fj1: color-mix(in oklab, #f2a93b var(--dm), var(--p-dis)); --d-fj2: color-mix(in oklab, #7ab0ea var(--dm), var(--p-dis)); --d-humla: color-mix(in oklab, #f4c53a var(--dm), var(--p-dis));
  --d-sal: color-mix(in oklab, #8b9096 var(--dm), var(--p-dis)); --d-sal-ljus: color-mix(in oklab, #c2c5c8 var(--dm), var(--p-dis));
  --d-alg: color-mix(in oklab, #4c3a2c var(--dm), var(--p-dis)); --d-alg-ben: color-mix(in oklab, #aa9c8a var(--dm), var(--p-dis)); --d-horn: color-mix(in oklab, #dccaa4 var(--dm), var(--p-dis));
  --d-uggla: color-mix(in oklab, #93724f var(--dm), var(--p-dis)); --d-uggla-ljus: color-mix(in oklab, #dcc6a2 var(--dm), var(--p-dis)); --d-uggla-mork: color-mix(in oklab, #6a4f36 var(--dm), var(--p-dis));
  --d-uggla-oga: #f5b93a; --d-fladder: color-mix(in oklab, #3a3440 var(--dm), var(--p-dis));
  --d-fisk: color-mix(in oklab, #a2b6c0 var(--dm), var(--p-dis)); --d-fisk-mork: color-mix(in oklab, #5f7784 var(--dm), var(--p-dis)); --d-slanda: color-mix(in oklab, #2fa3bc var(--dm), var(--p-dis));
  --d-igel: color-mix(in oklab, #5c4838 var(--dm), var(--p-dis)); --d-igel-ansikte: color-mix(in oklab, #cfae88 var(--dm), var(--p-dis));
  --d-apple: color-mix(in oklab, #d9483a var(--dm), var(--p-dis)); --d-snigel: color-mix(in oklab, #c79a5a var(--dm), var(--p-dis));
}
.hane { --d-and: color-mix(in oklab, #c2bbae var(--dm), var(--p-dis)); --d-and-vinge: color-mix(in oklab, #948b7e var(--dm), var(--p-dis)); --d-huvud: color-mix(in oklab, #2f6e4c var(--dm), var(--p-dis)); --d-krage: var(--d-vit); --d-brost: color-mix(in oklab, #7a4630 var(--dm), var(--p-dis)); }
.fj2 { --d-fj1: var(--d-fj2); }
.kalv { --horn: none; --steg: 1s; }
.kid { --prick: var(--d-vit); }
.d-and { fill: var(--d-and); } .d-and-vinge { fill: var(--d-and-vinge); } .d-spegel { fill: var(--d-spegel); } .d-huvud { fill: var(--d-huvud, var(--d-and)); }
.d-krage { fill: var(--d-krage, transparent); } .d-brost { fill: var(--d-brost, transparent); }
.d-unge { fill: var(--d-unge); } .d-unge-mork { fill: var(--d-unge-mork); } .d-nabb { fill: var(--d-nabb); } .d-oga { fill: var(--d-oga); }
.d-vit { fill: var(--d-vit); } .d-kind { fill: var(--d-kind); } .d-blank { fill: #fff; }
.d-ekorre { fill: var(--d-ekorre); } .d-ekorre-mork { fill: var(--d-ekorre-mork); } .d-mage { fill: var(--d-mage); }
.d-hare { fill: var(--d-hare); } .d-hare-mork { fill: var(--d-hare-mork); } .d-rav { fill: var(--d-rav); } .d-rav-mork { fill: var(--d-rav-mork); }
.d-rad { fill: var(--d-rad); } .d-rad-mork { fill: var(--d-rad-mork); } .d-prick { fill: var(--prick, transparent); }
.d-fagel { fill: var(--d-fagel); } .d-fagel-mork { fill: var(--d-fagel-mork); } .d-gas { fill: var(--d-gas); } .d-gas-mork { fill: var(--d-gas-mork); } .d-gra { fill: var(--d-gra); }
.d-rodhake { fill: var(--d-rodhake); } .d-rodhake-kropp { fill: var(--d-rodhake-kropp); }
.d-fj { fill: var(--d-fj1); } .d-fj2 { fill: var(--d-fj2); } .d-humla { fill: var(--d-humla); } .d-sal { fill: var(--d-sal); } .d-sal-ljus { fill: var(--d-sal-ljus); }
.d-alg { fill: var(--d-alg); } .d-alg-ben { fill: var(--d-alg-ben); } .d-horn { fill: var(--d-horn); display: var(--horn, inline); }
.d-uggla { fill: var(--d-uggla); } .d-uggla-ljus { fill: var(--d-uggla-ljus); } .d-uggla-mork { fill: var(--d-uggla-mork); } .d-uggla-oga { fill: var(--d-uggla-oga); }
.d-fladder { fill: var(--d-fladder); } .d-fisk { fill: var(--d-fisk); } .d-fisk-mork { fill: var(--d-fisk-mork); } .d-slanda { fill: var(--d-slanda); }
.d-igel { fill: var(--d-igel); } .d-igel-ansikte { fill: var(--d-igel-ansikte); } .d-apple { fill: var(--d-apple); } .d-snigel { fill: var(--d-snigel); }
.d-vinge-glas { fill: var(--d-vit); opacity: .55; }

/* ---- rörelserna: allt är transform/opacity; vridpunkten ligger alltid i figurens origo ---- */
.moln { animation: moln var(--d, 90s) linear var(--dl, 0s) infinite; }
@keyframes moln { from { transform: translateX(-180px); } to { transform: translateX(480px); } }
.simma { animation: simma var(--d) linear var(--dl, 0s) infinite; }
@keyframes simma { from { transform: translate(var(--x0), var(--y)) scaleX(var(--s, 1)); } to { transform: translate(var(--x1), var(--y)) scaleX(var(--s, 1)); } }
.flyg { animation: flyg var(--d) linear var(--dl, 0s) infinite; }
@keyframes flyg { from { transform: translate(var(--x0), var(--y0)) scaleX(var(--s, 1)); } to { transform: translate(var(--x1), var(--y1)) scaleX(var(--s, 1)); } }
.guppa { animation: guppa 2.6s ease-in-out var(--dl, 0s) infinite alternate; }
.guppa.snabb { animation-duration: 1.3s; }
@keyframes guppa { from { transform: translateY(0) rotate(-2.5deg); } to { transform: translateY(1.6px) rotate(2.5deg); } }
.ring { animation: ring 3s ease-out var(--dl, 0s) infinite; }
@keyframes ring { from { transform: scale(.4); opacity: .6; } to { transform: scale(1.6); opacity: 0; } }
.kolv { animation: kolv 2s ease-in-out infinite alternate; }
@keyframes kolv { from { opacity: .15; } to { opacity: .5; } }
.glitt { animation: glitt 3.2s ease-in-out var(--dl, 0s) infinite alternate; }
@keyframes glitt { from { opacity: 0; transform: translateX(-6px); } to { opacity: .55; transform: translateX(6px); } }
.dabbla { animation: dabbla 13s ease-in-out var(--dl, 0s) infinite; }
@keyframes dabbla { 0%, 58% { transform: rotate(0); } 62% { transform: rotate(108deg); } 64% { transform: rotate(100deg); } 66% { transform: rotate(110deg); } 68% { transform: rotate(101deg); } 70% { transform: rotate(109deg); } 75%, 100% { transform: rotate(0); } }
.ikapp { animation: ikapp 4.6s ease-in-out var(--dl, 0s) infinite alternate; }
@keyframes ikapp { to { transform: translateX(-12px); } }

.vinge { animation: vinge 1.3s ease-in-out var(--vd, 0s) infinite; }
/* Studsflykt som en svala/fink: flaxserie (kroppen stiger, .bolja) och sedan vingarna intill kroppen medan den dalar. */
@keyframes vinge { 0%, 16%, 32% { transform: scaleY(1); } 8%, 24%, 40% { transform: scaleY(-.9); } 50%, 92% { transform: scaleY(.12); } 100% { transform: scaleY(1); } }
.bolja { animation: bolja 1.3s ease-in-out var(--vd, 0s) infinite; }
@keyframes bolja { 0%, 100% { transform: translateY(4px); } 42% { transform: translateY(-4px); } }
.vinge-gas { animation: vinge-gas .6s ease-in-out var(--vd, 0s) infinite alternate; }
@keyframes vinge-gas { to { transform: scaleY(-.85); } }
.d-lyft { animation: d-lyft .6s ease-in-out var(--vd, 0s) infinite alternate; }
@keyframes d-lyft { from { transform: translateY(1.6px); } to { transform: translateY(-1.6px); } }
.glid { animation: glid 30s ease-in-out infinite; }
@keyframes glid {
  0% { transform: translate(40px, 80px) rotate(4deg) scaleX(1); } 22% { transform: translate(190px, 50px) rotate(-3deg) scaleX(1); }
  44% { transform: translate(330px, 76px) rotate(6deg) scaleX(1); } 50% { transform: translate(350px, 92px) rotate(0) scaleX(-1); }
  72% { transform: translate(200px, 110px) rotate(-5deg) scaleX(-1); } 94% { transform: translate(50px, 90px) rotate(3deg) scaleX(-1); } 100% { transform: translate(40px, 80px) rotate(4deg) scaleX(1); } }
/* Måsen seglar med nästan raka vingar och tar några djupa slag då och då. */
.vinge-mas { animation: vinge-mas 4s ease-in-out infinite; }
@keyframes vinge-mas { 0%, 40%, 100% { transform: scaleY(.3); } 6%, 18%, 30% { transform: scaleY(1); } 12%, 24%, 36% { transform: scaleY(-.7); } }
.stjart { animation: stjart 2.8s ease-in-out var(--vd, 0s) infinite; }
@keyframes stjart { 0%, 70%, 80%, 90%, 100% { transform: rotate(0); } 75%, 85% { transform: rotate(-28deg); } }

.svans { animation: svans 1.1s ease-in-out infinite alternate; }
@keyframes svans { from { transform: rotate(-8deg); } to { transform: rotate(12deg); } }
.nafs { animation: nafs 1.8s ease-in-out infinite; }
@keyframes nafs { 0%, 50%, 66%, 82%, 100% { transform: rotate(0); } 58%, 74% { transform: rotate(10deg); } }
.oron { animation: oron 5s ease-in-out var(--vd, 0s) infinite; }
@keyframes oron { 0%, 80%, 88%, 96%, 100% { transform: rotate(0); } 84% { transform: rotate(-16deg); } 92% { transform: rotate(-10deg); } }
.beta { animation: beta 12s ease-in-out var(--vd, 0s) infinite; }
@keyframes beta { 0%, 25%, 62%, 70%, 100% { transform: rotate(0); } 33%, 43%, 53% { transform: rotate(72deg); } 38%, 48% { transform: rotate(65deg); } 66% { transform: rotate(-7deg); } }
.vifta { animation: vifta 1.4s ease-in-out var(--vd, 0s) infinite alternate; }
@keyframes vifta { from { transform: rotate(-10deg); } to { transform: rotate(10deg); } }
.puff { animation: puff 18s ease-out var(--dl, 0s) infinite; }
@keyframes puff { 0%, 43% { opacity: 0; transform: scale(.2); } 45% { opacity: .95; transform: scale(.6); } 55%, 100% { opacity: 0; transform: scale(1.5); } }
.titt { animation: titt 18s ease-in-out infinite; }
@keyframes titt { 0%, 18%, 38%, 100% { transform: translateY(12px); } 22%, 35% { transform: translateY(0); } }

.dben { animation: dben var(--steg, 1.4s) ease-in-out infinite alternate; }
.dben.b { animation-delay: calc(-1 * var(--steg, 1.4s)); }
@keyframes dben { from { transform: rotate(-15deg); } to { transform: rotate(15deg); } }
.nicka { animation: nicka calc(var(--steg, 1.4s) / 2) ease-in-out infinite alternate; }
@keyframes nicka { to { transform: rotate(5deg); } }
.vandra { animation: vandra var(--d) linear var(--dl, 0s) infinite; }
@keyframes vandra { from { transform: translate(var(--x0), var(--y)) scale(var(--k, 1)); } to { transform: translate(var(--x1), var(--y)) scale(var(--k, 1)); } }

.banan { animation: banan 9s ease-in-out infinite; }
.banan.svanz { animation-name: banan2; }
@keyframes banan { 0%, 30%, 80%, 100% { transform: rotate(0); } 40%, 70% { transform: rotate(-24deg); } }
@keyframes banan2 { 0%, 30%, 80%, 100% { transform: rotate(0); } 40%, 70% { transform: rotate(22deg); } }
.dyk { animation: dyk 12s ease-in-out infinite; }
@keyframes dyk { 0%, 10%, 82%, 100% { transform: translateY(26px); } 20%, 72% { transform: translateY(0); } 34%, 58% { transform: translateY(3px); } }
.vand { animation: vand 12s linear infinite; }
@keyframes vand { 0%, 44.9% { transform: scaleX(1); } 45%, 100% { transform: scaleX(-1); } }
.ring.sal { animation: ring-sal 12s ease-out infinite; }
@keyframes ring-sal { 0%, 14% { transform: scale(.4); opacity: 0; } 16% { opacity: .7; } 30%, 100% { transform: scale(1.8); opacity: 0; } }

.blunda { animation: blunda 5s ease-in-out var(--vd, 0s) infinite; }
@keyframes blunda { 0%, 90%, 94%, 97%, 100% { transform: scaleY(0); } 92%, 95.5% { transform: scaleY(1); } }
.vrid { animation: vrid 9s ease-in-out var(--vd, 0s) infinite; }
@keyframes vrid { 0%, 30%, 85%, 100% { transform: translateX(0); } 34%, 55% { transform: translateX(-3px); } 60%, 80% { transform: translateX(3px); } }
.fladder { animation: fladder var(--d, 13s) linear var(--dl, 0s) infinite; }
@keyframes fladder {
  0% { transform: translate(-30px, 60px); } 10% { transform: translate(40px, 36px); } 18% { transform: translate(80px, 80px); } 27% { transform: translate(130px, 48px); }
  36% { transform: translate(170px, 92px); } 46% { transform: translate(230px, 40px); } 55% { transform: translate(270px, 86px); } 66% { transform: translate(320px, 50px); }
  76% { transform: translate(360px, 94px); } 88%, 100% { transform: translate(440px, 60px); } }
.vinge-fl { animation: vinge-fl .16s ease-in-out infinite alternate; }
@keyframes vinge-fl { to { transform: scaleY(-.35); } }

.stank { animation: stank 7s ease-out var(--dl, 0s) infinite; }
@keyframes stank { 0%, 56% { opacity: 0; transform: translateY(0) scale(.5); } 60% { opacity: 1; transform: translateY(-10px) scale(1); } 67%, 100% { opacity: 0; transform: translateY(-1px) scale(.8); } }
.ring.fisk { animation: ring-fisk 7s ease-out var(--dl, 0s) infinite; }
@keyframes ring-fisk { 0%, 57% { transform: scale(.3); opacity: 0; } 58% { opacity: .7; } 72%, 100% { transform: scale(1.7); opacity: 0; } }
.slanda { animation: slanda 10s ease-in-out infinite; }
@keyframes slanda {
  0%, 16% { transform: translate(70px, 120px); } 20%, 38% { transform: translate(150px, 96px); } 42%, 58% { transform: translate(118px, 150px); }
  62%, 78% { transform: translate(210px, 104px); } 82%, 96% { transform: translate(120px, 80px); } 100% { transform: translate(70px, 120px); } }
.surr { animation: surr .05s linear infinite alternate; }
@keyframes surr { to { transform: scaleY(.35); } }
.fladd { animation: fladd .6s ease-in-out infinite alternate; }
@keyframes fladd { to { transform: translateY(-6px); } }
.vinge-fj { animation: vinge-fj var(--vf-t, .17s) ease-in-out var(--vf-dl, 0s) infinite alternate; }
@keyframes vinge-fj { to { transform: scaleX(.2); } }
.humla-x { animation: humla-x 7s ease-in-out infinite alternate; }
@keyframes humla-x { from { transform: translateX(40px); } to { transform: translateX(360px); } }
.humla-y { animation: humla-y 1.7s ease-in-out infinite alternate; }
@keyframes humla-y { from { transform: translateY(100px); } to { transform: translateY(150px); } }
.humla-v { animation: vand 14s linear infinite; }
.tassa { animation: tassa .18s ease-in-out infinite alternate; }
@keyframes tassa { to { transform: translateY(-1.2px); } }
.nos { animation: nos .5s ease-in-out infinite alternate; }
@keyframes nos { to { transform: rotate(-6deg); } }

/* ---- omgång två: groda, hackspett, svanar, björn, får, katter ---- */
.dj-scener, .pv, .fjarr-d, .ln, .ft-djur {
  --d-groda: color-mix(in oklab, #6fae3e var(--dm), var(--p-dis)); --d-groda-ljus: color-mix(in oklab, #d8e39a var(--dm), var(--p-dis)); --d-groda-mork: color-mix(in oklab, #3f6e2a var(--dm), var(--p-dis));
  --d-tunga: color-mix(in oklab, #e86a7a var(--dm), var(--p-dis)); --d-fluga: color-mix(in oklab, #3a3a44 var(--dm), var(--p-dis));
  --d-spett: color-mix(in oklab, #232026 var(--dm), var(--p-dis)); --d-spett-rod: color-mix(in oklab, #d23a32 var(--dm), var(--p-dis)); --d-nabb-gra: color-mix(in oklab, #6b6660 var(--dm), var(--p-dis));
  --d-svan: color-mix(in oklab, #fbfaf5 var(--dm), var(--p-dis)); --d-svan-skugga: color-mix(in oklab, #d9d6cc var(--dm), var(--p-dis)); --d-svan-nabb: color-mix(in oklab, #e8742a var(--dm), var(--p-dis));
  --d-svanunge: color-mix(in oklab, #a7a39c var(--dm), var(--p-dis)); --d-svanunge-mork: color-mix(in oklab, #6f6b66 var(--dm), var(--p-dis));
  --d-bjorn: color-mix(in oklab, #6b4a30 var(--dm), var(--p-dis)); --d-bjorn-mork: color-mix(in oklab, #4a3222 var(--dm), var(--p-dis)); --d-bjorn-ljus: color-mix(in oklab, #a4845f var(--dm), var(--p-dis));
  --d-ull: color-mix(in oklab, #f4efe2 var(--dm), var(--p-dis)); --d-faar-mork: color-mix(in oklab, #3a3431 var(--dm), var(--p-dis)); --d-lada: color-mix(in oklab, #a8382c var(--dm), var(--p-dis));
  --d-katt: color-mix(in oklab, #e39a4a var(--dm), var(--p-dis)); --d-katt-mork: color-mix(in oklab, #b5692a var(--dm), var(--p-dis)); --d-katt-ljus: color-mix(in oklab, #fbe7cc var(--dm), var(--p-dis));
  --d-rosa: color-mix(in oklab, #f2a0a8 var(--dm), var(--p-dis)); --d-garn: color-mix(in oklab, #d9536f var(--dm), var(--p-dis)); --d-garn-mork: color-mix(in oklab, #a8354f var(--dm), var(--p-dis));
}
.d-groda { fill: var(--d-groda); } .d-groda-ljus { fill: var(--d-groda-ljus); } .d-groda-mork { fill: var(--d-groda-mork); } .d-tunga { fill: var(--d-tunga); } .d-fluga { fill: var(--d-fluga); }
.d-spett { fill: var(--d-spett); } .d-spett-rod { fill: var(--d-spett-rod); } .d-nabb-gra { fill: var(--d-nabb-gra); }
.d-svan { fill: var(--d-svan); } .d-svan-skugga { fill: var(--d-svan-skugga); } .d-svan-nabb { fill: var(--d-svan-nabb); } .d-svanunge { fill: var(--d-svanunge); } .d-svanunge-mork { fill: var(--d-svanunge-mork); }
.d-bjorn { fill: var(--d-bjorn); } .d-bjorn-mork { fill: var(--d-bjorn-mork); } .d-bjorn-ljus { fill: var(--d-bjorn-ljus); }
.d-ull { fill: var(--d-ull); } .d-faar-mork { fill: var(--d-faar-mork); } .d-lada { fill: var(--d-lada); }
.ft-djur { --d-duva: color-mix(in oklab, #8f96a6 var(--dm), var(--p-dis)); --d-duva-mork: color-mix(in oklab, #5c6274 var(--dm), var(--p-dis)); --d-duva-hals: color-mix(in oklab, #4c7e78 var(--dm), var(--p-dis)); --d-duva-ben: color-mix(in oklab, #d0605a var(--dm), var(--p-dis)); }
.d-duva { fill: var(--d-duva); } .d-duva-mork { fill: var(--d-duva-mork); } .d-duva-hals { fill: var(--d-duva-hals); } .d-duva-ben { fill: var(--d-duva-ben); }
.d-katt { fill: var(--d-katt); } .d-katt-mork { fill: var(--d-katt-mork); } .d-katt-ljus { fill: var(--d-katt-ljus); } .d-rosa { fill: var(--d-rosa); } .d-garn { fill: var(--d-garn); } .d-garn-mork { fill: var(--d-garn-mork); }
.d-fors { fill: var(--d-vit); opacity: .6; }

.strupe { animation: strupe 1.4s ease-in-out var(--vd, 0s) infinite; }
@keyframes strupe { 0%, 100% { transform: scale(.35); } 50% { transform: scale(1.1); } }
.tunga { animation: tunga 6s ease-in-out var(--vd, 0s) infinite; }
@keyframes tunga { 0%, 57%, 67%, 100% { transform: scaleX(0); } 61%, 62% { transform: scaleX(1); } }
.fluga { animation: fluga 6s linear infinite; }
@keyframes fluga {
  0% { transform: translate(250px, 140px); opacity: 1; } 18% { transform: translate(210px, 110px); } 34% { transform: translate(160px, 140px); } 48% { transform: translate(226px, 168px); }
  61% { transform: translate(200px, 196px); opacity: 1; } 66% { transform: translate(174px, 199px); opacity: 0; } 84% { transform: translate(300px, 120px); opacity: 0; }
  88% { transform: translate(290px, 126px); opacity: 1; } 100% { transform: translate(250px, 140px); opacity: 1; } }

.hacka { animation: hacka 3.6s ease-in-out infinite; }
@keyframes hacka {
  0%, 30%, 100% { transform: translateX(-5px) rotate(0); } 4%, 12%, 20% { transform: translateX(0) rotate(0); } 8%, 16%, 24% { transform: translateX(-4px) rotate(0); }
  50% { transform: translateX(-5px) rotate(-8deg); } 62% { transform: translateX(-5px) rotate(5deg); } 74% { transform: translateX(-5px) rotate(0); } }
.flis { animation: flis 3.6s ease-out var(--dl, 0s) infinite; opacity: 0; }
@keyframes flis { 0%, 3% { opacity: 0; transform: translate(0, 0) rotate(0); } 5% { opacity: 1; } 34%, 100% { opacity: 0; transform: translate(var(--fx), var(--fy)) rotate(260deg); } }
.ungtitt { animation: ungtitt 9s ease-in-out infinite; }
@keyframes ungtitt { 0%, 40%, 92%, 100% { transform: scale(0) rotate(0); } 48%, 84% { transform: scale(1) rotate(0); } 60% { transform: scale(1) rotate(-12deg); } 72% { transform: scale(1) rotate(10deg); } }

.hals { animation: hals 11s ease-in-out var(--vd, 0s) infinite; }
@keyframes hals { 0%, 45%, 88%, 100% { transform: rotate(0); } 55%, 78% { transform: rotate(128deg); } 64% { transform: rotate(121deg); } 71% { transform: rotate(130deg); } }

.slag { animation: slag 10s ease-in-out var(--vd, 0s) infinite; }
@keyframes slag { 0%, 50%, 66%, 100% { transform: rotate(0); } 56% { transform: rotate(-80deg); } 60% { transform: rotate(-64deg); } }
.snusa { animation: snusa 10s ease-in-out var(--vd, 0s) infinite; }
@keyframes snusa { 0%, 100% { transform: rotate(8deg); } 12%, 22% { transform: rotate(3deg); } 17% { transform: rotate(9deg); } 40% { transform: rotate(0); } 48% { transform: rotate(-22deg); } 56% { transform: rotate(-4deg); } 64% { transform: rotate(10deg); } 80% { transform: rotate(6deg); } }
.lax { animation: lax 10s linear infinite; }
@keyframes lax {
  0%, 40% { transform: translate(330px, 240px) rotate(55deg); } 41% { transform: translate(330px, 214px) rotate(55deg); animation-timing-function: ease-out; }
  50% { transform: translate(265px, 124px) rotate(0); animation-timing-function: ease-in; } 60% { transform: translate(196px, 214px) rotate(-55deg); } 62%, 100% { transform: translate(190px, 240px) rotate(-55deg); } }
.ring.lax2 { animation: ring-lax 10s ease-out var(--dl, 0s) infinite; }
@keyframes ring-lax { 0%, 59% { transform: scale(.3); opacity: 0; } 60% { opacity: .7; } 72%, 100% { transform: scale(1.7); opacity: 0; } }
.fors { animation: fors .5s linear infinite; }
@keyframes fors { from { transform: translateY(-12px); } to { transform: translateY(12px); } }

.andas { animation: andas 3.2s ease-in-out infinite alternate; }
@keyframes andas { to { transform: scale(1.02, 1.07); } }
.vifta-sakta { animation: vifta-sakta 4s ease-in-out infinite alternate; }
@keyframes vifta-sakta { from { transform: rotate(-2deg); } to { transform: rotate(5deg); } }
.zzz { animation: zzz 4.5s ease-out var(--dl, 0s) infinite; opacity: 0; font: 700 9px/1 system-ui, sans-serif; fill: var(--d-fagel); }
@keyframes zzz { 0% { opacity: 0; transform: translate(0, 0) scale(.6); } 20% { opacity: .9; } 100% { opacity: 0; transform: translate(14px, -26px) scale(1.3); } }
.d-pendel { animation: d-pendel 2.4s ease-in-out infinite alternate; }
@keyframes d-pendel { from { transform: rotate(12deg); } to { transform: rotate(-24deg); } }
.tass { animation: tass 4.8s ease-in-out infinite; }
@keyframes tass { 0%, 60%, 100% { transform: rotate(8deg); } 70% { transform: rotate(150deg); } 76% { transform: rotate(115deg); } 84% { transform: rotate(8deg); } }
.grodhopp { animation: grodhopp 8s ease-in-out infinite; }
@keyframes grodhopp {
  0%, 30% { transform: translate(282px, 216px) scaleX(1); } 36% { transform: translate(314px, 186px) scaleX(1); } 42%, 58% { transform: translate(348px, 230px) scaleX(1); }
  60%, 62% { transform: translate(348px, 230px) scaleX(-1); } 68% { transform: translate(314px, 190px) scaleX(-1); } 74%, 92% { transform: translate(282px, 216px) scaleX(-1); }
  94%, 100% { transform: translate(282px, 216px) scaleX(1); } }
.skutt { animation: skutt 1.1s ease-in-out var(--vd, 0s) infinite; }
@keyframes skutt { 0%, 60%, 100% { transform: translateY(0) rotate(0); } 30% { transform: translateY(-14px) rotate(-8deg); } }

/* ---- omgång tre: ko, höns, häger, uttrar, bäver, tranor, nyckelpiga och myror ---- */
.dj-scener, .pv, .fjarr-d, .ln, .ft-djur {
  --d-ko: color-mix(in oklab, #f4f0e6 var(--dm), var(--p-dis)); --d-ko-mork: color-mix(in oklab, #2e2a27 var(--dm), var(--p-dis));
  --d-tupp: color-mix(in oklab, #c4532a var(--dm), var(--p-dis)); --d-tupp-mork: color-mix(in oklab, #2a2e2c var(--dm), var(--p-dis)); --d-tupp-gron: color-mix(in oklab, #2f5a44 var(--dm), var(--p-dis));
  --d-tupp-gul: color-mix(in oklab, #e8a23a var(--dm), var(--p-dis)); --d-kam: color-mix(in oklab, #d8322e var(--dm), var(--p-dis));
  --d-hona: color-mix(in oklab, #c79a68 var(--dm), var(--p-dis)); --d-hona-mork: color-mix(in oklab, #8e6640 var(--dm), var(--p-dis));
  --d-hager: color-mix(in oklab, #a3adb8 var(--dm), var(--p-dis)); --d-hager-mork: color-mix(in oklab, #5b6672 var(--dm), var(--p-dis)); --d-hager-ben: color-mix(in oklab, #c2a65a var(--dm), var(--p-dis));
  --d-utter: color-mix(in oklab, #6b4a32 var(--dm), var(--p-dis)); --d-utter-mork: color-mix(in oklab, #46301f var(--dm), var(--p-dis)); --d-utter-ljus: color-mix(in oklab, #c8ab88 var(--dm), var(--p-dis));
  --d-mussla: color-mix(in oklab, #3c4a6a var(--dm), var(--p-dis));
  --d-baver: color-mix(in oklab, #7a4f2e var(--dm), var(--p-dis)); --d-baver-mork: color-mix(in oklab, #4f321e var(--dm), var(--p-dis)); --d-baver-ljus: color-mix(in oklab, #b08a62 var(--dm), var(--p-dis));
  --d-baver-svans: color-mix(in oklab, #3e3a36 var(--dm), var(--p-dis)); --d-tand: color-mix(in oklab, #e8923a var(--dm), var(--p-dis));
  --d-trana: color-mix(in oklab, #a9aeb0 var(--dm), var(--p-dis)); --d-trana-mork: color-mix(in oklab, #62676a var(--dm), var(--p-dis));
  --d-piga: color-mix(in oklab, #d63a2e var(--dm), var(--p-dis)); --d-myra: color-mix(in oklab, #4a2a1e var(--dm), var(--p-dis));
  --d-myrstack: color-mix(in oklab, #8a6440 var(--dm), var(--p-dis)); --d-barr: color-mix(in oklab, #b07a40 var(--dm), var(--p-dis));
}
.d-ko { fill: var(--d-ko); } .d-ko-mork { fill: var(--d-ko-mork); }
.d-tupp { fill: var(--d-tupp); } .d-tupp-mork { fill: var(--d-tupp-mork); } .d-tupp-gron { fill: var(--d-tupp-gron); } .d-tupp-gul { fill: var(--d-tupp-gul); } .d-kam { fill: var(--d-kam); }
.d-hona { fill: var(--d-hona); } .d-hona-mork { fill: var(--d-hona-mork); }
.d-hager { fill: var(--d-hager); } .d-hager-mork { fill: var(--d-hager-mork); } .d-hager-ben { fill: var(--d-hager-ben); }
.d-utter { fill: var(--d-utter); } .d-utter-mork { fill: var(--d-utter-mork); } .d-utter-ljus { fill: var(--d-utter-ljus); } .d-mussla { fill: var(--d-mussla); }
.d-baver { fill: var(--d-baver); } .d-baver-mork { fill: var(--d-baver-mork); } .d-baver-ljus { fill: var(--d-baver-ljus); } .d-baver-svans { fill: var(--d-baver-svans); } .d-tand { fill: var(--d-tand); }
.d-trana { fill: var(--d-trana); } .d-trana-mork { fill: var(--d-trana-mork); }
.d-piga { fill: var(--d-piga); } .d-myra { fill: var(--d-myra); } .d-myrstack { fill: var(--d-myrstack); } .d-barr { fill: var(--d-barr); }

.gala { animation: gala 7s ease-in-out var(--vd, 0s) infinite; }
@keyframes gala { 0%, 58%, 86%, 100% { transform: rotate(0); } 62%, 82% { transform: rotate(-35deg); } }
.gal { animation: gal 7s ease-out infinite; opacity: 0; font: 700 10px/1 system-ui, sans-serif; fill: var(--d-fagel); }
@keyframes gal { 0%, 61% { opacity: 0; transform: translate(0, 0) scale(.7); } 65% { opacity: .95; } 84% { opacity: .9; transform: translate(6px, -8px) scale(1.1); } 90%, 100% { opacity: 0; transform: translate(8px, -10px) scale(1.1); } }
.picka { animation: picka 3s ease-in-out var(--vd, 0s) infinite; }
@keyframes picka { 0%, 40%, 100% { transform: rotate(0); } 48% { transform: rotate(62deg); } 54% { transform: rotate(24deg); } 60% { transform: rotate(64deg); } 68% { transform: rotate(0); } }
.hugg { animation: hugg 9s ease-in-out infinite; }
@keyframes hugg { 0%, 52%, 100% { transform: rotate(0); } 57% { transform: rotate(-10deg); } 60%, 68% { transform: rotate(125deg); } 76% { transform: rotate(0); } }
.ring.hugg { animation: ring-hugg 9s ease-out infinite; }
@keyframes ring-hugg { 0%, 59% { transform: scale(.3); opacity: 0; } 60% { opacity: .7; } 76%, 100% { transform: scale(1.8); opacity: 0; } }
.knacka { animation: knacka .8s ease-in-out infinite alternate; }
@keyframes knacka { to { transform: translateY(-2.5px); } }
.gnaga { animation: gnaga .22s ease-in-out infinite alternate; }
@keyframes gnaga { from { transform: rotate(-3deg); } to { transform: rotate(4deg); } }
.trandans { animation: trandans 4s ease-in-out var(--vd, 0s) infinite; }
@keyframes trandans { 0%, 38%, 62%, 100% { transform: translateY(0); } 50% { transform: translateY(-18px); } }
.tranvinge { animation: tranvinge 4s ease-in-out var(--vd, 0s) infinite; }
@keyframes tranvinge { 0%, 34%, 66%, 100% { transform: rotate(0); } 44%, 56% { transform: rotate(75deg); } 50% { transform: rotate(55deg); } }
.buga { animation: buga 4s ease-in-out var(--vd, 0s) infinite; }
@keyframes buga { 0%, 70%, 95%, 100% { transform: rotate(0); } 78%, 88% { transform: rotate(70deg); } }
.kryp { animation: kryp 18s linear infinite; }
@keyframes kryp { 0% { transform: translateX(70px) scaleX(1); } 40% { transform: translateX(200px) scaleX(1); } 50% { transform: translateX(200px) scaleX(-1); } 90% { transform: translateX(70px) scaleX(-1); } 100% { transform: translateX(70px) scaleX(1); } }
.vecka { animation: vecka 18s ease-in-out infinite; }
@keyframes vecka { 0%, 40%, 50%, 100% { transform: rotate(0); } 43%, 47% { transform: rotate(-40deg); } }
.spetthuvud { animation: spetthuvud 3.6s ease-in-out infinite; }
@keyframes spetthuvud {
  0%, 30%, 100% { transform: rotate(-14deg); } 4%, 12%, 20% { transform: rotate(0); } 8%, 16%, 24% { transform: rotate(-10deg); }
  50% { transform: rotate(-26deg); } 62% { transform: rotate(-6deg); } 74% { transform: rotate(-14deg); } }

/* ---- rovfåglar: ormvråk (standard) och havsörn (.havsorn), sittande och glidande ---- */
.dj-scener, .pv, .fjarr-d, .ln {
  --d-rov: color-mix(in oklab, #7a5638 var(--dm), var(--p-dis)); --d-rov-mork: color-mix(in oklab, #4a3322 var(--dm), var(--p-dis));
  --d-rov-ljus: color-mix(in oklab, #e6d6b8 var(--dm), var(--p-dis)); --d-vaxhud: color-mix(in oklab, #f0c23a var(--dm), var(--p-dis));
  --d-rov-nabb: color-mix(in oklab, #2b2622 var(--dm), var(--p-dis));
}
.havsorn { --d-rov: color-mix(in oklab, #5a4430 var(--dm), var(--p-dis)); --d-rov-ljus: var(--d-rov); --d-rov-huvud: color-mix(in oklab, #d8ccb4 var(--dm), var(--p-dis));
  --d-rov-stjart: var(--d-vit); --d-rov-nabb: var(--d-vaxhud); }
.d-rov { fill: var(--d-rov); } .d-rov-mork { fill: var(--d-rov-mork); } .d-rov-ljus { fill: var(--d-rov-ljus); } .d-vaxhud { fill: var(--d-vaxhud); }
.d-rov-nabb { fill: var(--d-rov-nabb); } .d-rov-huvud { fill: var(--d-rov-huvud, var(--d-rov)); } .d-rov-stjart { fill: var(--d-rov-stjart, var(--d-rov-mork)); }
.d-rov-under { fill: var(--d-rov-ljus); opacity: .55; }

/* Termiken: hela fågeln roterar kring termikens mitt (gruppen är plattad i y, så cirkeln ser ut att ligga i perspektiv). */
.kretsa { animation: kretsa var(--d, 26s) linear var(--dl, 0s) infinite; }
@keyframes kretsa { to { transform: rotate(360deg); } }
/* Inga vingslag: bara spannet andas lite när den lutar i vinden, och vingspetsarna spretar. */
.lutning { animation: lutning 5s ease-in-out var(--vd, 0s) infinite alternate; }
@keyframes lutning { from { transform: scaleY(1); } to { transform: scaleY(.88); } }
.sviva { animation: sviva 6s ease-in-out infinite alternate; }
@keyframes sviva { from { transform: translateY(-4px) rotate(-4deg); } to { transform: translateY(5px) rotate(3deg); } }
/* Sittande: huvudet står still länge, rycker åt sidan, vänder sig bakåt (spegling) och tillbaka. */
.spana { animation: spana 11s ease-in-out var(--vd, 0s) infinite; }
@keyframes spana {
  0%, 18% { transform: rotate(0) scaleX(1); } 20%, 32% { transform: rotate(-12deg) scaleX(1); } 34%, 44% { transform: rotate(6deg) scaleX(1); }
  47%, 49% { transform: rotate(0) scaleX(.15); } 52%, 70% { transform: rotate(0) scaleX(-1); } 73%, 75% { transform: rotate(0) scaleX(.15); } 78%, 100% { transform: rotate(0) scaleX(1); } }
/* Tornfalken ryttlar: snabba vingslag, kroppen gungar med, huvudet (utanför .hov) står still. Då och då sjunker den mot en sork. */
.dj-scener, .pv, .fjarr-d, .ln { --d-falk: color-mix(in oklab, #b5653a var(--dm), var(--p-dis)); --d-falk-gra: color-mix(in oklab, #8a9198 var(--dm), var(--p-dis)); }
.d-falk { fill: var(--d-falk); } .d-falk-gra { fill: var(--d-falk-gra); }
.ryttla { animation: ryttla .22s ease-in-out var(--vd, 0s) infinite alternate; }
@keyframes ryttla { from { transform: scaleY(1); } to { transform: scaleY(-.7); } }
.hov { animation: hov .22s ease-in-out infinite alternate; }
@keyframes hov { to { transform: translateY(1.2px) rotate(-3deg); } }
.solfjader { animation: solfjader 1.6s ease-in-out infinite alternate; }
@keyframes solfjader { from { transform: rotate(-6deg); } to { transform: rotate(10deg); } }
.falkjakt { animation: falkjakt 14s ease-in-out infinite; }
@keyframes falkjakt { 0%, 52% { transform: translate(0, 0); } 58%, 64% { transform: translate(-6px, 26px); } 76%, 100% { transform: translate(0, 0); } }
/* Fiskgjusen: en 12 s-bana. Vingställningen byts genom att tända/släcka tre vingar i takt med banan; fisken tänds vid plasket. */
.dj-scener, .pv, .fjarr-d, .ln { --d-gjuse: color-mix(in oklab, #3e3126 var(--dm), var(--p-dis)); }
.d-gjuse { fill: var(--d-gjuse); }
.gjusebana { animation: gjusebana 12s linear infinite; }
@keyframes gjusebana {
  0% { transform: translate(-50px, 64px) rotate(0); } 24% { transform: translate(190px, 52px) rotate(-4deg); animation-timing-function: ease-in-out; }
  30% { transform: translate(206px, 56px) rotate(8deg); animation-timing-function: ease-in; } 34% { transform: translate(212px, 70px) rotate(64deg); animation-timing-function: ease-in; }
  46% { transform: translate(232px, 184px) rotate(70deg); animation-timing-function: ease-out; } 50% { transform: translate(232px, 190px) rotate(0); }
  58% { transform: translate(234px, 187px) rotate(-6deg); animation-timing-function: ease-in; } 66% { transform: translate(250px, 168px) rotate(-18deg); }
  100% { transform: translate(350px, 90px) rotate(-8deg); } }
.gj-glid { animation: gj-glid 12s step-end infinite; } .gj-dyk { animation: gj-dyk 12s step-end infinite; } .gj-flax { animation: gj-flax 12s step-end infinite; } .gj-fisk { animation: gj-fisk 12s step-end infinite; }
@keyframes gj-glid { 0% { opacity: 1; } 30% { opacity: 0; } }
@keyframes gj-dyk { 0% { opacity: 0; } 30% { opacity: 1; } 47% { opacity: 0; } }
@keyframes gj-flax { 0% { opacity: 0; } 47% { opacity: 1; } 99% { opacity: 0; } }
@keyframes gj-fisk { 0% { opacity: 0; } 50% { opacity: 1; } 99% { opacity: 0; } }
.plask { animation: plask 12s ease-out var(--dl, 0s) infinite; opacity: 0; }
@keyframes plask { 0%, 45% { transform: scale(.3); opacity: 0; } 46.5% { opacity: .8; } 62%, 100% { transform: scale(1.8); opacity: 0; } }
.droppe { animation: droppe 12s ease-out infinite; opacity: 0; }
@keyframes droppe { 0%, 45.5% { transform: translate(0, 0); opacity: 0; } 46.5% { opacity: 1; } 50% { transform: translate(var(--fx), var(--fy)); opacity: 1; } 54%, 100% { transform: translate(calc(var(--fx) * 1.4), 4px); opacity: 0; } }

/* ---- mjuka djur (djur-mjuk.js): IK-ben, bortre sidan mörkare ---- */
.mj-skugga { fill: var(--p-fg); opacity: .13; }
.mj-fjarr { filter: brightness(.78); }