/* Fordon och söta animationer (fordon.html). Laddas efter motiv.css + djur.css: landskapet (.f-*), kortgriden, paletterna,
   .moln/.simma/.flyg/.guppa/.ring/.glitt och djur.js (palett, tema, paus, granar, gräs) kommer därifrån.
   Fordonens färger blandas mot --p-dis precis som djurens; --vf/--vf2/--nav ärvs in i <use> för färgvarianter. */
.dj-scener, .pv, .fjarr-d {
  --v-rod: color-mix(in oklab, #d9493a var(--dm), var(--p-dis)); --v-rod-mork: color-mix(in oklab, #a8322a var(--dm), var(--p-dis));
  --v-bla: color-mix(in oklab, #3f7fc4 var(--dm), var(--p-dis)); --v-gul: color-mix(in oklab, #f2c14e var(--dm), var(--p-dis));
  --v-gron: color-mix(in oklab, #4f9a5a var(--dm), var(--p-dis)); --v-gron-mork: color-mix(in oklab, #367043 var(--dm), var(--p-dis));
  --v-vit: color-mix(in oklab, #f7f5ef var(--dm), var(--p-dis)); --v-gra: color-mix(in oklab, #9aa0a6 var(--dm), var(--p-dis));
  --v-svart: color-mix(in oklab, #2d2f33 var(--dm), var(--p-dis)); --v-glas: color-mix(in oklab, #bfe0f0 var(--dm), var(--p-dis));
  --v-tra: color-mix(in oklab, #a8743f var(--dm), var(--p-dis)); --v-orange: color-mix(in oklab, #ee8a3a var(--dm), var(--p-dis));
  --v-rosa: color-mix(in oklab, #ef8fa6 var(--dm), var(--p-dis)); --v-vag: color-mix(in oklab, #6c6f74 var(--dm), var(--p-dis));
  --v-hal: color-mix(in oklab, #e9cf7a var(--dm), var(--p-dis));
}
.v-rod { fill: var(--v-rod); } .v-rod-mork { fill: var(--v-rod-mork); } .v-bla { fill: var(--v-bla); } .v-gul { fill: var(--v-gul); }
.v-gron { fill: var(--v-gron); } .v-gron-mork { fill: var(--v-gron-mork); } .v-vit { fill: var(--v-vit); } .v-gra { fill: var(--v-gra); }
.v-svart { fill: var(--v-svart); } .v-glas { fill: var(--v-glas); } .v-tra { fill: var(--v-tra); } .v-orange { fill: var(--v-orange); }
.v-vag { fill: var(--v-vag); } .v-hal { fill: var(--v-hal); }
.v-bil { fill: var(--vf, var(--v-rod)); } .v-bil2 { fill: var(--vf2, var(--v-vit)); } .v-nav { fill: var(--nav, var(--v-rod)); }
.v-rok { fill: var(--v-vit); opacity: .85; } .v-rok.mork { fill: var(--v-gra); }
.v-streck { fill: none; stroke: var(--v-vit); stroke-width: 2; stroke-dasharray: 14 12; }
.v-sliper { fill: none; stroke: var(--v-tra); stroke-width: 6; stroke-dasharray: 3 6; }
.v-text { font: 700 10px/1 system-ui, sans-serif; fill: var(--v-rod); }

.hjul { animation: hjul var(--hv, 1s) linear infinite; }
@keyframes hjul { to { transform: rotate(360deg); } }
.skumpa { animation: skumpa .45s ease-in-out var(--vd, 0s) infinite alternate; }
@keyframes skumpa { to { transform: translateY(-1.2px); } }
.anga { animation: anga 2.6s ease-out var(--dl, 0s) infinite; opacity: 0; }
@keyframes anga { 0% { transform: translate(0, 0) scale(.3); opacity: .9; } 100% { transform: translate(-36px, -38px) scale(1.9); opacity: 0; } }
.propeller { animation: propeller .1s linear infinite alternate; }
@keyframes propeller { to { transform: scaleY(.12); } }
.v-rotor { animation: v-rotor .16s linear infinite alternate; }
@keyframes v-rotor { to { transform: scaleX(-1); } }
.rotor-sm { animation: hjul .2s linear infinite; }
.fladdra { animation: fladdra .7s ease-in-out infinite alternate; }
@keyframes fladdra { from { transform: skewY(-5deg); } to { transform: skewY(5deg); } }
.v-svava { animation: v-svava var(--sv, 5s) ease-in-out var(--dl, 0s) infinite alternate; }
@keyframes v-svava { to { transform: translateY(-12px); } }
.v-flamma { animation: v-flamma .3s ease-in-out infinite alternate; }
@keyframes v-flamma { from { transform: scale(.7); } to { transform: scale(1.2); } }
.segel { animation: segel 3s ease-in-out var(--dl, 0s) infinite alternate; }
@keyframes segel { to { transform: scaleX(.84); } }
.fyrljus { animation: fyrljus 6s linear infinite; }
@keyframes fyrljus { 0% { transform: scaleX(1); opacity: .55; } 25% { transform: scaleX(0); opacity: .1; } 50% { transform: scaleX(-1); opacity: .55; } 75% { transform: scaleX(0); opacity: .1; } 100% { transform: scaleX(1); opacity: .55; } }
.kolvatten { animation: kolvatten 1s ease-in-out infinite alternate; }
@keyframes kolvatten { from { opacity: .2; transform: scaleX(.9); } to { opacity: .6; transform: scaleX(1.1); } }

/* ---- omgång två: brandbil, glassbil, spårvagn, grävskopa, linbana, ubåt, raket ---- */
.dj-scener, .pv, .fjarr-d { --v-gul-mork: color-mix(in oklab, #d9a02e var(--dm), var(--p-dis)); }
.v-gul-mork { fill: var(--v-gul-mork); } .v-rosa { fill: var(--v-rosa); }
.v-stad { fill: var(--p-stad); } .v-stad2 { fill: var(--p-stad2); }
.v-lina { fill: none; stroke: var(--v-svart); stroke-width: 1.2; }
.v-bubbla { fill: var(--v-vit); opacity: .55; }

.blinka { animation: blinka .6s steps(1) var(--dl, 0s) infinite; }
@keyframes blinka { 50% { opacity: .15; } }
.ton { animation: ton 3s ease-out var(--dl, 0s) infinite; opacity: 0; }
@keyframes ton { 0% { transform: translate(0, 0) rotate(-10deg); opacity: 0; } 15% { opacity: 1; } 50% { transform: translate(-8px, -20px) rotate(12deg); } 100% { transform: translate(-20px, -44px) rotate(-10deg); opacity: 0; } }
.bubbla { animation: bubbla 2.4s ease-in var(--dl, 0s) infinite; opacity: 0; }
@keyframes bubbla { 0% { transform: translate(0, 0) scale(.4); opacity: .9; } 100% { transform: translate(-26px, -56px) scale(1.3); opacity: 0; } }
.gnista { animation: gnista 3.2s linear var(--dl, 0s) infinite; opacity: 0; }
@keyframes gnista { 0%, 40%, 46%, 100% { opacity: 0; transform: scale(.4); } 41%, 44% { opacity: 1; transform: scale(1.2); } 42.5% { opacity: .3; transform: scale(.8); } }
.v-gunga { animation: v-gunga 2.4s ease-in-out var(--vd, 0s) infinite alternate; }
@keyframes v-gunga { from { transform: rotate(-5deg); } to { transform: rotate(5deg); } }

/* Raketen: står, tänder, lyfter med acceleration, och står sedan där igen när den tonat in. Samma 10 s i alla fyra. */
.raket { animation: raket 10s infinite; }
@keyframes raket { 0%, 22% { transform: translateY(0); opacity: 1; animation-timing-function: ease-in; } 60% { transform: translateY(-340px); opacity: 1; } 60.1%, 72% { transform: translateY(0); opacity: 0; } 80%, 100% { transform: translateY(0); opacity: 1; } }
.motor { animation: motor 10s linear infinite; }
@keyframes motor { 0%, 15% { opacity: 0; } 18%, 60% { opacity: 1; } 60.1%, 100% { opacity: 0; } }
.skak { animation: skak .08s linear infinite alternate; }
@keyframes skak { to { transform: translateX(.6px); } }
.startrok { animation: startrok 10s ease-out var(--dl, 0s) infinite; opacity: 0; }
@keyframes startrok { 0%, 15% { transform: translate(0, 0) scale(0); opacity: 0; } 20% { opacity: .95; } 50% { transform: translate(var(--rx), -8px) scale(1.6); opacity: .8; } 72%, 100% { transform: translate(var(--rx), -18px) scale(2.1); opacity: 0; } }

/* Grävskopan: gräver till höger, svänger (scaleX) och tömmer skopan på högen till vänster. Samma 12 s överallt. */
.sving { animation: sving 12s ease-in-out infinite; }
@keyframes sving { 0%, 40% { transform: scaleX(1); } 48%, 74% { transform: scaleX(-1); } 82%, 100% { transform: scaleX(1); } }
.bom { animation: bom 12s ease-in-out infinite; }
@keyframes bom { 0%, 4% { transform: rotate(0); } 16%, 26% { transform: rotate(30deg); } 38%, 84% { transform: rotate(-12deg); } 96%, 100% { transform: rotate(0); } }
.skopa { animation: skopa 12s ease-in-out infinite; }
@keyframes skopa { 0%, 4% { transform: rotate(0); } 16% { transform: rotate(35deg); } 26%, 58% { transform: rotate(-15deg); } 64%, 70% { transform: rotate(130deg); } 84%, 100% { transform: rotate(0); } }
.jord { animation: jord 12s linear infinite; }
@keyframes jord { 0%, 22% { opacity: 0; } 26%, 62% { opacity: 1; } 65%, 100% { opacity: 0; } }
.klump { animation: klump 12s ease-in var(--dl, 0s) infinite; opacity: 0; }
@keyframes klump { 0%, 62% { opacity: 0; transform: translate(0, 0); } 63% { opacity: 1; } 70% { opacity: 1; transform: translate(var(--kx, 0), 34px); } 71%, 100% { opacity: 0; transform: translate(var(--kx, 0), 34px); } }

/* ---- omgång tre: cykel, timmerbil, snöskoter, snabbtåg ---- */
.dj-scener, .pv, .fjarr-d { --v-hud: color-mix(in oklab, #f1c7a0 var(--dm), var(--p-dis)); }
.v-ram { fill: none; stroke: var(--vf, var(--v-bla)); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.v-kropp { fill: none; stroke: var(--rf, var(--v-rod)); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; }
.v-ben { fill: none; stroke: var(--v-svart); stroke-width: 3.2; stroke-linecap: round; stroke-linejoin: round; }
.v-hud { fill: var(--v-hud); } .v-hjalm { fill: var(--hf, var(--v-gul)); }

/* ---- omgång fyra: husvagn, färja, kajak, sjöflygplan ---- */
.paddla { animation: paddla 1.6s ease-in-out var(--pd, 0s) infinite alternate; }
@keyframes paddla { from { transform: rotate(-24deg) translateY(-1px); } to { transform: rotate(24deg) translateY(1px); } }

/* ---- omgång fem: bilarna (kombi, sportbil, jeep, pickup, långtradare, mc, polis, taxi, ambulans, sopbil, folkabuss, veteranbil, betongbil, bärgare, plogbil) ---- */
.v-rand { animation: v-rand .9s linear infinite; }
@keyframes v-rand { to { transform: translateX(12px); } }

/* ---- omgång sex: tågen (dressinens vippa + åkarna i takt) ---- */
.pumpa { animation: pumpa .8s ease-in-out infinite alternate; }
@keyframes pumpa { from { transform: rotate(-15deg); } to { transform: rotate(15deg); } }
.nicka-upp { animation: nicka .8s ease-in-out infinite alternate; }
.nicka-ner { animation: nicka .8s ease-in-out infinite alternate-reverse; }
@keyframes nicka { from { transform: translateY(2.8px); } to { transform: translateY(-2.8px); } }