/* Migo v2, the AHA! lightbulb mascot (from the app). */
/* Migo v2, the AHA! lightbulb: the stroke of the "!" is the glass, the dot is the spark. Parts change with data-mood. */
.migo { overflow: visible; }
.migo .m-tilt { transform: rotate(-8deg); transform-origin: 32px 34px; }
.migo .m-glass { fill: var(--yellow); stroke: var(--ink); stroke-width: 2.4; stroke-linejoin: round; }
.migo .m-shine { fill: none; stroke: #fff; stroke-width: 2.2; stroke-linecap: round; opacity: .75; }
.migo .m-fil { fill: none; stroke: var(--yellow-deep); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.migo .m-cap { fill: #D9CFB6; stroke: var(--ink); stroke-width: 2.2; }
.migo .m-cap-line { stroke: var(--ink); stroke-width: 1.4; stroke-linecap: round; }
.migo .m-dot { fill: #FFD84D; stroke: var(--ink); stroke-width: 2.2; }
.migo .m-dot-hi { fill: #FFFBE8; stroke: none; }
.migo .m-glow { fill: var(--yellow); stroke: none; opacity: .3; }
.migo .m-ray { stroke: var(--yellow-deep); stroke-width: 2.4; stroke-linecap: round; }
.migo .m-eye { fill: var(--ink); stroke: none; }
.migo .m-shine-dot { fill: #fff; stroke: none; }
.migo .m-line { fill: none; stroke: var(--ink); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.migo .m-arm { stroke-width: 2.8; }
.migo .m-hand { fill: var(--yellow); stroke: var(--ink); stroke-width: 1.8; }
.migo .m-cheek { fill: #F28B6E; stroke: none; opacity: .55; }
.migo .m-mouth { fill: var(--red-deep); stroke: var(--ink); stroke-width: 1.8; stroke-linejoin: round; }
.migo .m-q { fill: none; stroke: var(--blue); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.migo .m-spark { fill: var(--blue); stroke: none; }
.migo .alt-mood { display: none; }
.mascot:not([data-mood="happy"]) .migo .mood-happy { display: none; }
.mascot[data-mood="focus"] .migo .mood-focus,
.mascot[data-mood="think"] .migo .mood-think,
.mascot[data-mood="cheer"] .migo .mood-cheer { display: inline; }
/* the spark: on when happy, steady when focused, off while thinking, bursting when cheering */
.mascot[data-mood="focus"] .migo .m-ray { opacity: 0; }
.mascot[data-mood="focus"] .migo .m-glow { opacity: .16; }
.mascot[data-mood="think"] .migo .m-dot { fill: #EFE8D4; }
.mascot[data-mood="think"] .migo .m-dot-hi, .mascot[data-mood="think"] .migo .m-glow, .mascot[data-mood="think"] .migo .m-ray { opacity: 0; }
.mascot[data-mood="think"] .migo .m-glass { fill: #FBD36A; }
.mascot[data-mood="cheer"] .migo .m-glow { opacity: .5; }
.mascot[data-mood="cheer"] .migo .m-ray { stroke-width: 3; }