/* MIGZ RADIO — fixed 16:9 stage lock */
:root{
  --radio-base-w: 1920;
  --radio-base-h: 1080;
  --radio-poster-radius: 10px;
  --radio-safe-top: env(safe-area-inset-top, 0px);
  --radio-safe-bottom: env(safe-area-inset-bottom, 0px);
  --radio-safe-vh: calc(100svh - var(--radio-safe-top) - var(--radio-safe-bottom));
}

body.radio-page{
  background:#000;
  overflow:hidden;
}

#interaction-overlay{
  position:fixed;
  inset:0;
  z-index:999;
  background:transparent;
  pointer-events:auto;
}
#interaction-overlay.is-disabled{
  pointer-events:none !important;
  display:none !important;
}

.rotate-gate{
  position:fixed;
  inset:0;
  z-index:15000;
  display:none;
  align-items:center;
  justify-content:center;
  padding:22px;
  background:rgba(0,0,0,0.88);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
}
.rotate-gate.is-active{display:flex;}
.rotate-gate__box{
  width:min(520px,92vw);
  padding:24px 22px;
  border-radius:20px;
  border:1px solid rgba(24,164,255,.42);
  background:rgba(7,10,24,.74);
  box-shadow:0 0 18px rgba(24,164,255,.28),0 0 26px rgba(255,46,159,.12);
  text-align:center;
}
.rotate-gate__title{
  font-family:"Bebas Neue",system-ui,sans-serif;
  letter-spacing:.14em;
  text-transform:uppercase;
  font-size:clamp(1.45rem,5vw,2rem);
  color:rgba(245,247,255,.96);
}
.rotate-gate__text{margin-top:10px;color:rgba(208,228,255,.88);font-size:.98rem;}

.radio-hero{
  position:fixed;
  inset:0;
  width:100%;
  height:100%;
  overflow:hidden;
  background:#000;
}
.radio-stage-shell{
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
  padding-top:var(--radio-safe-top);
  padding-bottom:var(--radio-safe-bottom);
  box-sizing:border-box;
  background:#000;
}
.radio-stage{
  position:relative;
  width:min(100vw, calc(var(--radio-safe-vh) * 16 / 9));
  height:min(var(--radio-safe-vh), calc(100vw * 9 / 16));
  aspect-ratio:16 / 9;
  overflow:hidden;
  background:#000;
}
.radio-video{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:fill;
  pointer-events:none;
  user-select:none;
  -webkit-user-drag:none;
}

.authored-radio-layer{
  position:absolute;
  left:0;
  top:0;
  width:calc(var(--radio-base-w) * 1px);
  height:calc(var(--radio-base-h) * 1px);
  transform-origin:top left;
  transform:scale(var(--stage-scale,1));
}
#radioOverlay{
  z-index:10;
  pointer-events:auto;
}
.radio-ui{
  z-index:30;
  pointer-events:none;
}
.radio-ui .audio-toggle,
.radio-ui .marquee{
  pointer-events:auto;
}

.radio-group{
  position:absolute;
  pointer-events:none;
  transform-origin:50% 50%;
  transform:
    scale(var(--grp-scale,1))
    perspective(var(--grp-perspective,0px))
    rotateY(var(--grp-rotY,0deg))
    rotateX(var(--grp-rotX,0deg))
    skewY(var(--grp-skewY,0deg))
    skewX(var(--grp-skewX,0deg))
    rotate(var(--grp-rot,0deg))
    translate(var(--grp-dx,0px), var(--grp-dy,0px));
}
.radio-group--left{
  --grp-scale:.75;
  --grp-perspective:800px;
  --grp-rotY:-5deg;
  --grp-skewY:5deg;
  --grp-dx:-97px;
  --grp-dy:10px;
  --poster-persp:1200px;
  --poster-rx:3deg;
  --poster-ry:-2deg;
  transform-origin:50% 100%;
}
.radio-group--right{
  --grp-scale:1.05;
  --grp-perspective:800px;
  --grp-rotY:-5deg;
  --grp-skewY:5deg;
  --grp-dx:17px;
  --grp-dy:-5px;
  --poster-persp:1200px;
  --poster-rx:3deg;
  --poster-ry:-2deg;
  transform-origin:50% 100%;
}
body.radio-page .radio-group--left .radio-poster,
body.radio-page .radio-group--right .radio-poster{
  transform-origin:50% 0% !important;
  transform-style:preserve-3d;
  transform:perspective(var(--poster-persp,1200px)) rotateY(var(--poster-ry,0deg)) rotateX(var(--poster-rx,0deg)) !important;
}
.radio-group .radio-poster{ pointer-events:auto; }

.radio-poster{
  position:absolute;
  display:block;
  padding:0;
  margin:0;
  border-radius:0 !important;
  border:1px solid rgba(255,255,255,.14) !important;
  overflow:visible !important;
  background:rgba(0,0,0,.05) !important;
  box-shadow:0 0 18px rgba(24,164,255,.18), inset 0 0 0 2px rgba(0,0,0,.40), inset 0 0 0 5px rgba(255,255,255,.10), inset 0 0 0 7px rgba(0,0,0,.22), inset 0 0 26px rgba(255,255,255,.08) !important;
  cursor:pointer;
  pointer-events:auto;
  transition:filter .15s ease, border-color .15s ease;
  --pitch:18px;
  --frame:12px;
}
.radio-poster::before{
  content:"";
  position:absolute;
  inset:calc(-1 * var(--frame));
  pointer-events:none;
  z-index:2;
  background-image:radial-gradient(circle at 50% 50%, rgba(255,220,170,.92) 0 4px, rgba(255,245,230,.55) 4px 5px, rgba(255,185,105,.22) 5px 7px, transparent 8px);
  background-repeat:repeat;
  background-size:var(--pitch) var(--pitch);
  background-position:0 0;
  padding:var(--frame);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
  mask-composite:exclude;
  filter:drop-shadow(0 0 10px rgba(255,190,110,.70)) drop-shadow(0 0 22px rgba(255,160,85,.45)) drop-shadow(0 0 40px rgba(255,135,65,.26));
}
.radio-poster img{
  width:100% !important;
  height:100% !important;
  display:block !important;
  object-fit:cover !important;
  border-radius:0 !important;
}
.radio-poster:hover{
  filter:brightness(1.08);
  border-color:rgba(24,164,255,.75);
}
.radio-poster:focus-visible{
  outline:2px solid rgba(24,164,255,.95);
  outline-offset:3px;
}

