/* =============================================================================
   RAKUN IDLE ANIMATION SYSTEM - CSS
   Micro-expressions, blink, ear twitch, tail wag, and walker container
   Add this to animations.css or load as separate file
   ============================================================================= */

/* --- Walker Container (JS-positioned) --- */
.rakun-walker {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    will-change: transform;
    z-index: 3;
    /* Disable pointer events on wrapper, SVG handles them */
    pointer-events: none;
}

.rakun-walker svg {
    display: block;
    pointer-events: auto;
    position: relative;
    z-index: 2;
}

/* --- Blink --- 
   Overlays a narrow scaleY on the eye region.
   We target the SVG eye elements by class. */
.rakun-blinking .rakun-eye-left,
.rakun-blinking .rakun-eye-right,
.rakun-blinking [class*="eye"] circle,
.rakun-blinking [class*="Eye"] circle {
    transform-origin: center;
    animation: rakunBlink 0.15s ease-in-out;
}

@keyframes rakunBlink {
    0%, 100% { transform: scaleY(1); }
    40%, 60% { transform: scaleY(0.1); }
}

/* If eyes don't have classes, target by approximate position in SVG.
   This is a broader fallback that squishes the whole face briefly. */
.rakun-blinking svg g {
    /* Subtle squash on the face group — eyes appear to blink */
}

/* --- Ear Twitch ---
   Quick rotation on ear elements */
.rakun-ear-twitch .rakun-ear-left,
.rakun-ear-twitch [class*="ear"]:first-of-type {
    transform-origin: bottom center;
    animation: earTwitchLeft 0.3s ease-in-out;
}

.rakun-ear-twitch .rakun-ear-right,
.rakun-ear-twitch [class*="ear"]:last-of-type {
    transform-origin: bottom center;
    animation: earTwitchRight 0.3s ease-in-out 0.05s;
}

@keyframes earTwitchLeft {
    0%, 100% { transform: rotate(0deg); }
    30% { transform: rotate(-8deg); }
    60% { transform: rotate(3deg); }
}

@keyframes earTwitchRight {
    0%, 100% { transform: rotate(0deg); }
    30% { transform: rotate(8deg); }
    60% { transform: rotate(-3deg); }
}

/* --- Tail Wag ---
   Target the tail element */
.rakun-tail-wag .rakun-tail,
.rakun-tail-wag [class*="tail"] {
    transform-origin: 30% 90%;
    animation: tailWag 0.6s ease-in-out;
}

@keyframes tailWag {
    0%, 100% { transform: rotate(0deg); }
    15% { transform: rotate(12deg); }
    30% { transform: rotate(-10deg); }
    45% { transform: rotate(8deg); }
    60% { transform: rotate(-6deg); }
    75% { transform: rotate(4deg); }
    90% { transform: rotate(-2deg); }
}

/* --- Ground shadow that responds to movement --- */
.rakun-walker::after {
    content: '';
    position: absolute;
    bottom: -4px;
    left: 50%;
    transform: translateX(-50%);
    width: 55%;
    height: 8px;
    background: radial-gradient(ellipse, rgba(0,0,0,0.18) 0%, transparent 70%);
    border-radius: 50%;
    pointer-events: none;
    z-index: -1;
    transition: width 0.3s ease, opacity 0.3s ease;
}

/* Shadow shrinks during hop (rakun is in air) */
.rakun-walker.rakun-hopping::after {
    width: 35%;
    opacity: 0.5;
}

/* --- Expression Overrides ---
   When negative states are active, disable the lively micro-animations
   so the sick/tired/hungry expression stays dominant. */
.rakun-display.state-sick .rakun-walker,
.rakun-display.state-tired .rakun-walker,
.rakun-display.state-hungry .rakun-walker {
    /* Slower, heavier movement feel */
    transition: transform 0.3s ease-out !important;
}

/* ==========================================
   SLEEP — Freeze walker only
   ========================================== */

/* Sleeping — freeze at current walked-to position */
.rakun-display.rakun-sleeping .rakun-walker {
    animation: none !important;
}
/* --- Override old idle CSS ---
   Disable the old CSS-only idle animations when JS controller is active */
.rakun-idle-js .rakun-sprite {
    animation: none !important;
}

.rakun-idle-js.rakun-idle .rakun-sprite,
.rakun-idle-js.rakun-idle-advanced .rakun-sprite {
    animation: none !important;
}

/* Remove the old emoji blink overlay */
.rakun-idle-js.rakun-idle-advanced::before {
    display: none !important;
}

/* =============================================================================
   NEW BEHAVIORS — Level-Unlocked Animations
   ============================================================================= */

/* Spin - Level 15 unlock */
.rakun-idle-spin .rakun-walker {
    /* JS handles the rotation, CSS adds a subtle glow during spin */
}

/* Bounce - Level 20 unlock */
.rakun-idle-bounce .rakun-walker {
    /* JS handles the bouncing */
}

/* Dance - Level 25 unlock */  
.rakun-idle-dance .rakun-walker {
    /* JS handles the dance sway */
}

/* Generic idle behavior indicator for UI (optional) */
.idle-behavior-indicator {
    position: absolute;
    top: -20px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 0.7rem;
    color: rgba(255,255,255,0.4);
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.3s;
}

.rakun-display:hover .idle-behavior-indicator {
    opacity: 1;
}