/* ========================================
   Tour Assistant Character Styles
   ======================================== */

/* Container positioning */
.tour-assistant {
    position: relative;
    width: 80px;
    height: 100px;
    margin-bottom: 0.5rem;
    pointer-events: none;
    z-index: 10000;
}

.assistant-svg {
    width: 100%;
    height: 100%;
    overflow: visible;
}

/* ========================================
   Idle State - Default floating animation
   ======================================== */

.tour-assistant.state-idle {
    animation: assistant-float 3s ease-in-out infinite;
}

@keyframes assistant-float {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-5px);
    }
}

/* Eye blink animation */
.tour-assistant.state-idle .blink-overlay {
    opacity: 0;
    animation: assistant-blink 4s ease-in-out infinite;
}

@keyframes assistant-blink {
    0%, 92%, 100% {
        opacity: 0;
    }
    95%, 97% {
        opacity: 1;
    }
}

/* Chest light pulse in idle */
.tour-assistant.state-idle .chest-light {
    animation: chest-pulse 2s ease-in-out infinite;
}

@keyframes chest-pulse {
    0%, 100% {
        opacity: 0.6;
    }
    50% {
        opacity: 1;
    }
}

/* ========================================
   Talking State - Mouth animation + antenna wiggle
   ======================================== */

.tour-assistant.state-talking {
    animation: assistant-float 3s ease-in-out infinite;
}

/* Default: mouth closed */
.tour-assistant .mouth-open-shape {
    opacity: 0;
}

.tour-assistant .mouth-closed {
    opacity: 1;
}

/* When mouth-open class is present */
.tour-assistant.mouth-open .mouth-open-shape {
    opacity: 1;
}

.tour-assistant.mouth-open .mouth-closed {
    opacity: 0;
}

/* Antenna wiggle during talking */
.tour-assistant.state-talking .antenna {
    animation: antenna-wiggle 0.3s ease-in-out infinite;
    transform-origin: 40px 12px;
}

@keyframes antenna-wiggle {
    0%, 100% {
        transform: rotate(0deg);
    }
    25% {
        transform: rotate(5deg);
    }
    75% {
        transform: rotate(-5deg);
    }
}

/* Antenna ball glow during talking */
.tour-assistant.state-talking .antenna-ball {
    animation: antenna-glow 0.5s ease-in-out infinite;
}

@keyframes antenna-glow {
    0%, 100% {
        fill: #3b82f6;
    }
    50% {
        fill: #60a5fa;
    }
}

/* ========================================
   Pointing State - Arm gesture
   ======================================== */

.tour-assistant .arm-pointing {
    opacity: 0;
}

.tour-assistant .arm-idle {
    opacity: 1;
}

.tour-assistant.state-pointing .arm-pointing {
    opacity: 1;
    animation: point-gesture 0.5s ease-out forwards;
}

.tour-assistant.state-pointing .arm-idle {
    opacity: 0;
}

@keyframes point-gesture {
    0% {
        transform: rotate(0deg);
        opacity: 0;
    }
    50% {
        transform: rotate(-35deg);
        opacity: 1;
    }
    100% {
        transform: rotate(-30deg);
        opacity: 1;
    }
}

/* Keep floating while pointing */
.tour-assistant.state-pointing {
    animation: assistant-float 3s ease-in-out infinite;
}

/* ========================================
   Celebrating State - Jump + confetti
   ======================================== */

.tour-assistant.state-celebrating {
    animation: celebrate-jump 0.6s ease-out 3;
}

@keyframes celebrate-jump {
    0%, 100% {
        transform: translateY(0) scale(1);
    }
    30% {
        transform: translateY(-15px) scale(1.05);
    }
    50% {
        transform: translateY(-10px) scale(1.02);
    }
}

/* Confetti hidden by default */
.tour-assistant .confetti {
    opacity: 0;
}

.tour-assistant.state-celebrating .confetti {
    opacity: 1;
}

.tour-assistant.state-celebrating .confetti-1 {
    animation: confetti-fall-1 1.5s ease-out forwards;
}

