/* ==========================================================
   VIRELION_OS — WELCOME HYBRID EXPERIENCE

   High-fidelity artwork = visual foundation
   HTML/JS = interaction, navigation, motion and accessibility
========================================================== */


/* ==========================================================
   FULL-VIEWPORT WELCOME CHAMBER
========================================================== */

#page1 {
  --mx: 0;
  --my: 0;

  --px: 50%;
  --py: 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;
}


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


/* ==========================================================
   REMOVE THE GLOBAL DUPLICATES ONLY WHILE WELCOME IS ACTIVE

   The Welcome artwork already contains its own:
   - header
   - navigation
   - footer
========================================================== */

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

  opacity: 0 !important;

  visibility: hidden !important;

  pointer-events: none !important;
}


/* Keep existing particle system very subtle. */

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

  z-index: 30 !important;

  opacity: .11 !important;

  mix-blend-mode: screen;

  pointer-events: none !important;
}


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

.welcome-reference-stage {

  position: absolute;

  inset: 0;

  overflow: hidden;

  background: #05060B;

  perspective: 1600px;
}


/* ==========================================================
   THE ORIGINAL RENDERED COMPOSITION

   Small parallax ONLY.
   No aggressive distortion.
========================================================== */

.welcome-reference-image {

  position: absolute;

  left: -0.65%;
  top: -0.65%;

  width: 101.3%;
  height: 101.3%;

  max-width: none;

  object-fit: fill;

  user-select: none;

  pointer-events: none;

  transform:

    translate3d(
      calc(var(--mx) * -3.5px),
      calc(var(--my) * -2.4px),
      0
    )

    scale(1.006);

  transform-origin: center;

  will-change: transform;

  filter:

    saturate(1.015)

    contrast(1.01)

    brightness(1.005);
}


/* ==========================================================
   POINTER-RESPONSIVE PHOTONIC LIGHT

   This is what keeps the foundation from feeling dead.
========================================================== */

.welcome-photon-lightfield {

  position: absolute;

  inset: -10%;

  z-index: 3;

  pointer-events: none;

  background:

    radial-gradient(
      circle at var(--px) var(--py),

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

      rgba(30,79,143,.065) 10%,

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

      transparent 41%
    );

  mix-blend-mode: screen;

  opacity: .88;

  transition: opacity .25s ease;
}


/* ==========================================================
   VERY SLOW GLASS / ARCHITECTURAL LIGHT SWEEP
========================================================== */

.welcome-photon-sweep {

  position: absolute;

  z-index: 4;

  inset: -40%;

  pointer-events: none;

  background:

    linear-gradient(
      112deg,

      transparent 39%,

      rgba(232,228,240,.00) 43%,

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

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

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

      rgba(232,228,240,.00) 57%,

      transparent 62%
    );

  transform: translateX(-23%);

  mix-blend-mode: screen;

  animation:
    welcomeSweep
    12s
    ease-in-out
    infinite;
}


@keyframes welcomeSweep {

  0%,
  20% {

    transform:
      translateX(-25%);

    opacity: .22;
  }


  55% {

    transform:
      translateX(20%);

    opacity: .64;
  }


  100% {

    transform:
      translateX(47%);

    opacity: .20;
  }

}


/* ==========================================================
   PHOTON GRID INTERFACE LIVE LENS

   Positioned over the rendered cube/orbits.
   Doesn't redraw them — it LIGHTS them dynamically.
========================================================== */

.welcome-reactor-lens {

  position: absolute;

  z-index: 5;

  left: 57.5%;

  top: 12%;

  width: 34%;

  height: 62%;

  border-radius: 50%;

  pointer-events: none;

  background:

    radial-gradient(
      circle at
      calc(50% + var(--mx) * 18%)
      calc(48% + var(--my) * 16%),

      rgba(255,255,255,.12) 0%,

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

      rgba(30,79,143,.045) 26%,

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

      transparent 65%
    );

  mix-blend-mode: screen;

  filter: blur(3px);

  transform:

    perspective(1100px)

    rotateX(
      calc(var(--my) * -1.5deg)
    )

    rotateY(
      calc(var(--mx) * 2deg)
    )

    translate3d(
      calc(var(--mx) * 3px),
      calc(var(--my) * 2px),
      0
    );

  transform-origin: center;

  will-change: transform;
}


/* ==========================================================
   CINEMATIC EDGE DEPTH
========================================================== */

