/* Dot is present without narrating: a soft idle, a different little gesture on each tap. */
.brand-stage .dot-body{animation:none;translate:0 0;rotate:0deg;scale:1;transform-origin:50% 80%}
.brand-stage.is-cast-visible .dot-body{animation:dot-idle-breath 8.6s ease-in-out infinite}
.brand-stage .dot-face{scale:var(--face-scale-x,1) 1;transform-origin:50% 50%;transition:translate var(--look-duration,1.05s) cubic-bezier(.22,.8,.25,1),rotate calc(var(--look-duration,1.05s) + .12s) cubic-bezier(.22,.8,.25,1),scale var(--look-duration,1.05s) cubic-bezier(.22,.8,.25,1)}
.brand-stage .cast-dot{--dot-smile-x:.68;--dot-smile-y:.55;--dot-smile-turn:0deg;--dot-open-x:.36;--dot-open-y:.5;--dot-eye-height:13%;--dot-eye-top:40%}
.brand-stage .dot-eyes i{animation:none;scale:1;height:var(--dot-eye-height);top:var(--dot-eye-top);border-radius:999px;transition:height .5s var(--ease),top .5s var(--ease),border-radius .5s var(--ease)}
.brand-stage.is-cast-visible .dot-eyes i{animation:dot-quiet-blink 6.4s infinite}
.brand-stage.is-cast-visible .dot-eyes i+i{animation-delay:.045s}
.brand-stage .dot-mouth{transform:scaleY(1);transform-origin:50% 48%;transition:transform .23s cubic-bezier(.2,.75,.25,1)}
.brand-stage .is-mouth-changing .dot-mouth{transform:scaleY(.18);transition-duration:.12s}
.brand-stage:not(.is-cast-visible) .dot-mouth{transform:none;transition:none}
.brand-stage .mouth-smile,.brand-stage .mouth-open{animation:none;opacity:1;transition:scale .5s cubic-bezier(.22,.8,.25,1),rotate .5s cubic-bezier(.22,.8,.25,1);transform-origin:25px 12px}
.brand-stage .mouth-smile{visibility:visible;scale:var(--dot-smile-x) var(--dot-smile-y);rotate:var(--dot-smile-turn);vector-effect:non-scaling-stroke;stroke-width:clamp(2.7px,.25vw,3.6px)}
.brand-stage .mouth-open{visibility:hidden;scale:var(--dot-open-x) var(--dot-open-y)}
.brand-stage .cast-dot[data-dot-mouth="open"] .mouth-smile{visibility:hidden}
.brand-stage .cast-dot[data-dot-mouth="open"] .mouth-open{visibility:visible}
.brand-stage .dot-remark{rotate:2deg;transition:opacity .2s,translate .4s var(--ease),scale .4s var(--ease)}
/* Idle expressions never override a click reaction. Only one mouth is visible. */
.brand-stage .cast-dot[data-dot-mood="content"]:not([data-dot-reaction]){--dot-smile-x:.62;--dot-smile-y:.4;--dot-eye-height:12.2%;--dot-eye-top:40.4%}
.brand-stage .cast-dot[data-dot-mood="curious"]:not([data-dot-reaction]){--dot-open-x:.48;--dot-open-y:.64;--dot-eye-height:13.25%;--dot-eye-top:39.9%}
.brand-stage .cast-dot[data-dot-mood="thoughtful"]:not([data-dot-reaction]){--dot-smile-x:.46;--dot-smile-y:.16;--dot-smile-turn:-4deg;--dot-eye-height:12.5%;--dot-eye-top:40.25%}
.brand-stage .cast-dot[data-dot-reaction="surprise"]{--dot-open-x:.58;--dot-open-y:.76;--dot-eye-height:13.4%;--dot-eye-top:39.8%}
.brand-stage .cast-dot[data-dot-reaction="wink"]{--dot-smile-x:.76;--dot-smile-y:.59;--dot-smile-turn:-4deg}
.brand-stage .cast-dot[data-dot-reaction="curious"]{--dot-open-x:.39;--dot-open-y:.49;--dot-eye-height:12.7%;--dot-eye-top:40.15%}
.brand-stage .cast-dot[data-dot-reaction="delight"]{--dot-open-x:.82;--dot-open-y:.5;--dot-eye-height:11.7%;--dot-eye-top:40.65%}
.brand-stage .is-dot-winking .dot-eyes i:last-child{animation:none;scale:1}
.brand-stage .is-dot-speaking .mouth-open{animation:dot-soft-word .88s ease-in-out both}
.brand-stage .dot-eyes{transition:scale .35s var(--ease)}
.brand-stage .brand-cast:after{scale:var(--shadow-scale,1);opacity:.84;transform-origin:50% 50%}
.brand-stage.is-cast-visible .brand-cast:after{animation:dot-shadow-breathe 8.6s ease-in-out infinite}
.brand-stage.is-cast-visible.dot-reaction-wink .brand-cast:after{animation:dot-shadow-breathe 8.6s ease-in-out infinite,dot-shadow-hop var(--dot-reaction-duration) linear both}
.brand-stage.is-cast-visible.dot-reaction-surprise .brand-cast:after{animation:dot-shadow-breathe 8.6s ease-in-out infinite,dot-shadow-surprise var(--dot-reaction-duration) linear both}
.brand-stage.is-cast-visible.dot-reaction-delight .brand-cast:after{animation:dot-shadow-breathe 8.6s ease-in-out infinite,dot-shadow-delight var(--dot-reaction-duration) linear both}
@keyframes dot-idle-breath{
  0%,100%{translate:0 0;rotate:-.8deg;scale:1}
  50%{translate:0 -4px;rotate:.8deg;scale:1.006 1.008}
}
@keyframes dot-quiet-blink{0%,44%,48%,100%{scale:1 1}46%{scale:1 .09}}
@keyframes dot-soft-word{
  0%,100%{scale:.36 .24}
  27%{scale:.56 .49}
  47%{scale:.44 .3}
  65%{scale:.58 .46}
}
@keyframes dot-shadow-breathe{
  0%,100%{scale:var(--shadow-scale,1)}
  50%{scale:calc(var(--shadow-scale,1) * .97)}
}
/* The offsets and easing match the body's anticipation, lift and landing. */
@keyframes dot-shadow-hop{
  0%{transform:scale(1);opacity:.84;animation-timing-function:cubic-bezier(.22,.8,.25,1)}
  16%{transform:scale(1.035);opacity:.86;animation-timing-function:cubic-bezier(.18,.72,.32,1)}
  47%{transform:scale(var(--dot-shadow-peak,.8));opacity:var(--dot-shadow-opacity,.64);animation-timing-function:cubic-bezier(.55,0,.8,.45)}
  70%{transform:scale(1.03);opacity:.86;animation-timing-function:cubic-bezier(.22,.8,.25,1)}
  85%{transform:scale(.985);opacity:.82;animation-timing-function:cubic-bezier(.22,.8,.25,1)}
  100%{transform:scale(1);opacity:.84}
}
@keyframes dot-shadow-surprise{
  0%{transform:scale(1);opacity:.84;animation-timing-function:cubic-bezier(.22,.8,.25,1)}
  12%{transform:scale(1.02);opacity:.85;animation-timing-function:cubic-bezier(.18,.72,.32,1)}
  38%{transform:scale(.95);opacity:.79;animation-timing-function:cubic-bezier(.55,0,.8,.45)}
  69%{transform:scale(1.015);opacity:.85;animation-timing-function:cubic-bezier(.22,.8,.25,1)}
  100%{transform:scale(1);opacity:.84}
}
@keyframes dot-shadow-delight{
  0%{transform:scale(1);opacity:.84;animation-timing-function:cubic-bezier(.22,.8,.25,1)}
  18%{transform:scale(1.025);opacity:.85;animation-timing-function:cubic-bezier(.18,.72,.32,1)}
  44%{transform:scale(.94);opacity:.77;animation-timing-function:cubic-bezier(.55,0,.8,.45)}
  70%{transform:scale(1.02);opacity:.85;animation-timing-function:cubic-bezier(.22,.8,.25,1)}
  100%{transform:scale(1);opacity:.84}
}
@media(max-width:760px){.brand-stage .dot-remark{rotate:3deg}}
@media(prefers-reduced-motion:reduce){
 .brand-stage .dot-body,.brand-stage .dot-eyes i,.brand-stage .mouth-smile,.brand-stage .mouth-open,.brand-stage .brand-cast:after{animation:none!important}
 .brand-stage .dot-body{translate:0 0;rotate:0deg;scale:1}
 .brand-stage .dot-face{translate:0 0;rotate:0deg;scale:1}
 .brand-stage .dot-mouth{transform:none!important}
 .brand-stage .dot-face,.brand-stage .dot-mouth,.brand-stage .dot-eyes,.brand-stage .dot-eyes i,.brand-stage .mouth-smile,.brand-stage .mouth-open,.brand-stage .dot-remark{transition:none}
 .brand-stage .is-dot-winking .dot-eyes i:last-child{scale:1 .12}
}