/* Animerad infografik "Steg 1-2-3 – Resultat". Ersätter YouTube-filmen. */
.film{--f-bg:#101012;--f-ink:#f3f1ee;--f-muted:#a9a39c;--f-line:#3a3a40;--f-acc:#dca57d;--f-acc-2:#f0c8a6;
  position:relative;max-width:1000px;margin:0 auto;background:var(--f-bg);border-radius:14px;overflow:hidden;box-shadow:0 30px 80px rgba(0,0,0,.5);text-align:left;color:var(--f-ink)}
.film-stage{position:relative;aspect-ratio:2/1;background:radial-gradient(ellipse at 50% 40%,#1b1b1f 0%,#101012 70%)}
.film-scene{position:absolute;inset:0;width:100%;height:100%;opacity:0;visibility:hidden;transition:opacity .6s ease,visibility 0s .6s}
.film-scene.active{opacity:1;visibility:visible;transition:opacity .6s ease}
.film svg text{font-family:'Nunito',Helvetica,Arial,sans-serif;fill:var(--f-ink)}
.film svg .t-head{font-family:'Oswald',Helvetica,Arial,sans-serif;letter-spacing:.06em;text-transform:uppercase}
.film svg .muted{fill:var(--f-muted)}
.film svg .acc{fill:var(--f-acc)}

/* Bildtext */
.film-caption{padding:20px clamp(18px,4vw,36px) 18px;min-height:128px;border-top:1px solid #222}
.film-chapter{font-family:'Oswald',Helvetica,Arial,sans-serif;font-size:14px;letter-spacing:.2em;text-transform:uppercase;color:var(--f-acc);margin:0 0 6px}
.film-text{font-size:clamp(17px,2vw,21px);line-height:1.5;margin:0;max-width:760px}
.film-caption.swap .film-chapter,.film-caption.swap .film-text{animation:f-cap .7s ease both}
@keyframes f-cap{from{opacity:0;transform:translateY(8px)}}

/* Kontroller */
.film-controls{display:flex;align-items:center;gap:14px;padding:0 clamp(12px,3vw,24px) 16px}
.film-btn{flex:none;width:42px;height:42px;border-radius:50%;border:0;background:var(--f-acc);color:#16110c;display:grid;place-items:center;cursor:pointer}
.film-btn.ghost{background:transparent;color:var(--f-ink);border:1px solid #444}
.film-btn svg{width:18px;height:18px}
.film-btn[hidden]{display:none}
.film-segs{flex:1;display:flex;gap:5px}
.film-seg{flex:1;height:22px;border:0;padding:0;background:none;cursor:pointer;position:relative}
.film-seg::before{content:"";position:absolute;left:0;right:0;top:9px;height:4px;border-radius:2px;background:#34343a}
.film-seg span{position:absolute;left:0;top:9px;height:4px;border-radius:2px;background:var(--f-acc);width:0}
.film-seg:hover::before{background:#4a4a52}
.film :focus-visible{outline:3px solid var(--f-acc);outline-offset:2px}

/* Startbild */
.film-poster{position:absolute;inset:0;z-index:5;border:0;padding:0;cursor:pointer;color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;text-align:center;background:#000}
.film-poster img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.55}
.film-poster::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.1),rgba(0,0,0,.7))}
.film-poster > *:not(img){position:relative;z-index:1}
.film-poster .p-play{width:clamp(64px,9vw,96px);aspect-ratio:1;border-radius:50%;background:var(--f-acc);color:#16110c;display:grid;place-items:center;box-shadow:0 10px 30px rgba(0,0,0,.4);transition:transform .2s}
.film-poster:hover .p-play{transform:scale(1.06)}
.film-poster .p-play svg{width:38%;height:38%;margin-left:6%}
.film-poster .p-title{font-family:'Oswald',Helvetica,Arial,sans-serif;font-size:clamp(22px,3.4vw,38px);letter-spacing:.06em;text-transform:uppercase}
.film-poster .p-sub{font-size:clamp(14px,1.6vw,17px);opacity:.9;padding:0 16px}
.film.started .film-poster{display:none}

/* Slutbild */
.film-end{position:absolute;inset:auto 0 0;z-index:4;display:none;justify-content:center;gap:12px;padding:0 16px 5%}
.film.ended .film-end{display:flex}
.film-end .btn{font-size:13px;padding:10px 18px}

/* Paus: allt rörligt stannar */
.film.paused .film-scene *,.film.paused .film-caption *{animation-play-state:paused!important}

/* ---------- Scen 1: svarta lådan ---------- */
.s1 .coin{animation:f-coin 2.6s linear infinite both}
.s1 .coin:nth-of-type(2){animation-delay:.52s}.s1 .coin:nth-of-type(3){animation-delay:1.04s}.s1 .coin:nth-of-type(4){animation-delay:1.56s}.s1 .coin:nth-of-type(5){animation-delay:2.08s}
@keyframes f-coin{0%{transform:translate(0,0);opacity:0}12%{opacity:1}80%{opacity:1}100%{transform:translate(300px,0);opacity:0}}
.film-scene.active.s1 .box{animation:f-pop .8s .2s ease both}
.film-scene.active.s1 .qmark{animation:f-pulse 2.2s 1s ease-in-out infinite both}
.film-scene.active.s1 .person,.film-scene.active.s1 .lbl{animation:f-fade 1s .3s ease both}
.s1 .coin{animation-play-state:paused}
.film-scene.active.s1 .coin{animation-play-state:running}
@keyframes f-pulse{0%,100%{opacity:1}50%{opacity:.35}}

/* ---------- Scen 2: flödet ---------- */
.s2 .flow{stroke-dasharray:1;stroke-dashoffset:0}
.film-scene.active.s2 .flow{animation:f-draw 1.4s ease both}
.film-scene.active.s2 .flow.b{animation-delay:2.4s}.film-scene.active.s2 .flow.c{animation-delay:3s}.film-scene.active.s2 .flow.d{animation-delay:3.6s}
.film-scene.active.s2 .n1{animation:f-pop .6s .2s ease both}
.film-scene.active.s2 .n2{animation:f-pop .6s 1.5s ease both}
.film-scene.active.s2 .n3{animation:f-pop .6s 3.5s ease both}
.film-scene.active.s2 .n4{animation:f-pop .6s 4.1s ease both}
.film-scene.active.s2 .n5{animation:f-pop .6s 4.7s ease both}
.film-scene.active.s2 .tag{animation:f-fade 1s 5.6s ease both}
.film-scene.active.s2 .dot{animation:f-blink 1.6s 6s ease-in-out infinite both}
@keyframes f-draw{from{stroke-dashoffset:1}}
@keyframes f-blink{0%,100%{opacity:.25}50%{opacity:1}}

/* ---------- Scen 3: reglagen ---------- */
.s3 .fill{transform-box:fill-box;transform-origin:left center}
.film-scene.active.s3 .fill{animation:f-grow 1.4s ease both}
.film-scene.active.s3 .row:nth-of-type(2) .fill{animation-delay:.4s}.film-scene.active.s3 .row:nth-of-type(3) .fill{animation-delay:.8s}.film-scene.active.s3 .row:nth-of-type(4) .fill{animation-delay:1.2s}.film-scene.active.s3 .row:nth-of-type(5) .fill{animation-delay:1.6s}
.film-scene.active.s3 .row:nth-of-type(1) .fill{animation:f-grow 1.4s ease both,f-adjust 3s 4s ease-in-out both}
.film-scene.active.s3 .pct{animation:f-fade .8s 2.4s ease both}
.film-scene.active.s3 .badge{animation:f-pop .7s 5s ease both}
.film-scene.active.s3 .total{animation:f-fade .8s 3.2s ease both}
@keyframes f-grow{from{transform:scaleX(0)}}
@keyframes f-adjust{0%,100%{transform:scaleX(1)}50%{transform:scaleX(.8)}}

/* ---------- Scen 4: analys ---------- */
.s4 .prog{transform-box:fill-box;transform-origin:left center}
.film-scene.active.s4 .prog{animation:f-grow 3s .3s linear both}
.film-scene.active.s4 .pause{animation:f-pop .6s 3.3s ease both}
.film-scene.active.s4 .months{animation:f-fade .8s 3.3s ease both}
.s4 .bar{transform-box:fill-box;transform-origin:center bottom}
.film-scene.active.s4 .bar{animation:f-rise 1s ease both}
.film-scene.active.s4 .bar:nth-of-type(1){animation-delay:4.2s}.film-scene.active.s4 .bar:nth-of-type(2){animation-delay:4.4s}.film-scene.active.s4 .bar:nth-of-type(3){animation-delay:4.6s}.film-scene.active.s4 .bar:nth-of-type(4){animation-delay:4.8s}
.film-scene.active.s4 .lens{animation:f-lens 4s 5.4s ease-in-out infinite both}
.film-scene.active.s4 .elbl{animation:f-fade .8s 5.6s ease both}
@keyframes f-rise{from{transform:scaleY(0)}}
@keyframes f-lens{0%,100%{transform:translate(0,0)}50%{transform:translate(110px,-20px)}}

/* ---------- Scen 5: beslut ---------- */
.film-scene.active.s5 .q{animation:f-qout 7s ease both}
.film-scene.active.s5 .ok{animation:f-okin 7s ease both}
.film-scene.active.s5 .lbl1{animation:f-lbl1 7s ease both}
.film-scene.active.s5 .lbl2{animation:f-lbl2 7s ease both}
@keyframes f-qout{0%{opacity:0}10%{opacity:1}55%{opacity:1}65%{opacity:0}100%{opacity:0}}
@keyframes f-okin{0%,60%{opacity:0;transform:scale(.4)}72%{opacity:1;transform:scale(1.15)}80%,100%{opacity:1;transform:scale(1)}}
@keyframes f-lbl1{0%{opacity:0}10%,55%{opacity:1}62%,100%{opacity:0}}
@keyframes f-lbl2{0%,64%{opacity:0}74%,100%{opacity:1}}
.s5 .ok{transform-box:fill-box;transform-origin:center}
.s5 .q,.s5 .lbl1{opacity:0}

/* ---------- Scen 6: pyramiden ---------- */
.s6 .pyr{transform-box:fill-box;transform-origin:center}
.film-scene.active.s6 .pyr{animation:f-flip 2.4s 2.6s cubic-bezier(.7,0,.3,1) both}
.film-scene.active.s6 .elite{animation:f-down 2.4s 2.6s cubic-bezier(.7,0,.3,1) both}
.film-scene.active.s6 .folk{animation:f-up 2.4s 2.6s cubic-bezier(.7,0,.3,1) both}
.film-scene.active.s6 .before{animation:f-out 1s 2.2s ease both}
.film-scene.active.s6 .after{animation:f-fade 1s 5s ease both}
.s6 .pyr{transform:rotate(180deg)}
.s6 .elite{transform:translate(0,230px)}
.s6 .folk{transform:translate(0,-230px)}
.s6 .before{opacity:0}
@keyframes f-flip{from{transform:rotate(0)}}
@keyframes f-down{from{transform:translate(0,0)}}
@keyframes f-up{from{transform:translate(0,0)}}
@keyframes f-out{from{opacity:1}to{opacity:0}}

/* ---------- Scen 7: lika värda ---------- */
.film-scene.active.s7 .p{animation:f-pop .6s ease both}
.film-scene.active.s7 .eq{animation:f-fade 1s 1.4s ease both}
.film-scene.active.s7 .big{animation:f-fade 1.2s 2s ease both}

/* ---------- Scen "Hela vägen ner": spåra och styra på detaljnivå ---------- */
.sd .gauge{transform-box:fill-box;transform-origin:center top}
.film-scene.active.sd .gauge{animation:f-gauge 8.5s .4s ease both}
@keyframes f-gauge{0%{transform:scaleY(0)}5%,20%{transform:scaleY(.2)}25%,42%{transform:scaleY(.4)}47%,64%{transform:scaleY(.6)}69%,86%{transform:scaleY(.8)}92%,100%{transform:scaleY(1)}}
.sd .cn{stroke-dasharray:1;stroke-dashoffset:0}
.film-scene.active.sd .r0{animation:f-pop .7s .4s ease both}
.film-scene.active.sd .c1{animation:f-draw .8s 1.8s ease both}
.film-scene.active.sd .r1{animation:f-pop .7s 2.4s ease both}
.film-scene.active.sd .s1b{animation:f-fade 1s 3s ease both}
.film-scene.active.sd .c2{animation:f-draw .8s 3.6s ease both}
.film-scene.active.sd .r2{animation:f-pop .7s 4.2s ease both}
.film-scene.active.sd .s2b{animation:f-fade 1s 4.8s ease both}
.film-scene.active.sd .c3{animation:f-draw .8s 5.4s ease both}
.film-scene.active.sd .r3{animation:f-pop .7s 6s ease both}
.film-scene.active.sd .s3b{animation:f-fade 1s 6.6s ease both}
.film-scene.active.sd .c4{animation:f-draw .8s 7.2s ease both}
.film-scene.active.sd .r4{animation:f-pop .8s 7.8s ease both}
.film-scene.active.sd .tag4{animation:f-fade 1s 8.8s ease both}
.film-scene.active.sd .ctrl{animation:f-fade 1s 10.5s ease both}
.film-scene.active.sd .knob{animation:f-knob 5s 11.5s ease-in-out both}
@keyframes f-knob{0%{transform:translateX(0)}35%{transform:translateX(-70px)}70%{transform:translateX(-30px)}100%{transform:translateX(-45px)}}
.sd .knob{transform:translateX(-45px)}

/* Gemensamma */
.film svg .pop{transform-box:fill-box;transform-origin:center}
@keyframes f-pop{0%{opacity:0;transform:scale(.6)}70%{opacity:1;transform:scale(1.06)}100%{opacity:1;transform:scale(1)}}
@keyframes f-fade{from{opacity:0}}
.film-scene:not(.active) *{animation:none!important}

@media (max-width:640px){
  .film-caption{min-height:150px;padding-top:16px}
  .film-chapter{font-size:12px}
}
@media (prefers-reduced-motion:reduce){
  .film *,.film *::before{animation:none!important;transition:none!important}
}
@media (max-width:640px){
  .film-poster{gap:8px}
  .film-poster .p-sub{display:none}
  .film-poster .p-play{width:54px}
}