/**
 * Stip, de mascotte: zweven, knipperen, meekijken en een reactie bij een tik; alles stil bij "minder beweging".
 *
 * @author Ferhat Remory
 * @link   https://steirk.be
 */

.ms{display:inline-block;width:var(--ms,96px);flex-shrink:0;line-height:0;cursor:pointer;-webkit-tap-highlight-color:transparent;user-select:none}
.ms[hidden]{display:none!important}
.ms svg{display:block;width:100%;height:auto;overflow:visible}
.ms-float{animation:ms-float 3.2s ease-in-out infinite}
@keyframes ms-float{50%{transform:translateY(-5px)}}
.ms-eye{transform-box:fill-box;transform-origin:center;transition:transform .07s,opacity .15s}
.ms-blink .ms-eye{transform:scaleY(.08)}
.ms-pupil{transition:transform .08s linear}
.ms-lids{opacity:0;transition:opacity .15s}
.ms-shut .ms-eye{opacity:0}
.ms-shut .ms-lids{opacity:1}

/* Springen, voor Stip, het klembord en het feestje. */
.ms-jump{transform-box:fill-box;transform-origin:50% 100%}
.ms-go .ms-jump{animation:ms-jump .8s cubic-bezier(.3,1.6,.5,1)}
@keyframes ms-jump{0%{transform:scale(1.12,.86)}35%{transform:translateY(-30px) scale(.92,1.1)}70%{transform:translateY(0) scale(1.1,.9)}100%{transform:none}}

/* Klembord: vinkjes één voor één, het kruisje wordt een vinkje. */
.ms-tick{stroke-dasharray:16;stroke-dashoffset:0}
.ms-go .ms-tick{animation:ms-draw .35s ease-out backwards}
.ms-go .ms-t2{animation-delay:.3s}
.ms-go .ms-t3{animation-delay:.6s}
@keyframes ms-draw{from{stroke-dashoffset:16}}
.ms-cross{transition:opacity .2s .5s}
.ms-fix{opacity:0;transition:opacity .2s .6s}
.ms-go .ms-cross{opacity:0}
.ms-go .ms-fix{opacity:1}
.ms-wave{transform-box:fill-box;transform-origin:100% 100%}
.ms-go .ms-wave{animation:ms-wave .5s ease-in-out 2}
@keyframes ms-wave{50%{transform:rotate(22deg)}}

/* Loep: wiegt zachtjes, zoekt bij een tik, en blijft zoeken zolang er geladen wordt. */
.ms-lens{animation:ms-bob 2.6s ease-in-out infinite}
@keyframes ms-bob{50%{transform:translate(-2px,3px)}}
.ms-go .ms-lens,.ms-busy .ms-lens{animation:ms-sweep 1.4s ease-in-out}
.ms-busy .ms-lens{animation-iteration-count:infinite}
@keyframes ms-sweep{30%,60%{transform:translate(-27px,-2px)}100%{transform:none}}

/* Blij: armen omhoog, het vinkje ploft open en de bolletjes vliegen weg. */
.ms-arm-l{transform-box:fill-box;transform-origin:100% 100%;animation:ms-arm-l 1.2s ease-in-out infinite}
.ms-arm-r{transform-box:fill-box;transform-origin:0 100%;animation:ms-arm-r 1.2s ease-in-out infinite}
@keyframes ms-arm-l{50%{transform:rotate(-14deg)}}
@keyframes ms-arm-r{50%{transform:rotate(14deg)}}
.ms-badge{transform-box:fill-box;transform-origin:center}
.ms-go .ms-badge{animation:ms-pop .6s cubic-bezier(.3,1.8,.5,1)}
@keyframes ms-pop{0%{transform:scale(.3)}60%{transform:scale(1.35)}100%{transform:none}}
.ms-conf{opacity:0}
.ms-go .ms-conf{animation:ms-conf .9s ease-out}
@keyframes ms-conf{0%{opacity:1;transform:none}100%{opacity:0;transform:translate(var(--x),var(--y))}}

/* Controleur: knikt, trekt de wenkbrauwen op, de badge zwaait en het potlood tikt. */
.ms-nod{transform-box:view-box;transform-origin:100px 150px}
.ms-go .ms-nod{animation:ms-nod .9s ease-in-out}
@keyframes ms-nod{25%{transform:rotate(-6deg)}55%{transform:rotate(4deg)}80%{transform:rotate(-1deg)}100%{transform:none}}
.ms-brow{transition:transform .2s}
.ms-go .ms-brow{transform:translateY(-5px)}
.ms-tag{transform-box:view-box;transform-origin:100px 124px;animation:ms-sway 3.2s ease-in-out infinite}
@keyframes ms-sway{25%{transform:rotate(3deg)}75%{transform:rotate(-3deg)}}
.ms-go .ms-tag{animation:ms-swing .9s ease-out}
@keyframes ms-swing{20%{transform:rotate(14deg)}45%{transform:rotate(-10deg)}70%{transform:rotate(5deg)}100%{transform:none}}
.ms-pen{transform-box:view-box;transform-origin:150px 106px;animation:ms-write 1.8s ease-in-out infinite}
@keyframes ms-write{25%{transform:rotate(-7deg)}75%{transform:rotate(5deg)}}
.ms-go .ms-pen{animation:ms-tap .18s ease-in-out 5}
@keyframes ms-tap{50%{transform:rotate(-14deg) translateY(3px)}}

/* Verschijnen, bv. op de startpagina als de proefcontrole helemaal in orde is. */
.ms-in{animation:ms-in .5s cubic-bezier(.3,1.6,.5,1)}
@keyframes ms-in{from{opacity:0;transform:translateY(16px) scale(.7)}}

/* Plaatsing op de schermen. */
.empty .ms{margin:-14px 0 0 -18px}
.head-ms{display:flex;align-items:flex-end;gap:18px}
.head-ms .ms{margin-bottom:6px}
.err .ms{margin:0 0 -16px}
.auth-card .ms{float:right;margin:-8px -6px 0 12px}
.ai-wait{display:flex;align-items:center;gap:12px}
.ai-wait .ms{margin:-6px 0}
.done-ms{display:flex;justify-content:center;margin:-4px 0 6px}
@media(max-width:700px){
  .head-ms{flex-direction:column;align-items:flex-start;gap:0}
  .head-ms .ms{--ms:120px!important;margin:-10px 0 -6px -14px}
  .auth-card .ms{--ms:84px!important}
  .empty .ms{--ms:110px!important}
}

@media (prefers-reduced-motion:reduce){
  .ms *,.ms{animation:none!important;transition:none!important}
}
.result-top{display:flex;align-items:flex-end;gap:14px}
.result-top .ms{margin-bottom:10px}
@media(max-width:700px){.result-top .ms{--ms:110px!important}}
.contact-ms{display:flex;align-items:center;gap:14px;margin-bottom:14px}
.contact-ms p{font-family:var(--serif);font-size:20px;line-height:1.3;color:var(--ink-2)}
.try .result{position:relative}
.try .result .try-ms{position:absolute;right:-4px;top:92px}
@media(max-width:700px){.try .result .try-ms{--ms:96px!important}}
/* Op een donkere achtergrond worden armen, voeten en de steel van de loep licht. */
.ms-dark .ms-out{stroke:#F3F3F1}
.ms-dark ellipse.ms-out{fill:#F3F3F1;stroke:none}