/* ============================================================
   mocabolka.world - Base Styles
   基础样式：CSS 变量、重置、背景、光标、闪黑过渡、响应式
   ============================================================ */

/* ---- CSS 变量 ---- */
:root {
    --accent-main: #9ac8e2;
    --accent-light: #cce5f4;
    --accent-dark: #7ab0d1;
    --glass-bg: rgba(10, 15, 20, 0.55);
    --glass-border: rgba(154, 200, 226, 0.2);
    --next-btn-color: #4CAF50;
    --coral: #ff6b6b;
    --gold: #ffd93d;
    --mint: #6bcb77;
    --lav: #b088f9;
    --safe-top: env(safe-area-inset-top, 0px);
    --safe-bottom: env(safe-area-inset-bottom, 0px);
}

/* ---- 全局重置 ---- */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
}

html {
    background-color: #000;
}

body, html {
    width: 100%;
    height: 100%;
    overflow: hidden;
    font-family: "OPPO Sans 4.0", "OPPO Sans", -apple-system, BlinkMacSystemFont, sans-serif;
    color: #fff;
    cursor: none;
    -webkit-font-smoothing: antialiased;
}

/* ---- 闪黑过渡遮罩（首次访问 & 跨页导航共用） ---- */
#initial-load-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 99999;
    pointer-events: none;
    background: #000;
    opacity: 1;
}

/*
 * 首次访问：黑屏覆盖，1.0s 后使用 CSS animation 渐消
 * 曲线 cubic-bezier(0.4, 0, 0.2, 1) — Material Design 标准缓出
 * animation-fill-mode: forwards 保持最终状态（opacity:0, visibility:hidden）
 */
#initial-load-overlay.first-visit {
    animation: overlayFadeOut 0.7s cubic-bezier(0.4, 0, 0.2, 1) forwards;
    animation-delay: 1.0s;
}

/*
 * 跨页导航 — 闪黑效果
 * 阶段1（0%→30%）：快速从透明变为全黑（0.25s）
 * 阶段2（30%→100%）：保持全黑一小段再渐消（总共 0.7s）
 */
#initial-load-overlay.flash-out {
    animation: flashBlackOut 0.7s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

/*
 * 跨页导航 — 进入新页面时从黑屏渐消
 * 新页面加载后立即播放，配合目标页面的内容出现
 */
#initial-load-overlay.fade-in {
    animation: overlayFadeOut 0.5s cubic-bezier(0.4, 0, 0.2, 1) forwards;
    animation-delay: 0.15s;
}

/* 跳过遮罩（非跨页导航场景，如浏览器的后退/前进） */
#initial-load-overlay.skip-overlay {
    opacity: 0;
    animation: none;
}

/* ===== 动画关键帧 ===== */

/* 首次访问渐消：从全黑到完全透明 */
@keyframes overlayFadeOut {
    0%   { opacity: 1; visibility: visible; }
    100% { opacity: 0; visibility: hidden; }
}

/* 跨页闪黑：快速变黑 → 保持 → 渐消 */
@keyframes flashBlackOut {
    0%   { opacity: 0; }
    25%  { opacity: 1; }
    60%  { opacity: 1; }
    100% { opacity: 0; visibility: hidden; }
}

/* ---- 自定义光标系统 ---- */
#cursor-dot, #cursor-ring {
    position: fixed;
    top: 0;
    left: 0;
    pointer-events: none;
    will-change: transform;
    opacity: 0;
}

#cursor-dot {
    width: 6px;
    height: 6px;
    background: var(--accent-main);
    border-radius: 50%;
    margin: -3px 0 0 -3px;
    z-index: 99998;
}

#cursor-ring {
    width: 36px;
    height: 36px;
    border: 1px solid rgba(154, 200, 226, 0.5);
    border-radius: 50%;
    margin: -18px 0 0 -18px;
    z-index: 99997;
}

#cursor-dot.hovered {
    width: 10px;
    height: 10px;
    margin: -5px 0 0 -5px;
    box-shadow: 0 0 15px var(--accent-main);
    background: #fff;
}

#cursor-ring.hovered {
    width: 55px;
    height: 55px;
    margin: -27.5px 0 0 -27.5px;
    background-color: rgba(154, 200, 226, 0.1);
    border-color: transparent;
}

/* ---- 背景层 ---- */
.bg-wrapper {
    position: fixed;
    top: -2%;
    left: -2%;
    width: 104%;
    height: 104%;
    z-index: -2;
    background-size: cover;
    background-position: center;
    transition: background-image 0.8s ease-in-out;
}

.bg-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    background: rgba(5, 5, 5, 0.5);
}

/* ---- 粒子画布 ---- */
#particle-canvas {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    pointer-events: none;
}

/* ---- 入场动画 ---- */
@keyframes floatIn {
    0% { opacity: 0; }
    100% { opacity: 1; }
}

/* ---- 版权声明 ---- */
.copyright-footer {
    position: fixed;
    bottom: calc(20px + var(--safe-bottom));
    left: 0;
    width: 100%;
    text-align: center;
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.3);
    letter-spacing: 1px;
    z-index: 50;
    pointer-events: none;
}

/* ================================================================
   响应式 — 移动端全面优化
   ================================================================ */
@media (max-width: 768px) {
    body, html {
        cursor: auto;
    }
    #cursor-dot, #cursor-ring {
        display: none;
    }
    .bg-switcher {
        top: auto;
        bottom: calc(20px + var(--safe-bottom));
        right: 16px;
    }

    /* 移动端滚动条隐藏但可滚动 */
    ::-webkit-scrollbar {
        width: 0;
        height: 0;
    }

    /* 移动端安全区域适配 */
    body {
        padding-top: var(--safe-top);
        padding-bottom: var(--safe-bottom);
    }

    .copyright-footer {
        bottom: calc(12px + var(--safe-bottom));
        font-size: 0.7rem;
    }

}

/* ---- 平板 (768px-1024px) 中间断点 ---- */
@media (min-width: 769px) and (max-width: 1024px) {
    .bg-switcher {
        top: auto;
        bottom: 20px;
        right: 24px;
    }
}

/* ---- 减少动画偏好 ---- */
@media (prefers-reduced-motion: reduce) {
    #initial-load-overlay.first-visit,
    #initial-load-overlay.flash-out,
    #initial-load-overlay.fade-in,
    .node,
    .game-card,
    .card-wrapper {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
    }
}