
html.omnia-immersive-v60,
body.omnia-immersive-v60{
 background:#020609!important;
 min-height:100%;
}

body.omnia-immersive-v60{
 overflow:hidden!important;
 padding-top:0!important;
}

/*
 Remove the conventional website presentation from the visual field.
 We do not delete it. Functional main content is reparented into
 the system surface by the runtime.
*/

body.omnia-immersive-v60 > header,
body.omnia-immersive-v60 > nav,
body.omnia-immersive-v60 .site-header,
body.omnia-immersive-v60 .site-nav{
 display:none!important;
}

/*
 Old city-as-dashboard layers are no longer the primary experience.
*/

body.omnia-immersive-v60 #omniaDistrictBuilding,
body.omnia-immersive-v60 #omniaLandmarkInterior,
body.omnia-immersive-v60 #omniaRoomNavigator,
body.omnia-immersive-v60 #omniaRoomContext,
body.omnia-immersive-v60 #omniaRoomWorkspaceV53{
 display:none!important;
}

/*
 Keep the real WebGL district environment alive and visible.
*/

body.omnia-immersive-v60 #omniaDistrict3D{
 display:block!important;
 position:fixed!important;
 inset:0!important;
 z-index:0!important;
 opacity:1!important;
 pointer-events:none!important;
}

/*
 Cinematic environment remains beneath the new spatial layer.
*/

body.omnia-immersive-v60 #omniaCityCinemaV59{
 z-index:1!important;
}


/* ==========================================================================
   IMMERSIVE WORLD
   ========================================================================== */

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

#omniaImmersiveDistrictV60{
 position:fixed;
 inset:0;
 z-index:900000;
 overflow:hidden;
 font-family:Inter,system-ui,sans-serif;
 color:#eef8fb;
 background:
  radial-gradient(
   circle at 50% 37%,
   rgba(59,132,160,.06),
   transparent 28%
  );
}

.iv60-world{
 position:absolute;
 inset:0;
 perspective:1300px;
 transform-style:preserve-3d;
}

.iv60-atmosphere{
 position:absolute;
 inset:0;
 pointer-events:none;
 background:
  linear-gradient(
   180deg,
   rgba(1,5,8,.06),
   rgba(1,5,8,.04) 38%,
   rgba(1,5,8,.55) 100%
  );
}

.iv60-floor{
 position:absolute;
 left:-20vw;
 right:-20vw;
 bottom:-38vh;
 height:78vh;
 transform:
  perspective(900px)
  rotateX(67deg);
 transform-origin:center bottom;
 border-top:
  1px solid rgba(117,215,216,.08);
 background:
  radial-gradient(
   ellipse at center,
   rgba(72,165,173,.08),
   transparent 38%
  ),
  repeating-linear-gradient(
   90deg,
   transparent 0 92px,
   rgba(116,202,224,.045) 92px 93px
  ),
  repeating-linear-gradient(
   0deg,
   transparent 0 92px,
   rgba(116,202,224,.04) 92px 93px
  );
 mask-image:
  linear-gradient(
   180deg,
   #000,
   rgba(0,0,0,.76),
   transparent
  );
}

.iv60-landmark{
 position:absolute;
 left:50%;
 top:46%;
 width:min(28vw,360px);
 height:min(48vh,510px);
 transform:
  translate(-50%,-50%)
  translateZ(-20px);
 transform-style:preserve-3d;
}

.iv60-landmark-core{
 position:absolute;
 inset:0;
 clip-path:
  polygon(
   32% 100%,
   17% 39%,
   31% 17%,
   43% 0,
   57% 0,
   69% 17%,
   83% 39%,
   68% 100%
  );
 border:
  1px solid rgba(126,214,232,.19);
 background:
  linear-gradient(
   180deg,
   rgba(14,37,49,.9),
   rgba(4,12,17,.94)
  );
 box-shadow:
  inset 0 0 70px rgba(103,213,204,.055),
  0 60px 150px rgba(0,0,0,.38);
}

.iv60-landmark-core:before{
 content:"";
 position:absolute;
 left:21%;
 right:21%;
 top:12%;
 bottom:8%;
 background:
  repeating-linear-gradient(
   180deg,
   rgba(117,210,220,.16) 0 1px,
   transparent 1px 32px
  );
 opacity:.35;
}

.iv60-landmark-beacon{
 position:absolute;
 left:50%;
 top:-120px;
 width:1px;
 height:230px;
 background:
  linear-gradient(
   180deg,
   transparent,
   rgba(112,221,211,.72),
   transparent
  );
 box-shadow:
  0 0 24px rgba(112,221,211,.42);
}

