/* 应用启动动画（Splash Screen）
   仅用于「描述文件 / APK / 已安装应用（PWA）」启动场景。
   普通网页浏览器访问时不渲染（由 loader.js 直接移除节点）。
   设计：品牌图标脉冲 + 站点名 + 进度条，蓝白配色，零依赖。
   与 loader.css 的分工：
     - splash.css  ：应用启动动画，仅在已安装应用启动时出现一次
     - loader.css  ：通用加载遮罩 / 接口请求进度条，可反复出现 */

.app-splash {
    position: fixed;
    inset: 0;
    z-index: 2147483200;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 18px;
    background: #ffffff;
    opacity: 1;
    transition: opacity 0.4s ease;
    pointer-events: auto;
}

.app-splash.app-splash--hide {
    opacity: 0;
    pointer-events: none;
}

/* ===== 品牌图标 =====
   图标一律使用后台「上传的 App 图标」（由 loader.js 依据 window.SITE_SPLASH_ICON /
   SITE_ICON / SITE_LOGO 动态注入背景图），不再内置任何默认图标。
   未配置任何图标时隐藏该节点，仅保留站点名与进度条，避免出现内置占位图。 */
.app-splash__logo {
    display: none;
    width: 84px;
    height: 84px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    animation: app-splash-pulse 1.6s ease-in-out infinite;
    will-change: transform, opacity;
}

/* 仅当 loader.js 成功注入「上传的 App 图标」后才显示 */
.app-splash__logo.app-splash__logo--set {
    display: block;
}

@keyframes app-splash-pulse {
    0%, 100% { transform: scale(1);     opacity: 1;    }
    50%      { transform: scale(1.08);  opacity: 0.86; }
}

/* ===== 站点名 ===== */
.app-splash__name {
    font-size: 17px;
    font-weight: 600;
    letter-spacing: 2px;
    color: #1e293b;
    font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif;
    animation: app-splash-fade 1.4s ease-in-out infinite;
}

@keyframes app-splash-fade {
    0%, 100% { opacity: 1;   }
    50%      { opacity: 0.6; }
}

/* ===== 底部进度条（不确定进度，流动光效） ===== */
.app-splash__bar {
    width: 120px;
    height: 3px;
    border-radius: 3px;
    background: #e2e8f0;
    overflow: hidden;
}

.app-splash__bar > span {
    display: block;
    height: 100%;
    width: 40%;
    border-radius: 3px;
    background: linear-gradient(90deg, #2563eb, #60a5fa, #2563eb);
    background-size: 200% 100%;
    animation: app-splash-bar 1.3s ease-in-out infinite;
}

@keyframes app-splash-bar {
    0%   { transform: translateX(-120%); }
    100% { transform: translateX(320%);  }
}

/* ===== 登录/认证页（居中卡片场景） ===== */
.app-splash--auth {
    background: #ffffff;
}

/* ===== 深色主题适配 ===== */
.app-splash.is-dark {
    background: #0f172a;
}
.app-splash.is-dark .app-splash__name {
    color: #e2e8f0;
}
.app-splash.is-dark .app-splash__bar {
    background: #334155;
}
.app-splash.is-dark .app-splash__tip {
    color: #94a3b8;
}

/* ===== APK / PWA 独立窗口模式：启动动画更沉浸（进度条更醒目） ===== */
.pwa-standalone .app-splash,
.app-splash.is-standalone {
    background: radial-gradient(circle at 50% 38%, #ffffff 0%, #eff6ff 52%, #dbeafe 100%);
    gap: 22px;
}

.app-splash.is-standalone .app-splash__logo {
    width: 96px;
    height: 96px;
    filter: drop-shadow(0 10px 24px rgba(37, 99, 235, 0.24));
}

.app-splash.is-standalone .app-splash__name {
    font-size: 18px;
    letter-spacing: 3px;
}

/* 独立模式：进度条更粗更明显，并附带百分比进度感的缓动 */
.app-splash.is-standalone .app-splash__bar {
    width: 148px;
    height: 4px;
}

.app-splash.is-standalone .app-splash__bar > span {
    background: linear-gradient(90deg, #1d4ed8, #3b82f6, #93c5fd, #3b82f6, #1d4ed8);
    background-size: 220% 100%;
    animation: app-splash-bar 1.15s ease-in-out infinite, app-splash-shine 2.2s linear infinite;
}

@keyframes app-splash-shine {
    0%   { background-position: 0% 0;   }
    100% { background-position: 220% 0; }
}

/* 底部提示文案（仅独立模式展示） */
.app-splash__tip {
    position: absolute;
    bottom: calc(38px + env(safe-area-inset-bottom, 0px));
    font-size: 12px;
    letter-spacing: 1px;
    color: #64748b;
    font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif;
    opacity: 0.85;
    display: none;
}

.app-splash.is-standalone .app-splash__tip {
    display: block;
}

/* 安全区适配：留出刘海与底部手势区 */
.app-splash {
    padding-top: env(safe-area-inset-top, 0px);
    padding-bottom: env(safe-area-inset-bottom, 0px);
}

/* 无障碍：遵循系统"减少动态效果"偏好 */
@media (prefers-reduced-motion: reduce) {
    .app-splash__logo,
    .app-splash__name,
    .app-splash__bar > span {
        animation: none;
    }
    .app-splash__bar > span {
        width: 60%;
        transform: translateX(30%);
    }
}