/**
 * WPEA Scroll Animator
 * Main CSS file for the animation classes
 */

/* Base class for animation containers */
[class*="wpea-"] {
    will-change: transform, opacity, clip-path;
    backface-visibility: hidden;
    -webkit-font-smoothing: antialiased;
    
    /* Add vendor prefixes */
    -webkit-transition: all 0.8s ease;
    -moz-transition: all 0.8s ease;
    -ms-transition: all 0.8s ease;
    -o-transition: all 0.8s ease;
    transition: all 0.8s ease;
    
    /* Fallback for browsers without will-change support */
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -ms-backface-visibility: hidden;
}

/* BEGIN TYPEWRITER ADDITION */
/* Typewriter Effect Styles */
.gp-typewriter {
    /* Base container for typewriter effects */
    position: relative;
}

.gp-type-cursor {
    display: inline-block;
    color: currentColor;
    animation: gp-cursor-blink 1s infinite;
    user-select: none;
    pointer-events: none;
    margin-left: 1px;
}

@keyframes gp-cursor-blink {
    0%, 50% {
        opacity: 1;
    }
    51%, 100% {
        opacity: 0;
    }
}

/* Respect prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
    .gp-type-cursor {
        animation: none;
        opacity: 1;
    }
    
    /* Show complete text immediately when reduced motion is preferred */
    .gp-typewriter[data-typewriter] {
        /* Text will be shown immediately by JS */
    }
}

/* Ensure typewriter elements maintain their normal display properties */
.gp-typewriter h1,
.gp-typewriter h2, 
.gp-typewriter h3,
.gp-typewriter h4,
.gp-typewriter h5,
.gp-typewriter p {
    margin: 0; /* Reset margins to prevent layout shift during typing */
}

/* Alternative cursor styles that can be applied via CSS classes */
.gp-typewriter.cursor-block .gp-type-cursor {
    background-color: currentColor;
    color: transparent;
    margin-left: 0;
    width: 0.6em;
    display: inline-block;
}

.gp-typewriter.cursor-underline .gp-type-cursor {
    border-bottom: 2px solid currentColor;
    color: transparent;
    margin-left: 0;
    width: 0.6em;
    display: inline-block;
}

/* Ensure inline formatting is preserved */
.gp-typewriter strong,
.gp-typewriter em,
.gp-typewriter span,
.gp-typewriter a {
    /* Maintain normal inline styling */
}

/* Performance optimization for typewriter elements */
.gp-typewriter {
    contain: layout style;
}
/* END TYPEWRITER ADDITION */

/* Animation Types */

/* Fade animations */
.wpea-fade-in {
    opacity: 0; 
}

.wpea-fade-out {
    opacity: 1;
}

/* Slide animations */
.wpea-slide-up {
    opacity: 0;
    -webkit-transform: translateY(50px);
    -moz-transform: translateY(50px);
    -ms-transform: translateY(50px);
    -o-transform: translateY(50px);
    transform: translateY(50px);
}

.wpea-slide-down {
    opacity: 0;
    -webkit-transform: translateY(-50px);
    -moz-transform: translateY(-50px);
    -ms-transform: translateY(-50px);
    -o-transform: translateY(-50px);
    transform: translateY(-50px);
}

.wpea-slide-left {
    opacity: 0;
    -webkit-transform: translateX(50px);
    -moz-transform: translateX(50px);
    -ms-transform: translateX(50px);
    -o-transform: translateX(50px);
    transform: translateX(50px);
}

.wpea-slide-right {
    opacity: 0;
    -webkit-transform: translateX(-50px);
    -moz-transform: translateX(-50px);
    -ms-transform: translateX(-50px);
    -o-transform: translateX(-50px);
    transform: translateX(-50px);
}

/* Zoom animations */
.wpea-zoom-in {
    opacity: 0;
    transform: scale(0.5);
}

.wpea-zoom-out {
    opacity: 0;
    transform: scale(1.5);
}

/* Rotate animations */
.wpea-rotate {
    opacity: 0;
    transform: rotate(0deg);
}

.wpea-rotate-45 {
    opacity: 0;
    transform: rotate(0deg);
}

.wpea-rotate-90 {
    opacity: 0;
    transform: rotate(0deg);
}

