/* ================================================================
   HERO ANIMATIONS — rings, pulse dot, beat, masthead, wave drift
   ================================================================ */

/* Concentric ring emanation */
.ring {
  opacity: 0;
  animation: emanate 4s var(--ease) infinite;
}
.ring-1 { animation-delay: 0s; }
.ring-2 { animation-delay: 0.6s; }
.ring-3 { animation-delay: 1.2s; }
.ring-4 { animation-delay: 1.8s; }

@keyframes emanate {
  0%   { opacity: 0.9; transform: scale(0.92); }
  100% { opacity: 0;   transform: scale(1.08); }
}

/* Beat-reactive dot in hero source */
.hero-source .mark-dot {
  transform-origin: 110px 125px;
  transform: scale(calc(1 + var(--beat, 0) * 0.34));
  transition: transform 0.4s var(--ease);
  filter: drop-shadow(0 0 calc(20px * var(--beat, 0)) rgba(251,146,60,0.7));
}

/* Beat-reactive dot in nav brand mark */
.brand-mark .pulse-dot {
  transform-origin: 50px 57px;
  transform: scale(calc(1 + var(--beat, 0) * 0.28));
  transition: transform 0.4s var(--ease);
  filter: drop-shadow(0 0 calc(10px * var(--beat, 0)) rgba(251,146,60,0.65));
}

/* Hero masthead */
.hero-masthead {
  position: absolute;
  top: 90px; left: 0; right: 0;
  text-align: center;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--fg-quiet);
  z-index: 2;
}

/* Sound-source visualizer */
.hero-source {
  position: relative;
  width: 220px;
  height: 220px;
  margin-bottom: clamp(40px, 6vh, 64px);
}
.hero-source svg { width: 100%; height: 100%; }

/* Wave drift keyframes — used by .wave-divider in theme.css */
@keyframes drift {
  from { transform: translateX(-100vw); }
  to   { transform: translateX(0); }
}