/* Aanmeldpagina – zelfde opmaak als de onderhoudspagina (onderhoud.html), kleuren uit huisstijl.css */
body.aanmeldpagina {
  justify-content: center; align-items: center; padding: 24px 16px;
  background:
    radial-gradient(circle at 20% 15%, color-mix(in srgb, var(--kleur-accent) 22%, transparent) 0, transparent 40%),
    radial-gradient(circle at 85% 85%, color-mix(in srgb, var(--kleur-link) 45%, transparent) 0, transparent 45%),
    var(--kleur-kop);
  background-attachment: fixed;
}

.onderhoud {
  width: 100%; max-width: 600px; text-align: center;
  background: var(--kaart); border-radius: 18px; border-top: 6px solid var(--kleur-accent);
  box-shadow: 0 20px 50px rgba(0, 0, 0, .35);
  padding: 2.25rem 1.75rem 2rem;
  animation: binnen .8s ease-out both;
}
@keyframes binnen { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }

/* ---------- Geanimeerd logo ---------- */
.logo-zone { position: relative; width: 210px; height: 210px; margin: 0 auto 1.5rem; }
.logo-zone img {
  position: relative; z-index: 2; width: 100%; height: 100%; object-fit: contain;
  border-radius: 50%; background: #fff;
  box-shadow: 0 6px 18px rgba(18, 53, 91, .25);
  animation: zweef 4s ease-in-out infinite, draai-in 1.2s cubic-bezier(.2, .8, .2, 1.2) both;
}
@keyframes zweef {
  0%, 100% { translate: 0 0;    rotate: -2deg; }
  50%      { translate: 0 -8px; rotate: 2deg; }
}
@keyframes draai-in { from { scale: .3; opacity: 0; } to { scale: 1; opacity: 1; } }

.golf { position: absolute; inset: 0; border-radius: 50%; border: 3px solid var(--kleur-accent);
  opacity: 0; animation: zend 3s ease-out infinite; z-index: 1; }
.golf:nth-child(2) { animation-delay: 1s; border-color: var(--kleur-link); }
.golf:nth-child(3) { animation-delay: 2s; }
@keyframes zend { 0% { transform: scale(1); opacity: .8; } 100% { transform: scale(1.6); opacity: 0; } }

/* ---------- Tekst ---------- */
.roepnaam { display: inline-block; margin-bottom: .35rem; }
.app-naam { margin: 0 0 .9rem; font-weight: 600; color: var(--kleur-link); letter-spacing: .04em; text-transform: uppercase; font-size: .85rem; }
.onderhoud h1 { color: var(--kleur-kop); font-size: 2rem; margin-bottom: .5rem; }
.onderhoud h1 em { font-style: normal; color: var(--kleur-accent); }
.onderhoud .intro { margin: 0 auto 1.25rem; }
.onderhoud .intro strong { color: var(--kleur-link); }
.onderhoud .melding { text-align: left; }

.morse { font-family: var(--mono); font-size: 1.4rem; letter-spacing: .25em; color: var(--kleur-accent); font-weight: 700; margin: 0; }
.morse span { animation: knipper 1.6s steps(1) infinite; }
.morse span:nth-child(2) { animation-delay: .2s; }
.morse span:nth-child(3) { animation-delay: .4s; }
@keyframes knipper { 50% { opacity: .25; } }
.onder-morse { margin: 0 0 1.25rem; color: var(--kleur-link); font-weight: 600; font-size: .9rem; }

.onderhoud .knoppen { justify-content: center; }
.zeventig { font-family: var(--mono); font-weight: 700; color: var(--kleur-kop); margin: 1.5rem 0 0; }
.zeventig span { color: var(--kleur-accent); }

body.aanmeldpagina .voet { color: rgba(255, 255, 255, .75); padding: 1.25rem 0 0; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; }
}
@media (max-width: 480px) {
  .logo-zone { width: 160px; height: 160px; }
  .onderhoud { padding: 1.75rem 1.1rem 1.5rem; }
  .onderhoud h1 { font-size: 1.5rem; }
}