/* Loading, in Hanko's hand: the seal's two rings, the swivelling bar,
   placeholder rows. Markup and keyframes from the design pass. */
@keyframes hk-spin{to{transform:rotate(360deg)}}
@keyframes hk-swivel{0%{left:0;width:24%}25%{left:26%;width:46%}50%{left:76%;width:24%}75%{left:26%;width:46%}100%{left:0;width:24%}}
@keyframes hk-pulse{0%,100%{opacity:1}50%{opacity:.45}}
.hk-seal{display:block;flex:none}
.hk-seal .ring{fill:none;stroke:rgba(183,40,46,.16);stroke-width:4}
.hk-seal .arc{fill:none;stroke:#B7282E;stroke-width:4;stroke-linecap:round;stroke-dasharray:38 88;transform-origin:50% 50%;animation:hk-spin 1s linear infinite}
.hk-seal .inner{fill:none;stroke:rgba(183,40,46,.35);stroke-width:1.5}
.hk-seal.on-dark .ring,.hk-seal.on-vermilion .ring{stroke:rgba(254,253,245,.3)}
.hk-seal.on-dark .arc,.hk-seal.on-vermilion .arc{stroke:#FEFDF5}
.hk-seal.on-dark .inner,.hk-seal.on-vermilion .inner{stroke:rgba(254,253,245,.5)}
.hk-track{position:relative;width:100%;height:6px;border-radius:999px;background:#F6F5EE;overflow:hidden}
.hk-track.thin{height:4px}
.hk-track .swivel{position:absolute;top:0;bottom:0;left:0;width:24%;border-radius:999px;background:#B7282E;animation:hk-swivel 2.2s cubic-bezier(.45,.05,.55,.95) infinite}
.hk-track .fill{position:absolute;top:0;bottom:0;left:0;width:0;border-radius:999px;background:#B7282E;transition:width .25s}
.hk-pct{font:600 13px/1 Inter,system-ui,sans-serif;font-feature-settings:'tnum';color:#1A1A1A}
.hk-ph{display:block;border-radius:999px;background:#F6F5EE;animation:hk-pulse 1.6s ease-in-out infinite}
@media(prefers-reduced-motion:reduce){.hk-seal .arc,.hk-track .swivel,.hk-ph{animation:none}}

/* Turn 14 (the handoff's loaders, 14a-14c): the design's hk2-* keyframes and buildLoaders(), as classes.
   14a the wordmark in motion: <span class="hk-wm hk-ripple"><i>h</i><i>a</i><i>n</i><i>k</i><i>o</i><b>.</b></span>
   (hk-flip, hk-bold, hk-wide, hk-type, hk-bounce, hk-ink; hk-stamp is <span class="hk-stamp">h.</span>).
   14b: <span class="hk-ring s16|s24|s44"></span>, <svg class="hk-arc">, hk-dual, hk-ticks, hk-orbit,
   <span class="hk-inline"><span class="hk-ring s16"></span>Converting the .docx</span>.
   14c: hk-bar (unknown length), hk-prog (known, with its shine), hk-topbar (3px under the nav),
   .hk-busy on a button (its label becomes the action), hk-sk rows (lists before data arrives). */
@keyframes hk2-ripple{0%,60%,100%{transform:translateY(0)}30%{transform:translateY(-.21em)}}
@keyframes hk2-flip{0%,55%,100%{transform:rotateX(0)}25%{transform:rotateX(180deg)}}
@keyframes hk2-bold{0%,100%{font-weight:300}50%{font-weight:900}}
@keyframes hk2-wide{0%,100%{font-stretch:62%}50%{font-stretch:125%}}
@keyframes hk2-type{0%,8%{opacity:0;transform:translateY(4px)}18%,78%{opacity:1;transform:none}90%,100%{opacity:0}}
@keyframes hk2-caret{50%{opacity:0}}
@keyframes hk2-dot{0%,100%{transform:translateY(0) scale(1)}40%{transform:translateY(-.29em) scale(1)}55%{transform:translateY(0) scale(1.35,.7)}70%{transform:scale(1)}}
@keyframes hk2-spin{to{transform:rotate(360deg)}}
@keyframes hk2-spinr{to{transform:rotate(-360deg)}}
@keyframes hk2-tick{0%{opacity:1}100%{opacity:.15}}
@keyframes hk2-dash{0%{stroke-dasharray:1 150;stroke-dashoffset:0}50%{stroke-dasharray:90 150;stroke-dashoffset:-35}100%{stroke-dasharray:90 150;stroke-dashoffset:-124}}
@keyframes hk2-bar{0%{left:0;width:18%}25%{left:22%;width:52%}50%{left:82%;width:18%}75%{left:22%;width:52%}100%{left:0;width:18%}}
@keyframes hk2-shine{from{transform:translateX(-100%)}to{transform:translateX(250%)}}
@keyframes hk2-sk{0%,100%{opacity:.55}50%{opacity:1}}
@keyframes hk2-stamp{0%,30%{transform:scale(1.6);opacity:0}45%{transform:scale(.94);opacity:1}55%,85%{transform:scale(1);opacity:1}100%{opacity:0}}
/* 14a */
.hk-wm{display:inline-flex;align-items:baseline;font:800 56px/1 Archivo,Inter,sans-serif;letter-spacing:-.04em;color:#1A1A1A}
.hk-wm i,.hk-wm b{display:inline-block;font-style:normal;font-weight:inherit}.hk-wm b{color:#B7282E}
.hk-ripple i,.hk-ripple b,.hk-ink i{animation:hk2-ripple 1.3s cubic-bezier(.45,0,.3,1) infinite}.hk-ripple b{animation-delay:.45s}
.hk-ripple i:nth-child(2),.hk-ink i:nth-child(2){animation-delay:.09s}.hk-ripple i:nth-child(3),.hk-ink i:nth-child(3){animation-delay:.18s}.hk-ripple i:nth-child(4),.hk-ink i:nth-child(4){animation-delay:.27s}.hk-ripple i:nth-child(5),.hk-ink i:nth-child(5){animation-delay:.36s}
.hk-ink{color:#FEFDF5}.hk-ink i:nth-child(even){color:#B7282E}.hk-ink b{color:#FEFDF5}
.hk-bold{font-weight:400}.hk-bold i{animation:hk2-bold 1.6s ease-in-out infinite}.hk-bold i:nth-child(2){animation-delay:.14s}.hk-bold i:nth-child(3){animation-delay:.28s}.hk-bold i:nth-child(4){animation-delay:.42s}.hk-bold i:nth-child(5){animation-delay:.56s}
.hk-wide i{animation:hk2-wide 1.8s ease-in-out infinite}.hk-wide i:nth-child(2){animation-delay:.12s}.hk-wide i:nth-child(3){animation-delay:.24s}.hk-wide i:nth-child(4){animation-delay:.36s}.hk-wide i:nth-child(5){animation-delay:.48s}
.hk-type i,.hk-type b{opacity:0;animation:hk2-type 2.4s ease infinite}.hk-type b{animation-delay:.6s}.hk-type i:nth-child(2){animation-delay:.12s}.hk-type i:nth-child(3){animation-delay:.24s}.hk-type i:nth-child(4){animation-delay:.36s}.hk-type i:nth-child(5){animation-delay:.48s}
.hk-type:after{content:'';width:3px;height:.86em;background:#B7282E;margin-left:.07em;align-self:center;animation:hk2-caret .8s steps(1) infinite}
.hk-bounce b{color:transparent;overflow:hidden;line-height:0;width:.21em;height:.21em;border-radius:50%;background:#B7282E;margin-left:.05em;transform-origin:50% 100%;animation:hk2-dot 1s cubic-bezier(.3,0,.3,1) infinite}
.hk-flip{display:inline-flex;gap:5px;perspective:400px;font:800 30px/1 Archivo,Inter,sans-serif}.hk-flip i,.hk-flip b{width:42px;height:52px;border-radius:8px;background:#1A1A1A;color:#FEFDF5;display:flex;align-items:center;justify-content:center;font-style:normal;animation:hk2-flip 2s cubic-bezier(.6,0,.3,1) infinite}
.hk-flip b{background:#B7282E;color:#FEFDF5;font-size:0}.hk-flip b:before{content:'o';font-size:30px}.hk-flip i:nth-child(5){display:none}
.hk-flip i:nth-child(2){animation-delay:.12s}.hk-flip i:nth-child(3){animation-delay:.24s}.hk-flip i:nth-child(4){animation-delay:.36s}.hk-flip b{animation-delay:.48s}
.hk-stamp{display:inline-flex;align-items:center;justify-content:center;width:84px;height:84px;border-radius:18px;background:#B7282E;color:#FEFDF5;font:800 34px/1 Archivo,Inter,sans-serif;letter-spacing:-.05em;animation:hk2-stamp 1.8s cubic-bezier(.3,0,.2,1) infinite}
/* 14b */
.hk-ring{display:inline-block;flex:none;box-sizing:border-box;border-radius:50%;border:2px solid #F1EEE6;border-top-color:#B7282E;animation:hk2-spin .8s linear infinite;vertical-align:middle}
.hk-ring.s16{width:16px;height:16px}.hk-ring.s24{width:24px;height:24px;border-width:3px}.hk-ring.s44{width:44px;height:44px;border-width:4px}.hk-ring.s14{width:14px;height:14px}
.hk-arc{animation:hk2-spin 1.6s linear infinite}.hk-arc .t{fill:none;stroke:#F1EEE6;stroke-width:4}.hk-arc .a{fill:none;stroke:#B7282E;stroke-width:4;stroke-linecap:round;animation:hk2-dash 1.4s ease-in-out infinite}
.hk-dual{position:relative;display:inline-block;width:56px;height:56px}.hk-dual:before,.hk-dual:after{content:'';position:absolute;border-radius:50%;border:4px solid transparent}
.hk-dual:before{inset:0;border-top-color:#B7282E;border-right-color:#B7282E;animation:hk2-spin 1s cubic-bezier(.5,.1,.5,.9) infinite}.hk-dual:after{inset:12px;border-bottom-color:#FEFDF5;border-left-color:#FEFDF5;animation:hk2-spinr .8s linear infinite}
.hk-ticks{position:relative;display:inline-block;width:44px;height:44px}.hk-ticks i{position:absolute;left:20px;top:0;width:4px;height:12px;border-radius:2px;background:#1A1A1A;transform-origin:2px 22px;animation:hk2-tick 1s linear infinite}
.hk-orbit{position:relative;display:inline-flex;align-items:center;justify-content:center;width:64px;height:64px;font:800 36px/1 Archivo,Inter,sans-serif;letter-spacing:-.05em}.hk-orbit:after{content:'';position:absolute;inset:0;background:radial-gradient(circle at 50% 8px,#B7282E 5px,transparent 5.5px);animation:hk2-spin 1.2s cubic-bezier(.5,0,.5,1) infinite}
.hk-inline{display:inline-flex;align-items:center;gap:10px;font:500 15px Inter,system-ui,sans-serif;color:#1A1A1A}.hk-inline .hk-ring{border-color:rgba(26,26,26,.15);border-top-color:#1A1A1A}
.hk-ticks i:nth-child(1){transform:rotate(0deg);animation-delay:-1.000s}.hk-ticks i:nth-child(2){transform:rotate(30deg);animation-delay:-0.917s}.hk-ticks i:nth-child(3){transform:rotate(60deg);animation-delay:-0.833s}.hk-ticks i:nth-child(4){transform:rotate(90deg);animation-delay:-0.750s}.hk-ticks i:nth-child(5){transform:rotate(120deg);animation-delay:-0.667s}.hk-ticks i:nth-child(6){transform:rotate(150deg);animation-delay:-0.583s}.hk-ticks i:nth-child(7){transform:rotate(180deg);animation-delay:-0.500s}.hk-ticks i:nth-child(8){transform:rotate(210deg);animation-delay:-0.417s}.hk-ticks i:nth-child(9){transform:rotate(240deg);animation-delay:-0.333s}.hk-ticks i:nth-child(10){transform:rotate(270deg);animation-delay:-0.250s}.hk-ticks i:nth-child(11){transform:rotate(300deg);animation-delay:-0.167s}.hk-ticks i:nth-child(12){transform:rotate(330deg);animation-delay:-0.083s}
/* 14c */
.hk-bar{position:relative;width:100%;height:6px;border-radius:6px;background:#F1EEE6;overflow:hidden}.hk-bar:after{content:'';position:absolute;top:0;bottom:0;border-radius:6px;background:#B7282E;animation:hk2-bar 1.8s cubic-bezier(.45,0,.3,1) infinite}
.hk-prog{position:relative;width:100%;height:6px;border-radius:6px;background:#F1EEE6;overflow:hidden}.hk-prog>i{position:relative;display:block;height:100%;width:0;border-radius:6px;background:#1A1A1A;overflow:hidden;transition:width .25s}
.hk-prog>i:after{content:'';position:absolute;inset:0;width:40%;background:linear-gradient(90deg,transparent,rgba(254,253,245,.55),transparent);animation:hk2-shine 1.2s ease-in-out infinite}
.hk-topbar{position:fixed;left:0;right:0;z-index:70;height:3px;overflow:hidden;pointer-events:none}.hk-topbar:after{content:'';position:absolute;top:0;bottom:0;background:#B7282E;animation:hk2-bar 1.8s cubic-bezier(.45,0,.3,1) infinite}
.hk-busy{display:inline-flex!important;align-items:center;gap:10px;cursor:progress}.hk-busy .hk-ring{border-color:rgba(254,253,245,.35);border-top-color:#FEFDF5}
.hk-sk{display:flex;flex-direction:column;gap:12px;padding:6px 0}.hk-sk>div{display:flex;gap:10px;align-items:center}
.hk-sk .av{width:28px;height:28px;border-radius:50%;background:#E4DFD4;flex:none;animation:hk2-sk 1.4s ease-in-out infinite}.hk-sk .ln{flex:1;display:flex;flex-direction:column;gap:6px}
.hk-sk .ln i{display:block;height:10px;border-radius:4px;background:#E4DFD4;animation:hk2-sk 1.4s ease-in-out infinite}.hk-sk .ln i+i{height:8px}
.hk-sk>div:nth-child(1) .ln i{width:70%}.hk-sk>div:nth-child(1) .ln i+i{width:40%}.hk-sk>div:nth-child(2) .ln i{width:55%}.hk-sk>div:nth-child(2) .ln i+i{width:30%}.hk-sk>div:nth-child(3) .ln i{width:80%}.hk-sk>div:nth-child(3) .ln i+i{width:45%}
/* Reduced motion (14): no movement of any kind; a spinner becomes the still "hanko." beside its label; bars keep their fill, drop the swivel and the shine. */
@media(prefers-reduced-motion:reduce){
  .hk-wm i,.hk-wm b,.hk-flip i,.hk-flip b,.hk-stamp,.hk-ring,.hk-arc,.hk-arc .a,.hk-dual:before,.hk-dual:after,.hk-ticks i,.hk-orbit:after,.hk-bar:after,.hk-prog>i:after,.hk-topbar:after,.hk-sk .av,.hk-sk .ln i{animation:none!important}
  .hk-type i,.hk-type b{opacity:1}.hk-type:after,.hk-bar:after,.hk-topbar:after,.hk-prog>i:after,.hk-orbit:after{display:none}
  .hk-ring,.hk-dual,.hk-ticks,.hk-arc{border:0!important;width:auto!important;height:auto!important;background:none}.hk-dual:before,.hk-dual:after,.hk-ticks i,.hk-arc circle{display:none}
  .hk-ring:before,.hk-dual:before,.hk-ticks:before{content:'hanko';display:inline;position:static;border:0;font:800 1em/1 Archivo,Inter,sans-serif;letter-spacing:-.04em;color:#1A1A1A}
  .hk-ring:after,.hk-dual:after,.hk-ticks:after{content:'.';display:inline;position:static;border:0;font:800 1em/1 Archivo,Inter,sans-serif;color:#B7282E}
}