/* =====================================================
   public/css/mo-orb.css
   Date created: 2026-03-07
   Last edited:  2026-03-07
   Summary: Mo's visual identity — pure CSS animated orb.
            State-driven via CSS classes. One component,
            all sizes, all moods. GPU-composited animations.
            Drop anywhere: tray, lab, splash, onboarding.
            iOS-safe: no var() in animation shorthand,
            no calc(var()) in keyframes, no inset shorthand.
   ===================================================== */

/* =======================================================
   CSS CUSTOM PROPERTIES — colors & static values only
   (animation timing set explicitly per element/state)
   ======================================================= */
.mo-orb {
    --mo-color-primary: #00d4ff;
    --mo-color-secondary: #6366f1;
    --mo-color-glow: rgba(0, 212, 255, 0.25);
    --mo-color-core: radial-gradient(circle, #ffffff 0%, #00d4ff 40%, #0066cc 100%);

    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
}

/* =======================================================
   SIZE VARIANTS 
   ======================================================= */
.mo-orb.mo-xs  { width: 24px;  height: 24px;  }
.mo-orb.mo-sm  { width: 40px;  height: 40px;  }
.mo-orb.mo-md  { width: 80px;  height: 80px;  }
.mo-orb.mo-lg  { width: 160px; height: 160px; }
.mo-orb.mo-xl  { width: 240px; height: 240px; }
.mo-orb.mo-xxl { width: 320px; height: 320px; }

/* =======================================================
   AMBIENT GLOW — the "aura" behind Mo
   ======================================================= */
.mo-glow {
    position: absolute;
    top: -30%; right: -30%; bottom: -30%; left: -30%;
    border-radius: 50%;
    background: radial-gradient(circle, var(--mo-color-glow) 0%, transparent 70%);
    opacity: 0.4;
    -webkit-animation: moGlowPulse 4s ease-in-out infinite;
    animation: moGlowPulse 4s ease-in-out infinite;
    pointer-events: none;
}

@-webkit-keyframes moGlowPulse {
    0%, 100% { -webkit-transform: scale(1); opacity: 0.4; }
    50%      { -webkit-transform: scale(1.15); opacity: 0.55; }
}
@keyframes moGlowPulse {
    0%, 100% { transform: scale(1); opacity: 0.4; }
    50%      { transform: scale(1.15); opacity: 0.55; }
}

/* =======================================================
   RINGS — concentric orbits around the core
   ======================================================= */
.mo-ring {
    position: absolute;
    border-radius: 50%;
    border: 1px solid var(--mo-color-primary);
    opacity: 0.3;
    pointer-events: none;
    -webkit-transition: opacity 0.6s ease, border-color 0.6s ease;
    transition: opacity 0.6s ease, border-color 0.6s ease;
}

.mo-ring-1 {
    top: 5%; right: 5%; bottom: 5%; left: 5%;
    border-width: 1.5px;
    -webkit-animation: moRingSpin1 12s linear infinite;
    animation: moRingSpin1 12s linear infinite;
}
.mo-ring-2 {
    top: -8%; right: -8%; bottom: -8%; left: -8%;
    border-style: dashed;
    border-width: 1px;
    opacity: 0.18;
    -webkit-animation: moRingSpin2 19.2s linear infinite reverse;
    animation: moRingSpin2 19.2s linear infinite reverse;
}
.mo-ring-3 {
    top: -18%; right: -18%; bottom: -18%; left: -18%;
    border-style: dotted;
    border-width: 1px;
    opacity: 0.09;
    -webkit-animation: moRingSpin3 26.4s linear infinite;
    animation: moRingSpin3 26.4s linear infinite;
}

@-webkit-keyframes moRingSpin1 {
    from { -webkit-transform: rotate(0deg); }
    to   { -webkit-transform: rotate(360deg); }
}
@keyframes moRingSpin1 {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

@-webkit-keyframes moRingSpin2 {
    from { -webkit-transform: rotate(0deg) scale(1); }
    50%  { -webkit-transform: rotate(180deg) scale(1.03); }
    to   { -webkit-transform: rotate(360deg) scale(1); }
}
@keyframes moRingSpin2 {
    from { transform: rotate(0deg) scale(1); }
    50%  { transform: rotate(180deg) scale(1.03); }
    to   { transform: rotate(360deg) scale(1); }
}

@-webkit-keyframes moRingSpin3 {
    from { -webkit-transform: rotate(0deg); }
    to   { -webkit-transform: rotate(360deg); }
}
@keyframes moRingSpin3 {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

/* =======================================================
   CORE — Mo's heart
   ======================================================= */
.mo-core {
    position: absolute;
    width: 40%;
    height: 40%;
    border-radius: 50%;
    background: var(--mo-color-core);
    box-shadow:
        0 0 20px rgba(0, 212, 255, 0.4),
        0 0 60px rgba(0, 212, 255, 0.15),
        inset 0 0 20px rgba(255, 255, 255, 0.15);
    -webkit-animation: moCorePulse 4s ease-in-out infinite;
    animation: moCorePulse 4s ease-in-out infinite;
    z-index: 2;
    -webkit-transition: background 0.6s ease, box-shadow 0.6s ease, width 0.6s ease, height 0.6s ease;
    transition: background 0.6s ease, box-shadow 0.6s ease, width 0.6s ease, height 0.6s ease;
}

.mo-core-inner {
    position: absolute;
    top: 20%; right: 20%; bottom: 20%; left: 20%;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255,255,255,0.9) 0%, rgba(255,255,255,0.1) 70%);
    -webkit-animation: moCoreInnerPulse 4s ease-in-out infinite;
    animation: moCoreInnerPulse 4s ease-in-out infinite;
    -webkit-animation-delay: -0.5s;
    animation-delay: -0.5s;
}

@-webkit-keyframes moCorePulse {
    0%, 100% { -webkit-transform: scale(1); }
    50%      { -webkit-transform: scale(1.06); }
}
@keyframes moCorePulse {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.06); }
}

