/* resonance.css — NOIR signature motif
 * Concentric "sound rings" that gently pulse outward, echoing a speaker
 * driver / waveform. Authored for NOIR (audio brand); reused in the logo
 * mark and the hero. Source: hand-built for this project.
 * Honours prefers-reduced-motion (rings hold static).
 */

/* Logo mark — rings breathe slowly */
.brand__ring--1 { animation: res-breathe 4.5s var(--ease) infinite; }
.brand__ring--2 { animation: res-breathe 4.5s var(--ease) infinite .6s; }
.brand:hover .brand__ring { stroke: var(--brass-hi); }

@keyframes res-breathe {
  0%, 100% { opacity: .55; transform: scale(.9); }
  50%      { opacity: 1;   transform: scale(1); }
}

/* Hero resonance emitter — expanding rings behind the product */
.resonance {
  position: absolute; z-index: -1; inset: 0; display: grid; place-items: center;
  pointer-events: none;
}
.resonance__ring {
  position: absolute; width: 46%; aspect-ratio: 1; border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--brass) 40%, transparent);
  animation: res-emit 5s ease-out infinite;
  opacity: 0;
}
.resonance__ring:nth-child(2) { animation-delay: 1.25s; }
.resonance__ring:nth-child(3) { animation-delay: 2.5s; }
.resonance__ring:nth-child(4) { animation-delay: 3.75s; }

@keyframes res-emit {
  0%   { transform: scale(.4); opacity: 0; }
  15%  { opacity: .7; }
  100% { transform: scale(2.1); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .brand__ring--1, .brand__ring--2, .resonance__ring { animation: none; }
  .brand__ring { opacity: .8; }
  .resonance__ring { opacity: .18; transform: scale(1.3); }
  .resonance__ring:nth-child(3), .resonance__ring:nth-child(4) { display: none; }
}