/* ==========================================================
   VIRELION_OS — CHROMATIC HYBRID EXPERIENCE
========================================================== */

#page2 {
  --cmx: 0;
  --cmy: 0;

  --cpx: 50%;
  --cpy: 50%;

  position: fixed !important;

  inset: 0 !important;

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

  min-height: 100svh !important;

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

  overflow: hidden !important;

  background: #05060B !important;

  isolation: isolate;
}


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


/* Artwork already contains navbar/footer */

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

  opacity: 0 !important;

  visibility: hidden !important;

  pointer-events: none !important;
}


/* retain faint ambient particle activity */

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

  z-index: 30 !important;

  opacity: .10 !important;

  mix-blend-mode: screen;

  pointer-events: none !important;
}


/* ==========================================================
   STAGE
========================================================== */

.chromatic-reference-stage {

  position: absolute;

  inset: 0;

  overflow: hidden;

  background: #05060B;

  perspective: 1600px;
}


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

.chromatic-reference-image {

  position: absolute;

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

  width: 100.20%;
  height: 100.20%;

  max-width: none;

  object-fit: fill;

  pointer-events: none;

  user-select: none;

  transform:

    translate3d(
      calc(var(--cmx) * -1.75px),
      calc(var(--cmy) * -1.15px),
      0
    )

    scale(1.0015);

  transform-origin: center;

  backface-visibility: hidden;

  will-change: transform;

  filter: none;
}


/* ==========================================================
   GLOBAL POINTER PHOTON RESPONSE
========================================================== */

.chromatic-photon-lightfield {

  position: absolute;

  inset: -10%;

  z-index: 3;

  pointer-events: none;

  background:

    radial-gradient(
      circle at
      var(--cpx)
      var(--cpy),

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

      rgba(91,45,142,.042) 12%,

      rgba(30,79,143,.031) 23%,

      transparent 40%
    );

  mix-blend-mode: screen;

  opacity: .54;
}


/* ==========================================================
   SLOW PHOTON SWEEP
========================================================== */

.chromatic-photon-sweep {

  position: absolute;

  inset: -40%;

  z-index: 4;

  pointer-events: none;

  background:

    linear-gradient(
      113deg,

      transparent 39%,

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

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

      rgba(91,45,142,.042) 50%,

      rgba(30,79,143,.038) 52%,

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

      transparent 62%
    );

  mix-blend-mode: screen;

  transform:
    translateX(-24%);

  animation:

    chromaticSweep
    13s
    ease-in-out
    infinite;
}


@keyframes chromaticSweep {

  0%,
  20% {

    transform:
      translateX(-25%);

    opacity: .17;
  }


  55% {

    transform:
      translateX(21%);

    opacity: .48;
  }


  100% {

    transform:
      translateX(47%);

    opacity: .16;
  }

}


/* ==========================================================
   LEFT GLASS CHAMBER LIGHT RESPONSE
========================================================== */

.chromatic-panel-lens {

  position: absolute;

  z-index: 5;

  left: 10.6%;

  top: 12.5%;

  width: 44%;

  height: 71%;

  border-radius: 30px;

  pointer-events: none;

  background:

    radial-gradient(
      circle at
      calc(50% + var(--cmx) * 19%)
      calc(42% + var(--cmy) * 17%),

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

      rgba(91,45,142,.030) 22%,

      transparent 46%
    );

  mix-blend-mode: screen;

  opacity: .67;

  transform:

    translate3d(
      calc(var(--cmx) * 1.8px),
      calc(var(--cmy) * 1.1px),
      0
    );
}


/* ==========================================================
   CHROMATIC CORE / RIGHT REACTOR RESPONSE
========================================================== */

