/* cursor-system.css — Phase 3 cursor + hover interaction layer */

/* ─── Design tokens ─── */
:root {
  /* Magnetic activation radius — how far outside the element the field begins.
     Read by magnetic-anchors.js via getComputedStyle.
     ↓ change this single value to tune all magnetic elements globally. */
  --magnetic-radius: 350px;

  /* Fill colour — edit THIS value. No var() chain — direct hex only.
     Override per-button: add style="--btn-fill-color:#yourcolour" on the widget div. */
  --btn-fill-color: #FDD56E;
}

/* ─── Kill browser smooth scroll (Lenis owns scrolling) ─── */
/* scroll-behavior: smooth from theme double-smooths with Lenis in Chrome.
   height/overflow standardize scroll limit calc — Firefox miscalculates when
   html/body are constrained to 100% or 100vh. */
html,
body {
  scroll-behavior: auto !important;
  height: auto;
  overflow-x: hidden;
}

/* ─── Atmospheric cursor blob ─── */

/* OS cursor is kept active — we no longer hide it.
   The blob is a purely atmospheric companion: 200px gooey-blur orb that follows
   the mouse with a slight lag, softening elements it passes over. */

/* Atmospheric blob — GSAP owns position via xPercent/yPercent + x/y.
   NO CSS transform here — would be lost on first gsap.set(). */
.feat-cursor__blob {
  position: fixed;
  top: 0;
  left: 0;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  /* Very low opacity — presence, not presence */
  background: rgba(231, 230, 221, 0.07);
  pointer-events: none;
  z-index: 999990;  /* below all UI chrome */
  will-change: transform;
  mix-blend-mode: screen;  /* adds soft luminosity to elements beneath */
}

/* Hide on coarse pointer / narrow viewport */
@media (pointer: coarse), (max-width: 1023px) {
  .feat-cursor__blob { display: none; }
}

/* ─── Organic button fill ─── */

/* Elementor Button widget structure:
     div.elementor-widget-button.btn-directional  ← CSS Classes field
       └─ div.elementor-widget-container
            └─ a.elementor-button                 ← hit area, fill lives here */

/* Container clips the expanding circle to the button's border-radius.
   Elementor hover bg reset to transparent — fill circle provides hover colour. */
.btn-directional .elementor-button {
  position: relative !important;
  overflow: hidden !important;
}
.btn-directional .elementor-button:hover {
  background-color: transparent !important;
}

/* Fill circle — GSAP owns width, height, x, y, scale, opacity.
   Colour: reads --btn-fill-color (defined in :root above).
   Override per-button via style="--btn-fill-color: #yourcolour" on the widget. */
.btn-directional__fill {
  position: absolute;
  left: 0;
  top: 0;
  border-radius: 50%;
  z-index: 0;
  pointer-events: none;
  background: var(--btn-fill-color);
  /* GSAP sets transform — no CSS transform here */
}

/* Text + icon above fill — no CSS transition here.
   GSAP controls position (magnetic depth); CSS transition on same element = stutter. */
.btn-directional .elementor-button-text,
.btn-directional .elementor-button-icon,
.btn-directional__label {
  position: relative;
  z-index: 2;
}

/* Text inversion: triggered by .is-hovered class added to .elementor-button in JS —
   NOT on the outer .btn-directional wrapper. This scopes the trigger to the actual
   hit area so inversion fires exactly when the fill starts expanding. */
.btn-directional .elementor-button.is-hovered .elementor-button-text,
.btn-directional .elementor-button.is-hovered .btn-directional__label,
.btn-directional .elementor-button:focus-visible .elementor-button-text,
.btn-directional .elementor-button:focus-visible .btn-directional__label {
  color: var(--ch-bg, #071421);
}

/* ─── Magnetic anchors ─── */

[data-magnetic] {
  will-change: transform;
  display: inline-block; /* ensure transform applies cleanly */
}

@media (pointer: coarse), (max-width: 1023px) {
  [data-magnetic] { will-change: auto; }
}

/* ─── Hover veil ─── */

[data-hover-veil] {
  position: relative;
  overflow: hidden;
}

[data-hover-veil] img,
[data-hover-veil] video {
  will-change: transform;
  transform-origin: center;
  display: block; /* prevents inline gap */
}

.hover-veil__overlay {
  position: absolute;
  inset: 0;
  background: rgba(7, 20, 33, 0.45); /* --ch-bg-deep at 45% opacity */
  z-index: 2;
  pointer-events: none;
}

@media (pointer: coarse) {
  .hover-veil__overlay { display: none; }
  [data-hover-veil] img,
  [data-hover-veil] video { will-change: auto; }
}

/* ─── Carousel "Watch Video" pill cursor ─── */

/* Positioned inside each card — overflow:hidden on the card clips it at edges.
   GSAP drives x/y (card-relative) + xPercent/yPercent for centering. */
.carousel-cursor {
  position: absolute;
  top: 0;
  left: 0;
  pointer-events: none;
  padding: 10px 20px;
  border-radius: 999px;
  background: #E7E6DD;
  color: #0B0B0C;
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.02em;
  display: flex;
  align-items: center;
  gap: 8px;
  opacity: 0;
  white-space: nowrap;
  z-index: 10;
  will-change: transform, opacity;
}

@media (pointer: coarse), (max-width: 1023px) {
  .carousel-cursor { display: none; }
}

/* ─── Reduced motion safety ─── */
@media (prefers-reduced-motion: reduce) {
  .feat-cursor__blob { display: none; }
  .btn-directional__fill { display: none; }
  .hover-veil__overlay { display: none; }
  .carousel-cursor { display: none; }
  [data-magnetic] { will-change: auto; }
}