/**
 * GSAP Animation System - Initial States
 *
 * This CSS prevents FOUC (Flash of Unstyled Content) by setting initial states
 * for elements that will be animated. Elements start hidden/transformed and GSAP
 * reveals them with animations when they enter the viewport.
 *
 * IMPORTANT: These styles are applied BEFORE JavaScript loads to prevent flash.
 * Note: Scroll-timeline animations (scroll-fade, scroll-scale, etc.) are excluded
 * as they handle their own initial states via gsap.fromTo().
 */

/* ============================================
   TEXT ANIMATIONS - Initial States
   (Includes all heading and text animations)
   ============================================ */

/* Elements with text-animation attribute (default hidden) */
[text-animation] {
  visibility: hidden;
}

/* Regular animations with transforms */
[text-animation="fade-up"],
[text-animation="slide-in"] {
  visibility: hidden;
  transform: translateY(30px);
}

[text-animation="scale-in"] {
  visibility: hidden;
  transform: scale(0.9);
}

[text-animation="blur-in"],
[text-animation="blur-fade"] {
  visibility: hidden;
  filter: blur(5px);
}

[text-animation="rotate-in"] {
  visibility: hidden;
  transform: translateY(30px) rotate(-5deg);
}

[text-animation="clip-reveal"] {
  visibility: visible; /* Clip-path handles visibility */
  clip-path: inset(0 100% 0 0);
}

/* SplitText animations - keep visible, plugin handles the rest */
[text-animation="split-lines"],
[text-animation="char-fade"],
[text-animation="word-slide"],
[text-animation="line-reveal"],
[text-animation="typewriter"],
[text-animation="scramble"],
[text-animation="rotate-words"] {
  visibility: visible;
}

/* Scroll-timeline animations - handle their own initial states */
[text-animation^="scroll-"] {
  visibility: visible;
}


/* ============================================
   IMAGE ANIMATIONS - Initial States
   ============================================ */

/* Elements with image-animation attribute (default hidden) */
[image-animation] {
  visibility: hidden;
}

/* Regular animations with transforms */
[image-animation="fade-scale"] {
  visibility: hidden;
  transform: scale(0.95);
}

[image-animation="zoom-in"] {
  visibility: hidden;
  transform: scale(1.2);
}

[image-animation="slide-in"] {
  visibility: hidden;
  transform: translateX(-50px);
}

[image-animation="blur-reveal"] {
  visibility: hidden;
  filter: blur(10px);
  transform: scale(1.05);
}

[image-animation="rotate-reveal"] {
  visibility: hidden;
  transform: rotateY(45deg);
}

[image-animation="clip-reveal"] {
  visibility: visible; /* Clip-path handles visibility */
  clip-path: inset(0 100% 0 0);
}

[image-animation="reveal"],
[image-animation="ken-burns"] {
  visibility: visible; /* These handle their own initial states */
}

/* Scroll-timeline animations - handle their own initial states */
[image-animation^="scroll-"] {
  visibility: visible;
}


/* ============================================
   CSS CLASS ANIMATIONS - Initial States
   ============================================ */

/* Class-based animations */
.animate-text,
.animate-image {
  visibility: hidden;
  transform: translateY(20px);
}


/* ============================================
   GLOBAL SELECTOR ANIMATIONS - Initial States
   ============================================ */

/*
 * If you enable global selectors in config.js (e.g., globalSelectors: ['h1', 'h2', 'p'])
 * and want to prevent FOUC, uncomment and customize these:
 */

/*
body:not(.gsap-loaded) h1,
body:not(.gsap-loaded) h2,
body:not(.gsap-loaded) p {
  visibility: hidden;
  transform: translateY(20px);
}
*/


/* ============================================
   EXCEPTIONS - Don't Animate These
   ============================================ */

/* Elements with gsap-no-animation should show immediately */
.gsap-no-animation,
[gsap-no-animation] {
  visibility: visible !important;
  opacity: 1 !important;
  transform: none !important;
  filter: none !important;
  clip-path: none !important;
}


/* ============================================
   ANIMATION COMPLETED STATE
   ============================================ */

/*
 * After GSAP animates an element, it adds data-gsap-animated="true"
 * These elements should be fully visible regardless of CSS
 */
[data-gsap-animated="true"] {
  visibility: visible;
  opacity: 1;
}


/* ============================================
   REDUCED MOTION - Accessibility
   ============================================ */

/*
 * For users who prefer reduced motion, show everything immediately
 */
@media (prefers-reduced-motion: reduce) {
  [text-animation],
  [image-animation],
  .animate-text,
  .animate-image {
    visibility: visible !important;
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    clip-path: none !important;
  }
}


/* ============================================
   LOADING STATE (Optional)
   ============================================ */

/*
 * If JavaScript fails to load or takes too long,
 * show content after 3 seconds to prevent permanent invisibility
 */

/* Add .gsap-loaded class to body when initialized */
body.gsap-loaded [text-animation],
body.gsap-loaded [image-animation] {
  /* Animated by GSAP, initial states above will be overridden */
}

/* Fallback: show content after 3 seconds if JS hasn't loaded */
@keyframes gsap-fallback {
  to {
    visibility: visible;
    opacity: 1;
    transform: none;
    filter: none;
  }
}

[text-animation],
[image-animation],
.animate-text,
.animate-image {
  animation: gsap-fallback 0.5s 3s forwards;
}

/* Disable fallback if GSAP loaded */
body.gsap-loaded [text-animation],
body.gsap-loaded [image-animation],
body.gsap-loaded .animate-text,
body.gsap-loaded .animate-image {
  animation: none;
}