/* Scheer Groep login: animaties en micro-interacties */

/* Gefaseerde intro */
.intro {
  opacity: 0;
  transform: translateY(14px);
  animation: intro .55s cubic-bezier(.2,.7,.2,1) forwards;
  animation-delay: calc(var(--i, 0) * 80ms + 120ms);
}

@keyframes intro {
  to { opacity: 1; transform: none; }
}

.login-beeld { animation: beeld-in .9s ease-out both; }

@keyframes beeld-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.login-beeld::after { animation: kader-in .8s cubic-bezier(.2,.7,.2,1) .2s both; transform-origin: top right; }

@keyframes kader-in {
  from { transform: scale(.98); opacity: 0; }
  to   { transform: none; opacity: 1; }
}

.login-intro h1 { margin-bottom: 14px; }
.login-intro p { margin-bottom: 0; }

.login-bedrijven { align-items: center; }
.login-bedrijven img { transition: transform .25s cubic-bezier(.2,.7,.2,1); }
.login-bedrijven img:hover { transform: translateY(-3px); }

/* Kaart */
.kaart-anim {
  transition: transform .18s ease-out, box-shadow .25s;
  will-change: transform;
  padding-top: 36px;
}

.kaart-kop { margin-bottom: 20px; }
.kaart-kop .uitleg { margin: 0; }

.kaart.schud { animation: schud .45s cubic-bezier(.36,.07,.19,.97); }

@keyframes schud {
  10%, 90% { transform: translateX(-2px); }
  20%, 80% { transform: translateX(4px); }
  30%, 50%, 70% { transform: translateX(-7px); }
  40%, 60% { transform: translateX(7px); }
}

.melding {
  animation: melding-in .3s ease-out;
  display: flex;
  align-items: center;
  gap: 8px;
}

.melding::before {
  content: "!";
  flex: none;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: var(--fout);
  color: #fff;
  font-size: .75rem;
  font-weight: 800;
  display: grid;
  place-items: center;
}

.melding[hidden] { display: none; }

@keyframes melding-in {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: none; }
}

/* Zwevende labels */
.veld.zweef { position: relative; margin-bottom: 20px; }

.veld.zweef input {
  padding: 22px 14px 8px;
  background: #F9FAFC;
  border: 1.5px solid var(--lijn);
  border-radius: 10px;
  transition: border-color .18s, background .18s, box-shadow .18s;
}

.veld.zweef input:focus { box-shadow: 0 0 0 4px rgba(35,74,134,.16); }

.veld.zweef label {
  position: absolute;
  left: 15px; top: 16px;
  margin: 0;
  font-size: .95rem;
  font-weight: 500;
  color: var(--tekst-zacht);
  pointer-events: none;
  transform-origin: left top;
  transition: transform .18s cubic-bezier(.2,.7,.2,1), color .18s;
}

.veld.zweef input:focus + label,
.veld.zweef input:not(:placeholder-shown) + label {
  transform: translateY(-10px) scale(.78);
  color: var(--link);
}

.veld.zweef input:not(:focus):not(:placeholder-shown) + label { color: var(--tekst-zacht); }

.veld-lijn {
  position: absolute;
  left: 14px; right: 14px; bottom: 0;
  height: 2px;
  background: var(--link);
  border-radius: 2px 2px 0 0;
  transform: scaleX(0);
  transition: transform .25s cubic-bezier(.2,.7,.2,1);
}

.veld.zweef input:focus ~ .veld-lijn { transform: scaleX(1); }

.veld.trilt { animation: tril .35s; }

@keyframes tril {
  25% { transform: translateX(-4px); }
  75% { transform: translateX(4px); }
}

.veld.zweef .toon-wachtwoord { top: 50%; }
.oog-streep { stroke-dasharray: 24; stroke-dashoffset: 24; transition: stroke-dashoffset .25s; }
.toon-wachtwoord.open .oog-streep { stroke-dashoffset: 0; }
.toon-wachtwoord:active svg { transform: scale(.9); }
.toon-wachtwoord svg { transition: transform .1s; }

/* Rij met schakelaar en link */
.rij {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 2px 0 22px;
}

.onthouden { margin: 0; }

.schakel input { position: absolute; opacity: 0; width: 0; height: 0; }

.schakel-knop {
  width: 36px; height: 20px;
  border-radius: 10px;
  background: #D5D9E2;
  position: relative;
  transition: background .2s;
  flex: none;
}

.schakel-knop::after {
  content: "";
  position: absolute;
  top: 2px; left: 2px;
  width: 16px; height: 16px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(22,33,58,.3);
  transition: transform .2s cubic-bezier(.2,.7,.2,1);
}

.schakel input:checked + .schakel-knop { background: var(--link); }
.schakel input:checked + .schakel-knop::after { transform: translateX(16px); }
.schakel input:focus-visible + .schakel-knop { outline: 3px solid rgba(35,74,134,.35); outline-offset: 2px; }

.link-zacht { font-size: .85rem; color: var(--tekst-zacht); text-decoration: none; }
.link-zacht:hover { color: var(--accent); }

/* Knop met laad- en successtatus */
.knop-anim {
  position: relative;
  overflow: hidden;
  transition: background .18s, transform .12s, box-shadow .18s;
  box-shadow: 0 6px 16px rgba(233,168,15,.34);
}