#city-nav.skyline-radio{
  position:absolute !important;
  left:160px;
  right:160px;
  bottom:28px;
  z-index:1;
  padding:0;
  margin:0;
  flex-wrap:nowrap !important;
  overflow:visible !important;
  justify-content:center;
}
#city-nav.skyline-radio .marquee{
  white-space:nowrap;
  flex:0 0 auto;
}
.radio-audio-toggle{
  position:absolute !important;
  left:24px;
  bottom:24px;
  z-index:2;
}

.radio-modal{
  position:fixed;
  inset:0;
  z-index:9998;
  display:none;
  align-items:center;
  justify-content:center;
  padding:clamp(14px,2.2vw,28px);
  opacity:0;
  backdrop-filter:blur(0px);
  transition:opacity .45s ease, backdrop-filter .6s ease;
}
.radio-modal.is-open{
  display:flex;
  opacity:1;
  backdrop-filter:blur(8px);
}
.radio-modal__backdrop{position:absolute;inset:0;background:rgba(0,0,0,.55);}
.radio-modal__inner{position:relative;width:min(980px,92vw);border-radius:18px;overflow:hidden;z-index:2;}
.radio-modal__close{position:absolute;top:10px;right:10px;z-index:3;width:40px;height:40px;border-radius:999px;border:1px solid rgba(208,228,255,.35);background:rgba(7,10,24,.45);color:rgba(245,247,255,.92);cursor:pointer;box-shadow:0 0 14px rgba(24,164,255,.25),0 0 18px rgba(255,46,159,.12);backdrop-filter:blur(6px);}
.radio-modal__frame{position:relative;border-radius:18px;padding:12px;background:rgba(7,10,24,.18);border:1px solid rgba(24,164,255,.18);transform:scale(.96);transition:transform .45s cubic-bezier(.22,.8,.32,1), box-shadow .6s ease;}
.radio-modal.is-open .radio-modal__frame{transform:scale(1);}
.radio-modal__frame::before{content:"";position:absolute;inset:-2px;border-radius:20px;padding:2px;pointer-events:none;background:linear-gradient(90deg,rgba(24,164,255,.95),rgba(255,46,159,.85),rgba(24,164,255,.95),rgba(208,228,255,.75),rgba(24,164,255,.95));background-size:300% 100%;background-position:0% 50%;-webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;animation:migzBorderSweep 3.8s linear infinite;opacity:.92;filter:drop-shadow(0 0 10px rgba(24,164,255,.28));}
.radio-modal__frame::after{content:"";position:absolute;left:8px;right:8px;bottom:8px;height:3px;border-radius:999px;background:linear-gradient(90deg,rgba(24,164,255,0),rgba(24,164,255,.9),rgba(255,46,159,.8),rgba(24,164,255,.9),rgba(24,164,255,0));filter:blur(.2px);animation:migzBarSweep 3.2s ease-in-out infinite;opacity:.75;pointer-events:none;}
@keyframes migzBorderSweep{0%{background-position:0% 50%}100%{background-position:100% 50%}}
@keyframes migzBarSweep{0%,100%{transform:translateX(-6%);opacity:.55}50%{transform:translateX(6%);opacity:.95}}
.radio-modal__iframe{width:100%;aspect-ratio:16/9;border:0;display:block;border-radius:14px;background:rgba(0,0,0,.25);border:1px solid rgba(24,164,255,.22);box-shadow:0 0 18px rgba(24,164,255,.14),0 0 26px rgba(255,46,159,.08);}
.radio-modal__meta{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 12px 12px;background:rgba(7,10,24,.35);border-top:1px solid rgba(208,228,255,.12);}
.radio-modal__label{font-family:"Bebas Neue",system-ui,sans-serif;letter-spacing:.14em;color:rgba(208,228,255,.92);font-size:15px;text-transform:uppercase;}
.radio-modal__text{font-family:"Montserrat",system-ui,sans-serif;color:rgba(245,247,255,.9);font-size:13px;display:flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:flex-end;}
.radio-modal__text a{display:inline-flex;align-items:center;justify-content:center;padding:.55rem 1.1rem;border-radius:999px;text-decoration:none;font-family:"Bebas Neue",system-ui,sans-serif;letter-spacing:.18em;text-transform:uppercase;color:#e8f4ff;border:1px solid rgba(24,164,255,.65);background:rgba(7,10,24,.25);box-shadow:0 0 12px rgba(24,164,255,.25),0 0 18px rgba(255,46,159,.10);}


@supports not (height: 100svh){
  :root{
    --radio-safe-vh: calc(100vh - var(--radio-safe-top) - var(--radio-safe-bottom));
  }
}