/* =========================================================================
   WATER EFFECT - Efeito de Água para Hero Section
   Adiciona gotas d'água caindo e efeito de splash
   ========================================================================= */

/* Canvas de fundo para efeito de água */
.hero-visual {
    position: relative;
    overflow: hidden;
}

.water-canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1;
}

/* Container de gotas */
.water-drops {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 2;
    overflow: hidden;
}

/* Gota individual */
.water-drop {
    position: absolute;
    width: 2px;
    background: linear-gradient(to bottom, rgba(255,255,255,0.8), rgba(174,219,255,0.9));
    border-radius: 50%;
    opacity: 0;
    animation: dropFall linear infinite;
    box-shadow: 0 0 3px rgba(174,219,255,0.5);
}

/* Gotas de diferentes tamanhos */
.water-drop.small {
    width: 1px;
    height: 15px;
}

.water-drop.medium {
    width: 2px;
    height: 25px;
}

.water-drop.large {
    width: 3px;
    height: 35px;
}

/* Animação de queda */
@keyframes dropFall {
    0% {
        opacity: 0;
        transform: translateY(-10px);
    }
    10% {
        opacity: 1;
    }
    90% {
        opacity: 0.8;
    }
    100% {
        opacity: 0;
        transform: translateY(100vh);
    }
}

/* Splash effect ao atingir o fundo */
.water-splash {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 80px;
    background: linear-gradient(to top, rgba(174,219,255,0.15), transparent);
    pointer-events: none;
    z-index: 3;
}

/* Ripple circles (ondulações) */
.water-ripple {
    position: absolute;
    border: 2px solid rgba(174,219,255,0.4);
    border-radius: 50%;
    opacity: 0;
    animation: rippleExpand 2s ease-out infinite;
}

@keyframes rippleExpand {
    0% {
        width: 0;
        height: 0;
        opacity: 1;
    }
    100% {
        width: 100px;
        height: 100px;
        opacity: 0;
    }
}

/* Efeito de névoa/vapor */
.water-mist {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 150px;
    background: linear-gradient(to top, 
        rgba(174,219,255,0.08) 0%, 
        rgba(174,219,255,0.04) 50%, 
        transparent 100%);
    pointer-events: none;
    z-index: 4;
    animation: mistFloat 8s ease-in-out infinite;
}

@keyframes mistFloat {
    0%, 100% {
        opacity: 0.3;
        transform: translateY(0);
    }
    50% {
        opacity: 0.6;
        transform: translateY(-10px);
    }
}

/* Jato de água pressurizado (principal) */
.water-jet {
    position: absolute;
    width: 4px;
    height: 120px;
    background: linear-gradient(to bottom, 
        rgba(255,255,255,0.95) 0%,
        rgba(174,219,255,0.8) 50%,
        rgba(174,219,255,0.3) 100%);
    filter: blur(1px);
    opacity: 0;
    animation: jetSpray 3s ease-in-out infinite;
    box-shadow: 
        0 0 5px rgba(174,219,255,0.8),
        0 0 10px rgba(174,219,255,0.5),
        0 0 15px rgba(174,219,255,0.3);
}

@keyframes jetSpray {
    0%, 100% {
        opacity: 0;
        transform: scaleY(0.5) translateY(-20px);
    }
    10% {
        opacity: 1;
        transform: scaleY(1) translateY(0);
    }
    90% {
        opacity: 0.9;
    }
}

/* Partículas de spray */
.water-particles {
    position: absolute;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 5;
}

.water-particle {
    position: absolute;
    width: 3px;
    height: 3px;
    background: rgba(174,219,255,0.7);
    border-radius: 50%;
    opacity: 0;
    animation: particleFloat 2s ease-out infinite;
}

@keyframes particleFloat {
    0% {
        opacity: 0;
        transform: translate(0, 0) scale(1);
    }
    50% {
        opacity: 1;
    }
    100% {
        opacity: 0;
        transform: translate(var(--particle-x), var(--particle-y)) scale(0.3);
    }
}

/* Gloss effect (brilho na água) */
.water-gloss {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(
        ellipse at 50% 30%,
        rgba(255,255,255,0.15) 0%,
        transparent 60%
    );
    pointer-events: none;
    z-index: 6;
    animation: glossPulse 4s ease-in-out infinite;
}

@keyframes glossPulse {
    0%, 100% {
        opacity: 0.5;
    }
    50% {
        opacity: 0.8;
    }
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .water-drop {
        width: 1px;
    }
    
    .water-drop.large {
        width: 2px;
        height: 25px;
    }
    
    .water-jet {
        width: 3px;
        height: 80px;
    }
    
    .water-mist {
        height: 100px;
    }
}

/* Reduce motion for accessibility */
@media (prefers-reduced-motion: reduce) {
    .water-drop,
    .water-jet,
    .water-ripple,
    .water-mist,
    .water-particle,
    .water-gloss {
        animation: none;
        opacity: 0.3;
    }
}

/* Optional: Efeito de limpeza (área limpa vs suja) */
.cleaning-effect {
    position: absolute;
    top: 0;
    left: 0;
    width: 0%;
    height: 100%;
    background: linear-gradient(to right, 
        transparent 0%,
        rgba(255,255,255,0.1) 50%,
        transparent 100%);
    pointer-events: none;
    z-index: 7;
    animation: cleaningSweep 5s ease-in-out infinite;
}

@keyframes cleaningSweep {
    0% {
        left: -10%;
        width: 0%;
    }
    50% {
        left: 50%;
        width: 20%;
    }
    100% {
        left: 110%;
        width: 0%;
    }
}