.coin-container{width:10rem;height:10rem;perspective:1000px;margin:auto}.coin{width:100%;height:100%;position:relative;transform-style:preserve-3d;transition:transform 1s}.coin.flipping{animation:flip 2s ease-out forwards}.coin.heads{transform:rotateY(0deg)}.coin.tails{transform:rotateY(180deg)}.coin .side{position:absolute;width:100%;height:100%;-webkit-backface-visibility:hidden;backface-visibility:hidden;border-radius:50%;display:flex;align-items:center;justify-content:center;border:4px solid hsl(var(--accent));background-color:hsl(var(--primary));color:hsl(var(--primary-foreground));box-shadow:0 0 20px hsl(var(--primary)/.5)}.coin .back{transform:rotateY(180deg)}@keyframes flip{0%{transform:rotateY(0)}to{transform:rotateY(5turn)}}