html, body {
  height: 100%;
  margin: 0;
  background: #fff; /* white background */
}

/* Fullscreen logo in the background */
#logo-bg {
  position: fixed;
  inset: 0;
  background: center / contain no-repeat url("logo-w.svg");
  z-index: 0;
  pointer-events: none;
}

/* Vanta canvas above the logo; transparent so white+logo show through */
#vanta-layer {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  #vanta-layer { display: none; }
}
/* existing styles ... */

html, body {
  height: 100%;
  margin: 0;
  background: #fff;
  transition: opacity 600ms ease;
}

body.is-fading { opacity: 0; }

/* Centering layer (unchanged) */
.overlay {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  z-index: 2;
  pointer-events: none;
}

/* Button styles: no size changes on hover */
#enterBtn {
  pointer-events: auto;
  font: 600 1.125rem/1.2 system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  padding: 0.9rem 1.4rem;
  border-radius: 999px;
  border: 0;
  background: #404387; /* Viridis blue */
  color: #fff;
  cursor: pointer;

  /* Base shadow + subtle inner highlight */
  box-shadow:
    0 10px 22px rgba(0, 0, 0, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.15);

  /* Shimmer-ready gradient (very subtle) */
  background-image:
    linear-gradient( to bottom, rgba(255,255,255,0.16), rgba(255,255,255,0) );
  background-blend-mode: overlay;

  /* Smooth transitions (no transform) */
  transition:
    box-shadow 200ms ease,
    filter 200ms ease,
    opacity 200ms ease;
}

/* Hover: soft glow only (no move/size change) */
#enterBtn:hover {
  box-shadow:
    0 12px 26px rgba(0, 0, 0, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.18);
  filter: brightness(1.03);
}

/* Focus-visible: accessible ring + same glow */
#enterBtn:focus-visible {
  outline: 0;
  box-shadow:
    0 0 0 3px rgba(142,160,255,0.55),       /* focus ring */
    0 12px 26px rgba(0, 0, 0, 0.22),         /* ambient */
    inset 0 1px 0 rgba(255, 255, 255, 0.18); /* inner */
}

/* Active: deepen shadow a bit (no move/size change) */
#enterBtn:active {
  box-shadow:
    0 10px 22px rgba(0, 0, 0, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.18);
  filter: brightness(0.98);
}

/* Ripple effect on click (pure CSS, no layout shift) */
#enterBtn {
  position: relative;
  overflow: hidden; /* clip ripple */
}
#enterBtn::after {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  width: 0;
  height: 0;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,0.35) 0%, rgba(255,255,255,0) 60%);
  opacity: 0;
  transform: translateZ(0);
}
#enterBtn:active::after {
  animation: btn-ripple 500ms ease-out forwards;
}
@keyframes btn-ripple {
  0%   { opacity: 0.35; width: 0; height: 0; }
  100% { opacity: 0;    width: 500px; height: 500px; }
}

@media (prefers-reduced-motion: reduce) {
  #enterBtn { transition: none; }
  #enterBtn:active::after { animation: none; }
}


    /* Compact icon button (matches signup look) */
    .btn-icon{
      display:inline-grid;place-items:center;width:42px;height:42px;padding:0;border-radius:999px;
      background:#fff;border:1px solid rgba(0,0,0,.15);color:#1a1a1a;
      transition:box-shadow .15s ease,background .2s ease
    }
    .btn-icon:hover{box-shadow:0 2px 10px rgba(0,0,0,.15)}
    .btn-icon:focus-visible{outline:2px solid;outline-offset:2px}

    /* Scope icon visibility to the toggle only */
    #themeToggle .icon-sun,#themeToggle .icon-moon{width:20px;height:20px;display:block}
    #themeToggle .icon-moon{display:none}
    body.is-dark #themeToggle .icon-sun{display:none}
    body.is-dark #themeToggle .icon-moon{display:block}

    /* Top-right placement */
    #themeToggle{position:fixed;top:1rem;right:1rem;z-index:3}

    /* Dark mode just changes page background; birds stay on transparent canvas */
    body.is-dark{background:#000}
/* Smooth page transition (supported browsers only) */
::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: .35s;
}