/**
 * Pretpot Smart Animations - Frontend CSS
 * Base styles for stagger and exit animations
 */

/* ============================================
   STAGGER ANIMATION BASE STYLES
   ============================================ */

/* Prevent FOUC (Flash of Unstyled Content) */
[data-pretpot-stagger="yes"] > .elementor-column,
[data-pretpot-stagger="yes"] > .elementor-widget,
[data-pretpot-stagger="yes"] > .e-con {
    will-change: opacity, transform;
}

/* Override Elementor animations when stagger is active */
.pretpot-stagger-yes .elementor-invisible {
    visibility: visible !important;
    animation: none !important;
}

.pretpot-stagger-yes [class*="animated"] {
    animation: none !important;
}

/* ============================================
   EXIT ANIMATION BASE STYLES
   ============================================ */

[data-pretpot-exit="yes"] {
    will-change: opacity, transform;
}

/* Exit animation state */
.pretpot-is-exiting {
    pointer-events: none;
}

/* Hide sentinel elements */
.pretpot-exit-sentinel {
    visibility: hidden;
    opacity: 0;
}

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

/* Reduce motion for users who prefer it */
@media (prefers-reduced-motion: reduce) {
    [data-pretpot-stagger="yes"] > .elementor-column,
    [data-pretpot-stagger="yes"] > .elementor-widget,
    [data-pretpot-stagger="yes"] > .e-con,
    [data-pretpot-exit="yes"] {
        transition: none !important;
        animation: none !important;
        opacity: 1 !important;
        transform: none !important;
    }
}

/* GPU acceleration */
[data-pretpot-stagger="yes"] > *,
[data-pretpot-exit="yes"] {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

/* ============================================
   ELEMENTOR EDITOR COMPATIBILITY
   ============================================ */

/* Disable animations in Elementor editor */
.elementor-editor-active [data-pretpot-stagger="yes"] > .elementor-column,
.elementor-editor-active [data-pretpot-stagger="yes"] > .elementor-widget,
.elementor-editor-active [data-pretpot-stagger="yes"] > .e-con,
.elementor-editor-active [data-pretpot-exit="yes"] {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
}

/* ============================================
   CONTAINER SUPPORT (FLEXBOX & GRID)
   ============================================ */

/* Ensure animations work with flex containers */
[data-pretpot-stagger="yes"].e-con > .e-con-inner > .elementor-widget,
[data-pretpot-stagger="yes"].e-con > .elementor-widget {
    will-change: opacity, transform;
}

/* Support for nested containers */
[data-pretpot-stagger="yes"] .e-con {
    will-change: opacity, transform;
}

/* ============================================
   Z-INDEX MANAGEMENT
   ============================================ */

/* Ensure exiting elements don't block interactions */
.pretpot-is-exiting {
    z-index: -1;
}

/* Maintain stacking context during animations */
[data-pretpot-stagger="yes"] {
    position: relative;
    z-index: 1;
}

/* ============================================
   RESPONSIVE ADJUSTMENTS
   ============================================ */

/* Tablet adjustments */
@media (max-width: 1024px) {
    [data-pretpot-stagger="yes"] > * {
        /* Slightly faster animations on tablets */
        transition-duration: 0.4s !important;
    }
}

/* Mobile adjustments */
@media (max-width: 767px) {
    [data-pretpot-stagger="yes"] > * {
        /* Even faster animations on mobile */
        transition-duration: 0.3s !important;
    }
    
    /* Reduce transform distance on mobile */
    [data-pretpot-stagger="yes"][data-stagger-direction="top"] > *,
    [data-pretpot-stagger="yes"][data-stagger-direction="bottom"] > * {
        transform: translateY(20px) !important;
    }
    
    [data-pretpot-stagger="yes"][data-stagger-direction="left"] > *,
    [data-pretpot-stagger="yes"][data-stagger-direction="right"] > * {
        transform: translateX(20px) !important;
    }
}

/* ============================================
   ACCESSIBILITY
   ============================================ */

/* Ensure content is accessible to screen readers */
[data-pretpot-stagger="yes"] > * {
    /* Don't hide from screen readers */
    clip: auto !important;
    clip-path: none !important;
}

/* Focus states remain visible during animations */
[data-pretpot-stagger="yes"] > *:focus,
[data-pretpot-exit="yes"]:focus {
    outline: 2px solid currentColor;
    outline-offset: 2px;
}

/* ============================================
   PRINT STYLES
   ============================================ */

@media print {
    [data-pretpot-stagger="yes"] > *,
    [data-pretpot-exit="yes"] {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
}