/* Gedeelde schil voor alle inlog- en aanmeldschermen.
 *
 * Aanleiding: inloggen, aanmelden en verifiëren zagen er alle drie anders uit — andere
 * achtergrondkleur, ander raster, andere kaart, ander lettertype. Wie zich aanmeldt
 * doorloopt die schermen achter elkaar en zag het merk onderweg twee keer veranderen.
 *
 * Alles staat hier één keer, in de kleuren van de website (--bg #0A0E17 enzovoort), en
 * elk scherm laadt dit bestand. Uit elkaar groeien kan daarmee niet meer.
 */

:root{
  --bg:#0A0E17; --panel:#111A2E; --panel-2:#0C1220; --line:#1E2A45; --line-2:#2A3A63;
  --ink:#F2F5FF; --ink-2:#8B94A9; --ink-3:#5A6478;
  --blue:#7C93F5; --blue-deep:#4F6BF0; --green:#34C384;
  --ok:#7fd7a4; --bad:#f0a3a3; --warn:#E8B44C;
  --font:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
  --mono:'JetBrains Mono',ui-monospace,Consolas,monospace;
  color-scheme:dark;
}

*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%}
body{
  background:var(--bg); color:var(--ink); font-family:var(--font); font-size:16px;
  -webkit-font-smoothing:antialiased; overflow:hidden;
  display:grid; place-items:center; padding:24px;
}
a{color:inherit;text-decoration:none}
::selection{background:rgba(79,107,240,.3)}

