/* Kinnection, de gebouwde beelden. Opdracht 12f, 27-09-2026.

   Wat hier staat: de kleuren voor licht, schaduw, huid en praktijken, de wissel tussen de staande en de liggende opening,
   en de verhalen in de beelden. Een verhaal speelt onder .beeldslot.speelt; beelden.js zet die klasse:
   een keer vanzelf wanneer het beeld voor het eerst in beeld komt, en opnieuw bij aanwijzen. Het loopt altijd tot het einde.
   Elke beweging apart duurt hooguit --duration-story; een hele volgorde samen hooguit --duration-scene.
   Opdracht 12g: geen beweging loopt nog zichtbaar voorbij --duration-scene; beelden.js stopt het verhaal uiterlijk dan.
   Wie minder beweging vraagt, ziet meteen de eindstand (basis.css).

   Uitzondering op "geen losse maat": verschuivingen staan in punten van de tekening en tijden als deel van een volgorde.
   Het controlescript slaat dit bestand daarvoor over, zoals lijn.js. */
/* Uit site.css verhuisd in opdracht 12g: de drie bewegingen van voor 12f die de nieuwe beelden nog gebruiken.
   Bovenaan, zodat de regels van de nieuwe beelden hieronder voorgaan, zoals toen ze in site.css stonden. */
.beeld .beweegt{transform-box:fill-box;transform-origin:center}
.beeld .blad{transform-origin:center bottom}
@keyframes logo-springt{40%{transform:rotate(180deg) scale(1.45)}to{transform:rotate(360deg)}}
@keyframes gsm-wipt{30%{transform:translateY(-3%) scale(1.03)}}
@keyframes waaier-open{40%{transform:rotate(calc((var(--n,0) - 1) * -7deg))}}
.beeldslot.speelt .logo-springt{animation:logo-springt var(--duration-story) var(--ease-spring)}
.beeldslot.speelt .gsm-wipt{animation:gsm-wipt var(--duration-spring) var(--ease-spring)}
.beeldslot.speelt .blad{animation:waaier-open var(--duration-story) var(--ease-spring);animation-delay:calc(var(--stagger) * var(--n,0))}

/* De kleuren van de gebouwde beelden. De zes merkkleuren staan in site.css; hier licht, schaduw, huid en praktijkkleuren. */
.beeld .b-schaduw-1{fill:var(--color-art-shade)}
.beeld .b-schaduw-2{fill:var(--color-art-shade-strong)}
.beeld .b-licht-1{fill:var(--color-art-light)}
.beeld .b-licht-2{fill:var(--color-art-light-strong)}
.beeld .b-huid-1{fill:var(--color-art-skin-1)}
.beeld .b-huid-2{fill:var(--color-art-skin-2)}
.beeld .b-huid-3{fill:var(--color-art-skin-3)}
.beeld .b-leisteen{fill:var(--color-text-label)}
.beeld .b-salie{fill:var(--color-practice-sage)}
.beeld .b-zee{fill:var(--color-practice-sea)}
.beeld .b-oceaan{fill:var(--color-practice-ocean)}
.beeld .b-oker{fill:var(--color-practice-ochre)}
.beeld .b-pruim{fill:var(--color-practice-plum)}
.beeld .b-koraal{fill:var(--color-practice-coral)}
.beeld .b-bos{fill:var(--color-practice-forest)}
.beeld .l-schaduw-1{stroke:var(--color-art-shade)}
.beeld .l-schaduw-2{stroke:var(--color-art-shade-strong)}
.beeld .l-licht{stroke:var(--color-art-light)}
.beeld .l-leisteen{stroke:var(--color-text-label)}
.beeld .l-ruit{stroke:var(--color-rule-on-moment)}

/* De opening heeft twee schikkingen: staand naast de grote kop vanaf 900 breed, liggend eronder. Zo valt er niets meer weg. */
.beeld-staand{display:none}
@media (min-width:900px){
  .beeld-staand{display:block}
  .beeld-liggend{display:none}
}
/* In de week staat het beeld tussen 900 en 1100 breed onder de tekst, zodat het niet krimpt tot een postzegel. --screen-wide in tokens.css. */
@media (min-width:900px) and (max-width:1099px){
  .week-rooster .paneel-rooster{grid-template-columns:minmax(0,1fr)}
}

