.otp-anim-container{display:flex;flex-direction:column;align-items:center;width:100%;position:relative}.otp-anim-container:before{content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:150%;height:150%;background:radial-gradient(circle,rgba(34,197,94,.25) 0,rgba(0,0,0,0) 60%);opacity:0;transition:opacity 1s ease-in-out 2.5s;z-index:0;pointer-events:none}.otp-anim-container.is-complete:before{opacity:1}.otp-anim-inputs{display:flex;gap:16px;position:relative;min-height:64px;align-items:center;justify-content:center;z-index:1}.otp-anim-box{position:relative;width:64px;height:64px;border-radius:16px;background-color:#333;overflow:hidden;flex-shrink:0;will-change:transform,opacity,box-shadow;transition:transform .2s cubic-bezier(.34,1.56,.64,1),box-shadow .2s ease}.otp-anim-box:focus-within{background-color:#f05133;transform:scale(1.1);box-shadow:0 8px 24px rgba(240,81,51,.3);z-index:10}.otp-anim-box.otp-error{background-color:#3b1414;box-shadow:0 0 0 1px rgba(239,68,68,.3)}.otp-anim-box:before{content:"";position:absolute;top:-100%;left:-100%;width:300%;height:300%;background:transparent;pointer-events:none;z-index:0;opacity:0}.is-complete .otp-anim-box:before{opacity:1;background:conic-gradient(from 0deg,transparent 0,transparent 55%,rgba(240,81,51,.15) 70%,#f05133 92%,#ffb4a2 100%);animation:otp-rotate-gradient 1.25s linear 2,otp-morph-border-green .5s ease-in-out 2.5s forwards}@keyframes otp-rotate-gradient{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}@keyframes otp-morph-border-green{0%,32%{background:conic-gradient(from 0deg,#f05133 0,#ff7a59 50%,#f05133 100%)}33%{background:conic-gradient(from 0deg,#22c55e 0,#16a34a 50%,#22c55e 100%)}to{background:conic-gradient(from 0deg,#22c55e 0,#16a34a 50%,#22c55e 100%)}}.otp-anim-input{position:absolute;top:2.5px;left:2.5px;width:calc(100% - 5px);height:calc(100% - 5px);background-color:#161616;border:none;border-radius:13.5px;color:#fff;font-size:28px;font-weight:500;text-align:center;outline:none;font-family:Inter,sans-serif;z-index:1;transition:background-color .4s ease}.otp-anim-input.otp-error{background-color:#2a1010}.is-complete .otp-anim-input{animation:otp-fade-text .2s ease 2.3s forwards}@keyframes otp-fade-text{to{color:transparent;background-color:#161616}}.is-complete .otp-anim-box.is-first-box{z-index:4;animation:otp-glow-pulse-green 1.5s 3s infinite alternate}@keyframes otp-glow-pulse-green{0%{box-shadow:0 0 8px rgba(34,197,94,.4)}to{box-shadow:0 0 24px rgba(34,197,94,1)}}.otp-anim-box:after{content:"";position:absolute;top:0;left:-150%;width:50%;height:100%;background:linear-gradient(90deg,rgba(255,255,255,0) 0,rgba(255,255,255,.4) 50%,rgba(255,255,255,0));transform:skewX(-25deg);z-index:5;pointer-events:none}.is-complete .otp-anim-box.is-first-box:after{animation:otp-sweep-shimmer 3s cubic-bezier(.4,0,.2,1) 3.5s infinite}@keyframes otp-sweep-shimmer{0%{left:-150%}25%{left:200%}to{left:200%}}.otp-anim-tick{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%) scale(.5);width:32px;height:32px;opacity:0;z-index:10;pointer-events:none}.otp-anim-success{font-size:16px;font-weight:600;color:#22c55e;letter-spacing:.3px;text-shadow:0 2px 10px rgba(34,197,94,.4);display:flex;align-items:center;gap:6px}@media (max-width:480px){.otp-anim-box{width:56px;height:56px;border-radius:14px}.otp-anim-input{font-size:24px;border-radius:11.5px}.otp-anim-inputs{gap:12px}}