/* 
 * Teddy Bear Yoga Design - Redesigned from scratch
 * Style: Cute Vector Illustration
 */

:root {
    --bear-fur: #D99E73;       /* Warm tan/brown */
    --bear-fur-dark: #C68E5F;  /* Shadow/Darker fur */
    --bear-muzzle: #F8E8D8;    /* Cream */
    --bear-nose: #4A3B2A;      /* Dark brown */
    --bear-cheek: #FFB7B2;     /* Soft pink */
    --bear-pants: #9C27B0;     /* Purple yoga pants */
    --bear-pants-dark: #7B1FA2;
}

.yoga-bear-canvas {
    width: 280px;
    height: 340px;
    position: relative;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    align-items: flex-end;
}

.yoga-bear {
    width: 200px;
    height: 300px;
    position: relative;
    z-index: 10;
}

/* --- SHADOW --- */
.bear-shadow {
    position: absolute;
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
    width: 160px;
    height: 20px;
    background: rgba(0,0,0,0.15);
    border-radius: 50%;
    z-index: 0;
    transition: all 0.3s ease;
}

/* --- LEGS (Pants) --- */
.bear-legs {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 90px;
    z-index: 1;
}

.waistband {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100px;
    height: 15px;
    background: var(--bear-pants-dark);
    border-radius: 10px;
    z-index: 2;
}

.leg {
    position: absolute;
    bottom: 0;
    width: 50px;
    height: 80px;
    background: var(--bear-pants);
    border-radius: 25px 25px 10px 10px;
    border: 2px solid rgba(0,0,0,0.05);
}

.leg.left {
    left: 40px;
    transform: rotate(-5deg);
}

.leg.right {
    right: 40px;
    transform: rotate(5deg);
}

/* Feet tips (paws sticking out?) - Optional, keeping simple for now */

/* --- BODY --- */
.bear-body {
    position: absolute;
    bottom: 60px;
    left: 50%;
    transform: translateX(-50%);
    width: 110px;
    height: 130px;
    z-index: 2;
}

.bear-torso {
    width: 100%;
    height: 100%;
    background: var(--bear-fur);
    border-radius: 50px 50px 40px 40px;
    position: relative;
    overflow: hidden;
}

/* Belly - The breathing part */
.bear-belly {
    position: absolute;
    bottom: 15px;
    left: 50%;
    transform: translateX(-50%);
    width: 70px;
    height: 80px;
    background: var(--bear-muzzle);
    border-radius: 50%;
    opacity: 0.8;
    transform-origin: bottom center;
    transition: transform 0.1s ease;
}

/* --- ARMS --- */
.bear-arms {
    position: absolute;
    top: 130px;
    width: 100%;
    height: 100px;
    z-index: 3;
    pointer-events: none; /* Let clicks pass through */
}

.arm {
    position: absolute;
    width: 40px;
    height: 90px;
    background: var(--bear-fur);
    border-radius: 20px;
    top: 0;
}

.arm.left {
    left: 20px;
    transform: rotate(20deg);
    transform-origin: top center;
}

.arm.right {
    right: 20px;
    transform: rotate(-20deg);
    transform-origin: top center;
}

/* --- HEAD GROUP --- */
.bear-head-group {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 140px;
    height: 130px;
    z-index: 4;
}

/* Ears */
.bear-ears {
    position: absolute;
    top: 10px;
    width: 100%;
    height: 40px;
    z-index: 0;
}

.ear {
    position: absolute;
    width: 40px;
    height: 40px;
    background: var(--bear-fur);
    border-radius: 50%;
}

.ear.left {
    left: -5px;
}

.ear.right {
    right: -5px;
}

.ear::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 20px;
    height: 20px;
    background: var(--bear-fur-dark);
    border-radius: 50%;
    opacity: 0.3;
}

/* Head Main */
.bear-head {
    position: absolute;
    top: 20px;
    left: 0;
    width: 100%;
    height: 110px;
    background: var(--bear-fur);
    border-radius: 60px 60px 50px 50px;
    z-index: 1;
    box-shadow: 0 4px 10px rgba(0,0,0,0.05);
    overflow: hidden; /* Clip headband */
}

