/* hero-djur.html: rubrikkortets scen. Himlen ligger som ett band från sidans topp ned till kortets botten (bakom sidhuvudet),
   kullarna ritas i SVG:en (djuren står på dem), så platshållarens bakgrund och ::before/::after släcks. */
.hd-hero.lab-ph { background: none; }
.hd-hero.lab-ph::before, .hd-hero.lab-ph::after { content: none; }
body.hd-sida { background: linear-gradient(180deg, var(--sd-dag) 0, var(--sd-dag-2) 640px), var(--s-deep); }
.hd-sida .ny-rot { background: none !important; position: relative; z-index: 1; }
.hd-scen { position: absolute; top: 0; left: 0; width: 100%; z-index: 0; pointer-events: none; overflow: hidden;
  --hd-h1: #7fb3da; --hd-h2: #cfe4ef; --hd-h3: #fbeed3;
  background: linear-gradient(180deg, var(--hd-h1) 0, var(--hd-h2) 62%, var(--hd-h3) 100%);
  -webkit-mask: linear-gradient(#000 calc(100% - 48px), transparent); mask: linear-gradient(#000 calc(100% - 48px), transparent);
  animation: hd-in .5s ease-out both; }
@keyframes hd-in { from { opacity: 0; } }
.hd-scen svg { display: block; width: 100%; height: 100%; }
/* Text över himlen: sidhuvudet (tills det blir glas nedskrollat) och brödsmulorna. Gråskalan (fg-4…fg-8) gav 1,3–2,7:1 mot himlen;
   ett bläck per tema håller ≥ 4,7:1 i alla fyra tider på dygnet (mätt mot gradienten vid y 44 och 117 px). */
.hd-sida .ny-hdr:not(.is-fast), .hd-sida .ny-crumbs { --hd-blk: #f5efe2; --fg-1: var(--hd-blk); --fg-1b: var(--hd-blk); --fg-1c: var(--hd-blk);
  --fg-2: var(--hd-blk); --fg-4: var(--hd-blk); --fg-5: var(--hd-blk); --fg-6: var(--hd-blk); --fg-8: var(--hd-blk); }
[data-theme="light"] :is(.hd-sida .ny-hdr:not(.is-fast), .hd-sida .ny-crumbs) { --hd-blk: #0e1824; }
.hd-sida .ny-crumbs li + li::before { opacity: .6; }
/* Himlen följer vald tid på dygnet; mörkt läge dämpar den bara (så texten håller kontrasten), natt är ett eget val. */
.hd-scen.hd-morgon { --hd-h1: #9cc1dd; --hd-h2: #f3d9c8; --hd-h3: #fde4c6; }
.hd-scen.hd-kvall { --hd-h1: #6c7bb0; --hd-h2: #d6a0b0; --hd-h3: #f6bd8c; }
.hd-scen.hd-natt { --hd-h1: #6680ad; --hd-h2: #a3b3d1; --hd-h3: #d3d8e6; }
:root:not([data-theme="light"]) .hd-scen { background: linear-gradient(180deg, color-mix(in srgb, var(--hd-h1) 45%, #0a1420) 0, color-mix(in srgb, var(--hd-h2) 45%, #0a1420) 62%, color-mix(in srgb, var(--hd-h3) 45%, #0a1420) 100%); }
/* Vingar, svans och ben får egen takt per djur (--vk sätts i hero-djur.js), så flockar aldrig flaxar i takt. */
.mv-defs .vinge, .mv-defs .bolja { animation-duration: calc(1.3s * var(--vk, 1)); }
.mv-defs .vinge-gas, .mv-defs .d-lyft { animation-duration: calc(.6s * var(--vk, 1)); }

/* Träd. Lövens färg följer årstiden; vintern tar kronorna och lägger snö på granarna. */
.hd-scen { --hd-lov: color-mix(in srgb, var(--sl-kulle) 50%, #5f8f55); --hd-barr: color-mix(in srgb, var(--sl-kulle) 40%, #3f6b4c); }
.hd-stam { fill: var(--hd-tra); } .hd-bjork { fill: #ece8de; }
.hd-gran { fill: var(--hd-barr); } .hd-krona { fill: var(--hd-lov); }
.hd-gren { fill: none; stroke: var(--hd-tra); stroke-width: 1.4; stroke-linecap: round; display: none; }
.hd-snotak { fill: none; stroke: #fff; stroke-width: 2.2; stroke-linecap: round; display: none; }
.hd-blom { fill: #f7d9e0; display: none; }
.hd-fjarran { opacity: .55; }
.hd-tvaj { transform-box: fill-box; transform-origin: 50% 100%; animation: hd-tvaj 5s ease-in-out var(--dl, 0s) infinite alternate; }
@keyframes hd-tvaj { from { transform: rotate(-1.3deg); } to { transform: rotate(1.3deg); } }
.hd-var .hd-krona { fill: color-mix(in srgb, var(--hd-lov) 70%, #b9d98a); } .hd-var .hd-blom { display: inline; }
.hd-host .hd-krona.k0 { fill: color-mix(in srgb, #d9963f 75%, var(--hd-lov)); }
.hd-host .hd-krona.k1 { fill: color-mix(in srgb, #c8603f 75%, var(--hd-lov)); }
.hd-host .hd-krona.k2 { fill: color-mix(in srgb, #e5be52 75%, var(--hd-lov)); }
.hd-vinter .hd-krona { display: none; } .hd-vinter .hd-gren, .hd-vinter .hd-snotak { display: inline; }
/* Midsommarkransar, rök ur skorstenen, luciaflammor, glans på ballongen. */
.hd-krans { fill: none; stroke: var(--hd-lov); stroke-width: 3.4; }
.hd-rok { fill: var(--sl-moln, #fff); opacity: 0; animation: hd-rok 5s ease-out var(--dl, 0s) infinite; }
@keyframes hd-rok { 0% { transform: translate(0, 0) scale(.6); opacity: 0; } 20% { opacity: .55; } 100% { transform: translate(18px, -46px) scale(1.8); opacity: 0; } }
.hd-lagan { fill: #ffd98a; filter: drop-shadow(0 0 3px #ffc95c); transform-box: fill-box; transform-origin: 50% 100%; animation: hd-flamma .35s ease-in-out infinite alternate; }
@keyframes hd-flamma { from { transform: scale(.9, .85); } to { transform: scale(1.05, 1.1); } }
.hd-glans { fill: #fff; opacity: .55; }

/* Djurens färger blandas mot himlen (djur.css --d-* läser --p-dis, --p-fg, --dm), så de sjunker in i kortet. */
.hd-scen {
  --p-dis: #dfe9ee; --p-fg: #24343a; --dm: 90%;
  --hd-tra: #9b7a58; --hd-v1: #c8886f; --hd-v2: #86a07a; --hd-v3: #e2b85a; --hd-v4: #7aa2c4; --hd-vit: #f7f3ea; --hd-ton: #6b7f86;
  --hd-lampa: #f2c96a; --hd-bak-op: .45; --hd-fram-op: .6;
}
:root:not([data-theme="light"]) .hd-scen {
  --p-dis: #18282e; --p-fg: #081014; --dm: 74%;
  --hd-tra: #6d5640; --hd-v1: #a0705c; --hd-v2: #5f7a58; --hd-v3: #b8954a; --hd-v4: #56789a; --hd-vit: #c9c6bd; --hd-ton: #9fb1b6;
  --hd-lampa: #ffd98a; --hd-bak-op: .55; --hd-fram-op: .75;
}
.hd-bak { fill: var(--sl-as); opacity: var(--hd-bak-op); }
.hd-fram { fill: var(--sl-kulle); opacity: var(--hd-fram-op); }
.hd-tra { fill: none; stroke: var(--hd-tra); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.hd-tra-f { fill: var(--hd-tra); }
.hd-ram { fill: none; stroke: var(--hd-vit); stroke-width: 2.6; stroke-linecap: round; }
.hd-nat { fill: none; stroke: var(--hd-vit); stroke-width: .8; opacity: .7; }
.hd-vit { fill: var(--hd-vit); } .hd-svart { fill: #2b2b2b; }
.hd-v1 { fill: var(--hd-v1); } .hd-v2 { fill: var(--hd-v2); } .hd-v3 { fill: var(--hd-v3); } .hd-v4 { fill: var(--hd-v4); }
.hd-snore { fill: none; stroke: var(--hd-tra); stroke-width: 1; opacity: .8; }
.hd-vagg { fill: var(--sl-vagg); } .hd-tak { fill: var(--sl-tak); } .hd-fonster { fill: var(--sl-fonster); }
.hd-ljus { fill: var(--hd-lampa); }
.hd-moln { fill: var(--sl-moln, #fff); }
@keyframes hd-tand { to { opacity: 1; } }
.hd-rav { fill: var(--d-rav); }

/* Ett djur i taget: turen visas (.paa) och dess animationer startar om från noll när den tänds. */
.hd-tur { display: none; }
.hd-tur.paa { display: inline; }

/* Små rörelser som alltid går: vimplar och flaggor i vinden, noter som stiger, lampor som glimmar, moln som driver. */
.hd-svaj { transform-box: fill-box; transform-origin: 50% 0; animation: hd-svaj 3.4s ease-in-out var(--dl, 0s) infinite alternate; }
@keyframes hd-svaj { from { transform: rotate(-5deg); } to { transform: rotate(6deg); } }
.hd-vimpel { transform-box: fill-box; transform-origin: 0 50%; animation: hd-vimpel 2.6s ease-in-out infinite alternate; }
@keyframes hd-vimpel { from { transform: skewY(-6deg) scaleX(.94); } to { transform: skewY(5deg) scaleX(1); } }
.hd-ton { fill: var(--hd-ton); opacity: 0; animation: hd-ton var(--d, 3.6s) ease-out var(--dl, 0s) var(--n, infinite); }
@keyframes hd-ton { 0% { transform: translate(0, 0) rotate(0); opacity: 0; } 18% { opacity: 1; } 50% { transform: translate(calc(var(--tx, 10px) * -.4), -34px) rotate(var(--tr, 0deg)); } 100% { transform: translate(var(--tx, 10px), -72px) rotate(calc(var(--tr, 0deg) * -1)); opacity: 0; } }
/* Fest: konfetti, fyrverkeri, discokula och högtalare. */
.hd-konf { opacity: 0; animation: hd-konf var(--d, 3s) cubic-bezier(.15, .7, .45, 1) var(--dl, 0s) both; }
@keyframes hd-konf { 0% { opacity: 0; transform: translate(0, 0) rotate(0); } 5% { opacity: 1; } 30% { transform: translate(var(--kx), var(--ky)) rotate(calc(var(--kr) * .3)); } 80% { opacity: 1; } 100% { opacity: 0; transform: translate(calc(var(--kx) * 1.5), calc(var(--ky) + 230px)) rotate(var(--kr)); } }
.hd-raket { fill: var(--hd-lampa); opacity: 0; animation: hd-raket .9s cubic-bezier(.3, .6, .5, 1) var(--dl, 0s) both; }
@keyframes hd-raket { 0% { opacity: 0; transform: translateY(var(--ry)); } 4% { opacity: 1; } 92% { opacity: 1; } 100% { opacity: 0; transform: translateY(0); } }
.hd-small { fill: none; stroke-width: 2.4; stroke-linecap: round; opacity: 0; animation: hd-small 1.9s ease-out calc(var(--dl, 0s) + .85s) both; }
.hd-small circle { fill: var(--hd-lampa); stroke: none; }
@keyframes hd-small { 0% { opacity: 0; transform: scale(.12); } 8% { opacity: 1; } 55% { opacity: .95; } 100% { opacity: 0; transform: translateY(14px) scale(1.05); } }
:root:not([data-theme="light"]) .hd-small, :root:not([data-theme="light"]) .hd-raket { filter: drop-shadow(0 0 3px var(--hd-lampa)); }
.hd-disco { fill: #c9d2d9; }
.hd-fasett { fill: #fff; animation: hd-blink 1.1s ease-in-out var(--dl, 0s) infinite alternate; }
.hd-strale { animation: hd-strale 10s linear infinite; }
.hd-strale path { opacity: .14; }
@keyframes hd-strale { to { transform: rotate(360deg); } }
.hd-hogt { fill: #3c4348; }
.hd-mem { fill: #7f8b93; }
.hd-bas { transform-box: fill-box; transform-origin: center; animation: hd-bas .46s ease-in-out var(--dl, 0s) infinite alternate; }
@keyframes hd-bas { from { transform: scale(.8); } to { transform: scale(1.12); } }
.hd-lampa { fill: var(--hd-lampa); animation: hd-lampa 2.8s ease-in-out var(--dl, 0s) infinite alternate; }
@keyframes hd-lampa { from { opacity: .45; } to { opacity: 1; } }
:root:not([data-theme="light"]) .hd-lampa { filter: drop-shadow(0 0 4px var(--hd-lampa)); }
.hd-drift { animation: hd-drift var(--d, 120s) linear var(--dl, 0s) infinite alternate; }
@keyframes hd-drift { from { transform: translateX(-80px); } to { transform: translateX(90px); } }
.hd-gung { animation: hd-gung 4s ease-in-out infinite alternate; }
@keyframes hd-gung { from { transform: translateY(-4px) rotate(-1.5deg); } to { transform: translateY(4px) rotate(1.5deg); } }
.hd-dans { transform-box: fill-box; transform-origin: 50% 100%; animation: hd-dans .5s ease-in-out infinite alternate; }
@keyframes hd-dans { from { transform: rotate(-5deg); } to { transform: rotate(5deg); } }

/* Stämningen (hero-djur.js stamning()): himmel, tuvor, löv/snö/eldflugor. Tonar in när den byts. */
.hd-in { animation: hd-in 2.4s ease both; }
@keyframes hd-in { from { opacity: 0; } }
.hd-bak, .hd-fram { transition: fill 2.4s ease; }
.hd-sol { fill: var(--sl-sol); } .hd-sken { opacity: .22; }
.hd-morgon .hd-sol, .hd-kvall .hd-sol { fill: #ffdcb0; }
.hd-nattg, .hd-lys { display: none; }
.hd-scen.hd-natt .hd-sol { display: none; }
.hd-scen.hd-natt .hd-nattg, .hd-scen.hd-natt .hd-lys, .hd-scen.hd-kvall .hd-lys { display: inline; }
:root:not([data-theme="light"]) .hd-himmel { opacity: .35; }
.hd-mane { fill: #f1ead2; opacity: .85; }
.hd-stjarna { fill: #fff; animation: hd-blink 3s ease-in-out var(--dl, 0s) infinite alternate; }
@keyframes hd-blink { from { opacity: .12; } to { opacity: .75; } }
.hd-lys { fill: #f3e07a; filter: drop-shadow(0 0 3px #f3e07a); animation: hd-lys var(--d, 7s) ease-in-out var(--dl, 0s) infinite; }
@keyframes hd-lys { 0%, 100% { opacity: 0; transform: translate(0, 0); } 30% { opacity: .9; } 50% { transform: translate(14px, -12px); } 75% { opacity: .15; transform: translate(-6px, -4px); } }
.hd-vaj { transform-box: fill-box; transform-origin: 50% 100%; animation: hd-vaj 3.2s ease-in-out var(--dl, 0s) infinite alternate; }
@keyframes hd-vaj { from { transform: rotate(-7deg); } to { transform: rotate(7deg); } }
.hd-gras, .hd-stjalk { fill: none; stroke: var(--sl-ang); stroke-width: 1.6; stroke-linecap: round; opacity: .85; }
.hd-stjalk { stroke-width: 1.2; }
.hd-host .hd-gras { stroke: #b39457; }
.hd-fall { animation: hd-fall var(--d, 14s) linear var(--dl, 0s) infinite; }
@keyframes hd-fall { from { transform: translate(0, 0); } to { transform: translate(var(--sx, 0), 640px); } }
.hd-blad { transform-box: fill-box; transform-origin: center; animation: hd-snurr 2.6s ease-in-out infinite alternate; }
@keyframes hd-snurr { from { transform: rotate(-50deg) scaleX(1); } to { transform: rotate(70deg) scaleX(.4); } }
.hd-flinga { fill: #fff; opacity: .9; }
:root[data-theme="light"] .hd-flinga { stroke: rgba(90, 120, 140, .18); stroke-width: .6; }
/* Årstidens ton på kullarna. */
.hd-host .hd-fram { fill: color-mix(in srgb, var(--sl-kulle) 68%, #c99a45); }
.hd-host .hd-bak { fill: color-mix(in srgb, var(--sl-as) 72%, #c4844f); }
.hd-vinter .hd-fram { fill: color-mix(in srgb, var(--sl-kulle) 20%, #f2f6f8); }
.hd-vinter .hd-bak { fill: color-mix(in srgb, var(--sl-as) 30%, #e2eaef); }
:root:not([data-theme="light"]) .hd-vinter .hd-fram { fill: color-mix(in srgb, var(--sl-kulle) 50%, #a9b9c3); }
:root:not([data-theme="light"]) .hd-vinter .hd-bak { fill: color-mix(in srgb, var(--sl-as) 55%, #8d9ea9); }
@media (prefers-reduced-motion: reduce) { .hd-scen * { animation: none !important; } .hd-fall { display: none; } }

/* Testsidans väljare */
.hd-val { display: flex; flex-wrap: wrap; gap: 10px 22px; justify-content: center; margin: 24px auto 0; font: 500 14px/1 var(--font-ui); color: var(--fg-4); }
.hd-grupp { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.hd-grupp b { margin-right: 4px; color: var(--fg-2); }
.hd-val button { font: inherit; padding: 8px 14px; border-radius: 999px; border: 1px solid var(--w-07, rgba(127, 127, 127, .25)); background: var(--sd-kort); color: var(--fg-3); cursor: pointer; }
.hd-val select { font: inherit; padding: 8px 12px; border-radius: 999px; border: 1px solid var(--w-07, rgba(127, 127, 127, .25)); background: var(--sd-kort); color: var(--fg-1); }
.hd-val button[aria-pressed="true"] { background: var(--fg-1); color: var(--sd-kort); border-color: transparent; }
.hd-not { max-width: 720px; margin: 18px auto 40px; padding: 0 16px; text-align: center; color: var(--fg-5); font: 400 14px/1.55 var(--font-ui); }

/* Gång-katten: diagonala benpar växlar, kroppen gungar, svansen vajar. */
.hd-kb { transform-box: fill-box; transform-origin: 50% 0; animation: hd-kb .4s ease-in-out infinite alternate; }
.hd-kb2 { animation-delay: -.4s; }
@keyframes hd-kb { from { transform: rotate(24deg); } to { transform: rotate(-24deg); } }
.hd-kgung { animation: hd-kgung .2s ease-in-out infinite alternate; }
@keyframes hd-kgung { to { transform: translateY(-1.4px); } }
.hd-ksvans { transform-box: fill-box; transform-origin: 100% 100%; animation: hd-ksvans 1.1s ease-in-out infinite alternate; }
@keyframes hd-ksvans { from { transform: rotate(-10deg); } to { transform: rotate(12deg); } }

/* Tomma textfält (sida utan svar eller andraknapp) döljs; .ny-btn sätter display och slår annars ut [hidden]. */
.hd-hero [hidden] { display: none !important; }

/* Flygande uggla och trana (#hd-uggleflyg, #hd-tranflyg): vingslag kring axeln och en lätt gungning i takt. */
.hd-fv { animation: hd-fv calc(.5s * var(--vk, 1)) ease-in-out var(--vd, 0s) infinite alternate; }
.hd-fv2 { animation-delay: calc(var(--vd, 0s) - .06s); }
@keyframes hd-fv { from { transform: rotate(-8deg); } to { transform: rotate(6deg) scaleY(-.6); } }
.hd-fkropp { animation: hd-fkropp calc(.5s * var(--vk, 1)) ease-in-out var(--vd, 0s) infinite alternate; }
@keyframes hd-fkropp { from { transform: translateY(1.5px); } to { transform: translateY(-1.5px); } }
@media (prefers-reduced-motion: reduce) { .hd-fv, .hd-fkropp { animation: none; } }
/* Älgens ben: svingen som variabel (figur() sätter --sving och --steg efter farten). */
.mv-defs .dben { animation-name: hd-dben; }
@keyframes hd-dben { from { transform: rotate(calc(-1 * var(--sving, 15deg))); } to { transform: rotate(var(--sving, 15deg)); } }