/**
 * VSK GSAP — Animation CSS
 *
 * Structural concerns needed for animations to work:
 *   • will-change hints for GPU compositing
 *   • Initial hidden states for GSAP autoAlpha
 *   • Wrapper helpers for reveal (clip-path) animations
 *   • SplitText word/line style resets
 *   • Reduced-motion overrides (a11y)
 *
 * Visual styles (colors, typography, spacing) belong in your theme CSS.
 *
 * @package Voska
 * @version 2.0.0
 */

/* ============================================================
   REVEAL ANIMATIONS
   clip-path animations don't require overflow:hidden on the
   element itself, but if you want the wipe to hide surrounding
   content you can add .vsk-gsap_reveal-wrapper to the parent.
============================================================ */

body:not(.elementor-editor-active) [class*='vsk-gsap_reveal-'] {
  will-change: clip-path;
}

body:not(.elementor-editor-active) .vsk-gsap_reveal-wrapper {
  overflow: hidden;
}

/* ============================================================
   FADE / SCALE / BLUR / ROTATE
   GSAP sets visibility:hidden via autoAlpha before DOMContentLoaded.
   We ensure no flash of unstyled content by pre-hiding in CSS as well.
============================================================ */

body:not(.elementor-editor-active) [class*='vsk-gsap_fade-'],
body:not(.elementor-editor-active) [class*='vsk-gsap_scale-'],
body:not(.elementor-editor-active) .vsk-gsap_blur-in,
body:not(.elementor-editor-active) .vsk-gsap_rotate-in {
  visibility: hidden;
  transition: none!important;
}

/* Stagger children: hidden by default, GSAP reveals them */
body:not(.elementor-editor-active) .vsk-gsap_stagger-child {
  visibility: hidden;
  transition: none!important;
}

/* ============================================================
   STAGGER-SEQ
   Children auto-hidden via .vsk-gsap_stagger-child or their
   own animation class (e.g. vsk-gsap_fade-up). The JS hides
   them via gsap.set() before layout, so no extra rule is needed
   here — only the reduced-motion override below matters.
============================================================ */

/* ============================================================
   WORDS-IN / LINES-IN
   Pre-hidden to prevent FOUC. GSAP autoAlpha handles reveal.
   SplitText generates child spans — we hint will-change on them.
============================================================ */

body:not(.elementor-editor-active) .vsk-gsap_words-in,
body:not(.elementor-editor-active) .vsk-gsap_lines-in {
  visibility: hidden;
}

/* ============================================================
   PARALLAX
============================================================ */

body:not(.elementor-editor-active) .vsk-gsap_parallax {
  will-change: transform;
}

/* ============================================================
   SCRUB TEXT HIGHLIGHT — word / line spans
============================================================ */

body:not(.elementor-editor-active) .vsk-gsap_scrub-highlight .vsk-word,
body:not(.elementor-editor-active) .vsk-gsap_highlight-lines .vsk-word {
  display: inline-block;
  will-change: opacity;
}

/* ============================================================
   ACCESSIBILITY — prefers-reduced-motion
   Skip all transforms and restore visibility for users who
   have requested reduced motion in their OS settings.
============================================================ */

@media (prefers-reduced-motion: reduce) {

  /* Entrance animations: immediately visible */
  body:not(.elementor-editor-active) [class*='vsk-gsap_fade-'],
  body:not(.elementor-editor-active) [class*='vsk-gsap_reveal-'],
  body:not(.elementor-editor-active) [class*='vsk-gsap_scale-'],
  body:not(.elementor-editor-active) .vsk-gsap_fade-in,
  body:not(.elementor-editor-active) .vsk-gsap_blur-in,
  body:not(.elementor-editor-active) .vsk-gsap_rotate-in,
  body:not(.elementor-editor-active) .vsk-gsap_stagger-child,
  body:not(.elementor-editor-active) .vsk-gsap_stagger-seq [class*='vsk-gsap_'],
  body:not(.elementor-editor-active) .vsk-gsap_words-in,
  body:not(.elementor-editor-active) .vsk-gsap_lines-in {
    visibility: visible !important;
    opacity: 1 !important;
    transform: none !important;
    clip-path: none !important;
    filter: none !important;
  }

  /* SplitText children — fully visible */
  body:not(.elementor-editor-active) .vsk-gsap_scrub-highlight .vsk-word,
  body:not(.elementor-editor-active) .vsk-gsap_highlight-lines .vsk-word,
  body:not(.elementor-editor-active) .vsk-gsap_words-in .vsk-word,
  body:not(.elementor-editor-active) .vsk-gsap_lines-in .vsk-line {
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
  }

  /* Parallax: no movement */
  body:not(.elementor-editor-active) .vsk-gsap_parallax {
    transform: none !important;
  }
}