/* ========================================================================= Inforamacs Animaciones Todas las reglas están ancladas a clases con prefijo "ia-" o a selectores estándar de WooCommerce. No se sobreescribe layout/posición de nada, solo transform/opacity/box-shadow/color -> puramente cosmético, no puede romper la funcionalidad de la tienda. ========================================================================= */ /* ------------------------------------------------------------------------- 1) Scroll reveal (opt-in: añade la clase "ia-reveal" al elemento) Por defecto el elemento es 100% visible. Solo se oculta para animar cuando el JS confirma que se ha ejecutado (clase "js-ia" en ). Así, si el JS no carga por lo que sea, nada desaparece de la página. ------------------------------------------------------------------------- */ .ia-reveal { opacity: 1; transform: none; } .js-ia .ia-reveal { opacity: 0; transform: translateY(24px); transition: opacity 0.6s ease, transform 0.6s ease; will-change: opacity, transform; } .js-ia .ia-reveal.is-visible { opacity: 1; transform: none; } .js-ia .ia-reveal-left { transform: translateX(-32px); } .js-ia .ia-reveal-right { transform: translateX(32px); } .js-ia .ia-reveal-zoom { transform: scale(0.94); } .js-ia .ia-reveal-left.is-visible, .js-ia .ia-reveal-right.is-visible, .js-ia .ia-reveal-zoom.is-visible { transform: none; } /* Retraso escalonado opcional para grupos de tarjetas: ia-delay-1 ... ia-delay-6 */ .js-ia .ia-delay-1 { transition-delay: 0.08s; } .js-ia .ia-delay-2 { transition-delay: 0.16s; } .js-ia .ia-delay-3 { transition-delay: 0.24s; } .js-ia .ia-delay-4 { transition-delay: 0.32s; } .js-ia .ia-delay-5 { transition-delay: 0.4s; } .js-ia .ia-delay-6 { transition-delay: 0.48s; } /* ------------------------------------------------------------------------- 2) Hover lift genérico (opt-in: clase "ia-hover-lift") ------------------------------------------------------------------------- */ .ia-hover-lift { transition: transform 0.25s ease, box-shadow 0.25s ease; } .ia-hover-lift:hover { transform: translateY(-6px); box-shadow: 0 12px 24px rgba(0, 0, 0, 0.12); } /* ------------------------------------------------------------------------- 3) Badge con pulso (opt-in: clase "ia-badge-pulse"), ej. "-15%", "Nuevo" ------------------------------------------------------------------------- */ .ia-badge-pulse { animation: ia-pulse 1.8s ease-in-out infinite; } @keyframes ia-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.06); } } /* ------------------------------------------------------------------------- 4) Skeleton loader (opt-in: clase "ia-skeleton") para estados de carga ------------------------------------------------------------------------- */ .ia-skeleton { position: relative; overflow: hidden; background: #e9e9ec; } .ia-skeleton::after { content: ""; position: absolute; inset: 0; transform: translateX(-100%); background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.6), transparent); animation: ia-shimmer 1.4s infinite; } @keyframes ia-shimmer { 100% { transform: translateX(100%); } } /* ------------------------------------------------------------------------- 5) Contador animado (opt-in: clase "ia-counter" + data-target="1234") ------------------------------------------------------------------------- */ .ia-counter { font-variant-numeric: tabular-nums; } /* ------------------------------------------------------------------------- 6) Carrusel de marcas en bucle (shortcode [ia_marcas], puro CSS) ------------------------------------------------------------------------- */ .ia-marquee { overflow: hidden; width: 100%; } .ia-marquee__track { display: flex; align-items: center; gap: 48px; width: max-content; animation: ia-marquee-scroll 30s linear infinite; } .ia-marquee:hover .ia-marquee__track { animation-play-state: paused; } .ia-marquee img { height: 48px; width: auto; object-fit: contain; opacity: 0.75; transition: opacity 0.25s ease; } .ia-marquee img:hover { opacity: 1; } @keyframes ia-marquee-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } } /* ------------------------------------------------------------------------- 7) Realce sutil para WooCommerce (selectores estándar del core de Woo, solo transform/box-shadow/transition -> no cambia estructura ni layout). ------------------------------------------------------------------------- */ .woocommerce ul.products li.product { transition: transform 0.25s ease, box-shadow 0.25s ease; } .woocommerce ul.products li.product:hover { transform: translateY(-4px); box-shadow: 0 10px 20px rgba(0, 0, 0, 0.08); } .woocommerce ul.products li.product img { transition: transform 0.4s ease; } .woocommerce ul.products li.product:hover img { transform: scale(1.05); } .woocommerce a.button, .woocommerce button.button, .woocommerce .add_to_cart_button { transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease; } .woocommerce a.button:hover, .woocommerce button.button:hover, .woocommerce .add_to_cart_button:hover { transform: translateY(-2px); box-shadow: 0 6px 14px rgba(0, 0, 0, 0.15); } /* ------------------------------------------------------------------------- 8) Accesibilidad: respeta "reducir movimiento" del sistema operativo. Esto va al final para tener prioridad y anular las animaciones de arriba. ------------------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { .ia-reveal, .js-ia .ia-reveal, .js-ia .ia-reveal-left, .js-ia .ia-reveal-right, .js-ia .ia-reveal-zoom { transition: none !important; transform: none !important; opacity: 1 !important; } .ia-hover-lift:hover, .woocommerce ul.products li.product:hover, .woocommerce ul.products li.product:hover img, .woocommerce a.button:hover, .woocommerce button.button:hover, .woocommerce .add_to_cart_button:hover { transform: none !important; } .ia-badge-pulse, .ia-marquee__track, .ia-skeleton::after { animation: none !important; } }