*{box-sizing:border-box;margin:0;-webkit-tap-highlight-color:transparent}
html,body{height:100%;background:#050308;color:#fff;font-family:"Bricolage Grotesque",system-ui,sans-serif;overflow:hidden;overscroll-behavior:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;touch-action:manipulation}
button:focus-visible{outline:3px solid #fff;outline-offset:2px}
#app{position:relative;height:100dvh;max-width:480px;margin:0 auto;background:#000;overflow:hidden}
.feed{height:100%;overflow-y:scroll;scroll-snap-type:y mandatory;scrollbar-width:none;overscroll-behavior:contain}
.feed::-webkit-scrollbar{display:none}
.slide{position:relative;height:100dvh;scroll-snap-align:start;scroll-snap-stop:always;overflow:hidden;--c:#A78BFA;user-select:none;-webkit-user-select:none;content-visibility:auto;contain-intrinsic-size:100vw 100dvh;background:#0a0710}
.hud{position:absolute;z-index:40;top:0;left:0;right:0;padding:calc(env(safe-area-inset-top) + 12px) 14px 8px;display:flex;align-items:center;justify-content:space-between;pointer-events:none}
.logo{font-size:21px;font-weight:800;letter-spacing:-.03em;text-shadow:0 1px 6px #000}.logo span{color:#FFE600}
.chip{pointer-events:auto;height:32px;padding:0 13px;border-radius:99px;background:#000a;font-weight:700;font-size:14px}
.stage,.sc{position:absolute;inset:0}
.sv{position:absolute;inset:0;width:100%;height:100%;font-family:"Bricolage Grotesque",system-ui,sans-serif}
.sc{animation:scin .32s ease-out;overflow:hidden}
@keyframes scin{from{opacity:.25}}
/* langzame camerabeweging: geeft elke scène leven */
.cam0 .sv{animation:camz 9s ease-out forwards}.cam1 .sv{animation:camx 9s ease-out forwards}.cam2 .sv{animation:camy 9s ease-out forwards}
@keyframes camz{from{transform:scale(1)}to{transform:scale(1.12)}}
@keyframes camx{from{transform:scale(1.14) translateX(-3%)}to{transform:scale(1.14) translateX(3%)}}
@keyframes camy{from{transform:scale(1.14) translateY(3%)}to{transform:scale(1.14) translateY(-2%)}}
.shade{position:absolute;inset:auto 0 0;height:46%;background:linear-gradient(transparent,#000d 70%);pointer-events:none}
.prog{position:absolute;z-index:30;bottom:0;left:0;right:0;height:3px;background:#fff3}.prog i{display:block;height:100%;transform-origin:left;transform:scaleX(0);background:var(--c)}
.tag{position:absolute;z-index:20;top:calc(env(safe-area-inset-top) + 54px);left:14px;right:14px;display:flex;gap:7px;align-items:center;font-size:13px;font-weight:700;color:#fffd;text-shadow:0 1px 5px #000}
.tag b{color:var(--c);filter:brightness(1.2)}
.cap{position:absolute;z-index:20;left:16px;right:72px;bottom:calc(env(safe-area-inset-bottom) + 46px);display:flex;flex-wrap:wrap;align-content:flex-end;gap:1px 7px;font-size:clamp(23px,6.6vw,30px);line-height:1.14;font-weight:800;letter-spacing:-.015em;text-shadow:0 2px 6px #000c}
.cap .w{opacity:.45}.cap .w.seen{opacity:1}.cap .w.now{opacity:1;color:#FFE600}
.who{position:absolute;z-index:21;left:16px;right:72px;bottom:calc(env(safe-area-inset-bottom) + 15px);font-size:14px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#fffc}.who b{font-weight:800;color:#fff;margin-right:4px}
.rail{position:absolute;z-index:35;right:10px;bottom:calc(env(safe-area-inset-bottom) + 14px);display:flex;flex-direction:column;gap:9px;align-items:center}
.rail button{width:52px;display:flex;flex-direction:column;align-items:center;font-size:12px;font-weight:700;gap:1px;text-shadow:0 1px 3px #000}
.rail .ic{width:44px;height:44px;border-radius:50%;background:#000a;display:grid;place-items:center;font-size:21px}
.rail button:active .ic{transform:scale(.88)}.rail .liked .ic{background:#FF2D6F}
.disc{width:38px;height:38px;border-radius:50%;background:conic-gradient(#222,#555,#222,#555,#222);border:6px solid #111;display:grid;place-items:center;font-size:14px;animation:spin 4s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.slide:not(.on) .disc,.slide.ispaused .disc{animation-play-state:paused}
.paused{position:absolute;z-index:25;inset:0;display:none;place-items:center;font-size:84px;background:#0004;pointer-events:none}.slide.ispaused .paused{display:grid}
.heart{position:absolute;z-index:60;font-size:88px;pointer-events:none;animation:heart .75s ease-out forwards}
@keyframes heart{0%{transform:translate(-50%,-50%) scale(.4)}35%{transform:translate(-50%,-50%) scale(1.15)}100%{transform:translate(-50%,-130%);opacity:0}}
.next-up{position:absolute;z-index:40;inset:0;background:#000b;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:7px;text-align:center;padding:30px;animation:scin .25s}.next-up[hidden]{display:none}
.next-up small{font-size:15px;font-weight:700;color:#fffb}.next-up b{font-size:35px;line-height:1.05;font-weight:800;letter-spacing:-.02em;color:var(--c);filter:brightness(1.2)}
.home{background:radial-gradient(90% 55% at 50% 15%,#3b1d78,#0a0710 75%)}
.hm{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;gap:13px;padding:calc(env(safe-area-inset-top) + 58px) 20px calc(env(safe-area-inset-bottom) + 18px);overflow:auto}
.hm h1{font-size:clamp(36px,11vw,50px);line-height:1;letter-spacing:-.03em;font-weight:800}.hm h1 em{font-style:normal;color:#FFE600}
.hm p{font-size:18px;font-weight:600;color:#fffd}
.btn{align-self:flex-start;padding:14px 28px;border-radius:99px;background:#fff;color:#111;font-weight:800;font-size:20px}
.tiles{display:flex;flex-direction:column;gap:7px;margin-top:5px}
.tl{display:grid;grid-template-columns:38px 1fr;column-gap:7px;width:100%;text-align:left;padding:9px 11px;border-radius:14px;background:#ffffff14;border-left:4px solid var(--c);margin-bottom:6px}
.tl span{grid-row:span 2;font-size:26px;align-self:center}.tl b{font-size:18px;font-weight:800}.tl small{font-size:13px;color:#fffb;font-weight:600}
.back{position:absolute;z-index:84;inset:0;background:#0009}
.sheet{position:absolute;z-index:85;left:0;right:0;bottom:0;max-height:86%;overflow:auto;background:#15102a;border-radius:22px 22px 0 0;padding:17px 17px calc(env(safe-area-inset-bottom) + 22px);animation:up .22s ease-out}
@keyframes up{from{transform:translateY(100%)}}
.sheet h3{font-size:24px;font-weight:800;margin-bottom:9px}.fine{font-size:13px;line-height:1.35;color:#fff9;margin-top:10px}
/* onderdelen in de scènes */
.tw{animation:tw 2.6s ease-in-out infinite}@keyframes tw{50%{opacity:.25}}
.glow{animation:gl 2.4s ease-in-out infinite;transform-box:fill-box;transform-origin:center}@keyframes gl{50%{opacity:.55;transform:scale(1.1)}}
.bolt{opacity:0;animation:bolt 1.3s steps(1) infinite}@keyframes bolt{0%,12%,22%{opacity:1}6%,18%,30%,100%{opacity:0}}
.fog{animation:fog 12s ease-in-out infinite alternate}.f2{animation-duration:9s;animation-direction:alternate-reverse}@keyframes fog{to{transform:translateX(38px)}}
.bob{animation:bob 2.8s ease-in-out infinite}@keyframes bob{50%{transform:translateY(-6px)}}
.smk{animation:smk 3.2s ease-out infinite}@keyframes smk{to{transform:translateY(-34px);opacity:.1}}
.wv{animation:wv 2.4s linear infinite}@keyframes wv{to{transform:translateX(-50px)}}
.zap{animation:bolt 1s steps(1) infinite}
.tx{font-family:inherit;font-weight:800}
.slam{animation:slam .36s cubic-bezier(.2,1.5,.4,1) both;transform-box:fill-box;transform-origin:center;font-family:inherit}@keyframes slam{from{transform:scale(1.8);opacity:0}}
.st{stroke-dasharray:320;animation:dash .35s .2s both}@keyframes dash{from{stroke-dashoffset:320}to{stroke-dashoffset:0}}
.fall{animation:fall 3.4s linear infinite}@keyframes fall{to{transform:translateY(700px)}}
.dig{animation:dig 1.1s ease-in-out infinite}@keyframes dig{50%{transform:rotate(16deg) translateY(10px)}}
.ds{animation:ds 4.5s linear infinite}@keyframes ds{to{transform:translateX(-90px) translateY(-14px);opacity:0}}
.wvx{animation:wx 1.4s linear infinite}@keyframes wx{to{transform:translateX(-100px)}}
.dcl{stroke-dasharray:26 12;animation:dcl .7s linear infinite}@keyframes dcl{to{stroke-dashoffset:-38}}
.bl{opacity:0;animation:blon .25s forwards}@keyframes blon{to{opacity:1}}
.rg{animation:rg 2.1s ease-out infinite;transform-box:fill-box;transform-origin:center}@keyframes rg{from{transform:scale(.5);opacity:1}to{transform:scale(6);opacity:0}}
.boomt{animation:bmt 1.3s .3s ease-in both;transform-box:fill-box;transform-origin:bottom}@keyframes bmt{to{transform:rotate(14deg) scaleY(.1);opacity:0}}
.bm{animation:bm 1.2s ease-out both;transform-box:fill-box;transform-origin:center}@keyframes bm{from{transform:scale(.1)}60%{opacity:1}to{transform:scale(5.5);opacity:0}}
.hrt{animation:bob 1.6s ease-in-out infinite}
.walk{animation:walk 9s linear forwards}@keyframes walk{to{transform:translateX(150px)}}
.walk2{animation:walk 9s linear forwards}
.flame{animation:fl .55s ease-in-out infinite alternate;transform-box:fill-box;transform-origin:bottom}@keyframes fl{to{transform:scaleY(1.2) scaleX(.86);opacity:.85}}
.spin{animation:news .42s cubic-bezier(.2,1.3,.4,1) both}@keyframes news{from{transform:scale(.2) rotate(-200deg);opacity:0}}
.beam{animation:beam 3.2s ease-in-out infinite alternate}@keyframes beam{from{transform:rotate(-12deg)}to{transform:rotate(10deg)}}
.tilt{animation:tilt .4s ease-out both;transform-origin:200px 300px}@keyframes tilt{from{transform:translateY(30px) rotate(-5deg);opacity:0}to{transform:rotate(-2deg)}}
.pen{stroke-dasharray:240;animation:pen .35s both}@keyframes pen{from{stroke-dashoffset:240}to{stroke-dashoffset:0}}
.ink{animation:scin .5s .15s both;font-family:inherit}
.pop{animation:pp .3s cubic-bezier(.2,1.5,.4,1) both;transform-box:fill-box;transform-origin:center}@keyframes pp{from{transform:scale(.3);opacity:0}}
.lid{animation:lid .6s ease-out both}@keyframes lid{to{transform:rotate(-34deg)}}
.lg{animation:lg .34s ease-in-out infinite alternate;transform-box:fill-box;transform-origin:top}.l2{animation-direction:alternate-reverse}@keyframes lg{from{transform:rotate(-26deg)}to{transform:rotate(26deg)}}
.em{animation:emb .34s ease-in-out infinite alternate}@keyframes emb{to{transform:translateY(-6px)}}
.runx{animation:runx 9s linear forwards}@keyframes runx{to{transform:translateX(-70px)}}
.sct{animation:sct 3s ease-in forwards;transform-box:fill-box;transform-origin:center}@keyframes sct{to{transform:scale(1.5);opacity:.5}}
.brk{animation:brk .5s .7s both;transform-box:fill-box;transform-origin:bottom}@keyframes brk{to{transform:rotate(68deg)}}
.blt{animation:blt .5s linear infinite}@keyframes blt{to{transform:translate(-300px,-34px) scaleX(1.6);opacity:0}}
.zap2{animation:bolt .24s steps(1) infinite}
.shk{animation:shk .16s linear infinite}@keyframes shk{25%{transform:translate(-3px,3px) rotate(-1deg)}75%{transform:translate(3px,-4px) rotate(1deg)}}
.whl{transform-box:fill-box;transform-origin:center}
.dn{animation:dn .6s ease-in-out infinite alternate;transform-origin:0 -40px}@keyframes dn{from{transform:rotate(-13deg) translateY(0)}to{transform:rotate(13deg) translateY(-11px)}}
.ar{animation:ar .4s ease-in-out infinite alternate;transform-box:fill-box;transform-origin:bottom}.a2{animation-direction:alternate-reverse}@keyframes ar{to{transform:rotate(34deg)}}
.ply{animation:emb .36s ease-in-out infinite alternate}
.nt{animation:nt 2.4s ease-out infinite}@keyframes nt{from{transform:translateY(70px);opacity:0}30%{opacity:1}to{transform:translateY(-70px);opacity:0}}
@media (prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01s!important;animation-iteration-count:1!important;transition-duration:.01s!important}}

/* scène boven, ondertitel eronder: niets valt meer weg */
.stage{bottom:calc(env(safe-area-inset-bottom) + 158px);overflow:hidden}
.shade{height:calc(env(safe-area-inset-bottom) + 205px);background:linear-gradient(transparent,#000 27%)}
@keyframes camz{from{transform:scale(1)}to{transform:scale(1.05)}}
@keyframes camx{from{transform:scale(1.05) translateX(-1.5%)}to{transform:scale(1.05) translateX(1.5%)}}
@keyframes camy{from{transform:scale(1.05) translateY(1%)}to{transform:scale(1.05) translateY(-1%)}}
.cap{font-size:clamp(21px,5.9vw,27px);min-height:0}
.rail .ic{width:40px;height:40px;font-size:19px}.rail{gap:6px}.rail button{font-size:11px}.disc{width:34px;height:34px;border-width:5px}

/* getekende scènes */
.art{position:absolute;inset:0;overflow:hidden;background:#05070d}
.art img{position:absolute;inset:-3%;width:106%;height:106%;object-fit:cover;object-position:50% 20%;will-change:transform}
.m-in img{animation:ain 8s ease-out forwards}@keyframes ain{from{transform:scale(1)}to{transform:scale(1.14) translateY(2%)}}
.m-out img{animation:aout 8s ease-out forwards}@keyframes aout{from{transform:scale(1.16)}to{transform:scale(1)}}
.m-down img{animation:adn 8s ease-in-out forwards}@keyframes adn{from{transform:scale(1.2) translateY(7%)}to{transform:scale(1.2) translateY(-5%)}}
.m-left img{animation:alf 8s ease-in-out forwards}@keyframes alf{from{transform:scale(1.18) translateX(6%)}to{transform:scale(1.18) translateX(-6%)}}
.m-right img{animation:art 7s ease-in-out forwards}@keyframes art{from{transform:scale(1.2) translateX(-7%)}to{transform:scale(1.2) translateX(7%)}}
.m-hit img{animation:ahit 5s ease-out forwards}@keyframes ahit{0%{transform:scale(1.28)}7%{transform:scale(1.05) translateX(-1%)}11%{transform:scale(1.05) translateX(1%)}15%{transform:scale(1.05)}100%{transform:scale(1.15)}}
.afx{position:absolute;inset:0;pointer-events:none;mix-blend-mode:screen}
.fx-bolt{background:radial-gradient(70% 45% at 55% 22%,#9fe8ffcc,transparent 70%);animation:fxb 2.1s steps(1) infinite}
@keyframes fxb{0%,9%,16%,62%,67%{opacity:1}5%,12%,20%,64%,70%,100%{opacity:0}}
.fx-storm{background:radial-gradient(60% 34% at 55% 16%,#c7d7ffdd,transparent 72%);animation:fxb 3.4s steps(1) infinite}
.fx-spark{display:none}
@keyframes fxs{from{background-position:0 0,40px 30px}to{background-position:-30px -226px,70px -148px}}
.alab{position:absolute;left:50%;top:13%;transform:translateX(-50%) rotate(-2deg);padding:5px 15px;background:#FFE600;color:#111;font-size:clamp(32px,10vw,46px);font-weight:800;line-height:1.1;white-space:nowrap;animation:lab .34s cubic-bezier(.2,1.5,.4,1) .35s both}
.alab.red{background:#EF4444;color:#fff}
@keyframes lab{from{transform:translateX(-50%) scale(1.8) rotate(-7deg);opacity:0}}
.alab{top:auto;bottom:5%}

/* poppen: alles beweegt pas op het actieve scherm */
.slide:not(.on) .rp *{animation-play-state:paused!important}
.pup{animation:pb 2.8s ease-in-out infinite;animation-delay:var(--dl)}@keyframes pb{50%{transform:translateY(-1.5px)}}
.head{animation:hd 3.8s ease-in-out infinite;animation-delay:var(--dl)}@keyframes hd{50%{transform:rotate(2deg)}}
.eyes{animation:blk 4.1s infinite;animation-delay:var(--dl);transform-origin:3px -183px}@keyframes blk{0%,95%,100%{transform:scaleY(1)}97%{transform:scaleY(.08)}}
.pupil{animation:lk 5.3s ease-in-out infinite;animation-delay:var(--dl)}@keyframes lk{0%,40%,100%{transform:none}50%,85%{transform:translateX(1.6px)}}
.mo-t{animation:tk .22s ease-in-out infinite alternate;transform-box:fill-box;transform-origin:center}@keyframes tk{from{transform:scaleY(.25)}to{transform:scaleY(1.15)}}
.a-walk{animation:wb .36s ease-in-out infinite alternate;animation-delay:var(--dl)}@keyframes wb{to{transform:translateY(-4px)}}
.a-walk .leg.l{animation:lgw .72s ease-in-out infinite alternate;animation-delay:var(--dl)}.a-walk .leg.r{animation:lgw .72s ease-in-out infinite alternate-reverse;animation-delay:var(--dl)}@keyframes lgw{from{transform:rotate(-26deg)}to{transform:rotate(26deg)}}
.a-walk .leg.l .shin{animation:shw .72s ease-in-out infinite alternate;animation-delay:var(--dl)}.a-walk .leg.r .shin{animation:shw .72s ease-in-out infinite alternate-reverse;animation-delay:var(--dl)}@keyframes shw{from{transform:rotate(30deg)}to{transform:rotate(2deg)}}
.a-walk .arm.l{animation:amw .72s ease-in-out infinite alternate-reverse;animation-delay:var(--dl)}.a-walk .arm.r{animation:amw .72s ease-in-out infinite alternate;animation-delay:var(--dl)}@keyframes amw{from{transform:rotate(-20deg)}to{transform:rotate(20deg)}}
.crs{animation:crs 8s linear forwards}@keyframes crs{to{transform:translateX(var(--dx))}}
.a-talk .arm.r{animation:gs 1.1s ease-in-out infinite alternate;animation-delay:var(--dl)}@keyframes gs{from{transform:rotate(-34deg)}to{transform:rotate(-74deg)}}.a-talk .arm.r .fore{transform:rotate(-40deg)}.a-talk .head{animation:nd .9s ease-in-out infinite alternate}@keyframes nd{to{transform:rotate(5deg)}}
.a-shout .arm.r{animation:sht .42s ease-in-out infinite alternate}@keyframes sht{from{transform:rotate(-142deg)}to{transform:rotate(-168deg)}}.a-shout .arm.l{transform:rotate(14deg)}.a-shout .head{animation:shd .42s ease-in-out infinite alternate}@keyframes shd{from{transform:rotate(-8deg)}to{transform:rotate(-2deg)}}
.a-write .arm.r{transform:rotate(-46deg)}.a-write .arm.r .fore{animation:wrt .46s ease-in-out infinite alternate}@keyframes wrt{from{transform:rotate(-46deg)}to{transform:rotate(-62deg)}}.a-write .head{transform:rotate(9deg);animation:none}
.a-read .arm.r{transform:rotate(-40deg)}.a-read .arm.r .fore{transform:rotate(-74deg)}.a-read .arm.l{transform:rotate(30deg)}.a-read .arm.l .fore{transform:rotate(66deg)}.a-read .head{animation:rdh 2.5s ease-in-out infinite alternate}@keyframes rdh{from{transform:rotate(5deg)}to{transform:rotate(11deg)}}
.a-scratch .arm.r{transform:rotate(-132deg)}.a-scratch .arm.r .fore{animation:scr .28s ease-in-out infinite alternate}@keyframes scr{from{transform:rotate(-100deg)}to{transform:rotate(-124deg)}}
.a-point .arm.r{animation:pnt 1.6s ease-in-out infinite alternate}@keyframes pnt{from{transform:rotate(-96deg)}to{transform:rotate(-118deg)}}
.a-shrug .arm.l{animation:srl 1.3s ease-in-out infinite alternate}.a-shrug .arm.r{animation:srr 1.3s ease-in-out infinite alternate}@keyframes srl{from{transform:rotate(22deg)}to{transform:rotate(44deg)}}@keyframes srr{from{transform:rotate(-22deg)}to{transform:rotate(-44deg)}}.a-shrug .arm .fore{transform:rotate(-52deg)}.a-shrug .arm.l .fore{transform:rotate(52deg)}
.a-look .head{animation:lk2 2.4s ease-in-out infinite alternate;animation-delay:var(--dl)}@keyframes lk2{from{transform:rotate(-6deg)}to{transform:rotate(6deg)}}
.a-cigar .arm.r{transform:rotate(-60deg)}.a-cigar .arm.r .fore{animation:cg 2.2s ease-in-out infinite alternate}@keyframes cg{from{transform:rotate(-60deg)}to{transform:rotate(-104deg)}}
.a-cape{animation:cp 1.8s ease-in-out infinite alternate}@keyframes cp{to{transform:translateX(12px)}}
.skirt{animation:skr 2s ease-in-out infinite alternate;transform-origin:0 -112px}@keyframes skr{to{transform:skewX(1.5deg)}}
.gl{animation:gl2 2.2s ease-in-out infinite}@keyframes gl2{50%{opacity:.55}}.gl2{animation:gl2 1.4s infinite}
.cone{animation:cnf 3.1s steps(9) infinite}@keyframes cnf{50%{opacity:.72}}
.fk{animation:gl2 3.7s steps(5) infinite}
.fg1{animation:fgm 14s ease-in-out infinite alternate}.fg2{animation:fgm 10s ease-in-out infinite alternate-reverse}@keyframes fgm{to{transform:translateX(44px)}}
.rn{animation:rnm .75s linear infinite}@keyframes rnm{to{transform:translate(-16px,280px)}}
.gear{animation:grs 3.6s linear infinite}.gear.rv{animation-direction:reverse;animation-duration:2.6s}@keyframes grs{to{transform:rotate(360deg)}}
.flysheet{animation:fly2 2.8s linear infinite}@keyframes fly2{from{transform:translateY(0)}to{transform:translate(-22px,-290px) rotate(-16deg);opacity:0}}
.dropl{animation:drp .55s .35s cubic-bezier(.3,1.4,.5,1) both}@keyframes drp{from{transform:translateY(-140px);opacity:0}}
.ltr{animation:ltr .45s ease-out both;transform-origin:200px 270px}@keyframes ltr{from{transform:translateY(46px) rotate(-5deg);opacity:0}to{transform:rotate(-2deg)}}
.wr{stroke-dasharray:240;animation:wrl .4s both}@keyframes wrl{from{stroke-dashoffset:240}to{stroke-dashoffset:0}}.inkt{animation:gl2 .01s,ink .6s .1s both;font-family:inherit}@keyframes ink{from{opacity:0}}
.pp2{animation:pp2 .34s cubic-bezier(.2,1.5,.4,1) both;transform-box:fill-box;transform-origin:center}@keyframes pp2{from{transform:scale(.3);opacity:0}}
.lurk{animation:lrk 4.4s ease-in-out infinite alternate;opacity:.9}@keyframes lrk{to{transform:translateX(-18px);opacity:.55}}
.fadeo{animation:fdo 4s ease-in forwards}@keyframes fdo{to{opacity:0;transform:translateX(26px)}}
.stepup{animation:stp .5s cubic-bezier(.2,1.3,.4,1) both}@keyframes stp{from{transform:translateY(60px);opacity:0}}
.stampv{animation:stv .35s 1.1s cubic-bezier(.2,1.6,.4,1) both;transform-origin:200px 200px}@keyframes stv{from{transform:scale(2.3);opacity:0}}
.cflame{animation:cfl .4s ease-in-out infinite alternate;transform-box:fill-box;transform-origin:bottom}@keyframes cfl{to{transform:scaleY(1.28)}}

.nb{width:min(76%,290px);height:9px;margin-top:13px;border-radius:9px;background:#fff3;overflow:hidden}
.nb i{display:block;height:100%;background:var(--c);filter:brightness(1.2);transform-origin:left;animation:nbf 2.6s linear both}
@keyframes nbf{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.next-up em{font-style:normal;font-size:13px;font-weight:600;color:#fff9;margin-top:5px}

.anames{position:absolute;left:0;right:0;top:19%;text-align:center;font-size:clamp(23px,6.6vw,30px);font-weight:800;line-height:1.5}
.anames div{opacity:.13;color:#f5ead2;text-shadow:0 2px 8px #000}.anames .on{opacity:1}.anames .last{color:#FFE600;animation:lab2 .5s ease-out both}
@keyframes lab2{from{opacity:0;transform:translateY(8px)}}

.hr{display:flex;gap:6px;pointer-events:auto}
.chip.lsw{display:inline-flex;padding:3px;gap:1px;align-items:center}
.lsw b{padding:3px 8px;border-radius:99px;color:#fffb;font-weight:800;font-size:13px}
.lsw b.on{background:#FFE600;color:#111}
.tl small{line-height:1.2}
.alab{white-space:normal;text-align:center;max-width:74%;width:max-content;font-size:clamp(22px,6.8vw,34px);line-height:1.08;left:13%;transform:rotate(-2deg);margin:0}
@keyframes lab{from{transform:scale(1.5) rotate(-6deg);opacity:0}}
.hm{justify-content:flex-start;padding-top:calc(env(safe-area-inset-top) + 70px)}
.hm h1{font-size:clamp(32px,9.5vw,44px)}
.hm .tl{margin-bottom:0}

.acc{position:fixed;inset:0;z-index:50;background:#000b;display:flex;align-items:flex-end;justify-content:center}.acc[hidden]{display:none}
.acc-in{position:relative;width:100%;max-width:480px;background:#17121f;color:#fff;border-radius:20px 20px 0 0;padding:24px 20px calc(24px + env(safe-area-inset-bottom));font-size:15px;line-height:1.45}
.acc h3{margin:0 34px 8px 0;font-size:23px;line-height:1.1}.acc p{margin:0 0 12px}.acc a{color:#FFE600}.acc .btn{display:block;width:100%;text-align:center;text-decoration:none;margin:0}
.acc input[type=email],.acc input[inputmode],.acc #fP input:not([type]),.acc #fP textarea{width:100%;font:600 17px system-ui;padding:13px;border-radius:10px;border:1px solid #fff3;background:#0a0710;color:#fff;margin-bottom:10px}
.acc-c{display:flex;gap:8px;align-items:flex-start;margin:2px 0 12px;font-size:14px}.acc-e{color:#ff9d9d;margin:10px 0 0!important;min-height:1em;font-size:14px}.acc-m{color:#cfc9d9;word-break:break-all}
.acc-x{position:absolute;top:12px;right:12px;width:36px;height:36px;border:0;border-radius:50%;background:#ffffff1f;color:#fff;font-size:15px;cursor:pointer}
.acc-l{background:none;border:0;color:#cfc9d9!important;text-decoration:underline;font:14px system-ui;padding:6px 0;cursor:pointer}.acc-f{display:flex;flex-wrap:wrap;gap:14px;margin-top:12px}
.acc.gate{background:#0A0710;align-items:center}.acc.gate .acc-x{display:none}.acc.gate .acc-in{border-radius:20px}
.btn.ghost{background:transparent;color:#fff;box-shadow:inset 0 0 0 2px #fff6;margin-top:10px}
@media(pointer:fine){.feed{cursor:grab;user-select:none}.feed:active{cursor:grabbing}}
.slide[hidden]{display:none!important}

/* krantenkop */
.kop{position:absolute;left:0;right:0;top:92px;z-index:6;pointer-events:none;opacity:0;transform:translateY(-14px);transition:opacity .35s,transform .45s cubic-bezier(.2,.9,.3,1.2)}
.kop.in{opacity:1;transform:none}
.kop .np{margin:0 22px;background:#f3ead6;color:#151515;padding:12px 15px 14px;transform:rotate(-2.2deg);box-shadow:0 18px 40px #000a;font-family:'Playfair Display',Georgia,'Times New Roman',serif}
.kop .mast{display:flex;justify-content:space-between;gap:10px;font:700 11px/1 system-ui,sans-serif;letter-spacing:.14em;text-transform:uppercase;border-bottom:2px solid #151515;padding-bottom:6px;margin-bottom:8px}
.kop .np h2{margin:0;font-size:32px;line-height:1.02;font-weight:900}
.kop .kt{display:inline-block;max-width:calc(100% - 36px);line-height:1.35;background:#d7261e;color:#fff;font-weight:800;font-size:12px;letter-spacing:.12em;padding:6px 12px;margin-left:18px}
.kop .bar{background:#FFE600;color:#111;margin-top:6px;padding:11px 18px}.kop .bar h2{margin:0;font-size:30px;line-height:1.04;font-weight:800}
.kop.b{transform:translateX(-30px)}.kop.b.in{transform:none}
.kop .deel{display:inline-block;margin-left:18px;background:#000b;color:#FFE600;font-weight:800;font-size:13px;letter-spacing:.14em;text-transform:uppercase;padding:6px 12px;border-radius:4px}

/* zoeken in de verhalenlijst */
.sheet .q{position:sticky;top:0;z-index:2;width:100%;margin:0 0 12px;padding:13px 16px;border:0;border-radius:14px;background:#2a2540;color:#fff;font:700 16px/1.2 inherit;font-family:inherit;outline:2px solid transparent;box-shadow:0 6px 16px #0008}
.sheet .q:focus{outline-color:#FFE600}.sheet .q::placeholder{color:#fff9}
.sheet .tl[hidden],.sheet .none[hidden]{display:none}.sheet .none{color:#fffb;font-weight:700;margin:8px 4px}

/* voortgangsbalk: groter tikvlak om te spoelen */
.prog{cursor:pointer}.prog::after{content:'';position:absolute;left:0;right:0;bottom:0;height:26px}

/* verhalenlijst bovenaan zolang het toetsenbord open is */
.sheet.top{top:0;bottom:auto;border-radius:0 0 22px 22px;padding-top:calc(env(safe-area-inset-top) + 14px);padding-bottom:16px;animation:none}

/* sluitknop van de verhalenlijst */
.sheet .shd{display:flex;align-items:center;justify-content:space-between;gap:10px}.sheet .shd h3{margin:0}
.sheet .x{flex:none;width:40px;height:40px;border:0;border-radius:50%;background:#ffffff1f;color:#fff;font-size:18px;font-weight:800;cursor:pointer}.sheet .x:active{background:#ffffff40}
.sheet .q{margin-top:12px}
.pw-n{display:flex;flex-direction:column;gap:2px;background:#ffffff12;border-left:3px solid #FFE600;border-radius:10px;padding:10px 12px;margin:4px 0 14px!important}.pw-n small{color:#FFE600;font-size:12px;text-transform:uppercase;letter-spacing:.08em}.pw-n b{font-size:18px}.pw-n span{color:#cfc9d9;font-size:14px}
.acc .btn small{font-weight:600;opacity:.75;font-size:13px}.acc #fP textarea{resize:vertical;font-size:15px}
.acc .inst{margin:0 0 14px;padding-left:22px;line-height:1.5}.acc .inst li{margin:4px 0}.acc .inst .ic{display:inline-block;background:#ffffff22;border-radius:5px;padding:0 5px}