/* ==========================================================
   VIRELION_OS — SERVICES HYBRID CHAMBER
========================================================== */

#page3 {
  --smx: 0;
  --smy: 0;
  --spx: 50%;
  --spy: 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;
}

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


/* artwork already contains nav/footer */

body[data-vos-page="3"] .vos-nav,
body[data-vos-page="3"] .footer-bar,
body[data-vos-page="3"] .page-dots {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

body[data-vos-page="3"] .rain-canvas {
  z-index: 30 !important;
  opacity: .08 !important;
  mix-blend-mode: screen;
  pointer-events: none !important;
}


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

.services-reference-stage {
  position: absolute;
  inset: 0;

  overflow: hidden;

  background: #05060B;

  perspective: 1600px;
}

.services-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(--smx) * -1.65px),
      calc(var(--smy) * -1.05px),
      0
    )
    scale(1.0015);

  transform-origin: center;

  backface-visibility: hidden;

  will-change: transform;

  filter: none;
}


/* ==========================================================
   AMBIENT FLUIDITY
========================================================== */

.services-photon-lightfield {
  position: absolute;

  inset: -10%;

  z-index: 3;

  pointer-events: none;

  background:
    radial-gradient(
      circle at var(--spx) var(--spy),
      rgba(232,228,240,.055),
      rgba(30,79,143,.035) 14%,
      rgba(91,45,142,.024) 25%,
      transparent 42%
    );

  mix-blend-mode: screen;

  opacity: .52;
}

.services-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,.045) 48%,
      rgba(30,79,143,.037) 50%,
      rgba(91,45,142,.030) 52%,
      rgba(232,228,240,0) 57%,
      transparent 62%
    );

  mix-blend-mode: screen;

  animation:
    servicesPhotonSweep
    14s
    ease-in-out
    infinite;
}

@keyframes servicesPhotonSweep {
  0%,20% {
    transform: translateX(-25%);
    opacity: .15;
  }

  55% {
    transform: translateX(20%);
    opacity: .42;
  }

  100% {
    transform: translateX(47%);
    opacity: .14;
  }
}

.services-depth-vignette {
  position: absolute;

  inset: 0;

  z-index: 5;

  pointer-events: none;

  background:
    linear-gradient(
      90deg,
      rgba(0,0,0,.035),
      transparent 11%,
      transparent 89%,
      rgba(0,0,0,.045)
    );
}


/* ==========================================================
   SERVICES — CLICKABLE PLATFORMS

   Generous click target.
   Visual response = micro trace only.
========================================================== */

