/* ============================================
   深度计样式 - depth-gauge.css
   ============================================
   作用：
   1. 负责左右深度计的固定布局、刻度结构和数字显示。
   2. 让深度计持续作为整站空间语言存在，而不是只属于某个 section。
   3. 配合 `depth-manager.js` 把页面深浅、滚动和过渡可视化。
   阅读顺序：
   1. 外层定位
   2. 当前深度数字
   3. 刻度线与标签
   4. 交互态与响应式
*/

/* 文件导读：把它当成“整站仪表盘皮肤”来看会更容易理解，它不是装饰，而是深度系统的可视层。 */
/* 页面级深度计变量：集中管理上下左右安全边距，后面左右两侧共用这套值。 */
body {
    --depth-gauge-top: 20px;
    --depth-gauge-bottom: 20px;
    --depth-gauge-side: 3px;
    --depth-gauge-step-size: 18px;
    --depth-gauge-tape-offset: 0px;
    --depth-gauge-compression: 1;
    --depth-gauge-shift: 0px;
    --depth-gauge-current-scale: 1;
    --depth-gauge-shell-bg: rgba(10, 60, 96, 0.52);
    --depth-gauge-shell-border: rgba(255, 255, 255, 0.45);
}

/* 深度计外层：用 fixed 固定在视口两边，让它始终像整站海层语言，而不是某个 section 内部组件。 */
.depth-gauge {
    position: fixed;
    top: var(--depth-gauge-top);
    bottom: var(--depth-gauge-bottom);
    width: 74px;
    /* 74px 足够放下刻度线和数字标签，但又不会让两侧仪表显得过重。 */
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    pointer-events: none; /* 深度计只做空间提示，不抢页面上的真实交互 */
    z-index: 1200;
    opacity: calc(0.66 + var(--ocean-depth-progress) * 0.26);
    transform: translate3d(0, calc(var(--depth-gauge-shift) * -0.08), 0);
    filter: blur(0);
    transition:
        opacity 360ms ease,
        transform 520ms cubic-bezier(0.18, 0.78, 0.22, 1),
        filter 420ms ease;
}

.depth-gauge::before,
.depth-gauge::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.depth-gauge::before {
    top: 44px;
    bottom: 12px;
    width: 1px;
    margin: 0 auto;
    background: linear-gradient(
        180deg,
        rgba(196, 232, 255, 0.08) 0%,
        rgba(196, 232, 255, 0.3) 18%,
        rgba(196, 232, 255, 0.14) 56%,
        rgba(196, 232, 255, 0.34) 100%
    );
    box-shadow: 0 0 16px rgba(132, 205, 255, 0.16);
    opacity: calc(0.4 + var(--ocean-depth-progress) * 0.34);
}

.depth-gauge::after {
    inset: 36px 10px 8px;
    border-radius: 999px;
    background: linear-gradient(
        180deg,
        rgba(183, 227, 255, 0.08) 0%,
        rgba(183, 227, 255, 0.02) 22%,
        rgba(9, 58, 94, 0.08) 68%,
        rgba(183, 227, 255, 0.12) 100%
    );
    filter: blur(5px);
    opacity: calc(0.18 + var(--ocean-depth-progress) * 0.32);
}

/* .depth-gauge.left 的主要视觉与布局效果 */
.depth-gauge.left {
    left: var(--depth-gauge-side);
    align-items: flex-end;
}

/* .depth-gauge.right 的主要视觉与布局效果 */
.depth-gauge.right {
    right: var(--depth-gauge-side);
    align-items: flex-start;
}

/* 设置当前深度数字的样式和发光效果 */
.gauge-current {
    min-width: 58px;
    padding: 4px 10px;
    border-radius: 999px;
    border: 1px solid var(--depth-gauge-shell-border);
    background: var(--depth-gauge-shell-bg);
    color: rgba(255, 255, 255, 0.95);
    font-size: 14px;
    font-weight: 700;
    line-height: 1.2;
    text-align: center;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);
    box-shadow:
        0 8px 18px rgba(4, 27, 52, 0.18),
        0 0 0 1px rgba(202, 235, 255, 0.08),
        0 0 14px rgba(141, 214, 255, calc(0.08 + var(--ocean-depth-progress) * 0.12));
    transform: translate3d(0, calc(var(--depth-gauge-shift) * -0.18), 0) scale(var(--depth-gauge-current-scale));
    backdrop-filter: blur(2px);
    /* 当前深度数字始终悬在页面最前层，轻微模糊能让它像仪表窗，而不是普通标签。 */
    -webkit-backdrop-filter: blur(2px);
}