.wpea-rotate-180 {
    opacity: 0;
    transform: rotate(0deg);
}

/* Start Rotated animations (rotate to horizontal) */
.wpea-from-rotate-45 {
    opacity: 0.3;
    transform: rotate(45deg);
}

.wpea-from-rotate-90 {
    opacity: 0.3;
    transform: rotate(90deg);
}

.wpea-from-rotate-180 {
    opacity: 0.3;
    transform: rotate(180deg);
}

.wpea-from-rotate-270 {
    opacity: 0.3;
    transform: rotate(270deg);
}

.wpea-from-rotate-360 {
    opacity: 0.3;
    transform: rotate(360deg);
}

/* Flying animations */
.wpea-fly-left-to-right {
    opacity: 0;
    transform: translateX(-100vw);
}

.wpea-fly-right-to-left {
    opacity: 0;
    transform: translateX(100vw);
}

.wpea-fly-top-to-bottom {
    opacity: 0;
    transform: translateY(-100vh);
}

.wpea-fly-bottom-to-top {
    opacity: 0;
    transform: translateY(100vh);
}

/* Container-bound fly animations */
.wpea-fly-container-left-to-right {
    opacity: 0;
    transform: translateX(-100%);
}

.wpea-fly-container-right-to-left {
    opacity: 0;
    transform: translateX(100%);
}

.wpea-fly-container-top-to-bottom {
    opacity: 0;
    transform: translateY(-100%);
}

.wpea-fly-container-bottom-to-top {
    opacity: 0;
    transform: translateY(100%);
}

.wpea-container-wrapper {
    position: relative;
    overflow: hidden;
}

/* NEW: Clip mask animations */
.wpea-clip-left {
    -webkit-clip-path: inset(0% 0% 0% 0%);
    clip-path: inset(0% 0% 0% 0%);
    opacity: 1;
}

.wpea-clip-right {
    -webkit-clip-path: inset(0% 0% 0% 0%);
    clip-path: inset(0% 0% 0% 0%);
    opacity: 1;
}

.wpea-clip-up {
    -webkit-clip-path: inset(0% 0% 0% 0%);
    clip-path: inset(0% 0% 0% 0%);
    opacity: 1;
}

.wpea-clip-down {
    -webkit-clip-path: inset(0% 0% 0% 0%);
    clip-path: inset(0% 0% 0% 0%);
    opacity: 1;
}

.wpea-clip-center-out {
    -webkit-clip-path: inset(0% 0% 0% 0%);
    clip-path: inset(0% 0% 0% 0%);
    opacity: 1;
}

.wpea-clip-center-in {
    -webkit-clip-path: inset(50% 50% 50% 50%);
    clip-path: inset(50% 50% 50% 50%);
    opacity: 1;
}

.wpea-clip-left-in {
    -webkit-clip-path: inset(0% 100% 0% 0%);
    clip-path: inset(0% 100% 0% 0%);
    opacity: 1;
}

.wpea-clip-right-in {
    -webkit-clip-path: inset(0% 0% 0% 100%);
    clip-path: inset(0% 0% 0% 100%);
    opacity: 1;
}

.wpea-clip-up-in {
    -webkit-clip-path: inset(100% 0% 0% 0%);
    clip-path: inset(100% 0% 0% 0%);
    opacity: 1;
}

.wpea-clip-down-in {
    -webkit-clip-path: inset(0% 0% 100% 0%);
    clip-path: inset(0% 0% 100% 0%);
    opacity: 1;
}

/* Fallbacks for browsers without clip-path support */
.no-clip-path .wpea-clip-left {
    width: 100%;
    overflow: hidden;
    transition: width 0.8s ease;
}

.no-clip-path .wpea-clip-right {
    width: 100%;
    overflow: hidden;
    transition: width 0.8s ease;
}

.no-clip-path .wpea-clip-up {
    height: 100%;
    overflow: hidden;
    transition: height 0.8s ease;
}

.no-clip-path .wpea-clip-down {
    height: 100%;
    overflow: hidden;
    transition: height 0.8s ease;
}

.no-clip-path .wpea-clip-center-out,
.no-clip-path .wpea-clip-center-in,
.no-clip-path .wpea-clip-left-in,
.no-clip-path .wpea-clip-right-in,
.no-clip-path .wpea-clip-up-in,
.no-clip-path .wpea-clip-down-in {
    transform: scale(1);
    transition: transform 0.8s ease;
}

