/* ========================================================================== ANIMATIONS.CSS El sitio usa animación de forma deliberada y puntual, no en cada sección: una única secuencia de entrada en el hero (texto + skyline). El resto de la interacción (hover, foco, menú mobile) se resuelve con transiciones cortas definidas junto a cada componente. ========================================================================== */ @keyframes hero-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } } .hero__copy > * { animation: hero-rise 700ms ease both; } .hero__eyebrow { animation-delay: 0ms; } .hero h1 { animation-delay: 80ms; } .hero__lead { animation-delay: 160ms; } .hero__actions { animation-delay: 240ms; } .hero__quick-list { animation-delay: 320ms; } @media (prefers-reduced-motion: reduce) { .hero__copy > * { animation: none; } } /* ========================================================================== Aparición al hacer scroll (activada por js/reveal.js) El estado oculto sólo se aplica cuando el script agregó .reveals-on al : si el JS no corre o el usuario pide menos movimiento, el contenido se ve normal desde el inicio. ========================================================================== */ .reveals-on .section__header, .reveals-on .service-card, .reveals-on .why__item, .reveals-on .process__item, .reveals-on .obra, .reveals-on .quote__side, .reveals-on .quote__form { opacity: 0; transform: translateY(18px); transition: opacity 620ms ease, transform 620ms cubic-bezier(0.22, 1, 0.36, 1); transition-delay: var(--reveal-delay, 0ms); will-change: opacity, transform; } .reveals-on .in-view { opacity: 1; transform: none; } /* ---- Micro-interacciones ------------------------------------------------- */ /* Subrayado de navegación que crece desde la izquierda */ .header__nav-list a { position: relative; border-bottom: 0; } .header__nav-list a::after { content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 2px; background: var(--color-blue); transform: scaleX(0); transform-origin: left; transition: transform var(--transition-base); } .header__nav-list a:hover::after, .header__nav-list a:focus-visible::after { transform: scaleX(1); } /* El ícono de cada tarjeta de servicio reacciona al hover de la tarjeta */ .service-card__icon { transition: transform var(--transition-base), background-color var(--transition-base); } .service-card:hover .service-card__icon { transform: translateY(-2px) rotate(-4deg); background: var(--color-blue); } /* Punto que late junto al eyebrow del hero */ .hero__eyebrow::before { animation: eyebrow-pulse 2.4s ease-in-out infinite; } @keyframes eyebrow-pulse { 0%, 100% { opacity: 1; transform: scaleX(1); } 50% { opacity: 0.35; transform: scaleX(0.6); } } @media (prefers-reduced-motion: reduce) { .hero__eyebrow::before, .service-card:hover .service-card__icon { animation: none; transform: none; } }