/* Resonance: the layer sits inside the section. Hero: above the content (the veil hides the text until the reveal).
   Background: behind the content, above the section's own background. */
.rsn-on { position: relative; }
.rsn-on.rsn-full { min-height: 100vh; min-height: 100svh; }
.rsn-bg { isolation: isolate; }
.rsn-layer { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.rsn-hero > .rsn-layer { z-index: 5; }
.rsn-bg > .rsn-layer { z-index: -1; }
.rsn-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.rsn-hide-drift > .drift-bg__field { display: none; }

.rsn-glint { position: absolute; opacity: 0; transform: translate(-50%, -50%); }
.rsn-glint svg { position: absolute; inset: 0; width: 100%; height: 100%; mix-blend-mode: screen; }
.rsn-flare { position: absolute; left: 50%; top: 50%; width: 300%; height: 1px; transform: translate(-50%, -50%);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.85), transparent); }
.rsn-flare.rsn-v { width: 1px; height: 240%; background: linear-gradient(180deg, transparent, rgba(255,255,255,.8), transparent); }

/* On-screen controls. Placed by JS (corner + distances); colours and button style arrive as --rsn-* variables. */
.rsn-hud { position: absolute; z-index: 6; display: flex; flex-direction: column; align-items: flex-end; text-align: right; pointer-events: none;
  font: 10px/1.9 "DM Mono", ui-monospace, Menlo, monospace; letter-spacing: .16em; text-transform: uppercase; color: var(--rsn-t, rgba(226,245,231,.5));
  opacity: 0; transition: opacity 2.4s ease; }
.rsn-hud.rsn-bl, .rsn-hud.rsn-tl { align-items: flex-start; text-align: left; }
.rsn-hud.rsn-on-hud { opacity: 1; }
.rsn-hint { opacity: .64; }
.rsn-hud.rsn-m .rsn-hint { display: none; }
.rsn-hud .rsn-hint-m { display: none; }   /* phones' own hint */
.rsn-hud.rsn-m .rsn-hint.rsn-hint-m { display: block; }
/* Phones: up and down scrolls the page (and pinch zooms); sideways movement stirs the sand. */
.rsn-on.rsn-touch { touch-action: pan-y pinch-zoom; }

/* The sound button. Scoped tightly so theme button styles (Kadence's button:hover/:focus fill) can't leak in. */
.rsn-hud button.rsn-sound { -webkit-appearance: none; appearance: none; pointer-events: auto; display: inline-flex; align-items: center; gap: .8em;
  box-sizing: border-box; margin: 0; width: auto; height: auto; min-width: 0; min-height: 0; transform: none; text-decoration: none; text-shadow: none;
  line-height: 1.4; cursor: pointer; outline: none; white-space: nowrap;
  font-family: var(--rsn-bf); font-size: var(--rsn-bs); font-weight: var(--rsn-bw); letter-spacing: var(--rsn-bl); text-transform: var(--rsn-bc);
  color: var(--rsn-c); background: var(--rsn-f); border: var(--rsn-bdw) var(--rsn-bds) var(--rsn-l); border-radius: var(--rsn-r);
  padding: var(--rsn-py) var(--rsn-px); box-shadow: var(--rsn-sh); -webkit-backdrop-filter: var(--rsn-blur); backdrop-filter: var(--rsn-blur);
  transition: color .6s ease, background-color .6s ease, border-color .6s ease, box-shadow .6s ease; }
.rsn-hud .rsn-btns { display: flex; gap: 8px; }   /* speaker, then mute */
/* Each button's two words share one spot (the longer sets the width), left-aligned against the icon: no shifting. */
.rsn-hud .rsn-sound-t { display: inline-grid; justify-items: start; text-align: left; }
.rsn-hud .rsn-sound-t > span { grid-area: 1 / 1; }
.rsn-hud .rsn-sound[aria-pressed="true"] .rsn-l0, .rsn-hud .rsn-sound[aria-pressed="false"] .rsn-l1 { visibility: hidden; }
.rsn-hud > * + .rsn-btns { margin-top: 8px; }
.rsn-hud button.rsn-sound:hover, .rsn-hud button.rsn-sound:focus-visible {
  color: var(--rsn-ch); background: var(--rsn-fh); border-color: var(--rsn-lh); box-shadow: var(--rsn-shh); }
