/* ==========================================================
   VIRELION_OS — CONNECT HYBRID CHAMBER
========================================================== */

#page6 {
  --cmx6: 0;
  --cmy6: 0;

  --cpx6: 50%;
  --cpy6: 50%;

  position: fixed !important;

  inset: 0 !important;

  width: 100vw !important;
  height: 100svh !important;

  margin: 0 !important;
  padding: 0 !important;

  overflow: hidden !important;

  background: #05060B !important;

  isolation: isolate;
}


#page6[hidden] {
  display: none !important;
}


/* Rendered master already contains navigation/footer */

body[data-vos-page="6"] .vos-nav,
body[data-vos-page="6"] .footer-bar,
body[data-vos-page="6"] .page-dots {

  opacity: 0 !important;

  visibility: hidden !important;

  pointer-events: none !important;
}


body[data-vos-page="6"] .rain-canvas {

  z-index: 30 !important;

  opacity: .08 !important;

  mix-blend-mode: screen;

  pointer-events: none !important;
}


/* ==========================================================
   CRISP MASTER
========================================================== */

.connect-reference-stage {

  position: absolute;

  inset: 0;

  overflow: hidden;

  background: #05060B;

  perspective: 1600px;
}


.connect-reference-image {

  position: absolute;

  left: -.10%;
  top: -.10%;

  width: 100.20%;
  height: 100.20%;

  max-width: none;

  object-fit: fill;

  user-select: none;

  pointer-events: none;

  transform:

    translate3d(
      calc(var(--cmx6) * -1.65px),
      calc(var(--cmy6) * -1.05px),
      0
    )

    scale(1.0015);

  transform-origin: center;

  backface-visibility: hidden;

  will-change: transform;

  filter: none;
}


/* ==========================================================
   CURSOR LIGHTFIELD
========================================================== */

.connect-photon-lightfield {

  position: absolute;

  inset: -10%;

  z-index: 3;

  pointer-events: none;

  background:

    radial-gradient(
      circle at
      var(--cpx6)
      var(--cpy6),

      rgba(232,228,240,.055),

      rgba(30,79,143,.034) 14%,

      rgba(91,45,142,.023) 25%,

      transparent 42%
    );

  mix-blend-mode: screen;

  opacity: .50;
}


/* ==========================================================
   ARCHITECTURAL SWEEP
========================================================== */

.connect-photon-sweep {

  position: absolute;

  inset: -40%;

  z-index: 4;

  pointer-events: none;

  background:

    linear-gradient(
      112deg,

      transparent 39%,

      rgba(232,228,240,0) 44%,

      rgba(232,228,240,.043) 48%,

      rgba(30,79,143,.034) 50%,

      rgba(91,45,142,.028) 52%,

      rgba(232,228,240,0) 57%,

      transparent 62%
    );

  mix-blend-mode: screen;

  animation:

    connectSweep
    14s
    ease-in-out
    infinite;
}


@keyframes connectSweep {

  0%,
  20% {

    transform:
      translateX(-25%);

    opacity: .14;
  }


  55% {

    transform:
      translateX(20%);

    opacity: .40;
  }


  100% {

    transform:
      translateX(47%);

    opacity: .13;
  }

}


/* ==========================================================
   DEPTH
========================================================== */

.connect-depth-vignette {

  position: absolute;

  inset: 0;

  z-index: 6;

  pointer-events: none;

  background:

    linear-gradient(
      90deg,

      rgba(0,0,0,.03),

      transparent 10%,

      transparent 90%,

      rgba(0,0,0,.04)
    ),

    linear-gradient(
      180deg,

      rgba(0,0,0,.016),

      transparent 18%,

      transparent 85%,

      rgba(0,0,0,.04)
    );
}


/* ==========================================================
   SIX PORTALS

   Generous invisible targets.
   Only micro-photon feedback is visible.
========================================================== */

.connect-portal {

  position: absolute;

  z-index: 46;

  appearance: none;

  padding: 0;
  margin: 0;

  border: 0;

  border-radius: 50%;

  background: transparent;

  outline: none;

  cursor: pointer;

  -webkit-tap-highlight-color: transparent;
}


/* TOP LEFT — NO TEA NO SHADE */

.portal-notea {

  left: 16.3%;

  top: 27.7%;

  width: 21.3%;

  height: 27%;
}


/* TOP CENTER — VIEW|CAST */

.portal-viewcast {

  left: 39.3%;

  top: 27.7%;

  width: 21.3%;

  height: 27%;
}


/* TOP RIGHT — V.O.S|CAST */

.portal-voscast {

  left: 62.4%;

  top: 27.7%;

  width: 21.3%;

  height: 27%;
}


/* BOTTOM LEFT — SUPPORTER */

.portal-supporter {

  left: 16.3%;

  top: 56.1%;

  width: 21.3%;

  height: 27%;
}


/* BOTTOM CENTER — TOURMALUX */

.portal-tourmalux {

  left: 39.3%;

  top: 56.1%;

  width: 21.3%;

  height: 27%;
}


/* BOTTOM RIGHT — DIRECT CONTACT */

.portal-contact {

  left: 62.4%;

  top: 56.1%;

  width: 21.3%;

  height: 27%;
}


/* ==========================================================
   PORTAL MICRO PHOTON INDICATOR
========================================================== */

