@charset "UTF-8";
/* ==========================================================================
   front.css —— 前台样式：背景层（幻彩 / 自定义图）、液态玻璃卡片、数字排版
   ========================================================================== */

html,
body.front {
    min-height: 100%;
}

body.front {
    overflow-x: hidden;
}

/* ------------------------------------------------------------------
   一、背景层
   ------------------------------------------------------------------ */
.bg {
    position: fixed;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    background: var(--page-bg);
}

/* 1.1 动态幻彩：四个高斯模糊光斑缓慢漂移 */
.bg__aurora {
    position: absolute;
    inset: -25%;
    opacity: var(--aurora-opacity);
    filter: blur(80px);
    will-change: transform;
}

.blob {
    position: absolute;
    width: 52vmax;
    height: 52vmax;
    border-radius: 50%;
}

.blob--1 {
    background: var(--blob-1);
    top: -14%;
    left: -12%;
    animation: blob-a var(--speed) ease-in-out infinite;
}

.blob--2 {
    background: var(--blob-2);
    top: -8%;
    right: -14%;
    animation: blob-b calc(var(--speed) * 1.18) ease-in-out infinite;
}

.blob--3 {
    background: var(--blob-3);
    bottom: -20%;
    left: 4%;
    animation: blob-c calc(var(--speed) * 1.32) ease-in-out infinite;
}

.blob--4 {
    background: var(--blob-4);
    bottom: -16%;
    right: -8%;
    animation: blob-d calc(var(--speed) * 1.1) ease-in-out infinite;
}

@keyframes blob-a {
    0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
    33%      { transform: translate3d(14vw, 9vh, 0) scale(1.16); }
    66%      { transform: translate3d(-7vw, 15vh, 0) scale(.9); }
}

@keyframes blob-b {
    0%, 100% { transform: translate3d(0, 0, 0) scale(1.05); }
    35%      { transform: translate3d(-16vw, 12vh, 0) scale(.88); }
    70%      { transform: translate3d(-6vw, -8vh, 0) scale(1.2); }
}

@keyframes blob-c {
    0%, 100% { transform: translate3d(0, 0, 0) scale(.95); }
    40%      { transform: translate3d(12vw, -11vh, 0) scale(1.18); }
    75%      { transform: translate3d(18vw, 5vh, 0) scale(.9); }
}

@keyframes blob-d {
    0%, 100% { transform: translate3d(0, 0, 0) scale(1.1); }
    45%      { transform: translate3d(-13vw, -14vh, 0) scale(.92); }
    80%      { transform: translate3d(6vw, -5vh, 0) scale(1.16); }
}

/* 1.2 自定义背景图（四周各外扩 40px，避免模糊后边缘露底） */
.bg__image {
    position: absolute;
    inset: -40px;
    display: none;
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
    filter: blur(var(--img-blur));
    transform: translateZ(0);
}

html[data-bg="image"] .bg__image { display: block; }
html[data-bg="image"] .bg__aurora { display: none; }

/* 1.3 遮罩：亮色主题用白色遮罩、暗色主题用黑色遮罩，保证数字清晰可读 */
.bg__overlay {
    position: absolute;
    inset: 0;
    background: rgba(var(--overlay-color), var(--overlay));
    transition: background-color .45s ease;
}

/* 1.4 细腻噪点，增强玻璃的“实体感” */
.bg__grain {
    position: absolute;
    inset: 0;
    opacity: .5;
    mix-blend-mode: overlay;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.32'/%3E%3C/svg%3E");
}

/* ------------------------------------------------------------------
   二、数字展示
   ------------------------------------------------------------------ */
.stage {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    min-height: 100dvh;
    padding: 8vh 5vw;
}

.glass {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: clamp(18px, 3vw, 42px);
    /* 限制最大宽度，配合 JS 的单行自适应，避免超长内容撑破屏幕 */
    max-width: 92vw;
    overflow: hidden;
    padding: clamp(28px, 4.5vw, 72px) clamp(34px, 7vw, 116px);
    border-radius: clamp(22px, 3vw, 40px);
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    -webkit-backdrop-filter: blur(28px) saturate(180%);
    backdrop-filter: blur(28px) saturate(180%);
    box-shadow:
        var(--glass-shadow),
        inset 0 1px 0 var(--glass-highlight),
        inset 0 -1px 0 rgba(0, 0, 0, .05);
}

