/* ============================================================
   GSAP Animator Pro — Frontend Stylesheet
   Strategy: hide animated elements until JS ready, then
   let GSAP handle the reveal. Zero FOUC.
   ============================================================ */

/* ── Reset layer: hide elements that will be animated ─────── */
.gap-ready [data-gap="1"] {
  will-change: transform, opacity;
}

/* Skip all animations for reduced-motion preference */
.gap-skip-animations [data-gap="1"],
.gap-skip-animations [data-gap="1"] * {
  animation: none !important;
  transition: none !important;
  transform: none !important;
  opacity: 1 !important;
  clip-path: none !important;
}

/* ── Page Transition Overlay ──────────────────────────────── */
#gap-page-overlay {
  contain: strict;
  transform: translateZ(0);
}

/* ── Custom Cursor — Dot ──────────────────────────────────── */
#gap-cursor-dot {
  position: fixed;
  top: 0;
  left: 0;
  width: 8px;
  height: 8px;
  background: var(--gap-cursor-color, #7c3aed);
  border-radius: 50%;
  pointer-events: none;
  z-index: 99998;
  transform: translate(-50%, -50%);
  mix-blend-mode: difference;
}

/* ── Custom Cursor — Ring ─────────────────────────────────── */
#gap-cursor-ring {
  position: fixed;
  top: 0;
  left: 0;
  width: 36px;
  height: 36px;
  border: 1.5px solid var(--gap-cursor-color, #7c3aed);
  border-radius: 50%;
  pointer-events: none;
  z-index: 99997;
  transform: translate(-50%, -50%);
  transition: background 0.2s ease;
}

/* ── Custom Cursor — Spotlight ────────────────────────────── */
#gap-cursor-spotlight {
  position: fixed;
  top: 0;
  left: 0;
  width: 300px;
  height: 300px;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(124, 58, 237, 0.12) 0%,
    transparent 70%
  );
  pointer-events: none;
  z-index: 99996;
  mix-blend-mode: screen;
}

/* ── Magnetic button base ─────────────────────────────────── */
[data-gap-magnetic],
.gap-magnetic {
  display: inline-block;
  cursor: pointer;
  transform: translateZ(0);
  will-change: transform;
}

/* ── Parallax containment ─────────────────────────────────── */
[data-gap-parallax] {
  transform: translateZ(0);
  will-change: transform;
}

/* ── Text reveal helper ───────────────────────────────────── */
.gap-line-wrap {
  overflow: hidden;
  display: block;
}

/* ── Scrollbar styling (optional, enabled if smoothScroll) ── */
.gap-smooth-scroll {
  scrollbar-width: thin;
  scrollbar-color: var(--gap-accent, #7c3aed) transparent;
}
.gap-smooth-scroll::-webkit-scrollbar { width: 6px; }
.gap-smooth-scroll::-webkit-scrollbar-track { background: transparent; }
.gap-smooth-scroll::-webkit-scrollbar-thumb {
  background: var(--gap-accent, #7c3aed);
  border-radius: 3px;
}

/* ── Section presets: add a class for non-Elementor use ───── */

/* Fade Up */
.gap-anim-fade-up       { opacity: 0; transform: translateY(60px); }

/* Fade Down */
.gap-anim-fade-down     { opacity: 0; transform: translateY(-60px); }

/* Fade Left */
.gap-anim-fade-left     { opacity: 0; transform: translateX(80px); }

/* Fade Right */
.gap-anim-fade-right    { opacity: 0; transform: translateX(-80px); }

/* Zoom In */
.gap-anim-zoom-in       { opacity: 0; transform: scale(0.85); }

/* Zoom Out */
.gap-anim-zoom-out      { opacity: 0; transform: scale(1.15); }

/* Clip Left */
.gap-anim-clip-left     { opacity: 0; clip-path: inset(0 100% 0 0); }

/* Clip Right */
.gap-anim-clip-right    { opacity: 0; clip-path: inset(0 0 0 100%); }

/* ── Responsive: disable heavy parallax on mobile ─────────── */
@media (max-width: 767px) {
  [data-gap-parallax] {
    transform: none !important;
  }
  #gap-cursor-dot,
  #gap-cursor-ring,
  #gap-cursor-spotlight {
    display: none;
  }
}

/* ── Performance: GPU promotion ───────────────────────────── */
[data-gap="1"],
#gap-page-overlay,
#gap-cursor-dot,
#gap-cursor-ring {
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}