.connect-portal::after {

  content: "";

  position: absolute;

  left: 50%;

  bottom: 12%;

  width: 0;

  height: 1px;

  border-radius: 999px;

  opacity: 0;

  pointer-events: none;

  transform:
    translateX(-50%);

  background:

    linear-gradient(
      90deg,

      transparent,

      rgba(30,79,143,.72),

      rgba(232,228,240,.94),

      rgba(91,45,142,.64),

      transparent
    );

  transition:

    width .20s ease,

    opacity .18s ease,

    box-shadow .18s ease;
}


.connect-portal::before {

  content: "";

  position: absolute;

  left: 50%;

  bottom: 10.8%;

  width: 4px;
  height: 4px;

  border-radius: 50%;

  opacity: 0;

  pointer-events: none;

  transform:

    translateX(-50%)

    scale(.65);

  background:
    rgba(232,228,240,.96);

  box-shadow:

    0 0 5px
    rgba(232,228,240,.55),

    0 0 10px
    rgba(30,79,143,.38),

    0 0 14px
    rgba(91,45,142,.20);

  transition:

    opacity .18s ease,

    transform .18s ease;
}


.connect-portal:hover::after,
.connect-portal:focus-visible::after {

  width: 38px;

  opacity: .82;

  box-shadow:

    0 0 5px
    rgba(232,228,240,.26),

    0 0 11px
    rgba(30,79,143,.20);
}


.connect-portal:hover::before,
.connect-portal:focus-visible::before {

  opacity: .88;

  transform:

    translateX(-50%)

    scale(1);
}


/* no browser focus box */

.connect-portal:focus,
.connect-portal:focus-visible,
.connect-portal:active {

  outline: none !important;

  border-color: transparent !important;

  background: transparent !important;
}


/* ==========================================================
   STAGED VIEW|CAST

   Slightly quieter micro response until destination exists.
========================================================== */

.portal-viewcast[data-staged="true"]::after {

  background:

    linear-gradient(
      90deg,

      transparent,

      rgba(91,45,142,.48),

      rgba(232,228,240,.72),

      rgba(91,45,142,.48),

      transparent
    );
}


/* ==========================================================
   NAVIGATION
========================================================== */

.connect-hotspot-layer {

  position: absolute;

  inset: 0;

  z-index: 50;

  pointer-events: none;
}


.connect-brand-hit,
.connect-nav {

  position: absolute;

  appearance: none;

  margin: 0;
  padding: 0;

  border: 0;

  background: transparent;

  outline: none;

  cursor: pointer;

  pointer-events: auto;

  -webkit-tap-highlight-color: transparent;
}


.connect-brand-hit {

  left: 14%;

  top: 1.2%;

  width: 13%;

  height: 6.2%;
}


/* ==========================================================
   NAVIGATION HOTSPOTS
========================================================== */

.connect-hotspot-layer .nav-welcome {

  left: 48.0%;

  top: .8%;

  width: 6.5%;
  height: 6.1%;
}


.connect-hotspot-layer .nav-chromatic {

  left: 54.3%;

  top: .8%;

  width: 7.5%;
  height: 6.1%;
}


.connect-hotspot-layer .nav-services {

  left: 61.5%;

  top: .8%;

  width: 6.7%;
  height: 6.1%;
}


.connect-hotspot-layer .nav-built {

  left: 68.0%;

  top: .8%;

  width: 5.3%;
  height: 6.1%;
}


.connect-hotspot-layer .nav-supporter {

  left: 73.0%;

  top: .8%;

  width: 7.7%;
  height: 6.1%;
}


.connect-hotspot-layer .nav-connect {

  left: 80.4%;

  top: .8%;

  width: 6.8%;
  height: 6.1%;
}


/* ==========================================================
   APPROVED MICRO NAV INTERACTION
========================================================== */

.connect-nav::after {

  content: "";

  position: absolute;

  left: 50%;

  bottom: 10%;

  width: 0;

  height: 1px;

  opacity: 0;

  pointer-events: none;

  transform:
    translateX(-50%);

  background:

    linear-gradient(
      90deg,

      transparent,

      rgba(30,79,143,.72),

      rgba(232,228,240,.94),

      rgba(91,45,142,.64),

      transparent
    );

  transition:

    width .20s ease,

    opacity .20s ease;
}


.connect-nav::before {

  content: "";

  position: absolute;

  left: 50%;

  bottom: 8.6%;

  width: 4px;
  height: 4px;

  border-radius: 50%;

  opacity: 0;

  pointer-events: none;

  transform:

    translateX(-50%)

    scale(.65);

  background:
    rgba(232,228,240,.96);

  box-shadow:

    0 0 5px
    rgba(232,228,240,.55),

    0 0 10px
    rgba(30,79,143,.38),

    0 0 14px
    rgba(91,45,142,.20);

  transition:

    opacity .18s ease,

    transform .18s ease;
}


.connect-nav:hover::after,
.connect-nav:focus-visible::after {

  width: 28px;

  opacity: .82;
}


.connect-nav:hover::before,
.connect-nav:focus-visible::before {

  opacity: .88;

  transform:

    translateX(-50%)

    scale(1);
}


/* Connect already active in rendered artwork */

.connect-hotspot-layer
.nav-connect:hover::after {

  width: 20px;

  opacity: .55;
}


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

@media (max-width: 900px) {

  .connect-reference-image {

    left: 50%;

    top: 50%;

    width: auto;

    height: 100%;

    min-width: 100%;

    object-fit: cover;

    transform:

      translate(
        calc(-50% + var(--cmx6) * -1px),
        calc(-50% + var(--cmy6) * -.7px)
      )

      scale(1.005);
  }

}


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

  .connect-reference-image {

    transform: none !important;
  }


  .connect-photon-sweep {

    animation: none !important;
  }

}