/* ============================================
   全站过渡动画库
   ============================================ */

/* ---------- 基础入场动画（滚动触发） ---------- */
.reveal {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1),
                transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: opacity, transform;
}
.reveal.revealed {
    opacity: 1;
    transform: translateY(0);
}
.reveal-left {
    opacity: 0;
    transform: translateX(-50px);
    transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1),
                transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}
.reveal-left.revealed {
    opacity: 1;
    transform: translateX(0);
}
.reveal-right {
    opacity: 0;
    transform: translateX(50px);
    transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1),
                transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}
.reveal-right.revealed {
    opacity: 1;
    transform: translateX(0);
}
.reveal-scale {
    opacity: 0;
    transform: scale(0.85);
    transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1),
                transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}
.reveal-scale.revealed {
    opacity: 1;
    transform: scale(1);
}

/* 依次延迟入场 */
.stagger > * {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1),
                transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.stagger.revealed > * {
    opacity: 1;
    transform: translateY(0);
}
.stagger.revealed > *:nth-child(1) { transition-delay: 0.05s; }
.stagger.revealed > *:nth-child(2) { transition-delay: 0.12s; }
.stagger.revealed > *:nth-child(3) { transition-delay: 0.19s; }
.stagger.revealed > *:nth-child(4) { transition-delay: 0.26s; }
.stagger.revealed > *:nth-child(5) { transition-delay: 0.33s; }
.stagger.revealed > *:nth-child(6) { transition-delay: 0.40s; }
.stagger.revealed > *:nth-child(7) { transition-delay: 0.47s; }
.stagger.revealed > *:nth-child(8) { transition-delay: 0.54s; }
.stagger.revealed > *:nth-child(n+9) { transition-delay: 0.6s; }

/* ---------- 页面加载入场 ---------- */
@keyframes pageFadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}
.page-enter {
    animation: pageFadeIn 0.6s cubic-bezier(0.16, 1, 0.3, 1) both;
}

/* Hero标题逐行入场 */
@keyframes heroTitleIn {
    from { opacity: 0; transform: translateY(30px); filter: blur(8px); }
    to { opacity: 1; transform: translateY(0); filter: blur(0); }
}
.hero-title-anim {
    animation: heroTitleIn 1s cubic-bezier(0.16, 1, 0.3, 1) 0.2s both;
}
.hero-sub-anim {
    animation: heroTitleIn 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.5s both;
}
.hero-search-anim {
    animation: heroTitleIn 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.7s both;
}
.hero-stats-anim {
    animation: heroTitleIn 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.9s both;
}

/* ---------- 图片淡入 ---------- */
.img-fade {
    opacity: 0;
    transition: opacity 0.6s ease;
}
.img-fade.loaded {
    opacity: 1;
}

/* ---------- 导航栏滚动效果 ---------- */
/* 滚动后不再固定为近黑色，改用主题玻璃表面 token，跟随框架整体主题色：
   暗色：--glass2 / --glass（浅白玻璃叠在深色页面上，与静态顶栏同系）；
   亮色：theme.css 的 --glass2 = rgba(255,255,255,.92)，即白色玻璃顶栏 */
header.nav-scrolled {
    background: var(--glass2, rgba(255, 255, 255, 0.12)) !important;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.3);
}

/* ---------- 按钮涟漪效果 ---------- */
.btn-ripple {
    position: relative;
    overflow: hidden;
}
.btn-ripple::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    background: rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    transition: width 0.5s ease, height 0.5s ease, opacity 0.5s ease;
    opacity: 0;
}
.btn-ripple:active::after {
    width: 300px;
    height: 300px;
    opacity: 1;
    transition: 0s;
}

/* ---------- 卡片悬浮光扫效果 ---------- */
.card-shine {
    position: relative;
    overflow: hidden;
}
.card-shine::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 60%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.06), transparent);
    transition: left 0.6s ease;
    z-index: 1;
    pointer-events: none;
}
.card-shine:hover::before {
    left: 130%;
}

/* ---------- 数字动画 ---------- */
.num-animate {
    display: inline-block;
}

/* ---------- 平滑滚动 ---------- */
html {
    scroll-behavior: smooth;
}

/* ---------- 下拉/展开动画 ---------- */
@keyframes slideDown {
    from { opacity: 0; transform: translateY(-10px); max-height: 0; }
    to { opacity: 1; transform: translateY(0); max-height: 500px; }
}
.slide-down {
    animation: slideDown 0.4s cubic-bezier(0.16, 1, 0.3, 1) both;
    overflow: hidden;
}

/* ---------- 呼吸光晕 ---------- */
@keyframes glowPulse {
    0%, 100% { box-shadow: 0 0 15px rgba(245, 158, 11, 0.2); }
    50% { box-shadow: 0 0 30px rgba(245, 158, 11, 0.45); }
}
.glow-pulse {
    animation: glowPulse 2.5s ease-in-out infinite;
}

/* ---------- 浮动 ---------- */
@keyframes floatY {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-8px); }
}
.float-y {
    animation: floatY 3s ease-in-out infinite;
}

/* ---------- 减少动画（尊重系统设置） ---------- */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
    .reveal, .reveal-left, .reveal-right, .reveal-scale {
        opacity: 1 !important;
        transform: none !important;
    }
}