/* One-time code boxes with an orbit finish (otp-orbit.js). Neutral light while typing, green only for an accepted code. */
.otp{--otp-ink:currentColor;--otp-line:rgba(120,130,125,.45);--otp-ok:#1b6b4e;--otp-bad:#c2410c;position:relative;display:block;width:max-content;max-width:100%;margin:6px 0 4px}
.otp-row{display:flex;gap:8px}
.otp-box{position:relative;display:grid;place-items:center;width:44px;height:54px;border:1.5px solid var(--otp-line);border-radius:12px;background:rgba(255,255,255,.55);font:600 22px/1 ui-monospace,"SF Mono",Menlo,Consolas,monospace;color:var(--otp-ink);transition:border-color .18s,box-shadow .18s,background .18s}
.otp-box i{font-style:normal}
.otp-box.full{border-color:color-mix(in srgb,var(--otp-ink) 55%,transparent)}
/* attention is just light, no hue */
.otp-box.on{border-color:color-mix(in srgb,var(--otp-ink) 70%,transparent);box-shadow:0 0 0 4px rgba(255,255,255,.7),0 0 18px 2px rgba(255,255,255,.9)}
.otp-box.on::after{content:"";position:absolute;bottom:11px;width:16px;height:2px;border-radius:2px;background:var(--otp-ink);opacity:.5;animation:otp-caret 1s steps(2,start) infinite}
.otp-box.full.on::after{display:none}
.otp-box.pop i{animation:otp-pop .16s ease-out}
.otp-input{position:absolute;inset:0;width:100%;height:100%;margin:0;padding:0;border:0;opacity:0;font-size:16px;cursor:text;caret-color:transparent;z-index:2;background:transparent}

/* the finish, two keyframes. The origin sits on the hub, so rotate() draws the circle and translateX() winds the box in */
.otp-go .otp-box{transform-origin:calc(50% - var(--dx,0px)) 50%;animation:otp-orbit 1.1s cubic-bezier(.62,0,.3,1) forwards}
.otp-go .otp-box:nth-child(odd){animation-delay:.02s}
.otp-tile{position:absolute;left:50%;top:50%;display:grid;place-items:center;width:54px;height:54px;margin:-27px 0 0 -27px;border-radius:15px;background:var(--otp-ink);color:#fff;opacity:0;transform:scale(0) rotate(-90deg);pointer-events:none}
.otp-tile svg{width:30px;height:30px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;grid-area:1/1;opacity:0}
.otp-tick{stroke-dasharray:1;stroke-dashoffset:1}
.otp-spin{grid-area:1/1;width:22px;height:22px;border:2.5px solid rgba(255,255,255,.35);border-top-color:#fff;border-radius:50%;opacity:0}
.otp-go .otp-tile,.otp-still .otp-tile{animation:otp-tile .5s .62s cubic-bezier(.3,1.4,.5,1) forwards}
.otp-still .otp-tile{animation-delay:0s}
.otp-still .otp-box{opacity:0;transition:opacity .2s}
.otp-go.otp-wait .otp-spin,.otp-still.otp-wait .otp-spin{opacity:1;animation:otp-turn .8s linear infinite}
.otp-ok .otp-tile{background:var(--otp-ok);opacity:1;transform:none;animation:otp-land .45s cubic-bezier(.3,1.4,.5,1)}
.otp-ok .otp-spin{opacity:0;animation:none}
.otp-ok .otp-tile svg{opacity:1}
.otp-ok .otp-tick{animation:otp-draw .35s .15s ease-out forwards}

/* a wrong code shakes the row and tints it, the only other colour */
.otp-bad .otp-tile{animation:none;opacity:0}
.otp-bad .otp-box{opacity:1;animation:otp-shake .5s;border-color:var(--otp-bad)}

/* the page after a posted, accepted code */
.otp-arrive{position:fixed;inset:0;z-index:60;display:grid;place-content:center;justify-items:center;gap:12px;background:rgba(243,245,242,.82);backdrop-filter:blur(6px);animation:otp-fade .25s}
.otp-arrive.out{opacity:0;transition:opacity .45s}
.otp-arrive .otp-tile{position:static;margin:0;background:var(--otp,#1b6b4e);opacity:1;transform:none;animation:otp-land .5s cubic-bezier(.3,1.4,.5,1)}
.otp-arrive .otp-tile svg{opacity:1}
.otp-arrive .otp-tick{animation:otp-draw .35s .15s ease-out forwards}
.otp-arrive-text{font:600 15px system-ui,sans-serif;color:#16211c}

@keyframes otp-orbit{
  0%{transform:rotate(0) translateX(0) scale(1);opacity:1}
  18%{transform:rotate(0) translateX(0) scale(1.06);opacity:1}
  100%{transform:rotate(450deg) translateX(calc(var(--dx,0px) * -1)) scale(.45);opacity:0}
}
@keyframes otp-tile{0%{opacity:0;transform:scale(0) rotate(-90deg)}100%{opacity:1;transform:scale(1) rotate(0)}}
@keyframes otp-land{0%{transform:scale(.6)}100%{transform:scale(1)}}
@keyframes otp-draw{to{stroke-dashoffset:0}}
@keyframes otp-turn{to{transform:rotate(360deg)}}
@keyframes otp-pop{0%{transform:scale(.7)}100%{transform:scale(1)}}
@keyframes otp-caret{to{opacity:0}}
@keyframes otp-shake{0%,100%{transform:translateX(0)}20%{transform:translateX(-7px)}40%{transform:translateX(6px)}60%{transform:translateX(-4px)}80%{transform:translateX(3px)}}
@keyframes otp-fade{from{opacity:0}}
@media (max-width:420px){.otp-box{width:38px;height:48px;font-size:19px}.otp-row{gap:6px}}
@media (prefers-reduced-motion:reduce){.otp-box.pop i,.otp-box.on::after,.otp-bad .otp-box{animation:none}}

/* the same tile inside a toast that reports something done */
.toast .m-ok{position:static;display:inline-grid;vertical-align:middle;width:22px;height:22px;margin:-2px 8px -2px -4px;border-radius:7px;background:var(--otp-ok,#1b6b4e);opacity:1;transform:none;animation:otp-land .4s cubic-bezier(.3,1.4,.5,1)}
.toast .m-ok svg{width:15px;height:15px;opacity:1}
.toast .m-ok .otp-tick{animation:otp-draw .3s .1s ease-out forwards}
html[data-motion="off"] .otp-go .otp-box,html[data-motion="off"] .otp-bad .otp-box{animation:none!important}