/* Cursor spotlight background effect (no dependencies)
   - Disabled on coarse pointers (touch)
   - Respects prefers-reduced-motion
*/

/* Base layer style (used for global + section-scoped spotlight) */
.cursorfx-layer,
#cursorFx {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 10; /* above content; header/modals stay above via their z-index */
  opacity: 0;
  transition: opacity 220ms ease;

  /* Default cursor position (center) */
  --mx: 50vw;
  --my: 35vh;

  /* Subtle multi-layer spotlight */
  background:
    radial-gradient(520px 520px at var(--mx) var(--my),
      rgba(14, 165, 233, 0.18),
      rgba(14, 165, 233, 0.00) 65%),
    radial-gradient(900px 620px at calc(var(--mx) + 6vw) calc(var(--my) + 4vh),
      rgba(29, 78, 216, 0.12),
      rgba(29, 78, 216, 0.00) 70%),
    radial-gradient(780px 520px at calc(var(--mx) - 10vw) calc(var(--my) + 10vh),
      rgba(245, 158, 11, 0.08),
      rgba(245, 158, 11, 0.00) 72%);

  mix-blend-mode: normal;
  filter: saturate(1.05) contrast(1.02);
}

/* Activated only when pointer is present and moving */
body.cursorfx-active #cursorFx {
  opacity: 1;
}

/* We no longer use the global overlay for the main effect; keep it disabled to avoid
   non-seamless behavior across sections and to exclude Hero entirely. */
#cursorFx { display: none; }

/* Section-scoped spotlight (behind leases content) */
.lease-section,
.promos-section,
.contact-section {
  position: relative;
}

.lease-section > .container,
.promos-section > .container,
.contact-section > .container {
  position: relative;
  z-index: 2;
}

.lease-section .cursorfx-layer,
.promos-section .cursorfx-layer,
.contact-section .cursorfx-layer {
  position: absolute;
  inset: 0;
  z-index: 1; /* above section background, below content */
}

/* Show the section layers when cursor is active (works seamlessly while scrolling) */
body.cursorfx-active .lease-section .cursorfx-layer,
body.cursorfx-active .promos-section .cursorfx-layer,
body.cursorfx-active .contact-section .cursorfx-layer {
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  #cursorFx,
  .cursorfx-layer { display: none !important; }
}

@media (pointer: coarse) {
  #cursorFx,
  .cursorfx-layer { display: none !important; }
}