@-webkit-keyframes moCoreInnerPulse {
    0%, 100% { opacity: 0.7; -webkit-transform: scale(1); }
    50%      { opacity: 1;   -webkit-transform: scale(1.08); }
}
@keyframes moCoreInnerPulse {
    0%, 100% { opacity: 0.7; transform: scale(1); }
    50%      { opacity: 1;   transform: scale(1.08); }
}

/* =======================================================
   PARTICLES — orbiting dots
   ======================================================= */
.mo-particles {
    position: absolute;
    top: -10%; right: -10%; bottom: -10%; left: -10%;
    -webkit-animation: moParticleField 8s linear infinite;
    animation: moParticleField 8s linear infinite;
    opacity: 0;
    -webkit-transition: opacity 0.6s ease;
    transition: opacity 0.6s ease;
    pointer-events: none;
    z-index: 3;
}

.mo-particles span {
    position: absolute;
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: var(--mo-color-primary);
    box-shadow: 0 0 6px var(--mo-color-primary);
}

/* Position 8 particles around the orbit */
.mo-particles span:nth-child(1) { top: 10%; left: 50%; -webkit-animation: moParticleFloat 3s ease-in-out infinite;   animation: moParticleFloat 3s ease-in-out infinite; }
.mo-particles span:nth-child(2) { top: 25%; left: 88%; -webkit-animation: moParticleFloat 3.4s ease-in-out infinite 0.3s; animation: moParticleFloat 3.4s ease-in-out infinite 0.3s; }
.mo-particles span:nth-child(3) { top: 60%; left: 95%; -webkit-animation: moParticleFloat 2.8s ease-in-out infinite 0.6s; animation: moParticleFloat 2.8s ease-in-out infinite 0.6s; }
.mo-particles span:nth-child(4) { top: 88%; left: 65%; -webkit-animation: moParticleFloat 3.2s ease-in-out infinite 0.9s; animation: moParticleFloat 3.2s ease-in-out infinite 0.9s; }
.mo-particles span:nth-child(5) { top: 90%; left: 30%; -webkit-animation: moParticleFloat 3.6s ease-in-out infinite 1.2s; animation: moParticleFloat 3.6s ease-in-out infinite 1.2s; }
.mo-particles span:nth-child(6) { top: 60%; left: 5%;  -webkit-animation: moParticleFloat 2.9s ease-in-out infinite 1.5s; animation: moParticleFloat 2.9s ease-in-out infinite 1.5s; }
.mo-particles span:nth-child(7) { top: 25%; left: 8%;  -webkit-animation: moParticleFloat 3.1s ease-in-out infinite 1.8s; animation: moParticleFloat 3.1s ease-in-out infinite 1.8s; }
.mo-particles span:nth-child(8) { top: 5%;  left: 35%; -webkit-animation: moParticleFloat 3.3s ease-in-out infinite 2.1s; animation: moParticleFloat 3.3s ease-in-out infinite 2.1s; }

