body {
  font-family: var(--font-body);
  background-color: var(--obsidian);
  color: var(--text-primary);
  overflow-x: hidden;
  position: relative;
}

/* === Canvas Layers === */
#matrix-canvas {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -2;
  pointer-events: none;
}

#particle-canvas {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  pointer-events: none;
}

/* === Typography === */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  font-weight: 700;
  line-height: 1.2;
  color: var(--text-primary);
}

h1 { font-size: clamp(2rem, 5vw, 3.5rem); }
h2 { font-size: clamp(1.5rem, 4vw, 2.5rem); }
h3 { font-size: clamp(1.25rem, 3vw, 1.75rem); }
h4 { font-size: clamp(1rem, 2.5vw, 1.25rem); }

.font-display {
  font-family: var(--font-display);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.font-mono {
  font-family: var(--font-mono);
}

.text-neon {
  color: var(--neon-green);
  text-shadow: var(--glow-text);
}

.text-gold {
  color: var(--gold);
}

.text-silver {
  color: var(--silver);
}

.text-emerald {
  color: var(--emerald);
}

/* === Layout === */
.container {
  width: 100%;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--space-lg);
}

.section {
  padding: var(--space-4xl) 0;
}

.page-content {
  padding-top: calc(var(--nav-height) + var(--space-2xl));
  min-height: 100vh;
}

/* === Links === */
a:hover {
  color: var(--neon-green);
}

/* === Scrollbar === */
::-webkit-scrollbar {
  width: 6px;
}

::-webkit-scrollbar-track {
  background: var(--obsidian);
}

::-webkit-scrollbar-thumb {
  background: var(--emerald-dark);
  border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--neon-green);
}

/* === Selection === */
::selection {
  background: var(--emerald-dark);
  color: var(--neon-green);
}

/* === Utility === */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

/* ============================================
   BACKGROUND TEXTURE LAYERS — The living skin
   Lore-inspired: dragon scales, circuit traces,
   emerald energy, Tokyo Ghoul smoke
   ============================================ */

/* Serpent Scale Canvas — rendered by scales.js */
#scales-canvas {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  pointer-events: none;
}

/* Circuit Trace Overlay — cybersecurity neural network */
.bg-circuit-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  pointer-events: none;
  opacity: 0.12;
  background:
    /* Main circuit traces — horizontal */
    repeating-linear-gradient(90deg,
      transparent, transparent 98px,
      rgba(0,255,65,0.15) 98px, rgba(0,255,65,0.15) 100px),
    /* Main circuit traces — vertical */
    repeating-linear-gradient(0deg,
      transparent, transparent 98px,
      rgba(0,255,65,0.1) 98px, rgba(0,255,65,0.1) 100px),
    /* Sub-traces — finer grid */
    repeating-linear-gradient(90deg,
      transparent, transparent 23px,
      rgba(0,255,65,0.04) 23px, rgba(0,255,65,0.04) 25px),
    repeating-linear-gradient(0deg,
      transparent, transparent 23px,
      rgba(0,255,65,0.03) 23px, rgba(0,255,65,0.03) 25px),
    /* Circuit nodes at major intersections */
    radial-gradient(circle 3px at 100px 100px, rgba(0,255,65,0.25) 0%, transparent 100%),
    /* Smaller nodes at sub-intersections */
    radial-gradient(circle 1.5px at 25px 25px, rgba(0,255,65,0.12) 0%, transparent 100%);
  background-size:
    100px 100px, 100px 100px,
    25px 25px, 25px 25px,
    100px 100px, 25px 25px;
}

/* Horizontal scanlines + neon sweep beam */
.bg-scanline {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  pointer-events: none;
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 2px,
    rgba(0, 0, 0, 0.03) 2px,
    rgba(0, 0, 0, 0.03) 4px
  );
}

.bg-scanline::after {
  content: '';
  position: absolute;
  left: 0;
  width: 100%;
  height: 8px;
  background: linear-gradient(
    to bottom,
    transparent,
    rgba(0, 255, 65, 0.08),
    rgba(0, 255, 65, 0.04),
    transparent
  );
  animation: scanline 6s linear infinite;
  will-change: top;
}

/* Dark vignette — throne room shadow edges */
.bg-vignette {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  pointer-events: none;
  background:
    /* Central clearing */
    radial-gradient(ellipse at center, transparent 40%, rgba(10,10,10,0.5) 100%),
    /* Corner shadows — throne room pillars */
    radial-gradient(ellipse at 0% 0%, rgba(10,10,10,0.3), transparent 50%),
    radial-gradient(ellipse at 100% 0%, rgba(10,10,10,0.3), transparent 50%),
    radial-gradient(ellipse at 0% 100%, rgba(10,10,10,0.3), transparent 50%),
    radial-gradient(ellipse at 100% 100%, rgba(10,10,10,0.3), transparent 50%);
}

