.mb{display:block;width:100%;height:auto;overflow:visible}
.mb *{transform-box:fill-box;transform-origin:center}
.mb-lid{transform-origin:50% 0}
.mb-pen{stroke-dasharray:100;stroke-dashoffset:100}
.mb-lid{transform:scaleY(0)}
.mb-pupil{opacity:0}/* eyes are an intro flourish only — clean o's at rest */
.mb-guide{opacity:0}
.mb-drop{opacity:0}
/* armed = hidden start (added by JS so no-JS shows the finished logo) */
.mb.is-armed .mb-letter{opacity:0}
.mb.is-armed .mb-eyes{transform:translateY(52px)}
.mb.is-armed .mb-dot{opacity:0;transform:scale(0)}
/* play once — every animated property below is on a VISIBLE element (Safari-safe) */
.mb.is-armed.is-playing .mb-pen{animation:mb-write 380ms cubic-bezier(.6,.04,.3,1) var(--d) forwards, mb-penout 200ms ease var(--fd) forwards}
.mb.is-armed.is-playing .mb-letter{animation:mb-ink 180ms ease-out var(--fd) both}
.mb.is-armed.is-playing .mb-eyes{animation:mb-peek 1000ms cubic-bezier(.22,.9,.3,1) 150ms both}
.mb.is-armed.is-playing .mb-pupil{animation:mb-pupil 4800ms linear forwards}
.mb.is-armed.is-playing .mb-lid{animation:mb-blink 200ms ease-in-out var(--bd) both, mb-blink 240ms ease-in-out 4520ms both}
.mb.is-armed.is-playing .mb-glance{animation:mb-look1 700ms ease-in-out 1350ms,mb-look2 760ms ease-in-out 4110ms}
.mb.is-armed.is-playing .mb-guide{animation:mb-guide 4250ms linear both}
.mb.is-armed.is-playing .mb-dot{animation:mb-splash 520ms cubic-bezier(.34,1.56,.5,1) 4110ms both}
.mb.is-armed.is-playing .mb-drop{animation:mb-drop var(--ddur,640ms) cubic-bezier(.2,.8,.3,1) var(--dd) forwards}
@keyframes mb-write{from{stroke-dashoffset:100}to{stroke-dashoffset:0}}
@keyframes mb-penout{from{opacity:1}to{opacity:0}}
@keyframes mb-ink{from{opacity:0}to{opacity:1}}
@keyframes mb-peek{0%{transform:translateY(52px)}80%{transform:translateY(-3px)}100%{transform:translateY(0)}}
@keyframes mb-pupil{0%{opacity:0}14%{opacity:0}19%{opacity:1}94%{opacity:1}97%{opacity:0}100%{opacity:0}}
@keyframes mb-blink{0%{transform:scaleY(0)}50%{transform:scaleY(1)}100%{transform:scaleY(0)}}
@keyframes mb-look1{0%{transform:none}30%{transform:translate(-2.4px,-.5px)}70%{transform:translate(-2.4px,-.5px)}100%{transform:none}}
@keyframes mb-look2{0%{transform:none}30%{transform:translate(3px,2.4px)}70%{transform:translate(3px,2.4px)}100%{transform:none}}
@keyframes mb-guide{0%{opacity:0}3%{opacity:.16}85%{opacity:.16}100%{opacity:0}}
@keyframes mb-splash{0%{opacity:0;transform:scale(0)}40%{opacity:1;transform:scale(1.5,1.18)}66%{transform:scale(.9,1.06)}83%{transform:scale(1.04,.98)}100%{opacity:1;transform:none}}
@keyframes mb-drop{0%{opacity:1;transform:translate(0,0) scale(.2)}50%{opacity:1;transform:translate(calc(var(--dx)*.6),calc(var(--dy)*.6)) scale(1)}100%{opacity:0;transform:translate(var(--dx),var(--dy)) scale(.15)}}
@media (prefers-reduced-motion: reduce){
 .mb *{animation:none!important}
 .mb-pen{opacity:0!important}
 .mb.is-armed .mb-letter{opacity:1!important}
 .mb.is-armed .mb-eyes{transform:none!important}
 .mb.is-armed .mb-dot{opacity:1!important;transform:none!important}
 .mb-pupil,.mb-guide,.mb-drop{opacity:0!important}
}

/* host element + footer placement (Freedom) */
mindboost-logo{display:block}
mindboost-logo.footer-logo{width:220px;max-width:62%;margin:0 auto;color:#fff}