.iv60-ring{
 position:absolute;
 left:50%;
 top:72%;
 width:95%;
 aspect-ratio:2.2/1;
 transform:
  translate(-50%,-50%)
  rotateX(72deg);
 border:
  1px solid rgba(111,218,210,.18);
 border-radius:50%;
 box-shadow:
  0 0 28px rgba(111,218,210,.07);
}

.iv60-title{
 position:absolute;
 left:28px;
 top:88px;
 max-width:430px;
 pointer-events:none;
}

.iv60-kicker{
 color:#68828e;
 font-size:7px;
 font-weight:900;
 letter-spacing:.19em;
}

.iv60-title h1{
 margin:7px 0 0;
 font-size:clamp(30px,5vw,60px);
 line-height:.94;
 letter-spacing:-.045em;
 font-weight:950;
}

.iv60-title p{
 margin:9px 0 0;
 max-width:400px;
 color:#738a96;
 font-size:9px;
 line-height:1.6;
}

.iv60-zone{
 position:absolute;
 width:148px;
 min-height:74px;
 padding:10px;
 border:
  1px solid rgba(130,207,233,.14);
 border-radius:11px;
 background:
  linear-gradient(
   145deg,
   rgba(6,17,23,.76),
   rgba(3,10,14,.68)
  );
 backdrop-filter:blur(12px);
 box-shadow:
  0 18px 60px rgba(0,0,0,.18);
 cursor:pointer;
 pointer-events:auto;
 text-align:left;
 color:#dbe9ef;
 transition:
  transform .24s ease,
  border-color .24s ease,
  background .24s ease;
}

.iv60-zone:hover,
.iv60-zone:focus-visible{
 transform:
  translateY(-5px)
  scale(1.025);
 border-color:
  rgba(111,220,211,.38);
 background:
  rgba(7,22,27,.88);
 outline:none;
}

.iv60-zone span{
 display:block;
 color:#69838f;
 font-size:6px;
 font-weight:900;
 letter-spacing:.14em;
}

.iv60-zone strong{
 display:block;
 margin-top:5px;
 font-size:10px;
}

.iv60-zone em{
 display:block;
 margin-top:5px;
 color:#6f8893;
 font-style:normal;
 font-size:7px;
 line-height:1.4;
}

.iv60-zone[data-position="1"]{
 left:8%;
 top:34%;
}

.iv60-zone[data-position="2"]{
 left:13%;
 bottom:20%;
}

.iv60-zone[data-position="3"]{
 right:8%;
 top:34%;
}

.iv60-zone[data-position="4"]{
 right:13%;
 bottom:20%;
}

.iv60-zone[data-position="5"]{
 left:50%;
 bottom:6%;
 transform:translateX(-50%);
}

.iv60-zone[data-position="5"]:hover,
.iv60-zone[data-position="5"]:focus-visible{
 transform:
  translateX(-50%)
  translateY(-5px)
  scale(1.025);
}

.iv60-status{
 position:absolute;
 right:20px;
 top:82px;
 padding:7px 9px;
 border:
  1px solid rgba(111,219,210,.15);
 border-radius:999px;
 background:rgba(3,11,15,.62);
 backdrop-filter:blur(10px);
 color:#76d6cd;
 font-size:7px;
 font-weight:900;
 letter-spacing:.09em;
}

.iv60-exit{
 position:absolute;
 left:20px;
 bottom:18px;
 display:inline-flex;
 align-items:center;
 min-height:34px;
 padding:0 9px;
 border:
  1px solid rgba(126,204,231,.13);
 border-radius:8px;
 background:rgba(5,14,19,.72);
 color:#8aa0aa;
 text-decoration:none;
 font-size:7px;
 font-weight:850;
 pointer-events:auto;
}


/* ==========================================================================
   SYSTEM / APPLICATION SURFACE
   ========================================================================== */

#omniaSystemSurfaceV60{
 position:absolute;
 inset:0;
 z-index:20;
 display:none;
 align-items:center;
 justify-content:center;
 padding:74px 22px 22px;
 background:
  radial-gradient(
   circle at 50% 38%,
   rgba(42,111,136,.12),
   transparent 30%
  ),
  rgba(1,6,9,.88);
 backdrop-filter:blur(18px);
 pointer-events:auto;
}

#omniaSystemSurfaceV60.active{
 display:flex;
}

