/* Splashscreen MEEMON: gedeeld door het inlogscherm (templates/login.html)
   en het welkomstscherm na inloggen (templates/welkom.html). */
.splash-vlak{position:relative;overflow:hidden;color:#fff;display:flex;align-items:center;justify-content:center;
  background:radial-gradient(ellipse at 30% 20%, var(--ink-800) 0%, var(--ink-950) 62%, #0e2d29 100%);}
.splash-vlak.vol{min-height:100vh;}
.splash-vlak.paneel{min-height:calc(100vh - 80px);border-radius:var(--radius);}
.splash-staven{position:absolute;left:0;right:0;bottom:0;height:46%;display:flex;align-items:flex-end;justify-content:center;gap:1.1vw;padding:0 6%;opacity:.16;pointer-events:none;}
.splash-staven i{flex:1;max-width:46px;background:var(--ink-300);border-radius:4px 4px 0 0;height:0;animation:splash-groei 1.6s cubic-bezier(.2,.7,.2,1) forwards;}
@keyframes splash-groei{to{height:var(--h);}}
.splash-lijn{position:absolute;left:0;right:0;bottom:0;height:46%;width:100%;pointer-events:none;}
.splash-lijn polyline{fill:none;stroke:var(--copper);stroke-width:3;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1400;stroke-dashoffset:1400;animation:splash-teken 2.6s .9s ease-out forwards;opacity:.9;}
@keyframes splash-teken{to{stroke-dashoffset:0;}}

.splash-inhoud>*{position:relative;}
.splash-inhoud>.splash-staven,.splash-inhoud>.splash-lijn,.splash-inhoud>.splash-org{position:absolute;}
.splash-inhoud{position:static;text-align:center;padding:30px 6vw;max-width:980px;width:100%;}
.splash-merk{font-weight:800;letter-spacing:.12em;text-transform:uppercase;font-size:clamp(72px,13vw,150px);line-height:1;display:flex;justify-content:center;padding-left:.12em;}
.splash-merk span{display:inline-block;opacity:0;transform:translateY(.35em) scale(.9);animation:splash-in .7s cubic-bezier(.2,.8,.2,1) forwards;}
.splash-merk span:nth-child(1){animation-delay:.15s}.splash-merk span:nth-child(2){animation-delay:.25s}
.splash-merk span:nth-child(3){animation-delay:.35s}.splash-merk span:nth-child(4){animation-delay:.45s}
.splash-merk span:nth-child(5){animation-delay:.55s}.splash-merk span:nth-child(6){animation-delay:.65s}
.splash-merk .mee{color:var(--copper-soft);}
@keyframes splash-in{to{opacity:1;transform:none;}}
.splash-streep{width:0;height:4px;background:var(--copper);border-radius:2px;margin:26px auto 22px;animation:splash-breed .8s 1.1s ease-out forwards;}
@keyframes splash-breed{to{width:min(320px,60%);}}
.splash-omschrijving{font-size:clamp(18px,2.4vw,26px);font-weight:300;line-height:1.4;color:#e9f2f0;opacity:0;animation:splash-fade .9s 1.5s forwards;}
.splash-omschrijving b{font-weight:600;color:var(--copper-soft);}
.splash-meta{margin-top:30px;display:flex;justify-content:center;gap:34px;flex-wrap:wrap;font-size:15px;color:var(--ink-300);opacity:0;animation:splash-fade .9s 2s forwards;}
.splash-meta strong{color:#fff;font-weight:600;}
.splash-org{position:absolute;left:0;right:0;bottom:18px;text-align:center;font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-300);opacity:0;animation:splash-fade .9s 2.3s forwards;}
.splash-toon{opacity:0;animation:splash-fade .8s 2.2s forwards;}
@keyframes splash-fade{to{opacity:1;}}

.splash-login{margin:28px auto 0;width:min(340px,100%);text-align:left;}
.splash-vlak .splash-login input[type=text],.splash-vlak .splash-login input[type=password]{box-sizing:border-box;width:100%;padding:11px 14px !important;margin-bottom:10px;border-radius:8px;border:1px solid rgba(255,255,255,.28);background:rgba(255,255,255,.1);color:#fff;font:inherit;font-size:16px;}
.splash-login input::placeholder{color:var(--ink-300);}
.splash-knop{width:100%;padding:11px 14px;border-radius:8px;border:0;background:var(--copper);color:#fff;font:inherit;font-size:16px;font-weight:600;cursor:pointer;}
.splash-knop:hover{background:#c8742a;}
.splash-fout{background:rgba(163,55,47,.85);border-radius:8px;padding:9px 12px;font-size:14px;margin-bottom:10px;}
.splash-goed{background:rgba(47,111,79,.85);border-radius:8px;padding:9px 12px;font-size:14px;margin-bottom:10px;}
.splash-vergeten{margin-top:14px;font-size:13px;color:var(--ink-300);text-align:center;}
.splash-vergeten summary{cursor:pointer;list-style:none;}
.splash-vergeten summary::-webkit-details-marker{display:none;}
.splash-vergeten form{margin-top:10px;display:flex;gap:6px;}
.splash-vergeten input{flex:1;padding:7px 8px;border-radius:6px;border:1px solid rgba(255,255,255,.28);background:rgba(255,255,255,.1);color:#fff;font:inherit;font-size:13px;}
.splash-vergeten button{padding:7px 10px;border-radius:6px;border:1px solid rgba(255,255,255,.28);background:transparent;color:#fff;font:inherit;font-size:13px;cursor:pointer;}
.splash-vergeten p{margin-top:6px;font-size:12px;}

.splash-welkom{margin-top:28px;}
.splash-welkom p{font-size:20px;margin-bottom:18px;}
.splash-verder{display:inline-block;padding:13px 34px;border-radius:8px;background:var(--copper);color:#fff;font-size:18px;font-weight:600;text-decoration:none;animation:splash-puls 2s infinite;}
.splash-verder:hover{background:#c8742a;}
@keyframes splash-puls{50%{box-shadow:0 0 0 10px rgba(181,101,31,.25);}}
.splash-tip{margin-top:14px;font-size:13px;color:var(--ink-300);}
@media (prefers-reduced-motion:reduce){.splash-vlak *{animation-duration:.01s!important;animation-delay:0s!important;}}

.splash-ww{position:relative;}
.splash-vlak .splash-ww input[type=password],.splash-vlak .splash-ww input[type=text]{padding-right:46px !important;}
.splash-oog{position:absolute;right:6px;top:6px;width:36px;height:36px;display:flex;align-items:center;justify-content:center;border:0;border-radius:6px;background:transparent;color:var(--ink-300);cursor:pointer;}
.splash-oog:hover{color:#fff;background:rgba(255,255,255,.12);}
.splash-uitleg{font-size:14px;margin:0 0 10px;line-height:1.4;}
.splash-opnieuw{margin-top:10px;text-align:center;}
.splash-opnieuw button{background:none;border:0;color:var(--ink-300);font:inherit;font-size:13px;text-decoration:underline;cursor:pointer;}
.splash-login a{color:var(--ink-300);font-size:13px;}