.machine{position:relative;isolation:isolate;overflow:hidden}.machine::before{content:"";position:absolute;z-index:-1;left:50%;top:50%;width:40px;aspect-ratio:1;border:4px solid #fff4a8;border-radius:50%;opacity:0;transform:translate(-50%,-50%) scale(.2);box-shadow:0 0 25px #fff,0 0 55px #f5cf56}.magic{position:relative;display:grid;place-items:center;width:70px;height:90px;animation:none}.magic span{display:block;font-size:3.4rem;transform:rotate(-28deg);transform-origin:20% 85%}.magic i{position:absolute;right:1px;top:0;color:#fff5a6;font-size:2rem;font-style:normal;filter:drop-shadow(0 0 7px #fff)}.target{position:relative}.machine.transformed::before{animation:magicAura .72s ease-out}.machine.transformed .magic span{animation:wandCast .62s ease-in-out}.machine.transformed .magic i{animation:spellFlash .7s ease-out}.machine.transformed .target{animation:magicReveal .82s cubic-bezier(.2,.8,.2,1)}.sparkles{position:absolute;z-index:5;inset:0;pointer-events:none}.sparkles span{position:absolute;left:50%;top:48%;color:var(--spark-color,#fff6a5);font-size:var(--spark-size,1.5rem);opacity:0;text-shadow:0 0 8px #fff;animation:sparkBurst .8s ease-out forwards;animation-delay:var(--spark-delay,0s)}@keyframes wandCast{0%{transform:rotate(-28deg)}35%{transform:rotate(25deg) scale(1.15)}65%{transform:rotate(-5deg) scale(1.08)}100%{transform:rotate(-28deg)}}@keyframes spellFlash{0%{opacity:.2;transform:scale(.2) rotate(0)}45%{opacity:1;transform:scale(2.4) rotate(100deg)}100%{opacity:0;transform:scale(3.3) rotate(180deg)}}@keyframes magicAura{0%{opacity:0;transform:translate(-50%,-50%) scale(.2)}42%{opacity:1}100%{opacity:0;transform:translate(-50%,-50%) scale(12)}}@keyframes magicReveal{0%,25%{opacity:.2;filter:blur(8px);transform:scale(.7) rotate(-4deg)}65%{opacity:1;filter:blur(0);transform:scale(1.08) rotate(2deg)}100%{transform:scale(1)}}@keyframes sparkBurst{0%{opacity:0;transform:translate(-50%,-50%) scale(.2) rotate(0)}25%{opacity:1}100%{opacity:0;transform:translate(calc(-50% + var(--spark-x)),calc(-50% + var(--spark-y))) scale(1.4) rotate(180deg)}}@media(max-width:620px){.magic{width:42px}.magic span{font-size:2.4rem}.magic i{font-size:1.4rem}}@media(prefers-reduced-motion:reduce){.sparkles{display:none}.machine.transformed::before{opacity:0}.machine.transformed .target{filter:none;opacity:1}}