/* Plotline: the website-builder mascot instead of an icon tile. It acts out a build
   (planning, generating, designing, done) and designs when the card is hovered. */
.pc-icon--mascot { width: 68px; height: 68px; background: transparent; box-shadow: none; margin: -8px 0 10px -8px; overflow: visible; }
.pc-icon--mascot .pm { width: 100%; height: 100%; overflow: visible; display: block; }
.pm .part { opacity: 0; transition: opacity .35s ease; }
.pm[data-mood="idle"] .on-idle, .pm[data-mood="planning"] .on-planning, .pm[data-mood="generating"] .on-generating,
.pm[data-mood="designing"] .on-designing, .pm[data-mood="done"] .on-done { opacity: 1; }
.pm .body, .pm .move { transform-box: fill-box; transform-origin: 50% 100%; }
.pm .body { animation: pm-breathe 4.5s ease-in-out infinite; }
.pm[data-mood="planning"] .move { animation: pm-ponder 3.2s ease-in-out infinite; }
.pm[data-mood="generating"] .move { animation: pm-pulse 1.1s ease-in-out infinite; }
.pm[data-mood="done"] .move { animation: pm-hop 1.3s cubic-bezier(.34, 1.4, .64, 1) infinite; }
@keyframes pm-breathe { 0%, 100% { transform: scale(1, 1); } 50% { transform: scale(1.012, .988); } }
@keyframes pm-ponder { 0%, 100% { transform: rotate(-3deg); } 50% { transform: rotate(3deg); } }
@keyframes pm-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.03, 1.02); } }
@keyframes pm-hop {
    0%, 100% { transform: translateY(0) scale(1, 1); } 12% { transform: translateY(0) scale(1.08, .9); }
    40% { transform: translateY(-34px) scale(.96, 1.05); } 68% { transform: translateY(0) scale(1.06, .93); } 82% { transform: translateY(0) scale(1, 1); }
}
.pm .look { transition: transform .45s cubic-bezier(.34, 1.4, .64, 1); }
.pm[data-mood="planning"] .look { transform: translate(12px, -16px); }
.pm[data-mood="designing"] .look { transform: translate(14px, 12px); }
.pm .eye { transform-box: fill-box; transform-origin: 50% 60%; animation: pm-blink 5.5s infinite; }
@keyframes pm-blink { 0%, 93%, 100% { transform: scaleY(1); } 95.5% { transform: scaleY(.12); } }
.pm .star-eye { transform-box: fill-box; transform-origin: center; animation: pm-spin 1.6s ease-in-out infinite; }
@keyframes pm-spin { 0%, 100% { transform: rotate(0deg) scale(1); } 50% { transform: rotate(45deg) scale(.82); } }
.pm .edit { transform-box: view-box; transform-origin: 108px 112px; }
.pm .cursor-arrow { transform-box: fill-box; transform-origin: 0 0; }
.pm[data-mood="designing"] .edit { animation: pm-resize 5s cubic-bezier(.65, 0, .35, 1) infinite; }
.pm[data-mood="designing"] .cursor { animation: pm-drag 5s cubic-bezier(.65, 0, .35, 1) infinite; }
.pm[data-mood="designing"] .cursor-arrow { animation: pm-press 5s ease-in-out infinite; }
@keyframes pm-resize { 0%, 18% { transform: scale(1); } 45%, 62% { transform: scale(1.06); } 88%, 100% { transform: scale(1); } }
@keyframes pm-drag { 0%, 18% { transform: translate(0, 0); } 45%, 62% { transform: translate(21.8px, 21.7px); } 88%, 100% { transform: translate(0, 0); } }
@keyframes pm-press { 0%, 12%, 22%, 60%, 70%, 100% { transform: scale(1); } 16%, 64% { transform: scale(.86); } }
.pm .handle { fill: #FFFFFF; stroke: #6C5CFF; stroke-width: 6; }
.pm .frame { fill: none; stroke: #6C5CFF; stroke-width: 6; }
.pm .spark { transform-box: fill-box; transform-origin: center; animation: pm-twinkle 2.8s ease-in-out infinite; }
.pm .spark.small { animation-delay: -1.4s; animation-duration: 2.2s; }
@keyframes pm-twinkle { 0%, 100% { transform: scale(1) rotate(0deg); opacity: 1; } 50% { transform: scale(.72) rotate(18deg); opacity: .75; } }
.pm .think-dot { animation: pm-bob 1.2s ease-in-out infinite; }
.pm .think-dot:nth-child(5) { animation-delay: .15s; } .pm .think-dot:nth-child(6) { animation-delay: .3s; }
@keyframes pm-bob { 0%, 60%, 100% { transform: translateY(0); opacity: .45; } 30% { transform: translateY(-7px); opacity: 1; } }
.pm .orbit { transform-box: view-box; transform-origin: 290px 296px; animation: pm-orbit 6s linear infinite; }
@keyframes pm-orbit { to { transform: rotate(360deg); } }
.pm .shimmer { animation: pm-shimmer 1.8s ease-in-out infinite; }
@keyframes pm-shimmer { from { transform: skewX(-18deg) translateX(-420px); } to { transform: skewX(-18deg) translateX(420px); } }
.pm .addr-fill { transform-box: fill-box; transform-origin: 0 50%; transform: scaleX(0); }
.pm[data-mood="generating"] .addr-fill { animation: pm-fill 3s cubic-bezier(.3, .6, .4, 1) infinite; }
@keyframes pm-fill { 0% { transform: scaleX(0); } 85%, 100% { transform: scaleX(1); } }
.pm .tb-dot { animation: pm-dot 2.4s ease-in-out infinite; }
@keyframes pm-dot { 0%, 60%, 100% { opacity: .55; } 20% { opacity: 1; } }
.pm .confetti { transform-box: fill-box; transform-origin: center; opacity: 0; }
.pm[data-mood="done"] .confetti { animation: pm-burst 2.6s cubic-bezier(.2, .7, .3, 1) infinite; animation-delay: var(--d, 0s); }
@keyframes pm-burst {
    0% { transform: translate(0, 0) scale(.2) rotate(0deg); opacity: 0; } 8% { opacity: 1; }
    40% { transform: translate(var(--x), var(--y)) scale(1) rotate(var(--r)); opacity: 1; }
    100% { transform: translate(var(--x), calc(var(--y) + 120px)) scale(.9) rotate(calc(var(--r) * 2)); opacity: 0; }
}
.pm .badge-pop { transform-box: fill-box; transform-origin: center; }
.pm[data-mood="done"] .badge-pop { animation: pm-pop .5s cubic-bezier(.34, 1.7, .64, 1) both; }
@keyframes pm-pop { from { transform: scale(0); } to { transform: scale(1); } }
@media (prefers-reduced-motion: reduce) {
    .pm * { animation: none !important; }
    .pm .addr-fill { transform: scaleX(.7); }
}

/* Plotline mascot in the nav menus */
.ndp-icon--mascot, .mob-acc-icon--mascot { background: transparent !important; overflow: visible; }
.ndp-icon--mascot .pm, .mob-acc-icon--mascot .pm { width: 46px; height: 46px; flex: none; overflow: visible; display: block; }
.ndp-item:hover .ndp-icon--mascot { background: transparent !important; }