/* radio.css: KCC RADIO (radio.js). The radio is a prop standing in the parade: a cardboard boombox covered in hot-pink
   felt, a kraft handle, a chrome antenna, two dark felt speakers and a Kick-green dial window reading KCC 95.4. radio.js
   pins #radio to the right balustrade and sets its font-size to a tenth of its width, so everything below is in em and
   scales with the painting. At rest its running stitch is pink on pink (like KCC Night's buttons); hover, focus and
   playing light the thread Kick green. While it plays the dial glows on the beat (about 125 bpm), the needle drifts
   and the speakers thump: CSS only. The bubble (#rdPop) is a cardboard notification card that radio.js places right
   above the radio, its tail pointing down at it, holding the YouTube player (320x180), the now-playing line, PLAY /
   PAUSE and a link out. Built from the kit in style.css (cb-btn, --cb-*) + depth.css (--dp-*). */
#radio{position:fixed;left:0;top:0;z-index:5;width:10em;height:7.2em;font-size:9px;visibility:hidden;
  --rd-pink:#ff3fa4;--rd-pink-dk:#8e1660;--rd-thread:#ff9ccf;--rd-glow:0}
#radio.placed{visibility:visible}
#radio.docked{visibility:visible;left:auto;top:auto;right:24px;bottom:84px;font-size:10px}
#radio:is(:hover,:focus-within,.open,.on-air){--rd-thread:#7dff45;--rd-glow:1}

.rd-set{position:relative;display:block;width:100%;height:100%;padding:0;border:0;background:none;cursor:pointer;font:inherit;color:inherit;
  rotate:-2.5deg;transform-origin:50% 100%;transition:translate .18s ease-out,rotate .25s;
  filter:drop-shadow(-.45em .55em .4em rgba(4,2,20,.62)) drop-shadow(0 0 calc(var(--rd-glow) * .7em) rgba(83,252,24,calc(var(--rd-glow) * .45)))}
.rd-set:hover{translate:0 -.15em;rotate:-1deg}
.rd-set:active{translate:0 .05em}
.rd-set:focus-visible{outline:none}
.rd-set:focus-visible .rd-body{outline:.16em solid var(--cb-kick);outline-offset:.25em}

