/* ===================================================================
   大成汇官网 · 首页星光开场动画（intro_mode = starlight）
   独立全屏开场：深空飞行星场先播放 intro_star_seconds 秒，
   字样从深空中由小到大飞出，随后停留 intro_auto_delay 秒，
   点击按钮或等待后开场层淡出，露出真正首页。
   该模式下首页 boot-loader 不渲染，开场层直接接管首屏。
   核心流程由 CSS 动画驱动，JS 仅做 Canvas 增强与兜底。
   =================================================================== */

.intro-overlay {
    position: fixed;
    inset: 0;
    z-index: 10000;            /* 高于 boot-loader(9999)，覆盖首屏 */
    display: flex;
    align-items: center;
    justify-content: center;
    background:
        radial-gradient(130% 130% at 50% 35%,
            var(--intro-sky-top, #0d1d3a) 0%,
            var(--intro-sky-bottom, #070e1d) 55%,
            var(--intro-sky-bottom, #02040a) 100%);
    overflow: hidden;
    opacity: 1;
    visibility: visible;

    /* 3D 透视：让中央文字能从深空飞近 */
    perspective: 1500px;
    perspective-origin: 50% 50%;

    /* 动态时长由 index.php 注入；若未注入则使用默认值 */
    --intro-star-seconds: 3s;
    --intro-text-duration: 2.8s;
    --intro-auto-delay: 4s;
    --intro-total: 9.8s;
    --intro-text-ease: cubic-bezier(0.66, 0, 0.34, 1);

    /* 核心退场动画：等待「星河+文字飞入+停留」总时长后，1s 淡出 */
    animation: introOverlayOut 1s var(--ease-premium, ease) forwards;
    animation-delay: var(--intro-total);
}

/* 星光模式下页面主体始终可见（intro-overlay 盖住它，退场后自然露出）
   彻底摆脱对 JS 添加 body.page-ready 的依赖，避免任何原因白屏/黑屏卡死 */
body.starlight-mode .page-shell,
body.starlight-mode.page-ready .page-shell {
    opacity: 1;
    transform: none;
    transition: none;
}

@keyframes introOverlayOut {
    from { opacity: 1; visibility: visible; }
    to   { opacity: 0; visibility: hidden; pointer-events: none; }
}

/* 点击/跳过：立即隐藏，不等待动画 */
.intro-overlay.intro-skipped {
    animation: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
}
.intro-overlay.intro-skipped .intro-content {
    animation: none !important;
    opacity: 0 !important;
}

/* 淡出态（JS 兜底也使用，与 CSS 动画共用同一状态） */
.intro-overlay.intro-hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

/* 星光画布铺满 */
.intro-stars {
    position: absolute;
    inset: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
    display: block;
}

/* 纯 CSS 星河兜底层：当 canvas 2D 上下文不可用（部分无痕/隐私模式或资源受限）时，
   仍保证开场层有醒目、流动的星点动效，避免「黑屏无动画」观感。正常情况被上层 canvas 覆盖。 */
.intro-stars-fallback {
    position: absolute;
    inset: -25%;
    z-index: 0;
    pointer-events: none;
    opacity: 1;
        background:
        /* 中心远光（随主题主色同步） */
        radial-gradient(circle at 50% 45%, var(--intro-glow, rgba(64, 184, 240, 0.14)) 0%, transparent 55%),
        /* 多层不同速度/大小的星点，通过 background-position 动画产生流动感（颜色随主题同步） */
        radial-gradient(2.2px 2.2px at 10% 15%, var(--intro-star-1, rgba(234, 246, 255, 1)), transparent 70%),
        radial-gradient(1.6px 1.6px at 25% 70%, var(--intro-star-2, rgba(159, 214, 245, .95)), transparent 65%),
        radial-gradient(2.4px 2.4px at 45% 25%, var(--intro-star-3, rgba(255, 255, 255, 1)), transparent 70%),
        radial-gradient(1.5px 1.5px at 60% 80%, var(--intro-star-2, rgba(159, 214, 245, .9)), transparent 65%),
        radial-gradient(2.0px 2.0px at 75% 20%, var(--intro-star-1, rgba(234, 246, 255, 1)), transparent 70%),
        radial-gradient(1.7px 1.7px at 85% 60%, var(--intro-star-3, rgba(255, 255, 255, .95)), transparent 65%),
        radial-gradient(1.4px 1.4px at 5% 85%, var(--intro-star-2, rgba(159, 214, 245, .9)), transparent 65%),
        radial-gradient(2.1px 2.1px at 50% 8%, var(--intro-star-1, rgba(234, 246, 255, 1)), transparent 70%),
        radial-gradient(1.8px 1.8px at 92% 40%, var(--intro-star-2, rgba(159, 214, 245, .95)), transparent 65%),
        radial-gradient(1.5px 1.5px at 18% 45%, var(--intro-star-3, rgba(255, 255, 255, .9)), transparent 65%),
        radial-gradient(2.0px 2.0px at 68% 55%, var(--intro-star-1, rgba(234, 246, 255, 1)), transparent 70%);
    background-size:
        100% 100%,
        520px 520px, 520px 520px, 520px 520px, 520px 520px,
        520px 520px, 520px 520px, 520px 520px, 520px 520px,
        520px 520px, 520px 520px, 520px 520px;
    background-repeat: repeat;
    animation: introDrift 60s linear infinite;
}
@keyframes introDrift {
    from { background-position: 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0; }
    to   { background-position: 0 0, -520px -520px, 260px -130px, -130px 260px, 390px 390px, -260px 130px, 130px -260px, -390px -390px, 520px 0, 0 520px, -260px -260px, 260px 260px; }
}

/* 中央内容（默认隐藏，星河播放完成后由 CSS 动画从极深空缓慢飞入并定格） */
.intro-content {
    position: relative;
    z-index: 2;
    text-align: center;
    padding: 24px;
    opacity: 0;
    transform: translateZ(-1200px) scale(0.05);
    will-change: transform, opacity;
    animation: introContentWarp var(--intro-text-duration) var(--intro-text-ease) forwards;
    animation-delay: var(--intro-star-seconds);
    transform-style: preserve-3d;
}

@keyframes introContentWarp {
    from {
        opacity: 0;
        transform: translateZ(-1200px) scale(0.05);
    }
    to {
        opacity: 1;
        transform: translateZ(0) scale(1);
    }
}

/* JS 手动触发显示时保持一致的最终状态（与 keyframe 终点对齐） */
.intro-overlay.intro-show-content .intro-content {
    opacity: 1;
    transform: translateZ(0) scale(1);
}

/* 中央 LOGO 字标（与导航 DC·H 呼应，颜色随主题前景同步） */
.intro-logo {
    font-family: 'Orbitron', 'Rajdhani', 'Microsoft YaHei', sans-serif;
    font-weight: 900;
    font-size: clamp(34px, 7vw, 64px);
    letter-spacing: 6px;
    color: var(--intro-fg, #eaf6ff);
    text-shadow: 0 0 24px var(--intro-glow, rgba(64, 184, 240, .55));
    margin-bottom: 22px;
    transition: color .45s var(--ease-smooth, ease), text-shadow .45s var(--ease-smooth, ease);
}
.intro-logo span {
    color: var(--c-cyan, #40b8f0);
}

/* 公司名称 */
.intro-company {
    font-family: 'Orbitron', 'Rajdhani', 'Microsoft YaHei', sans-serif;
    font-weight: 700;
    font-size: clamp(26px, 5.4vw, 52px);
    line-height: 1.15;
    margin: 0 0 14px;
    color: var(--intro-fg, #fff);
    letter-spacing: 2px;
    text-shadow: 0 0 30px var(--intro-glow, rgba(64, 184, 240, .35));
    transition: color .45s var(--ease-smooth, ease), text-shadow .45s var(--ease-smooth, ease);
}

/* 副标题 */
.intro-subtitle {
    font-size: clamp(14px, 2.4vw, 20px);
    letter-spacing: 4px;
    color: var(--intro-fg-soft, #9fd6f5);
    margin: 0 0 18px;
    font-weight: 500;
    transition: color .45s var(--ease-smooth, ease);
}

/* 今天日期 */
.intro-date {
    font-family: 'Rajdhani', 'Microsoft YaHei', sans-serif;
    font-size: clamp(13px, 1.8vw, 16px);
    letter-spacing: 3px;
    color: var(--intro-fg-soft, #6fa8c9);
    margin: 0 0 34px;
    transition: color .45s var(--ease-smooth, ease);
}

/* 欢迎按钮（描边 / 渐变 / 文字均随主题主色与前景同步） */
.intro-btn {
    appearance: none;
    border: 1px solid color-mix(in srgb, var(--c-cyan, #40b8f0) 60%, transparent);
    background: linear-gradient(135deg,
        color-mix(in srgb, var(--c-cyan, #40b8f0) 18%, transparent),
        color-mix(in srgb, var(--c-purple, #6366f1) 18%, transparent));
    color: var(--intro-fg, #eaf6ff);
    font-size: clamp(15px, 2.2vw, 18px);
    letter-spacing: 3px;
    padding: 14px 38px;
    border-radius: 999px;
    cursor: pointer;
    backdrop-filter: blur(6px);
    box-shadow: 0 0 0 0 color-mix(in srgb, var(--c-cyan, #40b8f0) 50%, transparent);
    transition: transform .25s ease, box-shadow .35s ease, background .35s ease, color .45s var(--ease-smooth, ease), border-color .45s var(--ease-smooth, ease);
    animation: introBtnPulse 2.6s ease-in-out infinite;
}
.intro-btn:hover {
    transform: translateY(-2px) scale(1.03);
    background: linear-gradient(135deg,
        color-mix(in srgb, var(--c-cyan, #40b8f0) 32%, transparent),
        color-mix(in srgb, var(--c-purple, #6366f1) 32%, transparent));
    box-shadow: 0 8px 30px color-mix(in srgb, var(--c-cyan, #40b8f0) 35%, transparent);
}

@keyframes introBtnPulse {
    0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--c-cyan, #40b8f0) 35%, transparent); }
    50%      { box-shadow: 0 0 24px 4px color-mix(in srgb, var(--c-cyan, #40b8f0) 45%, transparent); }
}


/* 尊重「减少动态效果」偏好 */
@media (prefers-reduced-motion: reduce) {
    .intro-overlay,
    .intro-content { transition: opacity .4s ease; }
    .intro-btn { animation: none; }
}

/* 小屏微调 */
@media (max-width: 600px) {
    .intro-logo { letter-spacing: 4px; margin-bottom: 16px; }
    .intro-subtitle { letter-spacing: 2px; }
}