/* RED CUP and RNB tape deck player (from red-cup-tape-deck.html). Used on the homepage and /listen. */
.tape .and{text-transform:none;font-style:italic;font-weight:700;font-size:.62em;vertical-align:.18em;letter-spacing:0}
.tape{margin-top:1.2rem;font-family:Montserrat,system-ui,sans-serif;color:#fff;text-align:left}
.tape{--red:#e3262f;--red-dk:#9e1219;--paper:#efe6d6;--ink:#1b1716}
.tape button:focus-visible,.tape input:focus-visible{outline:2px solid #fff;outline-offset:2px}
/* The wrapper is the size reference, so the deck scales with its own width (not the window) */
.rc-tape-wrap{container-type:inline-size;container-name:rcdeck;width:100%;max-width:1000px;scroll-margin-top:80px}
.tape{
  --s:1;                     /* scale unit */
  position:relative;width:100%;max-width:1000px;aspect-ratio:1000/290;
  container-type:inline-size;
  background:linear-gradient(180deg,#1d1a1a,#0f0d0d 60%,#181515);
  border-radius:2.2cqw;padding:2.2cqw 2.4cqw 0;
  box-shadow:0 30px 60px rgba(0,0,0,.65),inset 0 0 0 .25cqw #2c2727,inset 0 .4cqw .6cqw rgba(255,255,255,.06);
  user-select:none;
}
/* screws */
.tape .screw{position:absolute;width:2.2cqw;height:2.2cqw;border-radius:50%;
  background:radial-gradient(circle at 35% 35%,#8d8783,#3b3634 60%,#1a1716);box-shadow:0 0 0 .15cqw #0a0909}
.tape .screw::after{content:"";position:absolute;inset:44% 18%;background:#141110;border-radius:1px}
.tape .screw.tl{top:1cqw;left:1cqw}.tape .screw.tr{top:1cqw;right:1cqw}.tape .screw.bl{bottom:1cqw;left:1cqw}.tape .screw.br{bottom:1cqw;right:1cqw}

/* label */
.tape .label{position:relative;display:flex;height:17.5cqw;border-radius:1cqw;overflow:hidden;
  background:var(--red) radial-gradient(rgba(0,0,0,.18) 1px,transparent 1.4px) 0 0/.6cqw .6cqw;
  box-shadow:inset 0 0 2cqw rgba(0,0,0,.45)}
.tape .label .logo{flex:0 0 31%;display:flex;align-items:center;justify-content:center;padding:1cqw}
.tape .label .logo img{max-width:100%;max-height:15.5cqw;transform:rotate(-6deg);filter:drop-shadow(0 .4cqw .5cqw rgba(0,0,0,.45))}
.tape .label .right{flex:1;min-width:0;position:relative;padding:1.2cqw 1.6cqw 1.2cqw 0}
.tape .paper{position:relative;height:6.6cqw;background:var(--paper);border-radius:.4cqw;display:flex;align-items:stretch;
  box-shadow:0 .2cqw .4cqw rgba(0,0,0,.35);
  background-image:linear-gradient(transparent 92%,rgba(0,0,0,.55) 92%,rgba(0,0,0,.55) 94%,transparent 94%)}
.tape .paper .field{flex:1;min-width:0;padding:.6cqw 1.4cqw 0;position:relative}
.tape .paper .field + .field::before{content:"";position:absolute;left:0;top:1.2cqw;bottom:1.4cqw;width:.18cqw;background:var(--ink);transform:rotate(8deg)}
.tape .paper small{display:block;font:700 1.25cqw/1 Montserrat,sans-serif;color:var(--red-dk);letter-spacing:.05em}
.tape .paper .hand{font:3cqw/1.25 "Permanent Marker",cursive;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  text-transform:uppercase;transform:rotate(-1deg);transition:opacity .4s}
.tape .paper .side{flex:0 0 4cqw;font:3.4cqw/1 "Permanent Marker",cursive;color:var(--ink);display:flex;align-items:flex-end;padding-bottom:.6cqw}
.tape .onair{position:absolute;right:2cqw;bottom:1.1cqw;font:700 1.15cqw/1 Montserrat;letter-spacing:.12em;color:rgba(255,255,255,.85);text-transform:uppercase}
.tape .onair:empty{display:none}

/* window + reels */
.tape .window{position:absolute;left:0;right:3.6cqw;top:8.6cqw;bottom:1.2cqw;border-radius:1.4cqw;
  background:linear-gradient(180deg,rgba(40,30,30,.92),rgba(12,9,9,.96));
  box-shadow:inset 0 .3cqw 1cqw rgba(0,0,0,.9),0 0 0 .3cqw #0c0a0a;overflow:hidden;display:flex;align-items:center;justify-content:space-around;padding:0 6%}
.tape .window::after{content:"";position:absolute;inset:0;background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.07) 38%,transparent 46%);pointer-events:none}
.tapeband{position:absolute;left:20%;right:20%;top:50%;height:.25cqw;background:#3a2a24;opacity:.7}
.tape .ticks{position:absolute;left:41%;right:41%;top:50%;height:2cqw;transform:translateY(-50%);
  background:repeating-linear-gradient(90deg,rgba(255,255,255,.45) 0 .12cqw,transparent .12cqw 1.1cqw);
  -webkit-mask:linear-gradient(transparent 30%,#000 30% 70%,transparent 70%);mask:linear-gradient(transparent 30%,#000 30% 70%,transparent 70%)}
.tape .reel{position:relative;width:var(--d,9.5cqw);aspect-ratio:1;border-radius:50%;display:grid;place-items:center;
  background:radial-gradient(circle,#2b1b17 0 52%,#3b241d 53%,#1d1210 100%);
  box-shadow:0 0 0 .2cqw rgba(0,0,0,.6);transition:width 1.2s ease}
.tape .hub{width:7.2cqw;aspect-ratio:1;border-radius:50%;position:relative;
  background:radial-gradient(circle,#f1ece6 0 18%,var(--red) 19% 34%,#e9e2da 35% 60%,rgba(255,255,255,.55) 61% 100%);
  box-shadow:0 0 0 .3cqw rgba(255,255,255,.25),inset 0 0 .6cqw rgba(0,0,0,.4);
  animation:td-spin 2.4s linear infinite;animation-play-state:paused}
.tape .hub::before{content:"";position:absolute;inset:22%;border-radius:50%;
  background:conic-gradient(from 0deg,#fff 0 10deg,transparent 10deg 60deg,#fff 60deg 70deg,transparent 70deg 120deg,#fff 120deg 130deg,transparent 130deg 180deg,#fff 180deg 190deg,transparent 190deg 240deg,#fff 240deg 250deg,transparent 250deg 300deg,#fff 300deg 310deg,transparent 310deg);
  -webkit-mask:radial-gradient(circle,transparent 35%,#000 36%);mask:radial-gradient(circle,transparent 35%,#000 36%)}
.tape .hub::after{content:"";position:absolute;inset:44%;border-radius:50%;background:#2a2322}
.tape.playing .hub{animation-play-state:running}
@keyframes td-spin{to{transform:rotate(-360deg)}}

/* controls */
.tape .controls{display:flex;align-items:center;gap:2cqw;height:8.4cqw;margin-top:1.2cqw;padding:0 2.2cqw;border-radius:1.2cqw;
  background:linear-gradient(180deg,#191616,#0e0c0c);box-shadow:inset 0 0 0 .2cqw #2a2525}
.tape .live{display:flex;align-items:center;gap:.9cqw;font:700 1.7cqw/1 Montserrat;letter-spacing:.08em;padding-right:2cqw;border-right:.15cqw solid #333}
.tape .dot{width:1.5cqw;height:1.5cqw;border-radius:50%;background:var(--red);box-shadow:0 0 1cqw var(--red)}
.tape.playing .dot{animation:td-pulse 1.4s ease-in-out infinite}
@keyframes td-pulse{50%{opacity:.35;box-shadow:none}}
.tape .play{flex:0 0 auto;width:6.2cqw;height:6.2cqw;border-radius:50%;border:.35cqw solid var(--red);cursor:pointer;display:grid;place-items:center;
  background:radial-gradient(circle,#2a2424,#121010);box-shadow:0 0 1.6cqw rgba(227,38,47,.55),inset 0 .2cqw .4cqw rgba(255,255,255,.1);transition:transform .15s}
.tape .play:hover{transform:scale(1.05)}.tape .play:active{transform:scale(.96)}
.tape .play svg{width:2.6cqw;height:2.6cqw;fill:#fff}
.tape .play .i-pause{display:none}.tape.playing .play .i-play{display:none}.tape.playing .play .i-pause{display:block}
.tape .play.loading{animation:td-pulse 1s infinite}
.tape .bar{flex:1;height:1cqw;border-radius:1cqw;background:#3a3636;position:relative}
.tape .bar i{position:absolute;inset:0 auto 0 0;width:var(--p,0%);border-radius:inherit;background:linear-gradient(90deg,var(--red-dk),var(--red));box-shadow:0 0 1cqw rgba(227,38,47,.6);transition:width 1s linear}
.tape .bar i::after{content:"";position:absolute;right:-1.2cqw;top:50%;width:2.4cqw;height:2.4cqw;border-radius:50%;background:#f3f0ee;transform:translateY(-50%);box-shadow:0 .2cqw .5cqw rgba(0,0,0,.5)}
.tape .vol{display:flex;align-items:center;gap:1.4cqw;flex:0 0 32%;padding-left:2cqw;border-left:.15cqw solid #333}
.tape .vol button{background:none;border:0;padding:0;cursor:pointer;display:grid}
.tape .vol svg{width:2.6cqw;height:2.6cqw;fill:#ddd}
.tape .vol input{flex:1;-webkit-appearance:none;appearance:none;height:1cqw;border-radius:1cqw;cursor:pointer;
  background:linear-gradient(90deg,var(--red) var(--v,70%),#3a3636 var(--v,70%))}
.tape .vol input::-webkit-slider-thumb{-webkit-appearance:none;width:2.4cqw;height:2.4cqw;border-radius:50%;background:#f3f0ee;border:0;box-shadow:0 .2cqw .5cqw rgba(0,0,0,.5)}
.tape .vol input::-moz-range-thumb{width:2.4cqw;height:2.4cqw;border-radius:50%;background:#f3f0ee;border:0}
/* bottom notch of the cassette */
.tape .notch{margin:1.2cqw auto 0;width:58%;height:3.4cqw;border-radius:1cqw 1cqw 0 0;background:linear-gradient(180deg,#1b1818,#0d0b0b);
  box-shadow:inset 0 .2cqw 0 #2a2525;display:flex;justify-content:space-around;align-items:center;padding:0 10%}
.tape .notch span{width:2.2cqw;height:2.2cqw;border-radius:50%;background:#050404}
.tape .notch span:nth-child(2),.tape .notch span:nth-child(3){border-radius:.3cqw}
.tape .sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* phones: give the controls more room */
/* small decks (phones): bigger controls, no progress bar. Based on the deck's own width. */
@container rcdeck (max-width:560px){
  .tape{aspect-ratio:auto;padding-bottom:0}
  .tape .label{height:24cqw}
  .tape .label .logo{flex-basis:28%}.tape .label .logo img{max-height:20cqw}
  .tape .paper{height:10cqw}.tape .paper small{font-size:2cqw}.tape .paper .hand{font-size:4.4cqw}
  .tape .paper .side{display:none}
  .tape .window{top:12cqw}
  .tape .reel{--d:13cqw}.tape .hub{width:10cqw}
  .tape .controls{height:15cqw;gap:3cqw}
  .tape .live{font-size:3cqw}.tape .dot{width:2.6cqw;height:2.6cqw}
  .tape .play{width:11cqw;height:11cqw}.tape .play svg{width:4.4cqw;height:4.4cqw}
  .tape .bar{display:none}
  .tape .vol{flex:1}.tape .vol svg{width:5cqw;height:5cqw}.tape .vol input{height:1.8cqw}
  .tape .vol input::-webkit-slider-thumb{width:4.4cqw;height:4.4cqw}
  .tape .onair{font-size:2.2cqw}
  .tape .notch{height:5cqw}
}