.chromatic-reactor-lens {

  position: absolute;

  z-index: 5;

  left: 58%;

  top: 10%;

  width: 34%;

  height: 65%;

  border-radius: 50%;

  pointer-events: none;

  background:

    radial-gradient(
      circle at
      calc(50% + var(--cmx) * 17%)
      calc(49% + var(--cmy) * 15%),

      rgba(255,255,255,.105),

      rgba(232,228,240,.054) 11%,

      rgba(91,45,142,.039) 23%,

      rgba(30,79,143,.027) 39%,

      transparent 62%
    );

  mix-blend-mode: screen;

  filter: blur(.65px);

  opacity: .62;

  transform:

    perspective(1100px)

    rotateX(
      calc(var(--cmy) * -1deg)
    )

    rotateY(
      calc(var(--cmx) * 1.4deg)
    )

    translate3d(
      calc(var(--cmx) * 1.8px),
      calc(var(--cmy) * 1.1px),
      0
    );

  will-change: transform;
}


/* ==========================================================
   FOUR STEP CARDS
========================================================== */

.chromatic-card-zone {

  position: absolute;

  z-index: 20;

  pointer-events: auto;

  border-radius: 12px;

  border:
    1px solid transparent;

  background:
    transparent;

  transition:

    transform .20s ease,

    box-shadow .22s ease,

    border-color .22s ease,

    background .22s ease;
}


/*
Approximate coordinates derived from the approved
Chromatic composition.
*/

.card-zone-1 {

  left: 15.2%;
  top: 61.2%;

  width: 8.5%;
  height: 17.8%;
}


.card-zone-2 {

  left: 24.0%;
  top: 61.2%;

  width: 8.5%;
  height: 17.8%;
}


.card-zone-3 {

  left: 32.9%;
  top: 61.2%;

  width: 8.5%;
  height: 17.8%;
}


.card-zone-4 {

  left: 41.8%;
  top: 61.2%;

  width: 8.5%;
  height: 17.8%;
}


.chromatic-card-zone:hover {

  transform:
    translateY(-2px);

  border-color:
    rgba(212,175,122,.25);

  background:

    radial-gradient(
      circle at 50% 42%,

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

      rgba(91,45,142,.025) 43%,

      transparent 72%
    );

  box-shadow:

    0 0 18px
    rgba(232,228,240,.06),

    0 0 34px
    rgba(91,45,142,.12),

    inset 0 0 18px
    rgba(255,255,255,.015);
}


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

