/**
 * Scroll Animation Frontend Styles
 */

/* Common styles for all animated elements */
.genexpress-scroll-animation {
    will-change: transform, opacity; /* Optimize performance */
    backface-visibility: hidden; /* Reduce visual artifacts during animation */
    -webkit-font-smoothing: antialiased; /* Improve text rendering during animation */
    -webkit-backface-visibility: hidden; /* Safari compatibility */
    transform-style: preserve-3d; /* Better 3D performance */
}

/* Container elements need special treatment to prevent hiding their contents */
.genexpress-scroll-animation.is-container {
    overflow: visible !important; /* Ensure the overflow doesn't hide children during animations */
}

/* Make sure children inside containers are visible regardless of parent visibility */
.genexpress-scroll-animation.is-container > * {
    visibility: visible !important;
    opacity: 1 !important;
}

/* Ensure content inside is properly shown */
.genexpress-scroll-animation.is-container .gb-inside-container,
.genexpress-scroll-animation.is-container .wp-block-column,
.genexpress-scroll-animation.is-container .wp-block,
.genexpress-scroll-animation.is-container .gb-grid-column,
.genexpress-scroll-animation.is-container .wp-block-group__inner-container {
    visibility: visible !important;
    opacity: 1 !important;
}

/* GenerateBlocks specific overrides */
.gb-container.genexpress-scroll-animation .gb-inside-container,
.gb-container.genexpress-scroll-animation .gb-inside-container > *,
.gb-grid.genexpress-scroll-animation .gb-grid-column,
.gb-grid-column.genexpress-scroll-animation > * {
    visibility: visible !important;
    opacity: 1 !important;
}

/* Initial states - handled by GSAP now, but kept as fallbacks */
.genexpress-scroll-animation.genexpress-scroll-fade-in.is-initial:not(.is-animating-in):not(.is-animating-out) {
    opacity: 0;
    visibility: hidden;
}

.genexpress-scroll-animation.genexpress-scroll-slide-left.is-initial:not(.is-animating-in):not(.is-animating-out) {
    transform: translateX(-50px);
    opacity: 0;
    visibility: hidden;
}

.genexpress-scroll-animation.genexpress-scroll-slide-right.is-initial:not(.is-animating-in):not(.is-animating-out) {
    transform: translateX(50px);
    opacity: 0;
    visibility: hidden;
}

.genexpress-scroll-animation.genexpress-scroll-slide-bottom.is-initial:not(.is-animating-in):not(.is-animating-out) {
    transform: translateY(50px);
    opacity: 0;
    visibility: hidden;
}

/* Animation states */
.genexpress-scroll-animation.is-animating-in,
.genexpress-scroll-animation.is-animating-out {
    transition: transform 0.3s ease-out, opacity 0.3s ease-out, visibility 0s;
}

/* Support for GenerateBlocks containers - ensure content is visible during animations */
.gb-container.genexpress-scroll-animation .gb-inside-container {
    opacity: 1 !important;
    visibility: visible !important;
    transition: none !important;
}

/* Support for other container blocks like GeneratePress Grid */
.gb-grid-column.genexpress-scroll-animation > * {
    opacity: 1 !important;
    visibility: visible !important;
    transition: none !important;
}

/* Override any animation on container children */
.genexpress-scroll-animation.is-container * {
    transform: none !important;
    transition: none !important;
}

/* Permanent elements should never be hidden or animated out */
.genexpress-scroll-animation.is-permanent {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translate3d(0, 0, 0) !important; /* Force GPU acceleration */
    transition: none !important;
}

/* Animated elements that should stay visible */
.genexpress-scroll-animation.has-animated {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translate3d(0, 0, 0) !important; /* Force GPU acceleration */
}

/* Fallback for no JavaScript */
.no-js .genexpress-scroll-animation {
    visibility: visible !important;
    opacity: 1 !important;
    transform: none !important;
}

/* Handle responsive scenarios */
@media (max-width: 768px) {
    .genexpress-scroll-animation.genexpress-scroll-slide-left.is-initial:not(.is-animating-in):not(.is-animating-out),
    .genexpress-scroll-animation.genexpress-scroll-slide-right.is-initial:not(.is-animating-in):not(.is-animating-out) {
        transform: translateX(0) translateY(30px); /* Convert horizontal slides to vertical on mobile */
        opacity: 0;
        visibility: hidden;
    }
    
    /* Smaller slide distances on mobile for smoother experience */
    .genexpress-scroll-animation.is-initial[data-animation-type="slide-left"],
    .genexpress-scroll-animation.is-animating-out[data-animation-type="slide-left"],
    .genexpress-scroll-animation.is-initial[data-animation-type="slide-right"],
    .genexpress-scroll-animation.is-animating-out[data-animation-type="slide-right"] {
        transform: translateY(30px);
    }
}

/* General animation styles */
.genexpress-scroll-animation {
    will-change: transform, opacity;
    backface-visibility: hidden;
}

/* Container handling - ensure contents remain visible */
.genexpress-scroll-animation.is-container {
    overflow: visible !important;
}