/* Smoke / fog drift — Tokyo Ghoul kagune mist */
.bg-smoke {
  position: fixed;
  top: -20%;
  left: -20%;
  width: 140%;
  height: 140%;
  z-index: -1;
  pointer-events: none;
  opacity: 0.15;
  background:
    radial-gradient(ellipse 600px 400px at 25% 30%, rgba(0,255,65,0.5), transparent 70%),
    radial-gradient(ellipse 500px 350px at 75% 65%, rgba(27,94,32,0.4), transparent 65%),
    radial-gradient(ellipse 800px 500px at 50% 50%, rgba(0,255,65,0.15), transparent 60%),
    radial-gradient(ellipse 200px 100px at 15% 70%, rgba(0,255,65,0.35), transparent 80%),
    radial-gradient(ellipse 180px 90px at 85% 25%, rgba(0,255,65,0.3), transparent 80%);
  animation: smoke-drift 25s ease-in-out infinite alternate;
  will-change: transform;
}

@keyframes smoke-drift {
  0%   { transform: translate(0, 0) scale(1) rotate(0deg); }
  25%  { transform: translate(-4%, 2%) scale(1.03) rotate(0.5deg); }
  50%  { transform: translate(2%, -3%) scale(0.97) rotate(-0.3deg); }
  75%  { transform: translate(-2%, 1%) scale(1.02) rotate(0.2deg); }
  100% { transform: translate(3%, -1%) scale(1.01) rotate(-0.5deg); }
}

/* Earth Sovereign energy lines — the veins of Zamin
   Diagonal earth-current lines with pulsing nodes */
.bg-grid-lines {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  pointer-events: none;
  opacity: 0.08;
  background:
    /* Primary energy lines — diagonal */
    repeating-linear-gradient(
      135deg,
      transparent,
      transparent 80px,
      rgba(0,255,65,0.4) 80px,
      rgba(0,255,65,0.4) 81px
    ),
    /* Cross-energy lines — opposite diagonal */
    repeating-linear-gradient(
      45deg,
      transparent,
      transparent 120px,
      rgba(27,94,32,0.3) 120px,
      rgba(27,94,32,0.3) 121px
    ),
    /* Energy nodes at intersections */
    radial-gradient(circle 3px at 80px 80px, rgba(0,255,65,0.5) 0%, transparent 100%),
    radial-gradient(circle 4px at 0px 0px, rgba(0,255,65,0.35) 0%, transparent 100%);
  background-size: 160px 160px, 160px 160px, 160px 160px, 160px 160px;
  animation: energy-pulse 8s ease-in-out infinite alternate;
  will-change: opacity;
}

@keyframes energy-pulse {
  0%   { opacity: 0.06; }
  50%  { opacity: 0.1; }
  100% { opacity: 0.07; }
}

/* === Dragon Scale Texture (applied to sections) === */
.dragon-scale-bg {
  position: relative;
}

.dragon-scale-bg::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0.12;
  pointer-events: none;
  background:
    radial-gradient(ellipse 30px 22px at 30px 22px, transparent 17px, rgba(0,255,65,0.3) 17px, rgba(0,255,65,0.3) 18px, transparent 18px),
    radial-gradient(ellipse 30px 22px at 30px 22px, transparent 17px, rgba(0,255,65,0.2) 17px, rgba(0,255,65,0.2) 18px, transparent 18px);
  background-size: 60px 44px, 60px 44px;
  background-position: 0 0, 30px 22px;
}

/* === Breathing Glow on sections === */
.section {
  padding: var(--space-4xl) 0;
  position: relative;
}

.section::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 10%;
  right: 10%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(0,255,65,0.15), transparent);
  animation: section-divider-breathe 4s ease-in-out infinite;
}

@keyframes section-divider-breathe {
  0%, 100% { opacity: 0.3; }
  50% { opacity: 1; }
}

/* === Nav CTA button (Realize) === */
.nav-cta {
  color: var(--gold) !important;
  border: 1px solid rgba(255, 215, 0, 0.3);
  padding: var(--space-xs) var(--space-md) !important;
  border-radius: var(--border-radius);
  transition: all var(--transition-base) !important;
}

.nav-cta:hover {
  color: var(--gold) !important;
  background: rgba(255, 215, 0, 0.1);
  box-shadow: 0 0 15px rgba(255, 215, 0, 0.3);
  border-color: var(--gold);
}

/* === Typing cursor effect === */
.typing-cursor::after {
  content: '_';
  animation: blink-cursor 1s step-end infinite;
}

/* === Portal card CTA variant === */
.portal-card-cta {
  border-color: rgba(255, 215, 0, 0.2) !important;
}

.portal-card-cta:hover {
  border-color: var(--gold) !important;
  box-shadow: 0 0 30px rgba(255, 215, 0, 0.4) !important;
}

/* === Pulse glow on icons === */
.pulse-glow {
  animation: neon-pulse 3s ease-in-out infinite;
}