.welcome-depth-vignette {

  position: absolute;

  inset: 0;

  z-index: 6;

  pointer-events: none;

  background:

    linear-gradient(
      90deg,

      rgba(0,0,0,.08),

      transparent 12%,

      transparent 88%,

      rgba(0,0,0,.08)
    ),

    linear-gradient(
      180deg,

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

      transparent 18%,

      transparent 83%,

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


/* ==========================================================
   REAL HTML HOTSPOT LAYER
========================================================== */

.welcome-hotspot-layer {

  position: absolute;

  inset: 0;

  z-index: 50;

  pointer-events: none;
}


.welcome-hit {

  position: absolute;

  appearance: none;

  padding: 0;
  margin: 0;

  border: 1px solid transparent;

  background: transparent;

  color: transparent;

  border-radius: 999px;

  cursor: pointer;

  pointer-events: auto;

  -webkit-tap-highlight-color: transparent;

  outline: none;

  transition:

    border-color .18s ease,

    box-shadow .18s ease,

    background .18s ease,

    transform .18s ease;
}


/* Focus remains accessible without ruining normal appearance. */

.welcome-hit:focus-visible {

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

  box-shadow:

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

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


/* ==========================================================
   TOP NAVIGATION COORDINATES

   Derived from the approved 16:9 composition.
========================================================== */

.welcome-brand-hit {

  left: 14%;

  top: 1.2%;

  width: 13%;

  height: 6.2%;
}


.nav-welcome {

  left: 53.0%;

  top: .8%;

  width: 7.3%;

  height: 6.1%;
}


.nav-chromatic {

  left: 60.5%;

  top: .8%;

  width: 7.6%;

  height: 6.1%;
}


.nav-services {

  left: 67.9%;

  top: .8%;

  width: 6.7%;

  height: 6.1%;
}


.nav-built {

  left: 74.4%;

  top: .8%;

  width: 5.8%;

  height: 6.1%;
}


.nav-supporter {

  left: 79.9%;

  top: .8%;

  width: 7.3%;

  height: 6.1%;
}


.nav-connect {

  left: 86.7%;

  top: .8%;

  width: 7.0%;

  height: 6.1%;
}


/* tiny navigation response */

.nav-welcome:hover,
.nav-chromatic:hover,
.nav-services:hover,
.nav-built:hover,
.nav-supporter:hover,
.nav-connect:hover {

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

  box-shadow:
    0 0 24px
    rgba(212,175,122,.10);
}


/* ==========================================================
   MAIN CTA COORDINATES
========================================================== */

.welcome-services-cta {

  left: 17.4%;

  top: 62.3%;

  width: 17.3%;

  height: 6.3%;
}


.welcome-connect-cta {

  left: 35.0%;

  top: 62.3%;

  width: 17.2%;

  height: 6.3%;
}


/* ==========================================================
   CTA PHOTON HOVER

   Adds life without replacing the rendered design.
========================================================== */

.welcome-cta:hover {

  transform:
    translateY(-1px);

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

  background:

    radial-gradient(
      circle at
      var(--hx,50%)
      var(--hy,50%),

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

      transparent 45%
    );

  box-shadow:

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

    0 0 28px
    rgba(30,79,143,.28),

    0 0 44px
    rgba(91,45,142,.10),

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


.welcome-connect-cta:hover {

  box-shadow:

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

    0 0 27px
    rgba(91,45,142,.24),

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


/* ==========================================================
   SCREEN-READER CONTENT
========================================================== */

.sr-only {

  position: absolute !important;

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

  padding: 0 !important;

  margin: -1px !important;

  overflow: hidden !important;

  clip: rect(0,0,0,0) !important;

  white-space: nowrap !important;

  border: 0 !important;
}


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

   Desktop reference is 16:9.
   Mobile crop tuning comes after desktop approval.
========================================================== */

@media (max-width: 900px) {

  .welcome-reference-image {

    left: 50%;
    top: 50%;

    width: auto;

    height: 100%;

    min-width: 100%;

    object-fit: cover;

    transform:

      translate(
        calc(-50% + var(--mx) * -2px),
        calc(-50% + var(--my) * -1px)
      )

      scale(1.01);
  }


  .welcome-reactor-lens {

    opacity: .72;
  }

}


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

  .welcome-reference-image {

    transform: none !important;
  }


  .welcome-photon-sweep {

    animation: none !important;

    opacity: .18;
  }


  .welcome-reactor-lens {

    transform: none !important;
  }

}

/* ==========================================================
   WELCOME CRISPNESS / FOCUS REFINEMENT
   Goal:
   - sharper artwork
   - less haze
   - more photoreal clarity
   - preserve the successful hybrid structure
========================================================== */

#page1 .welcome-reference-image {

  /* reduce overscale softening */
  left: -0.15%;
  top: -0.15%;

  width: 100.3%;
  height: 100.3%;

  /* gentler motion = less blur perception */
  transform:
    translate3d(
      calc(var(--mx) * -2.1px),
      calc(var(--my) * -1.4px),
      0
    )
    scale(1.001);

  /* sharpen perceived clarity */
  filter:
    saturate(1.055)
    contrast(1.085)
    brightness(1.01);

  image-rendering: auto;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  transform-style: preserve-3d;
  will-change: transform;
}


/* reduce atmospheric haze so the artwork reads cleaner */
#page1 .welcome-photon-lightfield {

  opacity: .54;

  background:
    radial-gradient(
      circle at var(--px) var(--py),
      rgba(232,228,240,.07) 0%,
      rgba(30,79,143,.045) 11%,
      rgba(91,45,142,.022) 23%,
      transparent 39%
    );
}


/* reduce blur wash from the sweep */
#page1 .welcome-photon-sweep {

  opacity: .26;
  animation-duration: 14s;
}


/* tighten the cube/reactor glow so it feels more focused */
#page1 .welcome-reactor-lens {

  opacity: .72;

  filter: blur(1.35px);

  background:
    radial-gradient(
      circle at
      calc(50% + var(--mx) * 16%)
      calc(48% + var(--my) * 14%),
      rgba(255,255,255,.10) 0%,
      rgba(232,228,240,.05) 10%,
      rgba(30,79,143,.036) 24%,
      rgba(91,45,142,.018) 39%,
      transparent 61%
    );

  transform:
    perspective(1100px)
    rotateX(calc(var(--my) * -1.1deg))
    rotateY(calc(var(--mx) * 1.5deg))
    translate3d(
      calc(var(--mx) * 2px),
      calc(var(--my) * 1.4px),
      0
    );
}


