/* ================================================
   ANIMACIONES GAUCHO MATE OPTIMIZADA
   Humo SVG y Efectos 3D
   ================================================ */

/* Contenedor principal con perspectiva */
.gaucho-hero-container {
    perspective: 1000px;
    transform-style: preserve-3d;
    transition: transform 0.1s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    will-change: transform;
    /* Optimización GPU */
    position: relative;
    z-index: 10;
}

/* El SVG propiamente dicho */
#gaucho-svg {
    display: block;
    max-width: 100%;
    height: auto;
    filter: drop-shadow(0 20px 40px rgba(0, 0, 0, 0.15));
    /* Sombra suave */
}

/* ================================================
   ANIMACIÓN DE HUMO (SVG PATHS)
   ================================================ */

.smoke-wave {
    opacity: 0;
    transform-origin: center bottom;
    animation: smoke-rise 4s ease-out infinite;
    will-change: transform, opacity;
    /* Optimizar animaciones costosas */
}

.smoke-wave:nth-child(1) {
    animation-delay: 0s;
    animation-duration: 5s;
}

.smoke-wave:nth-child(2) {
    animation-delay: 1.5s;
    animation-duration: 4.5s;
    /* Variación para naturalidad */
    stroke-width: 4px;
}

.smoke-wave:nth-child(3) {
    animation-delay: 3s;
    animation-duration: 5.5s;
    stroke-dasharray: 5, 5;
    /* Efecto discontinuo sutil */
}

@keyframes smoke-rise {
    0% {
        opacity: 0;
        transform: translateY(0) scale(0.5) translateX(0);
        stroke-opacity: 0.6;
    }

    20% {
        opacity: 0.5;
        stroke-opacity: 0.4;
    }

    100% {
        opacity: 0;
        transform: translateY(-80px) scale(2) translateX(20px);
        /* Sube y se disipa a la derecha */
        stroke-opacity: 0;
        stroke-width: 15px;
        /* Se expande */
    }
}

/* ================================================
   EFECTOS GLOBALES SUTILES
   ================================================ */

/* Pulso suave para dar vida */
#gaucho-svg {
    animation: float-idle 6s ease-in-out infinite;
}

@keyframes float-idle {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-10px);
    }
}