/* ============================================================
   Liquid Glass 设计系统 (灵感来自 rdev/liquid-glass-react)
   纯 CSS 实现，兼容移动端 (iOS/Android)，渐进增强折射效果。
   本文件在页面专属样式之后加载，确保玻璃覆盖生效。
   设计原则：克制配色、真实玻璃质感（定向高光 + 微噪点 + 折射），
            避免“一眼 AI”的蓝紫渐变 / 彩虹描边 / 满屏发光装饰。
   ============================================================ */

:root {
    /* —— 液态玻璃 令牌 —— */
    --glass-bg: rgba(255, 255, 255, 0.22);
    --glass-bg-strong: rgba(255, 255, 255, 0.32);
    --glass-bg-soft: rgba(255, 255, 255, 0.14);
    --glass-border: rgba(255, 255, 255, 0.62);
    --glass-border-soft: rgba(255, 255, 255, 0.42);
    --glass-blur: 18px;
    --glass-blur-strong: 26px;
    --glass-radius: 20px;
    --glass-radius-sm: 14px;
    /* hover 过渡曲线：快速起步、长收尾的 expo 感，避免线性“滑移” */
    --glass-ease: cubic-bezier(0.22, 1, 0.36, 1);
    /* 定向打磨边缘：左上提亮、右下沉影，模拟真实玻璃厚度，而非均匀发光。
       投影暗部掺入极少量叶绿，让暗部“透”而非死灰 */
    --glass-shadow:
        0 18px 40px rgba(15, 23, 42, 0.15),
        0 24px 56px rgba(20, 83, 45, 0.08),
        0 3px 10px rgba(15, 23, 42, 0.07);
    --glass-shadow-hover:
        0 22px 48px rgba(15, 23, 42, 0.19),
        0 28px 64px rgba(20, 83, 45, 0.10),
        0 6px 16px rgba(15, 23, 42, 0.09);
    /* 内描边分四层：顶部锐利亮线、左上定向光、右下回弹反光、底部淡绿折射沉影 */
    --glass-inset:
        inset 0 1px 0 rgba(255, 255, 255, 0.95),
        inset 1.5px 1.5px 1px rgba(255, 255, 255, 0.55),
        inset -1px -1px 1px rgba(255, 255, 255, 0.22),
        inset 0 -1.5px 3px rgba(22, 101, 52, 0.06);
    /* 玻璃微噪点：消除“纯平 AI 渐变”，增加真实磨砂质感 */
    --glass-noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.045'/%3E%3C/svg%3E");
}

/* —— 玻璃面板基类 —— */
.glass-surface {
    position: relative;
    background:
        var(--glass-noise),
        var(--glass-bg);
    -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(160%);
    backdrop-filter: blur(var(--glass-blur)) saturate(160%);
    border: 1px solid var(--glass-border);
    border-radius: var(--glass-radius);
    box-shadow: var(--glass-shadow), var(--glass-inset);
    overflow: hidden;
}

.glass-surface > * {
    position: relative;
    z-index: 1;
}

/* ============================================================
   统一作用于主要面板
   ============================================================ */
.card,
.content,
.game-board,
.support-container,
.support-card,
.support-details,
.kurobbs-shell,
.step-card,
.info-panel,
.bot-box,
.carousel-item,
.game-message {
    background:
        var(--glass-noise),
        radial-gradient(135% 90% at 12% 6%, rgba(255, 255, 255, 0.52), rgba(255, 255, 255, 0.05) 32%, transparent 56%),
        /* 右下角极淡的叶绿折射：模拟光线穿过玻璃厚度后的色散，保持绿色自然基调 */
        radial-gradient(120% 85% at 90% 98%, rgba(134, 239, 172, 0.10), transparent 52%),
        var(--glass-bg) !important;
    -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(165%) brightness(1.04);
    backdrop-filter: blur(var(--glass-blur)) saturate(165%) brightness(1.04);
    border: 1px solid var(--glass-border) !important;
    box-shadow: var(--glass-shadow), var(--glass-inset) !important;
}

/* 大面板用更强折射模糊 */
.content,
.game-board,
.support-container,
.kurobbs-shell {
    -webkit-backdrop-filter: blur(var(--glass-blur-strong)) saturate(170%) brightness(1.05);
    backdrop-filter: blur(var(--glass-blur-strong)) saturate(170%) brightness(1.05);
}

