/* Shared mascot and celebration styles. */
:root { --mm-spring: cubic-bezier(.34, 1.56, .64, 1); }

/* Pip: the green apple mascot (markup in includes/mascot.php) */
.mm-mascot { position: relative; display: inline-block; width: 120px; line-height: 0; flex-shrink: 0; }
.mm-svg { display: block; width: 100%; height: auto; overflow: visible; transform-origin: 50% 100%; animation: mmBounce 1.5s ease-in-out infinite; }
.mm-mini .mm-svg, .mm-chef .mm-svg { animation: none; }

/* idle life */
.mm-leaf { transform-box: view-box; transform-origin: 84px 24px; animation: mmLeaf 2.6s ease-in-out infinite; }
.mm-eyes { transform-box: fill-box; transform-origin: 50% 50%; animation: mmBlink 4.2s infinite; }
.mm-arm { transform-box: fill-box; }
.mm-arm-l { transform-origin: 100% 100%; animation: mmArmL 1.5s ease-in-out infinite; }
.mm-arm-r { transform-origin: 0% 100%; animation: mmArmR 1.5s ease-in-out infinite; }
.mm-wave .mm-arm-r { animation: mmWave 2.6s ease-in-out infinite; }
.mm-think .mm-face { animation: mmLook 3.2s ease-in-out infinite; }
.mm-think .mm-arm-r { animation: mmWave 3.4s ease-in-out infinite; }

/* moods: parts that only show for one mood start hidden */
.mm-eyes-happy, .mm-grin, .mm-o, .mm-brows { opacity: 0; transition: opacity .14s ease; }
.mm-eyes, .mm-smile { transition: opacity .14s ease; }
.mm-mascot.is-done .mm-eyes, .mm-say-happy .mm-eyes, .ob-bar.is-cheer .mm-eyes,
.mm-mascot.is-done .mm-smile, .mm-say-happy .mm-smile, .ob-bar.is-cheer .mm-smile { opacity: 0; }
.mm-mascot.is-done .mm-eyes-happy, .mm-say-happy .mm-eyes-happy, .ob-bar.is-cheer .mm-eyes-happy,
.mm-mascot.is-done .mm-grin, .mm-say-happy .mm-grin, .ob-bar.is-cheer .mm-grin { opacity: 1; }
.mm-mascot.is-oops .mm-smile, .ob-bar.is-error .mm-smile { opacity: 0; }
.mm-mascot.is-oops .mm-o, .ob-bar.is-error .mm-o,
.mm-mascot.is-oops .mm-brows, .ob-bar.is-error .mm-brows { opacity: 1; }

/* amazed */
.mm-brows-up { opacity: 0; transition: opacity .14s ease; }
.mm-mascot.is-wow .mm-brows-up { opacity: 1; animation: mmBrowPop .9s ease-in-out infinite alternate; }
.mm-mascot.is-wow .mm-smile { opacity: 0; }
.mm-mascot.is-wow .mm-o { opacity: 1; transform-box: fill-box; transform-origin: center; animation: mmGasp .9s ease-in-out infinite alternate; }
.mm-mascot.is-wow .mm-eyes ellipse { transform-box: fill-box; transform-origin: center; transform: scale(1.12, 1.18); }
.mm-mascot.is-wow.is-done .mm-o, .mm-mascot.is-wow.is-done .mm-brows-up { opacity: 0; }
@keyframes mmBrowPop { from { transform: translateY(0); } to { transform: translateY(-3px); } }
@keyframes mmGasp { from { transform: scale(1); } to { transform: scale(1.25, 1.15); } }

/* talking: the smile and the "o" trade places a few times a second */
.mm-mascot.is-talk .mm-smile { animation: mmTalkA .3s steps(1) infinite; }
.mm-mascot.is-talk .mm-o { animation: mmTalkB .3s steps(1) infinite; }

