/* IJW Checkout — header cart badge burst + pulse */ /* Reduced-motion fallback: the original gentle pulse. */ @keyframes ijw-cart-pulse { 0% { transform: scale(1); } 30% { transform: scale(1.35); } 60% { transform: scale(0.9); } 100% { transform: scale(1); } } .HeaderToolsList__icon.ijw-cart-pulse { animation: ijw-cart-pulse 0.55s cubic-bezier(0.36, 0.07, 0.19, 0.97); transform-origin: center; } /* The bust: quick inflate, implode to nothing while the confetti flies, hold a beat, then fade/scale back in with a little overshoot. */ @keyframes ijw-cart-bust { 0% { transform: scale(1); opacity: 1; } 16% { transform: scale(1.25); opacity: 1; } 30% { transform: scale(0.2); opacity: 0; } 52% { transform: scale(0.2); opacity: 0; } 72% { transform: scale(1.12); opacity: 0.9; } 86% { transform: scale(0.96); opacity: 1; } 100% { transform: scale(1); opacity: 1; } } .HeaderToolsList__icon.ijw-cart-burst { animation: ijw-cart-bust 0.95s cubic-bezier(0.36, 0.07, 0.19, 0.97); transform-origin: center; } /* Confetti layer — fixed on at the icon's centre so it neither inherits the icon's fade-out nor gets clipped by header overflow. */ .ijw-cart-confetti { position: fixed; width: 0; height: 0; z-index: 9999; pointer-events: none; } .ijw-cart-confetti i, .ijw-cart-confetti .is-dot { position: absolute; top: -5px; left: -3px; width: 6px; height: 10px; border-radius: 1.5px; opacity: 0; animation: ijw-confetti-fly var(--t, 600ms) cubic-bezier(0.16, 0.84, 0.44, 1) forwards; } .ijw-cart-confetti .is-dot { width: 7px; height: 7px; border-radius: 50%; } @keyframes ijw-confetti-fly { 0% { transform: translate(0, 0) rotate(0deg) scale(1); opacity: 1; } 65% { opacity: 1; } 100% { /* Small extra downward drift on top of the flight path reads as gravity. */ transform: translate(var(--x, 0px), calc(var(--y, 0px) + 8px)) rotate(var(--r, 180deg)) scale(0.5); opacity: 0; } }