/* slightly cleaner edge depth; less muddy darkening */
#page1 .welcome-depth-vignette {

  background:
    linear-gradient(
      90deg,
      rgba(0,0,0,.05),
      transparent 12%,
      transparent 88%,
      rgba(0,0,0,.05)
    ),
    linear-gradient(
      180deg,
      rgba(0,0,0,.02),
      transparent 18%,
      transparent 84%,
      rgba(0,0,0,.05)
    );
}


/* make CTA hover light look a little crisper */
#page1 .welcome-cta:hover {

  box-shadow:
    0 0 10px rgba(232,228,240,.12),
    0 0 22px rgba(30,79,143,.24),
    0 0 34px rgba(91,45,142,.08),
    inset 0 0 10px rgba(255,255,255,.02);
}


/* maintain desktop sharpness on smaller screens too */
@media (max-width: 900px) {

  #page1 .welcome-reference-image {
    filter:
      saturate(1.05)
      contrast(1.07)
      brightness(1.01);
  }

  #page1 .welcome-photon-lightfield {
    opacity: .44;
  }

  #page1 .welcome-reactor-lens {
    opacity: .62;
    filter: blur(1.1px);
  }
}


/* ==========================================================
   VIRELION_OS — CRISP WELCOME MASTER
   Preserve breathing motion without softening the PNG.
========================================================== */

#page1 .welcome-reference-image {
  left: -0.10% !important;
  top: -0.10% !important;

  width: 100.20% !important;
  height: 100.20% !important;

  object-fit: fill !important;

  /*
   * Keep the approved breathing/parallax effect,
   * but restrict movement so fine details stay focused.
   */
  transform:
    translate3d(
      calc(var(--mx) * -1.75px),
      calc(var(--my) * -1.15px),
      0
    )
    scale(1.0015) !important;

  /*
   * The new PNG already contains the intended contrast,
   * color and edge definition. Don't artificially process it.
   */
  filter: none !important;

  image-rendering: auto;

  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;

  transform-origin: center center;

  will-change: transform;
}


/*
 * Preserve photonic responsiveness while preventing
 * atmospheric overlays from washing out the new master.
 */

#page1 .welcome-photon-lightfield {
  opacity: .42 !important;
}


#page1 .welcome-photon-sweep {
  opacity: .20;
}


#page1 .welcome-reactor-lens {
  opacity: .54 !important;
  filter: blur(.65px) !important;
}


#page1 .welcome-depth-vignette {
  opacity: .74;
}


/*
 * Keep the interactive CTA response crisp.
 */

#page1 .welcome-cta:hover {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}


/* ==========================================================
   APPROVED WELCOME — NAVIGATION PHOTON HOVER
========================================================== */

#page1 .nav-welcome:hover,
#page1 .nav-chromatic:hover,
#page1 .nav-services:hover,
#page1 .nav-built:hover,
#page1 .nav-supporter:hover,
#page1 .nav-connect: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);
}


/* ==========================================================
   VIRELION_OS — INTERACTION STANDARD v1
   WELCOME NAVIGATION MICRO PHOTON INDICATOR

   No visible hover boxes.
   Invisible click target remains generous.
========================================================== */


/* ==========================================================
   REMOVE PREVIOUS NAVIGATION HOVER FRAME
========================================================== */

#page1 .nav-welcome,
#page1 .nav-chromatic,
#page1 .nav-services,
#page1 .nav-built,
#page1 .nav-supporter,
#page1 .nav-connect,

