/**
 * GoPixelArt - 认证页面像素风小精灵样式
 * 纯 CSS3 实现的交互式角色
 */

/* ==================== 角色容器 ==================== */
.auth-mascot {
    position: relative;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    cursor: pointer;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}

/* 替换 auth-logo 为小精灵 */
.auth-logo.has-mascot {
    width: auto;
    height: auto;
    min-width: 80px;
    min-height: 80px;
    background: none !important;
    box-shadow: none !important;
    padding: 0;
    overflow: visible;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: none !important;
}

.auth-logo.has-mascot > svg,
.auth-logo.has-mascot > img {
    display: none;
}

/* ==================== 角色身体容器 ==================== */
.mascot-body {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    animation: mascotBreathe 3s ease-in-out infinite;
    margin-top: 8px; /* 给天线留空间 */
}

/* ==================== 天线 ==================== */
.mascot-antenna {
    position: absolute;
    width: 6px;
    height: 16px;
    background: linear-gradient(180deg, #5856D6 0%, #007AFF 100%);
    border-radius: 3px;
    top: -12px;
    transition: transform 0.3s var(--ease-spring, cubic-bezier(0.175, 0.885, 0.32, 1.275));
}

.mascot-antenna.left {
    left: 12px;
    transform: rotate(-15deg);
}

.mascot-antenna.right {
    right: 12px;
    transform: rotate(15deg);
}

.mascot-antenna::after {
    content: '';
    position: absolute;
    top: -4px;
    left: 50%;
    transform: translateX(-50%);
    width: 8px;
    height: 8px;
    background: #5856D6;
    border-radius: 2px;
    box-shadow: 0 0 8px rgba(88, 86, 214, 0.6);
}

/* 天线弹跳动画 */
.mascot-body.happy .mascot-antenna {
    animation: antennaBounce 0.5s ease-in-out;
}

.mascot-body.sleepy .mascot-antenna {
    transform: rotate(0deg) translateY(4px);
}

/* ==================== 像素风头部 ==================== */
.mascot-head {
    width: 64px;
    height: 56px;
    background: var(--auth-primary-gradient, linear-gradient(135deg, #007AFF 0%, #5856D6 100%));
    border-radius: 10px;
    position: relative;
    box-shadow: 
        0 4px 16px rgba(0, 122, 255, 0.3),
        inset 0 2px 0 rgba(255, 255, 255, 0.2);
    transition: transform 0.3s var(--ease-out, ease-out), box-shadow 0.3s ease;
}

/* 头部高光 */
.mascot-head::before {
    content: '';
    position: absolute;
    top: 4px;
    left: 6px;
    right: 6px;
    height: 8px;
    background: linear-gradient(180deg, rgba(255,255,255,0.3) 0%, transparent 100%);
    border-radius: 6px 6px 0 0;
}

/* 头部底部像素感 */
.mascot-head::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 8px;
    right: 8px;
    height: 4px;
    background: rgba(0, 0, 0, 0.1);
    border-radius: 0 0 4px 4px;
}

/* ==================== 脸部容器 ==================== */
.mascot-face {
    position: absolute;
    top: 12px;
    left: 0;
    right: 0;
    bottom: 0;
}

/* ==================== 像素眼睛 ==================== */
.mascot-eye {
    position: absolute;
    width: 14px;
    height: 14px;
    background: white;
    border-radius: 3px;
    top: 8px;
    overflow: hidden;
    transition: all 0.15s ease;
    box-shadow: inset 0 -2px 0 rgba(0, 0, 0, 0.05);
}

.mascot-eye.left {
    left: 12px;
}

.mascot-eye.right {
    right: 12px;
}

/* 瞳孔 */
.mascot-pupil {
    position: absolute;
    width: 6px;
    height: 6px;
    background: #1C1C1E;
    border-radius: 2px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    transition: all 0.1s ease-out;
}

/* 瞳孔高光 */
.mascot-pupil::after {
    content: '';
    position: absolute;
    top: 1px;
    right: 1px;
    width: 2px;
    height: 2px;
    background: white;
    border-radius: 1px;
}

/* 眨眼状态 */
.mascot-eye.blink {
    height: 3px;
    background: #1C1C1E;
    border-radius: 2px;
}

.mascot-eye.blink .mascot-pupil {
    opacity: 0;
}

/* 向下看 */
.mascot-body.look-down .mascot-pupil {
    transform: translate(-50%, 20%);
}

/* 捂眼状态 - 眼睛变成线 */
.mascot-body.cover-eyes .mascot-eye {
    height: 4px;
    background: #1C1C1E;
    border-radius: 2px;
}

.mascot-body.cover-eyes .mascot-pupil {
    opacity: 0;
}

/* 睡觉状态 - 半闭眼 */
.mascot-body.sleepy .mascot-eye {
    height: 6px;
    border-radius: 2px;
}

.mascot-body.sleepy .mascot-pupil {
    opacity: 0;
}

/* 悲伤眼睛 - 略微下垂 */
.mascot-body.sad .mascot-eye.left {
    transform: rotate(8deg);
}

.mascot-body.sad .mascot-eye.right {
    transform: rotate(-8deg);
}

/* ==================== 腮红 ==================== */
.mascot-blush {
    position: absolute;
    width: 8px;
    height: 6px;
    background: rgba(255, 154, 162, 0);
    border-radius: 2px;
    top: 24px;
    transition: all 0.3s ease;
}

.mascot-blush.left {
    left: 6px;
}

.mascot-blush.right {
    right: 6px;
}

/* 害羞时腮红显现 */
.mascot-body.shy .mascot-blush {
    background: rgba(255, 154, 162, 0.8);
    width: 10px;
    height: 8px;
}

/* ==================== 嘴巴 ==================== */
.mascot-mouth {
    position: absolute;
    bottom: 8px;
    left: 50%;
    transform: translateX(-50%);
    width: 12px;
    height: 4px;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 0 0 4px 4px;
    transition: all 0.3s ease;
}

/* 微笑 */
.mascot-body.happy .mascot-mouth {
    width: 16px;
    height: 8px;
    border-radius: 0 0 8px 8px;
    background: rgba(0, 0, 0, 0.25);
}

/* 大笑 - 露齿 */
.mascot-body.laugh .mascot-mouth {
    width: 20px;
    height: 12px;
    border-radius: 0 0 10px 10px;
    background: #1C1C1E;
}

.mascot-body.laugh .mascot-mouth::after {
    content: '';
    position: absolute;
    bottom: 2px;
    left: 50%;
    transform: translateX(-50%);
    width: 14px;
    height: 4px;
    background: white;
    border-radius: 2px;
}

/* 悲伤 */
.mascot-body.sad .mascot-mouth {
    width: 10px;
    height: 6px;
    border-radius: 6px 6px 0 0;
    background: rgba(0, 0, 0, 0.3);
}

/* 睡觉 - O形 */
.mascot-body.sleepy .mascot-mouth {
    width: 8px;
    height: 8px;
    border-radius: 50%;
}

/* ==================== 手臂 ==================== */
.mascot-arm {
    position: absolute;
    width: 12px;
    height: 20px;
    background: var(--auth-primary-gradient, linear-gradient(135deg, #007AFF 0%, #5856D6 100%));
    border-radius: 4px;
    top: 20px;
    transition: all 0.3s var(--ease-spring, cubic-bezier(0.175, 0.885, 0.32, 1.275));
    box-shadow: 0 2px 8px rgba(0, 122, 255, 0.2);
}

.mascot-arm.left {
    left: -16px;
    transform-origin: top right;
}

.mascot-arm.right {
    right: -16px;
    transform-origin: top left;
}

/* 捂眼动作 */
.mascot-body.cover-eyes .mascot-arm.left {
    transform: rotate(60deg) translateX(8px) translateY(-8px);
}

.mascot-body.cover-eyes .mascot-arm.right {
    transform: rotate(-60deg) translateX(-8px) translateY(-8px);
}

/* 挥手动作 */
.mascot-body.wave .mascot-arm.right {
    animation: waveHand 0.6s ease-in-out 3;
}

/* 开心时手臂上扬 */
.mascot-body.happy .mascot-arm {
    transform: rotate(0deg) translateY(-4px);
}

/* ==================== 气泡 ==================== */
.mascot-bubble {
    position: absolute;
    top: -8px;
    left: calc(100% + 8px);
    transform: scale(0);
    transform-origin: left center;
    background: white;
    padding: 8px 14px;
    border-radius: 14px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12);
    white-space: nowrap;
    opacity: 0;
    transition: all 0.3s var(--ease-spring, cubic-bezier(0.175, 0.885, 0.32, 1.275));
    z-index: 20;
    font-size: 13px;
    color: #1C1C1E;
}

/* 气泡尾巴 - 指向左边 */
.mascot-bubble::after {
    content: '';
    position: absolute;
    top: 50%;
    left: -8px;
    transform: translateY(-50%);
    width: 0;
    height: 0;
    border-top: 8px solid transparent;
    border-bottom: 8px solid transparent;
    border-right: 10px solid white;
}

/* 气泡显示 */
.mascot-bubble.show {
    opacity: 1;
    transform: scale(1);
}

/* 气泡颜色变体 */
.mascot-bubble.happy {
    background: linear-gradient(135deg, #E8F5E9 0%, #C8E6C9 100%);
}

.mascot-bubble.happy::after {
    border-right-color: #C8E6C9;
}

.mascot-bubble.sad {
    background: linear-gradient(135deg, #FFEBEE 0%, #FFCDD2 100%);
}

.mascot-bubble.sad::after {
    border-right-color: #FFCDD2;
}

.mascot-bubble.shy {
    background: linear-gradient(135deg, #FCE4EC 0%, #F8BBD9 100%);
}

.mascot-bubble.shy::after {
    border-right-color: #F8BBD9;
}

.mascot-bubble.thinking {
    background: linear-gradient(135deg, #EDE7F6 0%, #D1C4E9 100%);
}

.mascot-bubble.thinking::after {
    border-right-color: #D1C4E9;
}

/* Zzz 睡觉气泡 */
.mascot-zzz {
    position: absolute;
    top: -8px;
    right: -16px;
    font-size: 14px;
    color: var(--auth-text-muted, #8E8E93);
    opacity: 0;
    animation: zzzFloat 2s ease-in-out infinite;
    pointer-events: none;
}

.mascot-body.sleepy .mascot-zzz {
    opacity: 1;
}

/* ==================== 动画关键帧 ==================== */

/* 呼吸动画 */
@keyframes mascotBreathe {
    0%, 100% { transform: scale(1) translateY(0); }
    50% { transform: scale(1.02) translateY(-2px); }
}

/* 摇头动画 */
@keyframes headShake {
    0%, 100% { transform: rotate(0deg); }
    20% { transform: rotate(-12deg); }
    40% { transform: rotate(10deg); }
    60% { transform: rotate(-8deg); }
    80% { transform: rotate(6deg); }
}

/* 弹跳动画 */
@keyframes headBounce {
    0%, 100% { transform: scale(1) translateY(0); }
    30% { transform: scale(1.1, 0.9) translateY(0); }
    50% { transform: scale(0.95, 1.05) translateY(-12px); }
    70% { transform: scale(1.02, 0.98) translateY(-4px); }
}

/* 开心跳舞 */
@keyframes headDance {
    0%, 100% { transform: rotate(0deg) translateY(0); }
    25% { transform: rotate(-8deg) translateY(-6px); }
    50% { transform: rotate(0deg) translateY(0); }
    75% { transform: rotate(8deg) translateY(-6px); }
}

/* 睡觉摇晃 */
@keyframes headSleepy {
    0%, 100% { transform: rotate(0deg); }
    50% { transform: rotate(5deg); }
}

/* 挥手 */
@keyframes waveHand {
    0%, 100% { transform: rotate(0deg); }
    25% { transform: rotate(-25deg); }
    75% { transform: rotate(15deg); }
}

/* 天线弹跳 */
@keyframes antennaBounce {
    0%, 100% { transform: rotate(var(--antenna-rotate, 0deg)) scaleY(1); }
    50% { transform: rotate(var(--antenna-rotate, 0deg)) scaleY(1.3); }
}

/* Zzz 浮动 */
@keyframes zzzFloat {
    0%, 100% { 
        opacity: 0; 
        transform: translateY(0) scale(0.8); 
    }
    50% { 
        opacity: 1; 
        transform: translateY(-12px) scale(1); 
    }
}

/* 快速眨眼 */
@keyframes rapidBlink {
    0%, 20%, 40%, 60%, 80%, 100% { height: 14px; }
    10%, 30%, 50%, 70%, 90% { height: 3px; }
}

/* ==================== 状态类动画 ==================== */

.mascot-body.clicked {
    animation: headBounce 0.5s var(--ease-spring, cubic-bezier(0.175, 0.885, 0.32, 1.275));
}

.mascot-body.shake {
    animation: headShake 0.6s ease-in-out;
}

.mascot-body.dance {
    animation: headDance 0.8s ease-in-out 2;
}

.mascot-body.sleepy {
    animation: headSleepy 3s ease-in-out infinite;
}

/* 快速眨眼 - 悲伤时 */
.mascot-body.sad .mascot-eye {
    animation: rapidBlink 1s ease-in-out;
}

/* ==================== 暗色模式 ==================== */
[data-theme="dark"] .mascot-head {
    box-shadow: 
        0 4px 20px rgba(0, 122, 255, 0.4),
        inset 0 2px 0 rgba(255, 255, 255, 0.15);
}

[data-theme="dark"] .mascot-bubble {
    background: rgba(44, 44, 46, 0.95);
    color: var(--auth-text-primary, #FFFFFF);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

[data-theme="dark"] .mascot-bubble::after {
    border-right-color: rgba(44, 44, 46, 0.95);
}

[data-theme="dark"] .mascot-bubble.happy {
    background: linear-gradient(135deg, rgba(52, 199, 89, 0.2) 0%, rgba(48, 209, 88, 0.3) 100%);
}

[data-theme="dark"] .mascot-bubble.happy::after {
    border-right-color: rgba(48, 209, 88, 0.3);
}

[data-theme="dark"] .mascot-bubble.sad {
    background: linear-gradient(135deg, rgba(255, 59, 48, 0.2) 0%, rgba(255, 69, 58, 0.3) 100%);
}

[data-theme="dark"] .mascot-bubble.sad::after {
    border-right-color: rgba(255, 69, 58, 0.3);
}

[data-theme="dark"] .mascot-pupil {
    background: #FFFFFF;
}

[data-theme="dark"] .mascot-pupil::after {
    background: #1C1C1E;
}

[data-theme="dark"] .mascot-eye.blink,
[data-theme="dark"] .mascot-body.cover-eyes .mascot-eye {
    background: #FFFFFF;
}

/* ==================== 管理后台特殊样式 ==================== */
.auth-logo-admin.has-mascot .mascot-head {
    background: linear-gradient(135deg, #1e293b 0%, #475569 100%);
    box-shadow: 
        0 4px 16px rgba(30, 41, 59, 0.4),
        inset 0 2px 0 rgba(255, 255, 255, 0.1);
}

.auth-logo-admin.has-mascot .mascot-antenna {
    background: linear-gradient(180deg, #475569 0%, #1e293b 100%);
}

.auth-logo-admin.has-mascot .mascot-antenna::after {
    background: #475569;
    box-shadow: 0 0 8px rgba(71, 85, 105, 0.6);
}

.auth-logo-admin.has-mascot .mascot-arm {
    background: linear-gradient(135deg, #1e293b 0%, #475569 100%);
    box-shadow: 0 2px 8px rgba(30, 41, 59, 0.3);
}

/* ==================== 响应式 ==================== */
@media (max-width: 640px) {
    .auth-mascot {
        transform: scale(0.9);
    }
    
    .mascot-bubble {
        font-size: 13px;
        padding: 8px 14px;
    }
}

@media (max-width: 380px) {
    .auth-mascot {
        transform: scale(0.8);
    }
}

/* ==================== 无障碍 - 减少动画 ==================== */
@media (prefers-reduced-motion: reduce) {
    .mascot-body,
    .mascot-head,
    .mascot-eye,
    .mascot-arm,
    .mascot-antenna,
    .mascot-bubble {
        animation: none !important;
        transition-duration: 0.01ms !important;
    }
}

/* ==================== 降级 - 无动画支持 ==================== */
.auth-mascot.no-animation .mascot-body,
.auth-mascot.no-animation .mascot-zzz {
    animation: none !important;
}