/* GenerateBlocks specific overrides */
.genexpress-scroll-animation.is-container.gb-container,
.genexpress-scroll-animation.is-container.gb-grid,
.genexpress-scroll-animation.is-container.gb-grid-column,
.genexpress-scroll-animation.is-container.gb-grid-wrapper,
.genexpress-scroll-animation.is-container.wp-block-group,
.genexpress-scroll-animation.is-container.wp-block-columns,
.genexpress-scroll-animation.is-container.wp-block-column,
.genexpress-scroll-animation.is-container.wp-block-cover {
    overflow: visible !important;
}

/* Ensure children of containers are always visible */
.genexpress-scroll-animation.is-container > * {
    visibility: visible !important;
    opacity: 1 !important;
}

/* Specific selectors for GenerateBlocks containers */
.genexpress-scroll-animation.is-container .gb-inside-container,
.genexpress-scroll-animation.is-container .gb-grid-column-contents,
.genexpress-scroll-animation.is-container .gb-headline,
.genexpress-scroll-animation.is-container .gb-button {
    visibility: visible !important;
    opacity: 1 !important;
}

/* Animation states - initial state */
.genexpress-scroll-animation.is-initial {
    /* GSAP handles this, but we keep as fallback */
}

/* Type-in animation styles */
.genexpress-scroll-animation.genexpress-scroll-type-in {
    visibility: visible !important;
    opacity: 1 !important;
    position: relative;
}

/* Show cursor during type animation */
.genexpress-scroll-animation.genexpress-scroll-type-in.is-typing::after {
    content: "|";
    display: inline-block;
    margin-left: 0.1em;
    animation: blink 0.7s infinite;
    position: absolute;
}

/* Show cursor during delete animation too */
.genexpress-scroll-animation.genexpress-scroll-type-in.is-deleting::after {
    content: "|";
    display: inline-block;
    margin-left: 0.1em;
    animation: blink 0.7s infinite;
    position: absolute;
}

/* Hide cursor when animation is complete or paused */
.genexpress-scroll-animation.genexpress-scroll-type-in.is-visible::after,
.genexpress-scroll-animation.genexpress-scroll-type-in:not(.is-typing):not(.is-deleting)::after {
    display: none;
}

/* Center text block styling to make typing animation more noticeable */
.genexpress-scroll-animation.genexpress-scroll-type-in.is-text-block {
    min-height: 1.2em; /* Ensure consistent height during typing */
}

/* Blinking cursor animation */
@keyframes blink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0; }
}

/* Slide animation initial states */
.genexpress-scroll-animation.is-initial[data-animation-type="slide-up"],
.genexpress-scroll-animation.is-animating-out[data-animation-type="slide-up"] {
    transform: translateY(40px);
}

.genexpress-scroll-animation.is-initial[data-animation-type="slide-down"],
.genexpress-scroll-animation.is-animating-out[data-animation-type="slide-down"] {
    transform: translateY(-40px);
}

.genexpress-scroll-animation.is-initial[data-animation-type="slide-left"],
.genexpress-scroll-animation.is-animating-out[data-animation-type="slide-left"] {
    transform: translateX(40px);
}

.genexpress-scroll-animation.is-initial[data-animation-type="slide-right"],
.genexpress-scroll-animation.is-animating-out[data-animation-type="slide-right"] {
    transform: translateX(-40px);
}

/* Fade animation initial state */
.genexpress-scroll-animation.is-initial[data-animation-type="fade"],
.genexpress-scroll-animation.is-animating-out[data-animation-type="fade"] {
    opacity: 0;
}

/* Animation active state - when animation is complete */
.genexpress-scroll-animation.is-animating-in,
.genexpress-scroll-animation.is-visible {
    transform: translate3d(0, 0, 0);
    opacity: 1;
}

/* Visible state should always use the GPU for rendering */
.genexpress-scroll-animation.is-visible,
.genexpress-scroll-animation.has-animated,
.genexpress-scroll-animation.is-permanent {
    transform: translate3d(0, 0, 0) !important; /* Force GPU acceleration */
}

/* No JavaScript fallback */
.no-js .genexpress-scroll-animation {
    opacity: 1 !important;
    transform: none !important;
    visibility: visible !important;
}

/* Mobile adjustments */
@media (max-width: 768px) {
    /* Convert horizontal slides to vertical on mobile */
    .genexpress-scroll-animation.is-initial[data-animation-type="slide-left"],
    .genexpress-scroll-animation.is-animating-out[data-animation-type="slide-left"],
    .genexpress-scroll-animation.is-initial[data-animation-type="slide-right"],
    .genexpress-scroll-animation.is-animating-out[data-animation-type="slide-right"] {
        transform: translateY(30px);
    }
}

/* Debug styles - add a border to see what's being detected */
.genexpress-scroll-animation.debug-highlight {
    border: 2px dashed red !important;
}

.genexpress-scroll-animation.is-container.debug-highlight {
    border: 2px dashed blue !important;
}