:root{
 --city-bg:#03070a;
 --city-surface:#071019;
 --city-line:rgba(139,202,236,.18);
 --city-cyan:#8fdcff;
 --city-teal:#73ddd1;
 --city-gold:#d2ad64;
 --city-text:#f4f8fa;
}

#omniaCityTransition,
#omniaCityTransition *{
 box-sizing:border-box;
}

#omniaCityTransition{
 position:fixed;
 inset:0;
 z-index:2000000;
 display:none;
 overflow:hidden;
 background:
  radial-gradient(
   circle at 50% 45%,
   rgba(39,109,150,.24),
   transparent 34%
  ),
  linear-gradient(
   180deg,
   #06111a,
   #020609 78%
  );
 color:var(--city-text);
 font-family:Inter,system-ui,sans-serif;
}

#omniaCityTransition.active{
 display:block;
}

.city-stars{
 position:absolute;
 inset:0;
 opacity:.35;
 background-image:
  radial-gradient(circle,#fff 0 1px,transparent 1.3px);
 background-size:83px 71px;
 transform:scale(1.25);
 animation:cityStars 1s ease forwards;
}

@keyframes cityStars{
 from{transform:scale(1.3);opacity:.15}
 to{transform:scale(1);opacity:.42}
}

.city-horizon{
 position:absolute;
 left:0;
 right:0;
 bottom:0;
 height:48%;
 background:
  linear-gradient(
   180deg,
   transparent,
   rgba(6,18,27,.55)
  );
}

.city-skyline{
 position:absolute;
 left:8%;
 right:8%;
 bottom:0;
 height:43%;
 display:flex;
 align-items:flex-end;
 justify-content:center;
 gap:9px;
 transform:
  perspective(800px)
  translateZ(-150px)
  scale(.75);
 opacity:.4;
 transition:
  transform .8s cubic-bezier(.2,.75,.2,1),
  opacity .8s ease;
}

#omniaCityTransition.travel .city-skyline{
 transform:
  perspective(800px)
  translateZ(30px)
  scale(1.12);
 opacity:.96;
}

.city-building{
 width:7%;
 min-width:34px;
 border:1px solid rgba(110,193,235,.22);
 border-bottom:0;
 background:
  linear-gradient(
   180deg,
   rgba(21,59,79,.4),
   rgba(5,18,27,.92)
  );
 box-shadow:
  inset 0 0 26px rgba(91,190,232,.04);
}

.city-building:nth-child(1){height:37%}
.city-building:nth-child(2){height:58%}
.city-building:nth-child(3){height:74%}
.city-building:nth-child(4){height:48%}
.city-building:nth-child(5){height:87%}
.city-building:nth-child(6){height:64%}
.city-building:nth-child(7){height:94%}
.city-building:nth-child(8){height:55%}
.city-building:nth-child(9){height:76%}
.city-building:nth-child(10){height:43%}
.city-building:nth-child(11){height:68%}
.city-building:nth-child(12){height:36%}

.city-building:before{
 content:"";
 display:block;
 width:72%;
 height:80%;
 margin:12% auto 0;
 opacity:.45;
 background:
  repeating-linear-gradient(
   180deg,
   rgba(139,218,255,.25) 0 2px,
   transparent 2px 14px
  );
}

.city-transition-copy{
 position:absolute;
 z-index:3;
 top:14%;
 left:50%;
 transform:translateX(-50%);
 width:min(760px,calc(100% - 40px));
 text-align:center;
}

.city-transition-kicker{
 color:#7393a4;
 font-size:9px;
 font-weight:850;
 letter-spacing:.22em;
}

.city-transition-title{
 margin-top:8px;
 font-size:clamp(34px,6vw,66px);
 line-height:.95;
 font-weight:900;
 letter-spacing:-.035em;
}

.city-transition-status{
 margin-top:12px;
 color:#829aa8;
 font-size:11px;
}