.iv60-system-shell{
 width:min(1320px,100%);
 max-height:calc(100vh - 100px);
 display:grid;
 grid-template-rows:auto minmax(0,1fr);
 overflow:hidden;
 border:
  1px solid rgba(125,205,232,.18);
 border-radius:17px;
 background:
  linear-gradient(
   145deg,
   rgba(5,15,21,.97),
   rgba(3,9,13,.96)
  );
 box-shadow:
  0 40px 120px rgba(0,0,0,.45);
}

.iv60-system-head{
 min-height:57px;
 padding:10px 13px;
 display:flex;
 justify-content:space-between;
 align-items:center;
 gap:12px;
 border-bottom:
  1px solid rgba(125,205,232,.11);
}

.iv60-system-head span{
 display:block;
 color:#657f8c;
 font-size:6px;
 font-weight:900;
 letter-spacing:.16em;
}

.iv60-system-head strong{
 display:block;
 margin-top:3px;
 font-size:12px;
}

#omniaCloseSystemV60{
 min-height:34px;
 padding:0 10px;
 border:
  1px solid rgba(125,205,232,.13);
 border-radius:8px;
 background:#08141b;
 color:#a9bec7;
 font:850 7px Inter,system-ui,sans-serif;
 cursor:pointer;
}

#omniaFunctionalAppV60{
 overflow:auto;
 padding:14px;
 -webkit-overflow-scrolling:touch;
}

#omniaFunctionalAppV60 > main{
 display:block!important;
 position:relative!important;
 inset:auto!important;
 width:auto!important;
 max-width:none!important;
 min-height:0!important;
 margin:0!important;
 transform:none!important;
 opacity:1!important;
 background:transparent!important;
}

/*
 Suppress large marketing-first hero treatment inside an operating
 surface where possible, while leaving functional controls intact.
*/

#omniaFunctionalAppV60 main > section:first-child h1{
 font-size:clamp(28px,5vw,54px)!important;
 line-height:.98!important;
}

#omniaFunctionalAppV60 main > section:first-child{
 min-height:0!important;
}


/* ==========================================================================
   DISTRICT CHARACTER
   ========================================================================== */

html[data-omnia-v60="financial"]
.iv60-landmark-core{
 background:
  linear-gradient(
   180deg,
   rgba(13,53,74,.93),
   rgba(3,13,19,.96)
  );
}

html[data-omnia-v60="studios"]
.iv60-landmark-core{
 background:
  linear-gradient(
   180deg,
   rgba(66,44,29,.92),
   rgba(7,13,17,.96)
  );
}

html[data-omnia-v60="advertising"]
.iv60-landmark-core{
 background:
  linear-gradient(
   180deg,
   rgba(66,56,25,.9),
   rgba(7,14,17,.96)
  );
}

html[data-omnia-v60="residence"]
.iv60-landmark-core{
 clip-path:
  polygon(
   14% 100%,
   14% 31%,
   30% 18%,
   42% 8%,
   58% 8%,
   70% 18%,
   86% 31%,
   86% 100%
  );
 background:
  linear-gradient(
   180deg,
   rgba(22,49,53,.94),
   rgba(5,14,17,.97)
  );
}

html[data-omnia-v60="mantle"]
.iv60-landmark-core{
 clip-path:
  polygon(
   25% 100%,
   18% 22%,
   39% 22%,
   45% 0,
   55% 0,
   61% 22%,
   82% 22%,
   75% 100%
  );
}


/* ==========================================================================
   MOBILE
   ========================================================================== */

@media(max-width:760px){

 .iv60-title{
  left:14px;
  top:76px;
  max-width:74vw;
 }

 .iv60-status{
  right:10px;
  top:72px;
 }

 .iv60-landmark{
  width:42vw;
  height:40vh;
  top:43%;
 }

 .iv60-zone{
  width:128px;
  min-height:65px;
 }

 .iv60-zone[data-position="1"]{
  left:4%;
  top:36%;
 }

 .iv60-zone[data-position="2"]{
  left:5%;
  bottom:17%;
 }

 .iv60-zone[data-position="3"]{
  right:4%;
  top:36%;
 }

 .iv60-zone[data-position="4"]{
  right:5%;
  bottom:17%;
 }

 .iv60-system-shell{
  max-height:calc(100vh - 88px);
 }

 #omniaSystemSurfaceV60{
  padding:
   66px 8px 8px;
 }
}

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

 .iv60-zone{
  transition:none!important;
 }
}
