/* ============================================================
   Journey-specific CSS — anything outside Tailwind's defaults.
   ============================================================ */

/* Keyframe animations */
@keyframes journeyScrollBounce {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(6px); }
}

@keyframes journeyCtaPulse {
  0%, 100% {
    box-shadow: 0 0 28px rgba(232,155,69,0.45),
                0 0 60px rgba(232,155,69,0.22);
  }
  50% {
    box-shadow: 0 0 40px rgba(232,155,69,0.85),
                0 0 90px rgba(232,155,69,0.45);
  }
}

@keyframes journeyDotPulse {
  0%, 100% { opacity: 0.6; transform: scale(0.9); }
  50%      { opacity: 1;   transform: scale(1.15); }
}

@keyframes journeyCueFade {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Mute button — class-based opacity so :hover can override.
 * The previous inline-style opacity:0.85 had specificity 1000 and
 * was beating Tailwind's hover:opacity-100 (specificity 10). */
.journey-mute-btn { opacity: 0.85; }
.journey-mute-btn:hover,
.journey-mute-btn:focus-visible { opacity: 1; }

/* Hide scrollbars on horizontal lanes */
.no-scrollbar {
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.no-scrollbar::-webkit-scrollbar { display: none; }

/* Reduced-motion fallback: stack stills, no canvas */
@media (prefers-reduced-motion: reduce) {
  .journey-scrub-canvas { display: none; }
  .journey-reduced-stack { display: flex; }
}
.journey-reduced-stack { display: none; }