/* ambient.css — NOIR v2 "come alive" layer
 * Ambient depth + micro-motion added after a competitive review of premium
 * audio/DTC storefronts (Master & Dynamic, Nothing, B&O). Everything here is
 * decorative and GPU-cheap; all motion collapses under prefers-reduced-motion.
 * Source: hand-built for this project.
 */

/* --- 1. Film grain + warm vignette: kills banding on the dark ground,
       adds the "expensive print" depth. Fixed, behind content. --- */
.ambient {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
}
.ambient__glow {
  position: absolute; inset: 0;
  background:
    radial-gradient(90% 60% at 50% -8%, color-mix(in srgb, var(--brass) 9%, transparent), transparent 60%),
    radial-gradient(70% 50% at 92% 8%, color-mix(in srgb, var(--ember) 5%, transparent), transparent 55%);
}
.ambient__grain {
  position: absolute; inset: -50%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity: .035; mix-blend-mode: overlay;
}

/* --- 2. Animated equalizer (announcement bar / audio signature) --- */
.eq { display: inline-flex; align-items: flex-end; gap: 2px; height: 12px; }
.eq span {
  width: 2px; height: 100%; background: currentColor; border-radius: 1px; transform-origin: bottom;
  animation: eq-bounce 1.1s ease-in-out infinite;
}
.eq span:nth-child(2) { animation-delay: .22s; }
.eq span:nth-child(3) { animation-delay: .44s; }
.eq span:nth-child(4) { animation-delay: .13s; }
@keyframes eq-bounce { 0%,100% { transform: scaleY(.3); } 50% { transform: scaleY(1); } }

/* --- 3. Shine sweep across the primary CTA on hover --- */
.btn--primary { position: relative; overflow: hidden; }
.btn--primary::after {
  content: ""; position: absolute; top: 0; left: -75%; width: 50%; height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.45), transparent);
  transform: skewX(-18deg); opacity: 0;
}
.btn--primary:hover::after { animation: shine .8s ease; }
@keyframes shine { 0% { left: -75%; opacity: 0; } 20% { opacity: 1; } 100% { left: 130%; opacity: 0; } }

/* --- 4. Focus reveal: imagery resolves soft -> sharp on scroll-in --- */
.focus-in .media-frame img,
.focus-in.media-frame img,
.focus-in .card__media img,
.focus-in .gallery__main img { filter: blur(14px); transform: scale(1.06); transition: filter .9s var(--ease), transform .9s var(--ease); }
.focus-in.is-in .media-frame img,
.focus-in.is-in.media-frame img,
.focus-in.is-in .card__media img,
.focus-in.is-in .gallery__main img { filter: blur(0); transform: scale(1); }

@media (prefers-reduced-motion: reduce) {
  .eq span { animation: none; transform: scaleY(.6); }
  .btn--primary:hover::after { animation: none; }
  .focus-in .media-frame img, .focus-in .card__media img, .focus-in .gallery__main img { filter: none; transform: none; transition: none; }
}