/**
 * Lottie Animations Styles
 * Handles smooth transitions between SVG placeholders and Lottie animations
 */

/* Container for Lottie animations */
.lottie-container {
    position: relative;
    width: 100%;
    height: 100%;
    display: inline-block;
    min-height: 300px !important; /* Ensure height for empty containers on iOS */
}

/* SVG Placeholder - hidden (not used) */
.lottie-placeholder {
    display: none;
}

/* Lottie animation wrapper */
.lottie-animation {
    position: relative;
    width: 100%;
    min-height: 300px;
    opacity: 0;
    transition: opacity 0.4s ease-in-out;
    pointer-events: none; /* Always disable pointer events to allow clicks through */
}

/* Loading state - keep placeholder visible */
.lottie-container.lottie-loading .lottie-placeholder {
    opacity: 1;
}

.lottie-container.lottie-loading .lottie-animation {
    opacity: 0;
}

/* Loaded state - show animation */

.lottie-container.lottie-loaded .lottie-animation {
    opacity: 1;
}

/* Playing state - animation is actively playing */
.lottie-container.lottie-playing .lottie-animation {
    opacity: 1;
}

/* Error state - keep placeholder visible */
.lottie-container.lottie-error .lottie-placeholder {
    opacity: 1 !important;
    visibility: visible !important;
}

.lottie-container.lottie-error .lottie-animation {
    opacity: 0 !important;
    display: none;
}

/* RTL Support - flip animations if needed */
[dir="rtl"] .lottie-container.lottie-flip {
    transform: scaleX(-1);
}

/* Preserve aspect ratio */
.lottie-animation svg {
    width: 100%;
    height: 100%;
}

/* Performance optimization - use GPU acceleration */
.lottie-animation,
.lottie-placeholder {
    will-change: opacity;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

/* Reduce motion for users who prefer it */
@media (prefers-reduced-motion: reduce) {
    .lottie-container,
    .lottie-animation,
    .lottie-placeholder {
        transition: none !important;
        animation: none !important;
    }
    
    /* Show static placeholder instead */
    .lottie-container .lottie-placeholder {
        opacity: 1 !important;
        visibility: visible !important;
    }
    
    .lottie-container .lottie-animation {
        display: none !important;
    }
}

/* Mobile optimizations */
@media (max-width: 768px) {
    .lottie-animation {
        /* Slightly faster transitions on mobile */
        transition: opacity 0.3s ease-in-out;
    }
}

/* Specific adjustments for hero section */
.lottie-container.hero-animation {
    display: inline-block;
    vertical-align: middle;
}

/* Specific adjustments for section illustrations */
._1RIBh .lottie-container {
    width: 100%;
    height: 100%;
}

._1RIBh .lottie-container .lottie-animation {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

/* Footer section animations */
.dPoY0 .lottie-container {
    display: inline-block;
}

/* Super Duolingo section */
._2KG9p.lottie-container {
    display: block;
}

/* Loading spinner (optional - for slow connections) */
.lottie-container.lottie-loading::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 20px;
    height: 20px;
    margin: -10px 0 0 -10px;
    border: 2px solid rgba(0, 0, 0, 0.1);
    border-top-color: rgba(0, 0, 0, 0.4);
    border-radius: 50%;
    animation: lottie-spinner 0.6s linear infinite;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.lottie-container.lottie-loading.lottie-slow::after {
    opacity: 1;
}

@keyframes lottie-spinner {
    to {
        transform: rotate(360deg);
    }
}

/* Debug mode - show borders (remove in production) */
.lottie-debug .lottie-container {
    border: 2px solid red;
}

.lottie-debug .lottie-placeholder {
    border: 2px solid blue;
}

.lottie-debug .lottie-animation {
    border: 2px solid green;
}


/* iOS Safari specific fixes */
@supports (-webkit-touch-callout: none) {
    /* Force hardware acceleration on iOS */
    .lottie-container {
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
    }
    
    .lottie-animation {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
    }
    
    /* Ensure animations are visible when loaded on iOS */
    .lottie-container.lottie-loaded .lottie-animation,
    .lottie-container.lottie-playing .lottie-animation {
        opacity: 1 !important;
        visibility: visible !important;
    }
}


/* Fix for empty containers in sections */
._1RIBh .lottie-container {
    min-height: 400px !important;
    height: auto !important;
}

._2VZpU .lottie-container {
    min-height: 400px !important;
    height: auto !important;
}