/* ---------- levende achtergrond ---------- */
.sky{position:fixed;inset:0;z-index:0;pointer-events:none}
.sky::after{
  content:"";position:absolute;inset:0;
  background-image:radial-gradient(rgba(124,147,245,.08) 1px, transparent 1px);
  background-size:34px 34px;
  mask-image:radial-gradient(70% 60% at 50% 40%, #000, transparent 100%);
}
.orb{position:absolute;border-radius:50%;filter:blur(70px);opacity:.55}
/* dwarrelende envelopjes — het meest herkenbare deel van de achtergrond, dus op
   álle schermen. Worden door auth.js aangemaakt, niet in de opmaak, omdat elke vonk
   een eigen startpunt, tempo en vertraging heeft. */
.spark{position:absolute;font-family:var(--mono);font-size:11px;
  color:rgba(124,147,245,.34);animation:sparkrise linear infinite;white-space:nowrap}
@keyframes sparkrise{from{transform:translateY(14vh);opacity:0}12%{opacity:1}
  88%{opacity:1}to{transform:translateY(-110vh);opacity:0}}
.orb.a{width:60vw;height:60vw;left:-12vw;top:-28vw;
  background:radial-gradient(circle,rgba(79,107,240,.30),transparent 65%);
  animation:drift1 26s ease-in-out infinite alternate}
.orb.b{width:46vw;height:46vw;right:-14vw;bottom:-24vw;
  background:radial-gradient(circle,rgba(124,147,245,.16),transparent 65%);
  animation:drift2 32s ease-in-out infinite alternate}
@keyframes drift1{from{transform:translate(0,0) scale(1)}to{transform:translate(6vw,4vw) scale(1.12)}}
@keyframes drift2{from{transform:translate(0,0) scale(1.06)}to{transform:translate(-5vw,-3vw) scale(1)}}

/* ---------- opbouw ---------- */
.shell,.wrap{position:relative;z-index:2;width:min(400px,100%)}
@keyframes enter{from{opacity:0;transform:translateY(16px) scale(.985)}to{opacity:1;transform:none}}

.lockup,.logo{
  display:flex;align-items:center;justify-content:center;gap:11px;margin-bottom:22px;
  font-size:19px;font-weight:800;letter-spacing:-.3px;
  animation:enter .7s cubic-bezier(.2,.8,.2,1) both;
}
.logo .mark{
  width:34px;height:34px;border-radius:10px;display:grid;place-items:center;flex:none;
  background:linear-gradient(150deg,#18233F,#0E1526);border:1px solid var(--line-2);
}
.logo .mark svg{width:18px;height:18px;stroke:var(--blue);fill:none;stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round}
.logo .word{white-space:nowrap}
.logo .core{color:var(--blue)}

/* stappen (aanmelden) */
.steps{
  display:flex;align-items:center;justify-content:center;gap:9px;margin-bottom:22px;
  font:700 10.5px var(--mono);letter-spacing:1.3px;text-transform:uppercase;color:var(--ink-3);
  animation:enter .7s .04s cubic-bezier(.2,.8,.2,1) both;
}
.steps .dot{width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.16);flex:none}
.steps .dot.on{background:var(--blue-deep);box-shadow:0 0 0 3px rgba(79,107,240,.22)}
.steps .dot.done{background:var(--green)}
.steps .sep{width:22px;height:1px;background:var(--line);flex:none}

.card{
  position:relative;background:color-mix(in srgb, var(--panel) 88%, transparent);
  border:1px solid var(--line);border-radius:20px;padding:34px 32px 28px;
  backdrop-filter:blur(14px);
  box-shadow:0 30px 80px rgba(0,0,0,.5), 0 0 0 1px rgba(124,147,245,.04) inset;
  animation:enter .7s .08s cubic-bezier(.2,.8,.2,1) both;
}
.card::before{ /* gloed langs de bovenrand */
  content:"";position:absolute;inset:-1px;border-radius:20px;padding:1px;pointer-events:none;
  background:linear-gradient(120deg, rgba(124,147,245,.5), transparent 30%, transparent 70%, rgba(124,147,245,.25));
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
}

h1{font-size:24px;font-weight:800;letter-spacing:-.5px;margin-bottom:6px}
.sub{color:var(--ink-2);font-size:14.5px;margin-bottom:22px;line-height:1.55}

label{display:block;font:700 10.5px var(--mono);letter-spacing:1.6px;text-transform:uppercase;
  color:var(--ink-3);margin:16px 0 7px}
input{
  width:100%;background:var(--panel-2);border:1px solid var(--line);border-radius:11px;
  padding:13px 15px;color:var(--ink);font:inherit;font-size:15px;
  transition:border-color .2s, box-shadow .2s;
}
input::placeholder{color:#465063}
input:focus{outline:none;border-color:var(--blue-deep);box-shadow:0 0 0 3px rgba(79,107,240,.22)}

.go,button.go{
  position:relative;overflow:hidden;width:100%;margin-top:22px;
  background:linear-gradient(180deg,#5F79F5,var(--blue-deep));color:#fff;border:none;border-radius:11px;
  padding:14px;font:700 15px var(--font);cursor:pointer;
  box-shadow:0 8px 20px -6px rgba(79,107,240,.34);
  transition:transform .15s, box-shadow .2s, filter .2s;
}
.go:hover{transform:translateY(-1px);filter:brightness(1.06);box-shadow:0 12px 26px -8px rgba(79,107,240,.40)}
.go:active{transform:translateY(0)}
.go::after{ /* lichtsweep */
  content:"";position:absolute;top:0;bottom:0;left:-70%;width:45%;
  background:linear-gradient(105deg,transparent,rgba(255,255,255,.28),transparent);
  transform:skewX(-18deg);transition:left .5s ease;
}
.go:hover::after{left:125%}

.err{
  background:rgba(210,60,60,.10);border:1px solid rgba(210,60,60,.32);color:var(--bad);
  border-radius:11px;padding:11px 14px;font-size:13.5px;margin-bottom:6px;
  animation:shake .4s cubic-bezier(.36,.07,.19,.97) both;
}
@keyframes shake{10%,90%{transform:translateX(-1px)}20%,80%{transform:translateX(2px)}
  30%,50%,70%{transform:translateX(-3px)}40%,60%{transform:translateX(3px)}}
.warnbox{
  background:rgba(232,180,76,.10);border:1px solid rgba(232,180,76,.34);color:var(--warn);
  border-radius:11px;padding:11px 14px;font-size:13.5px;margin-bottom:6px;
}

.formfoot{margin-top:20px;text-align:center;font-size:13.5px;color:var(--ink-3)}
.formfoot a{color:var(--blue);font-weight:600}
.formfoot a:hover{text-decoration:underline}
.formfoot button{background:none;border:none;color:var(--blue);font:inherit;font-weight:600;
  cursor:pointer;padding:0}
.formfoot button:hover{text-decoration:underline}

.below{display:flex;justify-content:center;gap:8px;margin-top:22px;font:500 12px var(--mono);
  color:var(--ink-3);animation:enter .7s .16s cubic-bezier(.2,.8,.2,1) both}
.below a:hover{color:var(--ink)}

/* ---------- overgang tussen de schermen ----------
   Twee lagen, want ze vullen elkaar aan:
   · @view-transition laat browsers die het kennen (Chrome, Edge, Safari) het oude en
     nieuwe scherm in elkaar overvloeien in plaats van wit te knipperen;
   · de `enter`-animatie hierboven zorgt dat het overal, ook in Firefox, netjes opkomt.
   De achtergrond staat bewust buiten de overgang: die hoort stil te blijven staan
   terwijl de kaart wisselt — dat maakt het één omgeving in plaats van twee pagina's. */
@view-transition{ navigation:auto }
.sky{ view-transition-name:sky }
::view-transition-old(root),::view-transition-new(root){ animation-duration:.28s }

@media(prefers-reduced-motion:reduce){
  /* @view-transition mag alleen op het hoogste niveau staan; het uitzetten gebeurt
     daarom via de duur van de overgang, en dat werkt net zo goed. */
  *,*::before,*::after{animation-duration:.01ms !important;transition-duration:.01ms !important}
  ::view-transition-old(root),::view-transition-new(root){animation-duration:.01ms !important}
}
@media(max-width:440px){ .card{padding:28px 22px 24px} body{overflow:auto} }