/**
 * VSK GSAP — Animation CSS
 *
 * This file handles only structural concerns needed for animations to work:
 *   • will-change hints for GPU compositing
 *   • Wrapper helpers for reveal (clip-path) animations
 *   • Scrub highlight word style resets
 *   • Reduced-motion overrides (a11y)
 *
 * Visual styles (colors, typography, spacing) belong in your theme CSS.
 *
 * @package Voska
 */

/* ============================================================
   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-reveal-wrapper to the parent.
============================================================ */

[class*='vsk-reveal-'] {
  will-change: clip-path;
}

/* Optional helper wrapper — add to the parent element when you want
   content outside the clip rect to be invisible during the wipe. */
.vsk-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.
   GSAP's autoAlpha handles the final state.
============================================================ */

[class*='vsk-fade-'],
[class*='vsk-scale-'],
.vsk-fade-in,
.vsk-blur-in,
.vsk-rotate-in {
  visibility: hidden; /* GSAP autoAlpha overrides this */
}

/* Stagger children: hidden by default, GSAP reveals them */
.vsk-stagger-child {
  visibility: hidden;
}

/* ============================================================
   PARALLAX
   GPU hint. The parent needs overflow:hidden if you want
   the parallax element clipped to the section.
============================================================ */

.vsk-parallax {
  will-change: transform;
}

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

.vsk-scrub-highlight .vsk-word,
.vsk-highlight-lines .vsk-word {
  display: inline-block; /* allows transform on individual words if needed */
  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 */
  [class*='vsk-fade-'],
  [class*='vsk-reveal-'],
  [class*='vsk-scale-'],
  .vsk-fade-in,
  .vsk-blur-in,
  .vsk-rotate-in,
  .vsk-stagger-child {
    visibility: visible !important;
    opacity: 1 !important;
    transform: none !important;
    clip-path: none !important;
    filter: none !important;
  }

  /* Scrub highlights: always fully visible */
  .vsk-scrub-highlight .vsk-word,
  .vsk-highlight-lines .vsk-word {
    opacity: 1 !important;
  }

  /* Parallax: no movement */
  .vsk-parallax {
    transform: none !important;
  }
}