/* ============================================================ motion.css — motor de animación (skill motion-web) ADAPTADO para Perfumania Deluxe: · se quitó la regla global «img,video{height:auto}» porque el hero y las tarjetas de producto usan height:100% + object-fit. · se quitó el bloque [data-motion-header]: la cabecera del sitio ya tiene su propio sticky y ese CSS la forzaría a fondo blanco. Va DESPUÉS de site.css. ============================================================ */ /* ------------------------------------------------------------ Estados iniciales Se aplican sólo cuando .motion-ready está en , que lo pone el snippet inline del . Si el JS falla o el navegador bloquea los CDN, la clase nunca aparece y todo el contenido se ve normal. Ocultar por CSS sin esa condición es la forma más común de dejar una web en blanco en producción. ------------------------------------------------------------ */ .motion-ready [data-motion="fade"], .motion-ready [data-motion="fade-up"], .motion-ready [data-motion="fade-down"], .motion-ready [data-motion="slide-left"], .motion-ready [data-motion="slide-right"], .motion-ready [data-motion="scale-in"], .motion-ready [data-motion="blur-in"], .motion-ready [data-motion-stagger] > * { opacity: 0; } .motion-ready [data-motion="clip-up"] { clip-path: inset(100% 0 0 0); } /* El hero entra al cargar, no al hacer scroll */ .motion-ready [data-motion-hero-item] { opacity: 0; } /* …salvo el candidato a LCP, que debe pintarse ya */ .motion-ready [data-motion-hero-item="lcp"] { opacity: 1; } /* prefers-reduced-motion o JS caído: todo visible, cero transformaciones */ .motion-off [data-motion], .motion-off [data-motion-stagger] > *, .motion-off [data-motion-hero-item] { opacity: 1 !important; transform: none !important; clip-path: none !important; filter: none !important; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } /* ------------------------------------------------------------ Texto palabra a palabra ------------------------------------------------------------ */ .motion-word { display: inline-block; overflow: hidden; vertical-align: top; /* El padding evita que se recorten tildes, colas de "g"/"j" y acentos */ padding-bottom: 0.12em; margin-bottom: -0.12em; } .motion-word-inner { display: inline-block; will-change: transform; } /* ------------------------------------------------------------ Galería horizontal ------------------------------------------------------------ */ [data-motion-horizontal] { overflow: hidden; } [data-motion-horizontal] .motion-track { display: flex; gap: 1.5rem; will-change: transform; } [data-motion-horizontal] .motion-track > * { flex: 0 0 auto; } /* En móvil pasa a scroll nativo con snap */ .motion-horizontal-native { overflow-x: auto; -webkit-overflow-scrolling: touch; scroll-snap-type: x mandatory; scrollbar-width: none; } .motion-horizontal-native::-webkit-scrollbar { display: none; } .motion-horizontal-native .motion-track { transform: none !important; padding-inline: 1rem; } .motion-horizontal-native .motion-track > * { scroll-snap-align: center; } /* ------------------------------------------------------------ Parallax y secciones fijadas ------------------------------------------------------------ */ [data-motion-parallax] { will-change: transform; } [data-motion-pin] { min-height: 100vh; min-height: 100svh; } /* Lenis: mientras interpola, el scroll nativo debe estar quieto */ html.lenis, html.lenis body { height: auto; } .lenis.lenis-smooth { scroll-behavior: auto !important; } .lenis.lenis-stopped { overflow: hidden; }