/* RUMBLE RADIO (rebranded from COUCH FM, 2026-10-15): the engine's riso look in the colours of the station poster
   (art/rumble/key_a.png): cream paper, muted tomato red, dusty cobalt, sunflower, near-black. Only tokens change,
   plus the animated wordmark (brand/rumble.js). Muted on purpose (user: keep colours muted). */
:root {
  --ink: #1b1918;
  --ink-2: #252220;
  --ink-3: #322d2a;
  --smoke: #988e84;
  --pink: #d0573f;
  --pink-deep: #a8432f;
  --blue: #4a6fae;
  --blue-deep: #375590;
  --yellow: #e2b043;
  --yellow-deep: #c28f28;
  --mint: #6fa88a;
  --orange: #d97f45;
  --lilac: #9d8fc0;
  --red: #c64b3c;
  --good: #6fa88a;
  --bad: #c64b3c;
}

/* ---- the wordmark ---- */
.rr { display: block; height: auto; overflow: visible; transform: rotate(-1.4deg); }
.rr-home { width: min(82vw, 440px); margin: 0 auto; }
.rr-tvpair { width: min(44vw, 720px); }
.rr-tvlobby { width: min(28vw, 440px); }
.rr .rr-paper { fill: #eee2c7; }
.rr .rr-dots { fill: #c9a77a; opacity: .22; }
.rr .rr-wave { fill: none; stroke: #e2b043; stroke-width: 11; stroke-linecap: round; opacity: .9; }
.rr .rr-top { font: 700 15px/1 'Space Mono', monospace; letter-spacing: .32em; fill: #4a6fae; }
.rr .rr-air circle { fill: #d0573f; }
.rr .rr-air text { font: 700 15px/1 'Space Mono', monospace; letter-spacing: .24em; fill: #d0573f; }
.rr .rr-l text { font: 400 112px/1 'Bowlby One', 'Anton', Impact, sans-serif; text-anchor: middle; }
.rr .rr-r { fill: #d0573f; }
.rr .rr-b { fill: #4a6fae; }
.rr .rr-dial { fill: #1b1918; }
.rr .rr-scale rect { fill: #ebdfc6; opacity: .55; }
.rr .rr-nums text { font: 700 12px/1 'Space Mono', monospace; fill: #ebdfc6; opacity: .7; text-anchor: middle; }
.rr .rr-radio { font: 700 40px/1 'Space Mono', monospace; fill: #e2b043; text-anchor: middle; }
.rr .rr-needle rect { fill: #d0573f; }

@media (prefers-reduced-motion: no-preference) {
  /* tune in: the needle sweeps up the band, the letters flicker through static and lock on */
  .rr .rr-needle { animation: rr-tune 1.7s cubic-bezier(.25, .9, .3, 1.15) both, rr-drift 11s ease-in-out 1.7s infinite; }
  .rr .rr-l { animation: rr-static .95s steps(1) both, rr-bob 2.4s ease-in-out .95s infinite; animation-delay: 0s, calc(.95s + var(--i) * .13s); }
  .rr .rr-b { animation: rr-misreg 11s steps(1) 1.7s infinite; }
  .rr .rr-wave { animation: rr-scroll 1.5s linear infinite, rr-amp 11s ease-in-out infinite; transform-origin: 320px 150px; }
  .rr .rr-radio { animation: rr-fadein .9s ease-out .5s both; }
  .rr .rr-air circle { animation: rr-blink 1.6s steps(1) infinite; }
  /* the Chromecast: tune in once, then hold still (no endless repaints on a small GPU) */
  html.lite .rr .rr-needle { animation: rr-tune 1.7s cubic-bezier(.25, .9, .3, 1.15) both; }
  html.lite .rr .rr-l { animation: rr-static .95s steps(1) both; }
  html.lite .rr .rr-b, html.lite .rr .rr-wave, html.lite .rr .rr-air circle { animation: none; }
}
@keyframes rr-tune { 0% { transform: translateX(-252px); } 100% { transform: translateX(0); } }
/* drift a little, then lose the signal and find it again (with the blue ink jumping, see rr-misreg) */
@keyframes rr-drift { 0%, 100% { transform: translateX(0); } 30% { transform: translateX(4px); } 60% { transform: translateX(-3px); }
  80% { transform: translateX(0); } 83% { transform: translateX(-38px); } 88% { transform: translateX(26px); } 93% { transform: translateX(-6px); } }
@keyframes rr-misreg { 0%, 82%, 95% { transform: translate(0, 0); } 84% { transform: translate(-9px, 3px); } 87% { transform: translate(7px, -4px); } 90% { transform: translate(-3px, 2px); } }
@keyframes rr-amp { 0%, 80%, 96%, 100% { transform: scaleY(1); } 84% { transform: scaleY(.15); } 88% { transform: scaleY(1.6); } }
@keyframes rr-static {
  0% { opacity: 0; transform: translate(0, 0); } 11% { opacity: .7; transform: translate(-6px, 2px); } 22% { opacity: .15; transform: translate(5px, -3px); }
  33% { opacity: .9; transform: translate(-2px, 0); } 44% { opacity: .3; transform: translate(7px, 2px); } 55% { opacity: 1; transform: translate(-4px, -1px); }
  66% { opacity: .55; transform: translate(2px, 1px); } 77% { opacity: 1; transform: translate(-1px, 0); } 100% { opacity: 1; transform: translate(0, 0); } }
@keyframes rr-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
@keyframes rr-scroll { to { translate: -80px 0; } }
@keyframes rr-fadein { from { opacity: 0; } to { opacity: 1; } }
@keyframes rr-blink { 0%, 55% { opacity: 1; } 56%, 100% { opacity: .2; } }