/* ==========================================================================
   导航栏与骨架布局 (layout.css) - 增加少儿趣味动效版
   ========================================================================== */

/* ------------------ 定义动画关键帧 ------------------ */
/* 1. 元素呼吸/心跳动效 */
@keyframes heartbeat {
    0% { transform: scale(1); }
    50% { transform: scale(1.05); }
    100% { transform: scale(1); }
}

/* 2. Logo小图标摇摆动效 */
@keyframes wobble {
    0% { transform: rotate(0deg) scale(1); }
    25% { transform: rotate(-15deg) scale(1.2); }
    50% { transform: rotate(15deg) scale(1.2); }
    75% { transform: rotate(-10deg) scale(1.2); }
    100% { transform: rotate(0deg) scale(1); }
}

/* ------------------ 基础布局与头部 ------------------ */
.site-header {
    background: rgba(255, 255, 255, 0.95); backdrop-filter: blur(10px); border-bottom: 2px solid var(--border-color);
    position: sticky; top: 0; z-index: 1000; height: 70px; display: flex; align-items: center;
}
.main-nav { width: 100%; max-width: 1200px; margin: 0 auto; display: flex; justify-content: space-between; align-items: center; padding: 0 20px; }

/* Logo 动效 */
.site-logo { display: flex; align-items: center; text-decoration: none; }
.site-logo i { 
    font-size: 1.8rem; color: var(--color-primary); margin-right: 8px; 
    display: inline-block; /* 必须是block或inline-block才能应用transform */
    transition: transform 0.3s ease; 
}
.site-logo span { font-size: 1.4rem; font-weight: bold; color: var(--color-primary); }
.site-logo:hover i { animation: wobble 0.6s ease-in-out; } /* 鼠标移入Logo时图标摇摆 */

/* 桌面端导航动效 */
.desktop-nav { display: flex; gap: 20px; align-items: center; }
.nav-link { 
    text-decoration: none; color: var(--text-main); font-weight: 600; 
    display: inline-block; 
    /* 使用贝塞尔曲线，实现类似果冻的Q弹回弹效果 */
    transition: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55); 
}
.nav-link:hover { 
    color: var(--color-primary); 
    transform: translateY(-5px) scale(1.1); /* 向上浮动并稍微放大 */
}

/* 桌面端按钮组 */
.pc-auth-buttons, .pc-user-group { display: flex; align-items: center; gap: 15px; }
.pc-btn {
    display: inline-flex; justify-content: center; align-items: center;
    height: 38px; padding: 0 20px; border-radius: 20px; font-weight: bold; 
    text-decoration: none; transition: 0.3s; font-size: 0.95rem;
}
.pc-btn-text { color: var(--color-primary); padding: 0 10px; }
.pc-btn-text:hover { background: var(--bg-hover); transform: scale(1.05); } /* 文字按钮轻微放大 */

.pc-btn-solid { 
    background: var(--color-primary); color: var(--text-light); border: 2px solid var(--color-primary); 
    animation: heartbeat 2s infinite; /* 增加呼吸灯效果，吸引小孩点击 */
}
.pc-btn-solid:hover { 
    background: var(--color-primary-dark); border-color: var(--color-primary-dark); 
    transform: translateY(-3px) scale(1.05); /* 悬浮时停止呼吸，改为上浮变大 */
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.15); 
    animation: none; /* 悬浮时取消呼吸动画 */
}

.pc-btn-outline { color: var(--color-primary); border: 2px solid var(--color-primary); background: transparent; transition: all 0.3s ease; }
.pc-btn-outline:hover { background: var(--bg-hover); transform: translateY(-2px); }
.pc-logout-link { color: var(--text-danger); text-decoration: none; font-size: 0.9rem; font-weight: bold; transition: 0.3s;}
.pc-logout-link:hover { transform: scale(1.1); }

/* ------------------ 移动端菜单 ------------------ */
.menu-overlay {
    position: fixed !important; top: 0 !important; left: 0 !important; width: 100% !important; height: 100% !important;
    background: rgba(0, 0, 0, 0.5) !important; z-index: 2000 !important; display: none; backdrop-filter: blur(2px);
}
.menu-overlay.active { display: block; }

