.confetti-holder.svelte-rtt661 { position: relative; } @keyframes svelte-rtt661-rotate { 0% { transform: skew(var(--skew)) rotate3d(var(--full-rotation)); } 100% { transform: skew(var(--skew)) rotate3d(var(--rotation-xyz), calc(var(--rotation-deg) + 360deg)); } } @keyframes svelte-rtt661-translate { 0% { opacity: 1; } 8% { transform: translateY(calc(var(--translate-y) * 0.95)) translateX(calc(var(--translate-x) * (var(--x-spread) * 0.9))); opacity: 1; } 12% { transform: translateY(var(--translate-y)) translateX(calc(var(--translate-x) * (var(--x-spread) * 0.95))); opacity: 1; } 16% { transform: translateY(var(--translate-y)) translateX(calc(var(--translate-x) * var(--x-spread))); opacity: 1; } 100% { transform: translateY(calc(var(--translate-y) + var(--fall-distance))) translateX(var(--translate-x)); opacity: 0; } } @keyframes svelte-rtt661-no-gravity-translate { 0% { opacity: 1; } 100% { transform: translateY(var(--translate-y)) translateX(var(--translate-x)); opacity: 0; } } .confetti.svelte-rtt661 { --translate-y: calc(-200px * var(--translate-y-multiplier)); --translate-x: calc(200px * var(--translate-x-multiplier)); position: absolute; height: calc(var(--size) * var(--scale)); width: calc(var(--size) * var(--scale)); animation: svelte-rtt661-translate var(--transition-duration) var(--transition-delay) var(--transition-iteration-count) linear; opacity: 0; pointer-events: none; } .confetti.svelte-rtt661::before { --full-rotation: var(--rotation-xyz), var(--rotation-deg); content: ''; display: block; width: 100%; height: 100%; background: var(--color); background-size: contain; transform: skew(var(--skew)) rotate3d(var(--full-rotation)); animation: svelte-rtt661-rotate var(--transition-duration) var(--transition-delay) var(--transition-iteration-count) linear; } .rounded.svelte-rtt661 .confetti:where(.svelte-rtt661)::before { border-radius: 50%; } .cone.svelte-rtt661 .confetti:where(.svelte-rtt661) { --translate-x: calc(200px * var(--translate-y-multiplier) * var(--translate-x-multiplier)); } .no-gravity.svelte-rtt661 .confetti:where(.svelte-rtt661) { animation-name: svelte-rtt661-no-gravity-translate; animation-timing-function: ease-out; } @media (prefers-reduced-motion) { .reduced-motion.svelte-rtt661 .confetti:where(.svelte-rtt661), .reduced-motion.svelte-rtt661 .confetti:where(.svelte-rtt661)::before { animation: none; } }