/* The Chase mascot: the Reactor (ADR-0030). Sized by the element; states in data-state. */
.mascot { position: relative; width: var(--mascot-size, 96px); height: var(--mascot-size, 96px); }
.mascot svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
/* fill-box only where it is animated: elsewhere it breaks the rotate(a cx cy) attributes of the ticks */
.mascot .char, .mascot .fx-open, .mascot .fx-wave .b, .mascot .fx-load circle, .mascot .halo, .mascot .tick,
.mascot .badge, .mascot .o-sleep text, .mascot .o-listen path, .mascot .o-speak path { transform-box: fill-box; }
.mascot .seg, .mascot .seg2, .mascot .orbit-dots, .mascot .o-work .ring, .mascot .o-update .ring {
  transform-box: view-box; transform-origin: 60px 60px;
}
.mascot .ch { transition: filter .4s; }
.mascot .char { transform-origin: 50% 100%; }
.mascot .ov > g { display: none; }

/* the face */
.mascot .fx-open { transform-origin: center; transition: transform .3s; }
.mascot .fx-shut, .mascot .fx-x, .mascot .fx-load, .mascot .fx-wave { display: none; }
.mascot[data-state="sleep"] .fx-open, .mascot[data-state="update"] .fx-open, .mascot[data-state="down"] .fx-open,
.mascot[data-state="speak"] .fx-open { display: none; }
.mascot[data-state="sleep"] .fx-shut, .mascot[data-state="update"] .fx-load, .mascot[data-state="down"] .fx-x,
.mascot[data-state="speak"] .fx-wave { display: inline; }
.mascot[data-state="listen"] .fx-open { transform: scale(1.14); }
.mascot[data-state="think"] .fx-open { transform: translate(-2.5px, -2px) scaleY(.7); }
.mascot[data-state="work"] .fx-open, .mascot[data-state="ask"] .fx-open { animation: cm-blink 4.5s infinite; }
.mascot .fx-wave .b { transform-origin: center; animation: cm-eq .42s ease-in-out infinite alternate; }
.mascot .fx-wave .b:nth-child(2n) { animation-delay: -.2s; }
.mascot .fx-wave .b:nth-child(3n) { animation-delay: -.33s; }
.mascot .fx-load circle { animation: cm-dots 1s infinite; }
.mascot .fx-load circle:nth-child(2) { animation-delay: .17s; }
.mascot .fx-load circle:nth-child(3) { animation-delay: .34s; }

/* the body */
.mascot[data-state="sleep"] .ch { filter: brightness(.7) saturate(.7); }
.mascot[data-state="down"] .ch { filter: grayscale(1) brightness(.65); }
.mascot[data-state="down"] .char { animation: cm-glitch 3.2s steps(1) infinite; }
.mascot[data-state="ask"] .char { animation: cm-hop 2.6s ease-in-out infinite; }

/* the reactor: rings turn, faster while thinking or working; the ticks are an equalizer in a conversation */
.mascot .seg { animation: cm-spin 14s linear infinite; }
.mascot .seg2 { animation: cm-spin 9s linear infinite reverse; }
.mascot[data-state="think"] .seg, .mascot[data-state="work"] .seg { animation-duration: 3s; }
.mascot[data-state="think"] .seg2, .mascot[data-state="work"] .seg2 { animation-duration: 2s; }
.mascot .tick { transform-origin: 50% 100%; }
.mascot[data-state="listen"] .tick, .mascot[data-state="speak"] .tick { animation: cm-eq .38s ease-in-out infinite alternate; }
.mascot .halo { transform-origin: center; transition: opacity .4s; }
.mascot[data-state="listen"] .halo, .mascot[data-state="speak"] .halo { animation: cm-glow 1s ease-in-out infinite alternate; }
.mascot[data-state="sleep"] .halo, .mascot[data-state="sleep"] .ticks { opacity: .25; }

/* overlays */
.mascot[data-state="sleep"] .o-sleep, .mascot[data-state="listen"] .o-listen, .mascot[data-state="speak"] .o-speak,
.mascot[data-state="think"] .o-think, .mascot[data-state="work"] .o-work, .mascot[data-state="ask"] .o-ask,
.mascot[data-state="update"] .o-update, .mascot[data-state="down"] .o-down { display: inline; }
.mascot .o-listen path { animation: cm-inward 1.4s ease-in infinite; }
.mascot .o-speak path { animation: cm-outward 1.4s ease-out infinite; }
.mascot .o-listen path:nth-child(2), .mascot .o-speak path:nth-child(2) { animation-delay: .45s; }
.mascot .o-listen path:nth-child(3), .mascot .o-speak path:nth-child(3) { animation-delay: .9s; }
.mascot .orbit-dots { animation: cm-spin 1.6s linear infinite; }
.mascot .o-work .ring { animation: cm-spin 2.4s linear infinite; }
.mascot .o-ask .badge { transform-origin: center; animation: cm-nudge 2.6s ease-in-out infinite; }
.mascot .o-update .ring { animation: cm-spin 1.2s linear infinite; }
.mascot .o-update .scan { animation: cm-scan 1.6s ease-in-out infinite; }

/* asleep or down nothing moves: no work for the GPU while nothing happens */
.mascot[data-state="sleep"] *, .mascot[data-state="down"] .seg, .mascot[data-state="down"] .seg2 {
  animation-play-state: paused;
}
.mascot[data-state="sleep"] .o-sleep text { animation: none; opacity: .8; }

@keyframes cm-blink { 0%, 94%, 100% { transform: scaleY(1); } 96.5% { transform: scaleY(.12); } }
@keyframes cm-eq { from { transform: scaleY(.35); } to { transform: scaleY(1.15); } }
@keyframes cm-dots { 0%, 60%, 100% { opacity: .3; } 30% { opacity: 1; } }
@keyframes cm-glow { from { opacity: .65; } to { opacity: 1; transform: scale(1.06); } }
@keyframes cm-spin { to { transform: rotate(360deg); } }
@keyframes cm-hop { 0%, 70%, 100% { transform: translateY(0); } 78% { transform: translateY(-7px); } 86% { transform: translateY(0); } 92% { transform: translateY(-3px); } }
@keyframes cm-nudge { 0%, 70%, 100% { transform: scale(1); } 80% { transform: scale(1.18); } }
@keyframes cm-glitch { 0%, 88%, 100% { transform: none; } 90% { transform: translate(-3px, 1px) skewX(6deg); } 92% { transform: translate(3px, -1px); } 94% { transform: translate(-1px, 0) skewX(-4deg); } }
@keyframes cm-scan { 0% { transform: translateY(0); opacity: 0; } 15%, 85% { opacity: .9; } 100% { transform: translateY(96px); opacity: 0; } }
@keyframes cm-inward { 0% { opacity: 0; transform: translateX(-8px); } 40% { opacity: 1; } 100% { opacity: 0; transform: translateX(4px); } }
@keyframes cm-outward { 0% { opacity: 0; transform: translateX(-4px); } 40% { opacity: 1; } 100% { opacity: 0; transform: translateX(8px); } }
@media (prefers-reduced-motion: reduce) {
  .mascot * { animation: none !important; }
}