/* Edi mascot (templates/_edi_mascot.html). Moods are set on the svg as data-mood. */
.edm {
    --edm-hair-top: #C77CFF;
    --edm-hair-mid: #8E8CFF;
    --edm-hair-bottom: #5BBDFF;
    --edm-face: #FFFFFF;
    --edm-ink: #111111;
    display: block;
    overflow: visible;
    user-select: none;
}
.edm .edm-hair-top { stop-color: var(--edm-hair-top); }
.edm .edm-hair-mid { stop-color: var(--edm-hair-mid); }
.edm .edm-hair-bottom { stop-color: var(--edm-hair-bottom); }
.edm .edm-face { fill: var(--edm-face); }
.edm .edm-ink { fill: none; stroke: var(--edm-ink); stroke-width: 22; stroke-linecap: round; stroke-linejoin: round; }

/* parts and their pivots (user units of the 736 x 704 drawing) */
.edm .edm-body { transform-origin: 360px 420px; animation: edm-breathe 3.2s ease-in-out infinite; }
.edm .edm-head { transform-origin: 360px 420px; transition: transform .35s ease; }
.edm .edm-eyes { transform-origin: 385px 374px; transition: transform .2s ease-out; }
.edm .edm-blink { transform-origin: 385px 374px; animation: edm-blink 4.5s infinite; }
.edm .edm-eyeL { transform-origin: 354px 376px; transition: transform .25s; }
.edm .edm-eyeR { transform-origin: 440px 374px; transition: transform .25s; }
.edm .edm-eyeR-happy { opacity: 0; }
.edm .edm-mouth { opacity: 0; transform-origin: 395px 440px; }
.edm .edm-bubble { opacity: 0; transition: opacity .3s; fill: #fff; stroke: var(--edm-ink); stroke-width: 10; }
.edm .edm-dots circle { fill: var(--edm-ink); stroke: none; }
.edm .edm-confetti { opacity: 0; transition: opacity .2s; }

@keyframes edm-breathe { 0%, 100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-7px) rotate(-1.2deg); } }
@keyframes edm-blink { 0%, 93%, 100% { transform: scaleY(1); } 96% { transform: scaleY(.12); } }

/* talking: head nods, mouth flaps */
.edm[data-mood="talking"] .edm-head { animation: edm-nod .5s ease-in-out infinite; }
.edm[data-mood="talking"] .edm-mouth { opacity: 1; animation: edm-flap .22s ease-in-out infinite alternate; }
@keyframes edm-nod { 0%, 100% { transform: rotate(0) translateY(0); } 50% { transform: rotate(1.4deg) translateY(2px); } }
@keyframes edm-flap { from { transform: scaleY(.25); } to { transform: scaleY(1); } }

/* pointing: leans toward the thing it is showing */
.edm[data-mood="pointing"] .edm-head { animation: edm-lean 1.1s ease-in-out infinite; }
.edm[data-mood="pointing"] .edm-eyes { transform: translate(14px, 0) !important; }
@keyframes edm-lean { 0%, 100% { transform: rotate(-7deg) translateX(-10px); } 50% { transform: rotate(-9deg) translateX(-22px); } }

/* thinking: tilt and a thought bubble */
.edm[data-mood="thinking"] .edm-head { transform: rotate(7deg) translate(6px, 4px); }
.edm[data-mood="thinking"] .edm-bubble { opacity: 1; }
.edm[data-mood="thinking"] .edm-dots circle { animation: edm-dots 1.2s infinite; }
.edm[data-mood="thinking"] .edm-dots circle:nth-child(2) { animation-delay: .2s; }
.edm[data-mood="thinking"] .edm-dots circle:nth-child(3) { animation-delay: .4s; }
@keyframes edm-dots { 0%, 80%, 100% { transform: translateY(0); opacity: .4; } 40% { transform: translateY(-10px); opacity: 1; } }

/* happy: bounce, ^ ^ eyes, confetti */
.edm[data-mood="happy"] .edm-body { animation: edm-bounce .55s cubic-bezier(.3, 1.6, .4, 1) infinite; }
.edm[data-mood="happy"] .edm-eyeR-line { opacity: 0; }
.edm[data-mood="happy"] .edm-eyeR-happy { opacity: 1; }
.edm[data-mood="happy"] .edm-mouth { opacity: 1; }
.edm[data-mood="happy"] .edm-confetti { opacity: 1; }
.edm[data-mood="happy"] .edm-confetti > * { animation: edm-fall 1.4s ease-in infinite; }
.edm[data-mood="happy"] .edm-confetti > :nth-child(2n) { animation-duration: 1.7s; animation-delay: .3s; }
.edm[data-mood="happy"] .edm-confetti > :nth-child(3n) { animation-duration: 1.2s; animation-delay: .6s; }
@keyframes edm-bounce { 0%, 100% { transform: translateY(0) scale(1); } 50% { transform: translateY(-26px) scale(1.04, .96); } }
@keyframes edm-fall { 0% { transform: translateY(-60px) rotate(0); opacity: 0; } 15% { opacity: 1; } 100% { transform: translateY(240px) rotate(260deg); opacity: 0; } }

/* surprised: pop, bigger eyes, small o mouth */
.edm[data-mood="surprised"] .edm-head { animation: edm-pop .4s cubic-bezier(.2, 1.8, .4, 1) both; }
.edm[data-mood="surprised"] .edm-eyeL { transform: scale(1.25) translateY(-6px); }
.edm[data-mood="surprised"] .edm-eyeR { transform: scaleX(1.6) translateY(-6px); }
.edm[data-mood="surprised"] .edm-mouth { opacity: 1; transform: scale(.6, 1.3); }
@keyframes edm-pop { 0% { transform: scale(1); } 50% { transform: scale(1.08) translateY(-10px); } 100% { transform: scale(1) translateY(-4px); } }

/* waving: head wiggles hello */
.edm[data-mood="waving"] .edm-head { animation: edm-wiggle .45s ease-in-out infinite alternate; }
.edm[data-mood="waving"] .edm-mouth { opacity: 1; }
@keyframes edm-wiggle { from { transform: rotate(-8deg) translateY(-4px); } to { transform: rotate(8deg) translateY(0); } }

@media (prefers-reduced-motion: reduce) {
    .edm *, .edm { animation: none !important; transition: none !important; }
}

/* in the nav menus */
.ndp-icon--mascot .edm, .mob-acc-icon--mascot .edm { width: 40px; height: 40px; flex: none; }

/* Illustrated menu icons (the Vocalis shield) sit on a soft tile instead of the teal icon box */
.ndp-icon--art, .mob-acc-icon--art { background: #eef3ff !important; overflow: hidden; }
.ndp-icon--art .vcs, .mob-acc-icon--art .vcs { width: 34px; height: 34px; display: block; flex: none; }
.mob-acc-icon--art .vcs { width: 30px; height: 30px; }
.ndp-item:hover .ndp-icon--art { background: #e0e9ff !important; }
/* the menu hover rule paints icon strokes white; keep illustrated icons as drawn */
.ndp-item:hover .ndp-icon--art svg, .ndp-item:hover .ndp-icon--mascot svg { stroke: none; }