/* === DARK / LIGHT MODE === */
body.dark {
  --bg: #2a0050; /* warna solid dominan dari gradasi gelap */
  --text: #e9dbff;
  --text-primary: #e9dbff;
  --text-secondary: #c7b3ff;
  --navbar-bg: rgba(56, 0, 99, 0.85);
  --navbar-text: #e9dbff;
  --noise-opacity: 0.05;
}

body.light {
  --bg: #e9d7ff; /* warna solid dominan dari gradasi terang */
  --text: #4b0076;
  --text-primary: #4b0076;
  --text-secondary: #7a3dbf;
  --navbar-bg: rgba(203, 168, 255, 0.85);
  --navbar-text: #4b0076;
  --noise-opacity: 0.03;
}

body {
  background: none;
  color: var(--text);
  background-attachment: fixed;
  transition: color 0.4s ease;
  position: relative;
  overflow-x: hidden;
}

/* Static gradient background */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  background: var(--bg);
  z-index: -2;
  transition: background 0.6s ease;
  will-change: background;
}

/* Noise overlay aesthetic */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  background-image: url('https://www.transparenttextures.com/patterns/noise.png');
  opacity: var(--noise-opacity);
  pointer-events: none;
  z-index: -1;
  will-change: opacity;
  transform: translateZ(0);
}

/* Text Styles */
.text-primary,
.headline {
  color: var(--text-primary);
  transition: color 0.4s ease;
}

.text-secondary,
.intro {
  color: var(--text-secondary);
  transition: color 0.4s ease;
}

.highlight {
  color: #a855f7;
}

.container h1,
.container p {
  transition: color 0.4s ease;
  color: var(--text-secondary);
}

/* Social Links */
.socials a {
  color: var(--text);
  transition: color 0.3s ease;
}

.socials a:hover {
  color: var(--highlight);
}

/* Glow Transisi Theme */
body.transitioning::after {
  content: "";
  position: fixed;
  inset: 0;
  background: radial-gradient(circle at center, rgba(168, 85, 247, 0.2), transparent 70%);
  z-index: 9999;
  pointer-events: none;
  animation: themeSwitchGlow 0.6s ease-out forwards;
  will-change: opacity, transform;
}

@keyframes themeSwitchGlow {
  0% {
    opacity: 1;
    transform: scale(1);
  }
  100% {
    opacity: 0;
    transform: scale(2);
  }
}

/* Accessibility - Reduce motion */
@media (prefers-reduced-motion: reduce) {
  * {
    transition: none !important;
    animation: none !important;
  }
}