/**
 * Logo Animations
 * Animaciones CSS para el logo del header
 * 
 * @package Variavista
 * @since 3.10.2
 */

/* ====================================
   ANIMACIONES PRINCIPALES DEL LOGO
   ==================================== */

/* Base para todas las animaciones del logo */
.logo-animation-pulse,
.logo-animation-bounce,
.logo-animation-swing,
.logo-animation-tada,
.logo-animation-heartbeat,
.logo-animation-rotate,
.logo-animation-float,
.logo-animation-glow,
.custom-logo {
    display: inline-block !important;
}

/* Pulso suave */
@keyframes logo-pulse {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.05);
    }
}

.logo-main-img.logo-animation-pulse,
img.logo-animation-pulse,
.custom-logo.logo-animation-pulse,
.logo-animation-pulse .custom-logo {
    animation: logo-pulse 2s ease-in-out infinite !important;
}

/* Rebote */
@keyframes logo-bounce {
    0%, 20%, 50%, 80%, 100% {
        transform: translateY(0);
    }
    40% {
        transform: translateY(-10px);
    }
    60% {
        transform: translateY(-5px);
    }
}

.logo-main-img.logo-animation-bounce,
img.logo-animation-bounce,
.custom-logo.logo-animation-bounce,
.logo-animation-bounce .custom-logo {
    animation: logo-bounce 2s ease-in-out infinite !important;
}

/* Balanceo */
@keyframes logo-swing {
    20% {
        transform: rotate(15deg);
    }
    40% {
        transform: rotate(-10deg);
    }
    60% {
        transform: rotate(5deg);
    }
    80% {
        transform: rotate(-5deg);
    }
    100% {
        transform: rotate(0deg);
    }
}

.logo-main-img.logo-animation-swing,
img.logo-animation-swing,
.custom-logo.logo-animation-swing,
.logo-animation-swing .custom-logo {
    transform-origin: top center;
    animation: logo-swing 2s ease-in-out infinite !important;
}

/* Tada (celebración) */
@keyframes logo-tada {
    0%, 100% {
        transform: scale(1) rotate(0deg);
    }
    10%, 20% {
        transform: scale(0.9) rotate(-3deg);
    }
    30%, 50%, 70%, 90% {
        transform: scale(1.1) rotate(3deg);
    }
    40%, 60%, 80% {
        transform: scale(1.1) rotate(-3deg);
    }
}

.logo-main-img.logo-animation-tada,
img.logo-animation-tada,
.custom-logo.logo-animation-tada,
.logo-animation-tada .custom-logo {
    animation: logo-tada 2s ease-in-out infinite !important;
}

/* Latido */
@keyframes logo-heartbeat {
    0%, 100% {
        transform: scale(1);
    }
    14% {
        transform: scale(1.15);
    }
    28% {
        transform: scale(1);
    }
    42% {
        transform: scale(1.15);
    }
    56% {
        transform: scale(1);
    }
}

.logo-main-img.logo-animation-heartbeat,
img.logo-animation-heartbeat,
.custom-logo.logo-animation-heartbeat,
.logo-animation-heartbeat .custom-logo {
    animation: logo-heartbeat 1.3s ease-in-out infinite !important;
}

/* Rotación continua */
@keyframes logo-rotate {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

.logo-main-img.logo-animation-rotate,
img.logo-animation-rotate,
.custom-logo.logo-animation-rotate,
.logo-animation-rotate .custom-logo {
    animation: logo-rotate 3s linear infinite !important;
}

/* Flotante */
@keyframes logo-float {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-10px);
    }
}

.logo-main-img.logo-animation-float,
img.logo-animation-float,
.custom-logo.logo-animation-float,
.logo-animation-float .custom-logo {
    animation: logo-float 3s ease-in-out infinite !important;
}

/* Brillo pulsante */
@keyframes logo-glow {
    0%, 100% {
        filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.5));
    }
    50% {
        filter: drop-shadow(0 0 20px rgba(255, 255, 255, 0.8));
    }
}

.logo-main-img.logo-animation-glow,
img.logo-animation-glow,
.custom-logo.logo-animation-glow,
.logo-animation-glow .custom-logo {
    animation: logo-glow 2s ease-in-out infinite !important;
}