.tour-assistant.state-celebrating .confetti-2 {
    animation: confetti-fall-2 1.3s ease-out 0.1s forwards;
}

.tour-assistant.state-celebrating .confetti-3 {
    animation: confetti-fall-3 1.4s ease-out 0.2s forwards;
}

.tour-assistant.state-celebrating .confetti-4 {
    animation: confetti-fall-4 1.2s ease-out 0.15s forwards;
}

.tour-assistant.state-celebrating .confetti-5 {
    animation: confetti-fall-5 1.6s ease-out 0.05s forwards;
}

.tour-assistant.state-celebrating .confetti-6 {
    animation: confetti-fall-6 1.35s ease-out 0.25s forwards;
}

@keyframes confetti-fall-1 {
    0% {
        transform: translate(0, 0) rotate(0deg);
        opacity: 1;
    }
    100% {
        transform: translate(-20px, 80px) rotate(360deg);
        opacity: 0;
    }
}

@keyframes confetti-fall-2 {
    0% {
        transform: translate(0, 0) rotate(0deg);
        opacity: 1;
    }
    100% {
        transform: translate(15px, 85px) rotate(-270deg);
        opacity: 0;
    }
}

@keyframes confetti-fall-3 {
    0% {
        transform: translate(0, 0) rotate(0deg);
        opacity: 1;
    }
    100% {
        transform: translate(-10px, 90px) rotate(180deg);
        opacity: 0;
    }
}

@keyframes confetti-fall-4 {
    0% {
        transform: translate(0, 0) rotate(0deg);
        opacity: 1;
    }
    100% {
        transform: translate(25px, 75px) rotate(-360deg);
        opacity: 0;
    }
}

@keyframes confetti-fall-5 {
    0% {
        transform: translate(0, 0) rotate(45deg);
        opacity: 1;
    }
    100% {
        transform: translate(-30px, 70px) rotate(405deg);
        opacity: 0;
    }
}

@keyframes confetti-fall-6 {
    0% {
        transform: translate(0, 0) rotate(30deg);
        opacity: 1;
    }
    100% {
        transform: translate(20px, 65px) rotate(-330deg);
        opacity: 0;
    }
}

/* Eyes happy during celebration */
.tour-assistant.state-celebrating .eye {
    animation: happy-eyes 0.4s ease-in-out infinite;
}

@keyframes happy-eyes {
    0%, 100% {
        transform: scaleY(1);
    }
    50% {
        transform: scaleY(0.6);
    }
}

/* ========================================
   Responsive Adjustments
   ======================================== */

@media (max-width: 768px) {
    .tour-assistant {
        width: 70px;
        height: 87px;
    }
}

@media (max-width: 640px) {
    .tour-assistant {
        width: 60px;
        height: 75px;
    }
}

@media (max-width: 480px) {
    .tour-assistant {
        width: 50px;
        height: 62px;
    }
}

/* ========================================
   Reduced Motion Accessibility
   ======================================== */

@media (prefers-reduced-motion: reduce) {
    .tour-assistant,
    .tour-assistant * {
        animation: none !important;
        transition: none !important;
    }

    /* Show static poses instead */
    .tour-assistant .blink-overlay {
        opacity: 0 !important;
    }

    .tour-assistant .confetti {
        opacity: 0 !important;
    }

    .tour-assistant.state-pointing .arm-pointing {
        opacity: 1;
        transform: rotate(-30deg);
    }
}

/* ========================================
   Hidden State (when user toggles off)
   ======================================== */

.tour-assistant.hidden {
    display: none;
}

/* ========================================
   Entry Animation
   ======================================== */

.tour-assistant {
    animation: assistant-enter 0.4s ease-out;
}

@keyframes assistant-enter {
    0% {
        opacity: 0;
        transform: translateY(20px) scale(0.8);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* Override entry animation with state animation after entry */
.tour-assistant.state-idle {
    animation: assistant-enter 0.4s ease-out, assistant-float 3s ease-in-out 0.4s infinite;
}