/* ============================================================
   BASE — Variables, Reset, Typography
   ============================================================ */

:root {
  --neon-pink:   #ff2d78;
  --neon-cyan:   #00f0ff;
  --neon-purple: #bf5cff;
  --neon-gold:   #ffd700;
  --neon-green:  #39ff14;

  --bg-deep:   #04050d;
  --bg-mid:    #080b18;
  --bg-card:   rgba(255,255,255,0.04);
  --bg-card-h: rgba(255,255,255,0.08);

  --glass-border: rgba(255,255,255,0.1);
  --glass-blur:   20px;

  --text-primary:   #f0f0ff;
  --text-secondary: rgba(240,240,255,0.55);
  --text-accent:    var(--neon-cyan);

  --font-display: 'Orbitron', monospace;
  --font-body:    'Raleway', sans-serif;
  --font-italic:  'Noto Serif Display', serif;

  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring:   cubic-bezier(0.34, 1.56, 0.64, 1);

  /* Spacing scale */
  --sp-xs: 8px;
  --sp-sm: 16px;
  --sp-md: 24px;
  --sp-lg: 40px;
  --sp-xl: 80px;
  --sp-2xl: 120px;
}

/* ---- Reset ---- */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  user-select: none !important;
  -webkit-user-select: none !important;
  -moz-user-select: none !important;
  -ms-user-select: none !important;
  -webkit-user-drag: none !important;
  -webkit-tap-highlight-color: transparent !important;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-body);
  background: var(--bg-deep);
  color: var(--text-primary);
  overflow-x: hidden;
  cursor: none !important;
}

a {
  text-decoration: none;
  color: inherit;
  cursor: none !important;
}

button {
  border: none;
  background: none;
  cursor: none !important;
}

input, textarea, select {
  cursor: none !important;
}

img, svg {
  pointer-events: none;
}

/* ---- Scrollbar ---- */
::-webkit-scrollbar { width: 0; }

/* ---- Glass card base ---- */
.glass-card {
  background: var(--bg-card);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  border: 1px solid var(--glass-border);
  border-radius: 20px;
  transition: background .3s, box-shadow .3s, transform .3s var(--ease-spring);
}
.glass-card:hover {
  background: var(--bg-card-h);
  box-shadow: 0 8px 40px rgba(0,0,0,.4), 0 0 0 1px rgba(255,255,255,0.06);
}

/* ---- Hidden utility ---- */
.hidden { display: none !important; }

/* ---- Reveal animation ---- */
.reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity .9s var(--ease-out-expo), transform .9s var(--ease-out-expo);
}
.reveal.visible {
  opacity: 1;
  transform: none;
}

/* ---- Section base ---- */
section {
  padding: var(--sp-2xl) var(--sp-md);
  max-width: 1100px;
  margin: 0 auto;
}
#hero, #romantic {
  max-width: 100%;
  padding-left: 0;
  padding-right: 0;
}

.section-label {
  font-family: var(--font-display);
  font-size: 10px;
  letter-spacing: 5px;
  color: var(--neon-cyan);
  text-transform: uppercase;
  margin-bottom: 16px;
}

.section-title {
  font-family: var(--font-display);
  font-size: clamp(28px, 5vw, 42px);
  font-weight: 700;
  margin-bottom: 60px;
  background: linear-gradient(135deg, #fff, var(--text-secondary));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ---- Keyframes ---- */
@keyframes spin {
  to { transform: rotate(360deg); }
}
@keyframes pulse-text {
  0%, 100% { opacity: .4 }
  50%       { opacity: 1  }
}

/* ---- Touch device cursor fix ---- */
@media (hover: none) {
  html, body, a, button, input, textarea, select,
  .nav-link, .hero-btn, .social-card, .romantic-card,
  .glass-card, .ctrl-btn, .track-item, .footer-easter,
  #music-bubble, .pw-btn, .pw-music-toggle, .memory-card,
  .terminal-submit, .memory-delete, .audio-reactive-toggle,
  .nav-hamburger, .nav-mobile-link, .nav-mobile-close {
    cursor: auto !important;
  }
  #cursor-glow, #cursor-dot { display: none !important; }
  .terminal-textarea { cursor: text !important; }
  #pw-input          { cursor: text !important; }
  #volume-slider     { cursor: pointer !important; }
}