/** * GSAP Ducktoy — estilos de apoyo. * * Deliberadamente mínimos: las animaciones las controla GSAP por completo. * Aquí solo se resuelven conflictos con el CSS de Elementor. */ /* Los contenedores de Elementor traen una transición propia que compite con las tweens de GSAP sobre transform y opacity. */ .gsapdt-no-transition, .gsapdt-no-transition > .e-con-inner { transition: none !important; } /* Evita que un elemento animado con rotación 3D provoque scroll horizontal mientras está fuera de su posición final. */ .gsapdt-animated { backface-visibility: hidden; } /* Si el visitante ha pedido menos movimiento, no animamos. */ @media ( prefers-reduced-motion: reduce ) { .gsapdt-animated { animation: none !important; transition: none !important; } } /* --------------------------------------------------------------------------- Text Animation — Text Invert El texto se pinta como un degradado recortado a la forma de las letras. La mitad izquierda va a plena opacidad y la derecha atenuada; el motor desplaza background-position-x con el scroll y eso produce el relleno progresivo. La clase invert-ready la pone el JS solo cuando ha podido leer el color del texto: sin ella no se aplica `color: transparent` y el texto sigue visible aunque el JS falle. --------------------------------------------------------------------------- */ .wcf-t-animation-text_invert .invert-ready .invert-line { background-size: 200% 100%; background-position-x: 100%; background-image: linear-gradient( to right, hsla(var(--text-color), 1) 50%, hsla(var(--text-color), 0.3) 50% ); color: transparent; -webkit-background-clip: text; background-clip: text; } /* --------------------------------------------------------------------------- Text Animation — 3D Spin El duplicado se superpone al original en posición absoluta. El original lo dejaba en el flujo desplazado con transform, lo que hacía que el widget ocupase el doble de alto. --------------------------------------------------------------------------- */ .wcf-t-animation-text_spin { position: relative; perspective: 600px; } .wcf-t-animation-text_spin .duplicate-text { position: absolute; top: 0; left: 0; width: 100%; white-space: nowrap; pointer-events: none; } /* --------------------------------------------------------------------------- Image Animation — máscara del efecto Reveal Tiene que ser de bloque y sin ancho propio: si se ciñe al contenido, un ancho en porcentaje de la imagen -lo habitual en Elementor- se resolvería contra un ancho que depende de él mismo y todo colapsaría a cero. La inserta el JS envolviendo el . --------------------------------------------------------------------------- */ .gsapdt-image-mask { display: block; overflow: hidden; } /* --------------------------------------------------------------------------- Horizontal Scroll — la tira que se desplaza Los hijos se ponen en fila sin envolver y a toda la altura del contenedor. El ancho lo fija el JS a partir del control, porque es responsive. --------------------------------------------------------------------------- */ .gsapdt-horizontal-track { display: flex; flex-direction: row; flex-wrap: nowrap; height: 100%; transition: none; } .gsapdt-horizontal-track > * { height: 100%; transition: none; } /* --------------------------------------------------------------------------- Header Sticky — separador Ocupa el hueco de la cabecera mientras esta va despegada del flujo, para que el contenido no dé un salto hacia arriba al pegarse. --------------------------------------------------------------------------- */ .gsapdt-header-spacer { flex: none; width: 100%; pointer-events: none; } /* --------------------------------------------------------------------------- Cursor hover effect Cuelga del para que no lo recorte ningún overflow. Todo lo visual (tamaño, color, fondo, borde, tipografía) lo pintan los controles del panel; aquí solo va lo estructural. --------------------------------------------------------------------------- */ .wcf-hover-cursor-effect { position: fixed; top: 0; left: 0; z-index: 9999; display: flex; align-items: center; justify-content: center; text-align: center; pointer-events: none; opacity: 0; will-change: transform; /* Valores de partida: sin ellos, un cursor recién activado y sin tocar los controles de estilo mide cero y no se ve nada. Los controles del panel los sobrescriben. */ width: 100px; height: 100px; border-radius: 100%; background: #000; color: #fff; } /* --------------------------------------------------------------------------- Image Reveal on Hover Se centra en el puntero y no intercepta el ratón, o el propio movimiento dispararía un mouseleave del contenedor. --------------------------------------------------------------------------- */ .wcf-image-hover { position: absolute; top: 0; left: 0; width: 300px; height: 380px; background-position: center; background-size: cover; background-repeat: no-repeat; transform: translate( -50%, -50% ); pointer-events: none; opacity: 0; will-change: transform; }