/* victory: jump, arms up (loaders call this at 100%) */
.mm-loader-pip.is-done .mm-svg { animation: mmJump .8s var(--mm-spring, cubic-bezier(.34, 1.56, .64, 1)), mmBounce 1.5s .8s ease-in-out infinite; }
.mm-mascot.is-done .mm-arm-l { animation: mmCheerL .34s ease-in-out infinite alternate; }
.mm-mascot.is-done .mm-arm-r { animation: mmCheerR .34s ease-in-out infinite alternate; }
.mm-chef.is-done .mm-hat { animation: mmHatPop .6s var(--mm-spring, cubic-bezier(.34, 1.56, .64, 1)); }

/* chef pose: the bowl stays put, Pip bobs behind it and stirs */
.mm-chef .mm-body, .mm-chef .mm-face { animation: mmBob 1.5s ease-in-out infinite; }
.mm-chef .mm-hat { transform-box: view-box; transform-origin: 80px 28px; animation: mmHatBob 1.5s ease-in-out infinite; }
.mm-chef .mm-stir { transform-box: view-box; transform-origin: 136px 112px; animation: mmStir .9s ease-in-out infinite alternate; }
.mm-chef .mm-steam path { animation: mmSteam 1.9s ease-in infinite; }
.mm-chef .mm-steam .mm-steam-2 { animation-delay: .95s; }

@keyframes mmBounce {
    0%, 100% { transform: translateY(0) scale(1, 1); }
    12% { transform: translateY(0) scale(1.05, .95); }
    42% { transform: translateY(-10px) scale(.97, 1.03); }
    70% { transform: translateY(0) scale(1.02, .98); }
}
@keyframes mmBob { 0%, 100% { transform: translateY(0); } 45% { transform: translateY(-4px); } }
@keyframes mmLeaf { 0%, 100% { transform: rotate(-5deg); } 50% { transform: rotate(9deg); } }
@keyframes mmBlink { 0%, 92%, 100% { transform: scaleY(1); } 95% { transform: scaleY(.08); } }
@keyframes mmArmL { 0%, 100% { transform: rotate(0); } 45% { transform: rotate(-9deg); } }
@keyframes mmArmR { 0%, 100% { transform: rotate(0); } 45% { transform: rotate(9deg); } }
@keyframes mmWave {
    0%, 44%, 100% { transform: rotate(0); }
    6%, 22% { transform: rotate(-26deg); }
    14%, 30% { transform: rotate(10deg); }
}
@keyframes mmLook { 0%, 20%, 100% { transform: translate(0, 0); } 35%, 75% { transform: translate(4px, -4px); } }
@keyframes mmTalkA { 0% { opacity: 1; } 50% { opacity: 0; } }
@keyframes mmTalkB { 0% { opacity: 0; } 50% { opacity: 1; } }
@keyframes mmJump {
    0% { transform: translateY(0) scale(1.08, .9); }
    35% { transform: translateY(-38px) scale(.94, 1.07) rotate(-5deg); }
    60% { transform: translateY(0) scale(1.08, .92) rotate(0); }
    80% { transform: translateY(-6px) scale(.99, 1.01); }
    100% { transform: translateY(0) scale(1, 1); }
}
@keyframes mmCheerL { from { transform: rotate(-8deg); } to { transform: rotate(-34deg); } }
@keyframes mmCheerR { from { transform: rotate(8deg); } to { transform: rotate(34deg); } }
@keyframes mmHatBob { 0%, 100% { transform: translateY(0) rotate(-3deg); } 45% { transform: translateY(-5px) rotate(4deg); } }
@keyframes mmHatPop { 0% { transform: translateY(0); } 40% { transform: translateY(-16px) rotate(-10deg); } 100% { transform: translateY(0); } }
@keyframes mmStir { from { transform: rotate(-9deg); } to { transform: rotate(11deg); } }
@keyframes mmSteam {
    0% { opacity: 0; transform: translateY(8px); }
    40% { opacity: .9; }
    100% { opacity: 0; transform: translateY(-16px); }
}
@keyframes mmPopIn {
    0% { opacity: 0; transform: scale(.4) translateY(20px); }
    60% { opacity: 1; transform: scale(1.08) translateY(-4px); }
    100% { opacity: 1; transform: none; }
}
@keyframes mmBubbleIn {
    0% { opacity: 0; transform: scale(.6) translateX(-12px); }
    70% { opacity: 1; transform: scale(1.04); }
    100% { opacity: 1; transform: none; }
}

