/* ==========================================================================
   LazySloth Cleaner - Core Styles & Animation Engine
   ========================================================================== */

body {
    background-color: #1A2E26;
    font-family: 'Plus Jakarta Sans', sans-serif;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}

/* Custom Scrollbars */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}
::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.03);
}
::-webkit-scrollbar-thumb {
    background: #A8C8A0;
    border-radius: 99px;
}
::-webkit-scrollbar-thumb:hover {
    background: #2D5E48;
}

/* Utilities */
.no-scrollbar::-webkit-scrollbar {
    display: none;
}
.no-scrollbar {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

/* --------------------------------------------------------------------------
   Mascot Keyframe Animations
   -------------------------------------------------------------------------- */
@keyframes floatSlow {
    0%, 100% { transform: translateY(0px) rotate(0deg); }
    50% { transform: translateY(-7px) rotate(1deg); }
}

@keyframes breathing {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.02); }
}

@keyframes blinkEye {
    0%, 90%, 100% { transform: scaleY(1); }
    95% { transform: scaleY(0.1); }
}

@keyframes tailSway {
    0%, 100% { transform: rotate(-3deg); }
    50% { transform: rotate(3deg); }
}

@keyframes sweepBroom {
    0%, 100% { transform: rotate(0deg) translateX(0); }
    25% { transform: rotate(-14deg) translateX(-10px) translateY(4px); }
    75% { transform: rotate(10deg) translateX(12px) translateY(-2px); }
}

@keyframes leafFloat {
    0% { opacity: 1; transform: translateY(0) rotate(0deg) scale(0.8); }
    100% { opacity: 0; transform: translateY(-40px) rotate(180deg) scale(1.2); }
}

@keyframes sleepingZ {
    0% { opacity: 0; transform: translate(0, 0) scale(0.5); }
    50% { opacity: 0.85; }
    100% { opacity: 0; transform: translate(22px, -32px) scale(1.2); }
}

@keyframes waveHand {
    0%, 100% { transform: rotate(0deg); }
    25% { transform: rotate(-15deg); }
    75% { transform: rotate(15deg); }
}

@keyframes hopJoy {
    0%, 100% { transform: translateY(0) scale(1); }
    40% { transform: translateY(-16px) scale(1.04); }
    60% { transform: translateY(-6px) scale(0.99); }
}

@keyframes pulseGlow {
    0%, 100% { opacity: 0.3; transform: scale(0.98); }
    50% { opacity: 0.7; transform: scale(1.02); }
}

/* Mascot Active Class Bindings */
.anim-float { animation: floatSlow 4s ease-in-out infinite; }
.anim-breathe { animation: breathing 3.5s ease-in-out infinite; }
.anim-eye-blink { animation: blinkEye 4.5s infinite; transform-origin: center; }
.anim-sway { animation: tailSway 5s ease-in-out infinite; transform-origin: top center; }
.anim-sweep { animation: sweepBroom 1.1s ease-in-out infinite; transform-origin: 30% 70%; }
.anim-wave { animation: waveHand 1.5s ease-in-out infinite; transform-origin: bottom right; }
.anim-hop { animation: hopJoy 0.7s ease-in-out; }

/* Particles */
.z-particle-1 { animation: sleepingZ 2.5s infinite 0s; }
.z-particle-2 { animation: sleepingZ 2.5s infinite 0.8s; }
.z-particle-3 { animation: sleepingZ 2.5s infinite 1.6s; }

.leaf-particle {
    position: absolute;
    pointer-events: none;
    animation: leafFloat 1.8s ease-out infinite;
}

/* --------------------------------------------------------------------------
   UI Surfaces & Speech Bubble
   -------------------------------------------------------------------------- */
.paper-card {
    background-color: #FFFFFF;
    border: 1px solid rgba(168, 200, 160, 0.25);
    box-shadow: 0 4px 20px rgba(36, 76, 58, 0.05);
}

.speech-bubble {
    position: relative;
    background: #FFFFFF;
    border-radius: 18px;
    box-shadow: 0 8px 24px rgba(36, 76, 58, 0.08);
    border: 2px solid #E3EFE0;
}
.speech-bubble::after {
    content: '';
    position: absolute;
    bottom: -10px;
    left: 28px;
    border-width: 10px 10px 0;
    border-style: solid;
    border-color: #FFFFFF transparent;
    display: block;
    width: 0;
}
.speech-bubble::before {
    content: '';
    position: absolute;
    bottom: -13px;
    left: 27px;
    border-width: 11px 11px 0;
    border-style: solid;
    border-color: #E3EFE0 transparent;
    display: block;
    width: 0;
}

/* Responsive Mobile Container Lock */
.app-shell {
    max-width: 440px;
    height: 100vh;
    max-height: 920px;
}
@media (max-height: 700px) {
    .app-shell { height: 100vh; max-height: 100vh; }
}

/* --------------------------------------------------------------------------
   Accessibility: Reduced Motion Preference & Manual Override
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    *, ::before, ::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
    .anim-float,
    .anim-breathe,
    .anim-eye-blink,
    .anim-sway,
    .anim-sweep,
    .anim-wave,
    .anim-hop,
    .leaf-particle,
    .z-particle-1,
    .z-particle-2,
    .z-particle-3 {
        animation: none !important;
    }
}

body.reduced-motion *, 
body.reduced-motion ::before, 
body.reduced-motion ::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
}
body.reduced-motion .anim-float,
body.reduced-motion .anim-breathe,
body.reduced-motion .anim-eye-blink,
body.reduced-motion .anim-sway,
body.reduced-motion .anim-sweep,
body.reduced-motion .anim-wave,
body.reduced-motion .anim-hop,
body.reduced-motion .leaf-particle,
body.reduced-motion .z-particle-1,
body.reduced-motion .z-particle-2,
body.reduced-motion .z-particle-3 {
    animation: none !important;
}