/* ============================================================ Motion — reveals al scroll, entrada del hero y vida de las ilustraciones. Solo transform/opacity (compositor-friendly). Los estados ocultos se activan únicamente cuando el JS agrega .js-anim a : sin JS (o con reduced-motion) todo se ve. El kill-switch global de prefers-reduced-motion vive en global.css y también anula todo lo de este archivo. ============================================================ */ /* ---------- Reveals al scroll ---------- */ /* El JS marca elementos con data-anim y les asigna --anim-i para escalonar grupos. Al terminar la transición, el JS saca el atributo para devolverle a cada elemento sus transiciones originales (hovers de cards, fotos, botones). */ .js-anim [data-anim] { opacity: 0; transform: translateY(22px); transition: opacity 640ms var(--ease-out), transform 640ms var(--ease-out); transition-delay: calc(var(--anim-i, 0) * 80ms); } .js-anim [data-anim].anim-in { opacity: 1; transform: translateY(0); } /* ---------- Entrada del hero ---------- */ @keyframes hero-sube { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: translateY(0); } } .hero .estado-chip.visible, .hero h1, .hero .hero-def, .hero .hero-actions, .hero .hero-datos { animation: hero-sube 700ms var(--ease-out) backwards; } .hero .estado-chip.visible { animation-delay: 40ms; } .hero h1 { animation-delay: 100ms; } .hero .hero-def { animation-delay: 220ms; } .hero .hero-actions{ animation-delay: 340ms; } .hero .hero-datos { animation-delay: 460ms; } /* La foto es el LCP: nunca se oculta, solo se asienta. */ @keyframes hero-foto { from { transform: scale(1.045) translateY(6px); } to { transform: scale(1) translateY(0); } } .hero-visual .foto { animation: hero-foto 900ms var(--ease-out) backwards; } /* El tomate de la marca cae, rebota y queda flotando. */ @keyframes tomate-entra { 0% { opacity: 0; transform: rotate(-14deg) scale(0.4); } 70% { opacity: 1; transform: rotate(11deg) scale(1.08); } 100% { opacity: 1; transform: rotate(8deg) scale(1); } } @keyframes tomate-flota { from { transform: rotate(8deg) translateY(0); } to { transform: rotate(10.5deg) translateY(-7px); } } .hero-visual .tomate { animation: tomate-entra 800ms var(--ease-out) 500ms backwards, tomate-flota 4200ms ease-in-out 1300ms infinite alternate; } /* ---------- Vida de las ilustraciones ---------- */ /* Flotan despacio; las rotaciones base (sections.css) van incluidas en los keyframes porque animation pisa transform. */ @keyframes ilu-flota { from { transform: rotate(4deg) translateY(2px); } to { transform: rotate(8deg) translateY(-4px); } } .paso-ilu { animation: ilu-flota 5s ease-in-out infinite alternate; } .paso:nth-child(2) .paso-ilu { animation-delay: -1.7s; } .paso:nth-child(3) .paso-ilu { animation-delay: -3.4s; } @keyframes faq-bob { from { transform: rotate(5deg) translateY(2px); } to { transform: rotate(9.5deg) translateY(-4px); } } .faq-ilu { animation: faq-bob 5.5s ease-in-out infinite alternate; } /* El tomate DJ se mueve al ritmo. */ @keyframes dj-groove { from { transform: rotate(-1.5deg) translateY(0); } to { transform: rotate(1.5deg) translateY(-4px); } } .eventos-dj { animation: dj-groove 2s ease-in-out infinite alternate; transform-origin: 50% 85%; } /* ---------- Micro-interacciones ---------- */ .btn:active { transform: translateY(1px) scale(0.98); }