/**
 * Main Stylesheet
 * Base styles, typography, layout, and core visual elements
 */

/* Import fonts with font-display: swap for better mobile performance */
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@600&family=Inter:wght@400;600&display=swap');

/* CSS Variables */
:root {
  --wave-color: blue;
  color-scheme: dark;
  /* Mobile viewport height fix - svh accounts for browser chrome */
  --vh-fallback: 1vh;
  --vh: 1svh;
  /* Minimum touch target size (WCAG 2.5.5) */
  --min-touch-target: 44px;
  /* Glassmorphism effects */
  --glass-bg: rgba(255, 255, 255, 0.1);
  --glass-border: rgba(255, 255, 255, 0.2);
  --glass-blur: 12px;
  /* Common transition */
  --transition-fast: 0.2s ease;
  --transition-normal: 0.3s ease;
  /* Nav height */
  --nav-height: 56px;
}

/* Support check for small viewport units */
@supports (height: 100svh) {
  :root {
    --vh: 1svh;
  }
}

/* Base Reset and Typography */
html {
  -webkit-text-size-adjust: 100%;
  background: #000;
}

html,
body {
  width: 100%;
  min-height: 100%;
  margin: 0;
  overflow-x: hidden;
  overflow-y: auto;
  touch-action: manipulation;
  background: transparent;
  color: #fff;
}

body {
  overscroll-behavior: none;
}

/* iOS Safari dark mode safe areas */
@supports (-webkit-touch-callout: none) {
  html {
    margin: 0;
    background: #000;
    color: #fff;
  }

  body {
    margin: 0;
    background: transparent;
    color: #fff;
    padding-top: env(safe-area-inset-top);
    padding-bottom: env(safe-area-inset-bottom);
    overscroll-behavior: none;
  }
}

/* Tap highlight for dark mode */
* {
  -webkit-tap-highlight-color: rgba(255, 255, 255, 0.05);
}

/* Dark mode form controls */
input,
textarea,
select {
  background-color: #111;
  color: #fff;
  -webkit-appearance: none;
}

/* Reinforce dark mode for system */
@media (prefers-color-scheme: dark) {
  html {
    background: #000;
    color: #fff;
  }
  body {
    background: transparent;
    color: #fff;
  }
}

/* Main Content Area */
.content {
  margin-top: 56px;
  padding: 0 1rem;
  font-family: 'Inter', sans-serif;
  color: white;
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.content a {
  color: white;
  transition: color 0.3s ease;
}

.content a:hover {
  color: var(--wave-color);
}

/* Wave Canvas Background */
#wave-canvas {
  display: block;
  width: 100%;
  height: 100vh;
  height: 100svh; /* Mobile-friendly viewport height */
  position: fixed;
  top: 0;
  left: 0;
  z-index: -1;
  pointer-events: none;
}

/* Footer Styles */
footer {
  font-family: 'Inter', sans-serif;
  text-align: center;
  font-size: 0.7em;
  color: rgba(255, 255, 255, 0.3);
  position: fixed;
  bottom: 0;
  width: 100%;
  padding: 4px 0;
}

footer a {
  color: white;
  text-decoration: none;
  transition: color 0.3s ease;
}

footer a:hover {
  color: var(--wave-color);
}

/* Skip link for accessibility */
.skip-link {
  position: absolute;
  top: -40px;
  left: 0;
  background: #000;
  color: #fff;
  padding: 8px 16px;
  z-index: 1000;
  text-decoration: none;
  font-family: 'Inter', sans-serif;
  font-size: 0.9rem;
  border-radius: 0 0 4px 0;
  transition: top 0.3s ease;
}

.skip-link:focus {
  top: 0;
  outline: 2px solid var(--wave-color);
  outline-offset: 2px;
}

/* Focus styles for keyboard navigation */
.content a:focus {
  outline: 2px solid var(--wave-color);
  outline-offset: 2px;
}

footer a:focus {
  outline: 2px solid var(--wave-color);
  outline-offset: 2px;
}

/* Nuclear subdomain gradient background */
.nuclear-gradient-bg {
  background: linear-gradient(-45deg, #0ea5e9, #14b8a6, #06b6d4, #10b981, #0284c7, #0d9488) !important;
  background-size: 400% 400% !important;
  animation: nuclear-gradient 15s ease infinite;
}

@keyframes nuclear-gradient {
  0% { background-position: 0% 50%; }
  25% { background-position: 50% 100%; }
  50% { background-position: 100% 50%; }
  75% { background-position: 50% 0%; }
  100% { background-position: 0% 50%; }
}