:root {
  color-scheme: dark;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 5rem;
}

body {
  font-family: 'Inter', ui-sans-serif, system-ui, sans-serif;
  background-color: #020304;
}

.font-display {
  font-family: 'Space Grotesk', ui-sans-serif, system-ui, sans-serif;
}

/* Aurora glow blobs behind the hero */
.aurora-blob {
  position: absolute;
  border-radius: 9999px;
  filter: blur(90px);
  pointer-events: none;
  animation: aurora-drift 18s ease-in-out infinite;
}

@keyframes aurora-drift {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33% { transform: translate(24px, -28px) scale(1.08); }
  66% { transform: translate(-20px, 22px) scale(0.94); }
}

/* Modal open/close transition */
[data-modal] {
  opacity: 0;
  transition: opacity 0.2s ease;
}

[data-modal].is-open {
  opacity: 1;
}

[data-modal] .modal-panel {
  transform: translateY(16px) scale(0.98);
  opacity: 0;
  transition: transform 0.2s ease, opacity 0.2s ease;
}

[data-modal].is-open .modal-panel {
  transform: translateY(0) scale(1);
  opacity: 1;
}

/* Toast */
#toast {
  opacity: 0;
  transform: translate(-50%, 8px);
  transition: opacity 0.2s ease, transform 0.2s ease;
}

#toast.is-open {
  opacity: 1;
  transform: translate(-50%, 0);
}