/* While the sound plays (stays lit on hover too). */
.rsn-hud button.rsn-sound[aria-pressed="true"] {
  color: var(--rsn-co, var(--rsn-ch)); background: var(--rsn-fo, var(--rsn-fh)); border-color: var(--rsn-lo, var(--rsn-lh)); box-shadow: var(--rsn-sho, var(--rsn-shh)); }
.rsn-hud button.rsn-sound:focus-visible { outline: 1px solid currentColor; outline-offset: 3px; }
/* Muted site, mute button shown: greyed out, does nothing. */
.rsn-hud button.rsn-sound:disabled, .rsn-hud button.rsn-sound:disabled:hover { opacity: .38; cursor: default;
  color: var(--rsn-c); background: var(--rsn-f); border-color: var(--rsn-l); box-shadow: var(--rsn-sh); }
.rsn-hud .rsn-icon-only .rsn-sound-t, .rsn-hud .rsn-icon-lamponly .rsn-sound-t, .rsn-hud.rsn-discreet .rsn-sound-t { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }

.rsn-hud .rsn-wave { display: block; flex: none; width: 2em; height: .9em; overflow: hidden; }
.rsn-hud .rsn-icon-only .rsn-wave { width: 2.6em; height: 1.2em; }
.rsn-wave path { fill: none; stroke: currentColor; stroke-width: 1.2; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.rsn-wave .rsn-amp { transform-box: view-box; transform-origin: 50% 50%; transform: scaleY(.06); transition: transform 1.4s cubic-bezier(.3,.7,.2,1); }
.rsn-sound:hover .rsn-wave .rsn-amp, .rsn-sound:focus-visible .rsn-wave .rsn-amp { transform: scaleY(.3); }
.rsn-sound[aria-pressed="true"] .rsn-wave .rsn-amp { transform: scaleY(1); }
.rsn-wave .rsn-run { animation: rsn-run 2.4s linear infinite; animation-play-state: paused; }
.rsn-sound[aria-pressed="true"] .rsn-wave .rsn-run { animation-play-state: running; }
@keyframes rsn-run { to { transform: translateX(12px); } }
@media (prefers-reduced-motion: reduce) { .rsn-wave .rsn-run { animation: none; } }

/* On air: the lamp is a dim ring while the sound is off; while it is on it lights, with a slow tally-light breath. */
.rsn-hud .rsn-lamp { display: block; flex: none; width: .7em; height: .7em; box-sizing: border-box; border-radius: 50%;
  border: 1px solid currentColor; opacity: .55; transition: opacity .6s ease, background-color .6s ease, box-shadow .6s ease; }
.rsn-sound:hover .rsn-lamp, .rsn-sound:focus-visible .rsn-lamp { opacity: .85; }
.rsn-sound[aria-pressed="true"] .rsn-lamp { opacity: 1; border-color: transparent; background: currentColor;
  box-shadow: var(--rsn-halo, 0 0 3px 1px var(--rsn-lamp)); animation: rsn-tally 2.8s ease-in-out infinite; }
/* Discreet: both buttons pared back to their icons (the wave, the light), no boxes, quiet until hovered. */
.rsn-hud.rsn-discreet button.rsn-sound, .rsn-hud.rsn-discreet button.rsn-sound:hover, .rsn-hud.rsn-discreet button.rsn-sound[aria-pressed="true"] {
  background: transparent; border-color: transparent; box-shadow: none; padding: 4px 2px; -webkit-backdrop-filter: none; backdrop-filter: none; }
.rsn-hud.rsn-discreet button.rsn-sound { opacity: .7; transition: opacity .6s ease; }
.rsn-hud.rsn-discreet button.rsn-sound:hover, .rsn-hud.rsn-discreet button.rsn-sound:focus-visible { opacity: 1; }
.rsn-hud.rsn-discreet .rsn-btns { gap: 14px; }
@keyframes rsn-tally { 50% { opacity: .7; box-shadow: var(--rsn-halo-dim, 0 0 2px 0 var(--rsn-lamp)); } }
@media (prefers-reduced-motion: reduce) { .rsn-sound[aria-pressed="true"] .rsn-lamp { animation: none; } }