/* Grúas Torres — Animaciones y revelado al hacer scroll (sin dependencias) */ /* * El estado oculto solo aplica cuando el JS añade `.gt-reveal-on` al . * Así, si el script no carga, el contenido queda visible por defecto. */ .gt-reveal-on .gt-reveal { opacity: 0; transform: translateY(26px); transition: opacity 0.7s cubic-bezier(0.22, 0.61, 0.36, 1), transform 0.7s cubic-bezier(0.22, 0.61, 0.36, 1); transition-delay: calc(var(--gt-i, 0) * 90ms); will-change: opacity, transform; } .gt-reveal-on .gt-reveal.is-visible { opacity: 1; transform: none; /* Al terminar, se libera el stacking context para no tapar popups (datepicker). */ will-change: auto; } /* Variantes opcionales (data-gt-reveal="left|right|scale|fade"). */ .gt-reveal-on .gt-reveal.gt-reveal--left { transform: translateX(-30px); } .gt-reveal-on .gt-reveal.gt-reveal--right { transform: translateX(30px); } .gt-reveal-on .gt-reveal.gt-reveal--scale { transform: scale(0.94); } .gt-reveal-on .gt-reveal.gt-reveal--fade { transform: none; } .gt-reveal-on .gt-reveal.is-visible { transform: none; } /* * Animación de entrada de los heros (al cargar la página). * Se usan keyframes CSS con fill-mode both: el estado inicial se aplica antes * del primer paint, por lo que no hay parpadeo ni dependencia del JS. */ @keyframes gtHeroIn { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: translateY(0); } } .home-hero-copy > *, .page-hero .container > * { animation: gtHeroIn 0.8s cubic-bezier(0.22, 0.61, 0.36, 1) both; } .home-hero-copy > *:nth-child(1), .page-hero .container > *:nth-child(1) { animation-delay: 0.1s; } .home-hero-copy > *:nth-child(2), .page-hero .container > *:nth-child(2) { animation-delay: 0.22s; } .home-hero-copy > *:nth-child(3), .page-hero .container > *:nth-child(3) { animation-delay: 0.34s; } .home-hero-copy > *:nth-child(4), .page-hero .container > *:nth-child(4) { animation-delay: 0.46s; } /* * Entrada de tarjetas de flota/servicios cargadas dinámicamente (AJAX de * filtros). Cada tarjeta aparece con una leve cascada. El estado inicial se * fija con fill-mode both, por lo que no hay parpadeo al inyectarse. */ @keyframes gtCardIn { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: translateY(0); } } .gt-card-in { animation: gtCardIn 0.5s cubic-bezier(0.22, 0.61, 0.36, 1) both; animation-delay: calc(var(--gt-card-i, 0) * 65ms); } /* * CTA "Cotiza tu Servicio": pulso sutil de atención en bucle + flecha que * se desliza al pasar el cursor. El pulso se pausa al hacer hover. */ @keyframes gtCtaPulse { 0% { box-shadow: 0 0 0 0 rgba(245, 179, 21, 0.55); } 70% { box-shadow: 0 0 0 12px rgba(245, 179, 21, 0); } 100% { box-shadow: 0 0 0 0 rgba(245, 179, 21, 0); } } .gt-cta-anim { animation: gtCtaPulse 2.6s ease-out infinite; } .gt-cta-anim .icon { transition: transform 0.2s ease; } .gt-cta-anim:hover { animation-play-state: paused; } .gt-cta-anim:hover .icon { transform: translateX(4px); } /* Realce al pasar el cursor sobre las tarjetas. */ .servicio-card, .tarjeta-card, .flota-card, .cotiza-equipo-card, .ubicacion-card, .cliente-logo-card, .legal-intro-card { transition: transform 0.28s ease, box-shadow 0.28s ease; } .servicio-card:hover, .tarjeta-card:hover, .flota-card:hover, .cotiza-equipo-card:hover, .ubicacion-card:hover, .cliente-logo-card:hover, .legal-intro-card:hover { transform: translateY(-5px); box-shadow: 0 14px 30px rgba(16, 32, 27, 0.13); } /* Respeta la preferencia de menos movimiento. */ @media (prefers-reduced-motion: reduce) { .gt-reveal-on .gt-reveal { opacity: 1 !important; transform: none !important; transition: none !important; } .home-hero-copy > *, .page-hero .container > * { animation: none; } .gt-cta-anim { animation: none; } .gt-cta-anim:hover .icon { transform: none; } .gt-card-in { animation: none; } .home-clientes-track { animation: none; } .servicio-card, .tarjeta-card, .flota-card, .cotiza-equipo-card, .ubicacion-card, .cliente-logo-card, .legal-intro-card { transition: none; } .servicio-card:hover, .tarjeta-card:hover, .flota-card:hover, .cotiza-equipo-card:hover, .ubicacion-card:hover, .cliente-logo-card:hover, .legal-intro-card:hover { transform: none; box-shadow: none; } }