/* GoldenKey — OTP "golden vault" animation (OT.1.0)
   Six digit boxes → on the 6th digit they slide together into one gold bar with a key loader → green key-turn tick on success,
   red shake + scatter back on a wrong code. Attaches itself to the existing e-mail code field (assets/js/gk-otp.js). */
.gko{--g:#c8963e;--g2:#f5d77a;--ink:#1f1a0e;--ok:#1d9a5a;--bad:#d7372f;position:relative;display:grid;gap:10px;justify-items:center;margin:6px 0 2px}
.gko-row{display:flex;gap:10px;justify-content:center;position:relative;transition:gap .45s cubic-bezier(.65,0,.35,1)}
.gko-box{width:46px;height:56px;border-radius:14px;border:1.5px solid #e2dccb;background:#fff;display:grid;place-items:center;font:600 1.35rem/1 Inter,system-ui,sans-serif;color:var(--ink);position:relative;
  transition:transform .45s cubic-bezier(.65,0,.35,1),border-color .2s,box-shadow .2s,background .3s,opacity .3s,border-radius .45s;box-shadow:0 1px 0 rgba(0,0,0,.03)}
.gko-box::after{content:"";position:absolute;left:12px;right:12px;bottom:9px;height:2px;border-radius:2px;background:#e2dccb;transition:background .2s,transform .2s}
.gko-box.is-on{border-color:var(--g);box-shadow:0 0 0 4px rgba(200,150,62,.15)}
.gko-box.is-on::after{background:var(--g);animation:gko-blink 1s steps(2) infinite}
.gko-box.has{border-color:var(--g);background:linear-gradient(180deg,#fffdf7,#fff7e4)}
.gko-box.has::after{background:transparent}
.gko-box.pop{animation:gko-pop .22s cubic-bezier(.3,1.6,.5,1)}
.gko-input{position:absolute!important;opacity:0!important;width:1px!important;height:1px!important;left:-9999px!important;pointer-events:none!important}
.gko-hint{font-size:.78rem;color:#7a7262;min-height:1.1em;transition:color .2s}
/* ---- gather: the six boxes slide into the centre and become one gold bar */
.gko.is-busy .gko-row{gap:0}
.gko.is-busy .gko-box{border-radius:0;border-color:transparent;background:linear-gradient(180deg,var(--g2),var(--g));color:transparent;box-shadow:none;margin:0 -1px}
.gko.is-busy .gko-box:first-child{border-radius:14px 0 0 14px}.gko.is-busy .gko-box:last-child{border-radius:0 14px 14px 0}
.gko.is-busy .gko-box::after{background:transparent}
.gko-key{position:absolute;inset:0;display:grid;place-items:center;pointer-events:none;opacity:0;transition:opacity .25s}
.gko.is-busy .gko-key{opacity:1;transition-delay:.35s}
.gko-key svg{width:30px;height:30px;color:#fff;filter:drop-shadow(0 1px 1px rgba(0,0,0,.25))}
.gko.is-busy .gko-key svg{animation:gko-turn 1.1s cubic-bezier(.65,0,.35,1) infinite}
.gko-bar{position:absolute;left:0;right:0;bottom:-6px;height:3px;border-radius:3px;background:rgba(200,150,62,.2);overflow:hidden;opacity:0;transition:opacity .2s}
.gko.is-busy .gko-bar{opacity:1}
.gko-bar i{position:absolute;left:-40%;width:40%;height:100%;background:linear-gradient(90deg,transparent,var(--g),transparent);animation:gko-scan 1.1s linear infinite}
/* ---- success: the bar turns green, the key becomes a tick, confetti dots burst */
.gko.is-ok .gko-row{gap:0}
.gko.is-ok .gko-box{border-radius:0;border-color:transparent;background:linear-gradient(180deg,#39c57f,var(--ok));color:transparent;box-shadow:none;margin:0 -1px}
.gko.is-ok .gko-row{filter:drop-shadow(0 8px 18px rgba(29,154,90,.28))}
.gko.is-ok .gko-box:first-child{border-radius:14px 0 0 14px}.gko.is-ok .gko-box:last-child{border-radius:0 14px 14px 0}
.gko.is-ok .gko-box::after{background:transparent}
.gko.is-ok .gko-key{opacity:1}.gko.is-ok .gko-key svg{animation:gko-tick .5s cubic-bezier(.3,1.6,.5,1) both}
.gko.is-ok .gko-hint{color:var(--ok);font-weight:600}
.gko-dot{position:absolute;width:6px;height:6px;border-radius:50%;left:50%;top:50%;pointer-events:none;opacity:0}
.gko.is-ok .gko-dot{animation:gko-burst .75s cubic-bezier(.2,.8,.3,1) both}
/* ---- wrong code: red shake, boxes scatter back to six, digits wiped */
.gko.is-bad .gko-row{animation:gko-shake .5s cubic-bezier(.36,.07,.19,.97)}
.gko.is-bad .gko-box{border-color:var(--bad);background:#fff3f2;box-shadow:0 0 0 4px rgba(215,55,47,.12)}
.gko.is-bad .gko-hint{color:var(--bad);font-weight:600}
@keyframes gko-blink{to{opacity:.2}}
@keyframes gko-pop{0%{transform:scale(.7)}100%{transform:scale(1)}}
@keyframes gko-turn{0%{transform:rotate(0)}45%{transform:rotate(90deg)}55%{transform:rotate(90deg)}100%{transform:rotate(360deg)}}
@keyframes gko-scan{to{left:100%}}
@keyframes gko-tick{0%{transform:scale(.3) rotate(-30deg);opacity:0}100%{transform:scale(1) rotate(0);opacity:1}}
@keyframes gko-burst{0%{opacity:1;transform:translate(-50%,-50%) scale(.6)}100%{opacity:0;transform:translate(calc(-50% + var(--dx)),calc(-50% + var(--dy))) scale(1.2)}}
@keyframes gko-shake{10%,90%{transform:translateX(-2px)}20%,80%{transform:translateX(4px)}30%,50%,70%{transform:translateX(-7px)}40%,60%{transform:translateX(7px)}}
@media (max-width:420px){.gko-box{width:40px;height:50px;font-size:1.2rem}.gko-row{gap:7px}}
@media (prefers-reduced-motion:reduce){.gko *,.gko *::after{animation:none!important;transition:none!important}}

/* ---- mode A (OT.1.1): the login's own one-digit boxes, animated in place */
.gko-n{position:relative;transition:gap .45s cubic-bezier(.65,0,.35,1)}
.gko-n .gko-nbox{transition:transform .45s cubic-bezier(.65,0,.35,1),border-color .2s,box-shadow .2s,background .3s,color .2s,border-radius .45s,margin .45s}
.gko-n .gko-nbox.pop{animation:gko-pop .22s cubic-bezier(.3,1.6,.5,1)}
.gko-n.is-busy,.gko-n.is-ok{gap:0!important;column-gap:0!important}
.gko-n.is-busy .gko-nbox,.gko-n.is-ok .gko-nbox{border-radius:0!important;border-color:transparent!important;color:transparent!important;caret-color:transparent;box-shadow:none!important;margin:0 -1px!important}
.gko-n.is-busy .gko-nbox:first-child,.gko-n.is-ok .gko-nbox:first-child{border-radius:14px 0 0 14px!important}
.gko-n.is-busy .gko-nbox:last-of-type,.gko-n.is-ok .gko-nbox:last-of-type{border-radius:0 14px 14px 0!important}
.gko-n.is-busy .gko-nbox{background:linear-gradient(180deg,#f5d77a,#c8963e)!important}
.gko-n.is-busy .gko-key{opacity:1;transition-delay:.35s}.gko-n.is-busy .gko-key svg{animation:gko-turn 1.1s cubic-bezier(.65,0,.35,1) infinite}
.gko-n.is-busy .gko-bar{opacity:1}
.gko-n.is-ok .gko-nbox{background:linear-gradient(180deg,#39c57f,#1d9a5a)!important}
.gko-n.is-ok{filter:drop-shadow(0 8px 18px rgba(29,154,90,.28))}
.gko-n.is-ok .gko-key{opacity:1}.gko-n.is-ok .gko-key svg{animation:gko-tick .5s cubic-bezier(.3,1.6,.5,1) both}
.gko-n.is-ok .gko-dot{animation:gko-burst .75s cubic-bezier(.2,.8,.3,1) both}
.gko-n.is-bad{animation:gko-shake .5s cubic-bezier(.36,.07,.19,.97)}
.gko-n.is-bad .gko-nbox{border-color:#d7372f!important;background:#fff3f2!important;box-shadow:0 0 0 4px rgba(215,55,47,.12)!important}
.gko-n + .gko-hint-ok{color:#1d9a5a}