.mobile-menu {
    position: fixed !important; top: 0 !important; right: 0 !important; width: 280px !important; height: 100vh !important;
    background: var(--bg-card) !important; z-index: 9999 !important; transform: translateX(100%); transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.1); /* 抽屉滑出时带有一点点回弹 */
    display: flex; flex-direction: column; box-shadow: -10px 0 30px rgba(0,0,0,0.1);
}
.mobile-menu.open { transform: translateX(0); }

.mobile-menu-header {
    padding: 20px !important; border-bottom: 1px solid var(--border-color) !important;
    display: flex !important; flex-direction: row !important; justify-content: space-between !important; align-items: center !important;
}
.mobile-logo { display: flex !important; align-items: center !important; font-weight: bold; color: var(--color-primary); font-size: 1.3rem; margin: 0 !important; }
.close-menu { 
    background: var(--bg-body) !important; border: none !important; width: 36px !important; height: 36px !important; 
    display: flex !important; justify-content: center !important; align-items: center !important; 
    border-radius: 8px !important; color: var(--color-primary) !important; cursor: pointer !important;
    transition: transform 0.3s ease;
}
.close-menu:hover { transform: rotate(90deg); } /* 关闭按钮旋转特效 */

.mobile-menu-content { padding: 10px 0; overflow-y: auto; flex: 1; }

.mobile-nav-link { 
    display: flex !important; align-items: center !important; padding: 18px 25px; 
    border-bottom: 1px solid var(--bg-body); font-size: 1.1rem; color: var(--text-main); text-decoration: none; font-weight: 600; 
    transition: all 0.3s ease; /* 手机端链接动效 */
}
.mobile-nav-link i { margin-right: 12px; color: var(--color-primary); width: 24px; text-align: center; transition: transform 0.3s ease; }

/* 手机端菜单项点击/悬浮时的果冻效果 */
.mobile-nav-link:hover, .mobile-nav-link:active {
    padding-left: 35px; /* 点击时文字向右滑动 */
    color: var(--color-primary);
    background: var(--bg-hover);
}
.mobile-nav-link:hover i, .mobile-nav-link:active i {
    transform: scale(1.3) rotate(-10deg); /* 图标放大并倾斜 */
}

/* 手机底栏按钮 */
.mobile-auth-footer { padding: 25px 20px; border-top: 1px solid var(--border-color); margin-top: auto; }
.mobile-auth-buttons { display: flex; gap: 15px; }
.mobile-btn {
    flex: 1; display: flex; justify-content: center; align-items: center;
    height: 44px; border-radius: 8px; font-size: 1rem; font-weight: bold; text-decoration: none; transition: 0.3s;
}
.mobile-btn-outline { border: 2px solid var(--color-primary); color: var(--color-primary); background: transparent; }
.mobile-btn-solid { 
    background: var(--color-primary); color: var(--text-light); border: 2px solid var(--color-primary); 
    animation: heartbeat 2.5s infinite; /* 手机端实心按钮也加入呼吸效果 */
}
.mobile-btn-solid:active { transform: scale(0.95); animation: none; } /* 手机端点击时下压反馈 */

.logout-btn { color: var(--text-danger) !important; border-bottom: none !important; }
.mobile-menu-toggle { background: none; border: none; font-size: 1.6rem; color: var(--color-primary); cursor: pointer; transition: transform 0.2s; }
.mobile-menu-toggle:active { transform: scale(0.8); } /* 汉堡菜单点击缩放反馈 */

/* ------------------ 页脚 ------------------ */
.site-footer {
    background: var(--bg-card);
    border-top: 1px solid var(--border-color);
    padding: 30px 0;
    margin-top: 40px; 
}

.footer-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap; 
    gap: 15px;
}

.footer-info p { margin: 5px 0; color: var(--text-main); font-size: 0.95rem; }
.footer-slogan { color: var(--text-muted); font-size: 0.85rem !important; }

.footer-badge { color: var(--color-primary); font-weight: 600; font-size: 0.9rem; transition: transform 0.3s; display: inline-block; }
.footer-badge:hover { transform: scale(1.1); } /* 悬浮徽章放大 */
.footer-badge i { color: #ff6b6b; margin-right: 5px; animation: heartbeat 1.5s infinite; } /* 页脚小爱心跳动 */

/* 响应式适配 */
@media (max-width: 768px) {
    .footer-container {
        flex-direction: column;
        text-align: center;
    }
    .site-footer {
        padding: 20px 0;
    }
}