/* === EVE ROBOT AVATAR — robot.css === */

.robot-scene {
    position: relative;
    width: 320px;
    height: 390px;
    display: flex;
    justify-content: center;
    align-items: center;
    perspective: 900px;
    flex-shrink: 0;
}

/* Blue ambient glow (EVE's characteristic blue aura) */
.robot-ambient-glow {
    position: absolute;
    width: 250px;
    height: 250px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(0,160,255,0.32) 0%, rgba(0,80,200,0.10) 55%, transparent 70%);
    filter: blur(35px);
    animation: glowPulse 4s ease-in-out infinite;
    pointer-events: none;
    transition: background 0.5s ease;
}

@keyframes glowPulse {
    0%, 100% { transform: scale(1);   opacity: 0.75; }
    50%       { transform: scale(1.2); opacity: 1;    }
}

/* 3D wrapper — the whole body floats */
.robot-3d-wrapper {
    position: relative;
    width: 310px;
    height: 370px;
    transform-style: preserve-3d;
    animation: eveFloat 7s ease-in-out infinite;
    will-change: transform;
}

@keyframes eveFloat {
    0%,100% { transform: translateY(0px)    rotate(0deg); }
    30%      { transform: translateY(-16px)  rotate(0.4deg); }
    65%      { transform: translateY(-10px)  rotate(-0.3deg); }
    85%      { transform: translateY(-20px)  rotate(0.2deg); }
}

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

/* ── ARM ANIMATIONS ── */
/* EVE's fins: slow, calm vertical float — no flapping or stretching */
#leftArm  { transform-origin: 70px  242px; animation: armIdleL 6s   ease-in-out infinite; }
#rightArm { transform-origin: 230px 242px; animation: armIdleR 6.5s ease-in-out infinite; }

@keyframes armIdleL {
    0%,100% { transform: translateY(0px)  rotate(0deg); }
    50%      { transform: translateY(5px)  rotate(-2deg); }
}
@keyframes armIdleR {
    0%,100% { transform: translateY(0px)  rotate(0deg); }
    50%      { transform: translateY(5px)  rotate(2deg);  }
}

/* Speaking: a calm, gentle outward tilt — not a sweep */
.robot-scene.speaking #leftArm  { animation: armSpeakL 1.8s ease-in-out infinite alternate; }
.robot-scene.speaking #rightArm { animation: armSpeakR 1.8s ease-in-out infinite alternate; }
@keyframes armSpeakL { 0% { transform:rotate(0deg) translateY(0);  } 100% { transform:rotate(-8deg)  translateY(-3px); } }
@keyframes armSpeakR { 0% { transform:rotate(0deg) translateY(0);  } 100% { transform:rotate(8deg)   translateY(-3px); } }

/* Listening: barely perceptible inward lean */
.robot-scene.listening #leftArm  { animation: armListenL 2.5s ease-in-out infinite alternate; }
.robot-scene.listening #rightArm { animation: armListenR 2.5s ease-in-out infinite alternate; }
@keyframes armListenL { 0% { transform:rotate(0deg); } 100% { transform:rotate(-4deg) translateY(2px); } }
@keyframes armListenR { 0% { transform:rotate(0deg); } 100% { transform:rotate(4deg)  translateY(2px); } }

/* ── HEAD ANIMATIONS ── */
#robotHead { transform-origin: 150px 86px; animation: headIdle 5.5s ease-in-out infinite; }
@keyframes headIdle {
    0%,100% { transform: rotate(0deg)    translateY(0);   }
    25%      { transform: rotate(-1.5deg) translateY(-2px); }
    60%      { transform: rotate(2deg)    translateY(2px);  }
    85%      { transform: rotate(-1deg)   translateY(-1px); }
}
.robot-scene.speaking #robotHead  { animation: headTalk   0.5s ease-in-out infinite alternate; }
.robot-scene.listening #robotHead { animation: headListen 2s   ease-in-out infinite alternate; }
@keyframes headTalk   { 0% { transform:rotate(0deg) translateY(0); }     100% { transform:rotate(2deg)  translateY(-5px); } }
@keyframes headListen { 0% { transform:rotate(0deg) translateY(0); }     100% { transform:rotate(-3.5deg) translateY(2px); } }

/* ── EYE SCAN-LINE ANIMATIONS ── */
#eyeMoverL, #eyeMoverR { animation: eyeIdle 3.5s ease-in-out infinite; }
@keyframes eyeIdle { 0%,100% { opacity:0.85; } 50% { opacity:1; } }

.scan-lines { animation: scanScroll 2s linear infinite; }
@keyframes scanScroll { 0% { transform:translateY(0); } 100% { transform:translateY(-8px); } }

/* Speaking: bright + fast scan */
.robot-scene.speaking #eyeMoverL,
.robot-scene.speaking #eyeMoverR { animation: eyeSpeak 0.25s ease-in-out infinite alternate; }
@keyframes eyeSpeak {
    0%   { opacity:0.9; filter:brightness(1.1) saturate(1.2); }
    100% { opacity:1;   filter:brightness(1.7) saturate(1.6); }
}
.robot-scene.speaking .scan-lines { animation: scanScroll 0.3s linear infinite; }

/* Listening: gentle pulse */
.robot-scene.listening #eyeMoverL,
.robot-scene.listening #eyeMoverR { animation: eyeListen 1.2s ease-in-out infinite alternate; }
@keyframes eyeListen {
    0%   { opacity:0.85; filter:brightness(1);    }
    100% { opacity:1;    filter:brightness(1.3);  }
}

/* ── GLOW STATE COLORS ── */
.robot-scene.idle     .robot-ambient-glow { background: radial-gradient(circle, rgba(0,150,255,0.30) 0%, rgba(0,70,180,0.08) 55%, transparent 70%); }
.robot-scene.speaking .robot-ambient-glow { background: radial-gradient(circle, rgba(0,220,255,0.58) 0%, rgba(0,130,255,0.22) 50%, transparent 70%); animation: glowPulse 0.22s ease-in-out infinite; }
.robot-scene.listening .robot-ambient-glow { background: radial-gradient(circle, rgba(0,160,255,0.50) 0%, rgba(0,90,210,0.18) 50%, transparent 70%); animation: glowPulse 0.9s ease-in-out infinite; }

/* Ground shadow synced with float */
#groundShadow { animation: shadowEve 7s ease-in-out infinite; }
@keyframes shadowEve {
    0%,100% { opacity:0.28; }
    30%      { opacity:0.15; }
    85%      { opacity:0.12; }
}

/* ── RESPONSIVE ── */

/* Fluid sizing — robot scales with viewport */
.robot-scene {
    width: clamp(200px, 35vw, 320px);
    height: clamp(230px, 42vw, 390px);
}

.robot-3d-wrapper {
    width:  clamp(190px, 34vw, 310px);
    height: clamp(220px, 40vw, 370px);
}

/* Small phones */
@media (max-width: 480px) {
    .robot-scene      { width: 220px; height: 255px; }
    .robot-3d-wrapper { width: 210px; height: 242px; }
}

/* Very small phones */
@media (max-width: 350px) {
    .robot-scene      { width: 185px; height: 215px; }
    .robot-3d-wrapper { width: 175px; height: 205px; }
}

/* Landscape: shrink robot so UI fits vertically */
@media (max-height: 500px) and (orientation: landscape) {
    .robot-scene      { width: 180px; height: 210px; }
    .robot-3d-wrapper { width: 170px; height: 200px; }
    /* Faster float in landscape */
    @keyframes eveFloat {
        0%,100% { transform: translateY(0px);    }
        50%      { transform: translateY(-8px);   }
    }
}