.headband {
    position: absolute;
    top: 25px;
    left: 0;
    width: 100%;
    height: 12px;
    background: var(--bear-pants);
    z-index: 1;
}

/* Face Features */
.bear-face {
    position: relative;
    width: 100%;
    height: 100%;
}

.eye {
    position: absolute;
    top: 40px;
    width: 14px;
    height: 14px;
    background: #333;
    border-radius: 50%;
    z-index: 2;
}

.eye.left {
    left: 35px;
}

.eye.right {
    right: 35px;
}

.eye::after {
    content: '';
    position: absolute;
    top: 3px;
    right: 3px;
    width: 4px;
    height: 4px;
    background: #fff;
    border-radius: 50%;
}

.muzzle {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 45px;
    background: var(--bear-muzzle);
    border-radius: 25px;
    z-index: 2;
}

.nose {
    position: absolute;
    top: 8px;
    left: 50%;
    transform: translateX(-50%);
    width: 20px;
    height: 14px;
    background: var(--bear-nose);
    border-radius: 10px;
}

.mouth {
    position: absolute;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
    width: 20px;
    height: 10px;
    border-bottom: 3px solid var(--bear-nose);
    border-radius: 0 0 10px 10px;
}

.cheeks {
    position: absolute;
    top: 55px;
    width: 100%;
    z-index: 2;
}

.cheek {
    position: absolute;
    width: 16px;
    height: 10px;
    background: var(--bear-cheek);
    border-radius: 50%;
    opacity: 0.6;
}

.cheek.left {
    left: 20px;
}

.cheek.right {
    right: 20px;
}

/* --- ANIMATIONS --- */

/* Bounce Animation (Jumping) */
.yoga-bear.teddy-bounce-animate {
    animation: bearJump 1.2s ease-in-out infinite;
}

.teddy-bounce-animate .bear-shadow {
    animation: shadowPulse 1.2s ease-in-out infinite;
}

.teddy-bounce-animate .arm.left {
    animation: armFlapLeft 1.2s ease-in-out infinite;
}

.teddy-bounce-animate .arm.right {
    animation: armFlapRight 1.2s ease-in-out infinite;
}

@keyframes bearJump {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-40px); }
}

@keyframes shadowPulse {
    0%, 100% { transform: translateX(-50%) scale(1); opacity: 0.3; }
    50% { transform: translateX(-50%) scale(0.4); opacity: 0.1; }
}

@keyframes armFlapLeft {
    0%, 100% { transform: rotate(20deg); }
    50% { transform: rotate(130deg); } /* Arms raised high */
}

@keyframes armFlapRight {
    0%, 100% { transform: rotate(-20deg); }
    50% { transform: rotate(-130deg); } /* Arms raised high */
}

/* Breathe Animation (Belly & Cheeks) */
.breathe-bear.inhale .bear-belly {
    animation: bellyInhale 5s ease-in-out forwards;
}

.breathe-bear.exhale .bear-belly {
    animation: bellyExhale 5s ease-in-out forwards;
}

.breathe-bear.inhale .cheek {
    animation: cheekInhale 5s ease-in-out forwards;
}

.breathe-bear.exhale .cheek {
    animation: cheekExhale 5s ease-in-out forwards;
}

@keyframes bellyInhale {
    0% { transform: translateX(-50%) scale(1); }
    100% { transform: translateX(-50%) scale(1.4); }
}

@keyframes bellyExhale {
    0% { transform: translateX(-50%) scale(1.4); }
    100% { transform: translateX(-50%) scale(1); }
}

@keyframes cheekInhale {
    0% { transform: scale(1); opacity: 0.6; }
    100% { transform: scale(1.5); opacity: 1; }
}

@keyframes cheekExhale {
    0% { transform: scale(1.5); opacity: 1; }
    100% { transform: scale(1); opacity: 0.6; }
}