/** * OZ Reveal — animaciones de entrada al hacer scroll (scroll reveal). * * Los bloques inician ocultos (gestionado por `html.oz-anim`, que añade el JS * en el antes del primer render → sin parpadeo) y se revelan cuando * entran en el viewport (clase `.oz-in` añadida por IntersectionObserver). * * Selector de bloques (debe coincidir con TARGETS en oz-reveal.js): * .oz-pb-col, #footer-widgets .widget, .site-footer .widget, * .woocommerce ul.products > li.product */ /* Estado inicial oculto (aplicado desde el primer render por la clase oz-anim). */ html.oz-anim :is(.oz-pb-col, #footer-widgets .widget, .site-footer .widget, .woocommerce ul.products > li.product) { opacity: 0; transform: translateY(34px); transition: opacity .7s cubic-bezier(.2, .6, .2, 1), transform .7s cubic-bezier(.2, .6, .2, 1); will-change: opacity, transform; } /* Dirección de entrada (asignada por el JS mientras el bloque aún está invisible). */ html.oz-anim :is(.oz-pb-col, #footer-widgets .widget, .site-footer .widget, .woocommerce ul.products > li.product).oz-from-left:not(.oz-in) { transform: translateX(calc(-1 * var(--oz-dx, 48px))); } html.oz-anim :is(.oz-pb-col, #footer-widgets .widget, .site-footer .widget, .woocommerce ul.products > li.product).oz-from-right:not(.oz-in) { transform: translateX(var(--oz-dx, 48px)); } html.oz-anim :is(.oz-pb-col, #footer-widgets .widget, .site-footer .widget, .woocommerce ul.products > li.product).oz-from-up:not(.oz-in) { transform: translateY(34px); } /* Estado revelado. */ html.oz-anim :is(.oz-pb-col, #footer-widgets .widget, .site-footer .widget, .woocommerce ul.products > li.product).oz-in { opacity: 1; transform: none; } /* Fallback de seguridad: si el JS principal no llega a correr, se muestra todo. */ html.oz-anim-fallback :is(.oz-pb-col, #footer-widgets .widget, .site-footer .widget, .woocommerce ul.products > li.product) { opacity: 1 !important; transform: none !important; transition: none !important; } /* Respeta "reducir movimiento": nada se oculta ni se anima. */ @media (prefers-reduced-motion: reduce) { html :is(.oz-pb-col, #footer-widgets .widget, .site-footer .widget, .woocommerce ul.products > li.product) { opacity: 1 !important; transform: none !important; transition: none !important; } } /* ========================================================= Efecto en botones: elevación al pasar el mouse + "pop" de entrada cuando su bloque se revela. ========================================================= */ .oz-card__button, .ozs__button, .ozs__cta, .oz-slide__button, .wp-block-button__link, .single_add_to_cart_button, .woocommerce a.button, .oz-pb-block .button { transition: transform .25s ease, box-shadow .25s ease, filter .25s ease; } .oz-card__button:hover, .ozs__button:hover, .ozs__cta:hover, .oz-slide__button:hover, .wp-block-button__link:hover, .single_add_to_cart_button:hover, .woocommerce a.button:hover, .oz-pb-block .button:hover { transform: translateY(-3px) scale(1.03); box-shadow: 0 10px 24px rgba(0, 0, 0, .22); filter: brightness(1.06); } .oz-card__button:active, .ozs__button:active, .ozs__cta:active, .oz-slide__button:active, .wp-block-button__link:active, .single_add_to_cart_button:active, .woocommerce a.button:active, .oz-pb-block .button:active { transform: translateY(-1px) scale(1); } html.oz-anim .oz-in :is(.oz-card__button, .ozs__button, .ozs__cta, .oz-slide__button, .wp-block-button__link, .single_add_to_cart_button, .woocommerce a.button, .button) { animation: ozBtnPop .55s cubic-bezier(.2, .7, .3, 1.3) .12s both; } @keyframes ozBtnPop { 0% { transform: scale(.9); } 60% { transform: scale(1.04); } 100% { transform: scale(1); } } @media (prefers-reduced-motion: reduce) { html.oz-anim .oz-in :is(.oz-card__button, .ozs__button, .ozs__cta, .oz-slide__button, .wp-block-button__link, .single_add_to_cart_button, .woocommerce a.button, .button) { animation: none; } }