/* ==========================================
   全局与基础优化
========================================== */

/* 自定义滚动条样式，让页面看起来更精致、专业 */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}
::-webkit-scrollbar-track {
    background: transparent;
}
::-webkit-scrollbar-thumb {
    background: #cbd5e1; /* Tailwind slate-300 */
    border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
    background: #94a3b8; /* Tailwind slate-400 */
}

/* ==========================================
   一、启动页特效 (Splash Screen)
========================================== */

/* 1. 深色渐变与微弱网格线背景 */
.splash-bg {
    background: linear-gradient(to bottom, #0B1120, #1A2A4A);
    /* 利用多重渐变绘制静态网格，rgba(255,255,255,0.03) 对应文档要求 */
    background-image: 
        linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
    background-size: 40px 40px; /* 网格大小 */
    background-position: center center;
}

/* 2. 呼吸灯光晕动画 (周期约4s无限循环) */
.breathing-light {
    animation: breathe 4s infinite ease-in-out;
}
@keyframes breathe {
    /* 注意：保留 HTML 中的 translate 居中属性，防止动画导致位置偏移 */
    0%, 100% { 
        opacity: 0.4; 
        transform: translate(-50%, -50%) scale(1); 
    }
    50% { 
        opacity: 1; 
        transform: translate(-50%, -50%) scale(1.15); 
    }
}

/* 3. 启动页元素入场动画 (模拟 framer-motion) */
.splash-title {
    opacity: 0;
    animation: fadeInUp 0.8s ease-out forwards;
}

.splash-subtitle {
    opacity: 0;
    animation: fadeIn 0.8s ease-out 0.2s forwards; /* 延迟 0.2s 出现 */
}

/* 4. 进度指示器填充动画 (3秒内从左到右填充) */
.progress-bar-fill {
    width: 100%;

}

/* ==========================================
   二、全局过渡与微动效 (模拟 framer-motion)
========================================== */

/* 页面切换时的基础淡入 */
.page-enter {
    animation: fadeIn 0.4s ease-out forwards;
}

/* 元素从下方淡入上浮 (如落地页的卡片) */
.fade-in-up {
    opacity: 0;
    animation: fadeInUp 0.6s ease-out forwards;
}

/* 配合 JavaScript 实现列表元素的交错出现 (Stagger effect) */
.delay-100 { animation-delay: 0.1s; }
.delay-200 { animation-delay: 0.2s; }
.delay-300 { animation-delay: 0.3s; }

/* 核心动画关键帧 */
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes fadeInUp {
    from { 
        opacity: 0; 
        transform: translateY(30px); 
    }
    to { 
        opacity: 1; 
        transform: translateY(0); 
    }
}

/* ==========================================
   三、Toast 轻提示动画
========================================== */

.toast-enter {
    animation: toastIn 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
.toast-exit {
    animation: toastOut 0.3s ease-in forwards;
}

@keyframes toastIn {
    from { opacity: 0; transform: translateY(-20px); }
    to { opacity: 1; transform: translateY(0); }
}
@keyframes toastOut {
    from { opacity: 1; transform: translateY(0); }
    to { opacity: 0; transform: translateY(-20px); }
}

/* ==========================================
   四、一些实用工具类
========================================== */

/* 模拟文件上传区域的虚线动画边缘（可选增强） */
.upload-zone:hover {
    border-color: #2563eb;
    background-color: #eff6ff;
}


/* 延迟入场动画，让三个卡片依次跳出 */
.delay-100 { animation-delay: 0.1s; }
.delay-200 { animation-delay: 0.2s; }


/* ==========================================
   全新版：视觉与动画 (去进度条版)
========================================== */

/* 启动页背景 */
.splash-bg {
    background: linear-gradient(to bottom, #0B1120, #1A2A4A);
    background-image: 
        linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
    background-size: 40px 40px;
    background-position: center center;
}

/* 呼吸灯效果 */
.breathing-light {
    animation: breathe 4s infinite ease-in-out;
}
@keyframes breathe {
    0%, 100% { opacity: 0.6; transform: translate(-50%, -50%) scale(1); }
    50% { opacity: 1; transform: translate(-50%, -50%) scale(1.15); }
}

/* 弹性 fadeInUp 入场动画 */
.fade-in-up {
    opacity: 0;
    animation: fadeInUpElastic 0.6s cubic-bezier(0.2, 0.9, 0.4, 1.1) forwards;
}
@keyframes fadeInUpElastic {
    from { opacity: 0; transform: translateY(30px); }
    to { opacity: 1; transform: translateY(0); }
}

/* 延迟控制 */
.delay-100 { animation-delay: 0.1s; }
.delay-200 { animation-delay: 0.2s; }
.delay-300 { animation-delay: 0.3s; }



/* ==========================================
   资讯页作为“门面页”的专属特效
========================================== */
.news-splash-hero {
    opacity: 0;
    /* 采用缩放+上浮的弹性入场动画，极具冲击力 */
    animation: zoomInFade 0.8s cubic-bezier(0.2, 0.9, 0.4, 1.1) forwards;
}

@keyframes zoomInFade {
    from { 
        opacity: 0; 
        transform: scale(0.9) translateY(20px); 
    }
    to { 
        opacity: 1; 
        transform: scale(1) translateY(0); 
    }
}

/* ==========================================
   新增视觉展示区（Visual Demo）定制动画
========================================== */

/* 1. 绿灯合规卡片周期性呼吸放大 */
.anim-pulse-scale {
    animation: pulseScale 5s ease-in-out infinite;
}
@keyframes pulseScale {
    0%, 90%, 100% { transform: scale(1); }
    95% { transform: scale(1.05); }
}

/* 2. 粒子沿路径飘移动画 (从左到右漂移并淡入淡出) */
.anim-particle-drift {
    animation: particleDrift 3s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}
@keyframes particleDrift {
    0% { transform: translate(0, 0); opacity: 0; }
    20% { opacity: 1; }
    80% { opacity: 1; }
    100% { transform: translate(60px, -20px); opacity: 0; }
}

/* 3. 国家选择器下划线循环进度动画 */
.anim-slide-width {
    animation: slideWidth 3s ease-in-out infinite;
}
@keyframes slideWidth {
    0% { width: 0%; left: 0; }
    50% { width: 100%; left: 0; }
    100% { width: 0%; left: 100%; }
}

/* 4. A4纸骨架屏波浪填充效果 */
.anim-wave-loading {
    background: linear-gradient(90deg, #f1f5f9 25%, #e2e8f0 50%, #f1f5f9 75%);
    background-size: 200% 100%;
    animation: waveLoading 2s infinite linear;
}
@keyframes waveLoading {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* 5. 绿色对勾弹性弹入 */
.anim-spring-pop {
    animation: springPop 6s cubic-bezier(0.2, 0.9, 0.4, 1.1) infinite;
    transform-origin: center;
}
@keyframes springPop {
    0%, 90%, 100% { transform: scale(1); opacity: 1; }
    92% { transform: scale(0); opacity: 0; }
    96% { transform: scale(1.2); opacity: 1; }
}

/* 6. 底部注册按钮光晕扫过效果 */
@keyframes sweep {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}
.animate-sweep {
    animation: sweep 1s ease-in-out;
}