/* ==========================================================
   GSAP Animator for Gutenberg – Frontend CSS
   v3.0.0 — Cross-Browser Edition
   ========================================================== */

/*
  [FIX-1] FOUC Prevention
  Elements that will be animated in are set to visibility:hidden
  by GSAP via autoAlpha:0 before animation starts (done in JS).
  We do NOT set opacity:0 or visibility:hidden here in CSS because:
  — If GSAP fails to load, elements would stay invisible forever.
  — The JS handles this correctly and falls back with revealAll().
  The one exception: we set a smooth initial state for animated
  elements so there's no layout jump before JS runs.
*/
[data-gsap-animation] {
    /* No will-change here — [FIX-9]
       Setting will-change globally creates a new GPU compositing
       layer for EVERY animated element, even before they animate.
       On low-end Android this causes memory pressure and crashes.
       GSAP sets will-change automatically per-element while animating. */
}

/*
  [FIX-5] clip-path animations — Safari compatibility
  Safari requires -webkit-clip-path alongside clip-path.
  GSAP handles this automatically via webkitClipPath property,
  but we set the initial state here as a safety net.
  Also: translateZ(0) forces GPU layer in Safari for clip-path.
*/
[data-gsap-animation*="clip"] {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

/*
  SplitText line wrapper — overflow:hidden is CRITICAL.
  Without this, text animating up from below spills outside
  the line box and is visible before the animation starts.
  Works identically in all browsers.
*/
.gsap-st-line {
    overflow: hidden;
    display: block;
}

/*
  [FIX-12] SVG stroke scaling fix for Firefox and Safari.
  Firefox scales SVG strokes proportionally with transforms by default.
  This makes strokes look thicker/thinner during DrawSVG animations.
  Add this class to your SVG paths to keep stroke-width consistent.
*/
.gsap-draw-target,
.draw-me {
    vector-effect: non-scaling-stroke;
    -webkit-vector-effect: non-scaling-stroke;
}

/*
  3D transform performance fix.
  Applied to elements using flipInX/Y and rotateIn.
  Prevents Safari from dropping the element to a new layer mid-animation.
*/
[data-gsap-animation*="flip"],
[data-gsap-animation*="rotate"] {
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

/*
  ScrollTrigger debug markers — smaller font so they
  don't interfere with the layout during development.
*/
.gsap-marker-start,
.gsap-marker-end,
.gsap-marker-scroller-start,
.gsap-marker-scroller-end {
    font-size: 11px !important;
    font-family: monospace !important;
    z-index: 9999 !important;
}