/* Scroll-driven Visual Effects */

/* ── Scroll Progress Bar ── */
.scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 2px;
  width: 0%;
  background: linear-gradient(90deg, #a78bfa, #67e8f9);
  z-index: 10000;
  pointer-events: none;
  will-change: width;
  transition: width 0.05s linear;
}

/* ── Section Color Transitions ── */
:root {
  --scroll-bg-r: 0;
  --scroll-bg-g: 0;
  --scroll-bg-b: 0;
  --scroll-bg-a: 0;
}

body::after {
  content: '';
  position: fixed;
  inset: 0;
  background: rgba(
    var(--scroll-bg-r),
    var(--scroll-bg-g),
    var(--scroll-bg-b),
    var(--scroll-bg-a)
  );
  pointer-events: none;
  z-index: -1;
  will-change: background;
}

/* ── Parallax Elements ── */
.gallery-item img,
.hero-bg-slide {
  will-change: transform;
}

[data-parallax-title] {
  will-change: transform;
  transition: transform 0.1s linear;
}

[data-parallax-img] {
  will-change: transform;
  transition: transform 0.15s linear;
  overflow: hidden;
}

/* ── Text Split Animation ── */
.split-lines {
  overflow: hidden;
}
.split-lines .line-wrap {
  overflow: hidden;
  display: block;
}
.split-lines .line-inner {
  display: block;
  transform: translateY(110%);
  opacity: 0;
  transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1),
              opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform, opacity;
}
.split-lines.revealed .line-inner {
  transform: translateY(0);
  opacity: 1;
}

/* ── Audio-Reactive Effects ── */
:root {
  --audio-bass: 0;
  --audio-mid: 0;
  --audio-high: 0;
  --audio-energy: 0;
  --audio-pulse: 1;
}

/* Scroll progress bar glows with bass */
.scroll-progress {
  box-shadow: 0 0 calc(var(--audio-bass) * 25px) rgba(167, 139, 250, var(--audio-bass));
}

/* Section divider waves breathe with audio */
.section-divider svg {
  transform: scaleY(calc(1 + var(--audio-energy) * 0.6));
  transform-origin: bottom;
  transition: transform 0.15s ease-out;
}

/* Cursor blob reacts to energy */
.cursor-blob {
  transform: translate(-50%, -50%) scale(calc(1 + var(--audio-energy) * 0.8));
}

/* Sense cards — dramatic glow on mid */
.sense-card {
  box-shadow: 0 0 calc(var(--audio-mid) * 80px) rgba(107, 71, 240, calc(var(--audio-mid) * 0.8));
  transition: box-shadow 0.15s ease-out;
}

/* Hero h1 — big pulsing glow */
.hero h1 {
  text-shadow: 
    0 0 calc(var(--audio-energy) * 80px) rgba(167, 139, 250, calc(var(--audio-energy) * 0.9)),
    0 0 calc(var(--audio-bass) * 120px) rgba(107, 71, 240, calc(var(--audio-bass) * 0.4));
  transition: text-shadow 0.15s ease-out;
}

/* Nav logo — glow on highs */
.nav-ai {
  text-shadow: 0 0 calc(var(--audio-high) * 20px) rgba(124, 91, 245, calc(var(--audio-high) * 0.8));
  transition: text-shadow 0.1s ease-out;
}

/* Gallery images glow on bass */
.gallery-item img {
  box-shadow: 0 0 calc(var(--audio-bass) * 30px) rgba(107, 71, 240, calc(var(--audio-bass) * 0.5));
  transition: box-shadow 0.15s ease-out;
}

/* Hand-drawn underlines — thick pulse */
.hand-drawn-underline svg path {
  stroke-width: calc(8 + var(--audio-energy) * 24);
  transition: stroke-width 0.15s ease-out;
}

/* Cards glow on bass */
.style-card,
.skill-card {
  box-shadow: 0 0 calc(var(--audio-bass) * 40px) rgba(107, 71, 240, calc(var(--audio-bass) * 0.5));
  transition: box-shadow 0.15s ease-out;
}

/* Section backgrounds subtly shift */
.full-section {
  background-color: rgba(
    calc(107 * var(--audio-bass)),
    calc(71 * var(--audio-mid)),
    calc(240 * var(--audio-high)),
    calc(var(--audio-energy) * 0.03)
  );
  transition: background-color 0.3s ease-out;
}

/* Avatar ring pulses */
.avatar-ring {
  filter: drop-shadow(0 0 calc(var(--audio-energy) * 20px) rgba(124, 91, 245, 0.7));
  transition: filter 0.15s ease-out;
}

/* ── Dark mode adjustments ── */
[data-theme="dark"] .scroll-progress {
  opacity: 0.85;
}