@-webkit-keyframes moParticleField {
    from { -webkit-transform: rotate(0deg); }
    to   { -webkit-transform: rotate(360deg); }
}
@keyframes moParticleField {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

@-webkit-keyframes moParticleFloat {
    0%, 100% { opacity: 0.4; -webkit-transform: scale(1) translateY(0); }
    50%      { opacity: 1;   -webkit-transform: scale(1.5) translateY(-3px); }
}
@keyframes moParticleFloat {
    0%, 100% { opacity: 0.4; transform: scale(1) translateY(0); }
    50%      { opacity: 1;   transform: scale(1.5) translateY(-3px); }
}

/* =======================================================
   REFLECTION — floor reflection for larger sizes
   ======================================================= */
.mo-reflection {
    position: absolute;
    bottom: -35%;
    left: 10%;
    right: 10%;
    height: 40%;
    background: radial-gradient(ellipse at center, var(--mo-color-glow) 0%, transparent 70%);
    opacity: 0.15;
    -webkit-filter: blur(8px);
    filter: blur(8px);
    pointer-events: none;
    -webkit-transition: opacity 0.6s ease;
    transition: opacity 0.6s ease;
}

/* Hide reflection on small sizes */
.mo-xs .mo-reflection,
.mo-sm .mo-reflection { display: none; }


/* ===========================================================
   STATE: IDLE — calm, breathing, alive
   Slow everything down, particles hidden
   NOTE: All states use full animation shorthand (not just
   animation-duration) because iOS Safari ignores longhand
   duration overrides when the base uses animation shorthand.
   =========================================================== */
.mo-idle .mo-glow {
    opacity: 0.3;
    -webkit-animation: moGlowPulse 5s ease-in-out infinite;
    animation: moGlowPulse 5s ease-in-out infinite;
}
.mo-idle .mo-ring { opacity: 0.2; }
.mo-idle .mo-ring-1 { -webkit-animation: moRingSpin1 20s linear infinite; animation: moRingSpin1 20s linear infinite; }
.mo-idle .mo-ring-2 { -webkit-animation: moRingSpin2 32s linear infinite reverse; animation: moRingSpin2 32s linear infinite reverse; opacity: 0.12; }
.mo-idle .mo-ring-3 { -webkit-animation: moRingSpin3 44s linear infinite; animation: moRingSpin3 44s linear infinite; opacity: 0.06; }
.mo-idle .mo-core { -webkit-animation: moCorePulse 5s ease-in-out infinite; animation: moCorePulse 5s ease-in-out infinite; }
.mo-idle .mo-core-inner { -webkit-animation: moCoreInnerPulse 5s ease-in-out -0.5s infinite; animation: moCoreInnerPulse 5s ease-in-out -0.5s infinite; }
.mo-idle .mo-particles { opacity: 0; -webkit-animation: moParticleField 8s linear infinite; animation: moParticleField 8s linear infinite; }

/* ===========================================================
   STATE: LISTENING — user is typing
   =========================================================== */
.mo-listening .mo-glow {
    opacity: 0.45;
    -webkit-animation: moGlowPulse 3s ease-in-out infinite;
    animation: moGlowPulse 3s ease-in-out infinite;
}
.mo-listening .mo-ring { opacity: 0.4; }
.mo-listening .mo-ring-1 {
    top: 8%; right: 8%; bottom: 8%; left: 8%;
    -webkit-animation: moRingSpin1 14s linear infinite;
    animation: moRingSpin1 14s linear infinite;
}
.mo-listening .mo-ring-2 {
    top: -4%; right: -4%; bottom: -4%; left: -4%;
    -webkit-animation: moRingSpin2 22.4s linear infinite reverse;
    animation: moRingSpin2 22.4s linear infinite reverse; opacity: 0.24;
}
.mo-listening .mo-ring-3 { -webkit-animation: moRingSpin3 30.8s linear infinite; animation: moRingSpin3 30.8s linear infinite; opacity: 0.12; }
.mo-listening .mo-core {
    width: 38%; height: 38%;
    -webkit-animation: moCorePulse 3s ease-in-out infinite;
    animation: moCorePulse 3s ease-in-out infinite;
}
.mo-listening .mo-core-inner { -webkit-animation: moCoreInnerPulse 3s ease-in-out -0.5s infinite; animation: moCoreInnerPulse 3s ease-in-out -0.5s infinite; }
.mo-listening .mo-particles { opacity: 0.3; -webkit-animation: moParticleField 6s linear infinite; animation: moParticleField 6s linear infinite; }

/* ===========================================================
   STATE: THINKING — waiting for AI response
   =========================================================== */
.mo-thinking .mo-glow {
    opacity: 0.5;
    -webkit-animation: moGlowPulse 1.8s ease-in-out infinite;
    animation: moGlowPulse 1.8s ease-in-out infinite;
}
.mo-thinking .mo-ring { opacity: 0.55; border-color: #818cf8; }
.mo-thinking .mo-ring-1 { -webkit-animation: moRingSpin1 4s linear infinite; animation: moRingSpin1 4s linear infinite; }
.mo-thinking .mo-ring-2 { -webkit-animation: moRingSpin2 6.4s linear infinite reverse; animation: moRingSpin2 6.4s linear infinite reverse; opacity: 0.33; }
.mo-thinking .mo-ring-3 { -webkit-animation: moRingSpin3 8.8s linear infinite; animation: moRingSpin3 8.8s linear infinite; opacity: 0.16; }
.mo-thinking .mo-core {
    background: radial-gradient(circle, #ffffff 0%, #818cf8 40%, #4f46e5 100%);
    box-shadow:
        0 0 25px rgba(99, 102, 241, 0.5),
        0 0 70px rgba(99, 102, 241, 0.2),
        inset 0 0 20px rgba(255, 255, 255, 0.2);
    -webkit-animation: moCorePulse 1.8s ease-in-out infinite;
    animation: moCorePulse 1.8s ease-in-out infinite;
}
.mo-thinking .mo-core-inner { -webkit-animation: moCoreInnerPulse 1.8s ease-in-out -0.5s infinite; animation: moCoreInnerPulse 1.8s ease-in-out -0.5s infinite; }
.mo-thinking .mo-particles {
    opacity: 0.7;
    -webkit-animation: moParticleField 3s linear infinite;
    animation: moParticleField 3s linear infinite;
}
.mo-thinking .mo-particles span {
    background: #a5b4fc;
    box-shadow: 0 0 8px #818cf8;
}

/* ===========================================================
   STATE: SPEAKING — Mo's reply streaming in
   =========================================================== */
.mo-speaking .mo-glow {
    opacity: 0.5;
    -webkit-animation: moGlowPulse 0.8s ease-in-out infinite;
    animation: moGlowPulse 0.8s ease-in-out infinite;
}
.mo-speaking .mo-ring { opacity: 0.35; }
.mo-speaking .mo-ring-1 { -webkit-animation: moRingSpin1 10s linear infinite; animation: moRingSpin1 10s linear infinite; }
.mo-speaking .mo-ring-2 { -webkit-animation: moRingSpin2 16s linear infinite reverse; animation: moRingSpin2 16s linear infinite reverse; opacity: 0.21; }
.mo-speaking .mo-ring-3 { -webkit-animation: moRingSpin3 22s linear infinite; animation: moRingSpin3 22s linear infinite; opacity: 0.1; }
.mo-speaking .mo-core {
    -webkit-animation: moSpeakPulse 0.8s ease-in-out infinite;
    animation: moSpeakPulse 0.8s ease-in-out infinite;
}
.mo-speaking .mo-core-inner {
    -webkit-animation: moSpeakInner 0.8s ease-in-out infinite;
    animation: moSpeakInner 0.8s ease-in-out infinite;
}
.mo-speaking .mo-particles { opacity: 0.4; -webkit-animation: moParticleField 6s linear infinite; animation: moParticleField 6s linear infinite; }

@-webkit-keyframes moSpeakPulse {
    0%, 100% { -webkit-transform: scale(1); }
    30%      { -webkit-transform: scale(1.12); }
    60%      { -webkit-transform: scale(0.96); }
}
@keyframes moSpeakPulse {
    0%, 100% { transform: scale(1); }
    30%      { transform: scale(1.12); }
    60%      { transform: scale(0.96); }
}

@-webkit-keyframes moSpeakInner {
    0%, 100% { opacity: 0.6; }
    30%      { opacity: 1; }
    60%      { opacity: 0.5; }
}
@keyframes moSpeakInner {
    0%, 100% { opacity: 0.6; }
    30%      { opacity: 1; }
    60%      { opacity: 0.5; }
}

/* ===========================================================
   STATE: EXCITED — goal hit, streak earned
   =========================================================== */
.mo-excited .mo-glow {
    opacity: 0.7;
    -webkit-animation: moGlowPulse 1.2s ease-in-out infinite;
    animation: moGlowPulse 1.2s ease-in-out infinite;
}
.mo-excited .mo-ring { opacity: 0.6; }
.mo-excited .mo-ring-1 {
    top: 0%; right: 0%; bottom: 0%; left: 0%;
    -webkit-animation: moRingSpin1 3s linear infinite;
    animation: moRingSpin1 3s linear infinite;
}
.mo-excited .mo-ring-2 {
    top: -14%; right: -14%; bottom: -14%; left: -14%;
    -webkit-animation: moRingSpin2 4.8s linear infinite reverse;
    animation: moRingSpin2 4.8s linear infinite reverse; opacity: 0.36;
}
.mo-excited .mo-ring-3 {
    top: -26%; right: -26%; bottom: -26%; left: -26%;
    -webkit-animation: moRingSpin3 6.6s linear infinite;
    animation: moRingSpin3 6.6s linear infinite; opacity: 0.18;
}
.mo-excited .mo-core {
    background: radial-gradient(circle, #ffffff 0%, #22d3ee 35%, #0891b2 100%);
    box-shadow:
        0 0 30px rgba(34, 211, 238, 0.6),
        0 0 80px rgba(34, 211, 238, 0.2),
        inset 0 0 15px rgba(255, 255, 255, 0.3);
    -webkit-animation: moCorePulse 1.2s ease-in-out infinite;
    animation: moCorePulse 1.2s ease-in-out infinite;
}
.mo-excited .mo-core-inner { -webkit-animation: moCoreInnerPulse 1.2s ease-in-out -0.5s infinite; animation: moCoreInnerPulse 1.2s ease-in-out -0.5s infinite; }
.mo-excited .mo-particles {
    opacity: 1;
    -webkit-animation: moParticleField 2s linear infinite;
    animation: moParticleField 2s linear infinite;
}
.mo-excited .mo-particles span {
    width: 4px; height: 4px;
    background: #67e8f9;
    box-shadow: 0 0 10px #22d3ee;
}

/* ===========================================================
   STATE: WOW — major milestone, big achievement
   =========================================================== */
.mo-wow .mo-glow {
    opacity: 0.9;
    -webkit-animation: moGlowPulse 0.9s ease-in-out infinite;
    animation: moGlowPulse 0.9s ease-in-out infinite;
}
.mo-wow .mo-ring {
    opacity: 0.7;
    border-color: #fbbf24;
    border-width: 2px;
}
.mo-wow .mo-ring-1 { -webkit-animation: moRingSpin1 2s linear infinite; animation: moRingSpin1 2s linear infinite; }
.mo-wow .mo-ring-2 { -webkit-animation: moRingSpin2 3.2s linear infinite reverse; animation: moRingSpin2 3.2s linear infinite reverse; opacity: 0.42; }
.mo-wow .mo-ring-3 { -webkit-animation: moRingSpin3 4.4s linear infinite; animation: moRingSpin3 4.4s linear infinite; opacity: 0.21; }
.mo-wow .mo-core {
    background: radial-gradient(circle, #ffffff 0%, #fde68a 30%, #f59e0b 60%, #d97706 100%);
    box-shadow:
        0 0 40px rgba(251, 191, 36, 0.6),
        0 0 100px rgba(251, 191, 36, 0.25),
        inset 0 0 20px rgba(255, 255, 255, 0.4);
    -webkit-animation: moWowBurst 0.9s ease-in-out infinite;
    animation: moWowBurst 0.9s ease-in-out infinite;
}
.mo-wow .mo-core-inner { -webkit-animation: moCoreInnerPulse 0.9s ease-in-out -0.5s infinite; animation: moCoreInnerPulse 0.9s ease-in-out -0.5s infinite; }
.mo-wow .mo-particles {
    opacity: 1;
    -webkit-animation: moParticleField 1.5s linear infinite;
    animation: moParticleField 1.5s linear infinite;
}
.mo-wow .mo-particles span {
    width: 5px; height: 5px;
    background: #fde68a;
    box-shadow: 0 0 12px #fbbf24;
}

@-webkit-keyframes moWowBurst {
    0%, 100% { -webkit-transform: scale(1); }
    25%      { -webkit-transform: scale(1.15); }
    50%      { -webkit-transform: scale(0.95); }
    75%      { -webkit-transform: scale(1.08); }
}
@keyframes moWowBurst {
    0%, 100% { transform: scale(1); }
    25%      { transform: scale(1.15); }
    50%      { transform: scale(0.95); }
    75%      { transform: scale(1.08); }
}

/* ===========================================================
   STATE: NOTIFICATION — gentle nudge
   =========================================================== */
.mo-notification .mo-glow {
    opacity: 0.55;
    -webkit-animation: moGlowPulse 2s ease-in-out infinite;
    animation: moGlowPulse 2s ease-in-out infinite;
}
.mo-notification .mo-ring { opacity: 0.4; }
.mo-notification .mo-ring-1 {
    -webkit-animation: moNotifyRing 2s ease-out infinite;
    animation: moNotifyRing 2s ease-out infinite;
}
.mo-notification .mo-ring-2 { -webkit-animation: moRingSpin2 12.8s linear infinite reverse; animation: moRingSpin2 12.8s linear infinite reverse; opacity: 0.24; }
.mo-notification .mo-ring-3 { -webkit-animation: moRingSpin3 17.6s linear infinite; animation: moRingSpin3 17.6s linear infinite; opacity: 0.12; }
.mo-notification .mo-core {
    -webkit-animation: moNotifyBounce 2s ease-in-out infinite;
    animation: moNotifyBounce 2s ease-in-out infinite;
}
.mo-notification .mo-core-inner { -webkit-animation: moCoreInnerPulse 2s ease-in-out -0.5s infinite; animation: moCoreInnerPulse 2s ease-in-out -0.5s infinite; }
.mo-notification .mo-particles { opacity: 0.5; -webkit-animation: moParticleField 6s linear infinite; animation: moParticleField 6s linear infinite; }

@-webkit-keyframes moNotifyBounce {
    0%, 100% { -webkit-transform: scale(1) translateY(0); }
    15%      { -webkit-transform: scale(1.08) translateY(-4%); }
    30%      { -webkit-transform: scale(0.97) translateY(0); }
    45%      { -webkit-transform: scale(1.04) translateY(-2%); }
    60%      { -webkit-transform: scale(1); }
}
@keyframes moNotifyBounce {
    0%, 100% { transform: scale(1) translateY(0); }
    15%      { transform: scale(1.08) translateY(-4%); }
    30%      { transform: scale(0.97) translateY(0); }
    45%      { transform: scale(1.04) translateY(-2%); }
    60%      { transform: scale(1); }
}

@-webkit-keyframes moNotifyRing {
    0%   { -webkit-transform: scale(1); opacity: 0.4; }
    50%  { -webkit-transform: scale(1.15); opacity: 0.6; }
    100% { -webkit-transform: scale(1); opacity: 0.4; }
}
@keyframes moNotifyRing {
    0%   { transform: scale(1); opacity: 0.4; }
    50%  { transform: scale(1.15); opacity: 0.6; }
    100% { transform: scale(1); opacity: 0.4; }
}

/* ===========================================================
   STATE: ZEN — late night, wind-down
   =========================================================== */
.mo-zen .mo-glow {
    opacity: 0.2;
    -webkit-animation: moGlowPulse 8s ease-in-out infinite;
    animation: moGlowPulse 8s ease-in-out infinite;
}
.mo-zen .mo-ring { opacity: 0.12; border-color: #a78bfa; }
.mo-zen .mo-ring-1 { -webkit-animation: moRingSpin1 30s linear infinite; animation: moRingSpin1 30s linear infinite; }
.mo-zen .mo-ring-2 { -webkit-animation: moRingSpin2 48s linear infinite reverse; animation: moRingSpin2 48s linear infinite reverse; opacity: 0.07; }
.mo-zen .mo-ring-3 { -webkit-animation: moRingSpin3 66s linear infinite; animation: moRingSpin3 66s linear infinite; opacity: 0.04; }
.mo-zen .mo-core {
    background: radial-gradient(circle, rgba(255,255,255,0.8) 0%, #c4b5fd 40%, #7c3aed 100%);
    box-shadow:
        0 0 20px rgba(167, 139, 250, 0.3),
        0 0 60px rgba(167, 139, 250, 0.1),
        inset 0 0 15px rgba(255, 255, 255, 0.1);
    -webkit-animation: moCorePulse 8s ease-in-out infinite;
    animation: moCorePulse 8s ease-in-out infinite;
}
.mo-zen .mo-core-inner { -webkit-animation: moCoreInnerPulse 8s ease-in-out -0.5s infinite; animation: moCoreInnerPulse 8s ease-in-out -0.5s infinite; }
.mo-zen .mo-particles { opacity: 0; }

/* ===========================================================
   STATE: ERROR — something went wrong
   =========================================================== */
.mo-error .mo-glow {
    opacity: 0.35;
    -webkit-animation: moGlowPulse 3s ease-in-out infinite;
    animation: moGlowPulse 3s ease-in-out infinite;
}
.mo-error .mo-ring { opacity: 0.2; border-color: #fb923c; }
.mo-error .mo-ring-1 { -webkit-animation: moRingSpin1 15s linear infinite; animation: moRingSpin1 15s linear infinite; }
.mo-error .mo-ring-2 { -webkit-animation: moRingSpin2 24s linear infinite reverse; animation: moRingSpin2 24s linear infinite reverse; opacity: 0.12; }
.mo-error .mo-ring-3 { -webkit-animation: moRingSpin3 33s linear infinite; animation: moRingSpin3 33s linear infinite; opacity: 0.06; }
.mo-error .mo-core {
    background: radial-gradient(circle, rgba(255,255,255,0.7) 0%, #fb923c 40%, #c2410c 100%);
    box-shadow:
        0 0 20px rgba(249, 115, 22, 0.4),
        0 0 50px rgba(249, 115, 22, 0.15),
        inset 0 0 15px rgba(255, 255, 255, 0.1);
    -webkit-animation: moErrorFlicker 0.15s ease-in-out 3;
    animation: moErrorFlicker 0.15s ease-in-out 3;
}
.mo-error .mo-particles { opacity: 0; }

@-webkit-keyframes moErrorFlicker {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.5; }
}
@keyframes moErrorFlicker {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.5; }
}

/* ===========================================================
   TRANSITION BURST — one-shot flash on state change
   Applied via JS, removed after animation completes
   =========================================================== */
.mo-burst .mo-core {
    -webkit-animation: moBurstFlash 0.4s ease-out forwards !important;
    animation: moBurstFlash 0.4s ease-out forwards !important;
}
.mo-burst .mo-glow {
    -webkit-animation: moBurstGlow 0.6s ease-out forwards !important;
    animation: moBurstGlow 0.6s ease-out forwards !important;
}

@-webkit-keyframes moBurstFlash {
    0%   { -webkit-transform: scale(1); -webkit-filter: brightness(1); }
    40%  { -webkit-transform: scale(1.3); -webkit-filter: brightness(2); }
    100% { -webkit-transform: scale(1); -webkit-filter: brightness(1); }
}
@keyframes moBurstFlash {
    0%   { transform: scale(1); filter: brightness(1); }
    40%  { transform: scale(1.3); filter: brightness(2); }
    100% { transform: scale(1); filter: brightness(1); }
}

@-webkit-keyframes moBurstGlow {
    0%   { -webkit-transform: scale(1); opacity: 0.4; }
    30%  { -webkit-transform: scale(1.8); opacity: 0.8; }
    100% { -webkit-transform: scale(1); opacity: 0.4; }
}
@keyframes moBurstGlow {
    0%   { transform: scale(1); opacity: 0.4; }
    30%  { transform: scale(1.8); opacity: 0.8; }
    100% { transform: scale(1); opacity: 0.4; }
}

/* ===========================================================
   REDUCED MOTION — respect user preferences
   =========================================================== */
@media (prefers-reduced-motion: reduce) {
    .mo-orb:not(.mo-force-motion) .mo-glow,
    .mo-orb:not(.mo-force-motion) .mo-ring,
    .mo-orb:not(.mo-force-motion) .mo-core,
    .mo-orb:not(.mo-force-motion) .mo-core-inner,
    .mo-orb:not(.mo-force-motion) .mo-particles,
    .mo-orb:not(.mo-force-motion) .mo-particles span {
        -webkit-animation: none !important;
        animation: none !important;
    }
}

/* ===========================================================
   SMALL SIZE SIMPLIFICATIONS — keep it clean at tiny sizes
   =========================================================== */
.mo-xs .mo-ring-2,
.mo-xs .mo-ring-3,
.mo-xs .mo-particles,
.mo-sm .mo-ring-3,
.mo-sm .mo-particles { display: none; }


/* =============================================================
   SKIN: THE CORE (default)
   Donut/torus feel — bright center hole, clean precise rings.
   Calm • Balanced • Aware
   ============================================================= */
/* (default — no extra class needed, base styles are The Core) */


/* =============================================================
   SKIN: THE AURA
   Dark sphere with warm outer halo. Organic, inviting.
   Warm • Encouraging • Human-centric
   ============================================================= */
.mo-skin-aura {
    --mo-color-primary: #00e5ff;
    --mo-color-glow: rgba(0, 229, 255, 0.2);
}

.mo-skin-aura .mo-core {
    width: 60%;
    height: 60%;
    background: radial-gradient(circle, 
        rgba(10, 15, 30, 0.95) 0%, 
        rgba(5, 10, 25, 1) 50%, 
        rgba(0, 60, 100, 0.8) 85%, 
        rgba(0, 180, 255, 0.4) 100%
    );
    box-shadow:
        0 0 40px rgba(0, 200, 255, 0.25),
        0 0 80px rgba(0, 200, 255, 0.1),
        inset 0 0 40px rgba(0, 0, 0, 0.6),
        inset 0 0 80px rgba(0, 0, 0, 0.4);
    border: 1.5px solid rgba(0, 220, 255, 0.25);
}

.mo-skin-aura .mo-core-inner {
    top: 30%; right: 30%; bottom: 30%; left: 30%;
    background: radial-gradient(circle, 
        rgba(255,255,255,0.06) 0%, 
        rgba(0, 180, 255, 0.08) 50%, 
        transparent 100%
    );
}

.mo-skin-aura .mo-ring-1 {
    top: -2%; right: -2%; bottom: -2%; left: -2%;
    border-width: 2px;
    border-color: rgba(0, 220, 255, 0.5);
    border-style: solid;
    box-shadow: 0 0 15px rgba(0, 220, 255, 0.2), inset 0 0 15px rgba(0, 220, 255, 0.1);
}
.mo-skin-aura .mo-ring-2 {
    top: -12%; right: -12%; bottom: -12%; left: -12%;
    border-width: 1px;
    border-color: rgba(0, 200, 255, 0.15);
    border-style: solid;
}
.mo-skin-aura .mo-ring-3 {
    top: -22%; right: -22%; bottom: -22%; left: -22%;
    border-width: 1px;
    border-color: rgba(0, 200, 255, 0.06);
    border-style: solid;
}

.mo-skin-aura .mo-glow {
    top: -40%; right: -40%; bottom: -40%; left: -40%;
    background: radial-gradient(circle, rgba(0, 200, 255, 0.15) 0%, rgba(0, 100, 200, 0.05) 50%, transparent 70%);
}

.mo-skin-aura .mo-particles span {
    background: rgba(0, 220, 255, 0.8);
    box-shadow: 0 0 8px rgba(0, 220, 255, 0.6);
    width: 2px;
    height: 2px;
}

/* Aura + Thinking */
.mo-skin-aura.mo-thinking .mo-core {
    background: radial-gradient(circle, 
        rgba(20, 15, 50, 0.95) 0%, 
        rgba(15, 10, 40, 1) 50%, 
        rgba(80, 60, 200, 0.6) 85%, 
        rgba(130, 100, 255, 0.4) 100%
    );
    border-color: rgba(130, 140, 248, 0.3);
    box-shadow:
        0 0 40px rgba(99, 102, 241, 0.3),
        0 0 80px rgba(99, 102, 241, 0.1),
        inset 0 0 40px rgba(0, 0, 0, 0.5);
}
.mo-skin-aura.mo-thinking .mo-ring-1 {
    border-color: rgba(130, 140, 248, 0.5);
    box-shadow: 0 0 15px rgba(99, 102, 241, 0.25);
}

/* Aura + Excited */
.mo-skin-aura.mo-excited .mo-core {
    background: radial-gradient(circle, 
        rgba(5, 20, 30, 0.9) 0%, 
        rgba(0, 40, 60, 1) 50%, 
        rgba(0, 180, 200, 0.7) 85%, 
        rgba(34, 211, 238, 0.5) 100%
    );
    border-color: rgba(34, 211, 238, 0.4);
    box-shadow:
        0 0 50px rgba(34, 211, 238, 0.4),
        0 0 100px rgba(34, 211, 238, 0.15),
        inset 0 0 30px rgba(0, 0, 0, 0.4);
}

/* Aura + Wow */
.mo-skin-aura.mo-wow .mo-core {
    background: radial-gradient(circle, 
        rgba(30, 20, 5, 0.9) 0%, 
        rgba(50, 30, 0, 1) 50%, 
        rgba(200, 150, 30, 0.7) 85%, 
        rgba(251, 191, 36, 0.5) 100%
    );
    border-color: rgba(251, 191, 36, 0.4);
    box-shadow:
        0 0 50px rgba(251, 191, 36, 0.4),
        0 0 100px rgba(251, 191, 36, 0.15),
        inset 0 0 30px rgba(0, 0, 0, 0.3);
}

/* Aura + Zen */
.mo-skin-aura.mo-zen .mo-core {
    background: radial-gradient(circle, 
        rgba(15, 5, 30, 0.95) 0%, 
        rgba(20, 10, 40, 1) 50%, 
        rgba(100, 60, 180, 0.5) 85%, 
        rgba(167, 139, 250, 0.3) 100%
    );
    border-color: rgba(167, 139, 250, 0.25);
    box-shadow:
        0 0 40px rgba(167, 139, 250, 0.2),
        inset 0 0 40px rgba(0, 0, 0, 0.5);
}


/* =============================================================
   SKIN: THE RING
   Multiple precise concentric rings, technical/futuristic.
   Intelligent • Precise • Futuristic
   ============================================================= */
.mo-skin-ring {
    --mo-color-primary: #00d4ff;
    --mo-color-glow: rgba(0, 212, 255, 0.15);
}

.mo-skin-ring .mo-core {
    width: 22%;
    height: 22%;
    background: radial-gradient(circle, #ffffff 0%, #00d4ff 60%, #0088cc 100%);
    box-shadow:
        0 0 15px rgba(0, 212, 255, 0.6),
        0 0 40px rgba(0, 212, 255, 0.2);
}
.mo-skin-ring .mo-core-inner {
    top: 15%; right: 15%; bottom: 15%; left: 15%;
    background: radial-gradient(circle, rgba(255,255,255,0.95) 0%, rgba(255,255,255,0.2) 70%);
}

.mo-skin-ring .mo-ring-1 {
    top: 15%; right: 15%; bottom: 15%; left: 15%;
    border-width: 2px;
    border-style: solid;
    border-color: rgba(0, 212, 255, 0.5);
    box-shadow: 0 0 10px rgba(0, 212, 255, 0.15);
}
.mo-skin-ring .mo-ring-2 {
    top: 2%; right: 2%; bottom: 2%; left: 2%;
    border-width: 1.5px;
    border-style: solid;
    border-color: rgba(0, 212, 255, 0.3);
}
.mo-skin-ring .mo-ring-3 {
    top: -12%; right: -12%; bottom: -12%; left: -12%;
    border-width: 1px;
    border-style: solid;
    border-color: rgba(0, 212, 255, 0.15);
}

/* Extra rings for The Ring skin (via box-shadow trick) */
.mo-skin-ring::before,
.mo-skin-ring::after {
    content: '';
    position: absolute;
    border-radius: 50%;
    border: 1px solid rgba(0, 212, 255, 0.08);
    pointer-events: none;
    -webkit-animation: moRingSpin2 25s linear infinite;
    animation: moRingSpin2 25s linear infinite;
}
.mo-skin-ring::before {
    top: -25%; right: -25%; bottom: -25%; left: -25%;
}
.mo-skin-ring::after {
    top: -35%; right: -35%; bottom: -35%; left: -35%;
    border-style: dashed;
    -webkit-animation: moRingSpin2 35s linear infinite reverse;
    animation: moRingSpin2 35s linear infinite reverse;
}

.mo-skin-ring .mo-glow {
    top: -20%; right: -20%; bottom: -20%; left: -20%;
    opacity: 0.25;
}

.mo-skin-ring .mo-particles span {
    width: 2px;
    height: 2px;
    background: #00d4ff;
    box-shadow: 0 0 6px rgba(0, 212, 255, 0.8);
}

/* Ring + Thinking */
.mo-skin-ring.mo-thinking .mo-ring-1 { border-color: rgba(130, 140, 248, 0.6); box-shadow: 0 0 12px rgba(99,102,241,0.2); }
.mo-skin-ring.mo-thinking .mo-ring-2 { border-color: rgba(130, 140, 248, 0.35); }
.mo-skin-ring.mo-thinking .mo-ring-3 { border-color: rgba(130, 140, 248, 0.2); }
.mo-skin-ring.mo-thinking::before { border-color: rgba(130, 140, 248, 0.1); }
.mo-skin-ring.mo-thinking::after { border-color: rgba(130, 140, 248, 0.06); }

/* Ring + Wow */
.mo-skin-ring.mo-wow .mo-ring-1 { border-color: rgba(251, 191, 36, 0.5); box-shadow: 0 0 12px rgba(251,191,36,0.2); }
.mo-skin-ring.mo-wow .mo-ring-2 { border-color: rgba(251, 191, 36, 0.3); }
.mo-skin-ring.mo-wow .mo-ring-3 { border-color: rgba(251, 191, 36, 0.15); }


/* =============================================================
   SKIN: THE PULSE
   Particle-heavy, energetic, orbiting energy field.
   Energetic • Motivational • Alive
   ============================================================= */
.mo-skin-pulse {
    --mo-color-primary: #00e5ff;
    --mo-color-glow: rgba(0, 229, 255, 0.2);
}

.mo-skin-pulse .mo-core {
    width: 35%;
    height: 35%;
    background: radial-gradient(circle, #ffffff 0%, #00e5ff 35%, #0077aa 70%, rgba(0,50,80,0.9) 100%);
    box-shadow:
        0 0 30px rgba(0, 229, 255, 0.5),
        0 0 60px rgba(0, 229, 255, 0.2),
        0 0 100px rgba(0, 229, 255, 0.08),
        inset 0 0 15px rgba(255, 255, 255, 0.2);
}

.mo-skin-pulse .mo-core-inner {
    top: 25%; right: 25%; bottom: 25%; left: 25%;
    background: radial-gradient(circle, rgba(255,255,255,0.8) 0%, rgba(255,255,255,0.1) 60%);
}

.mo-skin-pulse .mo-ring-1 {
    top: 5%; right: 5%; bottom: 5%; left: 5%;
    border: 1px solid rgba(0, 229, 255, 0.2);
    box-shadow: 0 0 20px rgba(0, 229, 255, 0.08);
}
.mo-skin-pulse .mo-ring-2 {
    top: -10%; right: -10%; bottom: -10%; left: -10%;
    border: 1px solid rgba(0, 229, 255, 0.1);
}
.mo-skin-pulse .mo-ring-3 {
    top: -20%; right: -20%; bottom: -20%; left: -20%;
    border: 1px dotted rgba(0, 229, 255, 0.06);
}

/* Bigger, brighter particles for Pulse */
.mo-skin-pulse .mo-particles {
    top: -15%; right: -15%; bottom: -15%; left: -15%;
    opacity: 0.6;
}
.mo-skin-pulse .mo-particles span {
    width: 4px;
    height: 4px;
    background: #00e5ff;
    box-shadow: 0 0 10px rgba(0, 229, 255, 0.8), 0 0 20px rgba(0, 229, 255, 0.3);
}

/* Extra orbit layer via pseudo-element */
.mo-skin-pulse::before {
    content: '';
    position: absolute;
    top: -8%; right: -8%; bottom: -8%; left: -8%;
    border-radius: 50%;
    border: 2px solid transparent;
    border-top-color: rgba(0, 229, 255, 0.35);
    border-bottom-color: rgba(0, 229, 255, 0.15);
    -webkit-animation: moRingSpin1 6s linear infinite;
    animation: moRingSpin1 6s linear infinite;
    pointer-events: none;
}
.mo-skin-pulse::after {
    content: '';
    position: absolute;
    top: -18%; right: -18%; bottom: -18%; left: -18%;
    border-radius: 50%;
    border: 1.5px solid transparent;
    border-left-color: rgba(0, 229, 255, 0.2);
    border-right-color: rgba(0, 229, 255, 0.1);
    -webkit-animation: moRingSpin2 9s linear infinite reverse;
    animation: moRingSpin2 9s linear infinite reverse;
    pointer-events: none;
}

.mo-skin-pulse .mo-glow {
    top: -35%; right: -35%; bottom: -35%; left: -35%;
    background: radial-gradient(circle, rgba(0, 229, 255, 0.2) 0%, rgba(0, 100, 200, 0.05) 50%, transparent 70%);
}

/* Pulse + Excited — particles go wild */
.mo-skin-pulse.mo-excited .mo-particles span {
    width: 5px;
    height: 5px;
    box-shadow: 0 0 14px rgba(34, 211, 238, 0.9), 0 0 30px rgba(34, 211, 238, 0.4);
}

/* Pulse + Wow — gold energy field */
.mo-skin-pulse.mo-wow .mo-particles span {
    background: #fde68a;
    box-shadow: 0 0 14px rgba(251, 191, 36, 0.9), 0 0 30px rgba(251, 191, 36, 0.4);
}
.mo-skin-pulse.mo-wow::before { border-top-color: rgba(251, 191, 36, 0.35); border-bottom-color: rgba(251, 191, 36, 0.15); }
.mo-skin-pulse.mo-wow::after { border-left-color: rgba(251, 191, 36, 0.2); border-right-color: rgba(251, 191, 36, 0.1); }


/* =============================================================
   SKIN: GHOST
   Minimal, nearly invisible. Just an outline + faint glow.
   Subtle • Mysterious • Minimal
   ============================================================= */
.mo-skin-ghost {
    --mo-color-primary: rgba(255, 255, 255, 0.15);
    --mo-color-glow: rgba(255, 255, 255, 0.05);
}

.mo-skin-ghost .mo-glow {
    opacity: 0.15;
}
.mo-skin-ghost .mo-ring {
    opacity: 0.08;
}

.mo-skin-ghost .mo-core {
    width: 35%;
    height: 35%;
    background: radial-gradient(circle, 
        rgba(255,255,255,0.08) 0%, 
        rgba(255,255,255,0.02) 50%, 
        transparent 100%
    );
    box-shadow:
        0 0 30px rgba(255, 255, 255, 0.05),
        inset 0 0 20px rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.mo-skin-ghost .mo-core-inner {
    background: radial-gradient(circle, rgba(255,255,255,0.15) 0%, transparent 70%);
}

.mo-skin-ghost .mo-ring-1 {
    border-color: rgba(255, 255, 255, 0.08);
}
.mo-skin-ghost .mo-ring-2 {
    border-color: rgba(255, 255, 255, 0.04);
}
.mo-skin-ghost .mo-ring-3 {
    border-color: rgba(255, 255, 255, 0.02);
}

.mo-skin-ghost .mo-particles span {
    background: rgba(255, 255, 255, 0.3);
    box-shadow: 0 0 8px rgba(255, 255, 255, 0.15);
    width: 2px;
    height: 2px;
}

/* Ghost comes alive on speaking/excited/wow */
.mo-skin-ghost.mo-speaking .mo-core,
.mo-skin-ghost.mo-excited .mo-core,
.mo-skin-ghost.mo-wow .mo-core {
    border-color: rgba(0, 212, 255, 0.2);
    box-shadow: 0 0 30px rgba(0, 212, 255, 0.1);
}
.mo-skin-ghost.mo-wow .mo-core {
    border-color: rgba(251, 191, 36, 0.2);
    box-shadow: 0 0 30px rgba(251, 191, 36, 0.1);
}