.service-hit {
  position: absolute;

  z-index: 45;

  appearance: none;

  margin: 0;
  padding: 0;

  border: 0;

  background: transparent;

  cursor: pointer;

  outline: none;

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


/* platform coordinates */

.service-web {
  left: 9%;
  top: 34%;
  width: 36%;
  height: 29%;
}

.service-engines {
  left: 55%;
  top: 40%;
  width: 33%;
  height: 23%;
}

.service-cast {
  left: 7%;
  top: 67%;
  width: 28%;
  height: 17%;
}

.service-colorix {
  left: 35%;
  top: 66%;
  width: 28%;
  height: 18%;
}

.service-connect {
  left: 63%;
  top: 67%;
  width: 29%;
  height: 17%;
}


/* photon trace */

.service-hit::after {
  content: "";

  position: absolute;

  left: 50%;
  bottom: 7%;

  width: 0;
  height: 1px;

  border-radius: 999px;

  opacity: 0;

  transform:
    translateX(-50%);

  pointer-events: none;

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


/* micro node */

.service-hit::before {
  content: "";

  position: absolute;

  left: 50%;
  bottom: 5.8%;

  width: 4px;
  height: 4px;

  border-radius: 50%;

  opacity: 0;

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

  pointer-events: none;

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


.service-hit:hover::after,
.service-hit: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);
}

.service-hit:hover::before,
.service-hit:focus-visible::before {
  opacity: .88;

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


/* ==========================================================
   NAVIGATION
   Same approved micro-photon language
========================================================== */

.services-hotspot-layer {
  position: absolute;

  inset: 0;

  z-index: 50;

  pointer-events: none;
}

.services-nav {
  position: absolute;

  appearance: none;

  padding: 0;
  margin: 0;

  border: 0;

  background: transparent;

  cursor: pointer;

  pointer-events: auto;

  outline: none;

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


/* approximate nav positions for Services master */

.services-hotspot-layer .nav-welcome {
  left: 49.4%;
  top: .8%;
  width: 6.3%;
  height: 6.1%;
}

.services-hotspot-layer .nav-chromatic {
  left: 55.7%;
  top: .8%;
  width: 7.3%;
  height: 6.1%;
}

.services-hotspot-layer .nav-services {
  left: 62.7%;
  top: .8%;
  width: 6.7%;
  height: 6.1%;
}

.services-hotspot-layer .nav-built {
  left: 69.2%;
  top: .8%;
  width: 5.2%;
  height: 6.1%;
}

.services-hotspot-layer .nav-supporter {
  left: 74.3%;
  top: .8%;
  width: 7.4%;
  height: 6.1%;
}

.services-hotspot-layer .nav-connect {
  left: 81.3%;
  top: .8%;
  width: 6.7%;
  height: 6.1%;
}


/* same micro trace */

.services-nav::after {
  content: "";

  position: absolute;

  left: 50%;
  bottom: 10%;

  width: 0;
  height: 1px;

  opacity: 0;

  transform:
    translateX(-50%);

  pointer-events: none;

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

.services-nav::before {
  content: "";

  position: absolute;

  left: 50%;
  bottom: 8.6%;

  width: 4px;
  height: 4px;

  border-radius: 50%;

  opacity: 0;

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

  pointer-events: none;

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

.services-nav:hover::after,
.services-nav:focus-visible::after {
  width: 28px;
  opacity: .82;
}

.services-nav:hover::before,
.services-nav:focus-visible::before {
  opacity: .88;

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


/* Services already has active artwork */

.services-hotspot-layer .nav-services:hover::after {
  width: 20px;
  opacity: .55;
}


/* ==========================================================
   EXPANDED SERVICE CHAMBER
========================================================== */

.service-detail-dialog {
  width: min(780px, 82vw);

  max-height: min(700px, 82vh);

  padding: 0;

  border: 0;

  background: transparent;

  color: #E8E4F0;

  overflow: visible;
}

.service-detail-dialog::backdrop {
  background:
    rgba(3,4,10,.67);

  backdrop-filter:
    blur(9px)
    saturate(82%);

  -webkit-backdrop-filter:
    blur(9px)
    saturate(82%);
}


/* chamber */

.service-detail-chamber {
  position: relative;

  overflow: hidden;

  padding:
    clamp(34px,4vw,54px);

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

  border-radius:
    18px;

  background:
    radial-gradient(
      circle at 25% 10%,
      rgba(232,228,240,.08),
      transparent 32%
    ),
    linear-gradient(
      135deg,
      rgba(20,27,58,.92),
      rgba(7,10,27,.95) 58%,
      rgba(15,9,32,.94)
    );

  backdrop-filter:
    blur(35px)
    saturate(138%);

  box-shadow:
    0 38px 100px rgba(0,0,0,.62),
    -16px 22px 55px rgba(30,79,143,.14),
    16px 24px 58px rgba(91,45,142,.11),
    inset 0 1px rgba(232,228,240,.20),
    inset 1px 0 rgba(212,175,122,.20);

  transform:
    translateY(14px)
    scale(.97);

  opacity: 0;

  transition:
    transform 300ms cubic-bezier(.2,.75,.25,1),
    opacity 260ms ease;
}


/* opened state */

.service-detail-dialog[open]
.service-detail-chamber {
  transform:
    translateY(0)
    scale(1);

  opacity: 1;
}


/* subtle photon sheen */

.service-detail-chamber::before {
  content: "";

  position: absolute;

  inset: 0;

  pointer-events: none;

  background:
    linear-gradient(
      115deg,
      transparent 32%,
      rgba(232,228,240,.035) 47%,
      rgba(30,79,143,.030) 50%,
      transparent 66%
    );
}


/* close */

.service-detail-close {
  position: absolute;

  right: 20px;
  top: 18px;

  width: 40px;
  height: 40px;

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

  border-radius: 50%;

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

  color:
    rgba(232,228,240,.86);

  font:
    300 1.65rem/1
    system-ui,
    sans-serif;

  cursor: pointer;

  transition:
    border-color .18s ease,
    background .18s ease;
}

.service-detail-close:hover {
  border-color:
    rgba(232,228,240,.58);

  background:
    rgba(255,255,255,.06);
}


/* copy */

.service-detail-kicker {
  margin-right: 55px;

  color:
    rgba(154,202,255,.75);

  font:
    400 .72rem/1.3
    ui-monospace,
    monospace;

  letter-spacing: .18em;

  text-transform: uppercase;
}

.service-detail-chamber h2 {
  margin:
    15px 55px 0 0;

  color: #F5F3F8;

  font-family:
    Cinzel,
    Georgia,
    serif;

  font-size:
    clamp(2.15rem,4vw,3.55rem);

  line-height: 1.05;

  font-weight: 600;
}

.service-detail-subtitle {
  margin:
    12px 0 0;

  color:
    rgba(232,228,240,.72);

  font:
    400 1rem/1.5
    "Space Grotesk",
    Inter,
    sans-serif;
}

.service-detail-divider {
  width: 100%;

  height: 1px;

  margin:
    25px 0;

  background:
    linear-gradient(
      90deg,
      rgba(212,175,122,.70),
      rgba(232,228,240,.12),
      transparent
    );
}

.service-detail-body {
  margin: 0;

  color:
    rgba(232,228,240,.80);

  font:
    300
    clamp(.95rem,1.3vw,1.08rem)/1.7
    "Space Grotesk",
    Inter,
    sans-serif;
}


/* tags */

.service-detail-tags {
  display: flex;

  flex-wrap: wrap;

  gap: 8px;

  margin-top: 25px;
}

.service-detail-tags span {
  padding:
    8px 12px;

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

  border-radius:
    999px;

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

  color:
    rgba(232,228,240,.70);

  font:
    400 .75rem/1
    "Space Grotesk",
    Inter,
    sans-serif;
}


/* telemetry */

.service-detail-telemetry {
  display: flex;

  align-items: center;

  gap: 13px;

  margin-top: 30px;

  color:
    rgba(232,228,240,.52);

  font:
    400 .67rem/1
    ui-monospace,
    monospace;

  letter-spacing: .13em;
}

.service-detail-telemetry i {
  width: 42px;
  height: 1px;

  background:
    linear-gradient(
      90deg,
      rgba(212,175,122,.15),
      rgba(212,175,122,.85)
    );
}


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

@media (max-width:900px) {

  .services-reference-image {
    left: 50%;
    top: 50%;

    width: auto;
    height: 100%;

    min-width: 100%;

    object-fit: cover;

    transform:
      translate(
        calc(-50% + var(--smx) * -1px),
        calc(-50% + var(--smy) * -.7px)
      )
      scale(1.005);
  }

  .service-detail-dialog {
    width:
      min(92vw,700px);
  }

  .service-detail-chamber {
    padding:
      32px 24px;
  }

}


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

  .services-reference-image {
    transform: none !important;
  }

  .services-photon-sweep {
    animation: none !important;
  }

}


/* ==========================================================
   SERVICES — CLEAN CLOSE CONTROL
   Remove browser blue focus/active treatment.
========================================================== */

#page3 .service-detail-close,
#page3 .service-detail-close:hover,
#page3 .service-detail-close:focus,
#page3 .service-detail-close:focus-visible,
#page3 .service-detail-close:active {

  appearance: none !important;
  -webkit-appearance: none !important;

  outline: none !important;

  background:
    rgba(255,255,255,.035) !important;

  color:
    rgba(232,228,240,.90) !important;

  border:
    1px solid
    rgba(212,175,122,.34) !important;

  box-shadow:
    none !important;

  -webkit-tap-highlight-color:
    transparent !important;

  text-decoration:
    none !important;
}


/* subtle response only — no blue selection */

#page3 .service-detail-close:hover {

  background:
    rgba(255,255,255,.055) !important;

  border-color:
    rgba(212,175,122,.62) !important;

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


/* keep the X itself completely clean */

#page3 .service-detail-close span {

  display: block;

  background:
    transparent !important;

  color:
    rgba(232,228,240,.92) !important;

  user-select:
    none;

  -webkit-user-select:
    none;
}


#page3 .service-detail-close span::selection {

  background:
    transparent;

  color:
    rgba(232,228,240,.92);
}