/* ============================================================
   gateway.css — the THREE-WAY split door
   LEFT  · NOCTURNE  (18+)        MIDDLE · MagicalUnicorn
                       RIGHT · DREAMREEL
   ============================================================ */
*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%}
body{font-family:'Outfit',sans-serif;overflow:hidden;background:#000;color:#fff}
a{text-decoration:none;color:inherit}
svg{display:block}

.gate{display:flex;height:100svh;width:100%;position:relative}

/* shared third mechanics */
.half{position:relative;flex:1 1 33.333%;overflow:hidden;display:flex;align-items:center;justify-content:center;
  transition:flex-grow .7s cubic-bezier(.4,0,.2,1),filter .6s ease;will-change:flex-grow}
.half + .half{border-left:1px solid rgba(255,255,255,.16)}
.half-inner{position:relative;z-index:3;text-align:center;padding:36px 30px;max-width:440px;
  transform:translateY(0);transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.half .motif{position:absolute;inset:0;z-index:1;pointer-events:none;overflow:hidden}
.half .scrim{position:absolute;inset:0;z-index:2;pointer-events:none}

/* desktop hover: expand hovered, recede siblings */
@media(hover:hover) and (min-width:861px){
  .gate:hover .half{filter:saturate(.7) brightness(.78)}
  .gate .half:hover{flex-grow:1.7;filter:none}
  .gate .half:hover .half-inner{transform:translateY(-6px)}
}

.eyebrow{font-size:10.5px;letter-spacing:.34em;text-transform:uppercase;margin-bottom:22px}
.title{line-height:1}
.line{margin-top:16px}
.sub{margin-top:22px;font-size:12.5px;max-width:32ch;margin-left:auto;margin-right:auto;line-height:1.7}
.enter-wrap{margin-top:30px}

/* ---- LEFT · NOCTURNE ---- */
.half--no{background:radial-gradient(120% 90% at 30% 0%,#141B45 0%,#0B0E1F 62%)}
.half--no .eyebrow{color:#FF8FB1}
.half--no .title{font-family:'Fraunces',serif;font-weight:300;font-size:clamp(28px,3.1vw,48px);letter-spacing:.08em;color:#F4F1FB}
.half--no .line{font-family:'Fraunces',serif;font-style:italic;font-size:clamp(15px,1.8vw,21px);color:#FF8FB1}
.half--no .sub{color:#8E97C4}

/* ---- MIDDLE · MAGICALUNICORN ---- */
.half--mu{background:radial-gradient(120% 90% at 50% 0%,#10142b 0%,#0A0C12 60%)}
.half--mu .eyebrow{color:#5C79F4}
.half--mu .title{white-space:nowrap;font-size:clamp(22px,2.6vw,40px);letter-spacing:.01em;color:#F5F6FA}
.half--mu .title .m{font-family:'Cormorant Garamond',serif;font-style:italic;font-weight:500}
.half--mu .title .u{font-family:'IBM Plex Mono',monospace;color:#5C79F4;font-weight:500}
.half--mu .line{font-family:'IBM Plex Mono',monospace;font-size:clamp(11px,1.3vw,14px);letter-spacing:.22em;text-transform:lowercase;color:#F5F6FA}
.half--mu .sub{font-family:'IBM Plex Mono',monospace;color:#8B93A7}

/* ---- RIGHT · DREAMREEL ---- */
.half--dr{background:radial-gradient(115% 80% at 70% 8%,rgba(61,242,230,.10),transparent 55%),
                     radial-gradient(110% 80% at 40% 95%,rgba(255,77,157,.10),transparent 55%),
                     #0A090F}
.half--dr .eyebrow{color:#3DF2E6;font-family:'IBM Plex Mono',monospace}
.half--dr .title{font-family:'Archivo Black','Arial Black',sans-serif;font-size:clamp(24px,2.9vw,44px);letter-spacing:.01em;color:#EFEBE3;
  text-shadow:-2px 0 rgba(61,242,230,.55),2px 0 rgba(255,77,157,.55)}
.half--dr .line{font-family:'IBM Plex Mono',monospace;font-size:clamp(11px,1.3vw,14px);letter-spacing:.2em;text-transform:uppercase;color:#9A94A6}
.half--dr .sub{font-family:'IBM Plex Mono',monospace;color:#9A94A6}

/* enter pill (tactile) */
.enter{display:inline-flex;align-items:center;gap:10px;font-size:11px;letter-spacing:.24em;text-transform:uppercase;
  padding:13px 26px;border:1px solid rgba(255,255,255,.22);border-radius:999px;
  box-shadow:0 3px 0 rgba(0,0,0,.34),0 12px 22px -10px rgba(0,0,0,.55);
  transition:background .3s,border-color .3s,color .3s,transform .16s,box-shadow .16s}
.enter .arr{transition:transform .3s}
.enter:hover{transform:translateY(-2px)}
.enter:active{transform:translateY(1px);box-shadow:0 1px 0 rgba(0,0,0,.34)}
.enter:hover .arr{transform:translateX(5px)}
.half--no .enter:hover{background:#FF4D8D;border-color:#FF4D8D;color:#fff}
.half--mu .enter:hover{background:#2747EC;border-color:#2747EC;color:#fff}
.half--dr .enter:hover{background:#FF4D9D;border-color:#FF4D9D;color:#0A090F}

/* age tag (nocturne) */
.age{position:absolute;bottom:22px;left:0;right:0;text-align:center;z-index:3;font-size:10px;letter-spacing:.26em;text-transform:uppercase;color:#6f78a8}

/* ---- house wordmark ---- */
.house{position:absolute;top:22px;left:50%;transform:translateX(-50%);z-index:6;
  font-family:'Cormorant Garamond',serif;font-size:12.5px;letter-spacing:.4em;text-transform:uppercase;color:rgba(255,255,255,.62);white-space:nowrap}
.house b{font-weight:500}
.house .dot{display:inline-block;width:4px;height:4px;border-radius:50%;background:#FF4D8D;margin:0 9px 2px;vertical-align:middle}

/* tokens so the shared sound dock (fx.css) themes on the gateway */
:root{
  --bg:#0A0C12; --paper:#F5F6FA; --mute:#8B93A7;
  --line:rgba(255,255,255,.16); --accent:#FF4D8D; --accent-2:#5C79F4;
  --body:'Outfit',sans-serif;
}

/* ---- mobile: stack the three vertically ---- */
@media(max-width:860px){
  body{overflow-y:auto}
  .gate{flex-direction:column;height:auto;min-height:100svh}
  .half{flex:1 1 auto;min-height:33svh}
  .half + .half{border-left:none;border-top:1px solid rgba(255,255,255,.16)}
  .house{font-size:10px;letter-spacing:.28em}
  .half--mu .title{white-space:normal}
  .snd-dock{bottom:max(16px,env(safe-area-inset-bottom))}
}
@media (prefers-reduced-motion:reduce){
  .half,.half-inner{transition:none}
  .enter{transition:none}.enter:hover{transform:none}
}