/* v05-elljussparet.html – lyft ur startsektionerna med kalla/sx_in.py (ändra i källan och kör om) */
.v05 { position: relative; padding: var(--sektion) 0 0; overflow: hidden; }
.v05 .t-etikett .nr { color: var(--is-2); margin-right: 12px; font-variant-numeric: tabular-nums; }
.v05-huvud { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--spalt); row-gap: 24px; align-items: end; }
.v05-rubrik { grid-column: 1 / span 6; }
.v05-rubrik .t-etikett { margin-bottom: 30px; }
.v05 h2 { font-weight: 260; }
.v05-sida { grid-column: 8 / span 5; }
.v05-sida .t-ingress { max-width: 30ch; }
.v05-lankar { display: flex; flex-wrap: wrap; gap: 12px 36px; margin-top: 22px; }

/* scenen: fönsterbred, SVG:n fyller den, etiketterna och förklaringen ligger ovanpå */
.v05-scen { position: relative; margin-top: 32px; }
.v05-bild { position: relative; height: clamp(530px, 43vw, 660px); }   /* sju lyktor: snön är djupare än med sex, så att etiketterna får luft */
.v05-bild svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.v05-korn { position: absolute; inset: 0; pointer-events: none; opacity: .07;
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 30%, #000 82%, transparent); mask-image: linear-gradient(180deg, transparent, #000 30%, #000 82%, transparent);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .8 0 0 0 0 .86 0 0 0 0 .95 0 0 0 1.6 -.55'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E"); }
.js .v05-bild { opacity: 0; }
.v05.v05-spela .v05-bild { animation: v05-in .6s ease both; }
.v05.v05-klar .v05-bild { opacity: 1; }

/* spåret ritas från förgrunden mot horisonten (masken) */
.v05-ritmask { stroke-dasharray: 1 1; stroke-dashoffset: 1; }
.v05.v05-spela .v05-ritmask { animation: v05-rita 1.2s var(--ease) both; }
.v05.v05-klar .v05-ritmask { stroke-dashoffset: 0; }

/* lyktorna: pricken värms upp (platå på 35 %), halon, ljuspölen och ljuskäglan tänds */
.v05-prick, .v05-halo-ut, .v05-pol-ut, .v05-kon { opacity: 0; }
.v05.v05-spela .v05-prick { animation: v05-tand .62s ease-out var(--t) both; }
.v05.v05-spela .v05-halo-ut { animation: v05-in .9s ease-out calc(var(--t) + .1s) both; }
.v05.v05-spela .v05-pol-ut { animation: v05-in 1s ease calc(var(--t) + .15s) both; }
.v05.v05-spela .v05-kon { animation: v05-in 1s ease calc(var(--t) + .15s) both; }
.v05.v05-klar .v05-prick, .v05.v05-klar .v05-halo-ut, .v05.v05-klar .v05-pol-ut, .v05.v05-klar .v05-kon { opacity: 1; }
.v05-halo, .v05-aura { transform-box: fill-box; transform-origin: center; transition: transform .3s var(--ease), opacity .3s ease; }
.v05-aura { opacity: .7; }
.v05-pol { opacity: .82; transition: opacity .3s ease; }
.v05-pa .v05-halo { transform: scale(1.15); }
.v05-pa .v05-aura { opacity: 1; transform: scale(1.08); }
.v05-pa .v05-pol { opacity: 1; }

/* etiketterna: knappar som skriptet placerar vid sin lykta */
.v05-etiketter { position: absolute; left: 0; top: 0; width: 100%; height: 0; }
.v05-et { position: absolute; left: 0; top: 0; display: block; padding: 6px var(--pr, 10px) 6px var(--pl, 10px); border-radius: 8px; transform: translate(var(--x, 0px), var(--y, 0px));
  font-size: var(--fs, 20px); line-height: 1.12; font-weight: 300; font-variation-settings: "opsz" 32; letter-spacing: -.012em; color: rgba(212, 226, 243, var(--a, .84)); text-align: left; white-space: nowrap;
  -webkit-tap-highlight-color: transparent; transition: color .3s ease; }
.v05-et.v05-vanster { text-align: right; }
.v05-et::before { content: ""; position: absolute; top: 50%; left: var(--h0, 0px); width: var(--hl, 20px); height: 1px; margin-top: -.5px; background: rgba(205, 222, 242, .42); transform-origin: 0 50%; transition: background-color .3s ease; }
.v05-et.v05-vanster::before { left: auto; right: var(--h0, 0px); transform-origin: 100% 50%; }
.v05-et:hover, .v05-et.v05-pa { color: var(--is); }
.v05-et.v05-pa::before, .v05-et:hover::before { background: rgba(225, 236, 248, .75); }
/* texten mäts direkt efter att storlek/bredd satts: inga övergångar här (bas.css ger annars alla egenskaper en
   övergång på .01 s vid reducerad rörelse, och mätningen fick den gamla storleken) */
.v05-text { display: block; }
.v05-text, .v05-text * { transition: none; }
.v05-text .v05-ord { position: relative; display: inline-block; }
.v05-hel { white-space: nowrap; }                                  /* "pre-furnaces", "1976–2000" bryts inte */
/* det varma ordet: överlägget är ett pseudoelement, så att ordet bara finns en gång i texten (kopiering, sökmotorer) */
.v05-ord::after { content: attr(data-ord); position: absolute; left: 0; top: 0; background: var(--varmt-ord); -webkit-background-clip: text; background-clip: text; color: transparent; opacity: 0; pointer-events: none; }
.js .v05-et { opacity: 0; }
.js .v05-et::before { transform: scaleX(0); }
.v05.v05-spela .v05-et { animation: v05-upp .6s var(--ease) calc(var(--t) + .45s) both; }
.v05.v05-spela .v05-et::before { animation: v05-har .3s var(--ease) calc(var(--t) + .3s) both; }
.v05.v05-spela .v05-ord::after { animation: v05-in .9s ease 3.4s both; }
.v05.v05-klar .v05-et { opacity: 1; }
.v05.v05-klar .v05-et::before { transform: none; }
.v05.v05-klar .v05-ord::after { opacity: 1; }

/* förklaringen och mikrotexten: nere till vänster i scenen (dator), under scenen (mobil) */
.v05-info { position: absolute; left: max(var(--marg), calc((100% - var(--innehall)) / 2)); bottom: 46px; width: min(340px, 27vw); }
.v05-forklaring { transition: opacity .125s ease; }
.v05-forklaring.v05-tonad { opacity: 0; }
.v05-nr { display: block; margin-bottom: 10px; font-size: 11px; line-height: 1.3; font-weight: 600; font-stretch: 80%; letter-spacing: .2em; text-transform: uppercase; font-variant-numeric: tabular-nums; color: var(--is-3); }
.v05-ftext { display: block; min-height: calc(1.45em * 2); font-size: 17px; line-height: 1.45; color: var(--is-2); text-wrap: pretty; }
.v05-mikro { margin-top: 16px; font-size: 13px; line-height: 1.4; color: var(--is-4); }
.js .v05-forklaring, .js .v05-mikro { opacity: 0; }
/* förklaringen fyller bara bakåt, så att övertoningen vid byte syns redan under introt */
.v05.v05-spela .v05-forklaring { animation: v05-in .6s ease 1.5s backwards; opacity: 1; }
/* mikrotexten är introts sista animation (slutar 4,35 s, efter ordet "värme" 4,3 s och ljuspölarna 4,21 s):
   dess animationend sätter v05-klar, så att inget hoppar när animationerna tas bort */
.v05.v05-spela .v05-mikro { animation: v05-in .6s ease 3.75s both; }
.v05.v05-klar .v05-forklaring, .v05.v05-klar .v05-mikro { opacity: 1; }
.v05.v05-spela .v05-forklaring.v05-tonad, .v05.v05-klar .v05-forklaring.v05-tonad { opacity: 0; }

/* utanför bild står introt still */
.v05.v05-paus *, .v05.v05-paus *::before, .v05.v05-paus *::after { animation-play-state: paused !important; }

@keyframes v05-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes v05-rita { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes v05-tand { 0% { opacity: 0; } 32% { opacity: .35; } 52% { opacity: .35; } 100% { opacity: 1; } }
@keyframes v05-upp { from { opacity: 0; translate: 0 6px; } to { opacity: 1; translate: 0 0; } }
@keyframes v05-har { from { transform: scaleX(0); } to { transform: scaleX(1); } }

@media (max-width: 999px) {
  .v05-bild { height: 580px; }
  .v05-et { white-space: normal; text-wrap: balance; }
  .v05-info { position: relative; left: auto; bottom: auto; width: auto; max-width: calc(var(--innehall) + 2 * var(--marg)); margin: 4px auto 0; padding: 0 var(--marg) 40px; }
  .v05-ftext { min-height: calc(1.45em * 3); }
  /* mikrotexten på samma rad som räknaren, så att det inte blir ett glapp under korta förklaringar */
  .v05-mikro { position: absolute; top: -2px; right: var(--marg); margin: 0; }
}
@media (min-width: 600px) and (max-width: 999px) {
  .v05-ftext { min-height: calc(1.45em * 2); }
}
@media (max-width: 760px) {
  .v05-rubrik, .v05-sida { grid-column: 1 / -1; }
  .v05-huvud { row-gap: 20px; }
  .v05-lankar { margin-top: 18px; }
  .v05-scen { margin-top: 24px; }
}