/* ====================================
   COMPORTAMIENTOS DEL LOGO ANIMADO
   ==================================== */

/* Hover behavior - Mostrar animado al pasar cursor */
.hover-behavior .logo-main-img {
    opacity: 1;
    transition: opacity 0.3s ease;
}

.hover-behavior .logo-animated-img {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.hover-behavior:hover .logo-main-img {
    opacity: 0;
}

.hover-behavior:hover .logo-animated-img {
    opacity: 1;
}

/* Click behavior - Toggle con click */
.click-behavior {
    cursor: pointer;
}

.click-behavior .logo-main-img {
    opacity: 1;
    transition: opacity 0.3s ease;
}

.click-behavior .logo-animated-img {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.click-behavior.active .logo-main-img {
    opacity: 0;
}

.click-behavior.active .logo-animated-img {
    opacity: 1;
}

/* Always behavior - Solo animado */
.always-behavior .logo-main-img {
    display: none;
}

.always-behavior .logo-animated-img {
    display: block;
}

/* ====================================
   ANIMACIONES SVG (PARTES)
   ==================================== */

/* Draw - Dibujar líneas progresivamente */
@keyframes svg-draw {
    0% {
        stroke-dashoffset: 1000;
    }
    100% {
        stroke-dashoffset: 0;
    }
}

.svg-animation-draw path,
.svg-animation-draw circle,
.svg-animation-draw rect,
.svg-animation-draw ellipse,
.svg-animation-draw polygon,
.svg-animation-draw polyline,
.svg-animation-draw line {
    stroke-dasharray: 1000;
    stroke-dashoffset: 1000;
    animation: svg-draw 3s ease-in-out forwards;
}

/* Fade in secuencial */
@keyframes svg-fade-in {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

.svg-animation-fade-in .logo-path-1 {
    animation: svg-fade-in 0.5s ease-in-out forwards;
    animation-delay: 0s;
}

.svg-animation-fade-in .logo-path-2 {
    animation: svg-fade-in 0.5s ease-in-out forwards;
    animation-delay: 0.2s;
}

.svg-animation-fade-in .logo-path-3 {
    animation: svg-fade-in 0.5s ease-in-out forwards;
    animation-delay: 0.4s;
}

.svg-animation-fade-in .logo-path-4 {
    animation: svg-fade-in 0.5s ease-in-out forwards;
    animation-delay: 0.6s;
}

.svg-animation-fade-in .logo-path-5 {
    animation: svg-fade-in 0.5s ease-in-out forwards;
    animation-delay: 0.8s;
}

/* Slide in secuencial */
@keyframes svg-slide-in {
    0% {
        transform: translateX(-20px);
        opacity: 0;
    }
    100% {
        transform: translateX(0);
        opacity: 1;
    }
}

.svg-animation-slide-in .logo-path-1 {
    animation: svg-slide-in 0.5s ease-out forwards;
    animation-delay: 0s;
}

.svg-animation-slide-in .logo-path-2 {
    animation: svg-slide-in 0.5s ease-out forwards;
    animation-delay: 0.15s;
}

.svg-animation-slide-in .logo-path-3 {
    animation: svg-slide-in 0.5s ease-out forwards;
    animation-delay: 0.3s;
}

.svg-animation-slide-in .logo-path-4 {
    animation: svg-slide-in 0.5s ease-out forwards;
    animation-delay: 0.45s;
}

.svg-animation-slide-in .logo-path-5 {
    animation: svg-slide-in 0.5s ease-out forwards;
    animation-delay: 0.6s;
}

/* Scale in secuencial */
@keyframes svg-scale-in {
    0% {
        transform: scale(0);
        opacity: 0;
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

.svg-animation-scale-in .logo-path-1 {
    animation: svg-scale-in 0.4s ease-out forwards;
    animation-delay: 0s;
}

.svg-animation-scale-in .logo-path-2 {
    animation: svg-scale-in 0.4s ease-out forwards;
    animation-delay: 0.15s;
}

.svg-animation-scale-in .logo-path-3 {
    animation: svg-scale-in 0.4s ease-out forwards;
    animation-delay: 0.3s;
}

.svg-animation-scale-in .logo-path-4 {
    animation: svg-scale-in 0.4s ease-out forwards;
    animation-delay: 0.45s;
}

.svg-animation-scale-in .logo-path-5 {
    animation: svg-scale-in 0.4s ease-out forwards;
    animation-delay: 0.6s;
}

/* Rotate in secuencial */
@keyframes svg-rotate-in {
    0% {
        transform: rotate(-180deg);
        opacity: 0;
    }
    100% {
        transform: rotate(0deg);
        opacity: 1;
    }
}

.svg-animation-rotate-in .logo-path-1 {
    transform-origin: center;
    animation: svg-rotate-in 0.5s ease-out forwards;
    animation-delay: 0s;
}

.svg-animation-rotate-in .logo-path-2 {
    transform-origin: center;
    animation: svg-rotate-in 0.5s ease-out forwards;
    animation-delay: 0.2s;
}

.svg-animation-rotate-in .logo-path-3 {
    transform-origin: center;
    animation: svg-rotate-in 0.5s ease-out forwards;
    animation-delay: 0.4s;
}

.svg-animation-rotate-in .logo-path-4 {
    transform-origin: center;
    animation: svg-rotate-in 0.5s ease-out forwards;
    animation-delay: 0.6s;
}

.svg-animation-rotate-in .logo-path-5 {
    transform-origin: center;
    animation: svg-rotate-in 0.5s ease-out forwards;
    animation-delay: 0.8s;
}

/* Color shift continuo */
@keyframes svg-color-shift {
    0%, 100% {
        fill: currentColor;
    }
    33% {
        fill: var(--vv-primary-color, currentColor);
    }
    66% {
        fill: var(--vv-secondary-color, currentColor);
    }
}

.svg-animation-color-shift path,
.svg-animation-color-shift circle,
.svg-animation-color-shift rect,
.svg-animation-color-shift ellipse,
.svg-animation-color-shift polygon {
    animation: svg-color-shift 5s ease-in-out infinite;
}

/* ====================================
   MODOS DE COLOR SVG
   ==================================== */

/* Color automático según fondo */
.logo-svg-color-auto path,
.logo-svg-color-auto circle,
.logo-svg-color-auto rect,
.logo-svg-color-auto ellipse,
.logo-svg-color-auto polygon,
.logo-svg-color-auto polyline,
.logo-svg-color-auto line {
    fill: currentColor;
    stroke: currentColor;
}

/* Forzar blanco */
.logo-svg-color-white path,
.logo-svg-color-white circle,
.logo-svg-color-white rect,
.logo-svg-color-white ellipse,
.logo-svg-color-white polygon,
.logo-svg-color-white polyline,
.logo-svg-color-white line {
    fill: #ffffff !important;
    stroke: #ffffff !important;
}

/* Forzar negro */
.logo-svg-color-black path,
.logo-svg-color-black circle,
.logo-svg-color-black rect,
.logo-svg-color-black ellipse,
.logo-svg-color-black polygon,
.logo-svg-color-black polyline,
.logo-svg-color-black line {
    fill: #000000 !important;
    stroke: #000000 !important;
}

/* ====================================
   CONTENEDOR SVG INLINE
   ==================================== */

.logo-svg-inline {
    display: inline-block !important;
    vertical-align: middle;
}

.logo-svg-inline svg {
    display: block;
    width: 100%;
    height: 100%;
}

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

/* Reducir intensidad en móvil para mejor rendimiento */
@media (max-width: 767px) {
    .logo-animation-pulse,
    .logo-animation-bounce,
    .logo-animation-swing,
    .logo-animation-tada,
    .logo-animation-heartbeat,
    .logo-animation-rotate,
    .logo-animation-float,
    .logo-animation-glow {
        animation-duration: 3s; /* Más lento en móvil */
    }
}

/* Pausar animaciones si el usuario prefiere movimiento reducido */
@media (prefers-reduced-motion: reduce) {
    .logo-animation-pulse,
    .logo-animation-bounce,
    .logo-animation-swing,
    .logo-animation-tada,
    .logo-animation-heartbeat,
    .logo-animation-rotate,
    .logo-animation-float,
    .logo-animation-glow,
    .svg-animation-draw,
    .svg-animation-fade-in,
    .svg-animation-slide-in,
    .svg-animation-scale-in,
    .svg-animation-rotate-in,
    .svg-animation-color-shift {
        animation: none !important;
    }
}