*{box-sizing:border-box}
html,body{width:100%;height:100%;margin:0;background:#080604}
body{overflow:hidden}
.radio-room{position:relative;width:100vw;height:100vh;height:100svh;overflow:hidden;background:#080604}
.radio-background{position:absolute;inset:0;background:url("../assets/images/great-swingali-radio.png") center/cover no-repeat}
.realm-title{
position:absolute;z-index:5;top:1.5%;left:50%;transform:translateX(-50%);margin:0;
width:max-content;max-width:88vw;padding:.28rem .72rem;color:#ead8b8;
background:rgba(5,4,4,.28);border-radius:4px;
font:400 clamp(1.15rem,1.75vw,1.85rem)/1.05 "Rye",Georgia,serif;
letter-spacing:.055em;text-align:center;
text-shadow:0 3px 10px rgba(0,0,0,.98),0 0 12px rgba(167,99,232,.20);
pointer-events:none
}
.radio-hotspot{
position:absolute;z-index:6;display:flex;align-items:center;justify-content:center;
text-decoration:none;color:#f1ddbc;border-radius:18px;outline:none;cursor:pointer
}
.radio-hotspot::before{
content:"";position:absolute;inset:0;border-radius:inherit;opacity:0;
background:radial-gradient(circle,rgba(220,171,255,.36),rgba(145,76,205,.12) 62%,transparent 80%);
box-shadow:0 0 28px rgba(210,153,255,.62),inset 0 0 24px rgba(246,226,255,.18);
transition:opacity .22s ease,transform .25s ease
}
.radio-hotspot span{
position:relative;z-index:2;opacity:0;transform:translateY(6px);padding:.48rem .72rem;
background:rgba(7,5,5,.70);border:1px solid rgba(227,196,157,.34);border-radius:4px;
font:700 clamp(.72rem,.9vw,.98rem)/1.1 Georgia,serif;letter-spacing:.07em;
text-align:center;text-transform:uppercase;white-space:nowrap;text-shadow:0 2px 8px #000;
box-shadow:0 0 12px rgba(0,0,0,.42);transition:opacity .22s ease,transform .22s ease;
pointer-events:none
}
.radio-hotspot:hover::before,.radio-hotspot:focus-visible::before{opacity:1;transform:scale(1.035)}
.radio-hotspot:hover span,.radio-hotspot:focus-visible span{opacity:1;transform:translateY(0)}
.radio-hotspot:focus-visible{outline:2px solid rgba(233,210,255,.88);outline-offset:4px}
/* Natural object-based Radio hotspots */
.watch-listen{left:40%;top:34%;width:21%;height:37%} /* microphone + console */
.past-broadcasts{left:84%;top:35%;width:15%;height:44%} /* reel-to-reel / archive equipment */
/* ON AIR sign */
.return-link{
position:absolute;left:50%;bottom:1.1rem;transform:translateX(-50%);z-index:7;
padding:.48rem .8rem;color:rgba(239,220,185,.60);font:600 .72rem/1.1 Georgia,serif;
letter-spacing:.08em;text-decoration:none;text-transform:uppercase;text-shadow:0 2px 7px #000;
opacity:.22;transition:.2s
}
.return-link:hover,.return-link:focus-visible{
opacity:1;text-shadow:0 0 12px rgba(183,117,255,.85),0 2px 7px #000
}
/* ============================================================
UNIVERSAL PORTAL MARKERS — RADIO
Applies only to LISTEN / WATCH and PAST BROADCASTS.
============================================================ */
.radio-hotspot::after{
content:"";
position:absolute;
z-index:4;
right:8%;
top:9%;
width:clamp(18px,1.35vw,24px);
height:clamp(18px,1.35vw,24px);
border:1px solid rgba(247,226,255,.98);
border-radius:50%;
background:
radial-gradient(circle at 38% 34%,
#fff 0 7%,#efc9ff 9% 22%,#c36df2 42%,#681b8c 72%,
rgba(77,10,107,.28) 78%,transparent 80%);
box-shadow:
0 0 7px rgba(246,223,255,.98),
0 0 17px rgba(205,105,255,.98),
0 0 31px rgba(142,43,205,.82);
pointer-events:none;
transform-origin:center;
animation:radioPortalPulse 1.8s ease-in-out infinite,
radioPortalTurn 4.6s linear infinite;
}
.radio-hotspot:hover::after,
.radio-hotspot:focus-visible::after{
filter:brightness(1.2);
box-shadow:
0 0 9px rgba(255,242,255,1),
0 0 23px rgba(220,139,255,1),
0 0 40px rgba(155,51,221,.96);
}
@keyframes radioPortalPulse{
0%,100%{scale:.88;opacity:.82}
50%{scale:1.14;opacity:1}
}
@keyframes radioPortalTurn{
from{rotate:0deg}
to{rotate:360deg}
}
@media(prefers-reduced-motion:reduce){
.radio-hotspot::after{animation:none}
}
/* 15N — Radio is a 3:2 cinematic artboard. Artwork/hotspots scale together. */
.portal-room-radio .radio-room{width:auto!important;height:auto!important}
@media(pointer:coarse){.radio-hotspot::after{max-width:12px!important;max-height:12px!important}}
/* TGS 15P — RADIO: explicit nonzero 3:2 artboard after shell layout. */
body.portal-room-radio .radio-room.portal-cinematic-stage{
width:min(100vw,calc((100svh - var(--shell-height,86px) - var(--portal-toolbar-h,48px) - var(--portal-safe-bottom,0px))*1.5))!important;
height:auto!important;aspect-ratio:3/2!important;min-width:1px!important;min-height:1px!important;
margin:auto!important;overflow:hidden!important;visibility:visible!important;opacity:1!important;
}
body.portal-room-radio .radio-background{display:block!important;visibility:visible!important;opacity:1!important;background-size:cover!important}
body.portal-room-radio .radio-hotspot{visibility:visible!important}
/* TGS 15Q — Radio exploration cue only. The room itself remains unchanged. */
@media(max-width:820px){
body[data-location="The Great Swingali Radio"] .radio-room::after{
content:"PINCH TO ZOOM • DRAG TO EXPLORE";
position:fixed;
z-index:10001;
left:50%;
bottom:calc(var(--portal-toolbar-h,48px) + var(--portal-safe-bottom,0px) + 8px);
transform:translateX(-50%);
width:max-content;
max-width:calc(100vw - 20px);
box-sizing:border-box;
padding:7px 10px;
border:1px solid rgba(216,183,125,.48);
border-radius:5px;
background:rgba(8,5,6,.90);
color:#ead8b8;
box-shadow:0 4px 15px rgba(0,0,0,.62);
font:700 9px/1.2 Georgia,serif;
letter-spacing:.055em;
text-align:center;
text-transform:uppercase;
pointer-events:none;
}
}
/* TGS 15R — Radio cue belongs to viewport chrome, never inside artwork. */
@media(max-width:820px){
body[data-location="The Great Swingali Radio"] .radio-room::after{content:none!important;display:none!important}
body[data-location="The Great Swingali Radio"]::after{
content:"PINCH TO ZOOM • DRAG TO EXPLORE";position:fixed;z-index:10001;left:50%;
bottom:calc(var(--portal-toolbar-h,48px) + var(--portal-safe-bottom,0px) + 8px);
transform:translateX(-50%);width:max-content;max-width:calc(100vw - 20px);box-sizing:border-box;
padding:7px 10px;border:1px solid rgba(216,183,125,.48);border-radius:5px;background:rgba(8,5,6,.90);
color:#ead8b8;box-shadow:0 4px 15px rgba(0,0,0,.62);font:700 9px/1.2 Georgia,serif;
letter-spacing:.055em;text-align:center;text-transform:uppercase;pointer-events:none;
}
}