/*
* Sistema global de animaciones — Engranaje Corporativo.
* ============================================================================
* Recrea las animaciones de imágenes del home "Construcción" de la plantilla
* Fábrica (Elementor), con las medidas reales tomadas de esa demo. Encolado
* en TODO el sitio desde functions.php (ec_enqueue_animaciones()), no solo
* en Industrias — por eso vive separado de industrias.css.
*
* Clases utilitarias (aplícalas en el marcado, no hace falta tocar este
* archivo para usarlas en una página nueva):
*
* .ec-aparecer aparición hacia arriba (fabrica-fadeinup)
* .ec-aparecer-secuencial en el contenedor: sus hijos directos aparecen
* uno tras otro, 100ms de diferencia entre cada
* .ec-parallax en el marco de una imagen: recorrido ±40px
* con el scroll, escala de base 1.1
* .ec-zoom-hover zoom ligero de la imagen al pasar el mouse
* .ec-mascara-hover lo mismo que .ec-zoom-hover, más una capa
* oscura rgba(0,0,0,.5) que aparece con el hover
*
* ----------------------------------------------------------------------
* OBLIGATORIO — sin JavaScript, todo debe verse
* ----------------------------------------------------------------------
* assets/js/animaciones.js añade la clase "ec-anim-activo" a en
* cuanto arranca (primera línea ejecutable del script) — y SOLO bajo esa
* clase las reglas de abajo ocultan los elementos que van a aparecer. Si
* el script no llega a correr (bloqueado, error, JavaScript desactivado
* en el navegador), nunca lleva la clase, así que
* ".ec-aparecer"/".ec-aparecer-secuencial > *" se quedan con su estado
* normal (visible, sin transform) tal como están escritos más abajo,
* FUERA de cualquier selector que dependa de ".ec-anim-activo".
*
* Este mismo mecanismo resuelve el otro requisito obligatorio —
* "prefers-reduced-motion: reduce no anima nada y todo se muestra de
* inmediato" — pero del lado del script, no de este archivo: cuando el
* navegador pide movimiento reducido, animaciones.js NUNCA añade
* "ec-anim-activo" a (ver la comprobación al inicio de ese
* archivo). Con la clase ausente, las reglas de abajo no aplican nunca y
* el contenido se queda visible desde el primer render — exactamente el
* mismo camino que "sin JavaScript". Por eso este archivo NO repite la
* condición dentro de un @media (prefers-reduced-motion) para estas dos
* clases: forzarla aquí con !important para ganarle a ".ec-anim-visible"
* violaría la regla del proyecto de no usar !important, y no hace falta
* — la puerta ya está cerrada en el origen (el script).
* ========================================================================== */
html.ec-anim-activo .ec-aparecer,
html.ec-anim-activo .ec-aparecer-secuencial > * {
/* Medidas reales de la demo Fábrica: opacity 0 → 1, translateY 60px → 0. */
opacity: 0;
transform: translateY(60px);
}
html.ec-anim-activo .ec-aparecer.ec-anim-visible,
html.ec-anim-activo .ec-aparecer-secuencial > *.ec-anim-visible {
opacity: 1;
transform: none;
/* 1.25s ease: duración y curva medidas en la demo (las entradas de
Elementor que usa Fábrica). transition-delay del stagger de
".ec-aparecer-secuencial" lo pone animaciones.js por elemento
(100ms × su posición), como "transition-delay" en línea. */
transition: opacity 1.25s ease, transform 1.25s ease;
}
/* ==========================================================================
Parallax — imagen dentro de su marco
==========================================================================
El elemento con ".ec-parallax" ES el marco: overflow:hidden recorta el
![]()
hijo, que sale de fábrica con scale(1.1) para que el recorrido de
±40px (la variable --ec-parallax-y que actualiza animaciones.js con el
scroll) nunca deje ver un borde en blanco. Sin JavaScript el ![]()
se
queda quieto pero con el 1.1 de zoom de base — se ve una foto normal,
ligeramente recortada, nada se oculta ni se rompe; no hace falta la
puerta de ".ec-anim-activo" aquí porque no hay nada que "aparecer".
========================================================================== */
.ec-parallax {
position: relative;
display: block;
overflow: hidden;
}
.ec-parallax img {
transform: scale(1.1) translateY(var(--ec-parallax-y, 0px));
/* will-change solo mientras de verdad se anima (animaciones.js lo activa
por elemento); dejarlo siempre encendido gasta memoria de video de
sobra en imágenes que nunca se mueven (por ejemplo, en móvil, donde
el parallax está desactivado). */
}
.ec-parallax.ec-parallax-activo img {
will-change: transform;
}
/* Por debajo de 768px el parallax se desactiva (pedido explícito del
encargo): animaciones.js deja de actualizar --ec-parallax-y en ese
ancho, y esta regla fuerza el traslado a 0 aunque quedara un valor
antiguo de una sesión con la ventana más ancha (el custom property
vive en el propio elemento, no se limpia solo al redimensionar). El
scale(1.1) de base se queda: es el recorte fijo, no la animación. */
@media (max-width: 767px) {
.ec-parallax img {
transform: scale(1.1);
}
}
/* ==========================================================================
Zoom y máscara al pasar el mouse — tarjetas con imagen
==========================================================================
Mismas medidas que la demo Fábrica: capa rgba(0,0,0,.5) de opacity 0→1
en 0.5s, zoom de la imagen a scale(1.08) también en 0.5s, dentro de un
marco con overflow:hidden (el propio elemento con la clase).
========================================================================== */
.ec-zoom-hover,
.ec-mascara-hover {
position: relative;
display: block;
overflow: hidden;
}
.ec-zoom-hover img,
.ec-mascara-hover img {
display: block;
width: 100%;
transition: transform 0.5s ease;
}
.ec-zoom-hover:hover img,
.ec-mascara-hover:hover img {
transform: scale(1.08);
}
/* Capa oscura como ::after — así ".ec-mascara-hover" no necesita ningún
elemento extra en el marcado, solo la clase sobre el marco. */
.ec-mascara-hover::after {
content: '';
position: absolute;
inset: 0;
background-color: rgba(0, 0, 0, 0.5);
opacity: 0;
transition: opacity 0.5s ease;
}
.ec-mascara-hover:hover::after {
opacity: 1;
}
/* Movimiento reducido: las animaciones por scroll ya quedan cubiertas
arriba (el script nunca activa ".ec-anim-activo"), pero el hover de
zoom/máscara no depende de esa clase — sigue funcionando con el mouse
aunque se prefiera menos movimiento. Aquí solo se acorta a casi
instantáneo en vez de quitarlo del todo, para no dejar un salto brusco
sin ninguna transición. */
@media (prefers-reduced-motion: reduce) {
.ec-zoom-hover img,
.ec-mascara-hover img,
.ec-mascara-hover::after {
transition-duration: 0.01ms;
}
}