/**
 * 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)

   NOTE: Scoped to body.bricks-is-frontend to keep
   elements visible in Bricks Builder editor.
   ============================================ */

/* Elements with text-animation attribute (default hidden on frontend) */
body.bricks-is-frontend [text-animation] {
  visibility: hidden;
}

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

body.bricks-is-frontend [text-animation="scale-in"] {
  visibility: hidden;
  transform: scale(0.9);
}

body.bricks-is-frontend [text-animation="blur-in"],
body.bricks-is-frontend [text-animation="blur-fade"] {
  visibility: hidden;
}

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

/* Clip-reveal - hidden until JS sets initial clip-path */
body.bricks-is-frontend [text-animation="clip-reveal"] {
  visibility: hidden;
}

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

/* fix cut text */
[data-gsap-animated="true"][data-gsap-animation-source="global:h2"] div[style],[data-gsap-animated="true"][data-gsap-animation-source="global:h3"] div[style] {
  line-height: initial;
}

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


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

   NOTE: Scoped to body.bricks-is-frontend to keep
   elements visible in Bricks Builder editor.
   ============================================ */

/* Elements with image-animation attribute (default hidden on frontend) */
body.bricks-is-frontend [image-animation] {
  visibility: hidden;
}

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

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

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

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

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

/* Clip-reveal for images - hidden until JS sets initial clip-path */
body.bricks-is-frontend [image-animation="clip-reveal"] {
  visibility: hidden;
}

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

/* SVG ANIMATIONS - Initial States */
  body.bricks-is-frontend [svg-animation] { visibility: hidden; }
  body.bricks-is-frontend [svg-animation="draw-scrub"] { visibility: visible; }

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


/* ============================================
   CONTAINER ANIMATIONS - Base Styles

   Structure: container > panels (direct children)
   - Container = flex row + pin target
   - Panels = 100vw each, direct children
   ============================================ */

/* Horizontal scroll container */
[container-animation="horizontal-scroll"] {
  display: flex;
  flex-wrap: nowrap;
}

/* Panels - direct children (exclude sticky element) */
[container-animation="horizontal-scroll"] > *:not([hs-sticky]) {
  flex-shrink: 0;
  width: 100vw;
  min-height: 100vh;
}

/* Sticky element - excluded from panel flow, positioned by JS */
[container-animation="horizontal-scroll"] > [hs-sticky] {
  pointer-events: auto;
}

/* Progress bar - GPU-accelerated scale from left */
[hs-progress-bar] {
  transform-origin: left;
  transform: scaleX(0);
}

/* scroll-split-drift: parent must allow overflow for drifting lines */
[text-animation="scroll-split-drift"] {
  overflow: visible;
}

/* Mobile vertical fallback */
@media (max-width: 767px) {
  [container-animation="horizontal-scroll"][mobile-vertical] {
    display: block;
  }

  [container-animation="horizontal-scroll"][mobile-vertical] > *:not([hs-sticky]) {
    width: 100%;
    min-height: auto;
  }
}

/* Video viewport shrink container */
[container-animation="video-viewport-shrink"] {
  overflow: hidden; /* Prevent horizontal scroll during animation */
}

/* Initial state handled by JS for precise positioning */

/* Container initialized state marker */
[data-gsap-container-init="true"] {
  /* JS has taken control */
}


/* ============================================
   CURSOR FOLLOWER - Interactive Utility

   NOTE: Scoped to body.bricks-is-frontend to keep
   cursor visible in Bricks Builder editor.
   ============================================ */

/* Base cursor element styles */
body.bricks-is-frontend [data-cursor-follower] .cursor-follower {
  position: fixed;
  top: 0;
  left: 0;
  pointer-events: none;
  user-select: none;
  opacity: 0;
  z-index: 10000;
  will-change: transform, opacity;
}

/* Hide native cursor in enabled sections */
body.bricks-is-frontend [data-cursor-follower] {
  cursor: none;
}

/* Also hide native cursor on interactive elements */
body.bricks-is-frontend [data-cursor-follower] a,
body.bricks-is-frontend [data-cursor-follower] button {
  cursor: none;
}

/* Cursor follower initialized state marker */
[data-cursor-follower-init="true"] {
  /* JS has taken control */
}

/* Reduced motion - show native cursor instead */
@media (prefers-reduced-motion: reduce) {
  body.bricks-is-frontend [data-cursor-follower] {
    cursor: auto;
  }

  body.bricks-is-frontend [data-cursor-follower] a,
  body.bricks-is-frontend [data-cursor-follower] button {
    cursor: pointer;
  }

  body.bricks-is-frontend [data-cursor-follower] .cursor-follower {
    display: none;
  }
}


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

   NOTE: Scoped to body.bricks-is-frontend to keep
   elements visible in Bricks Builder editor.
   ============================================ */

/* Class-based animations */
body.bricks-is-frontend .animate-text,
body.bricks-is-frontend .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
   ============================================ */

/* ============================================
   HERO ANIMATION (Page 39) - FOUC Prevention
   Hide hero logo until JS sets initial transform.
   ============================================ */
body.bricks-is-frontend #heroLogo,
body.bricks-is-frontend .hero-banner {
  visibility: hidden;
}

/* Elements with gsap-no-animation should show immediately */
.gsap-no-animation,
[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!important;
  opacity: 1;
}


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

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

  /* SVG paths - show fully drawn (only for reduced motion) */
  [svg-animation] path,
  [svg-animation] line,
  [svg-animation] polyline,
  [svg-animation] polygon,
  [svg-animation] rect,
  [svg-animation] ellipse,
  [svg-animation] circle {
    stroke-dasharray: none !important;
    stroke-dashoffset: 0 !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;
  }
}

/* Only apply fallback on frontend (not in Bricks Builder) */
body.bricks-is-frontend [text-animation],
body.bricks-is-frontend [image-animation],
body.bricks-is-frontend [svg-animation],
body.bricks-is-frontend .animate-text,
body.bricks-is-frontend .animate-image {
  /*animation: gsap-fallback 0.5s 3s forwards;*/
	animation:none;
}

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