/* ==========================================
   SVG CHARACTER STYLES & ANIMATION STATES
   ========================================== */

.char {
    transform-box: fill-box;
    transform-origin: bottom center;
    transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
    will-change: transform, opacity;
}

#purple {
    transform: skewX(calc(var(--mx, 0) * -5deg)) scaleY(calc(1 + var(--my, 0) * -0.04));
}
#black {
    transform: skewX(calc(var(--mx, 0) * -4deg)) scaleY(calc(1 + var(--my, 0) * -0.03));
}
#orange {
    transform: skewX(calc(var(--mx, 0) * -4deg)) scaleY(calc(1 + var(--my, 0) * -0.03));
}
#yellow {
    transform: skewX(calc(var(--mx, 0) * 3deg)) scaleY(calc(1 + var(--my, 0) * -0.03));
}

.face {
    transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    will-change: opacity;
}
.face-hidden, .face-visible, .face-happy { opacity: 0; pointer-events: none; }
.face-default { opacity: 1; }

.eye-tracker {
    transform: translate(calc(var(--mx, 0) * 5px), calc(var(--my, 0) * 3px));
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    will-change: transform;
}

.pupil {
    transform-box: fill-box;
    transform-origin: center;
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Email focus — lean hard right toward the form */
body.focus-email #purple,
.huddle-root.focus-email #purple { transform: skewX(-12deg) scaleY(1.04); }
body.focus-email #black,
.huddle-root.focus-email #black { transform: skewX(-8deg) scaleY(1.05); }
body.focus-email #yellow,
.huddle-root.focus-email #yellow { transform: skewX(-6deg) scaleY(1.02); }
body.focus-email #orange,
.huddle-root.focus-email #orange { transform: skewX(-6deg) scaleY(1.03); }

/* Password hidden — look away */
body.focus-password-hidden #purple,
.huddle-root.focus-password-hidden #purple { transform: skewX(12deg) scaleY(0.95); }
body.focus-password-hidden #black,
.huddle-root.focus-password-hidden #black { transform: skewX(8deg) scaleY(0.88); }
body.focus-password-hidden #yellow,
.huddle-root.focus-password-hidden #yellow { transform: skewX(10deg) scaleY(0.95); }
body.focus-password-hidden #orange,
.huddle-root.focus-password-hidden #orange { transform: skewX(6deg) scaleY(0.92); }

body.focus-password-hidden .faces,
.huddle-root.focus-password-hidden .faces {
    transform: translateX(-8px);
    transition: transform 0.5s ease-in-out;
}

body.focus-password-hidden .face-default,
body.focus-password-hidden .face-visible,
.huddle-root.focus-password-hidden .face-default,
.huddle-root.focus-password-hidden .face-visible { opacity: 0; }
body.focus-password-hidden .face-hidden,
.huddle-root.focus-password-hidden .face-hidden { opacity: 1; }

/* Password visible — curious lean */
body.focus-password-visible #purple,
.huddle-root.focus-password-visible #purple { transform: skewX(-18deg) scaleY(1.08); }
body.focus-password-visible #black,
.huddle-root.focus-password-visible #black { transform: skewX(-14deg) scaleY(1.1); }
body.focus-password-visible #yellow,
.huddle-root.focus-password-visible #yellow { transform: skewX(-10deg) scaleY(1.06); }
body.focus-password-visible #orange,
.huddle-root.focus-password-visible #orange { transform: skewX(-12deg) scaleY(1.07); }

body.focus-password-visible .eye-tracker,
.huddle-root.focus-password-visible .eye-tracker {
    transform: translate(10px, -2px) !important;
}

body.focus-password-visible .face-default,
body.focus-password-visible .face-hidden,
.huddle-root.focus-password-visible .face-default,
.huddle-root.focus-password-visible .face-hidden { opacity: 0; }
body.focus-password-visible .face-visible,
.huddle-root.focus-password-visible .face-visible { opacity: 1; }

body.focus-password-visible .pupil,
.huddle-root.focus-password-visible .pupil { transform: scale(1.5); }

/* Login fail */
body.login-fail .char,
.huddle-root.login-fail .char {
    animation: charShake 0.15s ease-in-out 4;
}
body.login-fail #purple,
.huddle-root.login-fail #purple { transform: scaleY(0.9); }
body.login-fail #black,
.huddle-root.login-fail #black { transform: scaleY(0.85); }
body.login-fail #yellow,
.huddle-root.login-fail #yellow { transform: scaleY(0.9); }
body.login-fail #orange,
.huddle-root.login-fail #orange { transform: scaleY(0.88); }

body.login-fail .face-default,
body.login-fail .face-visible,
.huddle-root.login-fail .face-default,
.huddle-root.login-fail .face-visible { opacity: 0; }
body.login-fail .face-hidden,
.huddle-root.login-fail .face-hidden { opacity: 1; }

@keyframes charShake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-6px); }
    75% { transform: translateX(6px); }
}

/* Login success */
body.login-success .face-default,
body.login-success .face-hidden,
body.login-success .face-visible,
.huddle-root.login-success .face-default,
.huddle-root.login-success .face-hidden,
.huddle-root.login-success .face-visible { opacity: 0; }
body.login-success .face-happy,
.huddle-root.login-success .face-happy { opacity: 1; }

body.login-success .char,
.huddle-root.login-success .char {
    animation: bounceDown 0.8s cubic-bezier(0.6, -0.28, 0.74, 0.05) forwards;
}
body.login-success #purple,
.huddle-root.login-success #purple { animation-delay: 0.1s; }
body.login-success #black,
.huddle-root.login-success #black { animation-delay: 0.2s; }
body.login-success #orange,
.huddle-root.login-success #orange { animation-delay: 0.3s; }
body.login-success #yellow,
.huddle-root.login-success #yellow { animation-delay: 0.4s; }

@keyframes bounceDown {
    0% { transform: scaleY(1) translateY(0); opacity: 1; }
    15% { transform: scaleY(1.15) translateY(-20px); opacity: 1; }
    35% { transform: scaleY(0.8) translateY(0); opacity: 1; }
    100% { transform: scaleY(0.5) translateY(250%); opacity: 0; }
}

.color-splash {
    position: fixed;
    border-radius: 50%;
    transform: scale(0);
    pointer-events: none;
    z-index: 9999;
    will-change: transform, opacity;
}

.color-splash.pop {
    animation: splashGrow 1.4s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

@keyframes splashGrow {
    0% { transform: scale(0); opacity: 1; }
    70% { opacity: 1; }
    100% { transform: scale(1); opacity: 1; }
}

.white-wipe {
    position: fixed;
    inset: 0;
    background: #fff;
    z-index: 10000;
    transform: translateX(-100%);
    pointer-events: none;
    will-change: transform;
}

.white-wipe.sweep {
    animation: wipeSweep 1.0s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

@keyframes wipeSweep {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(0%); }
}