/* ============================================
   CadenceCache · Custom styles
   ============================================ */

html { scroll-behavior: smooth; }

body {
  font-family: 'Space Grotesk', system-ui, sans-serif;
  font-feature-settings: 'ss01', 'cv11';
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.font-display { font-family: 'Plus Jakarta Sans', system-ui, sans-serif; }

/* —— Glass navigation bar ——————————————————— */
#navbar {
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  background: rgba(11, 10, 31, 0.0);
}
#navbar.is-scrolled {
  background: rgba(11, 10, 31, 0.7);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

/* —— Active nav link ———————————————————————— */
[data-nav].is-active {
  color: white;
  background: rgba(255, 255, 255, 0.07);
}

/* —— Floating animation ——————————————————————— */
@keyframes float {
  0%, 100% { transform: rotate(-6deg) translateY(0); }
  50%      { transform: rotate(-6deg) translateY(-8px); }
}
@keyframes float-slow {
  0%, 100% { transform: rotate(8deg) translateY(0); }
  50%      { transform: rotate(8deg) translateY(6px); }
}
.animate-float      { animation: float 6s ease-in-out infinite; }
.animate-float-slow { animation: float-slow 9s ease-in-out infinite; }

/* —— Spectrum breathing ——————————————————————— */
@keyframes spectrum {
  0%, 100% { transform: scaleY(0.4); }
  50%      { transform: scaleY(1); }
}
#heroSpectrum > span {
  display: inline-block;
  transform-origin: bottom;
  animation: spectrum 1.1s ease-in-out infinite;
}
#heroSpectrum > span:nth-child(1) { animation-delay: 0.00s; }
#heroSpectrum > span:nth-child(2) { animation-delay: 0.10s; }
#heroSpectrum > span:nth-child(3) { animation-delay: 0.20s; }
#heroSpectrum > span:nth-child(4) { animation-delay: 0.30s; }
#heroSpectrum > span:nth-child(5) { animation-delay: 0.40s; }
#heroSpectrum > span:nth-child(6) { animation-delay: 0.50s; }
#heroSpectrum > span:nth-child(7) { animation-delay: 0.60s; }
#heroSpectrum > span:nth-child(8) { animation-delay: 0.70s; }

/* —— Scroll reveal ——————————————————————————— */
.reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.7s ease, transform 0.7s ease;
  will-change: opacity, transform;
}
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* —— Hero progress loop ————————————————————— */
@keyframes hero-progress {
  0%   { width: 5%;  }
  100% { width: 100%; }
}
#heroProgress {
  animation: hero-progress 14s linear infinite;
}

/* —— Beat indicator ————————————————————————— */
@keyframes beat-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(94, 234, 212, 0.6); }
  50%      { box-shadow: 0 0 0 6px rgba(94, 234, 212, 0); }
}
#beatDot.is-off { background: #555 !important; animation: none; }
#beatDot        { animation: beat-pulse 1.07s ease-out infinite; }
#beatDot.beat-2 { animation-duration: 0.535s; }
#beatDot.beat-half { animation-duration: 2.14s; }

/* —— Scrollbar ————————————————————————————— */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: #0b0a1f; }
::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #ff6b9d, #a78bfa);
  border-radius: 8px;
  border: 2px solid #0b0a1f;
}
::-webkit-scrollbar-thumb:hover { background: linear-gradient(180deg, #ffb86b, #ff6b9d); }

/* —— Text selection ————————————————————————— */
::selection { background: #ff6b9d; color: #0b0a1f; }

/* —— Reduced-motion preference ————————————————— */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  html { scroll-behavior: auto; }
}

/* —— Small-screen tweaks —————————————————————— */
@media (max-width: 640px) {
  .font-display.text-7xl { font-size: 3rem; }
}