.chromatic-depth-vignette {

  position: absolute;

  inset: 0;

  z-index: 6;

  pointer-events: none;

  background:

    linear-gradient(
      90deg,

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

      transparent 11%,

      transparent 89%,

      rgba(0,0,0,.05)
    ),

    linear-gradient(
      180deg,

      rgba(0,0,0,.02),

      transparent 20%,

      transparent 84%,

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


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

.chromatic-hotspot-layer {

  position: absolute;

  inset: 0;

  z-index: 50;

  pointer-events: none;
}


.chromatic-hit {

  position: absolute;

  appearance: none;

  padding: 0;
  margin: 0;

  border:
    1px solid transparent;

  border-radius:
    999px;

  background:
    transparent;

  color:
    transparent;

  cursor:
    pointer;

  pointer-events:
    auto;

  outline:
    none;

  -webkit-tap-highlight-color:
    transparent;

  transition:

    transform .18s ease,

    border-color .18s ease,

    background .18s ease,

    box-shadow .22s ease;
}


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

.chromatic-brand-hit {

  left: 14%;

  top: 1.2%;

  width: 13%;

  height: 6.2%;
}


.chromatic-hotspot-layer .nav-welcome {

  left: 50.0%;

  top: .8%;

  width: 7.3%;

  height: 6.1%;
}


.chromatic-hotspot-layer .nav-chromatic {

  left: 57.0%;

  top: .8%;

  width: 8.0%;

  height: 6.1%;
}


.chromatic-hotspot-layer .nav-services {

  left: 64.7%;

  top: .8%;

  width: 7%;

  height: 6.1%;
}


.chromatic-hotspot-layer .nav-built {

  left: 71.5%;

  top: .8%;

  width: 5.9%;

  height: 6.1%;
}


.chromatic-hotspot-layer .nav-supporter {

  left: 77.1%;

  top: .8%;

  width: 7.6%;

  height: 6.1%;
}


.chromatic-hotspot-layer .nav-connect {

  left: 84.2%;

  top: .8%;

  width: 7.3%;

  height: 6.1%;
}


/* ==========================================================
   LUXURY NAVIGATION HOVER

   Mimics illumination already rendered around active pill.
========================================================== */

.chromatic-nav:hover {

  transform:
    translateY(-1px);

  border-color:
    rgba(212,175,122,.38);

  background:

    radial-gradient(
      ellipse at center,

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

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

      transparent 72%
    );

  box-shadow:

    0 0 7px
    rgba(232,228,240,.12),

    0 0 19px
    rgba(212,175,122,.15),

    0 0 33px
    rgba(30,79,143,.14),

    0 0 46px
    rgba(91,45,142,.07),

    inset 0 0 13px
    rgba(255,255,255,.025);
}


.chromatic-hit:focus-visible {

  border-color:
    rgba(232,228,240,.68);

  box-shadow:

    0 0 0 2px
    rgba(11,11,18,.72),

    0 0 22px
    rgba(30,79,143,.38);
}


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

@media (max-width: 900px) {

  .chromatic-reference-image {

    left: 50%;
    top: 50%;

    width: auto;

    height: 100%;

    min-width: 100%;

    object-fit: cover;

    transform:

      translate(
        calc(-50% + var(--cmx) * -1px),
        calc(-50% + var(--cmy) * -.7px)
      )

      scale(1.005);
  }


  .chromatic-card-zone {

    display: none;
  }

}


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

  .chromatic-reference-image,
  .chromatic-reactor-lens,
  .chromatic-panel-lens {

    transform:
      none !important;
  }


  .chromatic-photon-sweep {

    animation:
      none !important;
  }

}


/* ==========================================================
   CHROMATIC — PRECISION NAVIGATION HOVER v2

   Click targets remain generously sized.
   The visible photon frame is independently centered
   and sized to the actual rendered navigation label.
========================================================== */


/* Never draw the hitbox itself. */

#page2 .chromatic-nav:hover,
#page2 .chromatic-nav:focus-visible {

  transform: none !important;

  border-color: transparent !important;

  background: transparent !important;

  box-shadow: none !important;
}


/* ==========================================================
   VISUAL PHOTON FRAME
========================================================== */

#page2 .chromatic-nav::after {

  content: "";

  position: absolute;

  left: 50%;
  top: 50%;

  width: var(--nav-glow-width);

  height:
    clamp(
      34px,
      4.4vh,
      42px
    );

  border-radius: 999px;

  border:
    1px solid
    rgba(212,175,122,0);

  background:

    radial-gradient(
      ellipse at center,

      rgba(232,228,240,0),

      rgba(30,79,143,0) 48%,

      transparent 72%
    );

  box-shadow: none;

  opacity: 0;

  pointer-events: none;

  transform:
    translate(-50%, -50%)
    scale(.96);

  transform-origin: center;

  transition:

    opacity .18s ease,

    transform .18s ease,

    border-color .18s ease,

    box-shadow .20s ease,

    background .20s ease;
}


/* ==========================================================
   HOVER / KEYBOARD FOCUS
========================================================== */

#page2 .chromatic-nav:hover::after,
#page2 .chromatic-nav:focus-visible::after {

  opacity: 1;

  transform:
    translate(-50%, -50%)
    scale(1);

  border-color:
    rgba(212,175,122,.46);

  background:

    radial-gradient(
      ellipse at center,

      rgba(232,228,240,.045) 0%,

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

      rgba(91,45,142,.012) 67%,

      transparent 76%
    );

  box-shadow:

    /* tight platinum edge */
    0 0 5px
    rgba(232,228,240,.12),

    /* champagne-gold frame */
    0 0 12px
    rgba(212,175,122,.20),

    /* bridge-azure photon falloff */
    0 0 22px
    rgba(30,79,143,.16),

    /* restrained violet harmonic */
    0 0 32px
    rgba(91,45,142,.07),

    /* inner glass illumination */
    inset 0 0 10px
    rgba(255,255,255,.025);
}


