/* Diepte en beweging. Eén taal voor alle beweging in de app: een veer die
   iets doorschiet voor dingen die je aanraakt, een snelle uitloop voor wat
   binnenkomt. Alles valt weg bij prefers-reduced-motion (onderaan). */

:root{
  --veer:cubic-bezier(.2,1.35,.35,1);
  --uit:cubic-bezier(.16,1,.3,1);
  --kort:180ms;--gewoon:460ms;--lang:900ms;
}

/* pagina's lopen in elkaar over in plaats van te flitsen */
@view-transition{navigation:auto}
::view-transition-old(root),::view-transition-new(root){animation-duration:260ms;animation-timing-function:var(--uit)}
/* op reis is de pas een plat vlak: geen achterkant, geen randen, geen kanteling */
html.reist .podium .achter,html.reist .podium .rand,html.reist .podium .schaduw{display:none}
html.reist .podium .kaart3d,html.reist .podium .adem{transform:none!important;transition:none;animation:none}
html.reist .podium .pas .glans{opacity:.4}
/* de pas reist rustig: een zachte veer die net doorschiet en landt */
::view-transition-group(pas){animation-duration:1100ms;animation-timing-function:cubic-bezier(.22,1.18,.36,1)}
::view-transition-old(pas),::view-transition-new(pas){animation-duration:1100ms;height:100%;object-fit:contain}

