/* ==========================================================================
   ijoo.org — radio page
   ========================================================================== */

.rdhero{
  display:flex; align-items:flex-end; justify-content:space-between;
  flex-wrap:wrap; gap:22px; padding:52px 0 26px;
}

.rdhero__name{
  font-size:clamp(40px,8vw,76px); letter-spacing:-.02em; line-height:1.04;
  padding-bottom:.07em;
  background:linear-gradient(96deg,#fff 6%,var(--cyan) 46%,var(--mag) 96%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.rdhero__sub{ display:flex; align-items:center; gap:14px; margin:10px 0 0; flex-wrap:wrap; }
.rdhero__bit{ font-size:11.5px; letter-spacing:.14em; color:var(--faint); }

.pill{
  display:inline-flex; align-items:center; gap:7px;
  padding:4px 12px; border-radius:3px;
  font-size:10.5px; letter-spacing:.18em; font-weight:700;
  border:1px solid var(--line); color:var(--faint);
}
.pill::before{ content:""; width:7px; height:7px; border-radius:50%; background:currentColor; }
.pill[data-state="on"]{ color:var(--cyan); border-color:rgba(34,240,255,.4); background:rgba(34,240,255,.07); }
.pill[data-state="on"]::before{ animation:rdpulse 2.2s ease-out infinite; }
.pill[data-state="off"]{ color:var(--red,#ff5555); border-color:rgba(255,85,85,.4); background:rgba(255,85,85,.07); }
.pill[data-state="err"]{ color:var(--amber); border-color:rgba(255,179,64,.4); }
@keyframes rdpulse{ 0%{ box-shadow:0 0 0 0 rgba(34,240,255,.6);} 70%{ box-shadow:0 0 0 8px rgba(34,240,255,0);} 100%{ box-shadow:0 0 0 0 rgba(34,240,255,0);} }

/* ---------------- stage ---------------- */

.rstage{ padding-bottom:70px; display:flex; flex-direction:column; gap:20px; }

.np{
  display:grid; grid-template-columns:260px minmax(0,1fr); gap:26px; align-items:center;
  padding:24px; background:rgba(12,3,20,.62); border:1px solid var(--line); border-radius:4px;
}

.np__art{
  position:relative; width:260px; aspect-ratio:1/1; overflow:hidden;
  border:1px solid var(--line); border-radius:4px; background:#120424;
}
.np__art img{ width:100%; height:100%; object-fit:cover; }
.np__artfall{ position:absolute; inset:0; display:grid; place-items:center; }

/* spinning record, shown until artwork arrives */
.np__disc{
  width:112px; height:112px; border-radius:50%;
  background:
    radial-gradient(circle at 50% 50%, #1a0b26 0 22%, transparent 22%),
    repeating-radial-gradient(circle at 50% 50%, rgba(255,47,208,.5) 0 1px, transparent 1px 7px),
    radial-gradient(circle at 50% 50%, #2a1038 0 62%, #150726 62% 100%);
  border:1px solid rgba(255,47,208,.3);
}
body.is-playing .np__disc{ animation:spin 6s linear infinite; }
@keyframes spin{ to{ transform:rotate(360deg); } }

/* little equaliser */
.np__vu{ position:absolute; left:14px; bottom:14px; display:flex; align-items:flex-end; gap:3px; height:20px; }
.np__vu i{ width:3px; background:var(--cyan); height:20%; border-radius:1px; opacity:.85; }
body.is-playing .np__vu i{ animation:eq .9s ease-in-out infinite alternate; }
.np__vu i:nth-child(2){ animation-delay:.15s; } .np__vu i:nth-child(3){ animation-delay:.3s; }
.np__vu i:nth-child(4){ animation-delay:.45s; } .np__vu i:nth-child(5){ animation-delay:.6s; }
@keyframes eq{ from{ height:18%; } to{ height:100%; } }

.np__label{ margin:0 0 12px; font-size:10px; letter-spacing:.22em; color:var(--mag); }
.np__artist{ margin:0 0 4px; font-size:clamp(17px,2.4vw,23px); color:var(--text); }
.np__title{ margin:0 0 6px; font-size:clamp(20px,3vw,30px); color:var(--cyan); font-weight:700; line-height:1.25; }
.np__album{ margin:0 0 20px; font-size:12.5px; color:var(--faint); }
.np__album:empty{ display:none; }

.np__bar{ height:4px; background:rgba(255,47,208,.14); border-radius:3px; overflow:hidden; }
.np__bar i{
  display:block; height:100%; width:0%;
  background:linear-gradient(90deg,var(--cyan),var(--mag));
  box-shadow:0 0 12px var(--mag); transition:width .9s linear;
}
.np__times{
  display:flex; justify-content:space-between; margin:7px 0 0;
  font-size:11px; color:var(--faint);
}

/* ---------------- player ---------------- */

.rp{
  display:flex; align-items:center; gap:20px; flex-wrap:wrap;
  padding:18px 24px; background:rgba(12,3,20,.62);
  border:1px solid var(--line); border-radius:4px;
}

.rp__play{
  display:inline-flex; align-items:center; gap:12px; cursor:pointer;
  padding:12px 26px; font-family:var(--mono); font-size:13px; letter-spacing:.14em; font-weight:700;
  color:#0a0110; border:0; border-radius:3px;
  background:linear-gradient(90deg,var(--cyan),var(--vio));
  box-shadow:0 10px 30px -14px rgba(34,240,255,.7);
  transition:transform .18s, box-shadow .18s, filter .18s;
}
.rp__play:hover{ transform:translateY(-2px); filter:brightness(1.08); }
.rp__play:disabled{ opacity:.5; cursor:not-allowed; transform:none; }
.rp__icon{
  width:0; height:0; border-left:11px solid #0a0110;
  border-top:7px solid transparent; border-bottom:7px solid transparent;
}
.rp__play.is-playing .rp__icon{
  width:11px; height:13px; border:0;
  border-left:4px solid #0a0110; border-right:4px solid #0a0110;
}

.rp__vol{ display:flex; align-items:center; gap:10px; }
.rp__volicon{ font-size:10px; letter-spacing:.16em; color:var(--faint); }
.rp__vol input{
  -webkit-appearance:none; appearance:none; width:150px; height:4px; cursor:pointer;
  background:rgba(255,47,208,.16); border-radius:3px;
}
.rp__vol input::-webkit-slider-thumb{
  -webkit-appearance:none; appearance:none; width:14px; height:14px; border-radius:50%;
  background:var(--cyan); border:0; box-shadow:0 0 10px var(--cyan);
}
.rp__vol input::-moz-range-thumb{
  width:14px; height:14px; border-radius:50%; border:0;
  background:var(--cyan); box-shadow:0 0 10px var(--cyan);
}

.rp__note{ margin:0; font-size:11.5px; color:var(--faint); }
.rp__note.is-err{ color:var(--amber); }

/* ---------------- footer ---------------- */

/* this page has no ASCII art block, so the legal line carries its own top space */
.foot__solo{ padding-top:30px; }

/* ---------------- responsive ---------------- */

@media (max-width:760px){
  .np{ grid-template-columns:1fr; gap:20px; padding:18px; }
  .np__art{ width:100%; max-width:260px; margin-inline:auto; }
  .rdhero{ padding:38px 0 20px; }
  .rp{ padding:16px 18px; gap:14px; }
  .rp__vol input{ width:110px; }
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.001ms !important; transition-duration:.001ms !important; }
  body.is-playing .np__vu i{ height:60%; }
}