:root {
  --bg: #0a0a0a;
  --fg: #eaeaea;
  --glass: #111111cc;
  --ring: #2a2a2a;
}

/* Vol scherm, geen scroll */
html,
body {
  height: 100%;
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell,
    Noto Sans, Arial;
  overflow: hidden;
}

/* Subtiele animated achtergrond (glow + micro-grid) */
.site-bg {
  position: fixed;
  inset: 0;
  pointer-events: none;
  background:
    /* micro-grid */ linear-gradient(
        transparent 95%,
        rgba(255, 255, 255, 0.02) 0
      )
      0 0/100% 8px,
    linear-gradient(90deg, transparent 95%, rgba(255, 255, 255, 0.02) 0) 0 0/8px
      100%,
    /* soft glows */
      radial-gradient(
        1200px 600px at 20% 0%,
        rgba(255, 255, 255, 0.06),
        transparent 60%
      ),
    radial-gradient(
      1000px 1000px at 80% 120%,
      rgba(255, 255, 255, 0.06),
      transparent 60%
    ),
    #000;
  filter: saturate(110%);
}
@media (prefers-reduced-motion: no-preference) {
  .site-bg {
    animation: glowMove 14s ease-in-out infinite alternate;
  }
}
@keyframes glowMove {
  0% {
    background-position: 0 0, 0 0, 0 0, 0 0, 0 0;
  }
  100% {
    background-position: 0 0, 0 0, 6% -3%, -4% 5%, 0 0;
  }
}

/* Layout */
.wrap {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding-bottom: clamp(32px, 6vh, 96px); /* constante extra ruimte onderaan */
}
@supports (padding: max(0px)) {
  .wrap {
    padding-bottom: max(clamp(32px, 6vh, 96px), env(safe-area-inset-bottom));
  }
}

/* Stage: JS zet breedte/hoogte op 100vw x (100vh - cta), geen aspect-ratio hier */
.stage {
  margin: 0 auto 0;
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.06) inset,
    0 20px 60px rgba(0, 0, 0, 0.6), 0 10px 30px rgba(0, 0, 0, 0.45);
  background: #000;
}

/* Canvas schaalt via CSS (JS zet interne resolutie); 100% van stage */
canvas {
  width: 100%;
  height: 100%;
  display: block;
  background: #000;
}

/* CTA-blok direct onder de canvas (onder de logotekst), met marge */
.cta {
  width: min(96vw, 1200px);
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
  margin-top: 16px; /* ruimte boven knop, onder de logotekst */
  margin-bottom: clamp(32px, 6vh, 96px); /* royale marge onder knop */
  min-height: 64px; /* reserveer ruimte zodat layout niet springt */
}

/* Enter-knop (glassy + subtiele glow) */
.enter-btn {
  padding: 14px 20px;
  border-radius: 14px;
  border: 1px solid var(--ring);
  background: var(--glass);
  color: var(--fg);
  font-weight: 600;
  letter-spacing: 0.2px;
  cursor: pointer;
  opacity: 0; /* via JS unhiden + faden */
  translate: 0 6px;
  transition: opacity 0.6s ease, translate 0.6s ease, background 0.2s ease,
    border-color 0.2s ease;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35),
    0 0 35px rgba(255, 255, 255, 0.04) inset;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.enter-btn:hover {
  background: #161616cc;
  border-color: #3a2a2a;
}
.enter-btn.show {
  opacity: 1;
  translate: 0 0;
}

/* Respecteer reduced motion */
@media (prefers-reduced-motion: reduce) {
  .enter-btn {
    transition: opacity 0.01s linear;
  }
}