.beeld .vink-nieuw{transform:scale(0);transform-origin:center}
.beeld .blad-uit{transform-origin:center bottom}
.beeld .gsm-vink,.beeld .vonk,.beeld .mapje-vlucht,.beeld .flits,.beeld .huis-licht,.beeld .staal-vlucht{opacity:0}
.beeld .vlam,.beeld .staaf-groei{transform-origin:center bottom}
.beeld .laag-1,.beeld .laag-2,.beeld .laag-3,.beeld .laag-4{transform:scaleY(0);transform-origin:center bottom}
.beeld .sneaker-hup,.beeld .fles-wieg,.beeld .zweef{transform-origin:center bottom}
.beeld .film-voortgang{transform-origin:left center}
.beeld .scherm-film,.beeld .scherm-proficiat,.beeld .map-vlucht{opacity:0}
.beeld .hangmap,.beeld .gewicht-hup{transform-origin:center bottom}
.beeld .proficiat-vink,.beeld .ster,.beeld .confetti{transform-origin:center}
.beeld .band-lus{transform-origin:center}
.beeld .fles-wieg{transform-origin:center}
.beeld .map-spoor{opacity:0}
.beeld .ballon-pop,.beeld .notitie,.beeld .boek{transform-origin:center}
.beeld .blad-omslaan{transform-origin:left center}
.beeld .valt,.beeld .oefenblad,.beeld .prop-valt,.beeld .tegel-val,.beeld .oog-bord,.beeld .koptelefoon,.beeld .stift{transform-origin:center}
.beeld .gordijn-l{transform-origin:left center}
.beeld .gordijn-r{transform-origin:right center}
.beeld .oog-streep{transform-origin:center}
.beeld .praat,.beeld .golfbalk{transform-origin:center}
.beeld .bord-zwaai{transform-origin:center top}
.beeld .halter-draai,.beeld .mat-rol{transform-box:fill-box;transform-origin:center}
.beeld .plan-gloed{opacity:0}
.beeld .lamp-stijgt{transform-origin:center}
.beeld .tekenstap path{stroke-dasharray:1 1;stroke-dashoffset:0}
.beeld .logo-overtrek .trek{stroke-dasharray:1 1;stroke-dashoffset:0}
.beeld .buste{transform-origin:center bottom}
.beeld .buste-kop{transform-box:fill-box;transform-origin:center bottom}
.beeld .reiziger{opacity:0}
.beeld .flits-e{opacity:0}
.beeld .halte{transform-origin:center}
.beeld .fiche-vink{transform-box:fill-box;transform-origin:center;transform:scale(0)}
.beeld .scherm-gewicht{transform-origin:center bottom}
.beeld .scherm-balk{transform-box:fill-box;transform-origin:left center;transform:scaleX(.3)}
.beeld .logo-naar-achter{transform-box:fill-box;transform-origin:center;opacity:.14}
.beeld .dag-draai{transform-box:fill-box;transform-origin:center}
.beeld .kruis{transform-box:fill-box;transform-origin:center;transform:scale(0)}
.beeld .weg-zwier{transform-box:fill-box;transform-origin:center}
.beeld .dag-vink2{transform-box:fill-box;transform-origin:center}
.beeld .opm,.beeld .terug{opacity:0}
.beeld .praktijk-hop,.beeld .gsm-bouw{transform-origin:center bottom}
.beeld .reiziger-l{opacity:0}
@keyframes kaartje-aan{0%{transform:none}55%{transform:translate(calc(var(--dx) * 1px),calc(var(--dy) * 1px)) scale(0.35);opacity:1}62%{opacity:0}63%{transform:none;opacity:0}100%{opacity:1}}
@keyframes spoor{to{stroke-dashoffset:-66}}
@keyframes vink-in{0%{transform:scale(0)}60%{transform:scale(1.35) rotate(-8deg)}100%{transform:scale(1)}}
@keyframes vink-golf{40%{transform:translateY(-35%) scale(1.12)}70%{transform:translateY(6%)}}
@keyframes blad-uit{40%{transform:translateY(-16%) rotate(-4deg)}70%{transform:translateY(-12%)}}
@keyframes vonk{0%,62%{opacity:0;transform:none}66%{opacity:1}92%{opacity:1;transform:translate(calc(var(--vx) * 1px),calc(var(--vy) * 1px)) rotate(120deg)}100%{opacity:0;transform:translate(calc(var(--vx) * 1px),calc(var(--vy) * 1px)) rotate(140deg)}}
@keyframes vlam{0%,62%,100%{transform:none}70%{transform:scale(1.3) rotate(-7deg)}78%{transform:scale(.94) rotate(5deg)}86%{transform:scale(1.14)}}
@keyframes staaf{0%,70%{transform:none}77%{transform:scaleY(.15)}88%{transform:scaleY(1.15)}94%,100%{transform:none}}
@keyframes flits{0%,30%,37%,60%,67%,100%{opacity:0}33%,63%{opacity:1}}
@keyframes kaartje-uit-raam{0%,64%{transform:none;opacity:1}80%{transform:translate(40px,-80px) rotate(-14deg) scale(.8)}92%{transform:translate(90px,-40px) scale(.25);opacity:1}96%,100%{opacity:0;transform:translate(90px,-40px) scale(.2)}}
@keyframes huis-licht{0%,90%{opacity:0}95%,100%{opacity:1}}
@keyframes spoor-teken{0%,62%{stroke-dashoffset:0}92%,100%{stroke-dashoffset:-88}}
@keyframes staal-vlucht{0%{opacity:1;transform:none}18%{opacity:1;transform:translate(180px,-150px) rotate(24deg) scale(.6)}22%,100%{opacity:0;transform:translate(180px,-150px) scale(.4)}}
@keyframes laag-1{0%,16.7%{transform:scaleY(0)}25.7%{transform:scaleY(1.04)}27.7%,96%{transform:scaleY(1)}100%{transform:scaleY(0)}}
@keyframes teken-1{0%,12%{stroke-dashoffset:1}30%,100%{stroke-dashoffset:0}}
@keyframes naam-1{0%,25.7%{transform:translateX(-140%);opacity:0}32.7%,100%{transform:none;opacity:1}}
@keyframes laag-2{0%,34%{transform:scaleY(0)}43%{transform:scaleY(1.04)}45%,96%{transform:scaleY(1)}100%{transform:scaleY(0)}}
@keyframes teken-2{0%,40%{stroke-dashoffset:1}58%,100%{stroke-dashoffset:0}}
@keyframes naam-2{0%,43%{transform:translateX(-140%);opacity:0}50%,100%{transform:none;opacity:1}}
@keyframes laag-3{0%,51.3%{transform:scaleY(0)}60.3%{transform:scaleY(1.04)}62.3%,96%{transform:scaleY(1)}100%{transform:scaleY(0)}}
@keyframes teken-3{0%,62%{stroke-dashoffset:1}76%,100%{stroke-dashoffset:0}}
@keyframes naam-3{0%,60.3%{transform:translateX(-140%);opacity:0}67.3%,100%{transform:none;opacity:1}}
@keyframes laag-4{0%,68.7%{transform:scaleY(0)}77.7%{transform:scaleY(1.04)}79.7%,96%{transform:scaleY(1)}100%{transform:scaleY(0)}}
@keyframes teken-4{0%,74%{opacity:0}80%,100%{opacity:1}}
@keyframes naam-4{0%,77.7%{transform:translateX(-140%);opacity:0}84.7%,100%{transform:none;opacity:1}}
@keyframes gsm-schok{0%,16%{transform:none}24.7%{transform:rotate(-4deg) scale(1.03)}29.7%{transform:rotate(2deg)}33.7%{transform:none}42%{transform:rotate(-4deg) scale(1.03)}47%{transform:rotate(2deg)}51%{transform:none}59.3%{transform:rotate(-4deg) scale(1.03)}64.3%{transform:rotate(2deg)}68.3%{transform:none}76.7%{transform:rotate(-4deg) scale(1.03)}81.7%{transform:rotate(2deg)}85.7%{transform:none}100%{transform:none}}
@keyframes film-gewicht{0%,20%,100%{transform:none}40%{transform:translateY(-26%)}60%{transform:none}80%{transform:translateY(-26%)}}
@keyframes film-voortgang{0%{transform:scaleX(1)}60%{transform:scaleX(2.2)}100%{transform:scaleX(2.2)}}
@keyframes fles-wieg{0%,70%,100%{transform:none}76%{transform:rotate(-8deg)}84%{transform:rotate(5deg)}90%{transform:rotate(-2deg)}}
@keyframes opname{0%,100%{opacity:1}25%,75%{opacity:0}50%{opacity:1}}
@keyframes gsm-film{0%,100%{transform:none}30%{transform:rotate(-3deg)}60%{transform:rotate(2deg)}}
@keyframes scherm-film{0%,26%{opacity:0}30%,58%{opacity:1}62%,100%{opacity:0}}
@keyframes scherm-proficiat{0%,58%{opacity:0}62%,100%{opacity:1}}
@keyframes proficiat-vink{0%,60%{transform:scale(0) rotate(-30deg)}70%{transform:scale(1.2) rotate(6deg)}76%,100%{transform:none}}
@keyframes ster{0%,64%{transform:scale(0)}72%{transform:scale(1.5) rotate(45deg)}82%{transform:scale(.8) rotate(90deg)}92%,100%{transform:scale(1) rotate(90deg)}}
@keyframes confetti{0%,60%{transform:translateY(-40px);opacity:0}64%{opacity:1}100%{transform:translateY(170px) rotate(var(--cr));opacity:1}}
@keyframes hangmap{0%,100%{transform:none}30%{transform:translateY(-14%) rotate(-4deg)}55%{transform:translateY(3%)}}
@keyframes map-vlucht{0%,22%{opacity:0;transform:none}26%{opacity:1;transform:translateY(-20px) scale(1.15)}55%{opacity:1;transform:translate(200px,-60px) rotate(-10deg) scale(1)}80%{opacity:1;transform:translate(390px,150px) rotate(8deg) scale(.4)}86%,100%{opacity:0;transform:translate(390px,150px) scale(.3)}}
@keyframes gewicht-hup{0%,62%,100%{transform:none}70%{transform:translateY(-20%) rotate(-6deg)}80%{transform:none}86%{transform:translateY(-6%)}}
@keyframes kaartje-aan3{0%{transform:none;opacity:1}24%{transform:translate(calc(var(--dx) * 1px),calc(var(--dy) * 1px)) scale(.35);opacity:1}28%,99%{transform:translate(calc(var(--dx) * 1px),calc(var(--dy) * 1px)) scale(.3);opacity:0}100%{transform:none;opacity:1}}
@keyframes gewicht-sprong{0%,60%,100%{transform:none}64%{transform:translateY(8%) scaleY(.9)}70%{transform:translateY(-90%) rotate(-160deg)}78%{transform:translateY(-110%) rotate(-300deg)}86%{transform:translateY(0) rotate(-360deg) scaleY(.88)}90%{transform:translateY(-18%) rotate(-360deg)}95%{transform:rotate(-360deg)}}
@keyframes fles-flip{0%,62%,100%{transform:none}66%{transform:translateY(6%) scaleY(.92)}74%{transform:translateY(-80%) rotate(180deg)}84%{transform:translateY(0) rotate(360deg) scaleY(.9)}89%{transform:translateY(-12%) rotate(360deg)}94%{transform:rotate(360deg)}}
@keyframes band-lus{0%,60%,100%{transform:none}65%{transform:scale(1.45,.6)}71%{transform:scale(.8,1.35) rotate(-6deg)}77%{transform:scale(1.2,.85) rotate(4deg)}83%{transform:scale(.93,1.08)}89%{transform:scale(1.04,.97)}}
@keyframes map-spoor{0%,20%{opacity:0;stroke-dashoffset:0}26%,80%{opacity:1}100%{opacity:0;stroke-dashoffset:-90}}
@keyframes ballon-pop{0%,100%{transform:none}30%{transform:translateY(-12%) scale(1.12)}55%{transform:translateY(3%) scale(.97)}}
@keyframes golf{0%,100%{transform:none}25%,75%{transform:scaleY(1.8)}50%{transform:scaleY(.6)}}
@keyframes blad-omslaan{0%,30%{transform:none}60%{transform:scaleX(-1)}100%{transform:scaleX(-1)}}
@keyframes oefenblad{0%,100%{transform:none}30%{transform:rotate(-8deg) scale(1.06)}60%{transform:rotate(4deg)}}
@keyframes tegels-scroll{0%{transform:none}100%{transform:translateY(-60%)}}
@keyframes gordijn{0%,100%{transform:none}20%{transform:scaleX(.7)}40%{transform:scaleX(1.05)}}
@keyframes oog-bord{0%,40%{transform:scale(0)}60%{transform:scale(1.25) rotate(-6deg)}75%,100%{transform:none}}
@keyframes oog-streep{0%,55%{transform:scale(0)}75%,100%{transform:none}}
@keyframes praat{0%{transform:scale(0);opacity:0}12%{transform:scale(1.15);opacity:1}20%{transform:none}70%{opacity:1}100%{opacity:1}}
@keyframes golfbalk{0%,100%{transform:none}25%{transform:scaleY(1.5)}50%{transform:scaleY(.5)}75%{transform:scaleY(1.2)}}
@keyframes fiche{0%,100%{transform:none}35%{transform:translateY(-10px) rotate(-3deg)}65%{transform:translateY(2px)}}
@keyframes bord-zwaai{0%,100%{transform:none}25%{transform:rotate(8deg)}55%{transform:rotate(-6deg)}80%{transform:rotate(3deg)}}
@keyframes halter-draai{0%{transform:none}45%{transform:translateY(-55%) rotate(180deg)}75%{transform:translateY(6%) rotate(360deg)}100%{transform:rotate(360deg)}}
@keyframes kast-glans{0%{transform:translateX(0)}100%{transform:translateX(300px)}}
@keyframes plan-gloed{0%,92%{opacity:0}96%{opacity:1}100%{opacity:0}}
@keyframes lamp-stijgt{0%,52%{transform:translateY(40px) scale(.2);opacity:0}58%{opacity:1}66%{transform:translateY(-12px) scale(1.25)}74%,100%{transform:none;opacity:1}}
@keyframes praat2{0%{transform:scale(0);opacity:0}6%{transform:scale(1.2);opacity:1}12%,100%{transform:none;opacity:1}}
@keyframes overtrek{0%,70%{stroke-dashoffset:1}96%,100%{stroke-dashoffset:0}}
@keyframes buste-praat{0%,100%{transform:none}10%{transform:translateY(-6px) scale(1.03)}20%{transform:none}28%{transform:translateY(-3px)}36%{transform:none}}
@keyframes kop-knik{0%,100%{transform:none}8%{transform:rotate(-6deg)}16%{transform:rotate(4deg)}24%{transform:rotate(-3deg)}32%{transform:none}}
@keyframes reiziger{0%,8%{opacity:0;transform:none}10%{opacity:1}28%{transform:translate(170px,120px) scale(.9)}40%{transform:translate(170px,120px) scale(.9)}58%{transform:translate(90px,300px)}66%{transform:translate(90px,300px)}78%{transform:translate(-40px,200px)}86%{transform:translate(-40px,200px)}96%{opacity:1;transform:translate(0,20px)}100%{opacity:0;transform:none}}
@keyframes flits-e{0%,2%{opacity:0;transform:scale(.4)}6%{opacity:1;transform:scale(1.2)}12%,100%{opacity:0}}
@keyframes halte{0%,100%{transform:none}8%{transform:scale(1.12) translateY(-4%)}14%{transform:none}}
@keyframes scherm-gewicht{0%,30%,100%{transform:none}34%{transform:translateY(-30%)}38%{transform:none}42%{transform:translateY(-30%)}46%{transform:none}}
@keyframes scherm-balk{0%,28%{transform:scaleX(.3)}48%,100%{transform:scaleX(1)}}
@keyframes fiche-vink{0%,78%{transform:scale(0)}84%{transform:scale(1.6)}90%,100%{transform:none}}
@keyframes logo-naar-achter{0%{opacity:1;transform:translateY(40px) scale(1.35)}20%{opacity:1;transform:translateY(40px) scale(1.35)}60%,100%{opacity:.14;transform:none}}
@keyframes dag-draai{0%,40%{transform:none}48%{transform:scaleX(0)}56%{transform:scaleX(1) translateY(-8%)}64%,100%{transform:none}}
@keyframes dag-vink2{0%,50%{transform:scale(0)}58%{transform:scale(1.5)}64%,100%{transform:none}}
@keyframes kruis{0%{transform:scale(0)}12%{transform:scale(1.2)}18%,100%{transform:none}}
@keyframes weg-1{0%,20%{transform:none;opacity:1}45%{transform:translate(-260px,-120px) rotate(-200deg) scale(.6);opacity:1}50%,100%{opacity:0;transform:translate(-260px,-120px)}}
@keyframes weg-2{0%,20%{transform:none;opacity:1}45%{transform:translate(260px,-120px) rotate(200deg) scale(.6);opacity:1}50%,100%{opacity:0;transform:translate(260px,-120px)}}
@keyframes opm-0{0%{opacity:0;transform:translate(0,-60px) scale(.5)}6%{opacity:1;transform:translate(0,-60px)}28%{opacity:1;transform:translate(0,30px) scale(.6)}32%,100%{opacity:0;transform:translate(0,30px)}}
@keyframes opm-1{0%,10%{opacity:0;transform:none}16%{opacity:1}38%{opacity:1;transform:translate(110px,-70px) scale(.6)}42%,100%{opacity:0;transform:translate(110px,-70px)}}
@keyframes opm-2{0%,20%{opacity:0;transform:none}26%{opacity:1}48%{opacity:1;transform:translate(-110px,-70px) scale(.6)}52%,100%{opacity:0;transform:translate(-110px,-70px)}}
@keyframes gsm-bouw{0%,44%,100%{transform:none}50%{transform:scale(1.14) rotate(-4deg)}56%{transform:scale(.96) rotate(3deg)}62%{transform:scale(1.05)}68%{transform:none}}
@keyframes terug-0{0%,64%{opacity:0;transform:none}68%{opacity:1}86%{opacity:1;transform:translate(0,-130px) scale(1.2)}92%,100%{opacity:0;transform:translate(0,-130px)}}
@keyframes terug-1{0%,66%{opacity:0;transform:none}70%{opacity:1}88%{opacity:1;transform:translate(-190px,40px) scale(1.2)}94%,100%{opacity:0;transform:translate(-190px,40px)}}
@keyframes terug-2{0%,68%{opacity:0;transform:none}72%{opacity:1}90%{opacity:1;transform:translate(190px,40px) scale(1.2)}96%,100%{opacity:0;transform:translate(190px,40px)}}
@keyframes praktijk-hop{0%,100%{transform:none}10%{transform:translateY(-10%) scale(1.04)}18%{transform:none}}
@keyframes reiziger-l{0%,8%{opacity:0;transform:none}10%{opacity:1}28%{transform:translate(320px,112px) scale(.9)}40%{transform:translate(320px,112px) scale(.9)}58%{transform:translate(170px,282px)}66%{transform:translate(170px,282px)}78%{transform:translate(-20px,208px)}86%{transform:translate(-20px,208px)}96%{opacity:1;transform:translate(0,20px)}100%{opacity:0;transform:none}}
.beeldslot.speelt .kaartje-aan{animation:kaartje-aan 1400ms var(--ease-calm) both}
.beeldslot.speelt .spoor{animation:spoor 1400ms linear}
.beeldslot.speelt .vink-nieuw{animation:vink-in 500ms var(--ease-spring) 1900ms both}
.beeldslot.speelt .vink-golf{animation:vink-golf 600ms var(--ease-spring) both;animation-delay:calc(2080ms + var(--stagger) * var(--n,0))}
.beeldslot.speelt .blad-uit{animation:blad-uit var(--duration-story) var(--ease-spring)}
.beeldslot.speelt .vonk{animation:vonk var(--duration-scene) var(--ease-calm) both}
.beeldslot.speelt .vlam{animation:vlam var(--duration-scene) var(--ease-spring)}
.beeldslot.speelt .staaf-groei{animation:staaf 2800ms var(--ease-spring) both;animation-delay:calc(var(--stagger) * var(--n,0))}
.beeldslot.speelt .flits{animation:flits var(--duration-scene) linear both}
.beeldslot.speelt .kaartje-uit-raam{animation:kaartje-uit-raam var(--duration-scene) var(--ease-calm) both}
.beeldslot.speelt .huis-licht{animation:huis-licht var(--duration-scene) linear both}
.beeldslot.speelt .spoor-teken{animation:spoor-teken var(--duration-scene) linear both}
.beeldslot.speelt .staal-vlucht{animation:staal-vlucht var(--duration-scene) var(--ease-calm) both}
.beeldslot.speelt .laag-1{animation:laag-1 var(--duration-scene) var(--ease-calm) both}
.beeldslot.speelt .teken-1{animation:teken-1 var(--duration-scene) var(--ease-spring) both}
.beeldslot.speelt .naam-1{animation:naam-1 var(--duration-scene) var(--ease-calm) both}
.beeldslot.speelt .laag-2{animation:laag-2 var(--duration-scene) var(--ease-calm) both}
.beeldslot.speelt .teken-2{animation:teken-2 var(--duration-scene) var(--ease-spring) both}
.beeldslot.speelt .naam-2{animation:naam-2 var(--duration-scene) var(--ease-calm) both}
.beeldslot.speelt .laag-3{animation:laag-3 var(--duration-scene) var(--ease-calm) both}
.beeldslot.speelt .teken-3{animation:teken-3 var(--duration-scene) var(--ease-spring) both}
.beeldslot.speelt .naam-3{animation:naam-3 var(--duration-scene) var(--ease-calm) both}
.beeldslot.speelt .laag-4{animation:laag-4 var(--duration-scene) var(--ease-calm) both}
.beeldslot.speelt .teken-4{animation:teken-4 var(--duration-scene) var(--ease-spring) both}
.beeldslot.speelt .naam-4{animation:naam-4 var(--duration-scene) var(--ease-calm) both}
.beeldslot.speelt .gsm-schok{animation:gsm-schok var(--duration-scene) var(--ease-spring)}
.beeldslot.speelt .film-gewicht{animation:film-gewicht var(--duration-scene) var(--ease-calm) both}
.beeldslot.speelt .film-voortgang{animation:film-voortgang var(--duration-scene) linear both}
.beeldslot.speelt .fles-wieg{animation:fles-wieg var(--duration-scene) var(--ease-spring)}
.beeldslot.speelt .opname{animation:opname 1000ms linear 3}
.beeldslot.speelt .gsm-film{animation:gsm-film 1600ms var(--ease-calm) 500ms}
.beeldslot.speelt .scherm-film{animation:scherm-film var(--duration-scene) linear both}
.beeldslot.speelt .scherm-proficiat{animation:scherm-proficiat var(--duration-scene) linear both}
.beeldslot.speelt .proficiat-vink{animation:proficiat-vink var(--duration-scene) var(--ease-spring) both}
.beeldslot.speelt .ster{animation:ster var(--duration-scene) var(--ease-spring) both;animation-delay:calc(60ms * var(--n,0))}
.beeldslot.speelt .confetti{animation:confetti 2600ms var(--ease-calm) both;animation-delay:calc(30ms * var(--n,0))}
.beeldslot.speelt .hangmap{animation:hangmap var(--duration-enter) var(--ease-spring) both;animation-delay:calc(200ms + 70ms * var(--n,0))}
.beeldslot.speelt .map-vlucht{animation:map-vlucht var(--duration-scene) var(--ease-calm) both}
.beeldslot.speelt .gewicht-hup{animation:gewicht-hup var(--duration-scene) var(--ease-spring)}
.beeldslot.speelt .kaartje-aan{animation:kaartje-aan3 var(--duration-scene) var(--ease-calm) both}
.beeldslot.speelt .gewicht-hup{animation:gewicht-sprong var(--duration-scene) var(--ease-calm) both}
.beeldslot.speelt .fles-wieg{animation:fles-flip var(--duration-scene) var(--ease-calm) both}
.beeldslot.speelt .band-lus{animation:band-lus var(--duration-scene) var(--ease-spring) both}
.beeldslot.speelt .map-spoor{animation:map-spoor var(--duration-scene) linear both}
.beeldslot.speelt .ballon-pop{animation:ballon-pop var(--duration-enter) var(--ease-spring) both;animation-delay:calc(150ms * var(--n,0))}
.beeldslot.speelt .blad-omslaan{animation:blad-omslaan 1400ms var(--ease-calm) both}
.beeldslot.speelt .oefenblad{animation:oefenblad 800ms var(--ease-spring) 200ms}
.beeldslot.speelt .tegels-scroll{animation:tegels-scroll 2600ms var(--ease-calm) both}
.beeldslot.speelt .gordijn-l,.beeldslot.speelt .gordijn-r{animation:gordijn 1200ms var(--ease-spring) 1400ms}
.beeldslot.speelt .oog-bord{animation:oog-bord var(--duration-scene) var(--ease-spring) both}
.beeldslot.speelt .oog-streep{animation:oog-streep var(--duration-scene) var(--ease-spring) both}
.beeldslot.speelt .praat-0{animation:praat var(--duration-scene) var(--ease-spring) both}
.beeldslot.speelt .praat-1{animation:praat var(--duration-scene) var(--ease-spring) 450ms both}
.beeldslot.speelt .golfbalk{animation:golfbalk 800ms var(--ease-calm) 3;animation-delay:calc(60ms * var(--n,0))}
.beeldslot.speelt .bord-zwaai{animation:bord-zwaai var(--duration-story) var(--ease-calm) both;animation-delay:calc(150ms * var(--n,0))}
.beeldslot.speelt .halter-draai{animation:halter-draai 800ms var(--ease-spring) both;animation-delay:calc(250ms + 120ms * var(--n,0))}
.beeldslot.speelt .kast-glans{animation:kast-glans 900ms var(--ease-calm) both}
.beeldslot.speelt .stap-1 path{animation:teken-1 var(--duration-scene) var(--ease-calm) both}
.beeldslot.speelt .stap-2 path{animation:teken-2 var(--duration-scene) var(--ease-calm) both}
.beeldslot.speelt .stap-3 path{animation:teken-3 var(--duration-scene) var(--ease-calm) both}
.beeldslot.speelt .stap-4{animation:teken-4 var(--duration-scene) linear both}
.beeldslot.speelt .plan-gloed{animation:plan-gloed var(--duration-scene) linear both}
.beeldslot.speelt .lamp-stijgt{animation:lamp-stijgt var(--duration-scene) var(--ease-spring) both}
.beeldslot.speelt .praat-0{animation:praat2 var(--duration-scene) var(--ease-spring) both}
.beeldslot.speelt .praat-1{animation:praat2 var(--duration-scene) var(--ease-spring) 900ms both}
.beeldslot.speelt .logo-overtrek .trek{animation:overtrek 2760ms var(--ease-calm) both}
.beeldslot.speelt .logo-overtrek .trek-1{animation-delay:120ms}
.beeldslot.speelt .logo-overtrek .trek-2{animation-delay:240ms}
.beeldslot.speelt .buste-expert{animation:buste-praat var(--duration-scene) var(--ease-spring) both}
.beeldslot.speelt .buste-client{animation:buste-praat var(--duration-scene) var(--ease-spring) 900ms both}
.beeldslot.speelt .kop-expert{animation:kop-knik var(--duration-scene) var(--ease-calm) both}
.beeldslot.speelt .kop-client{animation:kop-knik var(--duration-scene) var(--ease-calm) 900ms both}
.beeldslot.speelt .reiziger{animation:reiziger var(--duration-scene) var(--ease-calm) both}
.beeldslot.speelt .flits-e{animation:flits-e var(--duration-scene) linear both}
.beeldslot.speelt .halte-1{animation:halte var(--duration-scene) var(--ease-spring) both}
.beeldslot.speelt .halte-2{animation:halte var(--duration-scene) var(--ease-spring) 850ms both}
.beeldslot.speelt .halte-3{animation:halte var(--duration-scene) var(--ease-spring) 1750ms both}
.beeldslot.speelt .halte-4{animation:halte var(--duration-scene) var(--ease-spring) 2350ms both}
.beeldslot.speelt .scherm-gewicht{animation:scherm-gewicht var(--duration-scene) var(--ease-spring) both}
.beeldslot.speelt .scherm-balk{animation:scherm-balk var(--duration-scene) linear both}
.beeldslot.speelt .fiche-vink{animation:fiche-vink var(--duration-scene) var(--ease-spring) both}
.beeldslot.speelt .praat-1{animation-delay:1700ms}
.beeldslot.speelt .logo-naar-achter{animation:logo-naar-achter var(--duration-scene) var(--ease-calm) both}
.beeldslot.speelt .dag-draai{animation:dag-draai var(--duration-scene) var(--ease-spring) both;animation-delay:calc(140ms * var(--n,0))}
.beeldslot.speelt .dag-vink2{animation:dag-vink2 var(--duration-scene) var(--ease-spring) both;animation-delay:calc(140ms * var(--n,0))}
.beeldslot.speelt .kruis{animation:kruis var(--duration-scene) var(--ease-spring) both}
.beeldslot.speelt .weg-1{animation:weg-1 var(--duration-scene) var(--ease-calm) both}
.beeldslot.speelt .weg-2{animation:weg-2 var(--duration-scene) var(--ease-calm) 120ms both}
.beeldslot.speelt .opm-0{animation:opm-0 var(--duration-scene) var(--ease-calm) both}
.beeldslot.speelt .opm-1{animation:opm-1 var(--duration-scene) var(--ease-calm) both}
.beeldslot.speelt .opm-2{animation:opm-2 var(--duration-scene) var(--ease-calm) both}
.beeldslot.speelt .gsm-bouw{animation:gsm-bouw var(--duration-scene) var(--ease-spring) both}
.beeldslot.speelt .terug-0{animation:terug-0 var(--duration-scene) var(--ease-calm) both}
.beeldslot.speelt .terug-1{animation:terug-1 var(--duration-scene) var(--ease-calm) both}
.beeldslot.speelt .terug-2{animation:terug-2 var(--duration-scene) var(--ease-calm) both}
.beeldslot.speelt .praktijk-hop{animation:praktijk-hop var(--duration-scene) var(--ease-spring) both;animation-delay:calc(2300ms + 80ms * var(--n,0))}
.beeldslot.speelt .reiziger-l{animation:reiziger-l var(--duration-scene) var(--ease-calm) both}