/* Flip animations */
.wpea-flip-x {
    opacity: 0;
    transform: perspective(400px) rotateX(90deg);
}

.wpea-flip-y {
    opacity: 0;
    transform: perspective(400px) rotateY(90deg);
}

/* Bounce animation */
.wpea-bounce {
    opacity: 0;
    transform: translateY(50px);
}

/* Text reveal animation */
.wpea-text-reveal {
    -webkit-clip-path: inset(0 100% 0 0);
    clip-path: inset(0 100% 0 0);
    opacity: 1;
}

/* Text reveal direction variants */
.wpea-text-reveal-left {
    -webkit-clip-path: inset(0 0 0 100%);
    clip-path: inset(0 0 0 100%);
    opacity: 1;
}

.wpea-text-reveal-up {
    -webkit-clip-path: inset(100% 0 0 0);
    clip-path: inset(100% 0 0 0);
    opacity: 1;
}

.wpea-text-reveal-down {
    -webkit-clip-path: inset(0 0 100% 0);
    clip-path: inset(0 0 100% 0);
    opacity: 1;
}

/* Add .animated state classes to handle what happens when elements animate */
.wpea-from-rotate-45.animated {
    opacity: 1;
    transform: rotate(0deg);
}

.wpea-from-rotate-90.animated {
    opacity: 1;
    transform: rotate(0deg);
}

.wpea-from-rotate-180.animated {
    opacity: 1;
    transform: rotate(0deg);
}

.wpea-from-rotate-270.animated {
    opacity: 1;
    transform: rotate(0deg);
}

.wpea-from-rotate-360.animated {
    opacity: 1;
    transform: rotate(0deg);
}

/* Animation Duration Classes */
.wpea-duration-100 { transition-duration: 100ms !important; }
.wpea-duration-200 { transition-duration: 200ms !important; }
.wpea-duration-300 { transition-duration: 300ms !important; }
.wpea-duration-400 { transition-duration: 400ms !important; }
.wpea-duration-500 { transition-duration: 500ms !important; }
.wpea-duration-600 { transition-duration: 600ms !important; }
.wpea-duration-700 { transition-duration: 700ms !important; }
.wpea-duration-800 { transition-duration: 800ms !important; }
.wpea-duration-900 { transition-duration: 900ms !important; }
.wpea-duration-1000 { transition-duration: 1000ms !important; }
.wpea-duration-1500 { transition-duration: 1500ms !important; }
.wpea-duration-2000 { transition-duration: 2000ms !important; }
.wpea-duration-2500 { transition-duration: 2500ms !important; }
.wpea-duration-3000 { transition-duration: 3000ms !important; }

/* Animation Delay Classes */
.wpea-delay-0 { transition-delay: 0ms !important; }
.wpea-delay-100 { transition-delay: 100ms !important; }
.wpea-delay-200 { transition-delay: 200ms !important; }
.wpea-delay-300 { transition-delay: 300ms !important; }
.wpea-delay-400 { transition-delay: 400ms !important; }
.wpea-delay-500 { transition-delay: 500ms !important; }
.wpea-delay-600 { transition-delay: 600ms !important; }
.wpea-delay-700 { transition-delay: 700ms !important; }
.wpea-delay-800 { transition-delay: 800ms !important; }
.wpea-delay-900 { transition-delay: 900ms !important; }
.wpea-delay-1000 { transition-delay: 1000ms !important; }

/* Animation Easing Classes */
.wpea-ease-linear { transition-timing-function: linear !important; }
.wpea-ease-in { transition-timing-function: ease-in !important; }
.wpea-ease-out { transition-timing-function: ease-out !important; }
.wpea-ease-in-out { transition-timing-function: ease-in-out !important; }
.wpea-ease-bounce { 
    transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275) !important; 
    /* Fallback for older browsers */
    transition-timing-function: ease-out !important;
}
.wpea-ease-back { 
    transition-timing-function: cubic-bezier(0.68, -0.55, 0.27, 1.55) !important; 
    /* Fallback for older browsers */
    transition-timing-function: ease-in-out !important;
}
.wpea-ease-spring { transition-timing-function: cubic-bezier(0.43, 0.28, 0.02, 1.01) !important; }

