/** * caphema — animaciones de la tienda. * * Todo cuelga de dos atributos que pone el layout en : * * data-anim="1" las animaciones están encendidas en Apariencia * data-anim-ready="1" además hay JS y el visitante no pidió menos movimiento * * La distinción importa: el estado inicial de una entrada es "invisible", y * dejar algo invisible cuando nadie va a poder mostrarlo es esconder la tienda. * Por eso NADA se oculta hasta que data-anim-ready existe, y ese atributo lo * pone un script mínimo en el (no un archivo diferido) para que no se * vea el parpadeo del contenido apareciendo dos veces. * * La duración, la distancia y el efecto llegan como variables desde el panel. */ :root { --anim-duration: 600ms; --anim-distance: 24px; --anim-ease: cubic-bezier(.22, .61, .36, 1); } /* ------------------------------------------------------------------ Entradas al hacer scroll ------------------------------------------------------------------ */ html[data-anim-ready="1"] [data-reveal], html[data-anim-ready="1"] [data-reveal-item] { opacity: 0; transition: opacity var(--anim-duration) var(--anim-ease), transform var(--anim-duration) var(--anim-ease), filter var(--anim-duration) var(--anim-ease); transition-delay: var(--reveal-delay, 0ms); will-change: opacity, transform; } /* El efecto es uno solo para toda la tienda: se elige en Apariencia */ html[data-anim-ready="1"][data-anim-effect="up"] [data-reveal], html[data-anim-ready="1"][data-anim-effect="up"] [data-reveal-item] { transform: translate3d(0, var(--anim-distance), 0); } html[data-anim-ready="1"][data-anim-effect="down"] [data-reveal], html[data-anim-ready="1"][data-anim-effect="down"] [data-reveal-item] { transform: translate3d(0, calc(var(--anim-distance) * -1), 0); } html[data-anim-ready="1"][data-anim-effect="side"] [data-reveal], html[data-anim-ready="1"][data-anim-effect="side"] [data-reveal-item] { transform: translate3d(calc(var(--anim-distance) * -1), 0, 0); } html[data-anim-ready="1"][data-anim-effect="zoom"] [data-reveal], html[data-anim-ready="1"][data-anim-effect="zoom"] [data-reveal-item] { transform: scale(.93); } html[data-anim-ready="1"][data-anim-effect="blur"] [data-reveal], html[data-anim-ready="1"][data-anim-effect="blur"] [data-reveal-item] { filter: blur(12px); transform: translate3d(0, calc(var(--anim-distance) / 2), 0); } /* "fade" no necesita regla: se queda sólo con la opacidad */ html[data-anim-ready="1"] [data-reveal][data-shown="1"], html[data-anim-ready="1"] [data-reveal-item][data-shown="1"] { opacity: 1; transform: none; filter: none; will-change: auto; } /* Retrasos fijos para encadenar título → bajada → botón dentro de un bloque */ [data-reveal-delay="1"] { --reveal-delay: 90ms; } [data-reveal-delay="2"] { --reveal-delay: 180ms; } [data-reveal-delay="3"] { --reveal-delay: 270ms; } /* ------------------------------------------------------------------ Movimiento continuo: fotos que respiran, hover con zoom ------------------------------------------------------------------ */ /* Ken Burns del carrusel: un acercamiento lentísimo, ida y vuelta. A 20 s el movimiento no se "ve", se siente; más rápido marea y distrae del producto. */ html[data-anim="1"][data-anim-zoom="1"] [data-kenburns] { animation: kenburns 22s ease-in-out infinite alternate; } @keyframes kenburns { from { transform: scale(1) translate3d(0, 0, 0); } to { transform: scale(1.09) translate3d(0, -1.2%, 0); } } .zoom-slow { transition: transform .9s var(--anim-ease); } @media (hover: hover) { html[data-anim-hover="1"] .group:hover .zoom-slow { transform: scale(1.06); } /* Levantar apenas la tarjeta al pasar el mouse: da profundidad sin mover el resto de la grilla. */ html[data-anim-hover="1"] .lift { transition: transform .25s var(--anim-ease); } html[data-anim-hover="1"] .lift:hover { transform: translateY(-4px); } } /* ------------------------------------------------------------------ Bloque de video ------------------------------------------------------------------ */ .hvideo__box { position: relative; height: var(--h); overflow: hidden; background: #000; } @media (min-width: 1024px) { .hvideo__box { height: var(--h-lg); } } .hvideo__media { position: absolute; inset: 0; height: 100%; width: 100%; object-fit: cover; } /* El iframe siempre es 16:9; lo agrandamos hasta tapar la caja y recortamos por los costados, que es lo que hace object-fit:cover con un