/* Container Auto-setup */
#naizex-hero-trigger {
  position: relative !important;
  overflow: hidden !important;
}

/* Background container variables and styles */
.naizex-bg-wrapper {
  --spotlight-x: 50%;
  --spotlight-y: 50%;
  --spotlight-size: 0px;

  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  background: #161f27 !important;
  overflow: hidden !important;
  pointer-events: auto !important; /* Enables cursor reading for the script */
  z-index: 0 !important;
}

.naizex-route-reveal {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
}

.naizex-route-image {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  min-width: 100% !important;
  min-height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: cover !important;
  object-position: center !important;
  user-select: none !important;
  pointer-events: none !important;
}

.naizex-route-off {
  z-index: 1 !important;
}

.naizex-route-on {
  z-index: 2 !important;
  filter: saturate(1.05) contrast(1.02) !important;

  /* High-blurry feathered gradient transitions */
  -webkit-mask-image: radial-gradient(
    circle var(--spotlight-size) at var(--spotlight-x) var(--spotlight-y),
    #000 0%,
    rgba(0, 0, 0, 0.85) 15%,
    rgba(0, 0, 0, 0.45) 45%,
    rgba(0, 0, 0, 0.15) 70%,
    transparent 100%
  ) !important;

  mask-image: radial-gradient(
    circle var(--spotlight-size) at var(--spotlight-x) var(--spotlight-y),
    #000 0%,
    rgba(0, 0, 0, 0.85) 15%,
    rgba(0, 0, 0, 0.45) 45%,
    rgba(0, 0, 0, 0.15) 70%,
    transparent 100%
  ) !important;
}

/* Hidden elements */
.naizex-route-lens {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
}

/* Accessibility: Disable transitions/animations for motion-sensitive users */
@media (prefers-reduced-motion: reduce) {
  .naizex-bg-wrapper {
    transition: none !important;
  }
}