/**
 * Animaciones Globales para Todo el Sitio Web
 * Animaciones simples y elegantes, especialmente optimizadas para móviles
 * 
 * @package YeshuaTech
 */

/* ============================================
   KEYFRAMES GLOBALES
   ============================================ */

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes fadeInDown {
    from {
        opacity: 0;
        transform: translateY(-30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes slideInLeft {
    from {
        opacity: 0;
        transform: translateX(-20px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes slideInRight {
    from {
        opacity: 0;
        transform: translateX(20px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes scaleIn {
    from {
        opacity: 0;
        transform: scale(0.95);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes fadeInScale {
    from {
        opacity: 0;
        transform: translateY(30px) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes gentleBounce {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-3px);
    }
}

@keyframes slideUpFade {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ============================================
   ANIMACIONES PARA PRODUCTOS
   ============================================ */

/* Estado inicial: elementos ocultos hasta que entren en vista */
.woocommerce ul.products li.product.animate-on-scroll,
.products li.product.animate-on-scroll,
.product.animate-on-scroll {
    opacity: 0;
    transform: translateY(30px) scale(0.95);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* Estado animado: cuando entra en viewport */
.woocommerce ul.products li.product.animate-on-scroll.animated,
.products li.product.animate-on-scroll.animated,
.product.animate-on-scroll.animated {
    animation: fadeInScale 0.5s ease-out forwards;
}

/* Delays escalonados para productos */
.woocommerce ul.products li.product.animate-on-scroll.animated:nth-child(1),
.products li.product.animate-on-scroll.animated:nth-child(1),
.product.animate-on-scroll.animated:nth-child(1) { animation-delay: 0.05s; }
.woocommerce ul.products li.product.animate-on-scroll.animated:nth-child(2),
.products li.product.animate-on-scroll.animated:nth-child(2),
.product.animate-on-scroll.animated:nth-child(2) { animation-delay: 0.1s; }
.woocommerce ul.products li.product.animate-on-scroll.animated:nth-child(3),
.products li.product.animate-on-scroll.animated:nth-child(3),
.product.animate-on-scroll.animated:nth-child(3) { animation-delay: 0.15s; }
.woocommerce ul.products li.product.animate-on-scroll.animated:nth-child(4),
.products li.product.animate-on-scroll.animated:nth-child(4),
.product.animate-on-scroll.animated:nth-child(4) { animation-delay: 0.2s; }
.woocommerce ul.products li.product.animate-on-scroll.animated:nth-child(5),
.products li.product.animate-on-scroll.animated:nth-child(5),
.product.animate-on-scroll.animated:nth-child(5) { animation-delay: 0.25s; }
.woocommerce ul.products li.product.animate-on-scroll.animated:nth-child(6),
.products li.product.animate-on-scroll.animated:nth-child(6),
.product.animate-on-scroll.animated:nth-child(6) { animation-delay: 0.3s; }

/* Hover suave en productos */
.woocommerce ul.products li.product:hover,
.products li.product:hover,
.product:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
}

/* Imágenes de productos */
.woocommerce ul.products li.product img,
.products li.product img,
.product img {
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.woocommerce ul.products li.product:hover img,
.products li.product:hover img,
.product:hover img {
    transform: scale(1.05);
}

/* ============================================
   ANIMACIONES PARA TARJETAS Y CARDS
   ============================================ */

/* Estado inicial: tarjetas ocultas */
.card.animate-on-scroll,
.yeshua-card.animate-on-scroll,
.bg-white.rounded.animate-on-scroll,
.rounded-lg.animate-on-scroll,
.rounded-xl.animate-on-scroll,
.rounded-2xl.animate-on-scroll {
    opacity: 0;
    transform: translateY(30px);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* Estado animado: cuando entra en viewport */
.card.animate-on-scroll.animated,
.yeshua-card.animate-on-scroll.animated,
.bg-white.rounded.animate-on-scroll.animated,
.rounded-lg.animate-on-scroll.animated,
.rounded-xl.animate-on-scroll.animated,
.rounded-2xl.animate-on-scroll.animated {
    animation: fadeInUp 0.5s ease-out forwards;
}

.card.animate-on-scroll.animated:nth-child(1),
.yeshua-card.animate-on-scroll.animated:nth-child(1) { animation-delay: 0.1s; }
.card.animate-on-scroll.animated:nth-child(2),
.yeshua-card.animate-on-scroll.animated:nth-child(2) { animation-delay: 0.2s; }
.card.animate-on-scroll.animated:nth-child(3),
.yeshua-card.animate-on-scroll.animated:nth-child(3) { animation-delay: 0.3s; }
.card.animate-on-scroll.animated:nth-child(4),
.yeshua-card.animate-on-scroll.animated:nth-child(4) { animation-delay: 0.4s; }

.card:hover,
.yeshua-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

/* ============================================
   ANIMACIONES PARA BOTONES
   ============================================ */

button,
.button,
a.button,
input[type="submit"],
input[type="button"],
.btn {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}

button:hover,
.button:hover,
a.button:hover,
input[type="submit"]:hover,
input[type="button"]:hover,
.btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);
}

button:active,
.button:active,
a.button:active,
input[type="submit"]:active,
input[type="button"]:active,
.btn:active {
    transform: scale(0.95);
}

/* Efecto de brillo en botones */
button::before,
.button::before,
a.button::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.2);
    transition: left 0.5s ease;
}

button:hover::before,
.button:hover::before,
a.button:hover::before {
    left: 100%;
}

/* ============================================
   ANIMACIONES PARA ENLACES
   ============================================ */

a {
    transition: color 0.2s ease, transform 0.2s ease;
}

a:hover {
    transform: translateY(-1px);
}

/* ============================================
   ANIMACIONES PARA FORMULARIOS
   ============================================ */

input[type="text"],
input[type="email"],
input[type="tel"],
input[type="number"],
input[type="search"],
input[type="password"],
select,
textarea {
    transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="tel"]:focus,
input[type="number"]:focus,
input[type="search"]:focus,
input[type="password"]:focus,
select:focus,
textarea:focus {
    transform: scale(1.01);
    animation: gentleBounce 0.3s ease;
}

/* ============================================
   ANIMACIONES PARA HEADERS Y TÍTULOS
   ============================================ */

h1, h2, h3, h4, h5, h6 {
    animation: fadeInDown 0.6s ease-out;
}

p, .text-base, .text-lg {
    animation: fadeIn 0.6s ease-out 0.2s both;
}

/* ============================================
   ANIMACIONES PARA BANNERS Y CARRUSELES
   ============================================ */

.yeshua-banner-carousel .banner-slide {
    transition: opacity 0.5s ease-in-out, transform 0.5s ease-in-out;
}

.yeshua-banner-carousel .banner-slide.opacity-100 {
    animation: fadeInScale 0.6s ease-out;
}

/* ============================================
   ANIMACIONES PARA MARCAS
   ============================================ */

/* Estado inicial: marcas ocultas */
.yeshua-brand-item.animate-on-scroll {
    opacity: 0;
    transform: translateY(20px);
}

/* Estado animado: cuando entra en viewport */
.yeshua-brand-item.animate-on-scroll.animated {
    animation: slideUpFade 0.4s ease-out forwards;
}

.yeshua-brand-item.animate-on-scroll.animated:nth-child(1) { animation-delay: 0.05s; }
.yeshua-brand-item.animate-on-scroll.animated:nth-child(2) { animation-delay: 0.1s; }
.yeshua-brand-item.animate-on-scroll.animated:nth-child(3) { animation-delay: 0.15s; }
.yeshua-brand-item.animate-on-scroll.animated:nth-child(4) { animation-delay: 0.2s; }
.yeshua-brand-item.animate-on-scroll.animated:nth-child(5) { animation-delay: 0.25s; }
.yeshua-brand-item.animate-on-scroll.animated:nth-child(6) { animation-delay: 0.3s; }

/* ============================================
   ANIMACIONES PARA MENÚS
   ============================================ */

#mobile-menu,
.mobile-menu {
    animation: slideUpFade 0.3s ease-out;
}

#mobile-menu a,
.mobile-menu a {
    animation: fadeInScale 0.3s ease-out forwards;
    opacity: 0;
}

#mobile-menu a:nth-child(1),
.mobile-menu a:nth-child(1) { animation-delay: 0.05s; }
#mobile-menu a:nth-child(2),
.mobile-menu a:nth-child(2) { animation-delay: 0.1s; }
#mobile-menu a:nth-child(3),
.mobile-menu a:nth-child(3) { animation-delay: 0.15s; }
#mobile-menu a:nth-child(4),
.mobile-menu a:nth-child(4) { animation-delay: 0.2s; }
#mobile-menu a:nth-child(5),
.mobile-menu a:nth-child(5) { animation-delay: 0.25s; }

/* ============================================
   ANIMACIONES PARA ICONOS Y SVG
   ============================================ */

svg,
.icon {
    transition: transform 0.2s ease, opacity 0.2s ease;
}

button:hover svg,
a:hover svg,
.button:hover svg {
    transform: scale(1.1);
}

button:active svg,
a:active svg,
.button:active svg {
    transform: scale(0.9);
}

/* ============================================
   ANIMACIONES PARA SECCIONES
   ============================================ */

section.animate-on-scroll {
    opacity: 0;
}

section.animate-on-scroll.animated {
    animation: fadeIn 0.6s ease-out forwards;
}

section > div.animate-on-scroll {
    opacity: 0;
    transform: translateY(30px);
}

section > div.animate-on-scroll.animated {
    animation: fadeInUp 0.6s ease-out 0.2s both;
}

/* Clase genérica para elementos que deben animarse */
.animate-on-scroll {
    opacity: 0;
    transform: translateY(30px);
}

.animate-on-scroll.animated {
    animation: fadeInUp 0.5s ease-out forwards;
}

/* ============================================
   OPTIMIZACIONES PARA MÓVILES
   ============================================ */

@media (max-width: 768px) {
    /* Reducir tiempos de animación en móvil */
    .woocommerce ul.products li.product,
    .products li.product,
    .product,
    .card,
    .yeshua-card {
        animation-duration: 0.4s;
    }
    
    /* Animaciones más sutiles en móvil */
    .woocommerce ul.products li.product:hover,
    .products li.product:hover,
    .product:hover,
    .card:hover,
    .yeshua-card:hover {
        transform: translateY(-2px);
    }
    
    /* Reducir delays en móvil */
    .woocommerce ul.products li.product:nth-child(1),
    .products li.product:nth-child(1),
    .product:nth-child(1) { animation-delay: 0.03s; }
    .woocommerce ul.products li.product:nth-child(2),
    .products li.product:nth-child(2),
    .product:nth-child(2) { animation-delay: 0.06s; }
    .woocommerce ul.products li.product:nth-child(3),
    .products li.product:nth-child(3),
    .product:nth-child(3) { animation-delay: 0.09s; }
    .woocommerce ul.products li.product:nth-child(4),
    .products li.product:nth-child(4),
    .product:nth-child(4) { animation-delay: 0.12s; }
    
    /* Feedback táctil mejorado */
    .woocommerce ul.products li.product:active,
    .products li.product:active,
    .product:active {
        transform: scale(0.98);
    }
    
    button:active,
    .button:active,
    a.button:active {
        transform: scale(0.95);
    }
}

/* ============================================
   MEJORAR RENDIMIENTO CON GPU ACCELERATION
   ============================================ */

.woocommerce ul.products li.product,
.products li.product,
.product,
.card,
.yeshua-card,
button,
.button,
.yeshua-banner-carousel .banner-slide,
.yeshua-brand-item {
    will-change: transform;
    transform: translateZ(0);
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

/* ============================================
   PREFERENCIA DE MOVIMIENTO REDUCIDO
   ============================================ */

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
    
    .woocommerce ul.products li.product,
    .products li.product,
    .product,
    .card,
    .yeshua-card,
    section > div,
    .yeshua-banner-carousel .banner-slide,
    .yeshua-brand-item {
        animation: none !important;
        opacity: 1 !important;
    }
}