/* ==========================================================================
   MEYOUSH BOUTIQUE — ATELIER MOTION
   Support styles for atelier-motion.js.

   THE MAGNETIC FIX (important):
   luxury.css puts `transition: ... transform .24s ...` on the gold CTAs.
   That CSS transition fights GSAP's per-frame transform writes and damps
   the magnetic pull into near-invisibility (verified live: the button's
   bounding rect did not move until the transition was disabled).
   `.is-magnetic` — added by JS to exactly the elements it drives — keeps
   every colour/shadow transition intact but drops `transform` from the
   transition list, so GSAP owns transform outright. Specificity (0,2,0)
   beats the original (0,1,0) rule, so no !important is needed.
   ========================================================================== */

.btn-gold.is-magnetic,
.btn-ig.is-magnetic,
.cart-checkout-btn.is-magnetic {
  transition-property: color, background-color, border-color, box-shadow;
  will-change: transform;
}

.hero-r-inner,
.feat-visual {
  will-change: transform;
}

/* Cursor-reactive gold glow — only on the two dark cinematic sections that
   don't already carry ambient decoration (.ig-cta has its own .ig-glow).
   Pure opacity/gradient, no transform, so it can't collide with anything. */
.genesis-reveal,
.showcase-room {
  --gx: 50%;
  --gy: 50%;
}

.genesis-reveal::before,
.showcase-room::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: radial-gradient(circle at var(--gx) var(--gy), rgba(201, 168, 76, .13), transparent 45%);
  opacity: 0;
  transition: opacity .7s ease;
}

.genesis-reveal.is-glowing::before,
.showcase-room.is-glowing::before {
  opacity: 1;
}

/* --- Cursor safety net ---------------------------------------------------
   Restore a native cursor unless JS has proven the custom one is alive.
   `html:not(.cursor-ready) button` = (0,1,2) so it outranks both
   `button { cursor: none }` (0,0,1) and `.btn-gold { cursor: none }` (0,1,0)
   without needing !important. */
html:not(.cursor-ready) body { cursor: auto; }
html:not(.cursor-ready) a,
html:not(.cursor-ready) button,
html:not(.cursor-ready) [role="button"],
html:not(.cursor-ready) .prod-card,
html:not(.cursor-ready) .showcase-card,
html:not(.cursor-ready) .mirror-item,
html:not(.cursor-ready) .look-item { cursor: pointer; }
html:not(.cursor-ready) input,
html:not(.cursor-ready) textarea,
html:not(.cursor-ready) select { cursor: auto; }
html:not(.cursor-ready) .cursor { opacity: 0; }