/* Effects layer: custom cursor, cursor spotlight, hero scroll motion, card light glow.
   All enhancements are additive and disabled under prefers-reduced-motion / touch. */

/* ---- Custom cursor (desktop, non-touch only) ---- */
html.has-cursor, html.has-cursor * { cursor: none !important; }
.cursor-dot, .cursor-ring {
  position: fixed; top: 0; left: 0; z-index: 400; pointer-events: none;
  border-radius: 50%; transform: translate(-50%, -50%);
  mix-blend-mode: screen; will-change: transform;
}
.cursor-dot { width: 7px; height: 7px; background: var(--gold-bright); }
.cursor-ring {
  width: 40px; height: 40px; border: 1px solid rgba(198, 161, 91, 0.7);
  transition: width 0.28s var(--ease), height 0.28s var(--ease), border-color 0.28s var(--ease), background 0.28s var(--ease);
}
.cursor-ring.is-hover { width: 64px; height: 64px; background: rgba(198, 161, 91, 0.12); border-color: var(--gold-bright); }
.cursor-ring.is-down { width: 28px; height: 28px; }

/* ---- Cursor spotlight (a soft gold light that follows the pointer) ---- */
.spotlight {
  position: fixed; inset: 0; z-index: 1; pointer-events: none; opacity: 0;
  transition: opacity 0.5s ease; mix-blend-mode: soft-light;
  background: radial-gradient(360px circle at var(--sx, 50%) var(--sy, 50%), rgba(232, 204, 145, 0.55), rgba(198,161,91,0.12) 40%, transparent 70%);
}
.spotlight.on { opacity: 1; }

/* ---- Hero: full-viewport, parallax image + content that lifts and fades on scroll ---- */
.hero { height: 100svh; min-height: 100svh; }
.hero__bg { will-change: transform; }
.hero__bg img { transform: scale(1.12); }
.hero__inner { will-change: transform, opacity; }
.hero__scroll-hint {
  position: absolute; bottom: 2.2rem; left: 50%; transform: translateX(-50%); z-index: 3;
  display: inline-flex; flex-direction: column; align-items: center; gap: 0.5rem;
  font-size: 0.66rem; letter-spacing: 0.32em; text-transform: uppercase; color: var(--text-muted);
}

/* ---- Card / panel light glow that tracks the pointer ---- */
.glow { position: relative; }
.glow::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0;
  transition: opacity 0.4s ease; z-index: 3;
  background: radial-gradient(240px circle at var(--mx, 50%) var(--my, 50%), rgba(232, 204, 145, 0.16), transparent 60%);
}
.glow:hover::after { opacity: 1; }

/* Reduced motion / touch: fall back to native cursor, no effects */
@media (prefers-reduced-motion: reduce), (hover: none) {
  html.has-cursor, html.has-cursor * { cursor: auto !important; }
  .cursor-dot, .cursor-ring, .spotlight { display: none !important; }
  .glow::after { display: none; }
}