/* Transform Origin Classes */
.wpea-origin-top-left { transform-origin: top left !important; }
.wpea-origin-top { transform-origin: top center !important; }
.wpea-origin-top-right { transform-origin: top right !important; }
.wpea-origin-left { transform-origin: center left !important; }
.wpea-origin-center { transform-origin: center center !important; }
.wpea-origin-right { transform-origin: center right !important; }
.wpea-origin-bottom-left { transform-origin: bottom left !important; }
.wpea-origin-bottom { transform-origin: bottom center !important; }
.wpea-origin-bottom-right { transform-origin: bottom right !important; }

/* Container helper for overflow management */
.wpea-container {
    overflow: hidden;
    position: relative;
}

/* Stagger animation helper classes */
.wpea-stagger > *:nth-child(1) { transition-delay: 0ms !important; }
.wpea-stagger > *:nth-child(2) { transition-delay: 100ms !important; }
.wpea-stagger > *:nth-child(3) { transition-delay: 200ms !important; }
.wpea-stagger > *:nth-child(4) { transition-delay: 300ms !important; }
.wpea-stagger > *:nth-child(5) { transition-delay: 400ms !important; }
.wpea-stagger > *:nth-child(6) { transition-delay: 500ms !important; }
.wpea-stagger > *:nth-child(7) { transition-delay: 600ms !important; }
.wpea-stagger > *:nth-child(8) { transition-delay: 700ms !important; }
.wpea-stagger > *:nth-child(9) { transition-delay: 800ms !important; }
.wpea-stagger > *:nth-child(10) { transition-delay: 900ms !important; }

/* Custom distance modifiers for slide animations */
.wpea-distance-small { --wpea-distance: 20px; }
.wpea-distance-medium { --wpea-distance: 50px; }
.wpea-distance-large { --wpea-distance: 100px; }

/* Custom rotation angle modifiers */
.wpea-angle-15 { --wpea-angle: 15deg; }
.wpea-angle-30 { --wpea-angle: 30deg; }
.wpea-angle-45 { --wpea-angle: 45deg; }
.wpea-angle-60 { --wpea-angle: 60deg; }
.wpea-angle-90 { --wpea-angle: 90deg; }
.wpea-angle-180 { --wpea-angle: 180deg; }
.wpea-angle-360 { --wpea-angle: 360deg; }

/* Counter-clockwise rotation helper */
.wpea-counter {
    /* This class is used by JS to identify counter-clockwise rotations */
    /* No CSS properties needed as the JS handles the direction change */
}

/* Custom scale modifiers */
.wpea-scale-small { --wpea-scale: 0.8; }
.wpea-scale-medium { --wpea-scale: 1.2; }
.wpea-scale-large { --wpea-scale: 1.5; }

/* Speed modifiers for fly animations */
.wpea-speed-slow { --wpea-speed-factor: 6.5 !important; }
.wpea-speed-normal { --wpea-speed-factor: 4.5 !important; }
.wpea-speed-fast { --wpea-speed-factor: 3.1 !important; }
.wpea-speed-very-fast { --wpea-speed-factor: 1.5 !important; }

.wpea-path-curve {
    /* The curve effect is applied via JS */
}

.wpea-path-wave {
    /* The wave effect is applied via JS */
}

/* rotation class for flying elements */
.wpea-rotate-while-flying {
    /* This is a marker class that will cause the element to rotate while flying */
}

/* Z-index helpers for flying elements */
.wpea-z-top {
    z-index: 100 !important;
}

.wpea-z-above {
    z-index: 10 !important;
}

.wpea-z-below {
    z-index: -1 !important;
}

/* Optional container for flying elements */
.wpea-flying-container {
    overflow: visible !important;
    position: relative;
}

/* Combined animation classes */
.wpea-zoom-rotate {
    opacity: 0;
    transform: scale(0.5) rotate(0deg);
}

.wpea-slide-rotate {
    opacity: 0;
    transform: translateY(50px) rotate(0deg);
}

.wpea-zoom-flip {
    opacity: 0;
    transform: scale(0.5) perspective(400px) rotateY(90deg);
}