/* ==========================================================
   LABEL-SPECIFIC FRAME WIDTHS

   These match the actual rendered navigation proportions
   rather than the larger click/touch regions.
========================================================== */

#page2 .nav-welcome {
  --nav-glow-width:
    clamp(82px, 5.4vw, 100px);
}


#page2 .nav-chromatic {
  --nav-glow-width:
    clamp(118px, 8.1vw, 140px);
}


#page2 .nav-services {
  --nav-glow-width:
    clamp(82px, 5.3vw, 98px);
}


#page2 .nav-built {
  --nav-glow-width:
    clamp(58px, 3.8vw, 72px);
}


#page2 .nav-supporter {
  --nav-glow-width:
    clamp(84px, 5.4vw, 100px);
}


#page2 .nav-connect {
  --nav-glow-width:
    clamp(76px, 4.8vw, 90px);
}


/* ==========================================================
   CURRENT CHROMATIC ITEM

   The artwork already contains its active gold pill.
   Hovering it should only "charge" that existing pill,
   not draw a competing larger frame.
========================================================== */

#page2 .nav-chromatic:hover::after {

  border-color:
    rgba(232,228,240,.22);

  background:
    rgba(255,255,255,.012);

  box-shadow:

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

    0 0 12px
    rgba(212,175,122,.18),

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


/* ==========================================================
   CHROMATIC — NAVIGATION MICRO-INDICATOR v3

   Removes all overlay hover boxes.
   Uses only a restrained photonic underline + micro-node.
========================================================== */


/* ==========================================================
   REMOVE ALL PREVIOUS HOVER BOX VISUALS
========================================================== */

#page2 .chromatic-nav,
#page2 .chromatic-nav:hover,
#page2 .chromatic-nav:focus-visible {

  transform: none !important;

  border-color: transparent !important;

  background: transparent !important;

  box-shadow: none !important;
}


/* kill the previous large pseudo-element completely */

#page2 .chromatic-nav::after {

  content: "" !important;

  position: absolute !important;

  left: 50% !important;
  top: auto !important;

  bottom: 10% !important;

  width: 0 !important;
  height: 1px !important;

  border: 0 !important;
  border-radius: 999px !important;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(30,79,143,.70),
      rgba(232,228,240,.92),
      rgba(91,45,142,.62),
      transparent
    ) !important;

  opacity: 0 !important;

  box-shadow:
    0 0 0 transparent !important;

  transform:
    translateX(-50%) !important;

  pointer-events: none !important;

  transition:
    width .20s ease,
    opacity .20s ease,
    box-shadow .20s ease !important;
}


/* ==========================================================
   MICRO PHOTON NODE
========================================================== */

#page2 .chromatic-nav::before {

  content: "" !important;

  position: absolute !important;

  left: 50% !important;
  bottom: 8.6% !important;

  width: 4px !important;
  height: 4px !important;

  border-radius: 50% !important;

  background:
    rgba(232,228,240,.95) !important;

  opacity: 0 !important;

  transform:
    translateX(-50%)
    scale(.65) !important;

  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) !important;

  pointer-events: none !important;

  transition:
    opacity .18s ease,
    transform .18s ease !important;
}


/* ==========================================================
   HOVER RESPONSE
========================================================== */

#page2 .chromatic-nav:hover::after,
#page2 .chromatic-nav:focus-visible::after {

  width: 28px !important;

  opacity: .82 !important;

  box-shadow:

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

    0 0 10px
    rgba(30,79,143,.20) !important;
}


#page2 .chromatic-nav:hover::before,
#page2 .chromatic-nav:focus-visible::before {

  opacity: .88 !important;

  transform:
    translateX(-50%)
    scale(1) !important;
}


/* ==========================================================
   ACTIVE CHROMATIC ITEM

   Its gold pill already exists in the artwork.
   Make its overlay even more restrained.
========================================================== */

#page2 .nav-chromatic:hover::after {

  width: 20px !important;

  opacity: .55 !important;
}


#page2 .nav-chromatic:hover::before {

  opacity: .65 !important;
}