/* ==========================================================================
   base.css — 重置、字体、页面底色与「流光」背景层
   ========================================================================== */

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
    scrollbar-color: var(--scroll-thumb) transparent;
}

body {
    margin: 0;
    min-height: 100vh;
    background: var(--bg);
    color: var(--ink);
    font-family: var(--font);
    font-size: var(--fs-body);
    line-height: 1.75;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    overflow-x: hidden;
}

h1,
h2,
h3,
h4 {
    margin: 0;
    font-weight: 650;
    line-height: 1.25;
    letter-spacing: -0.015em;
}

p {
    margin: 0;
}

a {
    color: inherit;
    text-decoration: none;
}

img {
    max-width: 100%;
    display: block;
}

button {
    font: inherit;
    color: inherit;
    border: 0;
    background: none;
    cursor: pointer;
}

input,
textarea,
select {
    font: inherit;
    color: inherit;
}

ul,
ol {
    margin: 0;
    padding: 0;
    list-style: none;
}

::selection {
    background: rgba(var(--c1-rgb), 0.35);
    color: #fff;
}

::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: var(--scroll-thumb);
    border-radius: 999px;
    border: 2px solid transparent;
    background-clip: content-box;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--scroll-thumb-hover);
    background-clip: content-box;
}

/* 键盘可达性：只在键盘导航时显示焦点环 */
:focus-visible {
    outline: 2px solid rgba(var(--c2-rgb), 0.75);
    outline-offset: 3px;
    border-radius: 6px;
}

/* ==========================================================================
   背景：深空底色 + 三团呼吸的流光 + 细网格 + 噪点 + 跟随鼠标的柔光
   全部固定在视口，不参与滚动重排。
   ========================================================================== */

.bg {
    position: fixed;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    background: var(--bg);
    pointer-events: none;
}

/* --- 视频背景：垫在最底层，上面罩一层暗色玻璃，保证文字可读 --------------- */

.bg__video {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity 1.2s var(--ease);
    background-color: var(--bg-soft);
}

/* 静态封面层：没有视频（或站点关掉了动画）时，用这张图当背景，模糊/亮度跟视频一致 */
.bg__video::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: var(--bg-poster, none);
    background-size: cover;
    background-position: center;
    transform: scale(1.06);
    filter: blur(var(--bg-blur, 18px)) saturate(var(--bg-sat, 1.12)) brightness(calc(var(--bg-bright, 1) * var(--bright-k)));
    transition: opacity 1.2s var(--ease);
}

/* 视频在放的时候就把静态层收起来，省一次合成 */
.bg__video.is-playing::before {
    opacity: 0;
}

.bg__video.is-ready {
    opacity: 1;
}

/* 访客在「背景设置」里关掉动态背景时，整层（含遮罩）淡出，回到纯光晕背景 */
.bg__video.is-off {
    opacity: 0;
}

.bg__video-el {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transform: scale(1.06);
    filter: blur(var(--bg-blur, 18px)) saturate(var(--bg-sat, 1.12)) brightness(calc(var(--bg-bright, 1) * var(--bright-k)));
    transition: opacity 1.2s var(--ease);
}

.bg__video.is-playing .bg__video-el {
    opacity: 1;
}

/* 遮罩：一层平铺的暗色，浓度由面板「遮罩浓度」控制 */
.bg__scrim {
    position: absolute;
    inset: 0;
    background: rgba(var(--veil-rgb), calc(var(--bg-overlay, 0.5) * var(--veil-k)));
}

/* 四周暗角：上下压得更黑，让首屏标题与页脚都能读；可整层关掉 */
.bg__edge {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg,
        rgba(var(--veil-rgb), 0.88) 0%,
        rgba(var(--veil-rgb), 0.36) 26%,
        rgba(var(--veil-rgb), 0.42) 62%,
        rgba(var(--veil-rgb), 0.92) 100%);
    transition: opacity 0.6s var(--ease);
}

body.no-edge .bg__edge {
    opacity: 0;
}

/* 有视频时把光晕和网格压暗，让画面自己说话 */
body.has-video-bg .bg__orb--1 { opacity: 0.24; }
body.has-video-bg .bg__orb--2 { opacity: 0.2; }
body.has-video-bg .bg__orb--3 { opacity: 0.16; }
body.has-video-bg .bg__grid { opacity: 0.2; }

/* 背景视频开关：左下角，和右下角的播放器对称 */
.bg-toggle {
    position: fixed;
    left: 24px;
    bottom: 24px;
    z-index: 780;
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1px solid var(--line);
    background: var(--float-bg);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    color: var(--ink-2);
    transition: color 0.25s, border-color 0.25s, transform 0.25s var(--ease), background 0.25s;
}

