/* ========================================================================== Sweet Add-to-Cart Animation (v3 — estrella pop + abrir carrito) - Oculta TODO el overlay nativo de Themeco (.x-cart-notification). - Muestra una estrella (star.png, color/outline propios) que hace "pop" centrada en viewport: pequeña -> grande -> desaparece. - El JS abre el modal del carrito tras el pop. Custom property inyectada desde PHP: --satc-star-url ========================================================================== */ /* 1) Ocultar por completo el overlay nativo de Themeco (círculo + íconos). Lo neutralizamos pero NO lo removemos del DOM: seguimos leyendo su ciclo de clases (loading/added) como disparador. */ .x-cart-notification { opacity: 0 !important; visibility: hidden !important; pointer-events: none !important; } /* 2) Nuestra estrella: elemento propio, fixed y centrado en viewport. La inyecta el JS como
en el . */ .satc-star-pop { position: fixed; top: 50%; left: 50%; width: 120px; height: 120px; margin: -60px 0 0 -60px; /* centra sin depender de transform (lo usa la animación) */ background: var(--satc-star-url) center / contain no-repeat; z-index: 100000; /* sobre el contenido, bajo modales nativos si hiciera falta */ pointer-events: none; opacity: 0; will-change: transform, opacity; } /* Pop: aparece pequeña, crece y desaparece */ .satc-star-pop.is-pop { animation: satcStarPop .7s cubic-bezier(.22, 1, .36, 1) forwards; } @keyframes satcStarPop { 0% { transform: scale(.2) rotate(-12deg); opacity: 0; } 35% { transform: scale(1.15) rotate(4deg); opacity: 1; } 60% { transform: scale(1) rotate(0deg); opacity: 1; } 100% { transform: scale(1.6) rotate(6deg); opacity: 0; } } /* Motion reducido: un fade simple, sin escalado dramático */ @media (prefers-reduced-motion: reduce) { .satc-star-pop.is-pop { animation: satcStarFade .5s ease forwards; } @keyframes satcStarFade { 0% { opacity: 0; transform: scale(1); } 40% { opacity: 1; } 100% { opacity: 0; transform: scale(1); } } }