/* 玻璃表面高光（顶部受光 + 底部反光） */
.glass::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    background:
        radial-gradient(120% 65% at 18% -12%, var(--glass-sheen), transparent 62%),
        radial-gradient(90% 55% at 92% 112%, var(--glass-inner), transparent 68%);
}

/* 缓慢扫过的高光带，营造液态流动感 */
.glass::after {
    content: "";
    position: absolute;
    top: -60%;
    left: -35%;
    width: 55%;
    height: 220%;
    pointer-events: none;
    transform: rotate(16deg);
    background: linear-gradient(100deg, transparent, var(--glass-sheen), transparent);
    opacity: 0;
    animation: sheen 7s ease-in-out infinite;
}

@keyframes sheen {
    0%   { transform: translateX(-30%) rotate(16deg); opacity: 0; }
    25%  { opacity: .85; }
    60%  { opacity: .35; }
    100% { transform: translateX(340%) rotate(16deg); opacity: 0; }
}

/* 2.1 单条展示：图标 → 上一行文字 → 下一行数字，垂直居中排列 */
.entry {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    gap: clamp(6px, 1.2vw, 14px);
}

/* 2.2 社交软件图标：圆形玻璃徽标，尺寸跟随本行文字字号按固定比例缩放 */
.social {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: clamp(15px, calc(var(--value-fs, 3rem) * .34), 40px);
    height: clamp(15px, calc(var(--value-fs, 3rem) * .34), 40px);
    border-radius: 50%;
    color: var(--brand, var(--text-1));
    background: var(--glass-bg-strong);
    border: 1px solid var(--glass-border);
    -webkit-backdrop-filter: blur(14px) saturate(180%);
    backdrop-filter: blur(14px) saturate(180%);
    box-shadow:
        inset 0 1px 0 var(--glass-highlight),
        0 8px 18px -12px rgba(0, 0, 0, .45);
}

.social svg {
    display: block;
    width: 58%;
    height: 58%;
}

/* 2.3 展示内容：始终单行，字号由 JS 按实际宽度自适应缩放
       --vs 由服务端按条目数量注入（1 / 0.74 / 0.58），条目越多字号越小 */
.value {
    position: relative;
    z-index: 1;
    display: block;
    width: 100%;
    white-space: nowrap;
    font-size: calc(clamp(2.8rem, 15vw, 11rem) * var(--vs, 1));
    font-weight: 700;
    line-height: 1.08;
    letter-spacing: .02em;
    text-align: center;
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1;
    color: var(--text-1);
    /* 依据主题自动选择白色/黑色光晕，提升复杂背景下的对比度 */
    text-shadow: 0 2px 30px rgba(var(--overlay-color), .65);
    transition: color .45s ease;
}

/* 内容较长时的基准字号（无 JS 时的兜底，JS 生效后会精确适配） */
.value--long {
    font-size: calc(clamp(1.6rem, 7.5vw, 6rem) * var(--vs, 1));
    letter-spacing: .01em;
}

.value--xlong {
    font-size: calc(clamp(1.1rem, 4.6vw, 3.6rem) * var(--vs, 1));
    letter-spacing: 0;
}

/* 只填了文字时（没有数字/字母行）：文字直接作为主行显示 */
.value--text {
    font-size: calc(clamp(1.5rem, 7vw, 5rem) * var(--vs, 1));
    letter-spacing: .01em;
}

/* 上一行文字：字号较小、颜色稍淡，作为下方的数字/字母的说明 */
.value--sub {
    font-size: max(.75rem, calc(clamp(.9rem, 3.2vw, 1.75rem) * var(--vs, 1)));
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: .02em;
    font-variant-numeric: normal;
    font-feature-settings: normal;
    color: var(--text-2);
    text-shadow: none;
}

/* ------------------------------------------------------------------
   三、明暗切换按钮位置
   ------------------------------------------------------------------ */
body.front .theme-toggle {
    position: fixed;
    top: max(18px, env(safe-area-inset-top));
    right: max(18px, env(safe-area-inset-right));
    z-index: 3;
}

/* ------------------------------------------------------------------
   四、移动端适配
   ------------------------------------------------------------------ */
@media (max-width: 640px) {
    .bg__aurora {
        filter: blur(64px);
    }

    .stage {
        padding: 10vh 4vw;
    }

    .glass {
        max-width: 94vw;
        gap: 16px;
        padding: clamp(22px, 7vw, 34px) clamp(18px, 5vw, 28px);
        border-radius: 24px;
    }
}