/* korrel: drukwerk in plaats van een glad scherm */
body::after{content:"";position:fixed;inset:0;z-index:70;pointer-events:none;opacity:.05;mix-blend-mode:multiply;
  background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='k'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 .9 0'/></filter><rect width='100%' height='100%' filter='url(%23k)'/></svg>")}
html.donker body::after{mix-blend-mode:screen;opacity:.06}

/* ---------- binnenkomen, in cascade ---------- */
/* --i: de plek op het scherm, --j: de plek binnen een blok. Geen JS nodig.
   Altijd 'backwards', nooit 'both': een achterblijvende transform maakt het
   element het kader voor position:fixed erbinnen (het wisselblad viel zo
   buiten beeld). */
.scherm>*:nth-child(1){--i:0}.scherm>*:nth-child(2){--i:1}.scherm>*:nth-child(3){--i:2}.scherm>*:nth-child(4){--i:3}
.scherm>*:nth-child(5){--i:4}.scherm>*:nth-child(6){--i:5}.scherm>*:nth-child(n+7){--i:6}
.blok>*:nth-child(1),.voet>*:nth-child(1){--j:0}.blok>*:nth-child(2),.voet>*:nth-child(2){--j:1}
.blok>*:nth-child(3),.voet>*:nth-child(3){--j:2}.blok>*:nth-child(4),.voet>*:nth-child(4){--j:3}
.blok>*:nth-child(n+5),.voet>*:nth-child(n+5){--j:4}
/* wat de pas draagt komt niet binnen: die reist via de view transition */
.voet>*{animation:komt var(--gewoon) var(--uit) backwards;animation-delay:calc((var(--i,0) + var(--j,0)*.55)*55ms + 40ms)}
.scherm>:not(#toast):not(.offline):not(.podium-plek):not(:has(.podium)),
.blok>:not(:has(.podium)){animation:komt var(--gewoon) var(--uit) backwards;animation-delay:calc((var(--i,0) + var(--j,0)*.55)*55ms + 40ms)}
@keyframes komt{from{opacity:0;transform:translateY(16px)}}
/* In een blad (native sheet) schuift het blad zelf al binnen; een cascade
   erbinnen leest als UI die vanuit de hoek groeit. Daar staat alles meteen. */
.scherm>.bedrijven-pagina,.bedrijven-pagina>*{animation:none!important}

/* koppen: woord voor woord van onder een rand vandaan (beweging.js splitst) */
h1 .w{display:inline-block;overflow:hidden;vertical-align:top;padding:0 .02em .14em;margin:0 -.02em -.14em}
h1 .w>span{display:inline-block;animation:woord 820ms var(--uit) backwards;animation-delay:calc(var(--w,0)*42ms + 120ms + var(--i,0)*55ms)}
@keyframes woord{from{transform:translateY(108%) rotate(4deg)}}

/* ---------- de pas als voorwerp ---------- */
@property --flip{syntax:'<angle>';inherits:false;initial-value:0deg}
.podium-plek{position:relative;display:flex;justify-content:center}
.podium-plek::before{content:"";position:absolute;inset:-20% 4% 10%;border-radius:50%;pointer-events:none;
  background:radial-gradient(closest-side,rgba(36,51,255,.22),rgba(36,51,255,0));filter:blur(18px);animation:gloed 5s ease-in-out infinite alternate}
@keyframes gloed{to{transform:scale(1.08) translateY(6px);opacity:.75}}
.podium{position:relative;perspective:950px;touch-action:pan-y;-webkit-tap-highlight-color:transparent;cursor:grab;user-select:none;-webkit-user-select:none}
.podium.staand{width:220px;height:290px}
.podium.liggend{width:300px;height:200px}
/* --rx en --ry zijn kale getallen (graden); alles wat meebeweegt rekent CSS
   daaruit af, zodat beweging.js per frame maar twee waarden schrijft. */
.podium .kaart3d{position:absolute;inset:0;transform-style:preserve-3d;transform:rotateX(calc(var(--rx,0) * 1deg)) rotateY(calc(var(--ry,0) * 1deg + var(--flip)));transition:--flip 1s var(--veer)}
/* in rust ademt de pas zelf: een transform-animatie die de compositor doet,
   zonder JavaScript per frame */
.podium .adem{position:absolute;inset:0;transform-style:preserve-3d;animation:adem 11s ease-in-out infinite}
@keyframes adem{
  0%,100%{transform:rotateX(0) rotateY(0)}
  22%{transform:rotateX(3.6deg) rotateY(-6deg)}
  48%{transform:rotateX(-1.2deg) rotateY(7.5deg)}
  74%{transform:rotateX(-3.8deg) rotateY(-2.5deg)}}
@media (prefers-reduced-motion:reduce){.podium .adem{animation:none}}
.podium .kaart3d.om{--flip:180deg}
/* De achterkant bestaat alleen als de pas om is. WebKit tekent een 3D-pas
   die net in beeld springt (wisselen via de lijst, terug naar het slot) soms
   een paar frames plat; dan lag de achterkant, die later in de DOM staat,
   bovenop. Bij omdraaien komt hij meteen, bij terugdraaien gaat hij pas weg
   als de voorkant er weer ligt. */
.podium .achter{visibility:hidden;transition:visibility 0s .55s}
.podium .kaart3d.om .achter{visibility:visible;transition-delay:0s}
.podium .pas{position:absolute;inset:0;width:auto!important;height:auto!important;margin:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;transform:translateZ(1px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.28),inset 0 -1px 0 rgba(0,0,0,.18)}
/* dikte: lagen achter de voorkant, zichtbaar als rand zodra de pas kantelt */
.podium .rand{position:absolute;inset:.5px;border-radius:20px;background:#1B27D2;transform:translateZ(calc(var(--z)*-1px))}
.podium .rand:last-of-type{background:#101A9A}
/* Mijn pas: de pas is het middelpunt, verticaal in de vrije ruimte */
.pas-midden{margin:auto;padding:22px 0 10px;position:relative}
.pas-midden::before{content:"";position:absolute;inset:0 6% 30%;border-radius:50%;pointer-events:none;background:radial-gradient(closest-side,rgba(36,51,255,.2),rgba(36,51,255,0));filter:blur(20px);animation:gloed 5s ease-in-out infinite alternate}
/* 3D-lagen randen anders kartelig af in WebKit */
.podium .rand,.podium .pas,.podium .achter{outline:1px solid transparent}
/* licht en folie: volgen de kanteling */
.pas .glans{position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:3;mix-blend-mode:overlay;
  background:radial-gradient(80% 60% at calc(50% + var(--ry,0) * 2.2%) calc(20% - var(--rx,0) * 3%),rgba(255,255,255,.7),rgba(255,255,255,0) 60%),
    linear-gradient(112deg,rgba(255,255,255,0) 28%,rgba(61,255,143,.55) 41%,rgba(190,196,255,.7) 49%,rgba(255,207,92,.4) 56%,rgba(255,255,255,0) 70%);
  background-size:100% 100%,280% 280%;background-position:0 0,calc(50% + var(--ry,0) * 2.6%) calc(50% - var(--rx,0) * 2.6%)}
/* diepte binnen de voorkant: lagen verschuiven tegen de kanteling in */
.pas .chip,.pas .naam,.pas .rij{transform:translate(calc(var(--ry,0) * .22px),calc(var(--rx,0) * -.22px))}
.pas .streep{transform:translate(calc(var(--ry,0) * -.132px),0)}
.podium .achter{position:absolute;inset:0;border-radius:20px;overflow:hidden;background:#0B0C10;color:#EEF0F4;padding:16px 18px;display:flex;flex-direction:column;
  backface-visibility:hidden;-webkit-backface-visibility:hidden;transform:rotateY(180deg) translateZ(7px);box-shadow:inset 0 1px 0 rgba(255,255,255,.12)}
.achter .guilloche{position:absolute;inset:0;width:100%;height:100%;opacity:.7}
.achter .guilloche path{fill:none;stroke:#2433FF;stroke-width:.32}
.achter .guilloche path:nth-child(2n){stroke:#3DFF8F;opacity:.45}
.achter>*:not(.guilloche){position:relative}
.achter .merk{font-weight:900;font-size:13px;letter-spacing:-.04em}
.achter .regel{margin-top:auto;font-size:8px;letter-spacing:.16em;color:#B4B8C2;line-height:1.7;text-shadow:0 0 6px #0B0C10,0 0 3px #0B0C10,0 0 1px #0B0C10}
.podium .schaduw{position:absolute;left:10%;right:10%;bottom:-22px;height:30px;border-radius:50%;pointer-events:none;
  background:radial-gradient(closest-side,rgba(11,12,16,.42),rgba(11,12,16,0));filter:blur(5px);transform:translateX(calc(var(--ry,0) * -1.1px)) scaleX(calc(1 - max(var(--rx,0), var(--rx,0) * -1) / 70))}
.podium.opkomst{animation:opkomst 1300ms var(--veer) backwards}
@keyframes opkomst{from{opacity:0;transform:perspective(900px) translateY(-46px) rotateX(58deg) scale(.86)}}

/* vergrendeld: je eigen pas, klein; bij de juiste pincode licht hij op en
   groeit hij (view transition) door naar de grote pas op Mijn pas */
.slot-pas{zoom:.62;display:flex;justify-content:center;margin:0 auto 6px}
/* de pas op Mijn pas en die op het slot zijn hetzelfde voorwerp */
.pasplek.gekozen .podium,.slot-pas .podium{view-transition-name:pas}
.slot-pas .pas .naam{display:none}
.slot-pas .pas,.slot-pas .achter{text-align:left}
.podium.open .kaart3d{animation:open 420ms var(--veer)}
.podium.open .pas .glans{animation:flits 420ms var(--uit)}
@keyframes open{50%{scale:1.07}}
@keyframes flits{40%{opacity:1;filter:brightness(1.8)}}

/* de stempel slaat neer */
.stempel-actief{position:absolute;right:10px;top:108px;z-index:4;padding:5px 9px;border:3px solid #3DFF8F;border-radius:8px;color:#3DFF8F;font-size:13px;font-weight:800;letter-spacing:.06em;
  background:rgba(36,51,255,.88);transform:rotate(-14deg);animation:stempel 520ms var(--veer) 700ms backwards}
@keyframes stempel{from{opacity:0;transform:rotate(-26deg) scale(2.8)}60%{opacity:1}}
.podium.klap{animation:klap 360ms var(--uit) 900ms}
@keyframes klap{30%{transform:translateY(5px) scale(.985)}}

/* ---------- aanraken ---------- */
.knop,.knop2,.getallen button,.pinpad button,.terug{transition:transform var(--kort) var(--uit),background-color var(--kort)}
.knop:active,.knop2:active,.terug:active{transform:scale(.97);translate:0 0}
.getallen button:active,.pinpad button:active{transform:scale(.92)}
.knop{position:relative;overflow:hidden}
.knop::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,transparent 30%,rgba(255,255,255,.22) 50%,transparent 70%);transform:translateX(-120%);pointer-events:none}
.voet .knop:first-child::after{animation:veeg 1.4s var(--uit) 900ms}
@keyframes veeg{to{transform:translateX(120%)}}

/* pincode: elk punt vult met een tik */
.punten span{transition:background-color var(--kort),transform 320ms var(--veer)}
.punten span.vol{transform:scale(1.25)}
.donker .punten span.vol{background:#EEF0F4}

/* vinkje dat zichzelf tekent */
.ok-rond{animation:plop 620ms var(--veer) backwards}
.ok-rond svg{width:46%;height:46%}
.ok-rond svg path{stroke-dasharray:24;stroke-dashoffset:24;animation:teken 520ms var(--uit) 260ms forwards}
@keyframes plop{from{transform:scale(.2);opacity:0}}
@keyframes teken{to{stroke-dashoffset:0}}

/* inlogverzoek: de blauwe lijn telt de 2 minuten af */
.verzoekkaart{position:relative;border-bottom:0;padding-bottom:27px}
.verzoekkaart::after{content:"";position:absolute;left:0;right:0;bottom:0;height:5px;background:#2433FF;transform-origin:left;transform:scaleX(var(--rest,1))}
.verzoekkaart.krap::after{background:#B42318}
.verzoekkaart::before{content:"";position:absolute;left:0;right:0;bottom:0;height:5px;background:#D3D6DE}

/* getallen: het gekozen getal licht op */
.getallen button{transition:transform 260ms var(--veer),background-color var(--kort),color var(--kort)}

@media (prefers-reduced-motion: reduce){
  .podium .kaart3d{transform:none!important}
  .podium-plek::before,.pas .glans{animation:none}
}