/* ==========================================================
   VIRELION_OS — SUPPORTER HYBRID CHAMBER
========================================================== */

#page5 {
  --pmx: 0;
  --pmy: 0;

  --ppx: 50%;
  --ppy: 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;
}


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


/* Render already contains nav/footer */

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

  opacity: 0 !important;

  visibility: hidden !important;

  pointer-events: none !important;
}


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

  z-index: 30 !important;

  opacity: .08 !important;

  mix-blend-mode: screen;

  pointer-events: none !important;
}


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

.supporter-reference-stage {

  position: absolute;

  inset: 0;

  overflow: hidden;

  background: #05060B;

  perspective: 1600px;
}


.supporter-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(--pmx) * -1.65px),
      calc(var(--pmy) * -1.05px),
      0
    )

    scale(1.0015);

  transform-origin: center;

  backface-visibility: hidden;

  will-change: transform;

  filter: none;
}


/* ==========================================================
   POINTER LIGHTFIELD
========================================================== */

.supporter-photon-lightfield {

  position: absolute;

  inset: -10%;

  z-index: 3;

  pointer-events: none;

  background:

    radial-gradient(
      circle at
      var(--ppx)
      var(--ppy),

      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;
}


/* ==========================================================
   SLOW ARCHITECTURAL LIGHT SWEEP
========================================================== */

.supporter-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:

    supporterSweep
    14s
    ease-in-out
    infinite;
}


@keyframes supporterSweep {

  0%,
  20% {

    transform:
      translateX(-25%);

    opacity: .14;
  }


  55% {

    transform:
      translateX(20%);

    opacity: .40;
  }


  100% {

    transform:
      translateX(47%);

    opacity: .13;
  }

}


/* ==========================================================
   LEFT COVER ILLUMINATION

   No fake card redraw.
   Only lighting the existing rendered crystal/cover.
========================================================== */

.supporter-cover-lens {

  position: absolute;

  z-index: 5;

  left: 15%;

  top: 14%;

  width: 31%;

  height: 69%;

  border-radius: 28px;

  pointer-events: none;

  background:

    radial-gradient(
      circle at
      calc(50% + var(--pmx) * 18%)
      calc(45% + var(--pmy) * 16%),

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

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

      rgba(30,79,143,.022) 42%,

      transparent 66%
    );

  mix-blend-mode: screen;

  opacity: .53;

  transform:

    translate3d(
      calc(var(--pmx) * 1.5px),
      calc(var(--pmy) * 1px),
      0
    );
}


/* ==========================================================
   RIGHT INFORMATION PANEL ILLUMINATION
========================================================== */

.supporter-panel-lens {

  position: absolute;

  z-index: 5;

  left: 49%;

  top: 23%;

  width: 39%;

  height: 57%;

  border-radius: 22px;

  pointer-events: none;

  background:

    radial-gradient(
      circle at
      calc(42% + var(--pmx) * 16%)
      calc(30% + var(--pmy) * 12%),

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

      rgba(30,79,143,.025) 31%,

      transparent 57%
    );

  mix-blend-mode: screen;

  opacity: .48;
}


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

.supporter-depth-vignette {

  position: absolute;

  inset: 0;

  z-index: 6;

  pointer-events: none;

  background:

    linear-gradient(
      90deg,

      rgba(0,0,0,.035),

      transparent 11%,

      transparent 89%,

      rgba(0,0,0,.045)
    ),

    linear-gradient(
      180deg,

      rgba(0,0,0,.018),

      transparent 20%,

      transparent 84%,

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


/* ==========================================================
   MAIN SUPPORTER CTA

   Large invisible click area.
   Tiny micro-photon response only.
========================================================== */

.supporter-cta {

  position: absolute;

  z-index: 48;

  /*
   * Rendered Visit VOSsupporter.com button.
   */

  left: 53.2%;

  top: 66.2%;

  width: 21.8%;

  height: 7%;

  border: 0;

  border-radius: 999px;

  background: transparent;

  outline: none;

  cursor: pointer;

  text-decoration: none;

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


/* photon line */

.supporter-cta::after {

  content: "";

  position: absolute;

  left: 50%;

  bottom: 13%;

  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;
}


/* photon node */

.supporter-cta::before {

  content: "";

  position: absolute;

  left: 50%;

  bottom: 11.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;
}


.supporter-cta:hover::after,
.supporter-cta:focus-visible::after {

  width: 36px;

  opacity: .82;

  box-shadow:

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

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


.supporter-cta:hover::before,
.supporter-cta:focus-visible::before {

  opacity: .88;

  transform:

    translateX(-50%)

    scale(1);
}


/* No visible browser focus box */

.supporter-cta:focus,
.supporter-cta:focus-visible,
.supporter-cta:active {

  outline: none !important;

  border-color: transparent !important;

  background: transparent !important;
}


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

.supporter-hotspot-layer {

  position: absolute;

  inset: 0;

  z-index: 50;

  pointer-events: none;
}


.supporter-brand-hit,
.supporter-nav {

  position: absolute;

  appearance: none;

  padding: 0;
  margin: 0;

  border: 0;

  background: transparent;

  outline: none;

  cursor: pointer;

  pointer-events: auto;

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


.supporter-brand-hit {

  left: 14%;

  top: 1.2%;

  width: 13%;

  height: 6.2%;
}


/* ==========================================================
   NAV HOTSPOTS
========================================================== */

.supporter-hotspot-layer .nav-welcome {

  left: 48.0%;
  top: .8%;

  width: 6.5%;
  height: 6.1%;
}


.supporter-hotspot-layer .nav-chromatic {

  left: 54.3%;
  top: .8%;

  width: 7.5%;
  height: 6.1%;
}


.supporter-hotspot-layer .nav-services {

  left: 61.5%;
  top: .8%;

  width: 6.7%;
  height: 6.1%;
}


.supporter-hotspot-layer .nav-built {

  left: 68.0%;
  top: .8%;

  width: 5.3%;
  height: 6.1%;
}


.supporter-hotspot-layer .nav-supporter {

  left: 73.0%;
  top: .8%;

  width: 7.7%;
  height: 6.1%;
}


.supporter-hotspot-layer .nav-connect {

  left: 80.4%;
  top: .8%;

  width: 6.8%;
  height: 6.1%;
}


/* ==========================================================
   APPROVED MICRO PHOTON NAVIGATION
========================================================== */

.supporter-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;
}


.supporter-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;
}


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

  width: 28px;

  opacity: .82;
}


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

  opacity: .88;

  transform:

    translateX(-50%)

    scale(1);
}


/*
 * Supporter already carries the active gold pill
 * inside the rendered master.
 */

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

  width: 20px;

  opacity: .55;
}


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

@media (max-width: 900px) {

  .supporter-reference-image {

    left: 50%;
    top: 50%;

    width: auto;

    height: 100%;

    min-width: 100%;

    object-fit: cover;

    transform:

      translate(
        calc(-50% + var(--pmx) * -1px),
        calc(-50% + var(--pmy) * -.7px)
      )

      scale(1.005);
  }

}


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

  .supporter-reference-image,
  .supporter-cover-lens {

    transform: none !important;
  }


  .supporter-photon-sweep {

    animation: none !important;
  }

}