/* os-mia-welkom.css — inloggen + opstarten met de blauwe Mia (09-10, team mascotte-os, lid C).
 * Opstarten: #os-welkom staat in de HTML en is er vanaf de eerste paint (Mia wordt wakker i.p.v. een leeg scherm).
 * Inloggen: Mia (96 px) i.p.v. het oude logo; luistert · denkt · fout · klaar. Noodrem mia-avatar=uit → oude logo.
 * Alleen transform/opacity in beweging; bij "minder beweging" niets. */

/* ── opstarten ── */
.os-welkom {
  position: fixed; inset: 0; z-index: 120;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0;
  background: linear-gradient(180deg, var(--grond, #F3F4F4) 0%, var(--grond2, #ECEEEF) 100%);
  transition: opacity .26s ease-out;
}
html[data-thema="avond"] .os-welkom { background: linear-gradient(180deg, var(--grond, #0E1315) 0%, var(--grond2, #070A0B) 100%); }
.os-welkom.ow-weg { opacity: 0; pointer-events: none; }
.os-welkom.ow-weg .ow-mia { transform: scale(.94); }
.ow-mia {
  position: relative; width: 112px; height: 112px;
  transition: transform .26s ease-out;
}
/* vóór het component er is: een rustig, gedoofd rondje water op de plek van Mia (geen flits, geen spinner) */
.ow-mia:not(.mia-av)::before {
  content: ""; position: absolute; left: 7%; top: 10%; width: 86%; height: 86%; border-radius: 50%;
  background: linear-gradient(180deg, #4A5560 0%, #343E48 50%, #1E252C 100%); opacity: .55;
}
.ow-naam {
  margin: 18px 0 0; font: 600 17px/1.2 var(--f, system-ui, sans-serif); letter-spacing: -.01em;
  color: var(--inkt, #1C1C1E);
}
.ow-regel {
  min-height: 1.4em; margin: 6px 0 0; padding: 0 24px; text-align: center;
  font: 400 13px/1.4 var(--f, system-ui, sans-serif); color: rgba(60,60,67,.78);
  opacity: 0; transition: opacity .3s ease-out;
}
.ow-regel.ow-zicht { opacity: 1; }
.ow-knop {
  margin-top: 14px; padding: 9px 18px; border: 0; border-radius: 999px; cursor: pointer;
  font: 600 14px/1 var(--f, system-ui, sans-serif); background: var(--accent, #0E6E73); color: #fff;
}
.ow-knop[hidden] { display: none; }

/* ── inloggen ── */
.login-mia { display: block; width: 56px; height: 56px; margin: 0 auto 18px; }   /* noodrem/geen component: precies het oude logo */
.login-mia .login-logo { width: 56px; height: 56px; margin: 0; display: block; }
html.mia-merk .login-mia { width: 96px; height: 96px; margin-bottom: 14px; }
.login-mia.mia-av .login-logo { display: none; }
html.mia-merk .login-card h1 { text-transform: none; letter-spacing: -.01em; font-weight: 700; font-size: 26px; }
.login-card button[aria-busy="true"] { opacity: .85; cursor: progress; }
/* Apple-lijn: knop in zinshoofdletters zoals de titel (alleen als Mia er is; noodrem = precies het oude scherm) */
html.mia-merk .login-card button { text-transform: none; letter-spacing: -.005em; font-size: 15px; }
html.mia-merk[data-thema="avond"] .login-card button { color: #04191A; }
.login-net { color: rgba(60,60,67,.78); font-size: 13px; margin-top: 12px; }
.login-net.hidden { display: none; }
.login-card.lm-schud { animation: lm-schud .34s cubic-bezier(.36,.07,.19,.97); }
@keyframes lm-schud {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-7px); } 40% { transform: translateX(6px); }
  60% { transform: translateX(-4px); } 80% { transform: translateX(2px); }
}
@media (max-width: 420px) { html.mia-merk .login-mia { width: 88px; height: 88px; margin-bottom: 10px; } }
@media (min-width: 760px) { .ow-mia { width: 128px; height: 128px; } }
@media (prefers-reduced-motion: reduce) {
  .os-welkom, .ow-mia, .ow-regel { transition: none; }
  .login-card.lm-schud { animation: none; }
}
.lm-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
/* foutregel onder de knop in de bestaande onderruimte van de kaart: de kaart verspringt niet bij een fout */
#login-form { position: relative; }
#login-err, #login-net { position: absolute; left: 0; right: 0; top: 100%; margin-top: 10px; line-height: 1.4; }
html[data-thema="avond"] .ow-regel, html[data-thema="avond"] .login-net { color: rgba(235,235,245,.72); }