/* .gauge-markers 的主要视觉与布局效果 */
.gauge-markers {
    flex: 1;
    width: 100%;
    margin: 14px 0 6px;
    position: relative;
    display: block;
    overflow: hidden;
    contain: layout style;
}

.gauge-markers::before,
.gauge-markers::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.gauge-markers::before {
    left: 50%;
    width: 44px;
    transform: translateX(-50%);
    background: linear-gradient(
        180deg,
        rgba(219, 241, 255, 0) 0%,
        rgba(219, 241, 255, 0.12) 18%,
        rgba(219, 241, 255, 0.04) 56%,
        rgba(219, 241, 255, 0.16) 100%
    );
    filter: blur(4px);
    opacity: calc(0.2 + var(--ocean-depth-progress) * 0.28);
}

.gauge-markers::after {
    left: 50%;
    width: 2px;
    transform: translateX(-50%) translateY(var(--depth-gauge-shift)) scaleY(var(--depth-gauge-compression));
    transform-origin: center top;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.04) 24%, rgba(255, 255, 255, 0.18));
    opacity: calc(0.24 + var(--ocean-depth-progress) * 0.42);
}

/* 全站刻度带包装层：所有页面都使用同一套滚动式刻度带，保证跨页观感连贯。 */
.gauge-scale-tape {
    position: absolute;
    inset: 0 0 auto 0;
    display: block;
    will-change: transform;
    transform: translate3d(0, calc(var(--depth-gauge-tape-offset) + var(--depth-gauge-shift)), 0) scaleY(var(--depth-gauge-compression));
    transform-origin: center top;
    opacity: calc(0.72 + var(--ocean-depth-progress) * 0.18);
}

.gauge-scale-spacer {
    width: 100%;
}

/* 控制深度刻度线、标签和当前刻度的视觉状态 */
.depth-marker {
    display: grid;
    width: 100%;
    height: var(--depth-gauge-step-size);
    min-height: var(--depth-gauge-step-size);
    align-items: center;
    column-gap: 8px;
    opacity: 0.24; /* 默认只保留很轻的存在感，避免刻度线把页面两侧压得太重 */
    transform: translate3d(0, 0, 0) scale(1);
    transition: opacity 180ms ease, transform 220ms ease;
}

/* 控制深度刻度线、标签和当前刻度的视觉状态 */
.depth-gauge.left .depth-marker {
    grid-template-columns: 24px 32px;
    justify-content: end;
}

/* 控制深度刻度线、标签和当前刻度的视觉状态 */
.depth-gauge.right .depth-marker {
    grid-template-columns: 32px 24px;
    justify-content: start;
}

/* 控制深度刻度线、标签和当前刻度的视觉状态 */
.depth-marker-line {
    width: 10px;
    height: 1px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.42);
    box-shadow: 0 0 0 rgba(255, 255, 255, 0);
}

.depth-gauge.left .depth-marker-line {
    grid-column: 1;
    justify-self: end;
}

.depth-gauge.right .depth-marker-line {
    grid-column: 2;
    justify-self: start;
}

.depth-marker.medium .depth-marker-line {
    width: 16px;
    height: 1.5px;
    background: rgba(255, 255, 255, 0.6);
}

/* 控制深度刻度线、标签和当前刻度的视觉状态 */
.depth-marker.major .depth-marker-line {
    width: 24px;
    height: 2px;
    background: rgba(255, 255, 255, 0.78);
}

/* 控制深度刻度线、标签和当前刻度的视觉状态 */
.depth-marker-label {
    min-width: 32px;
    color: rgba(255, 255, 255, 0.75);
    font-size: 12px;
    font-weight: 600;
    line-height: 1;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);
}

/* 控制深度刻度线、标签和当前刻度的视觉状态 */
.depth-gauge.left .depth-marker-label {
    grid-column: 2;
    text-align: left;
}