#page1 .nav-welcome:hover,
#page1 .nav-chromatic:hover,
#page1 .nav-services:hover,
#page1 .nav-built:hover,
#page1 .nav-supporter:hover,
#page1 .nav-connect:hover,

#page1 .nav-welcome:focus-visible,
#page1 .nav-chromatic:focus-visible,
#page1 .nav-services:focus-visible,
#page1 .nav-built:focus-visible,
#page1 .nav-supporter:focus-visible,
#page1 .nav-connect:focus-visible {

  transform: none !important;

  border-color: transparent !important;

  background: transparent !important;

  box-shadow: none !important;
}


/* ==========================================================
   MICRO PHOTON TRACE
========================================================== */

#page1 .nav-welcome::after,
#page1 .nav-chromatic::after,
#page1 .nav-services::after,
#page1 .nav-built::after,
#page1 .nav-supporter::after,
#page1 .nav-connect::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,.72),

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

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

      transparent
    ) !important;

  opacity: 0 !important;

  pointer-events: none !important;

  transform:
    translateX(-50%) !important;

  box-shadow:
    none !important;

  transition:

    width .20s ease,

    opacity .20s ease,

    box-shadow .20s ease !important;
}


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

#page1 .nav-welcome::before,
#page1 .nav-chromatic::before,
#page1 .nav-services::before,
#page1 .nav-built::before,
#page1 .nav-supporter::before,
#page1 .nav-connect::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,.96) !important;

  opacity: 0 !important;

  pointer-events: none !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;

  transition:

    opacity .18s ease,

    transform .18s ease !important;
}


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

#page1 .nav-welcome:hover::after,
#page1 .nav-chromatic:hover::after,
#page1 .nav-services:hover::after,
#page1 .nav-built:hover::after,
#page1 .nav-supporter:hover::after,
#page1 .nav-connect:hover::after,

#page1 .nav-welcome:focus-visible::after,
#page1 .nav-chromatic:focus-visible::after,
#page1 .nav-services:focus-visible::after,
#page1 .nav-built:focus-visible::after,
#page1 .nav-supporter:focus-visible::after,
#page1 .nav-connect: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;
}


#page1 .nav-welcome:hover::before,
#page1 .nav-chromatic:hover::before,
#page1 .nav-services:hover::before,
#page1 .nav-built:hover::before,
#page1 .nav-supporter:hover::before,
#page1 .nav-connect:hover::before,

#page1 .nav-welcome:focus-visible::before,
#page1 .nav-chromatic:focus-visible::before,
#page1 .nav-services:focus-visible::before,
#page1 .nav-built:focus-visible::before,
#page1 .nav-supporter:focus-visible::before,
#page1 .nav-connect:focus-visible::before {

  opacity: .88 !important;

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


/* ==========================================================
   ACTIVE WELCOME ITEM
   Artwork already contains the gold active pill.
   Keep overlay extremely restrained.
========================================================== */

#page1 .nav-welcome:hover::after {

  width: 20px !important;

  opacity: .55 !important;
}


#page1 .nav-welcome:hover::before {

  opacity: .65 !important;
}


/* ==========================================================
   WELCOME CTA INTERACTION STANDARD

   Keep rendered button appearance untouched.
   Remove any obvious overlay frame.
   Use a tiny photonic indicator inside the button region.
========================================================== */

#page1 .welcome-cta,
#page1 .welcome-cta:hover,
#page1 .welcome-cta:focus-visible {

  border-color: transparent !important;

  background: transparent !important;

  box-shadow: none !important;

  transform: none !important;
}


/* tiny bottom-center trace */

#page1 .welcome-cta::after {

  content: "";

  position: absolute;

  left: 50%;

  bottom: 13%;

  width: 0;

  height: 1px;

  border-radius: 999px;

  pointer-events: none;

  opacity: 0;

  transform:
    translateX(-50%);

  background:

    linear-gradient(
      90deg,

      transparent,

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

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

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

      transparent
    );

  transition:

    width .20s ease,

    opacity .18s ease,

    box-shadow .18s ease;
}


#page1 .welcome-cta::before {

  content: "";

  position: absolute;

  left: 50%;

  bottom: 11.6%;

  width: 4px;

  height: 4px;

  border-radius: 50%;

  pointer-events: none;

  opacity: 0;

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

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

  box-shadow:

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

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

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

  transition:

    opacity .18s ease,

    transform .18s ease;
}


#page1 .welcome-cta:hover::after,
#page1 .welcome-cta:focus-visible::after {

  width: 34px;

  opacity: .80;

  box-shadow:

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

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


#page1 .welcome-cta:hover::before,
#page1 .welcome-cta:focus-visible::before {

  opacity: .86;

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