/* No-fade modifier - keeps element visible throughout animation */
.wpea-no-fade {
    /* This is a marker class detected by JS */
    /* No actual CSS properties needed */
}

/* Loop Animation Classes */
.wpea-loop-infinite {
    /* This class is detected by JS to set infinite looping */
}

.wpea-loop-2 {
    /* This class is detected by JS to set 2 loops */
}

.wpea-loop-3 {
    /* This class is detected by JS to set 3 loops */
}

.wpea-loop-4 {
    /* This class is detected by JS to set 4 loops */
}

.wpea-loop-5 {
    /* This class is detected by JS to set 5 loops */
}

/* Loop Delay Classes */
.wpea-loop-delay-0 { 
    /* No delay between loops */ 
}

.wpea-loop-delay-100 {
    /* 100ms delay between loops */
}

.wpea-loop-delay-200 {
    /* 200ms delay between loops */
}

.wpea-loop-delay-500 {
    /* 500ms delay between loops */
}

.wpea-loop-delay-1000 {
    /* 1000ms delay between loops */
}


/* Custom Transform Distance Modifiers - ADD THIS AT THE END OF THE FILE */
.wpea-distance-small { --wpea-transform-distance: 50px; }
.wpea-distance-medium { --wpea-transform-distance: 100px; }
.wpea-distance-large { --wpea-transform-distance: 200px; }
.wpea-distance-xlarge { --wpea-transform-distance: 300px; }

/* Percentage-based modifiers for container animations */
.wpea-height-50 { --wpea-height-percent: 50%; }
.wpea-height-75 { --wpea-height-percent: 75%; }
.wpea-height-100 { --wpea-height-percent: 100%; }
.wpea-height-110 { --wpea-height-percent: 110%; }
.wpea-height-112 { --wpea-height-percent: 112%; }
.wpea-height-125 { --wpea-height-percent: 125%; }
.wpea-height-150 { --wpea-height-percent: 150%; }
.wpea-height-175 { --wpea-height-percent: 175%; }
.wpea-height-200 { --wpea-height-percent: 200%; }
.wpea-height-250 { --wpea-height-percent: 250%; }
.wpea-height-300 { --wpea-height-percent: 300%; }
.wpea-height-400 { --wpea-height-percent: 400%; }

.wpea-width-50 { --wpea-width-percent: 50%; }
.wpea-width-75 { --wpea-width-percent: 75%; }
.wpea-width-100 { --wpea-width-percent: 100%; }
.wpea-width-110 { --wpea-width-percent: 110%; }
.wpea-width-112 { --wpea-width-percent: 112%; }
.wpea-width-125 { --wpea-width-percent: 125%; }
.wpea-width-150 { --wpea-width-percent: 150%; }
.wpea-width-175 { --wpea-width-percent: 175%; }
.wpea-width-200 { --wpea-width-percent: 200%; }
.wpea-width-250 { --wpea-width-percent: 250%; }
.wpea-width-300 { --wpea-width-percent: 300%; }
.wpea-width-400 { --wpea-width-percent: 400%; }

/* Media query to adjust animations on smaller screens */
@media (max-width: 768px) {
    /* Reduce animation distances on mobile */
    .wpea-slide-up, .wpea-slide-down {
        transform: translateY(30px);
    }
    
    .wpea-slide-left, .wpea-slide-right {
        transform: translateX(30px);
    }
    
    /* Make animations slightly faster on mobile */
    [class*="wpea-"] {
        transition-duration: 80%;
    }
}

/* Browser compatibility fixes */
@supports not (clip-path: inset(0 0 0 0)) {
    /* Additional fallbacks for older browsers */
    .wpea-clip-left,
    .wpea-clip-right,
    .wpea-clip-up,
    .wpea-clip-down,
    .wpea-clip-center-out,
    .wpea-clip-center-in,
    .wpea-clip-left-in,
    .wpea-clip-right-in,
    .wpea-clip-up-in,
    .wpea-clip-down-in,
    .wpea-text-reveal,
    .wpea-text-reveal-left,
    .wpea-text-reveal-up,
    .wpea-text-reveal-down {
        /* Use transform fallback for very old browsers */
        transform: scale(1);
        transition: transform 0.8s ease;
    }
}