/* ============================================================
   MARKETKINGS — gsap-fx.css
   Zusatz-Ebene für die GSAP/Lenis-Effekte (nur index.html).
   Greift NICHT in style.css ein. Reduced-Motion / Touch sicher.
   ============================================================ */

/* ---------- Lenis Smooth-Scroll Foundation ---------- */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }

/* ---------- Effekt 1 · Spotlight-Mask auf Headline ---------- */
.fx-spotlight { position: relative; }
.fx-spotlight__top {
  position: absolute;
  inset: 0;
  margin: 0;
  pointer-events: none;
  color: var(--gold-l);
  -webkit-mask-image: radial-gradient(circle 130px at var(--fx-x, -400px) var(--fx-y, -400px), #000 99%, transparent 100%);
          mask-image: radial-gradient(circle 130px at var(--fx-x, -400px) var(--fx-y, -400px), #000 99%, transparent 100%);
  will-change: mask-position;
}
/* Gold-Wörter im Top-Layer behalten ihren Verlauf */
.fx-spotlight__top .gold { color: transparent; }

/* ---------- Effekt 6 · Zeilen-Reveal (SplitText) ---------- */
.fx-line-mask { overflow: hidden; display: block; }

/* ---------- Effekt 8 · Bild Cursor-Reveal (s/w → Farbe) ---------- */
.fx-img__base {
  filter: grayscale(1) brightness(0.78) contrast(1.06) !important;
}
.fx-img__color {
  -webkit-mask-image: radial-gradient(circle 160px at var(--fx-x, -400px) var(--fx-y, -400px), #000 99%, transparent 100%);
          mask-image: radial-gradient(circle 160px at var(--fx-x, -400px) var(--fx-y, -400px), #000 99%, transparent 100%);
  will-change: mask-position;
}

/* ---------- Touch / Reduced-Motion: Effekt-Hüllen neutralisieren ---------- */
@media (pointer: coarse) {
  .fx-spotlight__top { display: none; }
  .fx-img__base { filter: none !important; }
  .fx-img__color { -webkit-mask-image: none; mask-image: none; }
}
@media (prefers-reduced-motion: reduce) {
  .fx-spotlight__top { display: none; }
  .fx-img__base { filter: none !important; }
  .fx-img__color { -webkit-mask-image: none; mask-image: none; }
}