/* ---------- Speech bubble ---------- */
.mm-say {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: 8px;
    width: 100%;
    max-width: 440px;
    margin: 2px auto 18px;
    text-align: left;
}
.mm-say .mm-mascot { width: 84px; animation: mmPopIn .55s var(--ob-ease-spring, cubic-bezier(.34, 1.56, .64, 1)) backwards; }
.mm-say-bubble {
    position: relative;
    flex: 0 1 auto;
    min-width: 0;
    margin: 0 0 30px 10px;
    padding: 12px 16px;
    border: 2px solid var(--ob-line, #e2e8e4);
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 3px 0 var(--ob-line, #e2e8e4);
    color: var(--ob-ink, #1b2a24);
    font-size: 15px;
    font-weight: 600;
    line-height: 1.4;
    text-wrap: pretty;
    animation: mmBubbleIn .45s var(--ob-ease-spring, cubic-bezier(.34, 1.56, .64, 1)) .18s backwards;
    transform-origin: 0 100%;
}
/* the tail pointing at Pip */
.mm-say-bubble::before {
    content: '';
    position: absolute;
    left: -9px;
    bottom: 14px;
    width: 14px;
    height: 14px;
    background: #fff;
    border-left: 2px solid var(--ob-line, #e2e8e4);
    border-bottom: 2px solid var(--ob-line, #e2e8e4);
    border-bottom-left-radius: 4px;
    transform: rotate(45deg);
}
.mm-say-compact .mm-mascot { width: 66px; }
.mm-say-compact .mm-say-bubble { font-size: 14px; padding: 10px 14px; margin-bottom: 22px; }
#wizard-section .ob-screen .mm-say + .text-center,
#wizard-section .ob-screen > .mm-say:first-child { margin-top: 0; }
@media (min-width: 640px) {
    .mm-say .mm-mascot { width: 96px; }
    .mm-say-compact .mm-mascot { width: 72px; }
    .mm-say-bubble { font-size: 16px; }
}

.mm-hero { display: flex; justify-content: center; margin: 0 auto 8px; }
.mm-hero .mm-mascot { width: 92px; animation: mmPopIn .55s var(--ob-ease-spring, cubic-bezier(.34, 1.56, .64, 1)) backwards; }

/* ---------- Loader stage ---------- */
.mm-stage { position: relative; width: 230px; height: 212px; margin: 0 auto 10px; }
.mm-stage .mm-loader-pip {
    position: absolute;
    left: 50%;
    bottom: 14px;
    width: 146px;
    margin-left: -73px;
    animation: mmPopIn .6s var(--ob-ease-spring, cubic-bezier(.34, 1.56, .64, 1)) backwards;
}
.mm-stage-chef { height: 236px; }
.mm-stage-chef .mm-loader-pip { bottom: 8px; }
.mm-stage-sm { transform: scale(.86); transform-origin: 50% 100%; margin-top: -24px; margin-bottom: 0; }
.mm-shadow {
    position: absolute;
    left: 50%;
    bottom: 6px;
    width: 100px;
    height: 14px;
    margin-left: -50px;
    border-radius: 50%;
    background: rgba(27, 60, 40, .13);
    animation: mmShadow 1.5s ease-in-out infinite;
}
.mm-stage-chef .mm-shadow { width: 128px; margin-left: -64px; bottom: 2px; animation: none; }
@keyframes mmShadow { 0%, 100% { transform: scaleX(1); opacity: 1; } 42% { transform: scaleX(.72); opacity: .55; } }

/* thought bubble */
.mm-thought { position: absolute; top: 0; right: 0; width: 86px; height: 92px; z-index: 2; }
.mm-thought-cloud {
    position: absolute;
    top: 0;
    right: 0;
    display: grid;
    place-items: center;
    width: 66px;
    height: 58px;
    border: 2px solid var(--ob-line, #e2e8e4);
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 3px 0 var(--ob-line, #e2e8e4);
    animation: mmFloat 2.4s ease-in-out infinite, mmPopIn .5s var(--ob-ease-spring, cubic-bezier(.34, 1.56, .64, 1)) .25s backwards;
}
.mm-thought-dot { position: absolute; border: 2px solid var(--ob-line, #e2e8e4); border-radius: 50%; background: #fff; animation: mmPopIn .4s ease .1s backwards; }
.mm-thought-dot-1 { width: 14px; height: 14px; right: 54px; top: 58px; }
.mm-thought-dot-2 { width: 9px; height: 9px; right: 68px; top: 76px; }
.mm-thought-icon { display: inline-block; font-size: 28px; line-height: 1; }
.mm-thought-icon.ob-pop { animation: mmIconPop .42s var(--ob-ease-spring, cubic-bezier(.34, 1.56, .64, 1)); }
@keyframes mmIconPop { 0% { transform: scale(.3) rotate(-20deg); opacity: 0; } 100% { transform: none; opacity: 1; } }
@keyframes mmFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }

/* twinkles */
.mm-spark { position: absolute; color: #ffc800; font-size: 18px; line-height: 1; animation: mmTwinkle 1.8s ease-in-out infinite; }
.mm-spark-1 { left: 18px; top: 46px; }
.mm-spark-2 { left: 44px; top: 10px; font-size: 13px; animation-delay: .6s; color: #1cb0f6; }
.mm-spark-3 { right: 10px; bottom: 60px; font-size: 14px; animation-delay: 1.2s; color: #ff4b4b; }
@keyframes mmTwinkle { 0%, 100% { opacity: 0; transform: scale(.4) rotate(0); } 50% { opacity: 1; transform: scale(1) rotate(90deg); } }

/* ingredients dropping into the bowl */
.mm-drop {
    position: absolute;
    left: 50%;
    top: 0;
    z-index: 3;
    font-size: 24px;
    line-height: 1;
    opacity: 0;
    animation: mmDrop 2.2s cubic-bezier(.5, 0, .75, .5) infinite;
}
.mm-drop svg { display: block; filter: drop-shadow(0 2px 0 rgba(0, 0, 0, .08)); }
.mm-drop-1 { --x0: -92px; --x1: -48px; }
.mm-drop-2 { --x0: 90px; --x1: 46px; animation-delay: .55s; }
.mm-drop-3 { --x0: -82px; --x1: -30px; animation-delay: 1.1s; }
.mm-drop-4 { --x0: 84px; --x1: 30px; animation-delay: 1.65s; }
@keyframes mmDrop {
    0% { opacity: 0; transform: translate(calc(-50% + var(--x0)), 0) rotate(0) scale(.8); }
    12% { opacity: 1; }
    58% { opacity: 1; transform: translate(calc(-50% + var(--x1)), 150px) rotate(200deg) scale(1); }
    68% { opacity: 0; transform: translate(calc(-50% + var(--x1)), 164px) rotate(240deg) scale(.4); }
    100% { opacity: 0; transform: translate(calc(-50% + var(--x1)), 164px) scale(.4); }
}

/* bubbles popping out of chef Pip's pot */
.mm-pop {
    position: absolute;
    left: 50%;
    bottom: 56px;
    z-index: 3;
    width: 11px;
    height: 11px;
    margin-left: -5px;
    border: 2px solid #ff9f43;
    border-radius: 50%;
    background: #ffc27a;
    opacity: 0;
    animation: mmPotPop 1.5s ease-out infinite;
}
.mm-pop-1 { --x: -34px; }
.mm-pop-2 { --x: 6px; animation-delay: .5s; width: 8px; height: 8px; }
.mm-pop-3 { --x: 36px; animation-delay: 1s; }
@keyframes mmPotPop {
    0% { opacity: 0; transform: translate(var(--x), 0) scale(.4); }
    20% { opacity: 1; }
    70% { opacity: .9; transform: translate(var(--x), -26px) scale(1); }
    100% { opacity: 0; transform: translate(var(--x), -34px) scale(1.35); }
}

/* ---------- Loader text, bar, chips ---------- */
.mm-kicker { display: inline-block; margin-bottom: 6px; color: #05603f; font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
#wizard-section .ob-screen h2.mm-loader-title,
.mm-loader-title {
    margin: 0 0 6px;
    color: #1b2a24;
    font-size: clamp(1.35rem, 1rem + 1.4vw, 1.75rem);
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: -.02em;
    text-wrap: balance;
}
.mm-loader-line { min-height: 22px; margin: 0 auto; color: #7a8983; font-size: 15px; transition: opacity .14s ease, transform .14s ease; }
.mm-loader-line.is-swap { opacity: 0; transform: translateY(5px); }
.mm-progress { display: flex; align-items: center; gap: 12px; width: 100%; max-width: 340px; margin: 20px auto 0; }
.mm-track { position: relative; flex: 1; height: 16px; border-radius: 999px; background: #e6ece8; overflow: hidden; }
.mm-fill { position: relative; height: 100%; width: 0; min-width: 16px; border-radius: 999px; background: #12b886; }
.mm-fill-shine { position: absolute; top: 4px; left: 7px; right: 7px; height: 4px; border-radius: 999px; background: rgba(255, 255, 255, .4); }
.mm-pct { min-width: 44px; color: #05603f; font-size: 15px; font-weight: 700; text-align: right; font-variant-numeric: tabular-nums; }
.mm-checks { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 18px auto 0; padding: 0; list-style: none; }
.mm-checks li {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px 5px 5px;
    border: 2px solid #e2e8e4;
    border-radius: 999px;
    background: #fff;
    box-shadow: 0 2px 0 #e2e8e4;
    color: #a3afa9;
    font-size: 13px;
    font-weight: 700;
    transition: color .2s ease, border-color .2s ease, background-color .2s ease, box-shadow .2s ease;
}
.mm-checks li::before {
    content: '';
    display: grid;
    place-items: center;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #e6ece8;
    color: #fff;
    font-size: 11px;
    font-weight: 800;
    transition: background-color .2s ease;
}
.mm-checks li.is-active { color: #1b2a24; border-color: #d3dbd6; }
.mm-checks li.is-active::before { background: #cdeee0; animation: mmPulse .8s ease-in-out infinite; }
.mm-checks li.is-done { color: #05603f; border-color: #3fcf9b; background: #eafaf3; box-shadow: 0 2px 0 #19b37f; }
.mm-checks li.is-done::before { content: '✓'; background: #12b886; animation: mmIconPop .4s cubic-bezier(.34, 1.56, .64, 1); }
@keyframes mmPulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(.8); } }

/* Confetti burst (app.obBurst / the pricing page). */
.ob-confetti { position: absolute; top: 50%; width: 0; height: 0; pointer-events: none; z-index: 3; }
.ob-confetti i {
    position: absolute;
    left: 0;
    top: 0;
    width: 7px;
    height: 10px;
    border-radius: 2px;
    background: var(--c);
    animation: obConfetti .9s cubic-bezier(.15, .7, .3, 1) forwards;
}
@keyframes obConfetti {
    0% { opacity: 1; transform: translate(0, 0) rotate(0deg) scale(1); }
    100% { opacity: 0; transform: translate(var(--dx), var(--dy)) rotate(var(--r)) scale(.6); }
}


@media (prefers-reduced-motion: reduce) {
    .mm-mascot *, .mm-stage *, .mm-stage *::before, .mm-say *, .mm-say, .mm-checks li::before, .ob-confetti {
        animation: none !important;
        transition: none !important;
    }
    .ob-confetti { display: none; }
}