.knop-anim:hover { transform: translateY(-1px); box-shadow: 0 10px 22px rgba(233,168,15,.40); }
.knop-anim:active { transform: translateY(0) scale(.99); }
.knop-anim:disabled { cursor: default; }

.knop-tekst { display: inline-block; transition: opacity .15s, transform .15s; }

.knop-laden {
  position: absolute;
  left: 50%; top: 50%;
  width: 20px; height: 20px;
  margin: -10px 0 0 -10px;
  border: 2.5px solid rgba(27,27,16,.30);
  border-top-color: #1B1B10;
  border-radius: 50%;
  opacity: 0;
  animation: draai .7s linear infinite;
  animation-play-state: paused;
}

.knop-vink {
  position: absolute;
  left: 50%; top: 50%;
  width: 24px; height: 24px;
  margin: -12px 0 0 -12px;
  opacity: 0;
  stroke-dasharray: 30;
  stroke-dashoffset: 30;
}

form.bezig .knop-tekst { opacity: 0; transform: translateY(6px); }
form.bezig .knop-laden { opacity: 1; animation-play-state: running; }

form.gelukt .knop-anim { background: #1F9D55; box-shadow: 0 6px 16px rgba(31,157,85,.3); }
form.gelukt .knop-tekst { opacity: 0; }
form.gelukt .knop-vink { opacity: 1; animation: vink .4s ease-out forwards; }
form.gelukt .kaart-anim { pointer-events: none; }

@keyframes draai { to { transform: rotate(360deg); } }
@keyframes vink { to { stroke-dashoffset: 0; } }

.kaart-voet { color: var(--tekst-zacht); font-size: .8rem; margin-top: 22px; }

@media (prefers-reduced-motion: reduce) {
  .intro, .login-beeld, .login-beeld::after { animation: none; opacity: 1; transform: none; }
  .kaart.schud, .veld.trilt { animation: none; }
  .kaart-anim, .veld.zweef label, .veld-lijn, .schakel-knop, .schakel-knop::after, .knop-anim { transition: none; }
}

/* ---------- v0.5 upgrade (ui-ux-pro-max) ---------- */

/* Zachte accent-gloed achter de kaart */
.login-form { position: relative; overflow: hidden; }
.login-form::before {
  content: "";
  position: absolute;
  width: 460px; height: 460px;
  right: -120px; top: 50%;
  transform: translateY(-50%);
  background: radial-gradient(circle, rgba(251,190,42,.18) 0%, rgba(251,190,42,0) 70%);
  pointer-events: none;
  z-index: 0;
}
.login-form .kaart { position: relative; z-index: 1; }

/* Melding met herstelpad */
.melding {
  flex-wrap: wrap;
  align-items: flex-start;
  row-gap: 6px;
  padding: 12px 14px;
}
.melding::before { margin-top: 1px; }
.melding-tekst { flex: 1 1 100%; min-width: 0; line-height: 1.4; }
.melding-link {
  flex: 0 0 auto;
  margin-left: 26px;
  color: var(--fout);
  font-weight: 700;
  text-decoration: underline;
  font-size: .82rem;
}
.melding-link:hover { text-decoration: none; }

/* Caps Lock hint */
.caps-hint {
  position: absolute;
  right: 46px; top: 50%;
  transform: translateY(-50%);
  background: #FFF0E0;
  color: #B4620F;
  font-size: .7rem;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 6px;
  pointer-events: none;
  animation: melding-in .2s ease-out;
}

/* Toon-wachtwoord: groter raakvlak (>=44px), duidelijker contrast */
.toon-wachtwoord {
  min-width: 44px; min-height: 44px;
  color: var(--tekst-zacht);
}
.toon-wachtwoord:hover { color: var(--merk-geel-donker); background: var(--accent-licht); }

/* Focusringen consequent en zichtbaar (toetsenbord) */
.login-body a:focus-visible,
.toon-wachtwoord:focus-visible,
.knop-anim:focus-visible {
  outline: 3px solid rgba(35,74,134,.45);
  outline-offset: 2px;
}

/* Iets donkerder muted tekst voor 4.5:1 contrast */
.login-body { --tekst-zacht: #5A6274; }

/* Wachtwoord-vergeten-link ook goed zichtbaar */
.link-zacht { color: #4A5265; }

@media (max-width: 768px) {
  .login-form::before { display: none; }
  .caps-hint { position: static; transform: none; display: inline-block; margin: 8px 0 0; }
}


/* Autofill: label omhoog houden en gele autofill-achtergrond neutraliseren */
.veld.zweef input:-webkit-autofill + label {
  transform: translateY(-10px) scale(.78);
  color: var(--link);
}
.veld.zweef input:-webkit-autofill,
.veld.zweef input:-webkit-autofill:hover,
.veld.zweef input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--tekst);
  transition: background-color 9999s ease-out 0s;
  box-shadow: 0 0 0 40px #F9FAFC inset;
}
.veld.zweef input:focus:-webkit-autofill {
  box-shadow: 0 0 0 40px #fff inset, 0 0 0 4px rgba(35,74,134,.16);
}
/* class-gebaseerde fallback via JS voor niet-webkit */
.veld.zweef.heeft-waarde label {
  transform: translateY(-10px) scale(.78);
  color: var(--link);
}