/* XZONE Radio: the live player on /studios/radio/ and the pop-out window. */

.xzr{
  position:relative; isolation:isolate; overflow:hidden; margin-top:26px;
  border:1px solid var(--hair); border-radius:var(--r-lg);
  background:
    radial-gradient(110% 150% at 0% 0%, rgba(188,28,52,0.26), transparent 56%),
    radial-gradient(90% 120% at 100% 100%, rgba(126,18,38,0.22), transparent 60%),
    var(--surface);
  padding:clamp(22px,3vw,38px);
}
.xzr__main{ display:flex; align-items:center; gap:clamp(16px,2.4vw,30px); }

.xzr__play{
  flex:none; position:relative; width:clamp(72px,8vw,96px); aspect-ratio:1; border-radius:50%;
  border:0; padding:0; cursor:pointer; -webkit-appearance:none; appearance:none;
  display:grid; place-items:center; background:var(--accent); color:var(--ink);
  box-shadow:0 16px 40px rgba(188,28,52,0.4), inset 0 1px 0 rgba(255,255,255,0.28), inset 0 -2px 0 rgba(0,0,0,0.18);
  transition:transform 220ms var(--ease), box-shadow 220ms var(--ease);
}
.xzr__play:hover{ transform:scale(1.04); box-shadow:0 20px 48px rgba(188,28,52,0.5), inset 0 1px 0 rgba(255,255,255,0.28), inset 0 -2px 0 rgba(0,0,0,0.18); }
.xzr__play:active{ transform:scale(0.97); }
.xzr__play:focus-visible{ outline:2px solid var(--ink); outline-offset:5px; }
.xzr__play svg{ width:36%; height:36%; fill:currentColor; }
.xzr__i-play{ margin-left:8%; }
.xzr__i-pause{ display:none; }
.xzr[data-state="playing"] .xzr__i-play, .xzr[data-state="connecting"] .xzr__i-play{ display:none; }
.xzr[data-state="playing"] .xzr__i-pause, .xzr[data-state="connecting"] .xzr__i-pause{ display:block; }
.xzr__spin{ position:absolute; inset:-6px; border-radius:50%; border:2px solid transparent; border-top-color:var(--ink); opacity:0; pointer-events:none; }
.xzr[data-state="connecting"] .xzr__spin{ opacity:1; animation:xzr-spin 0.9s linear infinite; }

.xzr__txt{ flex:1; min-width:0; }
.xzr__station{ display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin:0; font-size:12.5px; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); }
.xzr__badge{ display:inline-flex; align-items:center; gap:7px; font-size:11px; letter-spacing:.12em; padding:4px 10px; border-radius:var(--r-pill); border:1px solid var(--hair); color:var(--muted); }
.xzr__badge:empty{ display:none; }
.xzr__badge[data-on="live"]{ background:var(--accent); border-color:transparent; color:var(--ink); }
.xzr__badge[data-on="live"]::before{ content:""; width:6px; height:6px; border-radius:50%; background:currentColor; animation:xzr-pulse 1.6s ease-in-out infinite; }
.xzr__now{ margin:10px 0 0; font-size:clamp(22px,2.7vw,36px); font-weight:600; letter-spacing:-0.026em; line-height:1.14; color:var(--ink); overflow-wrap:anywhere; }
.xzr__show, .xzr__next{ margin:8px 0 0; font-size:14.5px; line-height:1.5; color:var(--muted); }
.xzr__next{ margin-top:2px; }
.xzr__show b, .xzr__next b{ color:var(--ink); font-weight:600; }

.xzr__eq{ flex:none; display:flex; align-items:flex-end; gap:4px; height:46px; }
.xzr__eq i{ display:block; width:4px; height:22%; border-radius:2px; background:var(--accent-light); opacity:.3; }
.xzr[data-state="playing"] .xzr__eq i{ opacity:1; animation:xzr-eq 0.9s ease-in-out infinite alternate; }
.xzr__eq i:nth-child(2){ animation-delay:-.2s !important; } .xzr__eq i:nth-child(3){ animation-delay:-.5s !important; }
.xzr__eq i:nth-child(4){ animation-delay:-.1s !important; } .xzr__eq i:nth-child(5){ animation-delay:-.7s !important; }
.xzr__eq i:nth-child(6){ animation-delay:-.35s !important; } .xzr__eq i:nth-child(7){ animation-delay:-.6s !important; }

.xzr__bar{ display:flex; flex-wrap:wrap; align-items:center; gap:14px 22px; margin-top:clamp(20px,2.6vw,30px); padding-top:clamp(18px,2.2vw,24px); border-top:1px solid var(--hair); }
.xzr__vol{ display:flex; align-items:center; gap:10px; color:var(--muted); }
.xzr__vol svg{ width:18px; height:18px; fill:currentColor; flex:none; }
.xzr__vol input{ width:120px; accent-color:var(--accent); cursor:pointer; }
.xzr__status{ flex:1 1 220px; margin:0; font-size:13.5px; line-height:1.5; color:var(--muted); }
.xzr__acts{ display:flex; flex-wrap:wrap; gap:10px; margin-left:auto; }
.xzr__acts .xz-btn{ margin-top:0; }

.xzr-sr{ position:absolute !important; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.xzr-more .xz-card__go{ color:var(--accent-light); }

@media (max-width:640px){
  .xzr__eq{ display:none; }
  .xzr__acts{ width:100%; margin-left:0; }
  .xzr__acts .xz-btn{ flex:1 1 auto; }
}

/* The pop-out window. */
body.xzr-popwin{ min-height:100vh; }
.xzr-popwin .xzr{ margin:0; min-height:100vh; border:0; border-radius:0; display:flex; flex-direction:column; padding:22px 20px 18px; box-sizing:border-box; }
.xzr-popwin .xzr__logo{ display:block; height:40px; width:auto; margin:0 auto 22px; }
.xzr-popwin .xzr__main{ flex:1; flex-direction:column; justify-content:center; text-align:center; gap:20px; }
.xzr-popwin .xzr__play{ width:104px; }
.xzr-popwin .xzr__txt{ flex:none; }
.xzr-popwin .xzr__station{ justify-content:center; }
.xzr-popwin .xzr__now{ font-size:24px; }
.xzr-popwin .xzr__eq{ display:flex; height:30px; justify-content:center; }
.xzr-popwin .xzr__bar{ flex-direction:column; align-items:stretch; gap:12px; margin-top:18px; padding-top:16px; text-align:center; }
.xzr-popwin .xzr__vol{ justify-content:center; }
.xzr-popwin .xzr__vol input{ width:160px; }
.xzr-popwin .xzr__status{ flex:none; min-height:1.5em; }
.xzr-popwin .xzr__acts{ margin:0; width:100%; }
.xzr-popwin .xzr__acts .xz-btn{ flex:1 1 auto; }

@keyframes xzr-spin{ to{ transform:rotate(360deg); } }
@keyframes xzr-pulse{ 0%,100%{ opacity:1; } 50%{ opacity:.35; } }
@keyframes xzr-eq{ 0%{ height:18%; } 100%{ height:100%; } }

@media (prefers-reduced-motion:reduce){
  .xzr__badge[data-on="live"]::before, .xzr[data-state="playing"] .xzr__eq i{ animation:none; }
  .xzr[data-state="playing"] .xzr__eq i{ height:60%; }
  .xzr[data-state="connecting"] .xzr__spin{ animation-duration:2.4s; }
  .xzr__play{ transition:none; }
}