.bg-toggle:hover {
    color: var(--hover-ink);
    border-color: rgba(var(--c2-rgb), 0.45);
    background: var(--float-bg-hover);
    transform: translateY(-1px);
}

.bg-toggle svg {
    width: 15px;
    height: 15px;
    fill: currentColor;
}

/* display:grid 会盖掉浏览器默认的 [hidden]，这里显式补回 */
.bg-toggle[hidden] {
    display: none;
}

.bg-toggle__play {
    display: none;
}

.bg-toggle.is-paused .bg-toggle__pause {
    display: none;
}

.bg-toggle.is-paused .bg-toggle__play {
    display: block;
}

.bg__orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(90px);
    opacity: 0.5;
    will-change: transform;
    transform: translateZ(0);
    transition: opacity 1.2s var(--ease);
}

.bg__orb--1 {
    width: 58vw;
    height: 58vw;
    min-width: 480px;
    min-height: 480px;
    top: -18vw;
    left: -12vw;
    background: radial-gradient(circle at 50% 50%, rgba(var(--c1-rgb), 0.85), transparent 68%);
    animation: orbDriftA 26s var(--ease-soft) infinite alternate;
}

.bg__orb--2 {
    width: 46vw;
    height: 46vw;
    min-width: 380px;
    min-height: 380px;
    top: 26vh;
    right: -14vw;
    background: radial-gradient(circle at 50% 50%, rgba(var(--c2-rgb), 0.55), transparent 66%);
    animation: orbDriftB 32s var(--ease-soft) infinite alternate;
}

.bg__orb--3 {
    width: 40vw;
    height: 40vw;
    min-width: 320px;
    min-height: 320px;
    bottom: -16vw;
    left: 22vw;
    background: radial-gradient(circle at 50% 50%, rgba(var(--c3-rgb), 0.4), transparent 66%);
    animation: orbDriftC 38s var(--ease-soft) infinite alternate;
}

@keyframes orbDriftA {
    from {
        transform: translate3d(0, 0, 0) scale(1);
    }
    to {
        transform: translate3d(6vw, 5vh, 0) scale(1.12);
    }
}

@keyframes orbDriftB {
    from {
        transform: translate3d(0, 0, 0) scale(1.05);
    }
    to {
        transform: translate3d(-7vw, -6vh, 0) scale(0.92);
    }
}

@keyframes orbDriftC {
    from {
        transform: translate3d(0, 0, 0) scale(0.95);
    }
    to {
        transform: translate3d(5vw, -4vh, 0) scale(1.1);
    }
}

/* 细网格：让玻璃卡片有"落点"，边缘用遮罩淡出 */
.bg__grid {
    position: absolute;
    inset: -1px;
    background-image:
        linear-gradient(to right, var(--grid-line) 1px, transparent 1px),
        linear-gradient(to bottom, var(--grid-line) 1px, transparent 1px);
    background-size: 64px 64px;
    mask-image: radial-gradient(ellipse 90% 70% at 50% 30%, #000 0%, transparent 78%);
    -webkit-mask-image: radial-gradient(ellipse 90% 70% at 50% 30%, #000 0%, transparent 78%);
    opacity: 0.5;
}

/* 噪点：极低透明度，压掉渐变的"塑料感" */
.bg__grain {
    position: absolute;
    inset: 0;
    opacity: var(--grain);
    background-image: 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='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* 跟随指针的柔光（由 JS 更新 --mx/--my） */
.bg__cursor {
    position: absolute;
    inset: 0;
    background: radial-gradient(
        340px circle at var(--mx, 50%) var(--my, 20%),
        rgba(var(--c1-rgb), 0.13),
        transparent 70%
    );
    transition: opacity 0.4s ease;
    opacity: 0;
}

body.has-pointer .bg__cursor {
    opacity: 1;
}

/* 首屏顶部的一条流光分割线 */
.bg__beam {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: var(--grad-line);
    opacity: 0.7;
}

/* ==========================================================================
   滚动显现：JS 加 .is-in 后播放；无 JS 时内容照常可见
   ========================================================================== */

.reveal {
    opacity: 0;
    transform: translateY(22px);
    transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
    transition-delay: var(--reveal-delay, 0ms);
}

.reveal.is-in {
    opacity: 1;
    transform: none;
}

html.no-js .reveal {
    opacity: 1;
    transform: none;
}

/* ==========================================================================
   工具类
   ========================================================================== */

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.grad-text {
    background: var(--grad-text);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

/* ==========================================================================
   动效降级
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
    }

    .reveal {
        opacity: 1;
        transform: none;
    }
}