/* 控制深度刻度线、标签和当前刻度的视觉状态 */
.depth-gauge.right .depth-marker-label {
    grid-column: 1;
    text-align: right;
}

/* 控制深度刻度线、标签和当前刻度的视觉状态 */
.depth-marker.is-reached {
    opacity: calc(0.42 + var(--ocean-depth-progress) * 0.24);
}

/* 控制深度刻度线、标签和当前刻度的视觉状态 */
.depth-marker.is-current {
    opacity: 1;
    transform: translate3d(0, calc(var(--depth-gauge-shift) * -0.06), 0) scale(calc(1.04 + (var(--depth-gauge-current-scale) - 1) * 0.6));
}

/* 控制深度刻度线、标签和当前刻度的视觉状态 */
.depth-marker.is-current .depth-marker-line {
    background: #ffffff;
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
}

/* 控制深度刻度线、标签和当前刻度的视觉状态 */
.depth-marker.is-current .depth-marker-label {
    color: #ffffff;
    text-shadow:
        0 1px 4px rgba(0, 0, 0, 0.35),
        0 0 12px rgba(161, 223, 255, 0.16);
}

@media (max-width: 780px) {
    .depth-gauge::after {
        filter: blur(4px);
        opacity: calc(0.14 + var(--ocean-depth-progress) * 0.24);
    }

    .gauge-current {
        backdrop-filter: blur(1px);
        -webkit-backdrop-filter: blur(1px);
    }

    .gauge-markers::before {
        filter: blur(3px);
    }
}

/* 设置当前深度数字的样式和发光效果 */
body.depth-gauge-interactive .gauge-current {
    animation: gauge-current-drift 2.8s ease-in-out infinite;
}

/* 控制深度刻度线、标签和当前刻度的视觉状态 */
body.depth-gauge-interactive .depth-marker {
    animation: none;
}

/* 控制深度刻度线、标签和当前刻度的视觉状态 */
body.depth-gauge-interactive .depth-marker.is-current {
    animation: gauge-marker-current-drift 2.8s ease-in-out infinite;
}

body.depth-gauge-interactive .depth-marker.is-current .depth-marker-line {
    box-shadow: 0 0 8px rgba(255, 255, 255, 0.42);
}

body.page-transition-active .depth-gauge {
    opacity: calc(0.28 + var(--ocean-depth-progress) * 0.16) !important;
    transform: translate3d(0, calc((var(--depth-gauge-shift) * -0.08) - 7px), 0) scale(0.985);
    filter: blur(2.4px);
}

body.page-transition-active .depth-gauge .gauge-current,
body.page-transition-active .depth-gauge .depth-marker.is-current {
    opacity: 0.9;
}

/* 定义 gauge-current-drift 动画的关键帧 */
@keyframes gauge-current-drift {
/* 控制动画在 0%, 100% 阶段的状态 */
    0%,
    100% {
        transform: translate3d(0, calc(var(--depth-gauge-shift) * -0.18), 0) scale(var(--depth-gauge-current-scale));
    }
/* 控制动画在 50% 阶段的状态 */
    50% {
        transform: translate3d(0, calc((var(--depth-gauge-shift) * -0.18) - 1px), 0) scale(calc(var(--depth-gauge-current-scale) + 0.006));
    }
}

/* 定义 gauge-marker-current-drift 动画的关键帧 */
@keyframes gauge-marker-current-drift {
/* 控制动画在 0%, 100% 阶段的状态 */
    0%,
    100% {
        transform: translate3d(0, calc(var(--depth-gauge-shift) * -0.06), 0) scale(calc(1.03 + (var(--depth-gauge-current-scale) - 1) * 0.48));
    }
/* 控制动画在 50% 阶段的状态 */
    50% {
        transform: translate3d(0, calc((var(--depth-gauge-shift) * -0.06) - 0.5px), 0) scale(calc(1.04 + (var(--depth-gauge-current-scale) - 1) * 0.54));
    }
}

/* 当前屏幕条件下的响应式样式 */
@media (max-width: 900px) {
/* 控制左右深度计的固定位置、尺寸和整体层级 */
    .depth-gauge {
        display: none;
    }
}