/**
 * GSAP Animations CSS - Motion.page Style
 * Premium scroll animations for WordPress/Elementor
 * 
 * @package rprocess-child
 * @version 4.0 - Motion.page Inspired
 */

/* ============================================
   INITIAL HIDDEN STATES
   ============================================ */

.gsap-fade-in:not(.animated),
.gsap-slide-up:not(.animated),
.gsap-slide-left:not(.animated),
.gsap-slide-right:not(.animated),
.gsap-scale-in:not(.animated) {
    opacity: 1;
    visibility: visible;
}

/* ============================================
   PERFORMANCE OPTIMIZATIONS
   ============================================ */

.gsap-fade-in,
.gsap-slide-up,
.gsap-slide-left,
.gsap-slide-right,
.gsap-scale-in,
.gsap-parallax,
.gsap-parallax-slow,
.gsap-parallax-fast,
.gsap-hover-lift,
.gsap-hover-scale,
.gsap-hover-zoom,
.elementor-section {
    will-change: transform, opacity;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    perspective: 1000px;
    -webkit-perspective: 1000px;
}

/* Remove will-change after animation completes */
.animated {
    will-change: auto !important;
}

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

.gsap-parallax,
.gsap-parallax-slow,
.gsap-parallax-fast,
[data-parallax] {
    position: relative;
    overflow: hidden;
}

.gsap-parallax img,
.gsap-parallax-slow img,
.gsap-parallax-fast img,
[data-parallax] img {
    width: 100%;
    height: 120%;
    object-fit: cover;
}

/* ============================================
   HOVER EFFECTS BASE
   ============================================ */

.gsap-hover-lift,
.gsap-hover-scale,
.gsap-hover-zoom {
    cursor: pointer;
    transition: transform 0.3s ease;
}

.gsap-hover-zoom {
    overflow: hidden;
}

.gsap-hover-zoom img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease;
}

/* ============================================
   SPLIT TEXT CONTAINERS
   ============================================ */

.gsap-split-text,
.gsap-split-lines,
[data-split-text] {
    overflow: visible;
}

.gsap-split-text .word,
.gsap-split-lines .line {
    display: inline-block;
    white-space: nowrap;
}

/* ============================================
   STAGGER GROUPS
   ============================================ */

.gsap-stagger,
.gsap-stagger-cards,
[data-gsap-stagger] {
    position: relative;
}

.gsap-stagger > *,
.gsap-stagger-cards > *,
[data-gsap-stagger] > * {
    opacity: 0;
}

/* ============================================
   SCROLL ANIMATIONS
   ============================================ */

.gsap-rotate-scroll,
.gsap-scale-scroll,
.gsap-fade-scroll {
    transform-origin: center center;
}

/* ============================================
   SMOOTH SCROLLING (Optional)
   ============================================ */

html.smooth-scroll {
    scroll-behavior: smooth;
}

body.smooth-scroll {
    overflow-x: hidden;
}

/* ============================================
   EDITOR MODE - Always Visible
   ============================================ */

.elementor-editor-active section,
.elementor-editor-active .elementor-section,
.elementor-editor-active [data-motion-animated],
.elementor-editor-active [class*="gsap-"],
.wp-admin section {
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    animation: none !important;
}

/* ============================================
   ACCESSIBILITY - Reduced Motion
   ============================================ */

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
    
    .gsap-fade-in,
    .gsap-slide-up,
    .gsap-slide-left,
    .gsap-slide-right,
    .gsap-scale-in,
    .gsap-parallax,
    .gsap-split-text,
    .elementor-section {
        opacity: 1 !important;
        visibility: visible !important;
        transform: none !important;
    }
}

/* ============================================
   FALLBACK ANIMATIONS
   ============================================ */

/* Fallback if GSAP doesn't load */
.gsap-fade-in:not(.animated) {
    animation: gsap-fallback-fade 0.8s ease-out 2s forwards;
}

.gsap-slide-up:not(.animated) {
    animation: gsap-fallback-slide 1s ease-out 2s forwards;
}

@keyframes gsap-fallback-fade {
    to { 
        opacity: 1 !important; 
        transform: none !important;
    }
}

@keyframes gsap-fallback-slide {
    to { 
        opacity: 1 !important; 
        transform: translateY(0) !important;
    }
}

/* Prevent fallback when GSAP is active */
.animated,
[data-motion-animated] {
    animation: none !important;
}

/* ============================================
   MOBILE OPTIMIZATIONS
   ============================================ */

@media (max-width: 768px) {
    /* Reduce parallax intensity on mobile */
    .gsap-parallax,
    .gsap-parallax-slow,
    .gsap-parallax-fast {
        transform: none !important;
    }
    
    /* Ensure sections are visible */
    .elementor-section {
        opacity: 1 !important;
        visibility: visible !important;
    }
    
    /* Simplify hover effects on touch devices */
    .gsap-hover-lift,
    .gsap-hover-scale {
        transform: none !important;
    }
}

/* ============================================
   UTILITY CLASSES
   ============================================ */

/* Disable animation on specific elements */
.no-animation,
.no-gsap {
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    animation: none !important;
}

/* Smooth appearance */
.smooth-appear {
    animation: smooth-appear 1s ease-out;
}

@keyframes smooth-appear {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ============================================
   LOADING STATE
   ============================================ */

.gsap-loading {
    opacity: 0.5;
    pointer-events: none;
}

.gsap-loaded {
    opacity: 1;
    pointer-events: auto;
    transition: opacity 0.3s ease;
}

/* ============================================
   CUSTOM EASINGS
   ============================================ */

/* Premium easing curves */
.ease-bounce {
    animation-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.ease-smooth {
    animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
}

.ease-premium {
    animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
}