/* the handle: a kraft cardboard strip bent over the top */
.rd-handle{position:absolute;left:2.5em;top:.15em;width:5em;height:1.75em;box-sizing:border-box;border:.42em solid #c88e52;border-bottom:0;border-radius:1.1em 1.1em 0 0;
  box-shadow:inset .08em .08em 0 rgba(255,226,170,.5),-.06em -.06em 0 #6b3f1a}
/* the antenna: chrome, leaning back, a little bead on top */
.rd-ant{position:absolute;left:8.25em;top:-1.55em;width:.16em;height:3.2em;border-radius:.1em;transform-origin:50% 100%;rotate:34deg;
  background:linear-gradient(90deg,#8b8698,#f4f0ff 45%,#6f6a7c)}
.rd-ant::after{content:'';position:absolute;left:50%;top:-.22em;width:.38em;height:.38em;margin-left:-.19em;border-radius:50%;background:radial-gradient(circle at 35% 35%,#fff,#b9b4c6 50%,#5a5566)}

/* the body: hot-pink felt on a cardboard box (the kraft cut edge shows underneath), a satin rim, a running stitch */
.rd-body{position:absolute;left:0;right:0;top:1.55em;bottom:.42em;display:flex;align-items:center;gap:.32em;padding:0 .42em;box-sizing:border-box;
  border:.2em solid transparent;border-radius:.75em;
  background:var(--dp-felt) padding-box,linear-gradient(100deg,rgba(60,0,30,.18),transparent 45%,rgba(255,220,240,.22)) padding-box,linear-gradient(#ff3f9e,#ff3f9e) padding-box,
    repeating-linear-gradient(62deg,#ffc8ea 0 .9px,var(--rd-pink) .9px 2.2px,var(--rd-pink-dk) 2.2px 3.2px) border-box;
  box-shadow:0 .38em 0 #9a6431,0 .38em 0 .04em #5c3a18,inset 1px -1px 0 rgba(30,0,16,.38),inset -1px 1px 0 rgba(255,235,245,.25)}
.rd-body::after{content:'';position:absolute;inset:.16em;border:.1em dashed var(--rd-thread);border-radius:.55em;pointer-events:none;transition:border-color .2s;
  filter:drop-shadow(0 0 calc(var(--rd-glow) * .18em) rgba(83,252,24,calc(var(--rd-glow) * .9)))}

/* the speakers: dark felt cones in a pink ring */
.rd-spk{position:relative;flex:none;width:2.7em;height:2.7em;border-radius:50%;
  background:radial-gradient(circle,#4a2d64 0 16%,#1d0f2e 18% 46%,#2e1a44 48% 60%,#140a20 62% 100%);
  box-shadow:0 0 0 .16em #8e1660,0 0 0 .26em #ffc8ea,inset -.2em .25em .35em rgba(0,0,0,.65),inset .1em -.1em .1em rgba(255,200,234,.18)}
.rd-spk i{position:absolute;inset:34%;border-radius:50%;background:radial-gradient(circle at 40% 38%,#6a4a88,#251536 70%);box-shadow:0 0 .1em rgba(0,0,0,.6)}

/* the middle: the dial window over two knobs and the ON AIR bulb */
.rd-mid{flex:1;display:flex;flex-direction:column;gap:.3em;min-width:0}
.rd-dial{position:relative;height:1.8em;border-radius:.3em;overflow:hidden;background:linear-gradient(#0d2412,#06140a);
  box-shadow:inset -.12em .16em .3em rgba(0,0,0,.8),0 0 0 .1em #4a0a2c,0 0 calc(.25em + var(--rd-glow) * .35em) rgba(83,252,24,calc(.25 + var(--rd-glow) * .3))}
.rd-ticks{position:absolute;left:.2em;right:.2em;top:.18em;height:.42em;
  background:repeating-linear-gradient(90deg,rgba(125,255,69,.75) 0 .06em,transparent .06em .32em),linear-gradient(rgba(125,255,69,.4),rgba(125,255,69,.4)) 0 100%/100% .05em no-repeat}
.rd-freq{position:absolute;left:0;right:0;bottom:.12em;text-align:center;white-space:nowrap;font:700 .78em/1 'Barlow Condensed',sans-serif;letter-spacing:.08em;color:#9dff6a;
  text-shadow:0 0 .25em rgba(83,252,24,.95),0 0 .6em rgba(83,252,24,.5)}
.rd-needle{position:absolute;left:61%;top:.08em;bottom:.08em;width:.09em;border-radius:.05em;background:#ff4fb0;box-shadow:0 0 .2em #ff3fa4}
.rd-knobs{display:flex;align-items:center;justify-content:space-between;padding:0 .3em}
.rd-knob{width:.95em;height:.95em;border-radius:50%;background:radial-gradient(circle at 38% 34%,#fff2c0 0 8%,#d9a441 30%,#6b4a16 80%);box-shadow:-.06em .1em .1em rgba(0,0,0,.55)}
.rd-air{width:.48em;height:.48em;border-radius:50%;background:radial-gradient(circle at 35% 35%,#6a7a62,#253020);box-shadow:inset 0 0 0 .06em rgba(0,0,0,.4)}

/* ON AIR: the bulb lit, the dial pulsing, the needle drifting, the speakers thumping */
#radio.on-air .rd-air{background:radial-gradient(circle at 35% 35%,#eaffdf,var(--cb-kick) 45%,#1d5c10);box-shadow:0 0 .3em var(--cb-kick),0 0 .7em rgba(83,252,24,.6)}
@keyframes rd-pulse{from{--rd-glow:.55}to{--rd-glow:1.25}}
@keyframes rd-wob{0%,100%{left:61%}22%{left:59.5%}48%{left:62.4%}71%{left:60.2%}}
@keyframes rd-thump{0%,100%{scale:1}12%{scale:1.07}}
@property --rd-glow{syntax:'<number>';inherits:true;initial-value:0}
@media (prefers-reduced-motion:no-preference){
  #radio.on-air{animation:rd-pulse .48s ease-in-out infinite alternate}
  #radio.on-air .rd-needle{animation:rd-wob 2.6s ease-in-out infinite}
  #radio.on-air .rd-spk i{animation:rd-thump .48s ease-out infinite}
}

/* ---- the bubble: a cardboard notification card above the radio, its tail pointing down at it ---- */
.rd-pop{position:fixed;left:0;top:0;z-index:9;width:346px;box-sizing:border-box;padding:0 0 10px;border-radius:9px;
  font:12px/1 'Barlow Condensed','Roboto Slab',sans-serif;--tail:50%;
  background:var(--cb-fiber) padding-box,var(--cb-grain) padding-box,var(--cb-light) padding-box,linear-gradient(#f6e8c8,#f6e8c8) padding-box,var(--cb-flutes) border-box;
  border:4px solid transparent;box-shadow:-8px 12px 14px rgba(10,4,30,.5),0 0 0 1.5px rgba(255,63,164,.6),0 0 18px rgba(255,63,164,.38);
  transform-origin:var(--tail) 100%;animation:rd-up .26s cubic-bezier(.25,1.4,.45,1) both}
.rd-pop[hidden]{display:none}
/* the tail: a cardboard wedge out of the bottom edge, at the radio's middle */
.rd-pop::after{content:'';position:absolute;left:calc(var(--tail) - 11px);bottom:-13px;width:20px;height:20px;rotate:45deg;
  background:var(--cb-fiber),linear-gradient(#f6e8c8,#f6e8c8);border:4px solid #9a6431;border-top-color:transparent;border-left-color:transparent;
  box-shadow:4px 4px 6px rgba(10,4,30,.35)}
@keyframes rd-up{from{opacity:0;translate:0 12px;scale:.94}to{opacity:1;translate:0 0;scale:1}}
.rd-head{display:flex;align-items:center;gap:9px;padding:8px 8px 7px 12px;border-radius:4px 4px 0 0;color:#1e0214;
  background:var(--cb-fiber),var(--cb-grain),linear-gradient(100deg,rgba(40,4,20,.14),transparent 40%,rgba(255,220,240,.3)),#ff3fa4;
  box-shadow:0 3px 0 #8e1660}
.rd-call{font:17px/1 'Homecoming Parade','NOC Varsity',sans-serif;letter-spacing:.08em}
.rd-st{font:700 11.5px/1 'Barlow Condensed',sans-serif;letter-spacing:.12em;padding:.3em .5em .25em;border-radius:2px;background:#1e0214;color:var(--cb-kick)}
.rd-x{margin-left:auto;width:26px;height:26px;border:0;border-radius:50%;cursor:pointer;font:700 19px/1 'Barlow Condensed',sans-serif;color:#1e0214;
  background:rgba(255,255,255,.28);box-shadow:inset 0 0 0 1.5px rgba(30,2,20,.35)}
.rd-x:hover{background:rgba(255,255,255,.5)}
.rd-x:focus-visible{outline:2px solid #1e0214;outline-offset:2px}
/* the screen: a dark recess pressed into the board; the player sits in it at full size (320x180, never shrunk) */
.rd-screen{margin:12px auto 0;width:320px;min-height:180px;padding:5px;border-radius:6px;background:#140a1c;
  box-shadow:inset -3px 4px 7px rgba(0,0,0,.6),inset 2px -2px 0 rgba(255,244,220,.12),0 1px 0 1px rgba(255,244,220,.5)}
.rd-screen iframe{display:block;width:320px;height:180px;border:0;border-radius:3px;background:#000}
.rd-now{margin:14px 12px 0;display:flex;flex-direction:column;gap:3px;color:#22160b}
.rd-np{font:700 10.5px/1 'Barlow Condensed',sans-serif;letter-spacing:.16em;color:#8e1660}
.rd-song{font:600 14.5px/1.2 'Zilla Slab','Bree Serif',serif}
.rd-ctl{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:11px 12px 0}
.rd-play.cb-btn{--cb-face:var(--cb-kick);--cb-edge-c:#1d5c10;--cb-text:#0f220b;--cb-score:rgba(15,40,10,.5);--rot:-1deg;
  display:inline-flex;align-items:center;gap:.55em;cursor:pointer;font:15px/1 'Homecoming Parade','NOC Varsity',sans-serif;letter-spacing:.1em;padding:.6em 1.15em .5em}
/* KCC Night dresses every .cb-btn in hot pink: PLAY stays the radio's Kick-green board (its thread lights pink) */
html[data-theme="kccnight"] #rdPop #rdPlay.rd-play.cb-btn{--cb-face:var(--cb-kick);--cb-edge-c:#1d5c10;--cb-text:#0f220b;
  --kt-lit-lt:#ffe6f3;--kt-lit:#ff4fb0;--kt-lit-dk:#b8146c;--kt-glow:255,63,164;--kt-dim-lt:#b8ff96;--kt-dim:#53fc18;--kt-dim-dk:#1d5c10;text-shadow:none}
.rd-play:disabled{filter:grayscale(.8) brightness(.9);cursor:default}
/* the icon: a play triangle, two bars while it plays */
.rd-ico{width:0;height:0;border-style:solid;border-width:.42em 0 .42em .7em;border-color:transparent transparent transparent currentColor}
#radio.on-air ~ .rd-pop .rd-ico{width:.62em;height:.8em;border:0;background:linear-gradient(90deg,currentColor 0 34%,transparent 34% 66%,currentColor 66%)}
.rd-yt{font:700 12.5px/1 'Barlow Condensed',sans-serif;letter-spacing:.1em;color:#8e1660;text-decoration:none;border-bottom:1.5px dashed currentColor;padding-bottom:2px}
.rd-yt:hover{color:#c21877}
.rd-yt:focus-visible{outline:2px solid #8e1660;outline-offset:3px}
.rd-msg{margin:8px 12px 0;font:italic 500 13px/1.3 'Zilla Slab',serif;color:#8a3e0c}
.rd-msg:empty{display:none}
@media (prefers-reduced-motion:reduce){.rd-pop{animation:none}.rd-set{transition:none}}