/* —— 渐进增强：支持 SVG backdrop 折射的浏览器启用真实位移折射（液态镜面）——
   折射位移（feTurbulence+feDisplacementMap）成本随滤镜面积线性增长，滚动时每帧重算；
   仅桌面宽屏 + 可精确悬停的设备启用，窄屏/触屏回退为普通模糊（观感差异极小） */
@supports ((backdrop-filter: url(#lg-refraction)) or (-webkit-backdrop-filter: url(#lg-refraction))) {
    @media (hover: hover) and (min-width: 1024px) {
        .card,
        .content,
        .game-board,
        .support-container,
        .support-card,
        .support-details,
        .kurobbs-shell,
        .step-card,
        .info-panel,
        .bot-box,
        .carousel-item,
        .game-message {
            -webkit-backdrop-filter: blur(3px) url(#lg-refraction) saturate(165%) brightness(1.04);
            backdrop-filter: blur(3px) url(#lg-refraction) saturate(165%) brightness(1.04);
        }

        .content,
        .game-board,
        .support-container,
        .kurobbs-shell {
            -webkit-backdrop-filter: blur(5px) url(#lg-refraction) saturate(170%) brightness(1.05);
            backdrop-filter: blur(5px) url(#lg-refraction) saturate(170%) brightness(1.05);
        }
    }
}

/* —— 静态定向高光：左上角镜面反光（不循环动画，避免“AI 发光”观感）—— */
.content,
.game-board,
.support-container,
.kurobbs-shell {
    position: relative;
}

.content::after,
.game-board::after,
.support-container::after,
.kurobbs-shell::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    /* 默认停在左上角；JS 写入 --lg-x / --lg-y 后跟随光标移动。
       双层渐变：小而亮的核心 + 大而柔的光晕，更接近真实镜面反射 */
    background:
        radial-gradient(circle 9vmax at var(--lg-x, 12%) var(--lg-y, 4%),
            rgba(255, 255, 255, 0.42) 0%,
            transparent 70%),
        radial-gradient(circle 34vmax at var(--lg-x, 12%) var(--lg-y, 4%),
            rgba(255, 255, 255, 0.34) 0%,
            rgba(255, 255, 255, 0.07) 24%,
            transparent 48%);
    /* 光标离开面板后高光淡出，而不是停在边界（JS 写入 --lg-on：进入 1 / 离开 0）*/
    opacity: var(--lg-on, 1);
    transition: opacity 0.6s var(--glass-ease);
    pointer-events: none;
    z-index: 0;
}

/* 面板内容位于高光之上，文字始终清晰 */
.content > *,
.game-board > *,
.support-container > *,
.kurobbs-shell > * {
    position: relative;
    z-index: 1;
}

/* —— 卡片表面的跟随光标镜面反光（覆盖在内容之上，screen 混合只提亮）—— */
.card::after,
.support-card::after,
.carousel-item::after,
.step-card::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: radial-gradient(circle 240px at var(--lg-x, 50%) var(--lg-y, 0%),
        rgba(255, 255, 255, 0.48) 0%,
        rgba(255, 255, 255, 0.12) 30%,
        transparent 62%);
    opacity: 0;
    transition: opacity 0.4s var(--glass-ease);
    mix-blend-mode: screen;
    pointer-events: none;
    z-index: 2;
}

.card:hover::after,
.support-card:hover::after,
.carousel-item:hover::after,
.step-card:hover::after {
    opacity: 1;
}

/* hover 时阴影加深变近（只动阴影/描边；.card 的位移由 CSS 掌管故保留 transform 过渡，
   support-card 的倾斜由 GSAP 每帧写 transform，不能叠加 CSS transform 过渡，避免拖影） */
.card {
    transition: box-shadow 0.45s var(--glass-ease), border-color 0.45s var(--glass-ease),
        transform 0.45s var(--glass-ease);
}

.support-card,
.carousel-item,
.step-card {
    transition: box-shadow 0.45s var(--glass-ease), border-color 0.45s var(--glass-ease);
}

.card:hover,
.support-card:hover,
.carousel-item:hover,
.step-card:hover {
    box-shadow: var(--glass-shadow-hover), var(--glass-inset) !important;
    border-color: rgba(255, 255, 255, 0.88) !important;
}

/* 触屏设备无指针：关闭跟随光标的高光，避免“常亮” */
@media (hover: none) {
    .card::after,
    .support-card::after,
    .carousel-item::after,
    .step-card::after {
        display: none;
    }
}

/* ============================================================
   背景：克制的品牌色晕染（绿 / 暖砂 / 浅青），无蓝紫，配合微噪点
   ============================================================ */
.lg-aurora {
    position: fixed;
    inset: 0;
    z-index: -1;
    overflow: hidden;
    pointer-events: none;
}

.lg-aurora span {
    position: absolute;
    display: block;
    border-radius: 50%;
    filter: blur(80px);
    opacity: 0.42;
    will-change: transform;
}

.lg-aurora span:nth-child(1) {
    width: 52vw; height: 52vw;
    left: -12vw; top: -10vw;
    background: radial-gradient(circle at 35% 35%, rgba(34, 197, 94, 0.5), transparent 68%);
    animation: lg-drift-a 34s ease-in-out infinite;
}

.lg-aurora span:nth-child(2) {
    width: 46vw; height: 46vw;
    right: -12vw; top: 14vw;
    background: radial-gradient(circle at 50% 50%, rgba(234, 179, 8, 0.34), transparent 70%);
    animation: lg-drift-b 40s ease-in-out infinite;
}

.lg-aurora span:nth-child(3) {
    width: 44vw; height: 44vw;
    left: 24vw; bottom: -16vw;
    background: radial-gradient(circle at 50% 50%, rgba(20, 184, 166, 0.32), transparent 70%);
    animation: lg-drift-c 46s ease-in-out infinite;
}

/* 第 4 个色斑收敛为低饱和暖色，避免彩虹感 */
.lg-aurora span:nth-child(4) {
    width: 30vw; height: 30vw;
    right: 10vw; bottom: -6vw;
    background: radial-gradient(circle at 50% 50%, rgba(132, 204, 22, 0.24), transparent 72%);
    animation: lg-drift-a 38s ease-in-out infinite reverse;
}

@keyframes lg-drift-a {
    0%, 100% { transform: translate(0, 0) scale(1); }
    50% { transform: translate(4vw, 4vh) scale(1.08); }
}

@keyframes lg-drift-b {
    0%, 100% { transform: translate(0, 0) scale(1); }
    50% { transform: translate(-5vw, 3vh) scale(1.06); }
}

@keyframes lg-drift-c {
    0%, 100% { transform: translate(0, 0) scale(1); }
    50% { transform: translate(3vw, -4vh) scale(1.1); }
}

/* 全局细噪点纹理：消除“纯平 AI 背景” */
body::after {
    content: '';
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background-image: var(--glass-noise);
    opacity: 0.6;
}

/* 隐藏承载 SVG 滤镜的占位节点 */
.lg-svg-defs {
    position: absolute;
    width: 0;
    height: 0;
    overflow: hidden;
    pointer-events: none;
}

/* —— 触屏优化 & 无障碍 —— */
@media (hover: none) {
    .glass-surface:hover {
        transform: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .lg-aurora span {
        animation: none !important;
    }
}

/* 中低端移动端：降低模糊强度、关掉重滤镜，保证滚动流畅 */
@media (max-width: 480px) {
    :root {
        --glass-blur: 10px;
        --glass-blur-strong: 13px;
    }

    .card,
    .content,
    .game-board,
    .support-container,
    .support-card,
    .support-details,
    .kurobbs-shell,
    .step-card,
    .info-panel,
    .bot-box,
    .carousel-item,
    .game-message {
        /* 只保留轻模糊 + 轻饱和；不叠 SVG 折射位移（每帧成本高） */
        -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(130%) !important;
        backdrop-filter: blur(var(--glass-blur)) saturate(130%) !important;
    }

    .content,
    .game-board,
    .support-container,
    .kurobbs-shell {
        -webkit-backdrop-filter: blur(var(--glass-blur-strong)) saturate(135%) !important;
        backdrop-filter: blur(var(--glass-blur-strong)) saturate(135%) !important;
    }

    /* 背景色斑同样降模糊，移动端少一层大半径高斯 */
    .lg-aurora span {
        filter: blur(46px);
        opacity: 0.36;
    }
}