/* Self-hosted fonts — eliminates external Google Fonts dependency (Sonar #38) */
@font-face {
  font-family: 'Orbitron';
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url('../assets/fonts/orbitron.woff2') format('woff2');
}

@font-face {
  font-family: 'Rajdhani';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('../assets/fonts/rajdhani-300.woff2') format('woff2');
}

@font-face {
  font-family: 'Rajdhani';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../assets/fonts/rajdhani-400.woff2') format('woff2');
}

@font-face {
  font-family: 'Rajdhani';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../assets/fonts/rajdhani-600.woff2') format('woff2');
}

@font-face {
  font-family: 'Share Tech Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../assets/fonts/share-tech-mono.woff2') format('woff2');
}

:root {
  --neon-cyan: #00f2ff;
  --neon-pink: #ff00ff;
  --neon-purple: #9d00ff;
  --dark-bg: #0a0a0c;
  --dark-card: #151518;
  --text-gray: #d1d1d1;
  --text-dim: #d1d1d1;
  --heading-color: #fff;
  --nav-bg: rgba(10, 10, 12, 0.95);
  --modal-bg-1: rgba(10, 10, 12, 0.98);
  --modal-bg-2: rgba(17, 17, 22, 0.96);
  --overlay-bg: rgba(7, 7, 11, 0.96);
  --crt-intensity: 0;
}

/* ── Light theme ─────────────────────────────────────────────── */
:root[data-theme="light"] {
  /* Darker accent variants — the bright neon hues fail WCAG contrast
     against light backgrounds (e.g. cyan ~1.2:1 on white). Purple is
     left as-is since it already passes (~5.5:1). */
  --neon-cyan: #008099;
  --neon-pink: #b3009e;
  --dark-bg: #f0f0f5;
  --dark-card: #ffffff;
  --text-gray: #3a3a45;
  --text-dim: #5f5f6e;
  --heading-color: #16161d;
  --nav-bg: rgba(255, 255, 255, 0.9);
  --modal-bg-1: rgba(255, 255, 255, 0.98);
  --modal-bg-2: rgba(240, 240, 248, 0.97);
  --overlay-bg: rgba(245, 245, 250, 0.97);
}

html {
  scroll-behavior: smooth;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: 'Rajdhani', sans-serif;
  background-color: var(--dark-bg);
  color: var(--text-gray);
  line-height: 1.6;
  overflow-x: hidden;
  /* Prevents elastic over-scroll bounce on mobile Chrome */
  overscroll-behavior-y: contain;
  transition: background-color 0.3s ease, color 0.3s ease;
}

@media (prefers-reduced-motion: reduce) {
  body { transition: none; }
}

.skip-link {
  position: fixed;
  top: 12px;
  left: 12px;
  transform: translateY(-160%);
  background: #000;
  color: var(--neon-cyan);
  border: 2px solid var(--neon-cyan);
  padding: 8px 12px;
  text-decoration: none;
  font-family: 'Share Tech Mono', monospace;
  z-index: 10001;
  transition: transform 0.2s ease;
}

.skip-link:focus-visible {
  transform: translateY(0);
}

a:focus-visible,
button:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--neon-cyan);
  outline-offset: 3px;
  box-shadow: 0 0 0 4px rgba(0, 242, 255, 0.2);
}

.cyber-grid {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: 
    linear-gradient(rgba(0, 242, 255, 0.1) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 242, 255, 0.1) 1px, transparent 1px);
  background-size: 50px 50px;
  animation: grid-move 20s linear infinite;
  pointer-events: none;
  z-index: 0;
}

@keyframes grid-move {
  0% { transform: translateY(0); }
  100% { transform: translateY(50px); }
}

.section-title {
  font-family: 'Orbitron', sans-serif;
  font-size: 3rem;
  font-weight: 700;
  text-align: center;
  margin-bottom: 60px;
  color: var(--heading-color);
  text-shadow: 0 0 10px var(--neon-cyan);
}

.title-bracket {
  color: var(--neon-pink);
  font-family: 'Share Tech Mono', monospace;
}

/* Visually hidden utility — accessible off-screen text */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ── Scroll entrance animations ─────────────────────────────── */
@media (prefers-reduced-motion: no-preference) {
  .scroll-animate {
    opacity: 0;
    transform: translateY(32px);
    /* ease-out-quint: fast entry, smooth deceleration — feels snappy not floaty */
    transition: opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1),
                transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
    will-change: transform, opacity;
  }

  .scroll-animate.is-visible {
    opacity: 1;
    transform: translateY(0);
  }

  /* Project grid — stagger cards as they enter the viewport */
  .projects-grid .scroll-animate:nth-child(2) { transition-delay: 0.06s; }
  .projects-grid .scroll-animate:nth-child(3) { transition-delay: 0.12s; }
  .projects-grid .scroll-animate:nth-child(4) { transition-delay: 0.18s; }
  .projects-grid .scroll-animate:nth-child(5) { transition-delay: 0.24s; }
  .projects-grid .scroll-animate:nth-child(6) { transition-delay: 0.30s; }
  .projects-grid .scroll-animate:nth-child(7) { transition-delay: 0.36s; }

  /* Stagger skill categories */
  .skills-categories .scroll-animate:nth-child(2) { transition-delay: 0.09s; }
  .skills-categories .scroll-animate:nth-child(3) { transition-delay: 0.18s; }
  .skills-categories .scroll-animate:nth-child(4) { transition-delay: 0.27s; }
}

/* Manual motion overrides must win regardless of OS setting */
.reduced-motion .scroll-animate,
.motion-off .scroll-animate {
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
}

@media (prefers-reduced-motion: reduce) {
  html:focus-within {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  .cyber-grid,
  .status-dot,
  .scroll-indicator {
    animation: none !important;
  }
}

body::after {
  content: '';
  position: fixed;
  inset: 0;
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 2px,
    rgba(0, 0, 0, 0.15) 2px,
    rgba(0, 0, 0, 0.15) 4px
  );
  opacity: var(--crt-intensity);
  pointer-events: none;
  z-index: 9998;
  transition: opacity 0.4s ease;
}