.pinata{--pinata-rope:3rem;perspective:600px}.pinata__swing{transform-origin:50% calc(-1 * var(--pinata-rope));will-change:transform;position:relative}.pinata__body{touch-action:pan-y;cursor:pointer;-webkit-tap-highlight-color:transparent;border-radius:9999px;width:100%;display:block}.pinata__body:focus-visible{outline:3px solid var(--color-primary);outline-offset:4px}.pinata__half--left{clip-path:inset(0 50% 0 0)}.pinata__half--right{clip-path:inset(0 0 0 50%);position:absolute;inset:0}.pinata[data-state=broken] .pinata__half--left{transform:translate(-6%)rotate(-6deg)}.pinata[data-state=broken] .pinata__half--right{transform:translate(6%)rotate(6deg)}@media (prefers-reduced-motion:no-preference){.pinata[data-state=broken] .pinata__half--left{animation:pinata-fall-left var(--pinata-fall) ease-in forwards}.pinata[data-state=broken] .pinata__half--right{animation:pinata-fall-right var(--pinata-fall) ease-in forwards}.pinata__reveal{animation:pinata-reveal var(--motion-dur,.45s) var(--motion-ease,ease-out) var(--pinata-reveal-delay) both}@keyframes pinata-fall-left{to{opacity:0;transform:translate(-12%,70%)rotate(-20deg)}}@keyframes pinata-fall-right{to{opacity:0;transform:translate(12%,70%)rotate(20deg)}}@keyframes pinata-reveal{0%{opacity:0;transform:translateY(var(--motion-rise,16px)) scale(.96)}}}