/* Load after brand.css. Motion layers belong only to the main hero mascot. */
#mascot-button[data-mascot-play="ready"] .mascot-image{animation:none;transform:none;transition:none}
.mascot-play-surface{position:relative;display:block;flex:0 0 100%;width:100%;line-height:0;pointer-events:none;transform-origin:50% 90%;--mascot-look-x:0px;--mascot-look-y:0px;animation:mascot-play-breathe 7.2s ease-in-out infinite;will-change:transform}
.mascot-play-surface>.mascot-image{display:block;width:100%;height:auto}
.mascot-play-eye{position:absolute;display:block;pointer-events:none;max-width:none;clip-path:ellipse(50% 50% at 50% 50%);mask-image:radial-gradient(ellipse at center,#000 91%,transparent 100%);-webkit-mask-image:radial-gradient(ellipse at center,#000 91%,transparent 100%)}
.mascot-play-still .mascot-play-surface,.motion-paused .mascot-play-surface{animation:none;transform:none;will-change:auto}
@keyframes mascot-play-breathe{0%,100%{transform:translate3d(var(--mascot-look-x),var(--mascot-look-y),0) scaleY(1)}50%{transform:translate3d(var(--mascot-look-x),calc(var(--mascot-look-y) - .5px),0) scaleY(1.0025)}}
.mascot-play-eye[hidden]{display:none!important}
.mascot-play-still .mascot-play-eye,.motion-paused .mascot-play-eye{visibility:hidden}
@media(prefers-reduced-motion:reduce){.mascot-play-surface{animation:none!important;transform:none!important;will-change:auto}.mascot-play-eye{display:none!important}}