/* InCTRL ENGINE · aanmeld- en openingsscherm. Maatlat: docs/ux/ontwerp/aanmeldscherm_ontwerp.md en aanmeldscherm_v3_mockup.html
   (Iris en Sofie, ux/maatlat-v790, besluiten Marc 30 okt). Overgenomen uit de mockup; mockupbalk en nep-Home zijn weg. */
@font-face{font-family:'Outfit';font-weight:600;font-style:normal;font-display:swap;src:url(fonts/outfit-600.woff2) format('woff2')}
@font-face{font-family:'Outfit';font-weight:700;font-style:normal;font-display:swap;src:url(fonts/outfit-700.woff2) format('woff2')}
@font-face{font-family:'DM Sans';font-weight:400;font-style:normal;font-display:swap;src:url(fonts/dmsans-400.woff2) format('woff2')}
@font-face{font-family:'DM Sans';font-weight:500;font-style:normal;font-display:swap;src:url(fonts/dmsans-500.woff2) format('woff2')}
@font-face{font-family:'DM Sans';font-weight:600;font-style:normal;font-display:swap;src:url(fonts/dmsans-600.woff2) format('woff2')}
@font-face{font-family:'DM Sans';font-weight:700;font-style:normal;font-display:swap;src:url(fonts/dmsans-700.woff2) format('woff2')}
:root{--ink:#0B0F1A;--body:#4A4F5C;--orange:#ED7D31;--orange-d:#D96A1E;--orange-t:#9A4A00;--line:#E3DDD4;--txt:#fff;--txt2:rgba(255,255,255,.7)}
body.light{--txt:#0B0F1A;--txt2:#4A4F5C}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{font-family:'DM Sans',system-ui,sans-serif;color:var(--ink);background:#0B0F1A;overflow-x:hidden}
/* ---------- achtergronden ---------- */
.bgl{position:fixed;inset:0;z-index:0;opacity:0;transition:opacity 1.8s ease;pointer-events:none;overflow:hidden}
.bgl.on{opacity:1}
.bgl svg{position:absolute;inset:0;width:100%;height:100%}
#bg1{background:radial-gradient(ellipse at 30% 50%,#2a1a10 0%,#0B0F1A 70%)}
#bg3{background:#0d1220}
#bg4{background:radial-gradient(ellipse at 30% 50%,#FBF3EA 0%,#EDE6DD 60%,#E3DBD0 100%)}
#bg5{background:linear-gradient(180deg,#140c12 0%,#3a1a14 38%,#b9521c 72%,#f2a35e 100%)}
.vign{position:fixed;inset:0;z-index:1;pointer-events:none;background:radial-gradient(ellipse at center,rgba(11,15,26,0) 40%,rgba(11,15,26,.55) 100%);transition:opacity .9s}
body.light .vign{opacity:0}
.spin{transform-box:fill-box;transform-origin:center;animation:spin var(--d,60s) linear infinite}
.spinr{transform-box:fill-box;transform-origin:center;animation:spin var(--d,60s) linear infinite reverse}
@keyframes spin{to{transform:rotate(360deg)}}
.draw{stroke-dasharray:var(--l,1200);stroke-dashoffset:var(--l,1200);animation:draw var(--t,9s) ease-in-out infinite}
@keyframes draw{0%{stroke-dashoffset:var(--l,1200)}45%,70%{stroke-dashoffset:0}100%{stroke-dashoffset:calc(var(--l,1200) * -1)}}
.flow{offset-rotate:0deg;animation:flow var(--t,12s) linear infinite}
@keyframes flow{to{offset-distance:100%}}
.sunrise{animation:rise 18s ease-in-out infinite alternate}
@keyframes rise{from{transform:translateY(40px)}to{transform:translateY(-30px)}}
.cloud{animation:drift var(--t,40s) linear infinite}
@keyframes drift{from{transform:translateX(-30%)}to{transform:translateX(130%)}}
/* ---------- podium ---------- */
.stage{position:relative;z-index:2;min-height:100vh;display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);align-items:center;gap:16px;padding:40px clamp(16px,4vw,70px) 60px}
.ringwrap{display:flex;flex-direction:column;align-items:center;transition:transform 1s cubic-bezier(.2,.8,.2,1)}
.ring{width:100%;max-width:760px;height:auto;overflow:visible}
.track{fill:none;stroke:var(--orange);stroke-width:5;opacity:.9}
.ticks line{stroke:var(--txt);stroke-opacity:.35;stroke-width:2}
.ticks{transform-origin:300px 300px;animation:spin 90s linear infinite}
.disc{transition:transform .5s cubic-bezier(.3,1.5,.5,1),opacity .5s}
.disc circle.f{fill:var(--orange)}
.disc .ring2{fill:none;stroke:#fff;stroke-width:4;opacity:0;transition:opacity .4s}
.disc.on .ring2{opacity:1}
body.light .disc .ring2{stroke:#0B0F1A}
.ico{fill:none;stroke:#0B0F1A;stroke-width:2.7;stroke-linecap:round;stroke-linejoin:round}
.ico .n{fill:#fff;stroke:#0B0F1A;stroke-width:1.9}
.ico .s{fill:#0B0F1A;stroke:none}
.ring.idle .disc{opacity:.82}.ring.idle .disc.on,.ring .disc.lit{opacity:1}
.lbl{font-family:'Outfit',sans-serif;font-weight:700;fill:var(--txt);transition:fill 1.2s,opacity .4s}
.lbl .p{font-size:18px;font-weight:600;letter-spacing:.1em;fill:var(--txt2)}
.lbl .m{font-size:40px}
.lbl.on .m{fill:var(--orange)}
.ring.idle .lbl{opacity:.75}.ring.idle .lbl.on{opacity:1}
.hand{transition:transform .65s cubic-bezier(.34,1.56,.5,1)}
.cyc{margin-top:6px;font-family:'Outfit',sans-serif;font-weight:700;font-size:17px;letter-spacing:.26em;color:var(--txt);opacity:.85;transition:opacity .4s}
.cyc b{color:var(--orange)}
/* ---------- kaart (v789_2) ---------- */
.cardcol{display:flex;justify-content:center;transition:opacity .6s,transform .6s}
.card{width:100%;max-width:440px;background:rgba(255,255,255,.86);backdrop-filter:blur(24px) saturate(1.2);-webkit-backdrop-filter:blur(24px) saturate(1.2);border:1px solid rgba(255,255,255,.6);border-radius:24px;box-shadow:0 4px 12px rgba(0,0,0,.08),0 24px 60px rgba(0,0,0,.22),inset 0 1px 0 rgba(255,255,255,.6);padding:40px 40px 34px;animation:pop .5s cubic-bezier(.2,.9,.3,1.2)}
@keyframes pop{from{opacity:0;transform:translateY(12px) scale(.98)}to{opacity:1;transform:none}}
.brand{display:flex;align-items:center;justify-content:center;gap:10px;font-family:'Outfit',sans-serif;font-weight:700;font-size:31px;margin-bottom:22px}
.brand svg{width:38px;height:38px}.brand .w2{color:var(--orange)}
.bhand{transition:transform .65s cubic-bezier(.34,1.56,.5,1);transform-origin:32px 32px}
h1{font-family:'Outfit',sans-serif;font-weight:700;font-size:28px;margin-bottom:6px}h1 em{font-style:normal;color:var(--orange-t)}
.sub{color:var(--body);font-size:14px;line-height:1.45;margin-bottom:22px}
.field{margin-bottom:14px}.field label{display:block;font-size:12px;font-weight:700;margin-bottom:6px}
.field input{width:100%;height:46px;border:1px solid var(--line);border-radius:10px;background:rgba(255,255,255,.8);padding:0 14px;font:inherit;font-size:15px;color:var(--ink);transition:border-color .2s,box-shadow .2s}
.field input:focus{outline:none;border-color:var(--orange);background:#fff;box-shadow:0 0 0 4px #FCE4D6}
.code{letter-spacing:.5em;text-align:center;font-size:20px!important}
.row{display:flex;justify-content:space-between;align-items:center;font-size:13px;margin:4px 0 18px;color:var(--body)}.row label{display:flex;gap:7px;align-items:center}.row input{accent-color:var(--orange)}
.link{color:var(--orange-t);font-weight:600;cursor:pointer;background:none;border:0;font:inherit;font-size:13px}
.btn{width:100%;height:50px;border:0;border-radius:10px;background:var(--orange);color:var(--ink);font:inherit;font-size:15px;font-weight:700;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:10px;transition:background .2s,transform .2s,box-shadow .2s}
.btn:hover{background:var(--orange-d);transform:translateY(-1px);box-shadow:0 10px 24px rgba(237,125,49,.45)}
.msg{min-height:20px;font-size:13px;margin-top:12px;color:#067647}.msg.err{color:#B42318}.back{margin-top:16px;text-align:center}
.qr{width:132px;height:132px;margin:0 auto 14px;border-radius:10px;background:#fff;display:flex;align-items:center;justify-content:center}.qr img{width:120px;height:120px}
.key{font-family:ui-monospace,monospace;font-size:13px;text-align:center;color:var(--body);margin:-6px 0 12px;word-break:break-all}
.step{display:none}.step.on{display:block;animation:pop .35s ease}
.snd{position:fixed;top:14px;right:14px;z-index:10;width:44px;height:44px;border-radius:50%;border:1px solid rgba(255,255,255,.35);background:rgba(11,15,26,.45);backdrop-filter:blur(8px);color:#fff;font-size:19px;cursor:pointer;transition:background .2s,border-color .2s}
.snd:hover{border-color:var(--orange)}.snd.off{opacity:.75}
body.light .snd{background:rgba(255,255,255,.7);border-color:rgba(11,15,26,.25)}
.foot{position:fixed;left:0;right:0;bottom:12px;z-index:3;text-align:center;font-size:11px;letter-spacing:.18em;color:var(--txt2);opacity:.8}
/* ---------- binnenkomen ---------- */
body.enter .cardcol{opacity:0;transform:translateX(40px);pointer-events:none}
body.enter .ringwrap{transform:translateX(var(--shift,0)) scale(.82);filter:blur(7px);opacity:.22;transition:transform 1.6s cubic-bezier(.2,.8,.2,1),filter 1.6s,opacity 1.6s}
body.enter .cyc{opacity:0}
.hero{position:fixed;inset:0;z-index:5;display:flex;flex-direction:column;align-items:center;justify-content:center;pointer-events:none;opacity:0;transition:opacity 1s}
body.enter .hero{opacity:1;pointer-events:auto}
.hero .lock{display:flex;align-items:center;gap:.28em;font-family:'Outfit',sans-serif;font-weight:700;font-size:clamp(30px,6vw,96px);color:var(--txt);transform:scale(.86);transition:transform 1.8s cubic-bezier(.2,.8,.2,1)}
body.enter .hero .lock{transform:none}
.hero .lock svg{width:1.05em;height:1.05em}.hero .lock .w2{color:var(--orange)}
.hero .hhand{transform-origin:32px 32px;animation:clock 6s cubic-bezier(.5,0,.3,1) infinite}
@keyframes clock{0%{transform:rotate(0)}30%{transform:rotate(360deg)}100%{transform:rotate(360deg)}}
.hero .wel{margin-top:22px;text-align:center;opacity:0;transform:translateY(12px);transition:opacity 1.2s,transform 1.2s}
body.hello .hero .wel{opacity:1;transform:none}
.hero .wel b{display:block;font-family:'Outfit',sans-serif;font-weight:600;font-size:clamp(22px,2.6vw,38px);color:var(--txt);letter-spacing:.02em}
.hero .wel small{display:block;margin-top:8px;font-size:clamp(14px,1.2vw,17px);color:var(--txt2)}
.skip{margin-top:34px;border:1px solid rgba(255,255,255,.55);background:rgba(255,255,255,.1);color:var(--txt);border-radius:999px;padding:12px 26px;font:inherit;font-size:15px;font-weight:700;cursor:pointer;opacity:0;transition:opacity .8s,background .2s,border-color .2s}
body.light .skip{border-color:rgba(11,15,26,.35);background:rgba(255,255,255,.5)}
.skip:hover{background:var(--orange);border-color:var(--orange);color:#0B0F1A}
body.canskip .skip{opacity:1}
.mutenote{margin-top:16px;font-size:13px;color:var(--txt2);opacity:0;transition:opacity .6s}
body.enter.muted .mutenote{opacity:1}
.welcome{position:fixed;left:0;right:0;bottom:6%;z-index:4;text-align:center;font-family:'Outfit',sans-serif;font-weight:700;font-size:32px;color:var(--txt);opacity:0;transform:translateY(10px);transition:opacity .6s,transform .6s;pointer-events:none}
.welcome small{display:block;font-family:'DM Sans',sans-serif;font-weight:400;font-size:15px;color:var(--txt2);margin-top:6px}
body.hello .welcome{opacity:1;transform:none}
@media (max-width:999px){
 .stage{grid-template-columns:1fr;gap:4px;padding-top:20px;padding-bottom:10px}
 .ring{width:min(100vw,470px);margin:0 -16px}
 .lbl .p{display:none}.lbl .m{font-size:30px}
 .cyc{font-size:13px}
 body.enter .stage{grid-template-columns:1fr}
 body.enter .ringwrap{transform:translateY(16vh) scale(1.08)}
 .card{padding:30px 22px 26px}
 .stage{padding-left:16px!important}
 .foot{position:static;padding:8px 0 16px}
 body.enter .ringwrap{transform:scale(.8)}
 .hero .lock{font-size:8.6vw}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
[hidden]{display:none!important}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}