/* 📱 EFEITOS ANIMADOS PARA BANNER - MOBILE ONLY */

/* Aplicar apenas em dispositivos móveis */
@media only screen and (max-width: 768px) {
    
    /* Efeito de partículas flutuantes */
    .mobile-banner-container {
        position: relative;
        overflow: hidden;
    }
    
    .mobile-banner-particles {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        pointer-events: none;
        z-index: 2;
    }
    
    .particle {
        position: absolute;
        background: rgba(255, 255, 255, 0.8);
        border-radius: 50%;
        animation: float 6s ease-in-out infinite;
    }
    
    .particle.small {
        width: 4px;
        height: 4px;
        animation-duration: 4s;
    }
    
    .particle.medium {
        width: 6px;
        height: 6px;
        animation-duration: 5s;
        background: rgba(59, 193, 23, 0.6);
    }
    
    .particle.large {
        width: 8px;
        height: 8px;
        animation-duration: 7s;
        background: rgba(255, 215, 0, 0.7);
    }
    
    /* Animação de flutuação das partículas */
    @keyframes float {
        0%, 100% {
            transform: translateY(0px) translateX(0px) rotate(0deg);
            opacity: 0;
        }
        10% {
            opacity: 1;
        }
        50% {
            transform: translateY(-20px) translateX(10px) rotate(180deg);
            opacity: 0.8;
        }
        90% {
            opacity: 1;
        }
        100% {
            transform: translateY(-40px) translateX(-5px) rotate(360deg);
            opacity: 0;
        }
    }
    
    /* Efeito de brilho na banner superior */
    .splide-banner {
        position: relative;
        overflow: hidden;
        animation: pulse-glow 3s ease-in-out infinite;
    }
    
    .splide-banner::after {
        content: '';
        position: absolute;
        top: 0;
        left: -100%;
        width: 100%;
        height: 100%;
        background: linear-gradient(90deg, 
            transparent, 
            rgba(255, 255, 255, 0.4), 
            transparent
        );
        animation: shine 4s ease-in-out infinite;
    }
    
    @keyframes pulse-glow {
        0%, 100% {
            box-shadow: 0 0 5px rgba(59, 193, 23, 0.3);
        }
        50% {
            box-shadow: 0 0 15px rgba(59, 193, 23, 0.6), 0 0 25px rgba(59, 193, 23, 0.4);
        }
    }
    
    @keyframes shine {
        0% {
            left: -100%;
        }
        100% {
            left: 100%;
        }
    }
    
    /* Efeito de zoom suave nas imagens do banner */
    .splide__slide img {
        transition: transform 0.6s ease;
        animation: subtle-zoom 8s ease-in-out infinite;
    }
    
    @keyframes subtle-zoom {
        0%, 100% {
            transform: scale(1);
        }
        50% {
            transform: scale(1.02);
        }
    }
    
    /* Efeito de ondas de fundo */
    .mobile-wave-effect {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 30px;
        background: linear-gradient(45deg, 
            rgba(59, 193, 23, 0.1), 
            rgba(59, 193, 23, 0.2)
        );
        overflow: hidden;
        z-index: 1;
    }
    
    .mobile-wave-effect::before {
        content: '';
        position: absolute;
        top: 0;
        left: -100%;
        width: 200%;
        height: 100%;
        background: repeating-linear-gradient(
            90deg,
            transparent,
            transparent 10px,
            rgba(255, 255, 255, 0.1) 10px,
            rgba(255, 255, 255, 0.1) 20px
        );
        animation: wave-move 3s linear infinite;
    }
    
    @keyframes wave-move {
        0% {
            transform: translateX(-50%);
        }
        100% {
            transform: translateX(0%);
        }
    }
    
    /* Efeito de gradiente animado na pesquisa */
    .input-search-group {
        position: relative;
        overflow: hidden;
    }
    
    .input-search-group::before {
        content: '';
        position: absolute;
        top: 0;
        left: -100%;
        width: 100%;
        height: 100%;
        background: linear-gradient(90deg, 
            transparent, 
            rgba(59, 193, 23, 0.1), 
            transparent
        );
        animation: search-glow 5s ease-in-out infinite;
        z-index: 1;
        pointer-events: none;
    }
    
    @keyframes search-glow {
        0%, 100% {
            left: -100%;
            opacity: 0;
        }
        50% {
            left: 100%;
            opacity: 1;
        }
    }
    
    /* Efeito de flutuação no ícone de fogo */
    .splide-banner .fa-fire {
        animation: fire-dance 2s ease-in-out infinite;
        display: inline-block;
    }
    
    @keyframes fire-dance {
        0%, 100% {
            transform: rotate(-5deg) scale(1);
            color: #ff6b35;
        }
        25% {
            transform: rotate(5deg) scale(1.1);
            color: #ff8c42;
        }
        50% {
            transform: rotate(-3deg) scale(1.05);
            color: #ffa726;
        }
        75% {
            transform: rotate(3deg) scale(1.1);
            color: #ff7043;
        }
    }
    
    /* Efeito de respiração no container principal */
    .splide {
        animation: breathe 6s ease-in-out infinite;
    }
    
    @keyframes breathe {
        0%, 100% {
            transform: scale(1);
        }
        50% {
            transform: scale(1.005);
        }
    }
    
    /* Efeito de cintilação nas bordas */
    .mobile-sparkle-border {
        position: relative;
    }
    
    .mobile-sparkle-border::before {
        content: '';
        position: absolute;
        top: -2px;
        left: -2px;
        right: -2px;
        bottom: -2px;
        background: linear-gradient(45deg, 
            #3bc117, 
            #4caf50, 
            #8bc34a, 
            #cddc39,
            #3bc117
        );
        background-size: 400% 400%;
        animation: sparkle-border 4s ease infinite;
        z-index: -1;
        border-radius: 15px;
        opacity: 0.7;
    }
    
    @keyframes sparkle-border {
        0%, 100% {
            background-position: 0% 50%;
        }
        50% {
            background-position: 100% 50%;
        }
    }
}

/* Efeitos adicionais para telas muito pequenas */
@media only screen and (max-width: 480px) {
    .particle {
        animation-duration: 3s;
    }
    
    .splide-banner {
        animation-duration: 2s;
    }
    
    .mobile-wave-effect {
        height: 20px;
    }
}