.city-route-line{
 position:absolute;
 z-index:2;
 left:50%;
 bottom:26%;
 width:1px;
 height:24%;
 background:
  linear-gradient(
   180deg,
   transparent,
   var(--city-teal)
  );
 box-shadow:0 0 15px var(--city-teal);
 transform-origin:bottom center;
 animation:cityRoute .8s ease forwards;
}

@keyframes cityRoute{
 from{transform:scaleY(.08);opacity:.2}
 to{transform:scaleY(1);opacity:.95}
}


/* --------------------------------------------------------------------------
   RARI ARRIVAL
   -------------------------------------------------------------------------- */

#omniaRariArrival{
 position:fixed;
 inset:0;
 z-index:2000001;
 display:none;
 background:rgba(1,5,8,.74);
 backdrop-filter:blur(13px);
 color:white;
 font-family:Inter,system-ui,sans-serif;
}

#omniaRariArrival.active{
 display:block;
}

.rari-stage{
 position:absolute;
 inset:0;
 overflow:hidden;
}

.rari-glow{
 position:absolute;
 right:9%;
 bottom:4%;
 width:370px;
 height:370px;
 border-radius:50%;
 background:
  radial-gradient(
   circle,
   rgba(91,207,218,.17),
   transparent 67%
  );
 opacity:0;
 animation:rariGlow .7s ease forwards;
}

.rari-form{
 position:absolute;
 right:13%;
 bottom:-18%;
 width:118px;
 height:390px;
 opacity:0;
 transform:translateX(70px);
 animation:rariApproach .72s cubic-bezier(.2,.76,.2,1) forwards;
}

.rari-head{
 position:absolute;
 top:0;
 left:31px;
 width:57px;
 height:69px;
 border:1px solid rgba(137,223,226,.55);
 border-radius:48%;
 background:rgba(75,185,191,.06);
}

.rari-body{
 position:absolute;
 top:75px;
 left:20px;
 width:78px;
 height:166px;
 border:1px solid rgba(137,223,226,.45);
 border-radius:45% 45% 25% 25%;
}

.rari-leg{
 position:absolute;
 top:233px;
 width:28px;
 height:153px;
 border:1px solid rgba(137,223,226,.35);
 border-radius:999px;
}

.rari-leg.left{left:27px}
.rari-leg.right{right:27px}

@keyframes rariApproach{
 from{
  opacity:0;
  transform:translateX(80px) scale(.88);
 }
 to{
  opacity:1;
  transform:translateX(0) scale(1);
 }
}

@keyframes rariGlow{
 to{opacity:1}
}

.rari-copy{
 position:absolute;
 left:8%;
 bottom:12%;
 width:min(540px,70%);
}

.rari-kicker{
 color:#72ddd1;
 font-size:9px;
 font-weight:850;
 letter-spacing:.2em;
}

.rari-title{
 margin-top:7px;
 font-size:clamp(30px,5vw,54px);
 font-weight:900;
}

.rari-status{
 margin-top:8px;
 color:#8ba0ad;
 font-size:11px;
 line-height:1.55;
}


/* --------------------------------------------------------------------------
   DISTRICT IDENTITY
   -------------------------------------------------------------------------- */

body.omnia-district-financial{
 --district-accent:#6ec8ff;
}

body.omnia-district-wealth{
 --district-accent:#75ded1;
}

body.omnia-district-mantle{
 --district-accent:#9fc5dc;
}

body.omnia-district-studios{
 --district-accent:#d0aa68;
}

body.omnia-district-core{
 --district-accent:#a5d8f1;
}

body.omnia-residence{
 background-image:
  radial-gradient(
   circle at 75% 18%,
   rgba(79,153,190,.08),
   transparent 28%
  )!important;
}


/* --------------------------------------------------------------------------
   REDUCED MOTION
   -------------------------------------------------------------------------- */

@media(prefers-reduced-motion:reduce){

 #omniaCityTransition,
 #omniaRariArrival{
  display:none!important;
 }

 .city-stars,
 .city-route-line,
 .rari-glow,
 .rari-form{
  animation:none!important;
  transition:none!important;
 }
}