/* ============================================
   首页样式 - home.css
   ============================================
   作用：
   1. 负责首页首屏、热门潜点、目的地展台、潜水匹配、故事区与页脚的完整视觉风格。
   2. 把首页维持在“海面入口”这层较浅、较亮、较开放的海域气质里。
   3. 用留白、雾感、舞台化布局和 reveal 节奏建立首页的吸引力。
   阅读顺序：
   1. 首屏
   2. 热门潜点
   3. 目的地展台与潜水匹配
   4. 故事区、页脚与响应式
*/

/* 文件导读：首页样式的核心不是“信息排满”，而是先建立入口感，再把用户缓慢带向更深的模块。 */
/* .home-page 的主要视觉与布局效果 */
.home-page {
    padding-top: 70px;
    overflow-x: hidden;
    background: linear-gradient(180deg, #e8f7ff 0%, #0d3f6d 100%);
}

body.home-page {
    overflow-x: clip;
    overflow-y: visible;
}

.featured-destinations,
.dive-match,
.why-yanqi,
.footer {
    transition:
        filter 780ms ease,
        transform 920ms cubic-bezier(0.18, 0.8, 0.22, 1),
        opacity 620ms ease;
}

[data-home-layer].is-home-current {
    filter: saturate(1.04);
    transform: translate3d(0, 0, 0);
}

[data-home-layer].is-home-passed:not(.is-home-current) {
    filter: saturate(0.92) brightness(0.96);
}

body.home-page.home-guide-custom-travel-active {
    --home-guide-travel-direction: 1;
}

body.home-page.home-guide-custom-travel-active .page-stage,
body.home-page.home-guide-custom-travel-active > .navbar {
    will-change: transform;
    transition: none !important;
    backface-visibility: hidden;
}

body.home-page.home-guide-custom-travel-active .page-stage {
    transform: translate3d(0, 0, 0);
}

body.home-page.home-guide-custom-travel-active > .navbar {
    transform: translate3d(0, 0, 0);
}

body.home-guide-custom-travel-active .featured-destinations,
body.home-guide-custom-travel-active .dive-match,
body.home-guide-custom-travel-active .why-yanqi,
body.home-guide-custom-travel-active .footer {
    transition: opacity 220ms ease;
}

body[data-home-interaction='locked'] .hero-ocean-glow-one,
body[data-home-interaction='locked'] .hero-ocean-glow-two,
body[data-home-interaction='locked'] .hero-ocean-wave-one,
body[data-home-interaction='locked'] .hero-ocean-wave-two,
body[data-home-interaction='locked'] .hero-plankton,
body[data-home-interaction='locked'] .home-page.hero-awakened .today-sea-card,
body[data-home-interaction='locked'] .scroll-arrow,
body[data-home-interaction='locked'] .dive-match.is-display-visible .dive-match-surface.is-resting,
body[data-home-interaction='locked'] .story-river-glow,
body[data-home-interaction='locked'] .sea-guide-home .sea-guide-trigger,
body.home-guide-custom-travel-active .hero-ocean-glow-one,
body.home-guide-custom-travel-active .hero-ocean-glow-two,
body.home-guide-custom-travel-active .hero-ocean-wave-one,
body.home-guide-custom-travel-active .hero-ocean-wave-two,
body.home-guide-custom-travel-active .hero-plankton,
body.home-guide-custom-travel-active .home-page.hero-awakened .today-sea-card,
body.home-guide-custom-travel-active .scroll-arrow,
body.home-guide-custom-travel-active .dive-match.is-display-visible .dive-match-surface.is-resting,
body.home-guide-custom-travel-active .story-river-glow,
body.home-guide-custom-travel-active .sea-guide-home .sea-guide-trigger {
    animation-play-state: paused !important;
}

body[data-home-interaction='locked'] .curated-display-media::after,
body[data-home-interaction='locked'] .curated-nav-rail.is-cycling .curated-nav-refresh::after,
body.home-guide-custom-travel-active .curated-display-media::after,
body.home-guide-custom-travel-active .curated-nav-rail.is-cycling .curated-nav-refresh::after {
    animation-play-state: paused !important;
}

body.home-guide-custom-travel-active .curated-display-media::after,
body.home-guide-custom-travel-active .curated-nav-rail.is-cycling .curated-nav-refresh::after,
body.home-guide-custom-travel-active .dive-match.is-display-visible .dive-match-surface.is-resting,
body.home-guide-custom-travel-active .story-river-glow,
body.home-guide-custom-travel-active .sea-guide-home.is-visible .sea-guide-trigger {
    animation-play-state: paused !important;
}

body.home-guide-custom-travel-active .curated-waters-stage,
body.home-guide-custom-travel-active .curated-display-copy,
body.home-guide-custom-travel-active .dive-match-stage,
body.home-guide-custom-travel-active .dive-match-profile-panel,
body.home-guide-custom-travel-active .dive-match-focus-card,
body.home-guide-custom-travel-active .dive-match-card,
body.home-guide-custom-travel-active .sea-guide-home .sea-guide-panel,
body[data-home-interaction='locked'] .curated-waters-stage,
body[data-home-interaction='locked'] .curated-display-copy,
body[data-home-interaction='locked'] .dive-match-stage,
body[data-home-interaction='locked'] .dive-match-profile-panel,
body[data-home-interaction='locked'] .dive-match-focus-card,
body[data-home-interaction='locked'] .dive-match-card,
body[data-home-interaction='locked'] .sea-guide-home .sea-guide-panel,
body[data-home-interaction='locked'] .sea-guide-home .sea-guide-trigger,
body.home-guide-custom-travel-active .sea-guide-home .sea-guide-trigger {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

body.home-guide-custom-travel-active .curated-waters-stage::before,
body.home-guide-custom-travel-active .curated-waters-stage::after,
body.home-guide-custom-travel-active .curated-display-media::after,
body.home-guide-custom-travel-active .dive-match::before,
body.home-guide-custom-travel-active .dive-match::after,
body.home-guide-custom-travel-active .dive-match-stage::before,
body.home-guide-custom-travel-active .dive-match-focus-card::before,
body.home-guide-custom-travel-active .dive-match-focus-card::after,
body.home-guide-custom-travel-active .dive-match-profile-presets-focus-aura,
body.home-guide-custom-travel-active .story-river-glow,
body.home-guide-custom-travel-active .sea-guide-home .sea-guide-trigger::after,
body[data-home-interaction='locked'] .curated-waters-stage::before,
body[data-home-interaction='locked'] .curated-waters-stage::after,
body[data-home-interaction='locked'] .curated-display-media::after,
body[data-home-interaction='locked'] .dive-match::before,
body[data-home-interaction='locked'] .dive-match::after,
body[data-home-interaction='locked'] .dive-match-stage::before,
body[data-home-interaction='locked'] .dive-match-focus-card::before,
body[data-home-interaction='locked'] .dive-match-focus-card::after,
body[data-home-interaction='locked'] .dive-match-profile-presets-focus-aura,
body[data-home-interaction='locked'] .story-river-glow,
body[data-home-interaction='locked'] .sea-guide-home .sea-guide-trigger::after,
body[data-home-interaction='locked'] .sea-guide-home .sea-guide-panel::before,
body[data-home-interaction='locked'] .hero-bamboo-scroll-container::before,
body[data-home-interaction='locked'] .hero-bamboo-cards-wrapper::before,
body[data-home-interaction='locked'] .hero-bamboo-cards-wrapper::after,
body[data-home-interaction='locked'] .today-sea-card::before,
body.home-guide-custom-travel-active .sea-guide-home .sea-guide-panel::before,
body.home-guide-custom-travel-active .hero-bamboo-scroll-container::before,
body.home-guide-custom-travel-active .hero-bamboo-cards-wrapper::before,
body.home-guide-custom-travel-active .hero-bamboo-cards-wrapper::after,
body.home-guide-custom-travel-active .today-sea-card::before {
    filter: none !important;
    opacity: 0.34 !important;
}

body[data-home-interaction='locked'] .today-sea-card,
body[data-home-interaction='locked'] .hero-hotspots-shell .bamboo-card,
body[data-home-interaction='locked'] .bamboo-card,
body[data-home-interaction='locked'] .bamboo-card-image,
body[data-home-interaction='locked'] .bamboo-card-content,
body.home-guide-custom-travel-active .today-sea-card,
body.home-guide-custom-travel-active .hero-hotspots-shell .bamboo-card,
body.home-guide-custom-travel-active .bamboo-card,
body.home-guide-custom-travel-active .bamboo-card-image,
body.home-guide-custom-travel-active .bamboo-card-content {
    transition: none !important;
    animation-play-state: paused !important;
}

body[data-home-interaction='locked'] .today-sea-card,
body[data-home-interaction='locked'] .hero-hotspots-shell .bamboo-card,
body[data-home-interaction='locked'] .bamboo-card,
body[data-home-interaction='locked'] .bamboo-card-content,
body.home-guide-custom-travel-active .today-sea-card,
body.home-guide-custom-travel-active .hero-hotspots-shell .bamboo-card,
body.home-guide-custom-travel-active .bamboo-card,
body.home-guide-custom-travel-active .bamboo-card-content {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    box-shadow: 0 12px 22px rgba(8, 30, 45, 0.16) !important;
    filter: none !important;
}

body[data-home-interaction='locked'] .bamboo-card-image,
body.home-guide-custom-travel-active .bamboo-card-image {
    transform: none !important;
}

/* ============================================
   首屏区
   ============================================ */

/* 制制首页首屏区的背景层次、留白和整体舞台。 */
.hero-section {
    background:
        radial-gradient(circle at 50% 0%, rgba(255, 255, 255, 0.6) 0%, rgba(255, 255, 255, 0) 36%),
        linear-gradient(180deg, #eff9ff 0%, #cceafb 34%, #92c7e3 72%, #6ea9cb 100%);
    padding: calc(var(--spacing-2xl) + 12px) var(--spacing-lg) calc(var(--spacing-2xl) + 20px);
    /* 顶部和底部在全站大间距基础上再加一点，
       是为了让首页首屏 像“海面入口”一样更开阔，不会贴着导航或下一段内容。 */
    text-align: center;
    color: #153955;
    position: relative;
    overflow: hidden;
}

/* .hero-section::before：补一层顶部水光和雾感，让 首屏 更像海面入口。 */
.hero-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background:
        radial-gradient(circle at 50% 0%, rgba(255, 255, 255, 0.55) 0%, transparent 68%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.1), transparent 58%);
    pointer-events: none;
}

/* .hero-section::after：在底部接一层雾化过渡，帮助 首屏 自然衔接下个区块。 */
.hero-section::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -54px;
    height: 138px;
    background:
        linear-gradient(180deg, rgba(110, 169, 203, 0) 0%, rgba(139, 199, 229, 0.54) 44%, rgba(212, 239, 255, 0.94) 100%);
    filter: blur(28px);
    pointer-events: none;
    z-index: 0;
}

/* 制制 首屏 主文案容器的宽度、层级和入场动画 */
.hero-content {
    max-width: 1400px;
    margin: 0 auto;
    position: relative;
    z-index: 1;
    animation: slideDown 0.8s ease-out;
}

/* 定义 slideDown 动画的关键帧 */
@keyframes slideDown {
/* slideDown 在 from：从轻微上浮和透明状态开始进入。 */
    from {
        opacity: 0;
        transform: translateY(-30px);
    }
/* slideDown 在 to：回到稳定位置，完成首屏显现。 */
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* 设置首页主标题的字号、颜色和视觉重心 */
.hero-title {
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: var(--spacing-md);
    color: #153955;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.35);
}

/* 设置首页副标题的颜色、节奏和阅读距离 */
.hero-subtitle {
    font-size: 1.1rem;
    margin-bottom: 28px;
    color: #3b6481;
    opacity: 1;
    font-weight: 300;
}

/* ============================================
   Today Sea Card and Trip Planner
   ============================================ */

/* 设置今日海域卡片的玻璃外观、边框和漂浮质感 */
.today-sea-card {
    width: min(100%, 760px);
    /* 卡片理想宽度是 760px，但屏幕比这更窄时直接退到 100%。
       这样既不会在桌面端太散，也能在移动端自然收进版心。 */
    margin: 0 auto;
    padding: 24px 30px 20px;
    text-align: left;
    border-radius: 28px;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.26) 0%, rgba(228, 244, 252, 0.12) 100%),
        rgba(212, 236, 248, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.34);
    box-shadow:
        0 22px 44px rgba(14, 60, 94, 0.16),
        inset 0 1px 0 rgba(255, 255, 255, 0.34);
    backdrop-filter: blur(22px) saturate(140%);
    /* 背后海面被轻柔模糊后，今日海域卡更像浮在水上的玻璃片，而不是一块实心白卡。 */
    -webkit-backdrop-filter: blur(22px) saturate(140%);
    animation: sea-card-float 1s ease-out;
}

/* .today-sea-head 的主要视觉与布局效果 */
.today-sea-head {
    margin-bottom: 10px;
}

/* .today-sea-kicker 的主要视觉与布局效果 */
.today-sea-kicker {
    margin: 0 0 10px;
    font-size: 0.72rem;
    letter-spacing: 0.34em;
    text-transform: uppercase;
    color: rgba(32, 77, 109, 0.62);
}

/* .today-sea-title 的主要视觉与布局效果 */
.today-sea-title {
    margin: 0;
    font-family: "Noto Serif SC", "Source Han Serif SC", "Songti SC", serif;
    font-size: clamp(1.5rem, 2.2vw, 1.95rem);
    font-weight: 600;
    letter-spacing: 0.08em;
    color: #12324d;
}

/* .today-sea-copy 的主要视觉与布局效果 */
.today-sea-copy {
    margin: 0 0 16px;
    font-size: 1rem;
    line-height: 1.8;
    color: #2f5c79;
}

/* .today-sea-spot 的主要视觉与布局效果 */
.today-sea-spot {
    position: relative;
    width: 100%;
    padding: 16px 20px 15px;
    margin-bottom: 18px;
    border-radius: 22px;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.34) 0%, rgba(238, 248, 255, 0.18) 100%),
        rgba(202, 229, 244, 0.14);
    border: 1px solid rgba(255, 255, 255, 0.32);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28);
}

/* 制制今日推荐目的地卡片的可点击区域和互动反馈 */
.today-sea-spot-link {
    appearance: none;
    text-align: left;
    cursor: pointer;
    overflow: hidden;
    transition:
        transform 260ms ease,
        box-shadow 260ms ease,
        border-color 260ms ease,
        background-color 260ms ease;
}

/* .today-sea-spot-link::before：给卡片补一束斜向扫过的轻高光。 */
.today-sea-spot-link::before {
    content: "";
    position: absolute;
    inset: -40% auto auto -8%;
    width: 44%;
    height: 180%;
    background: linear-gradient(120deg, rgba(255, 255, 255, 0.46), rgba(255, 255, 255, 0));
    opacity: 0.22;
    transform: translateX(-24%) rotate(10deg);
    transition: transform 320ms ease, opacity 320ms ease;
    pointer-events: none;
}

/* .today-sea-spot-link::after：右上角的轻量动作提示，提醒用户可以继续进入详情。 */
.today-sea-spot-link::after {
    content: "查看海域";
    position: absolute;
    right: 18px;
    top: 18px;
    font-size: 0.76rem;
    letter-spacing: 0.12em;
    color: rgba(25, 73, 104, 0.72);
    transition: transform 260ms ease, color 260ms ease;
}

/* .today-sea-spot-link:hover 鼠标移入时的样式 */
.today-sea-spot-link:hover {
    transform: translateY(-4px) scale(1.01);
    border-color: rgba(96, 158, 193, 0.44);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.42) 0%, rgba(238, 248, 255, 0.24) 100%),
        rgba(202, 229, 244, 0.22);
    box-shadow:
        0 18px 32px rgba(28, 89, 124, 0.14),
        inset 0 1px 0 rgba(255, 255, 255, 0.34);
}

/* .today-sea-spot-link:hover::before：hover 时让高光更明显地扫过卡面。 */
.today-sea-spot-link:hover::before {
    opacity: 0.34;
    transform: translateX(18%) rotate(10deg);
}

/* .today-sea-spot-link:hover::after：hover 时轻微位移右上角提示，增加流动感。 */
.today-sea-spot-link:hover::after {
    transform: translateX(4px);
    color: rgba(20, 63, 91, 0.92);
}

/* .today-sea-spot-link:active 按下时的样式 */
.today-sea-spot-link:active {
    transform: translateY(-1px) scale(0.997);
}

/* .today-sea-label 的主要视觉与布局效果 */
.today-sea-label {
    margin: 0 0 10px;
    font-size: 0.76rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: rgba(40, 89, 122, 0.62);
}

/* .today-sea-name 的主要视觉与布局效果 */
.today-sea-name {
    margin: 0 0 10px;
    font-size: 1.22rem;
    font-weight: 700;
    color: #12324d;
}

/* .today-sea-name span 的主要视觉与布局效果 */
.today-sea-name span {
    margin-left: 6px;
    font-size: 0.92rem;
    font-weight: 500;
    letter-spacing: 0.06em;
    color: rgba(40, 89, 122, 0.72);
}

/* .today-sea-description 的主要视觉与布局效果 */
.today-sea-description {
    margin: 0;
    line-height: 1.75;
    color: #406781;
    max-width: calc(100% - 108px);
}

/* .today-sea-actions 的主要视觉与布局效果 */
.today-sea-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

/* 设置 首屏 操作按钮的外观、圆角和悬停过渡 */
.sea-action {
    appearance: none;
    border: none;
    border-radius: 999px;
    padding: 0.92rem 1.5rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 0.92rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    transition: transform 220ms ease, filter 220ms ease, box-shadow 220ms ease, background-color 220ms ease;
}

/* .sea-action:hover 鼠标移入时的样式 */
.sea-action:hover {
    transform: translateY(-2px);
}

/* 设置 首屏 操作按钮的外观、圆角和悬停过渡 */
.sea-action-primary {
    color: #f7fcff;
    background: linear-gradient(135deg, #18476c 0%, #2f7099 100%);
    box-shadow: 0 14px 28px rgba(19, 74, 111, 0.2);
}

/* .sea-action-primary:hover 鼠标移入时的样式 */
.sea-action-primary:hover {
    filter: brightness(1.04);
    box-shadow: 0 18px 34px rgba(19, 74, 111, 0.24);
}

/* 设置 首屏 操作按钮的外观、圆角和悬停过渡 */
.sea-action-secondary {
    color: #18476c;
    background: rgba(255, 255, 255, 0.22);
    border: 1px solid rgba(255, 255, 255, 0.34);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.24);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}

/* .sea-action-secondary:hover 鼠标移入时的样式 */
.sea-action-secondary:hover {
    background: rgba(255, 255, 255, 0.3);
}

/* 定义 sea-card-float 动画的关键帧 */
@keyframes sea-card-float {
/* sea-card-float 在 from：从轻微下沉开始进入。 */
    from {
        opacity: 0;
        transform: translateY(18px);
    }
/* sea-card-float 在 to：回到稳定位置，完成今日海域卡显现。 */
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ============================================
   首屏沉浸升级
   ============================================ */

/* 首屏 沉浸版舞台：把首页首屏升级成更完整的海面入口。 */
.hero-section {
    min-height: clamp(528px, 68vh, 720px);
    display: flex;
    align-items: center;
    justify-content: center;
    background:
        radial-gradient(circle at 50% -6%, rgba(242, 251, 255, 0.2) 0%, rgba(242, 251, 255, 0) 28%),
        linear-gradient(180deg, #081d2d 0%, #0d314b 26%, #155579 58%, #7bb9d2 100%);
    color: #eaf6ff;
    isolation: isolate;
    transition: filter 540ms ease, transform 680ms cubic-bezier(0.18, 0.78, 0.22, 1);
}

/* .hero-section::before：沉浸版 首屏 的上层雾光，负责补足浅层水光。 */
.hero-section::before {
    background:
        radial-gradient(circle at 50% 2%, rgba(255, 255, 255, 0.22) 0%, rgba(255, 255, 255, 0) 32%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.02), rgba(173, 220, 241, 0.12) 46%, rgba(255, 255, 255, 0) 100%);
    opacity: 0.18;
    transition: opacity 1.42s ease, filter 1.42s ease;
    filter: blur(12px);
    z-index: 0;
}

/* .home-page.hero-awakened .hero-section::before：首屏唤醒后把雾光真正点亮。 */
.home-page.hero-awakened .hero-section::before {
    opacity: 1;
    filter: blur(0);
}

/* .hero-section::after：沉浸版 首屏 的底部海雾衔接层。 */
.hero-section::after {
    bottom: -66px;
    height: 156px;
    background:
        linear-gradient(180deg, rgba(16, 57, 84, 0) 0%, rgba(58, 125, 163, 0.32) 42%, rgba(234, 246, 253, 0.9) 100%);
    filter: blur(30px);
    z-index: 0;
}

/* .hero-ocean-layers 的主要视觉与布局效果 */
.hero-ocean-layers {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
}

/* .hero-ocean-glow, .hero-ocean-wave, .hero-plankton 的主要视觉与布局效果 */
.hero-ocean-glow,
.hero-ocean-wave,
.hero-plankton {
    position: absolute;
    pointer-events: none;
    animation-play-state: var(--hero-play-state, running);
}

/* .hero-ocean-glow 的主要视觉与布局效果 */
.hero-ocean-glow {
    border-radius: 50%;
    filter: blur(14px);
    opacity: 0;
    transition: opacity 1.8s ease, transform 1.8s ease;
}

/* .home-page.hero-awakened .hero-ocean-glow 的主要视觉与布局效果 */
.home-page.hero-awakened .hero-ocean-glow {
    opacity: 1;
}

/* .hero-ocean-glow-one 的主要视觉与布局效果 */
.hero-ocean-glow-one {
    inset: -8% auto auto 50%;
    width: 58vw;
    height: 58vw;
    min-width: 520px;
    min-height: 520px;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.18) 0%, rgba(193, 227, 243, 0.12) 26%, rgba(193, 227, 243, 0) 66%);
    transform: translate3d(-50%, -12%, 0) scale(0.92);
    animation: hero-glow-drift 16s ease-in-out infinite alternate;
}

/* .hero-ocean-glow-two 的主要视觉与布局效果 */
.hero-ocean-glow-two {
    right: -8%;
    bottom: 8%;
    width: 34vw;
    height: 34vw;
    min-width: 300px;
    min-height: 300px;
    background: radial-gradient(circle, rgba(122, 184, 214, 0.16) 0%, rgba(122, 184, 214, 0) 64%);
    transform: translate3d(8%, 0, 0);
    animation: hero-glow-drift 18s ease-in-out infinite alternate-reverse;
}

/* .hero-ocean-wave 的主要视觉与布局效果 */
.hero-ocean-wave {
    inset: auto -14% -12% -14%;
    height: 64%;
    border-radius: 46%;
    opacity: 0.18;
    transform: translate3d(0, 24px, 0);
    transition: opacity 1.6s ease, transform 1.6s ease;
}

/* .home-page.hero-awakened .hero-ocean-wave 的主要视觉与布局效果 */
.home-page.hero-awakened .hero-ocean-wave {
    opacity: 1;
    transform: translate3d(0, 0, 0);
}

/* .hero-ocean-wave-one 的主要视觉与布局效果 */
.hero-ocean-wave-one {
    background:
        radial-gradient(circle at 50% 50%, rgba(165, 220, 241, 0.2) 0%, rgba(165, 220, 241, 0) 56%),
        linear-gradient(180deg, rgba(220, 242, 252, 0.08), rgba(220, 242, 252, 0));
    filter: blur(10px);
    animation: hero-wave-sway 18s ease-in-out infinite;
}

/* .hero-ocean-wave-two 的主要视觉与布局效果 */
.hero-ocean-wave-two {
    inset: 8% -10% auto -10%;
    height: 44%;
    background:
        radial-gradient(circle at 50% 36%, rgba(255, 255, 255, 0.14) 0%, rgba(255, 255, 255, 0) 52%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0));
    filter: blur(12px);
    animation: hero-wave-sway 24s ease-in-out infinite reverse;
}

/* .hero-plankton 的主要视觉与布局效果 */
.hero-plankton {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(235, 247, 255, 0.88) 0%, rgba(235, 247, 255, 0.06) 72%);
    box-shadow: 0 0 16px rgba(219, 240, 250, 0.18);
    opacity: 0;
    transition: opacity 1.4s ease;
}

/* .home-page.hero-awakened .hero-plankton 的主要视觉与布局效果 */
.home-page.hero-awakened .hero-plankton {
    opacity: 0.62;
}

/* .hero-plankton-one { left: 14%; top: 22%; animation: hero-plankton-float 18s linear i... 的主要视觉与布局效果 */
.hero-plankton-one { left: 14%; top: 22%; animation: hero-plankton-float 18s linear infinite; }
.hero-plankton-two { left: 22%; top: 58%; animation: hero-plankton-float 22s linear infinite 1.8s; }
.hero-plankton-three { left: 42%; top: 16%; animation: hero-plankton-float 19s linear infinite 0.9s; }
.hero-plankton-four { right: 18%; top: 28%; animation: hero-plankton-float 24s linear infinite 1.2s; }
.hero-plankton-five { right: 26%; top: 62%; animation: hero-plankton-float 20s linear infinite 2.4s; }
.hero-plankton-six { left: 68%; top: 46%; animation: hero-plankton-float 21s linear infinite 0.4s; }

.hero-content {
    max-width: 1240px;
    display: grid;
    justify-items: center;
    gap: 0;
    animation: none;
    transition: transform 580ms cubic-bezier(0.18, 0.78, 0.22, 1), filter 520ms ease, opacity 420ms ease;
}


/* 首屏标题、副文案和今日海域卡片的统一入场前状态。 */
.hero-title,
.hero-subtitle,
.today-sea-card {
    opacity: 0;
    filter: blur(18px);
    transform: translate3d(0, 26px, 0);
    transition:
        opacity 0.9s ease,
        transform 1.05s cubic-bezier(0.18, 0.84, 0.22, 1),
        filter 1.05s ease;
}

/* 首屏 唤醒后，让主标题先一步显现。 */
.home-page.hero-awakened .hero-title {
    opacity: 1;
    filter: blur(0);
    transform: translate3d(0, 0, 0);
    transition-delay: 340ms;
}

/* 首屏 唤醒后，让副标题跟着变清晰。 */
.home-page.hero-awakened .hero-subtitle {
    opacity: 1;
    filter: blur(0);
    transform: translate3d(0, 0, 0);
    transition-delay: 560ms;
}

/* 首屏 唤醒后，最后再托起今日海域卡片，形成更完整的首屏节奏。 */
.home-page.hero-awakened .today-sea-card {
    opacity: 1;
    filter: blur(0);
    transform: translate3d(0, 0, 0);
    transition-delay: 820ms;
    animation: hero-card-breathe 8.8s ease-in-out 2.3s infinite;
    animation-play-state: var(--hero-play-state, running);
}

.home-page.home-depth-entry-settled .hero-section::before {
    transition: none !important;
}

.home-page.home-depth-entry-settled :is(
    .hero-ocean-glow,
    .hero-ocean-wave,
    .hero-plankton,
    .hero-title,
    .hero-subtitle,
    .today-sea-card,
    .hero-hotspots-head,
    .hero-bamboo-scroll-container,
    .hero-hotspots-shell,
    .hero-memory-ribbon,
    .hero-observation-rail
) {
    transition: none !important;
    animation-play-state: paused !important;
}

.home-page.home-depth-entry-settled :is(
    .hero-title,
    .hero-subtitle,
    .today-sea-card,
    .hero-hotspots-head,
    .hero-bamboo-scroll-container,
    .hero-hotspots-shell
) {
    opacity: 1;
    filter: blur(0);
    transform: translate3d(0, 0, 0);
}

body.home-page.page-transition-active .page-stage * {
    animation-play-state: paused !important;
}

/* 首屏 主标题：制制宽度、亮度和阴影层次。 */
.hero-title {
    max-width: 760px;
    margin-bottom: 18px;
    color: #f3fbff;
    text-shadow:
        0 1px 0 rgba(255, 255, 255, 0.12),
        0 18px 42px rgba(4, 21, 34, 0.22);
}

/* 首屏 副标题：制制阅读宽度和更柔和的浅海色。 */
.hero-subtitle {
    max-width: 640px;
    margin-bottom: 34px;
    color: rgba(220, 237, 247, 0.82);
}

/* 今日海域主卡：把首页推荐海域做成一张漂浮玻璃卡。 */
.today-sea-card {
    position: relative;
    width: min(100%, 860px);
    padding: 34px 36px 28px;
    border-radius: 36px;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.16) 0%, rgba(214, 236, 248, 0.08) 26%, rgba(150, 202, 224, 0.03) 100%),
        linear-gradient(135deg, rgba(7, 34, 52, 0.8) 0%, rgba(10, 44, 66, 0.52) 54%, rgba(12, 58, 84, 0.26) 100%);
    border: 1px solid rgba(231, 244, 251, 0.15);
    box-shadow:
        0 38px 72px rgba(4, 20, 31, 0.3),
        0 0 56px rgba(84, 151, 182, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.14),
        inset 0 -28px 48px rgba(6, 29, 45, 0.14);
    backdrop-filter: blur(30px) saturate(132%);
    -webkit-backdrop-filter: blur(30px) saturate(132%);
    overflow: hidden;
}

/* 首屏 热门潜点舞台外壳：给滚动卡片区一层独立的观察窗。 */
.hero-hotspots-shell {
    width: min(100%, 1380px);
    max-width: none;
    margin-inline: auto;
    padding: 34px 22px 28px;
    text-align: left;
    isolation: isolate;
}

/* 首屏 热门潜点标题区的默认隐藏状态。 */
.hero-hotspots-head {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
    gap: 12px;
    margin-bottom: 32px;
    text-align: center;
    opacity: 0;
    filter: blur(14px);
    transform: translate3d(0, 18px, 0);
    transition:
        opacity 0.72s ease,
        transform 0.84s cubic-bezier(0.18, 0.84, 0.22, 1),
        filter 0.84s ease;
}

/* 首屏 唤醒后，让热门潜点标题区进入可见状态。 */
.home-page.hero-awakened .hero-hotspots-head {
    opacity: 1;
    filter: blur(0);
    transform: translate3d(0, 0, 0);
    transition-delay: 980ms;
}

.hero-hotspots-head {
    flex: 0 0 auto;
}

/* 首屏 热门潜点英文 kicker：建立轻量档案感。 */
.hero-hotspots-kicker {
    margin: 0;
    font-size: 0.72rem;
    letter-spacing: 0.42em;
    text-transform: uppercase;
    color: rgba(188, 222, 238, 0.58);
}

/* 首屏 热门潜点标题文案容器：制制两层文案的对齐和宽度。 */
.hero-hotspots-copy {
    display: grid;
    gap: 10px;
    justify-items: center;
    max-width: 620px;
}

/* 首屏 热门潜点主标题：作为这块观察窗的视觉锚点。 */
.hero-hotspots-title {
    margin: 0;
    font-family: "Noto Serif SC", "Source Han Serif SC", "Songti SC", serif;
    font-size: clamp(1.6rem, 2.45vw, 2.08rem);
    font-weight: 600;
    letter-spacing: 0.12em;
    color: #f3fbff;
    text-shadow: 0 10px 28px rgba(4, 22, 34, 0.22);
}

/* 首屏 热门潜点副文案：负责补足阅读节奏和场景气氛。 */
.hero-hotspots-subtitle {
    margin: 0;
    max-width: 560px;
    font-size: 1rem;
    line-height: 1.92;
    color: rgba(214, 233, 243, 0.72);
    margin-inline: auto;
}

/* 首屏 竹简滚动容器：承接热门海域卡片和左右流向按钮。 */
.hero-bamboo-scroll-container {
    position: relative;
    z-index: 1;
    flex: 0 0 auto;
    width: 100%;
    align-items: stretch;
    gap: 18px;
    padding: 8px 6px 12px;
    opacity: 0;
    filter: blur(16px);
    transform: translate3d(0, 24px, 0);
    transition:
        opacity 0.82s ease,
        transform 0.96s cubic-bezier(0.18, 0.84, 0.22, 1),
        filter 0.96s ease;
}

.hero-bamboo-scroll-container::before {
    content: "";
    position: absolute;
    inset: 8px 28px 12px;
    border-radius: 30px;
    background:
        linear-gradient(180deg, rgba(237, 247, 252, 0.04) 0%, rgba(237, 247, 252, 0.01) 100%),
        rgba(5, 27, 41, 0.28);
    border: 1px solid rgba(223, 242, 250, 0.08);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.08),
        inset 0 -14px 28px rgba(3, 18, 30, 0.2);
    pointer-events: none;
}

/* 首屏 唤醒后，让滚动舞台整体慢慢浮现。 */
.home-page.hero-awakened .hero-bamboo-scroll-container {
    opacity: 1;
    filter: blur(0);
    transform: translate3d(0, 0, 0);
    transition-delay: 1120ms;
}


/* 今日海域卡片的深海玻璃版本：统一 首屏 内的视觉厚度。 */
.today-sea-card {
    position: relative;
    width: min(100%, 860px);
    padding: 34px 36px 28px;
    border-radius: 36px;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.16) 0%, rgba(214, 236, 248, 0.08) 26%, rgba(150, 202, 224, 0.03) 100%),
        linear-gradient(135deg, rgba(7, 34, 52, 0.8) 0%, rgba(10, 44, 66, 0.52) 54%, rgba(12, 58, 84, 0.26) 100%);
    border: 1px solid rgba(231, 244, 251, 0.15);
    box-shadow:
        0 38px 72px rgba(4, 20, 31, 0.3),
        0 0 56px rgba(84, 151, 182, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.14),
        inset 0 -28px 48px rgba(6, 29, 45, 0.14);
    backdrop-filter: blur(30px) saturate(132%);
    -webkit-backdrop-filter: blur(30px) saturate(132%);
    overflow: hidden;
}

/* 首屏 热门潜点舞台外壳：限制宽度并给滚动区留出缓冲。 */
.hero-hotspots-shell {
    width: min(100%, 1380px);
    max-width: none;
    margin-inline: auto;
    padding: 34px 22px 28px;
    text-align: left;
    isolation: isolate;
}

/* 首屏 热门潜点标题区：默认先模糊、下沉，等待首屏唤醒。 */
.hero-hotspots-head {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
    gap: 12px;
    margin-bottom: 32px;
    text-align: center;
    opacity: 0;
    filter: blur(14px);
    transform: translate3d(0, 18px, 0);
    transition:
        opacity 0.72s ease,
        transform 0.84s cubic-bezier(0.18, 0.84, 0.22, 1),
        filter 0.84s ease;
}

/* 首屏 唤醒后，让标题区恢复清晰和稳定位置。 */
.home-page.hero-awakened .hero-hotspots-head {
    opacity: 1;
    filter: blur(0);
    transform: translate3d(0, 0, 0);
    transition-delay: 980ms;
}

/* 首屏 热门潜点英文小标：维持轻量的日志感。 */
.hero-hotspots-kicker {
    margin: 0;
    font-size: 0.72rem;
    letter-spacing: 0.42em;
    text-transform: uppercase;
    color: rgba(188, 222, 238, 0.58);
}

/* 首屏 热门潜点标题文案容器：让标题和副文案保持居中节奏。 */
.hero-hotspots-copy {
    display: grid;
    gap: 10px;
    justify-items: center;
    max-width: 620px;
}

/* 首屏 热门潜点主标题：用 serif 字体强化海域观察台的仪式感。 */
.hero-hotspots-title {
    margin: 0;
    font-family: "Noto Serif SC", "Source Han Serif SC", "Songti SC", serif;
    font-size: clamp(1.6rem, 2.45vw, 2.08rem);
    font-weight: 600;
    letter-spacing: 0.12em;
    color: #f3fbff;
    text-shadow: 0 10px 28px rgba(4, 22, 34, 0.22);
}

/* 首屏 热门潜点副文案：制制阅读宽度和更柔和的气氛色。 */
.hero-hotspots-subtitle {
    margin: 0;
    max-width: 560px;
    font-size: 1rem;
    line-height: 1.92;
    color: rgba(214, 233, 243, 0.72);
    margin-inline: auto;
}

/* 首屏 竹简滚动容器：作为卡片轨道的统一舞台。 */
.hero-bamboo-scroll-container {
    position: relative;
    z-index: 1;
    align-items: stretch;
    gap: 18px;
    padding: 8px 6px 12px;
    opacity: 0;
    filter: blur(16px);
    transform: translate3d(0, 24px, 0);
    transition:
        opacity 0.82s ease,
        transform 0.96s cubic-bezier(0.18, 0.84, 0.22, 1),
        filter 0.96s ease;
}

.hero-bamboo-scroll-container::before {
    content: "";
    position: absolute;
    inset: 8px 28px 12px;
    border-radius: 30px;
    background:
        linear-gradient(180deg, rgba(237, 247, 252, 0.04) 0%, rgba(237, 247, 252, 0.01) 100%),
        rgba(5, 27, 41, 0.28);
    border: 1px solid rgba(223, 242, 250, 0.08);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.08),
        inset 0 -14px 28px rgba(3, 18, 30, 0.2);
    pointer-events: none;
}

/* 首屏 唤醒后，让竹简滚动舞台完整显现。 */
.home-page.hero-awakened .hero-bamboo-scroll-container {
    opacity: 1;
    filter: blur(0);
    transform: translate3d(0, 0, 0);
    transition-delay: 1120ms;
}
/* 首屏 内的卡片轨道留更舒服的呼吸空间。 */
.hero-bamboo-cards-wrapper {
    padding: 14px 0 16px;
    min-height: 0;
    position: relative;
    isolation: isolate;
    contain: layout paint;
    perspective: 1200px;
    perspective-origin: 50% 54%;
}

/* 压低轨道内边距，避免 首屏 内卡片显得太松散 */
.hero-hotspots-shell .bamboo-cards-content {
    padding: 8px 2px;
    gap: 14px;
    transform-style: preserve-3d;
}

/* 首屏 内的热门卡片改成更深海、更柔和的玻璃卡，不再像普通列表卡。 */
.hero-hotspots-shell .bamboo-card {
    --card-scale: 0.986;
    --physics-shadow-y: 18px;
    --physics-shadow-blur: 34px;
    --physics-shadow-alpha: 0.16;
    flex: 0 0 336px;
    min-width: 336px;
    border-radius: 32px;
    background:
        linear-gradient(180deg, rgba(246, 252, 255, 0.12) 0%, rgba(213, 236, 248, 0.05) 100%),
        rgba(7, 33, 49, 0.4);
    border: 1px solid rgba(221, 242, 252, 0.1);
    box-shadow:
        0 var(--physics-shadow-y) var(--physics-shadow-blur) rgba(5, 22, 34, var(--physics-shadow-alpha)),
        0 0 24px rgba(107, 183, 219, 0.04),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(22px) saturate(138%);
    -webkit-backdrop-filter: blur(22px) saturate(138%);
    filter: blur(0) saturate(0.98) brightness(0.98);
    transform-origin: 50% 82%;
    transform-style: preserve-3d;
    backface-visibility: hidden;
}

/* 首屏 内卡片悬停时只轻轻上浮并提亮边缘 */
.hero-hotspots-shell .bamboo-card:hover {
    --lift-y: -6px;
    --card-scale: 1.002;
    box-shadow:
        0 calc(var(--physics-shadow-y) + 8px) calc(var(--physics-shadow-blur) + 14px) rgba(5, 22, 34, calc(var(--physics-shadow-alpha) + 0.06)),
        0 0 36px rgba(136, 205, 236, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.16);
    border-color: rgba(227, 245, 252, 0.18);
    filter: blur(0) saturate(1.01) brightness(1);
}

/* 首屏 内的激活卡片用更克制的潮汐描边来提示当前聚焦项 */
.hero-hotspots-shell .bamboo-card.active {
    --card-scale: 1.026;
    box-shadow:
        0 calc(var(--physics-shadow-y) + 16px) calc(var(--physics-shadow-blur) + 22px) rgba(5, 22, 34, calc(var(--physics-shadow-alpha) + 0.1)),
        0 0 0 1px rgba(194, 231, 247, 0.24),
        0 0 44px rgba(134, 205, 236, 0.14);
    border-color: rgba(214, 240, 250, 0.22);
    filter: blur(0) saturate(1.03) brightness(1);
}

/* 调整 首屏 内卡片图片比例，让海面与潜点画面更舒展。 */
.hero-hotspots-shell .bamboo-card-image {
    height: 210px;
}

/* 首屏 内卡片底部内容层改成更深海的雾面玻璃 */
.hero-hotspots-shell .bamboo-card-content {
    margin-top: -30px;
    padding: calc(var(--spacing-lg) + 12px) 22px 20px;
    background:
        linear-gradient(180deg, rgba(13, 49, 71, 0.12) 0%, rgba(8, 33, 50, 0.58) 24%, rgba(6, 25, 38, 0.88) 100%);
    border-top: 1px solid rgba(235, 247, 252, 0.1);
    box-shadow:
        0 -18px 34px rgba(7, 28, 44, 0.16),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(18px) saturate(140%);
    -webkit-backdrop-filter: blur(18px) saturate(140%);
}

/* 首屏 内卡片标题用更亮的冷白蓝，强化海域名称识别。 */
.hero-hotspots-shell .bamboo-card-title {
    color: #f2fbff;
    font-size: 1.08rem;
    letter-spacing: 0.03em;
}

/* 首屏 内卡片副文案压成更轻、更安静的辅助信息。 */
.hero-hotspots-shell .bamboo-card-tagline {
    color: rgba(208, 230, 240, 0.76);
    line-height: 1.6;
}

/* 首屏 内价格和评分区域也切到更冷静的浅海色。 */
.hero-hotspots-shell .bamboo-card-footer {
    border-top-color: rgba(214, 234, 244, 0.1);
}

.hero-hotspots-shell .bamboo-card-price {
    color: #dff4ff;
}

.hero-hotspots-shell .bamboo-card-flow {
    color: rgba(176, 221, 233, 0.76);
}

/* 首屏 内底部按钮最后再出现，形成更完整的首屏节奏。 */
.hero-hotspots-actions {
    position: relative;
    z-index: 1;
    flex: 0 0 auto;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    margin-top: auto;
    padding-top: 20px;
}

.hero-hotspots-actions::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    translate: -50% 0;
    width: min(100%, 620px);
    height: 1px;
    background: linear-gradient(90deg, rgba(185, 219, 235, 0), rgba(185, 219, 235, 0.22), rgba(185, 219, 235, 0));
}

.hero-hotspots-actions .sea-action {
    min-height: 54px;
    width: 100%;
    border-radius: 999px;
    justify-content: center;
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}

.hero-hotspots-actions .sea-action-primary {
    background:
        linear-gradient(135deg, rgba(20, 61, 93, 0.88) 0%, rgba(29, 94, 128, 0.74) 100%);
    box-shadow:
        0 18px 34px rgba(7, 30, 46, 0.18),
        0 0 24px rgba(123, 193, 227, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

.hero-hotspots-actions .sea-action-primary:hover {
    box-shadow:
        0 22px 38px rgba(7, 30, 46, 0.22),
        0 0 28px rgba(137, 201, 232, 0.12),
        inset 0 1px 0 rgba(255, 255, 255, 0.14);
}

.hero-hotspots-actions .sea-action-secondary {
    background:
        linear-gradient(180deg, rgba(240, 248, 252, 0.08) 0%, rgba(219, 238, 247, 0.04) 100%),
        rgba(8, 35, 52, 0.34);
    border-color: rgba(237, 246, 252, 0.14);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.12),
        0 14px 26px rgba(5, 18, 27, 0.12);
}

/* ============================================
   First Group Enhancement
   ============================================ */

.hero-subtitle {
    margin-bottom: 16px;
}

.hero-memory-ribbon {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 30px;
    padding: 11px 18px;
    border-radius: 999px;
    background:
        linear-gradient(180deg, rgba(245, 251, 255, 0.16), rgba(186, 220, 239, 0.08)),
        rgba(8, 35, 52, 0.34);
    border: 1px solid rgba(216, 239, 249, 0.14);
    box-shadow:
        0 20px 38px rgba(4, 20, 31, 0.16),
        inset 0 1px 0 rgba(255, 255, 255, 0.14);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    color: rgba(229, 242, 248, 0.88);
    opacity: 0;
    filter: blur(14px);
    transform: translate3d(0, 20px, 0);
    transition:
        opacity 0.82s ease,
        transform 0.96s cubic-bezier(0.18, 0.84, 0.22, 1),
        filter 0.96s ease;
}

.hero-memory-ribbon::before {
    content: "";
    position: absolute;
    inset: 1px;
    border-radius: inherit;
    background: linear-gradient(120deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0) 42%);
    pointer-events: none;
}

.home-page.hero-awakened .hero-memory-ribbon {
    opacity: 1;
    filter: blur(0);
    transform: translate3d(0, 0, 0);
    transition-delay: 700ms;
}

.hero-memory-label,
.hero-memory-note,
.hero-memory-divider {
    position: relative;
    z-index: 1;
}

.hero-memory-label {
    font-size: 0.68rem;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: rgba(194, 224, 238, 0.72);
}

.hero-memory-divider {
    width: 24px;
    height: 1px;
    background: linear-gradient(90deg, rgba(184, 221, 239, 0), rgba(184, 221, 239, 0.72), rgba(184, 221, 239, 0));
}

.hero-memory-note {
    font-size: 0.9rem;
    line-height: 1.6;
    color: rgba(230, 242, 248, 0.84);
}

.hero-hotspots-shell {
    padding-top: 38px;
    border: 1px solid rgba(225, 243, 251, 0.12);
    box-shadow:
        0 42px 80px rgba(4, 20, 31, 0.28),
        0 0 40px rgba(87, 154, 186, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.14),
        inset 0 -28px 48px rgba(6, 29, 45, 0.14);
}

.hero-hotspots-shell::before {
    content: "";
    position: absolute;
    inset: 18px 22px auto;
    height: 118px;
    border-radius: 24px;
    background:
        linear-gradient(90deg, rgba(189, 225, 241, 0.12) 0 1px, transparent 1px 100%),
        linear-gradient(180deg, rgba(189, 225, 241, 0.08) 0 1px, transparent 1px 100%);
    background-size: 54px 100%, 100% 28px;
    mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0));
    opacity: 0.28;
    pointer-events: none;
    z-index: 0;
}

.hero-hotspots-head {
    gap: 16px;
}

.hero-observation-rail {
    position: relative;
    z-index: 1;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    width: min(100%, 780px);
    opacity: 0;
    filter: blur(10px);
    transform: translate3d(0, 16px, 0);
    transition:
        opacity 0.72s ease,
        transform 0.84s cubic-bezier(0.18, 0.84, 0.22, 1),
        filter 0.84s ease;
}

.home-page.hero-awakened .hero-observation-rail {
    opacity: 1;
    filter: blur(0);
    transform: translate3d(0, 0, 0);
    transition-delay: 1060ms;
}

.hero-observation-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 34px;
    padding: 0 14px;
    border-radius: 999px;
    background:
        linear-gradient(180deg, rgba(242, 249, 253, 0.1), rgba(184, 220, 239, 0.06)),
        rgba(8, 35, 52, 0.28);
    border: 1px solid rgba(218, 240, 249, 0.12);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.12),
        0 12px 24px rgba(7, 28, 43, 0.12);
    font-size: 0.78rem;
    line-height: 1;
    color: rgba(223, 238, 246, 0.8);
}

.hero-bamboo-scroll-container::before {
    background:
        linear-gradient(180deg, rgba(237, 247, 252, 0.05) 0%, rgba(237, 247, 252, 0.01) 100%),
        rgba(5, 27, 41, 0.34);
}

.dive-match-intro {
    gap: 16px;
}

.dive-match-observation-note {
    margin: 0;
    max-width: 48ch;
    padding-left: 16px;
    border-left: 1px solid rgba(179, 218, 236, 0.24);
    font-size: 0.9rem;
    line-height: 1.82;
    color: rgba(197, 225, 238, 0.68);
}

.why-yanqi[data-home-layer="story"] {
    position: relative;
}

.why-yanqi[data-home-layer="story"] .story-shell::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -20px;
    height: 1px;
    background: linear-gradient(90deg, rgba(189, 223, 239, 0), rgba(189, 223, 239, 0.22), rgba(189, 223, 239, 0));
    opacity: 0.8;
    pointer-events: none;
}

.footer-shell {
    display: grid;
    gap: 34px;
}

.footer-arrival-bridge {
    position: relative;
    max-width: 760px;
    margin: 0 auto;
    padding: 18px 24px 0;
    text-align: center;
}

.footer-arrival-bridge::after {
    content: "";
    display: block;
    width: min(100%, 520px);
    height: 1px;
    margin: 18px auto 0;
    background: linear-gradient(90deg, rgba(188, 221, 241, 0), rgba(188, 221, 241, 0.32), rgba(188, 221, 241, 0));
}

.footer-arrival-kicker {
    margin: 0 0 8px;
    font-size: 0.7rem;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: rgba(191, 221, 238, 0.62);
}

.footer-arrival-copy {
    margin: 0;
    line-height: 1.82;
    color: rgba(194, 217, 232, 0.74);
}

.footer-brand-stage {
    margin-bottom: 46px;
}

.footer-companion {
    position: relative;
    overflow: hidden;
}

.footer-companion::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(120deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0) 46%);
    pointer-events: none;
}

@media (max-width: 960px) {
    .hero-memory-ribbon {
        flex-wrap: wrap;
        justify-content: center;
        padding-inline: 16px;
    }

    .hero-hotspots-shell {
        padding-top: 34px;
    }

    .hero-observation-rail {
        width: 100%;
    }

    .footer-arrival-bridge {
        padding-inline: 0;
    }
}

@media (max-width: 720px) {
    .hero-memory-ribbon {
        margin-bottom: 24px;
        border-radius: 28px;
    }

    .hero-memory-divider {
        display: none;
    }

    .hero-memory-note {
        text-align: center;
    }

    .hero-observation-rail {
        gap: 8px;
    }

    .hero-observation-chip {
        width: 100%;
        min-height: 38px;
    }

    .dive-match-observation-note {
        padding-left: 12px;
        font-size: 0.88rem;
    }
}

/* .today-sea-card::before：给今日海域卡补一层浅水高光。 */
.today-sea-card::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 18% 10%, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0) 22%),
        radial-gradient(circle at 82% 84%, rgba(116, 176, 204, 0.12), rgba(116, 176, 204, 0) 26%),
        linear-gradient(120deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0) 34%);
    pointer-events: none;
}

.hero-hotspots-shell::after {
    content: "";
    position: absolute;
    inset: auto 10% 12px;
    height: 120px;
    border-radius: 999px;
    background: radial-gradient(circle, rgba(88, 155, 184, 0.18) 0%, rgba(88, 155, 184, 0) 72%);
    filter: blur(28px);
    opacity: 0.5;
    pointer-events: none;
    z-index: 0;
}

.hero-bamboo-cards-wrapper::before,
.hero-bamboo-cards-wrapper::after {
    content: "";
    position: absolute;
    top: 8px;
    bottom: 8px;
    width: 28px;
    pointer-events: none;
    z-index: 2;
}

.hero-bamboo-cards-wrapper::before {
    left: 0;
    background: linear-gradient(90deg, rgba(8, 34, 51, 0.74) 0%, rgba(8, 34, 51, 0.24) 44%, rgba(8, 34, 51, 0) 100%);
}

.hero-bamboo-cards-wrapper::after {
    right: 0;
    background: linear-gradient(270deg, rgba(8, 34, 51, 0.74) 0%, rgba(8, 34, 51, 0.24) 44%, rgba(8, 34, 51, 0) 100%);
}

.home-page.hero-awakened .hero-hotspots-shell {
    animation:
        sea-card-float 1s ease-out,
        hero-hotspots-breathe 9.6s ease-in-out 1.5s infinite alternate;
}

/* 大屏桌面端放宽 首屏 内的今日海域舞台。
   只在宽屏下扩展可视窗口，减少左右空位浪费，让轨道能多露出相邻海域内容。 */
@media (min-width: 1600px) {
    .hero-content {
        max-width: 1520px;
    }

    .hero-hotspots-stage-shell {
        max-width: min(100%, 1500px);
    }

    .hero-hotspots-shell {
        width: min(100%, 1460px);
        padding-inline: 20px;
    }

    .hero-bamboo-scroll-container::before {
        inset: 8px 28px 12px;
    }

    .hero-bamboo-cards-wrapper::before,
    .hero-bamboo-cards-wrapper::after {
        width: 28px;
    }

    .hero-hotspots-shell .bamboo-cards-content {
        padding-inline: 2px;
        gap: 16px;
    }
}

@media (max-width: 1179px) {
    .hero-hotspots-stage-shell {
        width: 100%;
        max-width: none;
        min-width: 0;
        min-height: 0;
    }

    .hero-hotspots-stage-shell > .hero-hotspots-shell {
        height: auto;
        min-height: 0;
    }

    .hero-hotspots-resize-layer {
        display: none;
    }

    .hero-hotspots-stage-hud {
        display: none;
    }
}

@keyframes hero-hotspots-breathe {
    0% {
        transform: translate3d(0, 0, 0);
        box-shadow:
            0 38px 72px rgba(4, 20, 31, 0.3),
            0 0 56px rgba(84, 151, 182, 0.08),
            inset 0 1px 0 rgba(255, 255, 255, 0.14),
            inset 0 -28px 48px rgba(6, 29, 45, 0.14);
    }
    100% {
        transform: translate3d(0, -4px, 0);
        box-shadow:
            0 42px 76px rgba(4, 20, 31, 0.32),
            0 0 62px rgba(102, 170, 198, 0.1),
            inset 0 1px 0 rgba(255, 255, 255, 0.16),
            inset 0 -30px 52px rgba(6, 29, 45, 0.16);
    }
}

/* hero-hotspots-stage-shell：
   这层是首页“今日海域舞台”的可调外壳。拖拽时只改变这一层的宽高，
   里面原有的标题、滚动卡片和按钮继续按既有布局重排，不去改动舞台本身的交互语义。 */
.hero-hotspots-stage-shell {
    --hero-hotspots-stage-width: min(100%, 1380px);
    --hero-hotspots-stage-height: auto;
    --hero-hotspots-stage-shift-x: 0px;
    position: relative;
    width: var(--hero-hotspots-stage-width);
    max-width: min(100%, 1460px);
    height: var(--hero-hotspots-stage-height, auto);
    margin: 0 auto;
    transform: translate3d(var(--hero-hotspots-stage-shift-x), 0, 0);
}

.yanqi-stage-debug .hero-hotspots-stage-shell {
    margin-bottom: 38px;
}

/* 让真正的今日海域舞台跟随外壳尺寸伸缩，避免外层变大后内部仍卡在旧宽度。 */
.hero-hotspots-stage-shell > .hero-hotspots-shell {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: none;
    min-height: 100%;
    height: auto;
}

/* 首页舞台的缩放句柄与尺寸 HUD 默认只保留给调试态，
   正常浏览时不再把“可编辑画布”的语言暴露在前台。 */
.hero-hotspots-stage-hud,
.hero-hotspots-resize-layer {
    display: none;
}

.yanqi-stage-debug .hero-hotspots-stage-hud {
    display: inline-flex;
}

.yanqi-stage-debug .hero-hotspots-resize-layer {
    display: block;
}

/* hero-hotspots-stage-hud：
   给可缩放舞台补一层轻量状态反馈。它像漂在水面上的仪表签，告诉用户当前尺度，
   也提供回到默认观察窗的入口。 */
.hero-hotspots-stage-hud {
    position: absolute;
    top: -22px;
    right: 28px;
    z-index: 4;
    display: none;
    align-items: center;
    gap: 12px;
    padding: 10px 12px 10px 16px;
    border-radius: 999px;
    border: 1px solid rgba(213, 239, 250, 0.16);
    background:
        linear-gradient(180deg, rgba(247, 252, 255, 0.18) 0%, rgba(196, 229, 242, 0.05) 100%),
        rgba(6, 30, 46, 0.62);
    box-shadow:
        0 18px 38px rgba(4, 18, 30, 0.24),
        inset 0 1px 0 rgba(255, 255, 255, 0.12);
    backdrop-filter: blur(18px) saturate(140%);
    -webkit-backdrop-filter: blur(18px) saturate(140%);
    pointer-events: none;
    opacity: 0;
    filter: blur(12px);
    transform: translate3d(0, 12px, 0);
    transition:
        opacity 0.52s ease,
        transform 0.72s cubic-bezier(0.18, 0.84, 0.22, 1),
        filter 0.72s ease,
        border-color 220ms ease,
        box-shadow 220ms ease;
}

.home-page.hero-awakened .hero-hotspots-stage-hud {
    opacity: 1;
    filter: blur(0);
    transform: translate3d(0, 0, 0);
    transition-delay: 1160ms;
}

.hero-hotspots-stage-hud-copy {
    position: relative;
    display: grid;
    gap: 3px;
    min-width: 128px;
    padding-left: 12px;
}

.hero-hotspots-stage-hud-copy::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    width: 5px;
    height: 5px;
    border-radius: 999px;
    background: rgba(173, 217, 234, 0.58);
    box-shadow: 0 0 14px rgba(140, 208, 231, 0.32);
    transform: translateY(-50%);
    transition: background-color 220ms ease, box-shadow 220ms ease;
}

.hero-hotspots-stage-hud-label,
.hero-hotspots-stage-hud-hint {
    font-size: 0.66rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.hero-hotspots-stage-hud-label {
    color: rgba(198, 224, 236, 0.62);
}

.hero-hotspots-stage-hud-value {
    color: #f1fbff;
    font-size: 0.84rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    white-space: nowrap;
    text-shadow: 0 8px 20px rgba(2, 16, 28, 0.24);
}

.hero-hotspots-stage-hud-hint {
    color: rgba(196, 223, 235, 0.52);
}

.hero-hotspots-stage-reset {
    appearance: none;
    -webkit-appearance: none;
    border: 1px solid rgba(211, 236, 247, 0.16);
    border-radius: 999px;
    background: linear-gradient(180deg, rgba(243, 251, 255, 0.14), rgba(129, 178, 201, 0.1));
    color: rgba(239, 248, 252, 0.88);
    min-height: 36px;
    padding: 0 14px;
    font-size: 0.76rem;
    letter-spacing: 0.08em;
    pointer-events: auto;
    cursor: pointer;
    transition:
        transform 220ms ease,
        border-color 220ms ease,
        background 220ms ease,
        color 220ms ease,
        opacity 220ms ease,
        box-shadow 220ms ease;
}

.hero-hotspots-stage-reset:hover,
.hero-hotspots-stage-reset:focus-visible {
    transform: translate3d(0, -1px, 0);
    border-color: rgba(220, 240, 248, 0.28);
    background: linear-gradient(180deg, rgba(243, 251, 255, 0.2), rgba(129, 178, 201, 0.16));
    color: #f8fdff;
    box-shadow:
        0 10px 22px rgba(4, 18, 30, 0.18),
        0 0 0 1px rgba(221, 241, 249, 0.08);
}

.hero-hotspots-stage-reset:focus-visible {
    outline: none;
}

.hero-hotspots-stage-reset:disabled {
    opacity: 0.54;
    cursor: default;
    transform: none;
    box-shadow: none;
}

.hero-hotspots-stage-shell[data-stage-size-mode="custom"] .hero-hotspots-stage-hud {
    border-color: rgba(209, 236, 247, 0.24);
    box-shadow:
        0 18px 38px rgba(4, 18, 30, 0.24),
        0 0 26px rgba(86, 156, 182, 0.12),
        inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

.hero-hotspots-stage-shell[data-stage-size-mode="custom"] .hero-hotspots-stage-hud-copy::before {
    background: rgba(186, 234, 248, 0.88);
    box-shadow: 0 0 18px rgba(157, 223, 242, 0.4);
}

.hero-hotspots-stage-shell[data-stage-size-mode="custom"] .hero-hotspots-stage-hud-hint {
    color: rgba(216, 240, 248, 0.7);
}

/* hero-hotspots-resize-layer：
   这一层只负责接住拖拽动作。默认几乎隐身，只在 hover 或拖拽时轻轻露出，
   不抢 首屏 舞台本身的视觉注意力。 */
.hero-hotspots-resize-layer {
    position: absolute;
    inset: 0 -10px -40px;
    z-index: 4;
    overflow: visible;
    pointer-events: none;
}

.hero-hotspots-resize-handle {
    position: absolute;
    appearance: none;
    -webkit-appearance: none;
    border: none;
    padding: 0;
    margin: 0;
    background: transparent;
    pointer-events: auto;
    z-index: 1;
    opacity: 0;
    transition: opacity 220ms ease, transform 220ms ease;
}

.hero-hotspots-stage-shell:hover .hero-hotspots-resize-handle,
.hero-hotspots-stage-shell.is-resizing .hero-hotspots-resize-handle {
    opacity: 1;
}

.hero-hotspots-resize-handle::before {
    content: "";
    position: absolute;
    inset: 50%;
    transform: translate(-50%, -50%);
    border-radius: 999px;
    background: linear-gradient(180deg, rgba(223, 244, 252, 0.26), rgba(101, 156, 181, 0.16));
    box-shadow:
        0 0 0 1px rgba(185, 222, 239, 0.16),
        0 10px 22px rgba(6, 20, 32, 0.12);
}

.hero-hotspots-resize-handle.is-east,
.hero-hotspots-resize-handle.is-west {
    top: 34px;
    bottom: 34px;
    width: 18px;
}

.hero-hotspots-resize-handle.is-east {
    right: -10px;
    cursor: ew-resize;
}

.hero-hotspots-resize-handle.is-west {
    left: -10px;
    cursor: ew-resize;
}

.hero-hotspots-resize-handle.is-east::before,
.hero-hotspots-resize-handle.is-west::before {
    width: 4px;
    height: 78px;
}

.hero-hotspots-resize-handle.is-south {
    left: 42px;
    right: 42px;
    bottom: 0;
    height: 24px;
    cursor: ns-resize;
}

.hero-hotspots-resize-handle.is-south::before {
    width: 88px;
    height: 4px;
}

.hero-hotspots-resize-handle.is-south-east,
.hero-hotspots-resize-handle.is-south-west {
    width: 28px;
    height: 28px;
    bottom: 0;
}

.hero-hotspots-resize-handle.is-south-east {
    right: -10px;
    cursor: nwse-resize;
}

.hero-hotspots-resize-handle.is-south-west {
    left: -10px;
    cursor: nesw-resize;
}

.hero-hotspots-resize-handle.is-south-east::before,
.hero-hotspots-resize-handle.is-south-west::before {
    width: 14px;
    height: 14px;
}

.hero-hotspots-stage-shell.is-resizing {
    user-select: none;
}

.home-page.is-resizing-hero-hotspots {
    cursor: default;
}

/* 拖拽时暂停舞台呼吸动画，避免缩放过程中有额外漂浮干扰手感。 */
.home-page.is-resizing-hero-hotspots .hero-hotspots-shell {
    animation-play-state: paused;
}

@media (min-width: 1180px) {
    .hero-hotspots-stage-shell {
        min-width: 980px;
    }
}

/* .today-sea-head, .today-sea-copy, .today-sea-spot, .today-sea-actions 的主要视觉与布局效果 */
.today-sea-head,
.today-sea-copy,
.today-sea-spot,
.today-sea-actions {
    position: relative;
    z-index: 1;
    opacity: 0;
    filter: blur(14px);
    transform: translate3d(0, 18px, 0);
    transition:
        opacity 0.72s ease,
        transform 0.84s cubic-bezier(0.18, 0.84, 0.22, 1),
        filter 0.84s ease;
}

/* .home-page.hero-awakened .today-sea-head 的主要视觉与布局效果 */
.home-page.hero-awakened .today-sea-head {
    opacity: 1;
    filter: blur(0);
    transform: translate3d(0, 0, 0);
    transition-delay: 1180ms;
}

/* .home-page.hero-awakened .today-sea-copy 的主要视觉与布局效果 */
.home-page.hero-awakened .today-sea-copy {
    opacity: 1;
    filter: blur(0);
    transform: translate3d(0, 0, 0);
    transition-delay: 1080ms;
}

/* .home-page.hero-awakened .today-sea-spot 的主要视觉与布局效果 */
.home-page.hero-awakened .today-sea-spot {
    opacity: 1;
    filter: blur(0);
    transform: translate3d(0, 0, 0);
    transition-delay: 1180ms;
}

/* .home-page.hero-awakened .today-sea-actions 的主要视觉与布局效果 */
.home-page.hero-awakened .today-sea-actions {
    opacity: 1;
    filter: blur(0);
    transform: translate3d(0, 0, 0);
    transition-delay: 1320ms;
}

/* .today-sea-kicker 的主要视觉与布局效果 */
.today-sea-kicker {
    color: rgba(214, 233, 244, 0.58);
    clip-path: inset(0 100% 0 0);
    transition: clip-path 0.72s ease 1.02s, color 0.32s ease;
}

/* .home-page.hero-awakened .today-sea-kicker 的主要视觉与布局效果 */
.home-page.hero-awakened .today-sea-kicker {
    clip-path: inset(0 0 0 0);
}

/* .today-sea-title 的主要视觉与布局效果 */
.today-sea-title {
    color: #f5fbff;
}

/* .today-sea-copy 的主要视觉与布局效果 */
.today-sea-copy {
    color: rgba(228, 241, 249, 0.82);
}

/* .today-sea-spot 的主要视觉与布局效果 */
.today-sea-spot {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.16) 0%, rgba(222, 240, 249, 0.08) 100%),
        rgba(9, 38, 56, 0.22);
    border: 1px solid rgba(233, 244, 251, 0.16);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.16),
        0 18px 30px rgba(5, 18, 27, 0.18);
}

/* .today-sea-spot-link::before：深色版本里继续保留卡片表面的扫光层。 */
.today-sea-spot-link::before {
    inset: -40% auto auto -10%;
    width: 46%;
    opacity: 0.18;
}

/* .today-sea-spot-link::after：深色版本里弱化动作提示的颜色。 */
.today-sea-spot-link::after {
    color: rgba(203, 226, 239, 0.66);
}

/* .today-sea-spot-link:hover 鼠标移入时的样式 */
.today-sea-spot-link:hover {
    transform: translateY(-5px) scale(1.012);
    border-color: rgba(182, 218, 236, 0.3);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.22) 0%, rgba(227, 242, 250, 0.1) 100%),
        rgba(10, 41, 60, 0.3);
    box-shadow:
        0 24px 38px rgba(5, 20, 30, 0.22),
        0 0 28px rgba(130, 196, 227, 0.12),
        inset 0 1px 0 rgba(255, 255, 255, 0.22);
}

/* .today-sea-spot-link:hover::before：hover 时继续增强扫光存在感。 */
.today-sea-spot-link:hover::before {
    opacity: 0.34;
    transform: translateX(18%) rotate(8deg);
}

/* .today-sea-spot-link:hover::after：hover 时同步提亮动作提示。 */
.today-sea-spot-link:hover::after {
    transform: translateX(4px);
    color: rgba(240, 248, 253, 0.92);
}

/* .today-sea-label 的主要视觉与布局效果 */
.today-sea-label {
    color: rgba(202, 227, 241, 0.58);
}

/* .today-sea-name 的主要视觉与布局效果 */
.today-sea-name {
    color: #f5fbff;
}

/* .today-sea-name span 的主要视觉与布局效果 */
.today-sea-name span {
    color: rgba(208, 229, 240, 0.68);
}

/* .today-sea-description 的主要视觉与布局效果 */
.today-sea-description {
    color: rgba(227, 240, 249, 0.82);
}

/* .today-sea-actions 的主要视觉与布局效果 */
.today-sea-actions {
    gap: 14px;
}

/* 设置 首屏 操作按钮的外观、圆角和悬停过渡 */
.sea-action {
    min-height: 50px;
    padding: 0.94rem 1.58rem;
    transition:
        transform 280ms ease,
        filter 280ms ease,
        box-shadow 280ms ease,
        background-color 280ms ease,
        border-color 280ms ease;
}

/* .sea-action:hover 鼠标移入时的样式 */
.sea-action:hover {
    transform: translateY(-3px);
}

/* 设置 首屏 操作按钮的外观、圆角和悬停过渡 */
.sea-action-primary {
    background: linear-gradient(135deg, #143d5d 0%, #24648b 100%);
    box-shadow:
        0 18px 34px rgba(7, 30, 46, 0.24),
        0 0 22px rgba(123, 193, 227, 0.12);
}

/* .sea-action-primary:hover 鼠标移入时的样式 */
.sea-action-primary:hover {
    filter: brightness(1.06);
    box-shadow:
        0 22px 40px rgba(7, 30, 46, 0.28),
        0 0 28px rgba(137, 201, 232, 0.18);
}

/* 设置 首屏 操作按钮的外观、圆角和悬停过渡 */
.sea-action-secondary {
    color: #eef7fd;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(237, 246, 252, 0.18);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.16),
        0 14px 26px rgba(5, 18, 27, 0.14);
}

/* .sea-action-secondary:hover 鼠标移入时的样式 */
.sea-action-secondary:hover {
    background: rgba(255, 255, 255, 0.12);
}

/* .hero-section.is-diving-out 的主要视觉与布局效果 */
.hero-section.is-diving-out {
    filter: saturate(0.92);
}

/* 制制 首屏 主文案容器的宽度、层级和入场动画 */
.hero-section.is-diving-out .hero-content {
    opacity: 0.78;
    filter: blur(8px);
    transform: translate3d(0, 22px, 0) scale(0.986);
}

/* 设置今日海域卡片的玻璃外观、边框和漂浮质感 */
.hero-section.is-diving-out .today-sea-card {
    animation: none;
    transform: translate3d(0, -10px, 0) scale(1.024);
    box-shadow:
        0 40px 70px rgba(4, 20, 31, 0.34),
        0 0 44px rgba(128, 194, 226, 0.14),
        inset 0 1px 0 rgba(255, 255, 255, 0.18);
}

/* .hero-section.is-diving-out .today-sea-spot 的主要视觉与布局效果 */
.hero-section.is-diving-out .today-sea-spot {
    transform: translate3d(0, -10px, 0) scale(1.024);
}

/* .hero-section.is-diving-out .hero-ocean-layers 的主要视觉与布局效果 */
.hero-section.is-diving-out .hero-ocean-layers {
    transform: translate3d(0, 18px, 0) scale(1.02);
    transition: transform 720ms cubic-bezier(0.18, 0.78, 0.22, 1), opacity 520ms ease;
}

/* 定义 hero-glow-drift 动画的关键帧 */
@keyframes hero-glow-drift {
/* hero-glow-drift 在 0%：光晕停在更靠上的初始位置。 */
    0% {
        transform: translate3d(-50%, -12%, 0) scale(0.92);
    }
/* hero-glow-drift 在 100%：轻微下移并放大，让海面呼吸感更明显。 */
    100% {
        transform: translate3d(-48%, -8%, 0) scale(1.02);
    }
}

/* 定义 hero-wave-sway 动画的关键帧 */
@keyframes hero-wave-sway {
/* hero-wave-sway 在 0%：海浪纹理回到基准位置。 */
    0% {
        transform: translate3d(-1.2%, 0, 0) scale(1);
    }
/* hero-wave-sway 在 50%：向另一侧轻推，让波纹像缓慢摆动。 */
    50% {
        transform: translate3d(1.1%, -1.2%, 0) scale(1.04);
    }
/* hero-wave-sway 在 100%：回到另一端的稳定点，形成完整循环。 */
    100% {
        transform: translate3d(-0.6%, 0.6%, 0) scale(1.01);
    }
}

/* 定义 hero-plankton-float 动画的关键帧 */
@keyframes hero-plankton-float {
/* hero-plankton-float 在 0%：浮游粒子从较低位置开始漂起。 */
    0% {
        transform: translate3d(0, 18px, 0) scale(0.92);
    }
/* hero-plankton-float 在 50%：中段略微抬高并放大，形成漂浮感。 */
    50% {
        transform: translate3d(10px, -20px, 0) scale(1.08);
    }
/* hero-plankton-float 在 100%：沿对角线继续上浮后轻轻收回。 */
    100% {
        transform: translate3d(-8px, -52px, 0) scale(0.94);
    }
}

/* 定义 hero-card-breathe 动画的关键帧 */
@keyframes hero-card-breathe {
/* hero-card-breathe 在 0%：卡片回到基准位置。 */
    0% {
        transform: translate3d(0, 0, 0);
    }
/* hero-card-breathe 在 50%：轻微上浮，像被海流托起。 */
    50% {
        transform: translate3d(0, -6px, 0);
    }
/* hero-card-breathe 在 100%：缓慢回落，保持呼吸式节奏。 */
    100% {
        transform: translate3d(0, 2px, 0);
    }
}

/* .trip-planner-section 的主要视觉与布局效果 */
.trip-planner-section {
    padding: var(--spacing-2xl) var(--spacing-lg);
    background:
        radial-gradient(circle at 14% 8%, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0) 26%),
        linear-gradient(180deg, #2e6d93 0%, #194563 100%);
    position: relative;
    overflow: hidden;
}

/* .trip-planner-section::after：给行程入口区补一层底部雾化收束。 */
.trip-planner-section::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -42px;
    height: 118px;
    background:
        linear-gradient(180deg, rgba(18, 58, 84, 0) 0%, rgba(15, 44, 66, 0.64) 50%, rgba(9, 25, 40, 0.96) 100%);
    filter: blur(24px);
    pointer-events: none;
    z-index: 0;
}

/* .trip-planner-shell 的主要视觉与布局效果 */
.trip-planner-shell {
    max-width: 1180px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: minmax(260px, 0.9fr) minmax(0, 1.1fr);
    gap: 28px;
    align-items: center;
    padding: 30px;
    border-radius: 30px;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.18) 0%, rgba(215, 235, 247, 0.08) 100%),
        rgba(161, 202, 226, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(20px) saturate(135%);
    -webkit-backdrop-filter: blur(20px) saturate(135%);
    box-shadow:
        0 24px 42px rgba(6, 29, 45, 0.16),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

/* .trip-planner-kicker 的主要视觉与布局效果 */
.trip-planner-kicker {
    margin: 0 0 10px;
    font-size: 0.72rem;
    letter-spacing: 0.34em;
    text-transform: uppercase;
    color: rgba(241, 249, 255, 0.64);
}

/* .trip-planner-title 的主要视觉与布局效果 */
.trip-planner-title {
    margin: 0 0 14px;
    font-family: "Noto Serif SC", "Source Han Serif SC", "Songti SC", serif;
    font-size: clamp(1.6rem, 2.3vw, 2.1rem);
    font-weight: 600;
    color: #f4fbff;
}

/* .trip-planner-text 的主要视觉与布局效果 */
.trip-planner-text {
    margin: 0;
    line-height: 1.85;
    color: rgba(233, 244, 251, 0.82);
}

/* 制制搜索栏区域的布局、玻璃材质和输入分布 */
.search-bar {
    display: flex;
    gap: var(--spacing-md);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.3) 0%, rgba(222, 241, 252, 0.18) 100%),
        rgba(198, 229, 247, 0.16);
    border: 1px solid rgba(255, 255, 255, 0.34);
    padding: var(--spacing-md);
    border-radius: 24px;
    flex-wrap: wrap;
    justify-content: center;
    backdrop-filter: blur(18px) saturate(145%);
    -webkit-backdrop-filter: blur(18px) saturate(145%);
    box-shadow:
        0 16px 34px rgba(18, 67, 102, 0.14),
        inset 0 1px 0 rgba(255, 255, 255, 0.32);
}

/* 制制搜索栏区域的布局、玻璃材质和输入分布 */
.trip-search-bar {
    align-self: stretch;
}

/* 设置搜索输入制件的尺寸、颜色和磨砂玻璃效果 */
.search-input,
.search-select {
    flex: 1;
    min-width: 150px;
    padding: var(--spacing-md);
    border: 1px solid rgba(168, 205, 230, 0.9);
    border-radius: var(--radius-md);
    font-size: 0.95rem;
    color: #12324d;
    background: rgba(248, 252, 255, 0.96);
    color-scheme: light;
    transition: all var(--transition-fast);
}

/* 设置搜索输入制件的尺寸、颜色和磨砂玻璃效果 */
.search-input::placeholder,
.search-select {
    color: #5e7890;
}

/* 设置搜索输入制件的尺寸、颜色和磨砂玻璃效果 */
.search-input[type="date"] {
    color: #12324d;
}

/* 设置搜索输入制件的尺寸、颜色和磨砂玻璃效果 */
.search-input[type="date"]::-webkit-datetime-edit,
.search-input[type="date"]::-webkit-datetime-edit-text,
.search-input[type="date"]::-webkit-datetime-edit-month-field,
.search-input[type="date"]::-webkit-datetime-edit-day-field,
.search-input[type="date"]::-webkit-datetime-edit-year-field {
    color: #12324d;
}

/* 设置搜索输入制件的尺寸、颜色和磨砂玻璃效果 */
.search-input[type="date"]::-webkit-calendar-picker-indicator {
    filter: invert(17%) sepia(23%) saturate(1087%) hue-rotate(165deg) brightness(94%) contrast(94%);
}

/* 设置搜索输入制件的尺寸、颜色和磨砂玻璃效果 */
.search-select option {
    color: #12324d;
    background: #f8fcff;
}

/* .search-input:focus, .search-select:focus 聚焦时的样式 */
.search-input:focus,
.search-select:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(30, 136, 229, 0.1);
}

/* .search-btn 的主要视觉与布局效果 */
.search-btn {
    all: unset;
    cursor: pointer;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    position: relative;
    display: inline-block;
    border-radius: 999px;
    background-color: rgba(76, 132, 182, 0.78);
    box-shadow:
        -0.15em -0.15em 0.15em -0.075em rgba(30, 74, 110, 0.2),
        0.04em 0.04em 0.08em 0 rgba(30, 74, 110, 0.1);
    white-space: nowrap;
}

/* .search-btn::after：给按钮补一层外缘淡雾高光。 */
.search-btn::after {
    content: "";
    position: absolute;
    z-index: 0;
    width: calc(100% + 0.3em);
    height: calc(100% + 0.3em);
    top: -0.15em;
    left: -0.15em;
    border-radius: inherit;
    background: linear-gradient(-135deg, rgba(76, 132, 182, 0.42), transparent 22%, transparent 100%);
    filter: blur(0.0125em);
    opacity: 0.28;
    mix-blend-mode: multiply;
}

/* .search-btn-outer 的主要视觉与布局效果 */
.search-btn-outer {
    position: relative;
    z-index: 1;
    display: block;
    border-radius: inherit;
    transition: box-shadow 300ms ease;
    will-change: box-shadow;
    box-shadow:
        0 0.05em 0.05em -0.01em rgba(18, 56, 92, 0.95),
        0 0.01em 0.01em -0.01em rgba(18, 56, 92, 0.45),
        0.15em 0.3em 0.1em -0.01em rgba(18, 56, 92, 0.22);
}

/* .search-btn:hover .search-btn-outer 鼠标移入时的样式 */
.search-btn:hover .search-btn-outer {
    box-shadow:
        0 0 0 0 rgba(18, 56, 92, 1),
        0 0 0 0 rgba(18, 56, 92, 0.5),
        0 0 0 0 rgba(18, 56, 92, 0.25);
}

/* .search-btn-inner 的主要视觉与布局效果 */
.search-btn-inner {
    position: relative;
    z-index: 1;
    display: block;
    border-radius: inherit;
    padding: 0.95em 1.8em;
    overflow: clip;
    clip-path: inset(0 0 0 0 round 100em);
    background-image: linear-gradient(135deg, #f8fcff 0%, #d7eefe 46%, #bfdcf6 100%);
    transition:
        box-shadow 300ms ease,
        clip-path 250ms ease,
        background-image 250ms ease,
        transform 250ms ease;
    will-change: box-shadow, clip-path, background-image, transform;
    box-shadow:
        0 0 0 0 inset rgba(18, 56, 92, 0.1),
        -0.05em -0.05em 0.05em 0 inset rgba(18, 56, 92, 0.22),
        0 0 0 0 inset rgba(18, 56, 92, 0.12),
        0 0 0.05em 0.2em inset rgba(255, 255, 255, 0.32),
        0.025em 0.05em 0.1em 0 inset rgba(255, 255, 255, 1),
        0.12em 0.12em 0.12em inset rgba(255, 255, 255, 0.26),
        -0.075em -0.25em 0.25em 0.1em inset rgba(40, 88, 132, 0.16);
}

/* .search-btn:hover .search-btn-inner 鼠标移入时的样式 */
.search-btn:hover .search-btn-inner {
    clip-path: inset(1px 1px 1px 1px round 100em);
    box-shadow:
        0.1em 0.15em 0.05em 0 inset rgba(31, 77, 118, 0.62),
        -0.025em -0.03em 0.05em 0.025em inset rgba(31, 77, 118, 0.32),
        0.25em 0.25em 0.2em 0 inset rgba(31, 77, 118, 0.26),
        0 0 0.05em 0.5em inset rgba(255, 255, 255, 0.12),
        0 0 0 0 inset rgba(255, 255, 255, 1),
        0.12em 0.12em 0.12em inset rgba(255, 255, 255, 0.22),
        -0.075em -0.12em 0.2em 0.1em inset rgba(31, 77, 118, 0.16);
}

/* .search-btn-label 的主要视觉与布局效果 */
.search-btn-label {
    position: relative;
    z-index: 4;
    display: block;
    font-family: var(--font-family);
    font-size: 0.95rem;
    letter-spacing: -0.03em;
    font-weight: 700;
    color: transparent;
    background-image: linear-gradient(135deg, #11486c 0%, #4e7a9b 100%);
    background-clip: text;
    -webkit-background-clip: text;
    text-shadow: rgba(0, 0, 0, 0.08) 0 0 0.1em;
    transition: transform 250ms ease;
    user-select: none;
}

/* .search-btn:hover .search-btn-label 鼠标移入时的样式 */
.search-btn:hover .search-btn-label {
    transform: scale(0.975);
}

/* .search-btn:active .search-btn-inner 按下时的样式 */
.search-btn:active .search-btn-inner {
    transform: scale(0.975);
}

/* ============================================
   竹简推荐区
   ============================================ */

/* .bamboo-scroll-section 的主要视觉与布局效果 */
.bamboo-scroll-section {
    padding: var(--spacing-2xl) var(--spacing-lg);
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(circle at 12% 18%, rgba(255, 255, 255, 0.82) 0%, rgba(255, 255, 255, 0) 24%),
        radial-gradient(circle at 28% 42%, rgba(143, 197, 236, 0.14) 0, rgba(143, 197, 236, 0) 26%),
        radial-gradient(circle at 76% 62%, rgba(196, 224, 248, 0.2) 0, rgba(196, 224, 248, 0) 24%),
        radial-gradient(circle at 84% 12%, rgba(255, 255, 255, 0.64) 0%, rgba(255, 255, 255, 0) 20%),
        linear-gradient(180deg, #d4efff 0%, #90c7e6 100%);
}

/* .bamboo-scroll-section::before：在推荐区顶部加一层浅色海雾。 */
.bamboo-scroll-section::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: -38px;
    height: 96px;
    background:
        linear-gradient(180deg, rgba(233, 247, 255, 0.98) 0%, rgba(224, 242, 253, 0.82) 38%, rgba(212, 239, 255, 0) 100%);
    filter: blur(24px);
    pointer-events: none;
    z-index: 0;
}

/* .bamboo-scroll-section::after：在推荐区底部补一层更深的过渡。 */
.bamboo-scroll-section::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -34px;
    height: 84px;
    background:
        linear-gradient(180deg, rgba(240, 245, 250, 0) 0%, rgba(240, 245, 250, 0.72) 54%, rgba(248, 251, 255, 0.96) 100%);
    filter: blur(20px);
    pointer-events: none;
    z-index: 0;
}

/* .section-header 的主要视觉与布局效果 */
.section-header {
    text-align: center;
    margin-bottom: var(--spacing-2xl);
    position: relative;
    z-index: 1;
}

/* .bamboo-scroll-container 的主要视觉与布局效果 */
.bamboo-scroll-container {
    position: relative;
    max-width: 1400px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: var(--spacing-lg);
    z-index: 1;
}

/* Bamboo Card Wrapper */
/* 设置热门潜点卡片的外观、层次和悬停反馈 */
.bamboo-cards-wrapper {
    flex: 1;
    overflow: hidden;
    position: relative;
    user-select: none;
    z-index: 1;
    contain: layout paint;
}

/* 设置热门潜点卡片的外观、层次和悬停反馈 */
.bamboo-cards-content {
    display: flex;
    gap: var(--spacing-lg);
    padding: var(--spacing-lg);
    transition: none;
    cursor: grab;
    will-change: transform;
}

/* 设置热门潜点卡片的外观、层次和悬停反馈 */
.bamboo-cards-wrapper.is-dragging .bamboo-cards-content {
    cursor: grabbing;
}

/* Bamboo Card */
/* 设置热门潜点卡片的外观、层次和悬停反馈 */
.bamboo-card {
    --elastic-x: 0px;
    --wobble-x: 0px;
    --wobble-y: 0px;
    --wobble-r: 0deg;
    --gravity-y: 0px;
    --tilt-r: 0deg;
    --roll-y: 0deg;
    --physics-shadow-y: 18px;
    --physics-shadow-blur: 34px;
    --physics-shadow-alpha: 0.16;
    --lift-y: 0px;
    --card-scale: 1;
    flex: 0 0 280px;
    min-width: 280px;
    background: rgba(255, 255, 255, 0.94);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-md);
    border: 1px solid rgba(255, 255, 255, 0.78);
    backdrop-filter: blur(14px);
    opacity: 0;
    transition: box-shadow 260ms ease, border-color 260ms ease, filter 260ms ease, opacity 240ms ease;
    cursor: pointer;
    transform: translate3d(calc(var(--elastic-x) + var(--wobble-x)), calc(var(--lift-y) + var(--wobble-y) + var(--gravity-y)), 0) rotate(calc(var(--wobble-r) + var(--tilt-r))) rotateY(var(--roll-y)) scale(var(--card-scale));
    will-change: transform;
    animation: bamboo-card-reveal 0.58s ease-out var(--enter-delay, 0s) forwards;
    -webkit-user-drag: none;
    user-select: none;
}

/* .bamboo-card:hover 鼠标移入时的样式 */
.bamboo-card:hover {
    --lift-y: -8px;
    --card-scale: 1.016;
    opacity: 1;
    box-shadow: var(--shadow-lg);
}

.bamboo-card:focus-visible {
    --lift-y: -6px;
    --card-scale: 1.016;
    opacity: 1;
    border-color: rgba(137, 205, 232, 0.58);
    box-shadow:
        0 18px 34px rgba(26, 106, 158, 0.2),
        0 0 0 3px rgba(181, 225, 244, 0.28);
    outline: none;
}

/* .bamboo-card.active：当前激活卡片用更亮的描边和阴影提示。 */
.bamboo-card.active {
    --card-scale: 1.04;
    opacity: 1;
    box-shadow: 0 18px 34px rgba(30, 136, 229, 0.24), 0 0 0 2px rgba(30, 136, 229, 0.18);
    border-color: rgba(30, 136, 229, 0.4);
    filter: saturate(1.03);
}

/* .bamboo-card.active:hover 鼠标移入时的样式 */
.bamboo-card.active:hover {
    --lift-y: -9px;
    --card-scale: 1.05;
}

/* 定义 bamboo-card-reveal 动画的关键帧 */
@keyframes bamboo-card-reveal {
/* bamboo-card-reveal 在 0%：卡片从轻微下沉和模糊状态开始进入。 */
    0% {
        opacity: 0;
        transform: translate3d(0, 18px, 0) scale(0.975);
    }
/* bamboo-card-reveal 在 100%：卡片回到稳定位置并保留轻微漂浮变量。 */
    100% {
        opacity: 0.94;
        transform: translate3d(calc(var(--elastic-x) + var(--wobble-x)), calc(var(--lift-y) + var(--wobble-y) + var(--gravity-y)), 0) rotate(calc(var(--wobble-r) + var(--tilt-r))) rotateY(var(--roll-y)) scale(var(--card-scale));
    }
}
/* Bamboo Card Image */
/* 设置热门潜点卡片的外观、层次和悬停反馈 */
.bamboo-card-image {
    width: 100%;
    height: 180px;
    object-fit: cover;
    transition: transform 0.5s ease-out;
    pointer-events: none;
    -webkit-user-drag: none;
    user-select: none;
}

/* .bamboo-card:hover .bamboo-card-image 鼠标移入时的样式 */
.bamboo-card:hover .bamboo-card-image {
    transform: scale(1.1);
}

/* Bamboo Card Content */
/* 设置热门潜点卡片的外观、层次和悬停反馈 */
.bamboo-card-content {
    position: relative;
    z-index: 1;
    margin-top: -18px;
    padding: calc(var(--spacing-lg) + 4px) var(--spacing-lg) var(--spacing-lg);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.62) 0%, rgba(244, 251, 255, 0.88) 22%, rgba(236, 247, 255, 0.94) 100%);
    border-top: 1px solid rgba(255, 255, 255, 0.56);
    box-shadow: 0 -14px 30px rgba(18, 67, 102, 0.12);
    backdrop-filter: blur(16px) saturate(145%);
    -webkit-backdrop-filter: blur(16px) saturate(145%);
}

/* 设置热门潜点卡片的外观、层次和悬停反馈 */
.bamboo-card-title {
    font-size: 1.1rem;
    font-weight: 700;
    margin-bottom: var(--spacing-sm);
    color: #16324c;
}

/* 设置热门潜点卡片的外观、层次和悬停反馈 */
.bamboo-card-tagline {
    font-size: 0.85rem;
    color: #4f6478;
    margin-bottom: var(--spacing-md);
    line-height: 1.4;
}

/* 设置热门潜点卡片的外观、层次和悬停反馈 */
.bamboo-card-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: var(--spacing-md);
    border-top: 1px solid var(--border-color);
}

/* 设置热门潜点卡片的外观、层次和悬停反馈 */
.bamboo-card-price {
    font-weight: 700;
    color: var(--accent);
    font-size: 1.1rem;
}

/* 设置热门潜点卡片的外观、层次和悬停反馈 */
.bamboo-card-flow {
    font-size: 0.85rem;
    color: rgba(176, 221, 233, 0.76);
}

/* Bamboo Scroll Arrows */
/* 把左右滚动按钮做成漂浮在卡片两侧的深海玻璃导航器 */
.scroll-arrow {
    position: relative;
    -webkit-appearance: none;
    appearance: none;
    border: 0;
    padding: 0;
    width: 64px;
    height: 64px;
    box-sizing: border-box;
    background: transparent;
    font: inherit;
    cursor: pointer;
    flex-shrink: 0;
    margin: 0 4px;
    border-radius: 999px;
    z-index: 3;
    isolation: isolate;
    transform: translate3d(0, 0, 0);
    transition: transform 320ms ease, opacity 280ms ease, filter 320ms ease;
    animation: sea-arrow-float 7.2s ease-in-out infinite;
}

/* 让按钮表层呈现为半透明深海玻璃，并承载箭头图标 */


/* 用一层柔和的深色光晕弱化旧版分层结构，只保留漂浮阴影 */


/* 提供按钮外圈的淡雾边缘和海面反射感，避免按钮看起来过硬。 */


/* 给玻璃按钮加一层像评论照片悬浮那样的窄柔流光，默认收在圆面外。 */


/* 使用线性 SVG 箭头代替廉价文本箭头，保持按钮中心留白。 */
.scroll-arrow-icon {
    position: relative;
    z-index: 2;
    width: 22px;
    height: 22px;
    display: block;
    overflow: visible;
    stroke: currentColor;
    stroke-width: 1.9;
    stroke-linecap: round;
    stroke-linejoin: round;
    fill: none;
    filter: drop-shadow(0 1px 0 rgba(0, 0, 0, 0.06));
    transition: transform 320ms ease, opacity 320ms ease;
}

/* 右侧箭头：给左右按钮错开一点呼吸节奏。 */
.scroll-arrow.right {
    animation-delay: -2.8s;
}

/* 鼠标触碰时让按钮雾面更清晰、边缘高光更明显 */
.scroll-arrow:hover .button-top {
    transform: translate3d(0, -3px, 0);
    border-color: rgba(231, 247, 255, 0.34);
    background:
        radial-gradient(circle at 30% 24%, rgba(255, 255, 255, 0.28) 0%, rgba(255, 255, 255, 0) 40%),
        linear-gradient(180deg, rgba(19, 72, 108, 0.84) 0%, rgba(9, 38, 61, 0.9) 100%);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.28),
        inset 0 -18px 24px rgba(8, 33, 53, 0.12),
        0 20px 36px rgba(8, 31, 49, 0.24),
        0 0 0 1px rgba(174, 220, 241, 0.12);
}

.scroll-arrow:hover .button-bottom {
    opacity: 1;
    filter: blur(11px);
    transform: scale(1.04);
}

.scroll-arrow:hover .button-base {
    opacity: 0.92;
    box-shadow:
        0 0 28px rgba(136, 202, 229, 0.2),
        inset 0 0 0 1px rgba(227, 244, 252, 0.12);
}

.scroll-arrow.left:hover .scroll-arrow-icon {
    transform: translateX(-2px);
}

.scroll-arrow.right:hover .scroll-arrow-icon {
    transform: translateX(2px);
}





/* 点击时只做轻微下沉和收光，像在水中按到导航器 */
.scroll-arrow:active .button-top {
    transform: translateY(1px) scale(0.985);
    border-color: rgba(197, 225, 239, 0.2);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.16),
        inset 0 -18px 24px rgba(8, 33, 53, 0.18),
        0 10px 18px rgba(8, 31, 49, 0.2);
}

/* 点击时同步收束雾面高光，避免机械式强压感 */
.scroll-arrow:active .button-bottom {
    opacity: 0.72;
    transform: scale(0.98);
}

/* 点击时让外层发光略微回收，保持克制反馈。 */
.scroll-arrow:active .button-base {
    opacity: 0.58;
    transform: scale(0.975);
}

/* 禁用时保留玻璃轮廓，但明显降低存在感和可点击暗示 */
.scroll-arrow.disabled {
    opacity: 0.42;
    cursor: not-allowed;
    animation-play-state: paused;
    transform: none;
}

/* 禁用时取消主要发光和边缘高亮，只保留安静的轮廓。 */
.scroll-arrow.disabled .button-top,
.scroll-arrow:disabled .button-top {
    border-color: rgba(192, 219, 232, 0.12);
    background:
        linear-gradient(180deg, rgba(14, 46, 70, 0.48) 0%, rgba(10, 35, 54, 0.56) 100%);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.08),
        0 8px 18px rgba(8, 31, 49, 0.1);
}

.scroll-arrow.disabled .button-bottom,
.scroll-arrow:disabled .button-bottom,
.scroll-arrow.disabled .button-base,
.scroll-arrow:disabled .button-base {
    opacity: 0.2;
}

.scroll-arrow.disabled .scroll-arrow-icon,
.scroll-arrow:disabled .scroll-arrow-icon {
    opacity: 0.5;
}

/* 定义左右箭头在海流里轻微漂浮的常驻呼吸动画。 */
@keyframes sea-arrow-float {
    0%,
    100% {
        transform: translate3d(0, 0, 0);
    }
    50% {
        transform: translate3d(0, -3px, 0);
    }
}

/* ============================================
   Featured Destinations - 深海档案墙
   ============================================ */

/* 精选目的地区域：深海档案墙的整体容器 */
.featured-destinations {
    position: relative;
    overflow: hidden;
    overflow-anchor: none;
    padding: clamp(96px, 10vw, 148px) var(--spacing-lg) clamp(64px, 7vw, 104px);
    background:
        radial-gradient(circle at 18% 12%, rgba(173, 215, 239, 0.2) 0%, rgba(173, 215, 239, 0) 18%),
        radial-gradient(circle at 80% 18%, rgba(194, 226, 243, 0.12) 0%, rgba(194, 226, 243, 0) 20%),
        radial-gradient(circle at 52% 112%, rgba(121, 185, 224, 0.14) 0%, rgba(121, 185, 224, 0) 30%),
        linear-gradient(180deg, #1a5f86 0%, #11415f 38%, #0a2436 100%);
}

/* 顶部海雾过渡 */
.featured-destinations::before {
    content: "";
    position: absolute;
    inset: -8% 0 auto;
    height: 132px;
    background: linear-gradient(180deg, rgba(244, 250, 255, 0.86) 0%, rgba(244, 250, 255, 0) 100%);
    filter: blur(34px);
    pointer-events: none;
    z-index: 0;
}

/* 底部深海流渐变衔接 */
.featured-destinations::after {
    content: "";
    position: absolute;
    inset: auto 0 -8%;
    height: 154px;
    background: linear-gradient(180deg, rgba(10, 31, 47, 0) 0%, rgba(9, 35, 56, 0.58) 46%, rgba(8, 31, 48, 0.94) 100%);
    filter: blur(34px);
    pointer-events: none;
    z-index: 0;
}

/* 深海档案墙：整体壳体 */
.curated-waters-shell {
    position: relative;
    z-index: 1;
    max-width: 1420px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: clamp(30px, 4.2vw, 62px);
}

/* 进场动画：从模糊上浮到清晰 */
.curated-reveal {
    opacity: 0;
    transform: translate3d(0, 18px, 0);
    filter: blur(14px);
    transition:
        opacity 0.96s ease,
        transform 0.96s cubic-bezier(0.18, 0.84, 0.22, 1),
        filter 0.96s ease;
}

/* 区块进入视口后恢复清晰 */
.featured-destinations.is-visible .curated-reveal {
    opacity: 1;
    transform: translate3d(0, 0, 0);
    filter: blur(0);
}

/* 档案墙稍晚于标题显现 */
.featured-destinations.is-visible .curated-waters-stage,
.featured-destinations.is-visible .curated-archive-wall {
    transition-delay: 220ms;
}

/* 引导标题区域 */
.curated-waters-intro {
    position: relative;
    max-width: 920px;
    margin: 0;
    padding-top: 4px;
}

/* 引导标题下的收束细线 */
.curated-waters-intro::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -26px;
    width: 132px;
    height: 1px;
    background: linear-gradient(90deg, rgba(233, 247, 255, 0.8), rgba(233, 247, 255, 0));
}

/* 小标签 */
.curated-waters-kicker {
    margin: 0 0 16px;
    font-size: 0.72rem;
    letter-spacing: 0.34em;
    text-transform: uppercase;
    color: rgba(224, 242, 255, 0.62);
}

/* 主标题 */
.curated-waters-title {
    margin: 0;
    font-family: "Noto Serif SC", "Source Han Serif SC", "Songti SC", serif;
    font-size: clamp(2.08rem, 3vw, 3.04rem);
    line-height: 1.12;
    color: #f6fbff;
}

/* 副标题 */
.curated-waters-subtitle {
    margin: 18px 0 0;
    max-width: 640px;
    font-size: 1.08rem;
    line-height: 1.82;
    color: rgba(234, 246, 255, 0.88);
}

.curated-waters-lead {
    margin: 14px 0 0;
    max-width: 720px;
    font-size: 0.98rem;
    line-height: 1.9;
    color: rgba(208, 228, 241, 0.72);
}

/* ── 海域展台：主海域在前，相邻海域在旁 ── */
.curated-waters-stage,
.curated-archive-wall {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1.18fr) clamp(252px, 23vw, 328px);
    grid-template-areas: "display rail";
    gap: clamp(24px, 2.8vw, 40px);
    padding: clamp(24px, 3vw, 34px);
    min-height: clamp(620px, 54vw, 780px);
    border-radius: 42px;
    border: 1px solid rgba(239, 248, 254, 0.14);
    background:
        linear-gradient(155deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.02)),
        linear-gradient(180deg, rgba(12, 51, 77, 0.28), rgba(8, 28, 44, 0.18)),
        rgba(7, 25, 38, 0.42);
    box-shadow:
        0 42px 84px rgba(4, 16, 26, 0.28),
        inset 0 1px 0 rgba(255, 255, 255, 0.16),
        inset 0 -1px 0 rgba(255, 255, 255, 0.04);
    backdrop-filter: blur(28px) saturate(128%);
    -webkit-backdrop-filter: blur(28px) saturate(128%);
    isolation: isolate;
}

/* 档案墙表面柔和高光 */
.curated-waters-stage::before,
.curated-archive-wall::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background:
        radial-gradient(circle at 18% 14%, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0) 28%),
        radial-gradient(circle at 84% 20%, rgba(165, 215, 239, 0.12), rgba(165, 215, 239, 0) 22%),
        linear-gradient(120deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0) 34%);
    pointer-events: none;
    z-index: 0;
}

/* 展台底部的一层柔光，强调主海域在前 */
.curated-waters-stage::after,
.curated-archive-wall::after {
    content: "";
    position: absolute;
    left: clamp(28px, 3vw, 40px);
    right: clamp(28px, 3vw, 40px);
    bottom: 28px;
    height: 120px;
    background: radial-gradient(ellipse at center, rgba(144, 201, 234, 0.16), rgba(144, 201, 234, 0) 70%);
    opacity: 0.72;
    filter: blur(18px);
    pointer-events: none;
    z-index: 0;
}

/* ── 相邻海域样本 ── */
.curated-nav-rail {
    position: relative;
    z-index: 1;
    grid-area: rail;
    display: grid;
    gap: 14px;
    align-content: center;
    padding: clamp(18px, 1.8vw, 24px) 0 clamp(22px, 2vw, 28px);
    max-height: 100%;
    overflow-y: hidden;
    overscroll-behavior-y: auto;
    scrollbar-width: none;
}

.curated-nav-rail::-webkit-scrollbar {
    display: none;
}

.curated-nav-btn {
    all: unset;
    position: relative;
    display: grid;
    grid-template-columns: 56px minmax(0, 1fr);
    grid-template-areas:
        "thumb overline"
        "thumb label"
        "thumb signal";
    gap: 8px 14px;
    padding: 18px 18px 20px;
    border-radius: 24px;
    cursor: pointer;
    overflow: hidden;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.02)),
        rgba(8, 28, 43, 0.26);
    border: 1px solid rgba(233, 244, 251, 0.08);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.08),
        0 18px 28px rgba(4, 16, 26, 0.14);
    opacity: 0;
    filter: blur(14px);
    transform: translate3d(18px, 24px, 0) scale(0.96);
    transition:
        opacity 0.92s ease,
        filter 0.92s ease,
        transform 0.92s cubic-bezier(0.18, 0.84, 0.22, 1),
        border-color 0.34s ease,
        box-shadow 0.34s ease,
        background 0.34s ease;
    transition-delay: calc(340ms + var(--sample-delay, 0ms));
}

.curated-nav-btn::before {
    content: "";
    position: absolute;
    left: 18px;
    right: 18px;
    bottom: 12px;
    height: 1px;
    background: linear-gradient(90deg, rgba(195, 228, 247, 0), rgba(195, 228, 247, 0.54), rgba(195, 228, 247, 0));
    opacity: 0;
    transform: scaleX(0.72);
    transform-origin: center;
    transition: opacity 0.34s ease, transform 0.34s ease;
}

.curated-nav-thumb {
    grid-area: thumb;
    width: 56px;
    height: 56px;
    border-radius: 16px;
    overflow: hidden;
    flex-shrink: 0;
    background: rgba(6, 28, 44, 0.44);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.12),
        0 12px 20px rgba(4, 16, 26, 0.14);
}

.curated-nav-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: saturate(0.88) brightness(0.94);
    transition: transform 0.7s ease, filter 0.7s ease;
}

.curated-nav-order,
.curated-nav-status,
.curated-nav-note {
    grid-area: overline;
    align-self: end;
    font-size: 0.66rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: rgba(197, 220, 233, 0.5);
}

.curated-nav-label {
    grid-area: label;
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.curated-nav-name {
    font-family: "Noto Serif SC", "Source Han Serif SC", "Songti SC", serif;
    font-size: 1.02rem;
    font-weight: 600;
    line-height: 1.24;
    color: rgba(241, 248, 255, 0.88);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: color 0.34s ease;
}

.curated-nav-eng {
    font-size: 0.72rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(197, 220, 233, 0.46);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: color 0.34s ease;
}

.curated-nav-signal {
    grid-area: signal;
    display: grid;
    gap: 4px;
    min-width: 0;
}

.curated-nav-keyword {
    font-size: 0.86rem;
    line-height: 1.45;
    color: rgba(225, 241, 251, 0.78);
}

.curated-nav-meta {
    font-size: 0.72rem;
    line-height: 1.5;
    letter-spacing: 0.06em;
    color: rgba(186, 209, 222, 0.56);
}

.curated-nav-btn:hover {
    opacity: 0.92;
    transform: translate3d(0, -3px, 0) scale(0.99);
    border-color: rgba(235, 246, 252, 0.16);
    box-shadow:
        0 22px 34px rgba(4, 16, 26, 0.18),
        0 0 24px rgba(137, 196, 228, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

.curated-nav-btn:hover .curated-nav-thumb img {
    transform: scale(1.08);
    filter: saturate(0.98) brightness(1);
}

.curated-nav-btn.is-active {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.05)),
        rgba(18, 55, 78, 0.48);
    border-color: rgba(238, 247, 253, 0.22);
    box-shadow:
        0 28px 42px rgba(4, 16, 26, 0.24),
        0 0 36px rgba(153, 209, 238, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.18);
}

.curated-nav-btn.is-active .curated-nav-name {
    color: #f7fbff;
}

.curated-nav-btn.is-active .curated-nav-eng,
.curated-nav-btn.is-active .curated-nav-meta,
.curated-nav-btn.is-active .curated-nav-order,
.curated-nav-btn.is-active .curated-nav-status,
.curated-nav-btn.is-active .curated-nav-note {
    color: rgba(209, 231, 244, 0.72);
}

.curated-nav-btn.is-active .curated-nav-keyword {
    color: rgba(240, 248, 255, 0.9);
}

.curated-nav-btn.is-active::before {
    opacity: 1;
    transform: scaleX(1);
}

/* ── 当前主海域 ── */
.curated-main-card,
.curated-display {
    position: relative;
    z-index: 1;
    grid-area: display;
    min-height: clamp(560px, 48vw, 700px);
}

.curated-display-surface {
    position: absolute;
    inset: 0;
    display: grid;
    grid-template-columns: minmax(0, 1.12fr) minmax(300px, 0.82fr);
    gap: clamp(18px, 2vw, 28px);
    padding: clamp(18px, 2.1vw, 28px);
    border-radius: 34px;
    overflow: hidden;
    border: 1px solid rgba(241, 248, 255, 0.12);
    background:
        linear-gradient(158deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0.03)),
        linear-gradient(180deg, rgba(9, 32, 48, 0.44), rgba(6, 20, 32, 0.22)),
        rgba(7, 23, 35, 0.42);
    box-shadow:
        0 34px 72px rgba(4, 16, 26, 0.24),
        inset 0 1px 0 rgba(255, 255, 255, 0.14),
        inset 0 -1px 0 rgba(255, 255, 255, 0.03);
    opacity: 0;
    filter: blur(14px);
    transform: translate3d(0, 16px, 0) scale(0.972);
    transition:
        opacity 0.72s ease,
        transform 0.86s cubic-bezier(0.18, 0.84, 0.22, 1),
        filter 0.86s ease;
}

.curated-display-surface::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 18% 12%, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0) 24%),
        radial-gradient(circle at 82% 86%, rgba(133, 196, 227, 0.1), rgba(133, 196, 227, 0) 24%);
    pointer-events: none;
    z-index: 1;
}

.curated-display-surface.from-right,
.curated-display-surface.from-left,
.curated-display-surface.from-depth,
.curated-display-surface.is-entering {
    transform: translate3d(0, 18px, 0) scale(0.976);
}

.curated-display-surface.is-leaving,
.curated-display-surface.is-leaving.to-left,
.curated-display-surface.is-leaving.to-right {
    opacity: 0;
    filter: blur(14px);
    transform: translate3d(0, -6px, 0) scale(0.99);
    pointer-events: none;
}

.curated-display-surface.is-resting {
    animation: none;
}

.curated-display-media {
    position: relative;
    min-height: 100%;
    border-radius: 26px;
    overflow: hidden;
    background: rgba(6, 28, 44, 0.4);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.14),
        0 22px 40px rgba(3, 15, 24, 0.2);
}

/* 图片区顶部高光 */
.curated-display-media::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 22% 12%, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0) 26%),
        linear-gradient(180deg, rgba(7, 27, 42, 0.04), rgba(5, 20, 32, 0.44));
    pointer-events: none;
    z-index: 2;
}

/* 焦散纹理 */
.curated-display-media::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 14% 22%, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0) 10%),
        radial-gradient(circle at 54% 12%, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0) 12%),
        radial-gradient(circle at 74% 36%, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0) 14%);
    mix-blend-mode: screen;
    opacity: 0.32;
    animation: curated-caustics 18s ease-in-out infinite;
    pointer-events: none;
    z-index: 3;
}

/* 展示图片 */
.curated-display-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scale(1.08);
    transition: transform 1s ease, filter 1s ease;
    filter: saturate(0.88) contrast(1.02) brightness(0.84);
}

.curated-display-copy {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 16px;
    padding: 12px 2px 10px 0;
}

.curated-display-copy > * {
    opacity: 0;
    filter: blur(8px);
    transform: translate3d(0, 10px, 0);
    transition:
        opacity 0.5s ease,
        filter 0.62s ease,
        transform 0.62s cubic-bezier(0.2, 0.84, 0.24, 1);
}

/* 档案小标 */
.curated-display-kicker {
    margin: 0;
    font-size: 0.72rem;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: rgba(219, 238, 250, 0.58);
}

/* 标题组 */
.curated-display-heading {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.curated-display-name {
    margin: 0;
    font-family: "Noto Serif SC", "Source Han Serif SC", "Songti SC", serif;
    font-size: clamp(1.98rem, 2.9vw, 2.76rem);
    line-height: 1.08;
    color: #f7fbff;
}

.curated-display-english {
    margin: 0;
    font-size: 0.92rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: rgba(203, 225, 240, 0.62);
}

/* 氛围描述 */
.curated-display-atmosphere {
    margin: 0;
    font-size: 0.98rem;
    line-height: 1.92;
    color: rgba(229, 242, 252, 0.84);
}

/* 事实卡片组 */
.curated-display-facts {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0;
    border-radius: 22px;
    overflow: hidden;
    border: 1px solid rgba(237, 246, 252, 0.1);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.02)),
        rgba(11, 39, 58, 0.34);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.curated-display-fact {
    min-height: auto;
    padding: 16px 18px 15px;
    background: transparent;
    border-right: 1px solid rgba(236, 245, 252, 0.08);
    box-shadow: none;
}

.curated-display-fact:last-child {
    border-right: 0;
}

.curated-display-fact-label {
    display: block;
    margin-bottom: 10px;
    font-size: 0.7rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: rgba(208, 227, 240, 0.5);
}

.curated-display-fact-value {
    display: block;
    font-size: 0.9rem;
    line-height: 1.6;
    color: rgba(242, 249, 255, 0.9);
}

/* 海况标签 */
.curated-display-conditions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.curated-display-condition {
    display: inline-flex;
    align-items: center;
    padding: 8px 12px;
    border-radius: 999px;
    background: rgba(232, 244, 255, 0.06);
    border: 1px solid rgba(232, 244, 255, 0.12);
    color: rgba(234, 246, 252, 0.78);
    font-size: 0.82rem;
    line-height: 1;
}

/* 价值说明 */
.curated-display-worth {
    margin: 2px 0 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding-top: 18px;
    border-top: 1px solid rgba(238, 246, 252, 0.08);
}

.curated-display-worth-label {
    font-size: 0.72rem;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: rgba(210, 229, 242, 0.52);
}

.curated-display-worth-text {
    font-size: 0.94rem;
    line-height: 1.82;
    color: rgba(239, 247, 253, 0.88);
}

/* 详情按钮 */
.curated-detail-button {
    all: unset;
    width: fit-content;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-top: 6px;
    padding: 12px 18px;
    border-radius: 999px;
    cursor: pointer;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.04)),
        rgba(132, 187, 216, 0.12);
    border: 1px solid rgba(238, 246, 252, 0.16);
    color: rgba(245, 250, 255, 0.92);
    box-shadow:
        0 14px 24px rgba(4, 17, 27, 0.14),
        inset 0 1px 0 rgba(255, 255, 255, 0.14);
    transition:
        transform 0.28s ease,
        box-shadow 0.28s ease,
        border-color 0.28s ease,
        background-color 0.28s ease,
        opacity 0.48s ease;
}

.curated-detail-button svg {
    width: 18px;
    height: 18px;
    transition: transform 0.28s ease;
}

.curated-detail-button:hover {
    transform: translate3d(0, -2px, 0);
    border-color: rgba(244, 250, 255, 0.24);
    box-shadow:
        0 18px 30px rgba(5, 19, 30, 0.2),
        0 0 26px rgba(156, 208, 236, 0.12),
        inset 0 1px 0 rgba(255, 255, 255, 0.18);
}

.curated-detail-button:hover svg {
    transform: translate3d(4px, 0, 0);
}

/* ── 关键帧动画 ── */

/* 静息呼吸 */
@keyframes curated-breathe {
    0%, 100% {
        transform: translate3d(0, 0, 0);
    }
    50% {
        transform: translate3d(0, -5px, 0);
    }
}

/* 焦散光纹漂移 */
@keyframes curated-caustics {
    0%, 100% {
        transform: translate3d(0, 0, 0) scale(1);
        opacity: 0.28;
    }
    50% {
        transform: translate3d(2%, -2%, 0) scale(1.06);
        opacity: 0.44;
    }
}

/* 重新校正精选目的地：把中段拉回“海域展台 / 海图陈列台”的叙事。 */
.featured-destinations {
    --home-reveal-distance: 22px;
    --home-reveal-blur: 18px;
    --home-reveal-duration: 1.08s;
    --home-reveal-ease: cubic-bezier(0.16, 0.82, 0.22, 1);
    padding: clamp(92px, 9vw, 140px) var(--spacing-lg);
    background:
        radial-gradient(circle at 14% 18%, rgba(126, 190, 221, 0.1) 0%, rgba(126, 190, 221, 0) 28%),
        radial-gradient(circle at 82% 26%, rgba(95, 166, 202, 0.11) 0%, rgba(95, 166, 202, 0) 28%),
        radial-gradient(circle at 48% 88%, rgba(19, 83, 118, 0.24) 0%, rgba(19, 83, 118, 0) 32%),
        linear-gradient(180deg, #061d2f 0%, #08293d 14%, #0a3448 34%, #0d3f5a 58%, #0a2e49 100%);
}

.featured-destinations::before {
    content: "";
    inset: -1px 0 auto;
    height: 260px;
    background:
        radial-gradient(ellipse at 50% 0%, rgba(59, 133, 166, 0.13), rgba(29, 83, 113, 0.05) 40%, rgba(7, 35, 52, 0) 72%),
        linear-gradient(180deg, rgba(2, 13, 24, 0.64) 0%, rgba(4, 22, 35, 0.52) 24%, rgba(8, 45, 64, 0.24) 66%, rgba(11, 57, 82, 0) 100%);
    filter: none;
}

.featured-destinations::after {
    content: "";
    inset: auto 0 -12%;
    height: 220px;
    background:
        radial-gradient(ellipse at 50% 100%, rgba(47, 124, 160, 0.16), rgba(23, 75, 107, 0.05) 36%, rgba(7, 25, 39, 0) 68%),
        linear-gradient(180deg, rgba(7, 25, 39, 0) 0%, rgba(8, 34, 54, 0.34) 44%, rgba(8, 34, 54, 0.94) 100%);
    filter: none;
}

.curated-waters-shell {
    max-width: 1460px;
    display: grid;
    gap: clamp(32px, 4vw, 60px);
}

.curated-waters-intro {
    max-width: 820px;
}

.curated-waters-intro::after {
    bottom: -26px;
    width: 148px;
    background: linear-gradient(90deg, rgba(232, 246, 255, 0.8), rgba(232, 246, 255, 0));
}

.curated-waters-intro > * {
    opacity: 0;
    filter: blur(16px);
    transform: translate3d(0, 24px, 0);
    transition:
        opacity var(--home-reveal-duration) ease,
        transform var(--home-reveal-duration) var(--home-reveal-ease),
        filter var(--home-reveal-duration) ease;
}

.featured-destinations.is-intro-visible .curated-waters-intro > * {
    opacity: 1;
    filter: blur(0);
    transform: translate3d(0, 0, 0);
}

.curated-waters-title {
    font-size: clamp(2.1rem, 3.1vw, 3.12rem);
    line-height: 1.12;
    transition-delay: 90ms;
}

.curated-waters-subtitle {
    transition-delay: 190ms;
}

.curated-nav-btn::before {
    content: "";
    position: absolute;
    pointer-events: none;
}

.curated-nav-thumb {
    position: relative;
}

.curated-waters-lead {
    margin: 16px 0 0;
    max-width: 680px;
    font-size: 0.98rem;
    line-height: 1.9;
    color: rgba(208, 228, 241, 0.72);
    opacity: 0;
    filter: blur(16px);
    transform: translate3d(0, 24px, 0);
    transition:
        opacity var(--home-reveal-duration) ease,
        transform var(--home-reveal-duration) var(--home-reveal-ease),
        filter var(--home-reveal-duration) ease;
    transition-delay: 290ms;
}

.featured-destinations.is-intro-visible .curated-waters-lead {
    opacity: 1;
    filter: blur(0);
    transform: translate3d(0, 0, 0);
}

.curated-waters-stage {
    grid-template-columns: minmax(0, 1.12fr) clamp(224px, 22vw, 276px);
    grid-template-areas: "main rail";
    gap: clamp(20px, 2.2vw, 28px);
    min-height: clamp(548px, 48vw, 650px);
    padding: clamp(20px, 2.2vw, 28px);
    border-radius: 38px;
    border-color: rgba(239, 248, 255, 0.16);
    background:
        linear-gradient(155deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.02)),
        linear-gradient(180deg, rgba(13, 54, 82, 0.46), rgba(7, 28, 44, 0.32)),
        rgba(5, 23, 37, 0.42);
    box-shadow:
        0 38px 76px rgba(4, 16, 26, 0.26),
        inset 0 1px 0 rgba(255, 255, 255, 0.15),
        inset 0 -1px 0 rgba(255, 255, 255, 0.04);
}

.featured-destinations .curated-waters-stage.curated-reveal {
    opacity: 0;
    filter: blur(18px);
    transform: translate3d(0, 24px, 0);
    transition:
        opacity var(--home-reveal-duration) ease,
        transform var(--home-reveal-duration) var(--home-reveal-ease),
        filter var(--home-reveal-duration) ease;
}

.featured-destinations.is-stage-visible .curated-waters-stage.curated-reveal {
    opacity: 1;
    filter: blur(0);
    transform: translate3d(0, 0, 0);
}

.curated-waters-stage::after {
    right: clamp(228px, 22vw, 294px);
    left: auto;
    background: linear-gradient(180deg, rgba(232, 246, 255, 0), rgba(232, 246, 255, 0.24) 22%, rgba(232, 246, 255, 0.04) 100%);
}

.curated-main-card {
    grid-area: main;
    position: relative;
    z-index: 1;
    isolation: isolate;
    min-height: clamp(520px, 44vw, 610px);
}

.curated-nav-rail {
    position: relative;
    z-index: 4;
    grid-area: rail;
    display: grid;
    gap: 12px;
    align-content: center;
    padding: 4px 0;
}

.curated-nav-rail::after {
    content: "";
    position: absolute;
    inset: -14px -18px -14px -22px;
    z-index: 8;
    pointer-events: none;
    background:
        linear-gradient(180deg, rgba(5, 24, 39, 0), rgba(13, 55, 78, 0.28) 36%, rgba(226, 246, 255, 0.1) 50%, rgba(5, 24, 39, 0) 70%),
        radial-gradient(ellipse at 54% 48%, rgba(166, 220, 242, 0.16), rgba(166, 220, 242, 0) 58%);
    filter: blur(16px);
    opacity: 0;
    transform: translate3d(0, -42%, 0) scaleY(0.72);
    transition:
        opacity 0.32s ease,
        transform 0.72s var(--home-reveal-ease),
        filter 0.72s ease;
}

.curated-nav-btn {
    --sample-shift-x: 0px;
    --sample-shift-y: 0px;
    --sample-scale: 1;
    --sample-opacity: 0.76;
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 72px minmax(0, 1fr);
    gap: 12px;
    align-items: center;
    min-height: 112px;
    padding: 14px;
    border-radius: 22px;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.03)),
        rgba(8, 27, 42, 0.34);
    border-color: rgba(237, 247, 255, 0.1);
    box-shadow:
        0 16px 28px rgba(4, 16, 26, 0.12),
        inset 0 1px 0 rgba(255, 255, 255, 0.12);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    opacity: 0;
    filter: blur(16px);
    transform: translate3d(calc(var(--sample-shift-x, 0px) + 20px), calc(var(--sample-shift-y, 0px) + 16px), 0) scale(calc(var(--sample-scale, 1) - 0.04));
    transition:
        opacity 0.82s ease,
        transform 0.92s var(--home-reveal-ease),
        filter 0.92s ease,
        border-color 0.34s ease,
        box-shadow 0.34s ease,
        background 0.34s ease;
    overflow: hidden;
    isolation: isolate;
}

.featured-destinations.is-stage-visible.is-stage-hydrated .curated-nav-btn {
    opacity: var(--sample-opacity, 0.76);
    filter: blur(0);
    transform: translate3d(var(--sample-shift-x, 0px), var(--sample-shift-y, 0px), 0) scale(var(--sample-scale, 1));
}

.curated-nav-refresh {
    all: unset;
    position: relative;
    z-index: 1;
    display: grid;
    gap: 8px;
    padding: 16px 18px 18px;
    border-radius: 22px;
    cursor: pointer;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.03)),
        rgba(8, 28, 43, 0.22);
    border: 1px dashed rgba(206, 230, 242, 0.18);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.08),
        0 14px 26px rgba(4, 16, 26, 0.12);
    opacity: 0;
    filter: blur(14px);
    transform: translate3d(18px, 24px, 0) scale(0.96);
    transition:
        opacity 0.82s ease,
        filter 0.88s ease,
        transform 0.88s var(--home-reveal-ease),
        border-color 0.3s ease,
        box-shadow 0.3s ease,
        background 0.3s ease;
}

.featured-destinations.is-stage-visible.is-stage-hydrated .curated-nav-refresh {
    opacity: 0.76;
    filter: blur(0);
    transform: translate3d(0, 0, 0) scale(1);
}

.featured-destinations.is-stage-visible.is-stage-hydrated:not(.is-stage-settled) .curated-nav-btn,
.featured-destinations.is-stage-visible.is-stage-hydrated:not(.is-stage-settled) .curated-nav-refresh {
    transition-delay: var(--sample-reveal-delay, 0ms);
}

.curated-nav-refresh-title {
    font-size: 0.74rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: rgba(206, 229, 242, 0.56);
}

.curated-nav-refresh-copy {
    font-size: 0.86rem;
    line-height: 1.7;
    color: rgba(223, 239, 249, 0.76);
}

.curated-nav-refresh:hover {
    opacity: 0.9;
    transform: translate3d(0, -3px, 0) scale(1.01);
    border-color: rgba(234, 245, 251, 0.28);
    box-shadow:
        0 20px 32px rgba(4, 16, 26, 0.16),
        0 0 24px rgba(140, 203, 232, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

.curated-nav-btn::before {
    inset: 0;
    width: auto;
    height: auto;
    border-radius: inherit;
    background:
        linear-gradient(126deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0) 36%),
        linear-gradient(180deg, rgba(120, 186, 220, 0.08), rgba(120, 186, 220, 0));
    box-shadow: none;
    opacity: 0.48;
}

.curated-nav-btn.is-active::before {
    inset: 0;
    width: auto;
    height: auto;
    border-radius: inherit;
    background:
        linear-gradient(126deg, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0) 36%),
        linear-gradient(180deg, rgba(120, 186, 220, 0.1), rgba(120, 186, 220, 0));
    box-shadow: none;
    opacity: 0.72;
}

.curated-nav-thumb {
    width: 72px;
    height: 82px;
    border-radius: 16px;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.14),
        0 14px 24px rgba(4, 16, 26, 0.16);
}

.curated-nav-thumb::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(8, 25, 38, 0) 12%, rgba(8, 25, 38, 0.48) 100%);
    pointer-events: none;
}

.curated-nav-thumb img {
    filter: saturate(0.88) brightness(0.86);
    transition: transform 0.82s ease, filter 0.82s ease;
}

.curated-nav-label {
    position: relative;
    z-index: 1;
    display: grid;
    gap: 6px;
}

.curated-nav-index {
    font-size: 0.68rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: rgba(198, 221, 235, 0.46);
}

.curated-nav-name-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
}

.curated-nav-name {
    font-size: 1.05rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.curated-nav-state {
    display: inline-flex;
    align-items: center;
    padding: 5px 8px;
    border-radius: 999px;
    background: rgba(232, 244, 255, 0.1);
    border: 1px solid rgba(232, 244, 255, 0.16);
    color: rgba(239, 247, 255, 0.82);
    font-size: 0.58rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    white-space: nowrap;
    opacity: 0;
    transform: translate3d(0, 8px, 0);
    transition: opacity 0.38s ease, transform 0.52s var(--home-reveal-ease);
}

.curated-nav-eng {
    letter-spacing: 0.16em;
}

.curated-nav-keyword {
    font-family: "Noto Serif SC", "Source Han Serif SC", "Songti SC", serif;
    font-size: 0.92rem;
    line-height: 1.36;
    color: rgba(241, 248, 255, 0.88);
}

.curated-nav-meta {
    font-size: 0.78rem;
    line-height: 1.62;
    color: rgba(194, 216, 231, 0.66);
}

.curated-nav-btn:hover {
    border-color: rgba(239, 248, 255, 0.18);
    box-shadow:
        0 24px 34px rgba(4, 16, 26, 0.16),
        0 0 26px rgba(140, 203, 232, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.18);
    transform: translate3d(var(--sample-shift-x, 0px), calc(var(--sample-shift-y, 0px) - 4px), 0) scale(calc(var(--sample-scale, 1) + 0.01));
}

.curated-nav-btn:hover .curated-nav-thumb img {
    transform: scale(1.06);
    filter: saturate(0.96) brightness(0.92);
}

.curated-nav-btn.is-active {
    z-index: 3;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0.06)),
        rgba(15, 49, 73, 0.68);
    border-color: rgba(240, 249, 255, 0.34);
    box-shadow:
        0 28px 42px rgba(4, 16, 26, 0.22),
        0 0 30px rgba(168, 218, 242, 0.16),
        0 0 0 1px rgba(220, 240, 251, 0.12),
        inset 0 1px 0 rgba(255, 255, 255, 0.24);
    transform: translate3d(0, -6px, 0) scale(1);
}

.curated-nav-btn::after {
    content: "";
    position: absolute;
    left: 10px;
    top: 14px;
    bottom: 14px;
    width: 2px;
    border-radius: 999px;
    background: linear-gradient(180deg, rgba(226, 244, 252, 0), rgba(226, 244, 252, 0.94) 24%, rgba(162, 219, 244, 0.84) 78%, rgba(226, 244, 252, 0));
    box-shadow: 0 0 16px rgba(160, 219, 244, 0.28);
    opacity: 0;
    transform: scaleY(0.4);
    transform-origin: center;
    transition: opacity 0.32s ease, transform 0.44s var(--home-reveal-ease);
}

.curated-nav-btn.is-active::after {
    opacity: 1;
    transform: scaleY(1);
}

.curated-nav-btn.is-active .curated-nav-thumb {
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.2),
        0 18px 28px rgba(4, 16, 26, 0.2),
        0 0 22px rgba(150, 208, 237, 0.16);
}

.curated-nav-btn.is-active .curated-nav-thumb img {
    transform: scale(1.08);
    filter: saturate(1) brightness(0.98);
}

.curated-nav-btn.is-active .curated-nav-index,
.curated-nav-btn.is-active .curated-nav-eng {
    color: rgba(221, 239, 249, 0.74);
}

.curated-nav-btn.is-active .curated-nav-name {
    color: #f8fcff;
    text-shadow: 0 10px 20px rgba(6, 22, 34, 0.18);
}

.curated-nav-btn.is-active .curated-nav-keyword {
    color: rgba(246, 251, 255, 0.96);
}

.curated-nav-btn.is-active .curated-nav-meta {
    color: rgba(214, 233, 244, 0.8);
}

.curated-nav-btn.is-active .curated-nav-state {
    opacity: 1;
    transform: translate3d(0, 0, 0);
}

.curated-nav-refresh {
    all: unset;
    position: relative;
    grid-column: 1 / -1;
    display: grid;
    gap: 8px;
    padding: 16px 18px 18px;
    border-radius: 22px;
    cursor: pointer;
    text-align: left;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.02)),
        rgba(8, 27, 42, 0.24);
    border: 1px dashed rgba(232, 244, 250, 0.18);
    box-shadow:
        0 14px 24px rgba(4, 16, 26, 0.12),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
    opacity: 0;
    filter: blur(16px);
    transform: translate3d(16px, 16px, 0) scale(0.97);
    transition:
        opacity 0.82s ease,
        transform 0.92s var(--home-reveal-ease),
        filter 0.92s ease,
        border-color 0.34s ease,
        box-shadow 0.34s ease;
    isolation: isolate;
    overflow: hidden;
}

.featured-destinations.is-stage-visible.is-stage-hydrated .curated-nav-refresh {
    opacity: 0.84;
    filter: blur(0);
    transform: translate3d(0, 0, 0) scale(1);
}

.featured-destinations.is-stage-visible.is-stage-hydrated:not(.is-stage-settled) .curated-nav-refresh {
    transition-delay: var(--sample-reveal-delay, 0ms);
}

.curated-nav-refresh::before,
.curated-nav-refresh::after {
    content: "";
    position: absolute;
    pointer-events: none;
}

.curated-nav-refresh::before {
    inset: -20% auto -20% -32%;
    width: 56%;
    background: linear-gradient(120deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0));
    opacity: 0;
    transform: translate3d(-22%, 0, 0) rotate(8deg);
    transition: opacity 0.38s ease, transform 0.86s var(--home-reveal-ease);
}

.curated-nav-refresh::after {
    top: 14px;
    right: 14px;
    width: 18px;
    height: 18px;
    border-radius: 999px;
    border: 1px solid rgba(214, 234, 245, 0.34);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12);
    opacity: 0.72;
    transition: border-color 0.34s ease, box-shadow 0.34s ease;
}

.curated-nav-refresh-title {
    font-size: 0.68rem;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: rgba(198, 221, 235, 0.5);
    opacity: 1;
    filter: blur(0);
    transform: translate3d(0, 0, 0);
    transition:
        opacity 0.42s ease,
        filter 0.62s ease,
        transform 0.62s var(--home-reveal-ease),
        color 0.3s ease;
}

.curated-nav-refresh-copy {
    font-size: 0.88rem;
    line-height: 1.74;
    color: rgba(216, 233, 243, 0.8);
    opacity: 1;
    filter: blur(0);
    transform: translate3d(0, 0, 0);
    transition:
        opacity 0.46s ease,
        filter 0.66s ease,
        transform 0.66s var(--home-reveal-ease),
        color 0.3s ease;
}

.curated-nav-refresh:hover {
    border-color: rgba(238, 248, 255, 0.22);
    box-shadow:
        0 18px 28px rgba(4, 16, 26, 0.16),
        0 0 24px rgba(140, 203, 232, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.14);
    transform: translate3d(0, -2px, 0);
}

.curated-nav-refresh:hover::before {
    opacity: 0.86;
    transform: translate3d(168%, 0, 0) rotate(8deg);
}

.curated-nav-refresh:hover::after {
    border-color: rgba(225, 241, 250, 0.52);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.18),
        0 0 18px rgba(151, 208, 236, 0.16);
}

.curated-nav-rail.is-cycling .curated-nav-btn {
    opacity: 0;
    filter: blur(16px);
    transform: translate3d(calc(var(--sample-shift-x, 0px) + 16px), calc(var(--sample-shift-y, 0px) + 14px), 0) scale(calc(var(--sample-scale, 1) - 0.04));
    transition-duration: 0.28s;
    pointer-events: none;
}

.curated-nav-rail.is-cycling .curated-nav-btn.is-active {
    opacity: 1;
    filter: blur(0);
    transform: translate3d(0, -6px, 0) scale(1);
}

.curated-nav-rail.is-cycling .curated-nav-refresh {
    opacity: 0.58;
    filter: blur(4px);
    border-color: rgba(238, 248, 255, 0.24);
    box-shadow:
        0 18px 28px rgba(4, 16, 26, 0.16),
        0 0 26px rgba(140, 203, 232, 0.12),
        inset 0 1px 0 rgba(255, 255, 255, 0.14);
    transform: translate3d(0, -1px, 0) scale(0.988);
}

.curated-nav-rail.is-cycling .curated-nav-refresh-title,
.curated-nav-rail.is-cycling .curated-nav-refresh-copy {
    opacity: 0.42;
    filter: blur(8px);
    transform: translate3d(0, 6px, 0);
}

.curated-nav-rail.is-cycling .curated-nav-refresh::before {
    opacity: 0.9;
    transform: translate3d(176%, 0, 0) rotate(8deg);
    transition: opacity 0.24s ease, transform 0.7s var(--home-reveal-ease);
}

.curated-nav-rail.is-cycling .curated-nav-refresh::after {
    animation: curated-refresh-orbit 0.72s linear infinite;
    border-color: rgba(226, 241, 250, 0.52);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.18),
        0 0 16px rgba(151, 208, 236, 0.2);
}

.curated-nav-rail.is-cycling::after {
    opacity: 0.92;
    filter: blur(18px);
    transform: translate3d(0, 6%, 0) scaleY(1.08);
    transition-duration: 0.42s;
}

.curated-nav-rail.is-cycle-prime::after {
    opacity: 0.7;
    filter: blur(20px);
    transform: translate3d(0, 28%, 0) scaleY(1.18);
    transition-duration: 0.18s;
}

.curated-nav-rail.is-cycle-reveal::after {
    opacity: 0;
    filter: blur(22px);
    transform: translate3d(0, 88%, 0) scaleY(1.28);
    transition-duration: 0.96s;
}

.featured-destinations.is-stage-visible.is-stage-hydrated .curated-nav-rail.is-cycle-prime .curated-nav-btn {
    opacity: 0;
    filter: blur(18px);
    transform: translate3d(
        calc(var(--sample-shift-x, 0px) + var(--sample-cycle-shift, 12px) + 10px),
        calc(var(--sample-shift-y, 0px) + 28px),
        0
    ) scale(calc(var(--sample-scale, 1) - 0.055));
    transition-delay: 0ms;
}

.featured-destinations.is-stage-visible.is-stage-hydrated .curated-nav-rail.is-cycle-prime .curated-nav-btn.is-active {
    opacity: 1;
    filter: blur(0);
    transform: translate3d(0, -6px, 0) scale(1);
}

.featured-destinations.is-stage-visible.is-stage-hydrated .curated-nav-rail.is-cycle-prime .curated-nav-refresh {
    opacity: 0;
    filter: blur(12px);
    transform: translate3d(12px, 14px, 0) scale(0.968);
    transition-delay: 0ms;
}

.featured-destinations.is-stage-visible.is-stage-hydrated .curated-nav-rail.is-cycle-prime .curated-nav-refresh-title,
.featured-destinations.is-stage-visible.is-stage-hydrated .curated-nav-rail.is-cycle-prime .curated-nav-refresh-copy {
    opacity: 0;
    filter: blur(10px);
    transform: translate3d(0, 8px, 0);
}

.curated-nav-rail.is-cycle-reveal .curated-nav-btn,
.curated-nav-rail.is-cycle-reveal .curated-nav-refresh {
    transition-delay: var(--sample-cycle-delay, 0ms);
    transition-duration: 1.02s;
}

.featured-destinations.is-stage-visible.is-stage-hydrated .curated-nav-rail.is-cycle-reveal .curated-nav-btn {
    opacity: var(--sample-opacity, 0.76);
    filter: blur(0);
    transform: translate3d(var(--sample-shift-x, 0px), var(--sample-shift-y, 0px), 0) scale(var(--sample-scale, 1));
}

.featured-destinations.is-stage-visible.is-stage-hydrated .curated-nav-rail.is-cycle-reveal .curated-nav-btn.is-active {
    opacity: 1;
    transform: translate3d(0, -6px, 0) scale(1);
    transition-delay: 0ms;
}

.featured-destinations.is-stage-visible.is-stage-hydrated .curated-nav-rail.is-cycle-reveal .curated-nav-refresh {
    opacity: 0.84;
    filter: blur(0);
    transform: translate3d(0, 0, 0) scale(1);
}

.featured-destinations.is-stage-visible.is-stage-hydrated .curated-nav-rail.is-cycle-reveal .curated-nav-refresh-title {
    opacity: 1;
    filter: blur(0);
    transform: translate3d(0, 0, 0);
    transition-delay: calc(var(--sample-cycle-delay, 0ms) + 40ms);
}

.featured-destinations.is-stage-visible.is-stage-hydrated .curated-nav-rail.is-cycle-reveal .curated-nav-refresh-copy {
    opacity: 1;
    filter: blur(0);
    transform: translate3d(0, 0, 0);
    transition-delay: calc(var(--sample-cycle-delay, 0ms) + 88ms);
}

.curated-display {
    min-height: clamp(520px, 44vw, 610px);
}

.curated-display-surface {
    position: absolute;
    inset: 0;
    z-index: 1;
    display: block;
    padding: clamp(18px, 1.9vw, 24px);
    border-radius: 34px;
    background:
        linear-gradient(160deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0.03)),
        rgba(6, 24, 37, 0.48);
    box-shadow:
        0 30px 56px rgba(4, 16, 26, 0.22),
        inset 0 1px 0 rgba(255, 255, 255, 0.12),
        inset 0 -1px 0 rgba(255, 255, 255, 0.04);
    opacity: 0;
    filter: blur(14px);
    transform: translate3d(0, 16px, 0) scale(0.972);
    transition:
        opacity 0.72s ease,
        transform 0.86s var(--home-reveal-ease),
        filter 0.86s ease;
}

.curated-display-surface.from-depth,
.curated-display-surface.from-right,
.curated-display-surface.from-left {
    transform: translate3d(0, 18px, 0) scale(0.976);
}

.featured-destinations.is-stage-visible.is-stage-hydrated .curated-display-surface.is-active {
    opacity: 1;
    filter: blur(0);
    transform: translate3d(0, 0, 0) scale(1);
    transition-delay: 90ms;
}

.curated-display-surface.is-leaving.to-depth,
.curated-display-surface.is-leaving.to-left,
.curated-display-surface.is-leaving.to-right {
    transform: translate3d(0, -6px, 0) scale(0.988);
}

.curated-display-surface.is-resting {
    animation: none;
}

.curated-display-media {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    overflow: hidden;
}

.curated-display-media::before {
    background:
        radial-gradient(circle at 18% 14%, rgba(255, 255, 255, 0.24), rgba(255, 255, 255, 0) 28%),
        linear-gradient(180deg, rgba(8, 28, 44, 0.14) 0%, rgba(4, 16, 26, 0.46) 100%);
}

.curated-display-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.7;
    transform: scale(1.08) translate3d(0, 1.2%, 0);
    filter: saturate(0.84) contrast(1.02) brightness(0.76);
    transition:
        transform 1s var(--home-reveal-ease),
        filter 1s ease,
        opacity 0.82s ease;
}

.curated-display-surface.from-depth .curated-display-image,
.curated-display-surface.is-entering .curated-display-image {
    opacity: 0.62;
    transform: scale(1.1) translate3d(0, 1.6%, 0);
    filter: saturate(0.8) contrast(1.01) brightness(0.7);
}

.featured-destinations.is-stage-visible.is-stage-hydrated .curated-display-surface.is-active .curated-display-image {
    opacity: 1;
    transform: scale(1) translate3d(0, 0, 0);
    filter: saturate(0.96) contrast(1.04) brightness(0.94);
    transition-delay: 60ms;
}

.curated-display-surface.is-leaving.to-depth .curated-display-image,
.curated-display-surface.is-leaving.to-left .curated-display-image,
.curated-display-surface.is-leaving.to-right .curated-display-image {
    opacity: 0.5;
    transform: scale(1.02) translate3d(0, -1%, 0);
    filter: saturate(0.8) contrast(1.01) brightness(0.72);
}

.curated-display-sea-note {
    position: absolute;
    top: clamp(18px, 1.8vw, 24px);
    left: clamp(18px, 1.8vw, 24px);
    z-index: 3;
    display: grid;
    gap: 8px;
    padding: 12px 14px;
    min-width: clamp(138px, 16vw, 176px);
    border-radius: 18px;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0.04)),
        rgba(9, 34, 51, 0.34);
    border: 1px solid rgba(241, 249, 255, 0.14);
    box-shadow:
        0 18px 28px rgba(4, 16, 26, 0.16),
        inset 0 1px 0 rgba(255, 255, 255, 0.12);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    opacity: 0;
    filter: blur(8px);
    transform: translate3d(0, 12px, 0);
    transition:
        opacity 0.62s ease,
        transform 0.76s var(--home-reveal-ease),
        filter 0.76s ease;
}

.featured-destinations.is-stage-visible.is-stage-hydrated .curated-display-surface.is-active .curated-display-sea-note {
    opacity: 1;
    filter: blur(0);
    transform: translate3d(0, 0, 0);
    transition-delay: 260ms;
}

.curated-display-sea-note-label {
    font-size: 0.68rem;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: rgba(205, 227, 241, 0.58);
}

.curated-display-sea-note-value {
    font-family: "Noto Serif SC", "Source Han Serif SC", "Songti SC", serif;
    font-size: 1rem;
    line-height: 1.34;
    color: #f4fbff;
}

.curated-display-copy {
    position: absolute;
    right: clamp(18px, 1.8vw, 24px);
    bottom: clamp(18px, 1.8vw, 24px);
    z-index: 4;
    width: min(438px, calc(100% - 36px));
    display: grid;
    gap: 12px;
    padding: clamp(20px, 1.9vw, 26px);
    border-radius: 26px;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.04)),
        rgba(7, 24, 37, 0.68);
    border: 1px solid rgba(241, 249, 255, 0.16);
    box-shadow:
        0 28px 48px rgba(4, 16, 26, 0.26),
        inset 0 1px 0 rgba(255, 255, 255, 0.16);
    backdrop-filter: blur(22px) saturate(126%);
    -webkit-backdrop-filter: blur(22px) saturate(126%);
}

.curated-display-copy > * {
    opacity: 0;
    filter: blur(8px);
    transform: translate3d(0, 10px, 0);
    transition:
        opacity 0.5s ease,
        transform 0.62s var(--home-reveal-ease),
        filter 0.62s ease;
}

.featured-destinations.is-stage-visible.is-stage-hydrated .curated-display-surface.is-active .curated-display-copy > * {
    opacity: 1;
    filter: blur(0);
    transform: translate3d(0, 0, 0);
}

.featured-destinations.is-stage-visible.is-stage-hydrated .curated-display-surface.is-active .curated-display-kicker { transition-delay: 90ms; }
.featured-destinations.is-stage-visible.is-stage-hydrated .curated-display-surface.is-active .curated-display-heading { transition-delay: 150ms; }
.featured-destinations.is-stage-visible.is-stage-hydrated .curated-display-surface.is-active .curated-display-atmosphere { transition-delay: 210ms; }
.featured-destinations.is-stage-visible.is-stage-hydrated .curated-display-surface.is-active .curated-display-facts { transition-delay: 270ms; }
.featured-destinations.is-stage-visible.is-stage-hydrated .curated-display-surface.is-active .curated-display-conditions { transition-delay: 330ms; }
.featured-destinations.is-stage-visible.is-stage-hydrated .curated-display-surface.is-active .curated-display-worth { transition-delay: 390ms; }
.featured-destinations.is-stage-visible.is-stage-hydrated .curated-display-surface.is-active .curated-display-footnote { transition-delay: 450ms; }
.featured-destinations.is-stage-visible.is-stage-hydrated .curated-display-surface.is-active .curated-detail-button { transition-delay: 510ms; }

.curated-display-name {
    font-size: clamp(2rem, 2.8vw, 2.9rem);
    line-height: 1.08;
}

.curated-display-fact {
    min-height: 92px;
    padding: 14px 14px 12px;
    border-radius: 18px;
}

.curated-display-footnote {
    margin: 2px 0 0;
    font-size: 0.8rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(195, 219, 234, 0.56);
}

.curated-detail-button {
    margin-top: 2px;
}

.curated-detail-button:hover {
    transform: translate3d(0, -2px, 0);
}

/* 海域陈列精修：让舞台、主档案与相邻海域墙重新形成海层关系。 */
.curated-waters-stage.curated-archive-wall {
    grid-template-columns: minmax(0, 1.18fr) clamp(246px, 22vw, 300px);
    gap: clamp(24px, 2.6vw, 36px);
    padding: clamp(22px, 2.8vw, 34px);
    border-color: rgba(230, 246, 255, 0.11);
    background:
        radial-gradient(ellipse at 38% 12%, rgba(190, 223, 242, 0.13), rgba(190, 223, 242, 0) 34%),
        radial-gradient(ellipse at 86% 50%, rgba(78, 149, 184, 0.12), rgba(78, 149, 184, 0) 30%),
        linear-gradient(90deg, rgba(4, 18, 31, 0.18), rgba(7, 29, 45, 0.1) 58%, rgba(5, 22, 36, 0.42)),
        linear-gradient(180deg, rgba(13, 53, 78, 0.42), rgba(4, 17, 28, 0.48));
    box-shadow:
        0 46px 96px rgba(2, 12, 21, 0.32),
        0 0 0 1px rgba(206, 232, 245, 0.04),
        inset 0 1px 0 rgba(255, 255, 255, 0.12),
        inset 0 -34px 84px rgba(2, 13, 23, 0.24);
}

.curated-waters-stage.curated-archive-wall::before {
    background:
        linear-gradient(90deg, rgba(223, 244, 255, 0.08), rgba(223, 244, 255, 0) 26%),
        linear-gradient(180deg, rgba(237, 249, 255, 0.1), rgba(237, 249, 255, 0) 30%),
        radial-gradient(ellipse at 52% 78%, rgba(29, 104, 139, 0.26), rgba(29, 104, 139, 0) 46%),
        repeating-linear-gradient(180deg, rgba(217, 241, 252, 0.032) 0 1px, transparent 1px 46px);
    opacity: 0.82;
}

.curated-waters-stage.curated-archive-wall::after {
    left: clamp(38px, 4vw, 58px);
    right: clamp(290px, 26vw, 352px);
    bottom: clamp(22px, 2.5vw, 34px);
    height: clamp(160px, 18vw, 230px);
    background:
        radial-gradient(ellipse at 50% 100%, rgba(117, 192, 224, 0.22), rgba(117, 192, 224, 0) 68%),
        linear-gradient(180deg, rgba(4, 18, 30, 0), rgba(4, 18, 30, 0.24));
    opacity: 0.86;
    filter: blur(22px);
}

.curated-waters-stage.curated-archive-wall .curated-display-surface {
    border-color: rgba(229, 246, 255, 0.09);
    background:
        radial-gradient(ellipse at 74% 18%, rgba(210, 236, 248, 0.12), rgba(210, 236, 248, 0) 30%),
        linear-gradient(120deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.018) 48%),
        linear-gradient(180deg, rgba(7, 30, 47, 0.34), rgba(3, 15, 26, 0.34));
    box-shadow:
        0 38px 82px rgba(2, 12, 22, 0.24),
        inset 0 1px 0 rgba(255, 255, 255, 0.1),
        inset 0 -42px 78px rgba(2, 13, 23, 0.24);
}

.curated-waters-stage.curated-archive-wall .curated-display-surface::before {
    background:
        linear-gradient(90deg, rgba(4, 18, 30, 0.04), rgba(4, 18, 30, 0.34) 62%, rgba(4, 18, 30, 0.54)),
        radial-gradient(ellipse at 28% 14%, rgba(238, 250, 255, 0.16), rgba(238, 250, 255, 0) 30%),
        radial-gradient(ellipse at 64% 88%, rgba(83, 169, 205, 0.12), rgba(83, 169, 205, 0) 42%);
}

.curated-waters-stage.curated-archive-wall .curated-display-surface::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background:
        linear-gradient(115deg, rgba(255, 255, 255, 0) 12%, rgba(231, 248, 255, 0.06) 34%, rgba(255, 255, 255, 0) 52%),
        repeating-linear-gradient(90deg, rgba(207, 234, 246, 0.03) 0 1px, transparent 1px 58px);
    mix-blend-mode: screen;
    opacity: 0.42;
    transform: translate3d(-3%, 0, 0);
    transition: opacity 0.86s ease, transform 1.16s var(--home-reveal-ease);
}

.featured-destinations.is-stage-visible.is-stage-hydrated .curated-display-surface.is-active::after {
    opacity: 0.58;
    transform: translate3d(0, 0, 0);
}

.curated-waters-stage.curated-archive-wall .curated-display-media {
    border-radius: 30px;
    background: rgba(3, 17, 30, 0.5);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.1),
        inset 0 -28px 58px rgba(1, 10, 19, 0.32),
        0 26px 48px rgba(2, 13, 23, 0.22);
}

.curated-waters-stage.curated-archive-wall .curated-display-media::before {
    background:
        linear-gradient(90deg, rgba(3, 15, 27, 0.08), rgba(3, 15, 27, 0.18) 56%, rgba(3, 15, 27, 0.48)),
        linear-gradient(180deg, rgba(235, 249, 255, 0.1), rgba(4, 18, 31, 0.3) 72%, rgba(3, 14, 24, 0.52)),
        radial-gradient(ellipse at 22% 18%, rgba(240, 251, 255, 0.18), rgba(240, 251, 255, 0) 28%);
    opacity: 0.92;
}

.curated-waters-stage.curated-archive-wall .curated-display-media::after {
    opacity: 0.22;
}

.curated-waters-stage.curated-archive-wall .curated-display-image {
    filter: saturate(0.86) contrast(1.06) brightness(0.78) hue-rotate(-2deg);
}

.featured-destinations.is-stage-visible.is-stage-hydrated .curated-waters-stage.curated-archive-wall .curated-display-surface.is-active .curated-display-image {
    filter: saturate(0.9) contrast(1.07) brightness(0.88) hue-rotate(-2deg);
}

.curated-waters-stage.curated-archive-wall .curated-display-copy {
    right: clamp(26px, 2.4vw, 38px);
    bottom: clamp(24px, 2.4vw, 36px);
    width: min(430px, calc(100% - 52px));
    gap: 13px;
    padding: clamp(24px, 2.25vw, 32px);
    border-radius: 30px;
    border-color: rgba(231, 247, 255, 0.12);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.025)),
        radial-gradient(ellipse at 26% 8%, rgba(171, 215, 235, 0.1), rgba(171, 215, 235, 0) 36%),
        rgba(4, 18, 30, 0.72);
    box-shadow:
        0 32px 62px rgba(1, 11, 20, 0.32),
        inset 0 1px 0 rgba(255, 255, 255, 0.12),
        inset 0 -24px 54px rgba(2, 12, 22, 0.18);
    backdrop-filter: blur(26px) saturate(118%);
    -webkit-backdrop-filter: blur(26px) saturate(118%);
}

.curated-waters-stage.curated-archive-wall .curated-display-copy::before {
    content: "";
    position: absolute;
    inset: 14px 16px auto;
    height: 1px;
    background: linear-gradient(90deg, rgba(227, 247, 255, 0), rgba(227, 247, 255, 0.34), rgba(227, 247, 255, 0));
    opacity: 0.7;
    pointer-events: none;
}

.curated-waters-stage.curated-archive-wall .curated-display-facts {
    border-color: rgba(231, 247, 255, 0.08);
    background:
        linear-gradient(90deg, rgba(226, 244, 255, 0.07), rgba(226, 244, 255, 0.018)),
        rgba(6, 28, 44, 0.3);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07);
}

.curated-waters-stage.curated-archive-wall .curated-display-condition {
    background: rgba(218, 240, 252, 0.055);
    border-color: rgba(218, 240, 252, 0.12);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.curated-waters-stage.curated-archive-wall .curated-detail-button {
    position: relative;
    overflow: hidden;
    background:
        linear-gradient(180deg, rgba(233, 248, 255, 0.18), rgba(233, 248, 255, 0.05)),
        rgba(99, 167, 199, 0.2);
}

.curated-waters-stage.curated-archive-wall .curated-detail-button::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(100deg, transparent 0 28%, rgba(238, 250, 255, 0.2) 48%, transparent 68%);
    opacity: 0;
    transform: translate3d(-62%, 0, 0);
    transition: opacity 0.3s ease, transform 0.72s ease;
}

.curated-waters-stage.curated-archive-wall .curated-detail-button:hover::before {
    opacity: 1;
    transform: translate3d(62%, 0, 0);
}

.curated-waters-stage.curated-archive-wall .curated-nav-rail {
    align-content: stretch;
    gap: clamp(14px, 1.7vw, 20px);
    padding: clamp(20px, 2.1vw, 30px) 0 clamp(58px, 6vw, 86px);
    mask-image: linear-gradient(180deg, transparent, #000 8%, #000 84%, transparent);
}

.curated-waters-stage.curated-archive-wall .curated-nav-rail::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: -16px;
    width: 1px;
    background: linear-gradient(180deg, transparent, rgba(219, 243, 255, 0.24) 18%, rgba(219, 243, 255, 0.08) 72%, transparent);
    pointer-events: none;
}

.curated-waters-stage.curated-archive-wall .curated-nav-btn {
    grid-template-columns: 66px minmax(0, 1fr);
    gap: 8px 12px;
    min-height: 118px;
    padding: 16px 16px 18px;
    border-radius: 26px;
    background:
        radial-gradient(ellipse at 44% 0%, rgba(218, 242, 255, 0.08), rgba(218, 242, 255, 0) 54%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.072), rgba(255, 255, 255, 0.012)),
        rgba(5, 23, 38, 0.2);
    border-color: rgba(226, 244, 254, 0.075);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.055),
        0 20px 34px rgba(2, 13, 23, 0.11);
}

.curated-waters-stage.curated-archive-wall .curated-nav-btn::before {
    left: 18px;
    right: 18px;
    bottom: 12px;
    background: linear-gradient(90deg, rgba(196, 230, 246, 0), rgba(196, 230, 246, 0.38), rgba(196, 230, 246, 0));
}

.curated-waters-stage.curated-archive-wall .curated-nav-btn::after {
    background:
        radial-gradient(circle at 16px 16px, rgba(219, 244, 255, 0.18), rgba(219, 244, 255, 0) 28%),
        linear-gradient(92deg, rgba(222, 244, 255, 0.06), rgba(222, 244, 255, 0));
    opacity: 0.42;
}

.curated-waters-stage.curated-archive-wall .curated-nav-thumb {
    width: 66px;
    height: 78px;
    border-radius: 18px;
    transform: translate3d(0, 0, 0);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.1),
        0 14px 26px rgba(2, 12, 22, 0.16);
}

.curated-waters-stage.curated-archive-wall .curated-nav-thumb::after {
    background: linear-gradient(180deg, rgba(238, 250, 255, 0.08), rgba(3, 16, 28, 0.28));
}

.curated-waters-stage.curated-archive-wall .curated-nav-thumb img {
    filter: saturate(0.72) contrast(1.02) brightness(0.68);
}

.curated-waters-stage.curated-archive-wall .curated-nav-btn:hover {
    opacity: 0.9;
    transform: translate3d(-3px, -2px, 0) scale(1.01);
    border-color: rgba(231, 248, 255, 0.16);
    background:
        radial-gradient(ellipse at 42% 0%, rgba(224, 246, 255, 0.11), rgba(224, 246, 255, 0) 56%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.095), rgba(255, 255, 255, 0.018)),
        rgba(8, 32, 50, 0.26);
}

.curated-waters-stage.curated-archive-wall .curated-nav-btn:hover .curated-nav-thumb img {
    filter: saturate(0.84) contrast(1.04) brightness(0.82);
}

.curated-waters-stage.curated-archive-wall .curated-nav-btn.is-active {
    transform: translate3d(-8px, 0, 0) scale(1.035);
    border-color: rgba(234, 248, 255, 0.2);
    background:
        radial-gradient(ellipse at 36% 0%, rgba(231, 248, 255, 0.15), rgba(231, 248, 255, 0) 58%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.13), rgba(255, 255, 255, 0.03)),
        rgba(15, 50, 73, 0.42);
    box-shadow:
        0 26px 46px rgba(2, 13, 23, 0.2),
        0 0 34px rgba(129, 195, 226, 0.09),
        inset 0 1px 0 rgba(255, 255, 255, 0.13);
}

.curated-waters-stage.curated-archive-wall .curated-nav-btn.is-active .curated-nav-thumb img {
    filter: saturate(0.92) contrast(1.05) brightness(0.92);
}

.curated-waters-stage.curated-archive-wall .curated-nav-btn:not(.is-active) .curated-nav-name {
    color: rgba(222, 239, 248, 0.74);
}

.curated-waters-stage.curated-archive-wall .curated-nav-btn:not(.is-active) .curated-nav-meta,
.curated-waters-stage.curated-archive-wall .curated-nav-btn:not(.is-active) .curated-nav-eng,
.curated-waters-stage.curated-archive-wall .curated-nav-btn:not(.is-active) .curated-nav-keyword {
    color: rgba(194, 219, 234, 0.46);
}

.curated-display-surface.is-leaving.to-depth {
    opacity: 0;
    filter: blur(18px);
    transform: translate3d(-18px, 18px, 0) scale(0.988);
}

.curated-display-surface.from-depth,
.curated-display-surface.is-entering {
    transform: translate3d(18px, 24px, 0) scale(0.972);
}

@keyframes curated-breathe {
    0%,
    100% {
        transform: translate3d(0, 0, 0);
    }
    50% {
        transform: translate3d(0, -6px, 0);
    }
}

@keyframes curated-refresh-orbit {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

/* ============================================
   潜水匹配
   ============================================ */

/* 潜水匹配：做成比精选目的地更深一层的匹配海域档案。 */
.dive-match {
    position: relative;
    overflow: hidden;
    margin-top: -64px;
    padding: clamp(38px, 4vw, 58px) var(--spacing-lg) clamp(88px, 9vw, 136px);
    background:
        radial-gradient(circle at 16% 18%, rgba(137, 190, 218, 0.1) 0%, rgba(137, 190, 218, 0) 22%),
        radial-gradient(circle at 84% 20%, rgba(103, 174, 210, 0.08) 0%, rgba(103, 174, 210, 0) 24%),
        linear-gradient(180deg, #0a2e49 0%, #0b2941 46%, #0a2237 100%);
}

/* 潜水匹配顶部一层柔和雾面过渡，让它从精选目的地平滑接进来。 */
.dive-match::before {
    content: "";
    position: absolute;
    inset: -1px 0 auto;
    height: 190px;
    background:
        radial-gradient(ellipse at 52% 0%, rgba(62, 138, 176, 0.13), rgba(34, 92, 125, 0.05) 40%, rgba(8, 34, 54, 0) 70%),
        linear-gradient(180deg, rgba(8, 34, 54, 0.86) 0%, rgba(9, 39, 61, 0.4) 46%, rgba(9, 39, 61, 0) 100%);
    filter: none;
    pointer-events: none;
    z-index: 0;
}

/* 潜水匹配底部留一层更深的海流过渡，为后面的盐憩故事衔接深度。 */
.dive-match::after {
    content: "";
    position: absolute;
    inset: auto 0 -8%;
    height: 180px;
    background:
        radial-gradient(ellipse at 50% 100%, rgba(48, 123, 161, 0.12), rgba(19, 67, 101, 0.04) 38%, rgba(8, 27, 43, 0) 68%),
        linear-gradient(180deg, rgba(8, 27, 43, 0) 0%, rgba(10, 32, 50, 0.42) 48%, rgba(11, 40, 64, 0.94) 100%);
    filter: none;
    pointer-events: none;
    z-index: 0;
}

/* 制制 潜水匹配模块整体宽度、左右关系和留白 */
.dive-match-shell {
    position: relative;
    z-index: 1;
    max-width: 1440px;
    margin: 0 auto;
    display: grid;
    gap: 34px;
}

/* 统一潜水匹配标题区的显现前状态。 */
.dive-match-reveal {
    opacity: 0;
    transform: translate3d(0, 16px, 0);
    filter: blur(10px);
    transition:
        opacity 0.84s ease,
        transform 0.84s cubic-bezier(0.18, 0.84, 0.22, 1),
        filter 0.84s ease;
}

/* 标题区先进入，像先看见一层海的说明。 */
.dive-match.is-visible .dive-match-reveal {
    opacity: 1;
    transform: translate3d(0, 0, 0);
    filter: blur(0);
}

.dive-match.is-visible .dive-match-stage.dive-match-reveal {
    transition-delay: 100ms;
}

/* 制制模块标题区的最大宽度和叙事节奏 */
.dive-match-intro {
    max-width: 860px;
}

.dive-match-intro > * {
    opacity: 0;
    filter: blur(8px);
    transform: translate3d(0, 8px, 0);
    transition:
        opacity 0.58s ease,
        filter 0.7s ease,
        transform 0.7s cubic-bezier(0.18, 0.84, 0.22, 1);
}

.dive-match.is-visible .dive-match-intro > * {
    opacity: 1;
    filter: blur(0);
    transform: translate3d(0, 0, 0);
}

.dive-match.is-visible .dive-match-intro > .dive-match-kicker {
    transition-delay: 40ms;
}

.dive-match.is-visible .dive-match-intro > .dive-match-title {
    transition-delay: 110ms;
}

.dive-match.is-visible .dive-match-intro > .dive-match-subtitle {
    transition-delay: 180ms;
}

/* 设置潜水匹配英文 kicker 的轻量品牌感 */
.dive-match-kicker {
    margin: 0 0 16px;
    font-size: 0.72rem;
    letter-spacing: 0.34em;
    text-transform: uppercase;
    color: rgba(214, 235, 247, 0.58);
}

/* 设置模块主标题的字号、留白和深海白文字。 */
.dive-match-title {
    margin: 0;
    font-family: "Noto Serif SC", "Source Han Serif SC", "Songti SC", serif;
    font-size: clamp(2rem, 3vw, 2.8rem);
    line-height: 1.16;
    color: #f5fbff;
}

/* 设置模块副文案的阅读宽度和更柔和的浅海盐色。 */
.dive-match-subtitle {
    margin: 18px 0 0;
    max-width: 760px;
    font-size: 1rem;
    line-height: 1.86;
    color: rgba(221, 237, 247, 0.8);
}

/* 让匹配舞台像一块更深层的海域档案台，承载标签和内容。 */
.dive-match-stage {
    position: relative;
    display: grid;
    gap: 26px;
    padding: clamp(22px, 2.6vw, 32px);
    border-radius: 40px;
    border: 1px solid rgba(239, 248, 253, 0.12);
    background:
        linear-gradient(148deg, rgba(255, 255, 255, 0.11), rgba(255, 255, 255, 0.02)),
        linear-gradient(180deg, rgba(13, 46, 70, 0.42), rgba(7, 25, 40, 0.26)),
        rgba(6, 22, 34, 0.5);
    box-shadow:
        0 34px 74px rgba(4, 16, 26, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.12),
        inset 0 -1px 0 rgba(255, 255, 255, 0.04);
    backdrop-filter: blur(18px) saturate(124%);
    -webkit-backdrop-filter: blur(18px) saturate(124%);
    isolation: isolate;
    transition:
        box-shadow 0.72s cubic-bezier(0.18, 0.84, 0.22, 1),
        border-color 0.72s ease,
        background 0.72s ease;
}

/* 给舞台表面一层很淡的海流扫光 */
.dive-match-stage::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background:
        radial-gradient(circle at 18% 14%, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0) 28%),
        linear-gradient(120deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0) 34%);
    pointer-events: none;
    z-index: 0;
    transform: translate3d(0, 0, 0) scaleX(1);
    transform-origin: center center;
    transition:
        opacity 0.62s ease,
        transform 0.82s cubic-bezier(0.18, 0.84, 0.22, 1);
    will-change: opacity, transform;
}

.dive-match-stage > .dive-match-profile-panel,
.dive-match-stage > .dive-match-rail,
.dive-match-stage > .dive-match-display {
    opacity: 0;
    filter: blur(6px);
    transform: translate3d(0, 8px, 0);
    transition:
        opacity 0.64s ease,
        filter 0.74s ease,
        transform 0.74s cubic-bezier(0.18, 0.84, 0.22, 1);
}

.dive-match.is-stage-visible .dive-match-stage > .dive-match-profile-panel {
    opacity: 1;
    filter: blur(0);
    transform: translate3d(0, 0, 0);
    transition-delay: 30ms;
}

.dive-match.is-stage-visible .dive-match-stage > .dive-match-rail {
    opacity: 1;
    filter: blur(0);
    transform: translate3d(0, 0, 0);
    transition-delay: 80ms;
}

.dive-match.is-display-visible .dive-match-stage > .dive-match-display {
    opacity: 1;
    filter: blur(0);
    transform: translate3d(0, 0, 0);
    transition-delay: 140ms;
}

.dive-match-profile-panel {
    position: relative;
    z-index: 1;
    overflow: hidden;
    isolation: isolate;
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.9fr) minmax(0, 1.15fr);
    gap: 18px;
    padding: 20px 22px;
    border-radius: 28px;
    border: 1px solid rgba(231, 244, 251, 0.12);
    background:
        radial-gradient(circle at 16% 18%, rgba(213, 237, 248, 0.12), rgba(213, 237, 248, 0) 24%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.03)),
        rgba(7, 30, 46, 0.56);
    box-shadow:
        0 22px 44px rgba(3, 14, 23, 0.18),
        inset 0 1px 0 rgba(255, 255, 255, 0.12);
    backdrop-filter: blur(18px) saturate(122%);
    -webkit-backdrop-filter: blur(18px) saturate(122%);
    transition:
        border-color 320ms ease,
        box-shadow 420ms ease;
}

.dive-match-profile-panel.is-content-transitioning {
    border-color: rgba(231, 244, 251, 0.16);
    box-shadow:
        0 28px 52px rgba(3, 14, 23, 0.16),
        inset 0 1px 0 rgba(255, 255, 255, 0.14);
}

.dive-match-profile-copy,
.dive-match-profile-reason,
.dive-match-profile-presets {
    position: relative;
    z-index: 1;
    min-width: 0;
}

.dive-match-profile-copy,
.dive-match-profile-reason {
    display: grid;
    align-content: start;
    isolation: isolate;
}

.dive-match-profile-panel-track {
    grid-area: 1 / 1;
    min-width: 0;
    opacity: 1;
    transform: translate3d(0, 0, 0);
    will-change: opacity, transform;
    transition:
        opacity 380ms cubic-bezier(0.22, 0.1, 0.24, 1),
        transform 520ms cubic-bezier(0.14, 0.82, 0.2, 1);
}

.dive-match-profile-panel-track.is-current {
    position: relative;
    z-index: 2;
}

.dive-match-profile-panel-track.is-preparing,
.dive-match-profile-panel-track.is-swapping-out {
    opacity: 0.88;
    transform: translate3d(0, 6px, 0);
}

.dive-match-profile-panel-track.is-swapping-in {
    z-index: 3;
}

.dive-match-profile-copy.is-transitioning,
.dive-match-profile-reason.is-transitioning {
    pointer-events: none;
}

.dive-match-profile-kicker,
.dive-match-profile-reason-kicker {
    margin: 0 0 8px;
    font-size: 0.72rem;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: rgba(196, 225, 240, 0.66);
}

.dive-match-profile-title,
.dive-match-profile-reason-title {
    margin: 0;
    color: rgba(244, 249, 252, 0.96);
    font-size: 1.55rem;
    line-height: 1.28;
}

.dive-match-profile-summary,
.dive-match-profile-reason-copy {
    margin: 12px 0 0;
    color: rgba(220, 236, 244, 0.84);
    font-size: 0.98rem;
    line-height: 1.78;
}

.dive-match-profile-kicker-line,
.dive-match-profile-title-line,
.dive-match-profile-summary-line,
.dive-match-profile-reason-kicker-line,
.dive-match-profile-reason-title-line,
.dive-match-profile-reason-copy-line {
    position: relative;
    display: grid;
    min-height: 1em;
    isolation: isolate;
}

.dive-match-profile-type-ghost,
.dive-match-profile-type-active {
    grid-area: 1 / 1;
    display: block;
    white-space: pre-wrap;
}

.dive-match-profile-type-ghost {
    position: relative;
    z-index: 0;
    pointer-events: none;
}

.dive-match-profile-type-active {
    position: relative;
    z-index: 1;
}

.dive-match-profile-ghost-char {
    display: inline-block;
    opacity: 0;
    filter: blur(0);
    transform: translate3d(0, 0, 0);
    transition:
        opacity 240ms ease,
        transform 520ms cubic-bezier(0.2, 0.78, 0.22, 1),
        filter 520ms ease;
}

.dive-match-profile-ghost-char.is-space {
    min-width: 0.3em;
}

.dive-match-profile-ghost-char.is-diff {
    opacity: 0.22;
    filter: blur(1.4px);
    transform: translate3d(0, 4px, 0);
}

.dive-match-profile-kicker-line.is-typed .dive-match-profile-ghost-char.is-diff,
.dive-match-profile-title-line.is-typed .dive-match-profile-ghost-char.is-diff,
.dive-match-profile-summary-line.is-typed .dive-match-profile-ghost-char.is-diff,
.dive-match-profile-reason-kicker-line.is-typed .dive-match-profile-ghost-char.is-diff,
.dive-match-profile-reason-title-line.is-typed .dive-match-profile-ghost-char.is-diff,
.dive-match-profile-reason-copy-line.is-typed .dive-match-profile-ghost-char.is-diff {
    opacity: 0;
    filter: blur(0);
    transform: translate3d(0, 0, 0);
}

.dive-match-profile-kicker-line,
.dive-match-profile-reason-kicker-line {
    --dive-match-profile-line-delay: 0ms;
}

.dive-match-profile-title-line,
.dive-match-profile-reason-title-line {
    --dive-match-profile-line-delay: 65ms;
}

.dive-match-profile-summary-line,
.dive-match-profile-reason-copy-line {
    --dive-match-profile-line-delay: 130ms;
}

.dive-match-profile-type-char {
    display: inline-block;
    opacity: 0;
    filter: blur(12px);
    transform: translate3d(0, 10px, 0);
    text-shadow: 0 0 0 rgba(198, 228, 241, 0);
    transition:
        opacity 0.5s ease,
        transform 620ms cubic-bezier(0.2, 0.78, 0.22, 1),
        filter 520ms ease,
        text-shadow 620ms ease;
}

.dive-match-profile-type-char.is-space {
    min-width: 0.3em;
}

.dive-match-profile-type-char.is-visible {
    opacity: 1;
    filter: blur(0);
    transform: translate3d(0, 0, 0);
    text-shadow: 0 10px 18px rgba(117, 177, 202, 0.14);
}

.dive-match-profile-copy-track.is-swapping-out .dive-match-profile-kicker-line,
.dive-match-profile-copy-track.is-swapping-out .dive-match-profile-title-line,
.dive-match-profile-copy-track.is-swapping-out .dive-match-profile-summary-line,
.dive-match-profile-reason-track.is-swapping-out .dive-match-profile-reason-kicker-line,
.dive-match-profile-reason-track.is-swapping-out .dive-match-profile-reason-title-line,
.dive-match-profile-reason-track.is-swapping-out .dive-match-profile-reason-copy-line {
    animation: dive-match-profile-line-out 300ms ease both;
    animation-delay: calc(var(--dive-match-profile-line-delay) * 0.35);
}

.dive-match-profile-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 16px;
    opacity: 1;
    transform: translate3d(0, 0, 0);
    transition:
        opacity 260ms ease,
        transform 520ms cubic-bezier(0.14, 0.82, 0.2, 1);
}

.dive-match-profile-copy-track.is-awakened .dive-match-profile-chips {
    opacity: 1;
    transform: translate3d(0, 0, 0);
}

.dive-match-profile-copy-track.is-typed .dive-match-profile-chips {
    opacity: 1;
    transform: translate3d(0, 0, 0);
}

.dive-match-profile-copy-track.is-swapping-out .dive-match-profile-chips {
    opacity: 0.86;
    transform: translate3d(0, 5px, 0);
}

.dive-match-profile-chip {
    display: inline-flex;
    align-items: center;
    padding: 8px 12px;
    border-radius: 999px;
    border: 1px solid rgba(220, 238, 247, 0.12);
    background: rgba(255, 255, 255, 0.06);
    color: rgba(238, 247, 251, 0.9);
    font-size: 0.82rem;
    letter-spacing: 0.04em;
}

.dive-match-profile-presets {
    position: relative;
    display: grid;
    isolation: isolate;
}

.dive-match-profile-presets-focus-aura {
    position: absolute;
    left: 0;
    top: 0;
    width: 0;
    height: 0;
    border-radius: 20px;
    background:
        radial-gradient(circle at 18% 16%, rgba(244, 250, 252, 0.18), rgba(244, 250, 252, 0) 54%),
        linear-gradient(180deg, rgba(205, 233, 246, 0.14), rgba(205, 233, 246, 0.03)),
        rgba(10, 39, 58, 0.4);
    box-shadow:
        0 18px 34px rgba(2, 14, 23, 0.14),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
    opacity: 0;
    transform: translate3d(0, 0, 0);
    filter: blur(0);
    transition:
        opacity 360ms ease,
        transform 980ms cubic-bezier(0.14, 0.82, 0.2, 1),
        width 980ms cubic-bezier(0.14, 0.82, 0.2, 1),
        height 980ms cubic-bezier(0.14, 0.82, 0.2, 1),
        filter 980ms ease,
        box-shadow 520ms ease;
    will-change: transform, width, height, filter, opacity;
    pointer-events: none;
    z-index: 1;
}

.dive-match-profile-presets.is-transitioning .dive-match-profile-presets-focus-aura {
    filter: blur(10px);
    box-shadow:
        0 22px 42px rgba(2, 14, 23, 0.12),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.dive-match-profile-presets.is-focus-static .dive-match-profile-presets-focus-aura {
    transition-duration: 1ms;
}

.dive-match-profile-presets-track {
    grid-area: 1 / 1;
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-auto-rows: 1fr;
    gap: 10px;
    opacity: 1;
    filter: blur(0);
    transform: translate3d(0, 0, 0);
    will-change: opacity, filter, transform;
    transition:
        opacity 380ms ease,
        filter 560ms ease,
        transform 980ms cubic-bezier(0.14, 0.82, 0.2, 1);
}

.dive-match-profile-presets-track.is-current {
    z-index: 2;
}

.dive-match-profile-presets-track.is-preparing,
.dive-match-profile-presets-track.is-swapping-out {
    opacity: 0;
    filter: blur(14px);
    transform: translate3d(0, 16px, 0);
}

.dive-match-profile-presets-track.is-swapping-in {
    z-index: 3;
}

.dive-match-profile-presets-track.is-swapping-out {
}

.dive-match-profile-presets-track.is-preparing,
.dive-match-profile-presets-track.is-swapping-in,
.dive-match-profile-presets-track.is-swapping-out {
    pointer-events: none;
}

.dive-match-profile-preset {
    --preset-hover-lift: 0px;
    --preset-motion-shift: 0px;
    --preset-motion-opacity: 1;
    --preset-motion-blur: 0px;
    --preset-motion-delay: 0ms;
    position: relative;
    overflow: hidden;
    isolation: isolate;
    appearance: none;
    -webkit-appearance: none;
    display: grid;
    align-content: start;
    gap: 8px;
    min-width: 0;
    min-height: 100%;
    border: 1px solid rgba(228, 243, 249, 0.1);
    border-radius: 20px;
    padding: 14px 14px 15px;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.03)),
        rgba(8, 32, 48, 0.48);
    color: rgba(224, 239, 246, 0.9);
    text-align: left;
    font: inherit;
    cursor: pointer;
    opacity: var(--preset-motion-opacity);
    filter: blur(var(--preset-motion-blur));
    transform: translate3d(0, calc(var(--preset-hover-lift) + var(--preset-motion-shift)), 0);
    transform-origin: center top;
    will-change: opacity, filter, transform;
    transition:
        opacity 360ms ease var(--preset-motion-delay),
        filter 520ms ease var(--preset-motion-delay),
        transform 980ms cubic-bezier(0.14, 0.82, 0.2, 1) var(--preset-motion-delay),
        border-color 260ms ease,
        background 260ms ease,
        box-shadow 260ms ease;
}

.dive-match-profile-preset:hover,
.dive-match-profile-preset:focus-visible {
    --preset-hover-lift: -2px;
    border-color: rgba(224, 241, 248, 0.18);
    box-shadow: 0 16px 28px rgba(2, 14, 23, 0.16);
}

.dive-match-profile-preset:focus-visible {
    outline: none;
}

.dive-match-profile-preset.is-aligned {
    border-color: rgba(175, 224, 242, 0.22);
    background:
        linear-gradient(180deg, rgba(194, 230, 245, 0.14), rgba(194, 230, 245, 0.04)),
        rgba(8, 34, 50, 0.56);
}

.dive-match-profile-preset.is-active {
    border-color: rgba(194, 230, 245, 0.32);
    background:
        linear-gradient(180deg, rgba(205, 233, 246, 0.2), rgba(205, 233, 246, 0.05)),
        rgba(10, 39, 58, 0.62);
    box-shadow:
        0 18px 32px rgba(2, 14, 23, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.16);
}

.dive-match-profile-preset > * {
    position: relative;
    z-index: 1;
}

.dive-match-profile-presets-track.is-preparing .dive-match-profile-preset {
    --preset-motion-opacity: 0;
    --preset-motion-shift: 10px;
    --preset-motion-blur: 8px;
}

.dive-match-profile-presets-track.is-swapping-in .dive-match-profile-preset {
    --preset-motion-delay: calc(140ms + var(--preset-order, 0) * 78ms);
}

.dive-match-profile-presets-track.is-swapping-out .dive-match-profile-preset {
    --preset-motion-opacity: 0;
    --preset-motion-shift: 18px;
    --preset-motion-blur: 10px;
    --preset-motion-delay: calc(var(--preset-order, 0) * 40ms);
}

@keyframes dive-match-profile-track-in {
    0% {
        opacity: 0;
        filter: blur(18px);
        transform: translate3d(0, 22px, 0);
    }
    55% {
        opacity: 0.92;
        filter: blur(6px);
    }
    100% {
        opacity: 1;
        filter: blur(0);
        transform: translate3d(0, 0, 0);
    }
}

@keyframes dive-match-profile-track-out {
    0% {
        opacity: 1;
        filter: blur(0);
        transform: translate3d(0, 0, 0);
    }
    100% {
        opacity: 0;
        filter: blur(18px);
        transform: translate3d(0, 18px, 0);
    }
}

@keyframes dive-match-profile-item-in {
    0% {
        opacity: 0;
        filter: blur(10px);
        transform: translate3d(0, 18px, 0);
    }
    100% {
        opacity: 1;
        filter: blur(0);
        transform: translate3d(0, 0, 0);
    }
}

@keyframes dive-match-profile-item-out {
    0% {
        opacity: 1;
        filter: blur(0);
        transform: translate3d(0, 0, 0);
    }
    100% {
        opacity: 0;
        filter: blur(10px);
        transform: translate3d(0, 14px, 0);
    }
}

@keyframes dive-match-profile-preset-in {
    0% {
        opacity: 0;
        filter: blur(12px);
        transform: translate3d(0, 22px, 0) scale(0.968);
    }
    60% {
        opacity: 0.94;
        filter: blur(5px);
    }
    100% {
        opacity: 1;
        filter: blur(0);
        transform: translate3d(0, 0, 0) scale(1);
    }
}

@keyframes dive-match-profile-preset-out {
    0% {
        opacity: 1;
        filter: blur(0);
        transform: translate3d(0, 0, 0) scale(1);
    }
    100% {
        opacity: 0;
        filter: blur(12px);
        transform: translate3d(0, 16px, 0) scale(0.978);
    }
}

@keyframes dive-match-profile-line-out {
    0% {
        opacity: 1;
        transform: translate3d(0, 0, 0);
        filter: blur(0);
    }
    100% {
        opacity: 0.82;
        transform: translate3d(0, 8px, 0);
        filter: blur(1.2px);
    }
}

@keyframes dive-match-profile-line-in {
    0% {
        opacity: 0.86;
        transform: translate3d(0, 8px, 0);
        filter: blur(1.2px);
    }
    58% {
        opacity: 1;
        transform: translate3d(0, -1px, 0);
        filter: blur(0);
    }
    100% {
        opacity: 1;
        transform: translate3d(0, 0, 0);
        filter: blur(0);
    }
}

@keyframes dive-match-profile-title-settle {
    0% {
        transform: translate3d(0, 0, 0);
    }
    42% {
        transform: translate3d(0, -2px, 0);
    }
    100% {
        transform: translate3d(0, 0, 0);
    }
}

.dive-match-profile-preset-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.dive-match-profile-preset-badge {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    border-radius: 999px;
    background: rgba(210, 232, 242, 0.1);
    color: rgba(235, 246, 251, 0.82);
    font-size: 0.66rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.dive-match-profile-preset-target {
    color: rgba(189, 217, 230, 0.76);
    font-size: 0.74rem;
    letter-spacing: 0.05em;
}

.dive-match-profile-preset.is-aligned .dive-match-profile-preset-badge,
.dive-match-profile-preset.is-active .dive-match-profile-preset-badge {
    background: rgba(213, 236, 245, 0.16);
    color: rgba(244, 250, 252, 0.92);
}

.dive-match-profile-preset-label {
    display: block;
    color: rgba(246, 251, 253, 0.96);
    font-size: 1rem;
    font-weight: 600;
}

.dive-match-profile-preset-copy {
    display: block;
    margin-top: 2px;
    color: rgba(208, 228, 238, 0.76);
    font-size: 0.82rem;
    line-height: 1.65;
}

/* 上方分类入口做成漂浮玻璃铭牌带，而不是普通 pills。 */
.dive-match-rail {
    position: relative;
    z-index: 1;
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

/* 分类铭牌的默认玻璃质感。 */
.dive-match-filter {
    all: unset;
    position: relative;
    display: inline-flex;
    flex-direction: column;
    gap: 6px;
    min-width: 134px;
    padding: 12px 16px 13px;
    border-radius: 20px;
    cursor: pointer;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0.04)),
        rgba(10, 38, 57, 0.42);
    border: 1px solid rgba(232, 244, 250, 0.12);
    box-shadow:
        0 14px 28px rgba(4, 17, 27, 0.14),
        inset 0 1px 0 rgba(255, 255, 255, 0.12);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    opacity: 0;
    transform: translate3d(0, 12px, 0);
    transition:
        opacity 0.68s ease,
        transform 0.72s cubic-bezier(0.2, 0.84, 0.24, 1),
        border-color 0.28s ease,
        box-shadow 0.28s ease,
        background-color 0.28s ease;
    transition-delay: 0ms;
    overflow: hidden;
}

/* 舞台真正进入后，分类铭牌依次浮现。 */
.dive-match.is-stage-visible .dive-match-filter {
    opacity: 1;
    transform: translate3d(0, 0, 0);
}

.dive-match.is-stage-visible:not(.is-stage-settled) .dive-match-filter {
    transition-delay: calc(140ms + var(--match-delay, 0ms));
}

/* 标签分组名用更轻的字重区分层次。 */
.dive-match-filter-group {
    font-size: 0.68rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: rgba(196, 222, 235, 0.56);
}

.dive-match-filter-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.dive-match-filter-depth {
    padding: 4px 8px;
    border-radius: 999px;
    border: 1px solid rgba(232, 244, 250, 0.12);
    background: rgba(232, 244, 250, 0.06);
    color: rgba(232, 244, 250, 0.72);
    font-size: 0.7rem;
    letter-spacing: 0.1em;
}

/* 标签主名称用更清楚的浅海盐白 */
.dive-match-filter-label {
    font-size: 0.92rem;
    line-height: 1.35;
    color: rgba(242, 249, 253, 0.9);
}

.dive-match-filter-whisper {
    display: block;
    max-width: 22ch;
    font-size: 0.76rem;
    line-height: 1.62;
    color: rgba(201, 223, 236, 0.6);
}

/* hover 时像触碰海中铭牌一样轻微上浮、提亮和扫光 */
.dive-match-filter:hover {
    transform: translate3d(0, -4px, 0);
    border-color: rgba(240, 248, 253, 0.22);
    box-shadow:
        0 18px 32px rgba(4, 17, 27, 0.18),
        0 0 24px rgba(141, 202, 229, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.16);
}

/* 当前激活分类用更清晰的边缘高光和潮汐线强调，而不是普通选中。 */
.dive-match-filter.is-active {
    border-color: rgba(237, 247, 252, 0.28);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0.06)),
        rgba(18, 62, 90, 0.54);
    box-shadow:
        0 18px 36px rgba(4, 17, 27, 0.2),
        0 0 28px rgba(162, 214, 239, 0.12),
        inset 0 1px 0 rgba(255, 255, 255, 0.18);
}

.dive-match-filter::after {
    content: "";
    position: absolute;
    left: 16px;
    right: 16px;
    bottom: 0;
    height: 2px;
    border-radius: 999px;
    background: linear-gradient(90deg, rgba(177, 223, 243, 0), rgba(221, 244, 255, 0.96), rgba(177, 223, 243, 0));
    opacity: 0;
    transform: scaleX(0.6);
    transition: opacity 320ms ease, transform 520ms cubic-bezier(0.18, 0.84, 0.22, 1);
}

.dive-match-filter.is-active::after {
    opacity: 1;
    transform: scaleX(1);
}

/* 推荐内容区用绝对叠层承载切换，避免普通 tab 切换感。 */
.dive-match-display {
    position: relative;
    z-index: 1;
    min-height: 620px;
}

/* 每个分类内容层由大引导卡和推荐档案卡组成 */
.dive-match-surface {
    position: absolute;
    inset: 0;
    display: grid;
    grid-template-columns: minmax(320px, 0.82fr) minmax(0, 1.18fr);
    gap: clamp(18px, 2vw, 26px);
    opacity: 0;
    filter: blur(10px);
    transform: translate3d(0, 0, 0) scale(0.992);
    transition:
        opacity 0.6s ease,
        transform 0.6s cubic-bezier(0.18, 0.84, 0.22, 1),
        filter 0.6s ease;
}

/* 更深层分类从更靠下的位置进入，模拟继续下潜。 */
.dive-match-surface.from-deeper {
    transform: translate3d(0, 22px, 0) scale(0.994);
}

/* 更浅层分类从更高一点的位置漂入，模拟向上回一层。 */
.dive-match-surface.from-shallower {
    transform: translate3d(0, -18px, 0) scale(0.994);
}

/* 当前激活内容层进入稳定状态，但要等舞台真正进入视口后再开始。 */
.dive-match.is-display-visible .dive-match-surface.is-active {
    opacity: 1;
    filter: blur(0);
    transform: translate3d(0, 0, 0) scale(1);
}

/* 旧内容切向更深层时，稍微失焦下沉离场 */
.dive-match-surface.is-leaving.to-deeper {
    opacity: 0;
    filter: blur(10px);
    transform: translate3d(0, -12px, 0) scale(0.992);
}

/* 旧内容切向更浅层时，稍微失焦下沉离场 */
.dive-match-surface.is-leaving.to-shallower {
    opacity: 0;
    filter: blur(10px);
    transform: translate3d(0, 12px, 0) scale(0.992);
}

/* 内容稳定后做极轻的呼吸浮动，也延后到用户真正看到这层海时。 */
.dive-match.is-display-visible .dive-match-surface.is-resting {
    animation: dive-match-surface-breathe 10s ease-in-out infinite;
}

/* 当前分类大卡像一页更深层的海域档案。 */
.dive-match-focus-card {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    align-self: start;
    min-height: 100%;
    padding: 28px 26px 26px;
    border-radius: 30px;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.03)),
        rgba(8, 29, 44, 0.62);
    border: 1px solid rgba(237, 247, 252, 0.12);
    box-shadow:
        0 24px 44px rgba(4, 17, 27, 0.18),
        inset 0 1px 0 rgba(255, 255, 255, 0.14);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    opacity: 0;
    filter: blur(8px);
    transform: translate3d(-12px, 16px, 0) scale(0.992);
    transition:
        opacity 0.56s ease,
        transform 0.68s cubic-bezier(0.18, 0.84, 0.22, 1),
        filter 0.68s ease;
}

/* 焦点卡补一层慢慢扫过的浅海微光，让切换更像海压变化而不是普通换卡。 */
.dive-match-focus-card::before,
.dive-match-focus-card::after {
    content: "";
    position: absolute;
    pointer-events: none;
    z-index: 0;
    opacity: 0;
}

.dive-match-focus-card::before {
    inset: auto -12% -26% 34%;
    height: 54%;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(168, 214, 236, 0.22) 0%, rgba(168, 214, 236, 0) 72%);
    filter: blur(20px);
    transform: translate3d(12px, 10px, 0) scale(0.94);
    transition:
        opacity 0.72s ease,
        transform 0.96s cubic-bezier(0.16, 0.82, 0.2, 1);
}

.dive-match-focus-card::after {
    inset: 0;
    border-radius: inherit;
    background:
        linear-gradient(128deg, rgba(255, 255, 255, 0.16) 0%, rgba(255, 255, 255, 0) 36%),
        linear-gradient(180deg, rgba(152, 205, 230, 0.12), rgba(152, 205, 230, 0) 42%);
    transform: translate3d(-4%, 0, 0);
    transition:
        opacity 0.64s ease,
        transform 0.82s cubic-bezier(0.16, 0.82, 0.2, 1);
}

/* 当前层被激活后，焦点卡先稳住，再把海雾和微光推开。 */
.dive-match.is-display-visible .dive-match-surface.is-active .dive-match-focus-card {
    opacity: 1;
    filter: blur(0);
    transform: translate3d(0, 0, 0) scale(1);
    transition-delay: 60ms;
}

.dive-match.is-display-visible .dive-match-surface.is-active .dive-match-focus-card::before {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
    transition-delay: 110ms;
}

.dive-match.is-display-visible .dive-match-surface.is-active .dive-match-focus-card::after {
    opacity: 0.78;
    transform: translate3d(0, 0, 0);
    transition-delay: 160ms;
}

/* 焦点卡里的文案分层显现，像同一页档案被海水慢慢排开。 */
.dive-match-focus-group,
.dive-match-focus-head,
.dive-match-focus-audience,
.dive-match-focus-guidance,
.dive-match-focus-note,
.dive-match-focus-personal {
    position: relative;
    z-index: 1;
    opacity: 0;
    filter: blur(8px);
    transform: translate3d(0, 10px, 0);
    transition:
        opacity 0.46s ease,
        transform 0.56s cubic-bezier(0.18, 0.84, 0.22, 1),
        filter 0.56s ease;
}

.dive-match-focus-depth {
    opacity: 0;
    transform: translate3d(10px, -4px, 0) scale(0.97);
    transition:
        opacity 0.42s ease,
        transform 0.52s cubic-bezier(0.18, 0.84, 0.22, 1);
}

.dive-match-focus-personal {
    margin-top: 18px;
    padding: 16px 18px 18px;
    border-radius: 20px;
    border: 1px solid rgba(222, 239, 247, 0.1);
    background: rgba(255, 255, 255, 0.05);
}

.dive-match-focus-personal-label {
    display: inline-block;
    margin-bottom: 8px;
    color: rgba(192, 222, 237, 0.72);
    font-size: 0.72rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
}

.dive-match-focus-personal-copy {
    margin: 0;
    color: rgba(231, 243, 249, 0.88);
    line-height: 1.76;
}

.dive-match.is-display-visible .dive-match-surface.is-active .dive-match-focus-group,
.dive-match.is-display-visible .dive-match-surface.is-active .dive-match-focus-head,
.dive-match.is-display-visible .dive-match-surface.is-active .dive-match-focus-audience,
.dive-match.is-display-visible .dive-match-surface.is-active .dive-match-focus-guidance,
.dive-match.is-display-visible .dive-match-surface.is-active .dive-match-focus-note,
.dive-match.is-display-visible .dive-match-surface.is-active .dive-match-focus-depth {
    opacity: 1;
    filter: blur(0);
    transform: translate3d(0, 0, 0) scale(1);
}

.dive-match.is-display-visible .dive-match-surface.is-active .dive-match-focus-group {
    transition-delay: 120ms;
}

.dive-match.is-display-visible .dive-match-surface.is-active .dive-match-focus-head {
    transition-delay: 180ms;
}

.dive-match.is-display-visible .dive-match-surface.is-active .dive-match-focus-depth {
    transition-delay: 230ms;
}

.dive-match.is-display-visible .dive-match-surface.is-active .dive-match-focus-audience {
    transition-delay: 260ms;
}

.dive-match.is-display-visible .dive-match-surface.is-active .dive-match-focus-guidance {
    transition-delay: 320ms;
}

.dive-match.is-display-visible .dive-match-surface.is-active .dive-match-focus-note {
    transition-delay: 380ms;
}

/* 分类分组名和当前所在层级。 */
.dive-match-focus-group {
    margin: 0 0 14px;
    font-size: 0.72rem;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: rgba(196, 222, 235, 0.56);
}

/* 标题与层级深度同行显示。 */
.dive-match-focus-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 18px;
}

/* 当前分类名称 */
.dive-match-focus-title {
    margin: 0;
    font-family: "Noto Serif SC", "Source Han Serif SC", "Songti SC", serif;
    font-size: clamp(1.5rem, 2vw, 2rem);
    line-height: 1.18;
    color: #f6fbff;
}

/* 当前分类对应的海层深度提示。 */
.dive-match-focus-depth {
    flex-shrink: 0;
    padding: 8px 12px;
    border-radius: 999px;
    background: rgba(233, 245, 252, 0.08);
    border: 1px solid rgba(233, 245, 252, 0.14);
    color: rgba(234, 245, 252, 0.82);
    font-size: 0.8rem;
    letter-spacing: 0.08em;
}

/* 适合什么样的人 */
.dive-match-focus-audience {
    margin: 0 0 14px;
    font-size: 1rem;
    line-height: 1.86;
    color: rgba(233, 244, 251, 0.88);
}

/* 匹配建议的主体文案。 */
.dive-match-focus-guidance {
    margin: 0 0 16px;
    font-size: 0.95rem;
    line-height: 1.9;
    color: rgba(217, 233, 243, 0.78);
}

/* 补充说明用更轻一些的语气收束 */
.dive-match-focus-note {
    margin: 0;
    padding-top: 16px;
    border-top: 1px solid rgba(236, 246, 252, 0.08);
    font-size: 0.88rem;
    line-height: 1.84;
    color: rgba(188, 213, 227, 0.68);
}

/* 右侧推荐卡用更像海域档案廊的多卡布局 */
.dive-match-card-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
    align-content: start;
    perspective: 1000px;
    min-height: clamp(340px, 23vw, 430px);
}

.dive-match-card:nth-child(1) {
    transform-origin: left center;
}

.dive-match-card:nth-child(2) {
    transform-origin: center center;
}

.dive-match-card:nth-child(3) {
    transform-origin: right center;
}

/* 每张推荐潜点卡都像一张被轻轻托起的玻璃档案卡 */
.dive-match-card {
    overflow: hidden;
    cursor: pointer;
    border-radius: 24px;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.03)),
        rgba(8, 30, 46, 0.48);
    border: 1px solid rgba(237, 247, 252, 0.12);
    box-shadow:
        0 22px 36px rgba(4, 17, 27, 0.16),
        inset 0 1px 0 rgba(255, 255, 255, 0.12);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    opacity: 0;
    transform: translate3d(0, 14px, 0);
    transition:
        transform 0.28s ease,
        opacity 0.42s ease,
        border-color 0.28s ease,
        box-shadow 0.28s ease;
    transition-delay: var(--card-delay, 0ms);
}

.dive-match-card:focus-visible {
    outline: none;
    border-color: rgba(240, 248, 253, 0.22);
    box-shadow:
        0 28px 42px rgba(4, 17, 27, 0.2),
        0 0 0 1px rgba(214, 238, 250, 0.22),
        0 0 22px rgba(146, 205, 231, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.16);
}

/* 当前激活的推荐卡片依次浮现，像一组被慢慢翻开的海域档案。 */
.dive-match.is-display-visible .dive-match-surface.is-active .dive-match-card {
    opacity: 1;
    transform: translate3d(0, 0, 0);
}

/* hover 时轻微上浮、图片微放大，保持安静高级。 */
.dive-match-card:hover {
    transform: translate3d(0, -3px, 0);
    border-color: rgba(240, 248, 253, 0.2);
    box-shadow:
        0 28px 42px rgba(4, 17, 27, 0.2),
        0 0 22px rgba(146, 205, 231, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.16);
}

/* 图片区给推荐卡留出更明显的海域第一印象 */
.dive-match-card-media {
    position: relative;
    aspect-ratio: 1.08 / 0.8;
    overflow: hidden;
}

/* 图片轻微压暗和裁切，避免太像普通商品卡 */
.dive-match-card-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scale(1.02);
    transition: transform 0.4s ease;
    filter: saturate(0.95) contrast(1.03) brightness(0.9);
}

/* 悬停时图片轻微靠近，增加被托起的感觉。 */
.dive-match-card:hover .dive-match-card-image {
    transform: scale(1.04);
}

/* 文案区用玻璃底接住图片，避免上下层断开。 */
.dive-match-card-copy {
    display: grid;
    gap: 10px;
    padding: 18px 18px 20px;
}

/* 推荐卡内部内容不再整块出现，而是跟随海域卡逐层浮现。 */
.dive-match-card-kicker,
.dive-match-card-name,
.dive-match-card-reason,
.dive-match-card-tags {
    opacity: 0;
    filter: blur(8px);
    transform: translate3d(0, 8px, 0);
    transition:
        opacity 0.38s ease,
        transform 0.5s cubic-bezier(0.18, 0.84, 0.22, 1),
        filter 0.5s ease;
}

/* 英文名做轻一点的副标。*/
.dive-match-card-kicker {
    margin: 0;
    font-size: 0.74rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: rgba(194, 221, 235, 0.56);
}

/* 中文目的地名 */
.dive-match-card-name {
    margin: 0;
    font-size: 1.08rem;
    line-height: 1.3;
    color: #f4fbff;
}

/* 每张卡的适配理由 */
.dive-match-card-reason {
    margin: 0;
    min-height: 5.2em;
    font-size: 0.9rem;
    line-height: 1.74;
    color: rgba(220, 237, 247, 0.78);
}

/* 适合等级 / 海况 / 节奏标签 */
.dive-match-card-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

/* 推荐档案卡标签保持轻盈，不做工具化 pills。 */
.dive-match-card-tag {
    display: inline-flex;
    align-items: center;
    padding: 7px 11px;
    border-radius: 999px;
    background: rgba(230, 244, 252, 0.08);
    border: 1px solid rgba(230, 244, 252, 0.12);
    color: rgba(236, 246, 252, 0.82);
    font-size: 0.78rem;
    line-height: 1;
    opacity: 0;
    transform: translate3d(0, 6px, 0) scale(0.98);
    transition:
        opacity 0.34s ease,
        transform 0.44s cubic-bezier(0.18, 0.84, 0.22, 1);
}

/* 查看详情按钮保持克制发光，不做普通按钮感 */
.dive-match-card-action {
    all: unset;
    width: fit-content;
    margin-top: 4px;
    padding: 10px 14px;
    border-radius: 999px;
    cursor: pointer;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0.04)),
        rgba(134, 193, 223, 0.12);
    border: 1px solid rgba(236, 246, 252, 0.16);
    color: #f2fbff;
    font-size: 0.82rem;
    letter-spacing: 0.05em;
    opacity: 0;
    filter: blur(6px);
    transition:
        transform 0.28s ease,
        box-shadow 0.28s ease,
        border-color 0.28s ease,
        opacity 0.38s ease,
        filter 0.38s ease;
}

/* 每张卡激活后，文案和标签按卡片自己的节奏跟进。 */
.dive-match.is-display-visible .dive-match-surface.is-active .dive-match-card-kicker,
.dive-match.is-display-visible .dive-match-surface.is-active .dive-match-card-name,
.dive-match.is-display-visible .dive-match-surface.is-active .dive-match-card-reason,
.dive-match.is-display-visible .dive-match-surface.is-active .dive-match-card-tags,
.dive-match.is-display-visible .dive-match-surface.is-active .dive-match-card-tag,
.dive-match.is-display-visible .dive-match-surface.is-active .dive-match-card-action {
    opacity: 1;
    filter: blur(0);
    transform: translate3d(0, 0, 0) scale(1);
}

.dive-match.is-display-visible .dive-match-surface.is-active .dive-match-card-kicker {
    transition-delay: calc(var(--card-delay, 0ms) + 50ms);
}

.dive-match.is-display-visible .dive-match-surface.is-active .dive-match-card-name {
    transition-delay: calc(var(--card-delay, 0ms) + 100ms);
}

.dive-match.is-display-visible .dive-match-surface.is-active .dive-match-card-reason {
    transition-delay: calc(var(--card-delay, 0ms) + 150ms);
}

.dive-match.is-display-visible .dive-match-surface.is-active .dive-match-card-tags {
    transition-delay: calc(var(--card-delay, 0ms) + 210ms);
}

.dive-match.is-display-visible .dive-match-surface.is-active .dive-match-card-tag:nth-child(1) {
    transition-delay: calc(var(--card-delay, 0ms) + 250ms);
}

.dive-match.is-display-visible .dive-match-surface.is-active .dive-match-card-tag:nth-child(2) {
    transition-delay: calc(var(--card-delay, 0ms) + 290ms);
}

.dive-match.is-display-visible .dive-match-surface.is-active .dive-match-card-tag:nth-child(3) {
    transition-delay: calc(var(--card-delay, 0ms) + 330ms);
}

.dive-match.is-display-visible .dive-match-surface.is-active .dive-match-card-tag:nth-child(4) {
    transition-delay: calc(var(--card-delay, 0ms) + 370ms);
}

.dive-match.is-display-visible .dive-match-surface.is-active .dive-match-card-action {
    transition-delay:
        0ms,
        0ms,
        0ms,
        calc(var(--card-delay, 0ms) + 330ms),
        calc(var(--card-delay, 0ms) + 330ms);
}

/* hover 时给按钮一丝向上的海流。 */
.dive-match-card-action:hover {
    transform: translate3d(0, -2px, 0);
    border-color: rgba(241, 249, 253, 0.22);
    box-shadow: 0 12px 24px rgba(4, 17, 27, 0.16);
}

/* 分类切换时的轻微呼吸曲线 */
@keyframes dive-match-surface-breathe {
    0%,
    100% {
        transform: translate3d(0, 0, 0);
    }

    50% {
        transform: translate3d(0, -2px, 0);
    }
}

/* ============================================
   Why Yanqi
   ============================================ */

/* 制制盐憩故事区的品牌叙事排版和卡片层次。 */
.why-yanqi {
    padding: var(--spacing-2xl) var(--spacing-lg);
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(circle at 1px 1px, rgba(143, 184, 204, 0.13) 0.8px, transparent 0.9px),
        radial-gradient(circle at 9px 9px, rgba(202, 232, 243, 0.36) 0.7px, transparent 0.8px),
        linear-gradient(180deg, #071d30 0%, #0b2941 28%, #17496c 62%, #0d2f50 100%);
    background-size: 18px 18px, 24px 24px, auto;
}

/* .why-yanqi::before：在故事区顶部补一层柔和海雾。 */
.why-yanqi::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: -1px;
    height: 300px;
    background:
        radial-gradient(ellipse at 50% 0%, rgba(58, 128, 164, 0.1), rgba(26, 78, 110, 0.04) 48%, rgba(9, 34, 54, 0) 78%),
        linear-gradient(180deg, rgba(4, 18, 30, 0.98) 0%, rgba(6, 27, 43, 0.9) 24%, rgba(9, 41, 63, 0.58) 58%, rgba(16, 64, 96, 0) 100%);
    filter: none;
    pointer-events: none;
    z-index: 0;
}

/* .why-yanqi::after：在故事区底部加一层提亮过渡。 */
.why-yanqi::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    height: 150px;
    background:
        radial-gradient(ellipse at 50% 100%, rgba(62, 136, 174, 0.1), rgba(22, 74, 109, 0.04) 40%, rgba(9, 32, 50, 0) 70%),
        linear-gradient(180deg, rgba(9, 32, 50, 0) 0%, rgba(9, 35, 55, 0.38) 52%, rgba(8, 27, 43, 0.86) 100%);
    filter: none;
    pointer-events: none;
    z-index: 0;
}

/* 故事区总壳层：安排左右叙事、河流引导线和卡片舞台。 */
.story-shell {
    position: relative;
    z-index: 1;
    max-width: 1260px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: minmax(0, 0.92fr) 72px minmax(0, 1.08fr);
    gap: clamp(24px, 4vw, 54px);
    align-items: start;
}

/* 故事区引导文案：制制标题、副文案和说明的宽度。 */
.story-intro {
    max-width: 520px;
    align-self: center;
}

.story-intro > * {
    opacity: 0;
    filter: blur(8px);
    transform: translate3d(0, 8px, 0);
    transition:
        opacity 0.56s ease,
        filter 0.66s ease,
        transform 0.66s cubic-bezier(0.18, 0.8, 0.2, 1);
}

.story-intro.is-visible > * {
    opacity: 1;
    filter: blur(0);
    transform: translate3d(0, 0, 0);
}

.story-intro.is-visible > .story-kicker {
    transition-delay: 30ms;
}

.story-intro.is-visible > .story-title {
    transition-delay: 100ms;
}

.story-intro.is-visible > .story-lead {
    transition-delay: 170ms;
}

.story-intro.is-visible > .story-echo {
    transition-delay: 240ms;
}

.story-intro.story-reveal,
.story-intro.story-reveal.is-visible {
    transform: none;
}

/* 故事区 kicker：建立轻量的品牌叙事标签。 */
.story-kicker {
    margin: 0 0 14px;
    font-size: 0.72rem;
    letter-spacing: 0.34em;
    text-transform: uppercase;
    color: rgba(196, 223, 240, 0.62);
}

/* 故事区标题：作为整段品牌叙事的视觉锚点。 */
.story-title {
    margin: 0 0 18px;
    font-family: "Noto Serif SC", "Source Han Serif SC", "Songti SC", serif;
    font-size: clamp(2rem, 3vw, 3rem);
    font-weight: 600;
    line-height: 1.18;
    color: #f4fbff;
}

/* 故事区 lead：承接主要叙事段落。 */
.story-lead {
    margin: 0 0 18px;
    font-size: 1.06rem;
    line-height: 1.95;
    color: rgba(241, 249, 255, 0.9);
}

/* 故事区 echo：用更轻的语气收束说明。 */
.story-echo {
    margin: 0;
    line-height: 1.92;
    color: rgba(194, 216, 230, 0.72);
}

/* 故事区河流轨道：在视觉上连接左右叙事层。 */
.story-river {
    position: relative;
    display: flex;
    justify-content: center;
    min-height: 100%;
    padding-top: 10px;
}

/* 故事区河流线与光点：保持一条缓慢流动的纵向引导。 */
.story-river-line,
.story-river-glow {
    display: block;
    width: 1px;
    border-radius: 999px;
}

/* 故事区主河流线：给叙事卡片一条纵向骨架。 */
.story-river-line {
    min-height: 100%;
    background: linear-gradient(180deg, rgba(200, 228, 243, 0.08), rgba(219, 240, 251, 0.68), rgba(200, 228, 243, 0.08));
}

/* 故事区河流光点：沿河流上下漂移，增加呼吸感。 */
.story-river-glow {
    position: absolute;
    top: 12%;
    width: 10px;
    height: 140px;
    background: radial-gradient(circle, rgba(180, 223, 247, 0.44) 0%, rgba(180, 223, 247, 0) 72%);
    filter: blur(10px);
    animation: story-current 6s ease-in-out infinite;
}

/* 故事卡片网格：让几张故事卡按节奏上下排开。 */
.story-grid {
    display: grid;
    gap: 18px;
}

/* 故事卡片：统一卡面层次、边框和玻璃质感。 */
.story-card {
    --story-card-shift: 0px;
    position: relative;
    padding: 24px 24px 22px;
    border-radius: 28px;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.18) 0%, rgba(174, 208, 230, 0.1) 100%),
        rgba(143, 182, 206, 0.08);
    border: 1px solid rgba(209, 233, 246, 0.16);
    box-shadow:
        0 18px 30px rgba(5, 16, 25, 0.14),
        inset 0 1px 0 rgba(255, 255, 255, 0.14);
    backdrop-filter: blur(18px) saturate(128%);
    -webkit-backdrop-filter: blur(18px) saturate(128%);
    transform: translate3d(0, var(--story-card-shift), 0);
    transition: transform 320ms ease, box-shadow 320ms ease, border-color 320ms ease, background 320ms ease;
    overflow: hidden;
}

/* .story-card::before：hover 时扫过卡面的高光层。 */
.story-card::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(120deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0) 30%, rgba(255, 255, 255, 0.08) 72%, rgba(255, 255, 255, 0) 100%);
    opacity: 0;
    transform: translateX(-14%);
    transition: opacity 320ms ease, transform 420ms ease;
    pointer-events: none;
}

/* .story-card:hover 鼠标移入时的样式 */
.story-card:hover {
    --story-card-shift: -6px;
    border-color: rgba(213, 238, 251, 0.28);
    box-shadow:
        0 26px 40px rgba(6, 19, 30, 0.18),
        0 0 24px rgba(174, 221, 245, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.16);
}

/* .story-card:hover::before：鼠标移入后让扫光真正滑过卡面。 */
.story-card:hover::before {
    opacity: 1;
    transform: translateX(0);
}

/* 交错卡片：让部分故事卡横向错开，形成河流节奏。 */
.story-card-offset {
    margin-left: 38px;
}

/* 故事卡编号：建立轻量阅读顺序。 */
.story-card-index {
    margin: 0 0 16px;
    font-size: 0.76rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: rgba(194, 219, 235, 0.56);
}

/* 故事卡标题：承接单张卡片的主叙事。 */
.story-card-title {
    margin: 0 0 12px;
    font-family: "Noto Serif SC", "Source Han Serif SC", "Songti SC", serif;
    font-size: 1.38rem;
    font-weight: 600;
    color: #f5fbff;
}

/* 故事卡正文：保持更舒缓的阅读节奏。 */
.story-card-copy {
    margin: 0;
    line-height: 1.82;
    color: rgba(204, 223, 234, 0.78);
}

/* 故事区 reveal：默认先隐藏，等待进入视口后显现。 */
.story-reveal {
    opacity: 0;
    transform: translate3d(0, 18px, 0);
    filter: blur(6px);
    transition:
        opacity 620ms ease,
        transform 720ms cubic-bezier(0.18, 0.8, 0.2, 1),
        filter 720ms ease;
    transition-delay: var(--story-delay, 0ms);
}

/* .story-reveal.is-visible：进入视口后恢复清晰和稳定位置。 */
.story-reveal.is-visible {
    opacity: 1;
    transform: translate3d(0, 0, 0);
    filter: blur(0);
}

/* 定义 story-current 动画的关键帧 */
@keyframes story-current {
/* story-current 在 0% 和 100%：河流光点回到基准位置。 */
    0%,
    100% {
        transform: translateY(0);
        opacity: 0.42;
    }
/* story-current 在 50%：河流光点沿纵向漂移，模拟缓慢流动。 */
    50% {
        transform: translateY(180px);
        opacity: 0.78;
    }
}

/* ============================================
   Home Layer Flow Overrides
   ============================================ */

.home-page {
    --home-layer-progress: 0;
    --home-layer-index: 0;
    --home-featured-layer-overlap: 28px;
    --home-story-overlap-top: clamp(42px, 4vw, 58px);
    --home-story-overlap-bottom: clamp(30px, 4vw, 52px);
}

.featured-destinations,
.dive-match,
.why-yanqi,
.footer {
    position: relative;
    isolation: isolate;
    transform: translate3d(0, calc(var(--home-layer-distance, 0) * 14px), 0);
}

[data-home-layer].is-home-current {
    filter: saturate(1.06) brightness(1.02);
    transform: translate3d(0, calc(var(--home-layer-progress, 0) * -10px), 0);
}

[data-home-layer].is-home-passed:not(.is-home-current) {
    opacity: 0.992;
    filter: saturate(0.94) brightness(0.97);
    transform: translate3d(0, -3px, 0);
}

[data-home-layer].is-home-upcoming {
    filter: saturate(0.94) brightness(0.98);
}

.featured-destinations.is-home-current {
    margin-bottom: calc(var(--home-featured-layer-overlap) * -1);
    padding-bottom: calc(clamp(40px, 5vw, 72px) + var(--home-featured-layer-overlap));
}

.featured-destinations.is-home-current .curated-waters-stage {
    transform: translate3d(0, calc(var(--home-layer-progress, 0) * -8px), 0);
    box-shadow:
        0 44px 84px rgba(4, 16, 26, 0.34),
        inset 0 1px 0 rgba(255, 255, 255, 0.15),
        inset 0 -1px 0 rgba(255, 255, 255, 0.04);
}

.featured-destinations.is-home-passed {
    margin-bottom: calc(var(--home-featured-layer-overlap) * -1);
    padding-bottom: calc(clamp(40px, 5vw, 72px) + var(--home-featured-layer-overlap));
}

.featured-destinations.is-home-passed .curated-waters-intro {
    opacity: 0.88;
}

.dive-match {
    --dive-match-depth-ratio: 0;
}

.dive-match-shell::before {
    content: "";
    position: absolute;
    left: clamp(28px, 6vw, 88px);
    right: clamp(28px, 6vw, 88px);
    top: -18px;
    height: 1px;
    background: linear-gradient(90deg, rgba(119, 175, 205, 0), rgba(156, 205, 228, 0.12), rgba(119, 175, 205, 0));
    opacity: calc(0.1 - var(--home-layer-progress, 0) * 0.08);
    pointer-events: none;
}

.dive-match.is-home-current .dive-match-stage {
    transform: translate3d(0, calc(var(--home-layer-progress, 0) * -14px), 0);
    box-shadow:
        0 40px 88px rgba(4, 16, 26, 0.34),
        0 0 42px rgba(130, 194, 223, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.12),
        inset 0 -1px 0 rgba(255, 255, 255, 0.04);
}

.dive-match.is-transitioning .dive-match-stage::before {
    opacity: calc(0.82 + var(--dive-match-depth-ratio, 0) * 0.14);
    transform: translate3d(0, 0, 0) scaleX(calc(1.03 + var(--dive-match-depth-ratio, 0) * 0.08));
}

.dive-match.is-switching-deeper .dive-match-stage {
    transform: translate3d(0, calc(var(--home-layer-progress, 0) * -14px), 0);
    box-shadow:
        0 42px 94px rgba(4, 16, 26, 0.34),
        0 0 44px rgba(130, 194, 223, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.12),
        inset 0 -1px 0 rgba(255, 255, 255, 0.04);
}

.dive-match.is-switching-shallower .dive-match-stage {
    transform: translate3d(0, calc(var(--home-layer-progress, 0) * -14px), 0);
    box-shadow:
        0 36px 82px rgba(4, 16, 26, 0.3),
        0 0 28px rgba(130, 194, 223, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.12),
        inset 0 -1px 0 rgba(255, 255, 255, 0.04);
}

.dive-match-rail {
    padding: 10px 0 2px;
}

.dive-match-rail::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 38px;
    height: 1px;
    background: linear-gradient(90deg, rgba(196, 228, 241, 0.06), rgba(214, 239, 250, 0.34), rgba(196, 228, 241, 0.06));
    pointer-events: none;
}

.dive-match-filter {
    min-width: 148px;
    padding: 14px 18px 16px;
    border-radius: 24px;
    transform-origin: center bottom;
}

.dive-match-filter-tide {
    position: absolute;
    inset: auto 16px 0;
    height: 24px;
    border-radius: 999px;
    background: radial-gradient(circle at 50% 100%, rgba(203, 236, 248, 0.24) 0%, rgba(203, 236, 248, 0) 72%);
    opacity: 0;
    transform: translate3d(0, 10px, 0) scaleX(0.6);
    transition: opacity 360ms ease, transform 520ms cubic-bezier(0.18, 0.84, 0.22, 1);
    pointer-events: none;
}

.dive-match-filter:hover .dive-match-filter-tide,
.dive-match-filter.is-active .dive-match-filter-tide {
    opacity: 1;
    transform: translate3d(0, 0, 0) scaleX(1);
}

.dive-match-filter-depth {
    display: inline-flex;
    align-items: center;
    min-width: 58px;
    justify-content: center;
    text-align: center;
}

.dive-match-filter-label {
    font-size: 0.98rem;
}

.dive-match-filter.is-active {
    transform: translate3d(0, -5px, 0);
}

.dive-match-focus-ritual,
.dive-match-focus-group,
.dive-match-focus-head,
.dive-match-focus-audience,
.dive-match-focus-guidance,
.dive-match-focus-note {
    position: relative;
    z-index: 1;
}

.dive-match-focus-ritual {
    margin: 0 0 18px;
    max-width: 28ch;
    font-size: 0.8rem;
    line-height: 1.7;
    letter-spacing: 0.08em;
    color: rgba(201, 228, 240, 0.62);
    opacity: 0;
    filter: blur(8px);
    transform: translate3d(0, 8px, 0);
    transition:
        opacity 0.42s ease,
        transform 0.54s cubic-bezier(0.18, 0.84, 0.22, 1),
        filter 0.54s ease;
}

.dive-match.is-display-visible .dive-match-surface.is-active .dive-match-focus-ritual {
    opacity: 1;
    filter: blur(0);
    transform: translate3d(0, 0, 0);
    transition-delay: 100ms;
}

.dive-match-card-grid {
    transform: translate3d(0, calc(var(--dive-match-depth-ratio, 0) * -5px), 0);
}

.dive-match-card {
    transform: translate3d(0, 14px, 0) rotateX(7deg);
}

.dive-match.is-display-visible .dive-match-surface.is-active .dive-match-card:nth-child(1) {
    transform: translate3d(0, 0, 0) rotateY(-3deg);
}

.dive-match.is-display-visible .dive-match-surface.is-active .dive-match-card:nth-child(2) {
    transform: translate3d(0, -2px, 0) rotateY(0deg);
}

.dive-match.is-display-visible .dive-match-surface.is-active .dive-match-card:nth-child(3) {
    transform: translate3d(0, 1px, 0) rotateY(3deg);
}

body[data-current-home-layer="match"] .why-yanqi.is-home-upcoming,
.why-yanqi.is-home-current {
    margin-top: calc(var(--home-story-overlap-top) * -1);
    padding-top: calc(var(--spacing-2xl) + var(--home-story-overlap-top));
    margin-bottom: calc(var(--home-story-overlap-bottom) * -1);
    padding-bottom: calc(var(--spacing-2xl) + var(--home-story-overlap-bottom));
    filter: saturate(1.04) brightness(1.03);
}

.why-yanqi.is-home-passed {
    margin-top: calc(var(--home-story-overlap-top) * -1);
    padding-top: calc(var(--spacing-2xl) + var(--home-story-overlap-top));
    margin-bottom: calc(var(--home-story-overlap-bottom) * -1);
    padding-bottom: calc(var(--spacing-2xl) + var(--home-story-overlap-bottom));
}

/* why-yanqi 故事区：把三张卡重新拉回更接近备份版的分层节奏。 */
body[data-current-home-layer="story"] .story-river-line {
    background: linear-gradient(180deg, rgba(200, 228, 243, 0.12), rgba(228, 243, 252, 0.84), rgba(200, 228, 243, 0.12));
}

.footer.is-home-current,
.footer.is-home-upcoming {
    margin-top: calc(var(--home-story-overlap-bottom) * -1);
    padding-top: calc(clamp(64px, 8vw, 92px) + var(--home-story-overlap-bottom));
}

body[data-home-scroll-mode='active'] [data-home-layer],
body[data-home-scroll-mode='active'] .featured-destinations.is-home-current .curated-waters-stage,
body[data-home-scroll-mode='active'] .dive-match.is-home-current .dive-match-stage,
body[data-home-scroll-mode='active'] .dive-match.is-switching-deeper .dive-match-stage,
body[data-home-scroll-mode='active'] .dive-match.is-switching-shallower .dive-match-stage,
body[data-home-scroll-mode='active'] .dive-match-card-grid {
    transition-property: opacity, transform, border-color, background-color, background !important;
    transition-duration: 120ms !important;
}

body[data-home-scroll-mode='active'] [data-home-layer] {
    filter: none !important;
}

body[data-home-scroll-mode='active'] .hero-ocean-glow-one,
body[data-home-scroll-mode='active'] .hero-ocean-glow-two,
body[data-home-scroll-mode='active'] .hero-ocean-wave-one,
body[data-home-scroll-mode='active'] .hero-ocean-wave-two,
body[data-home-scroll-mode='active'] .hero-plankton,
body[data-home-scroll-mode='active'] .scroll-arrow,
body[data-home-scroll-mode='active'] .curated-display-media::after,
body[data-home-scroll-mode='active'] .curated-nav-rail.is-cycling .curated-nav-refresh::after,
body[data-home-scroll-mode='active'] .dive-match.is-display-visible .dive-match-surface.is-resting,
body[data-home-scroll-mode='active'] .story-river-glow,
body[data-home-scroll-mode='active'] .sea-guide-home .sea-guide-trigger {
    animation-play-state: paused !important;
}

body[data-home-scroll-mode='active'] .today-sea-card,
body[data-home-scroll-mode='active'] .today-sea-brief-panel,
body[data-home-scroll-mode='active'] .hero-hotspots-shell .bamboo-card,
body[data-home-scroll-mode='active'] .bamboo-card,
body[data-home-scroll-mode='active'] .curated-waters-stage,
body[data-home-scroll-mode='active'] .curated-display-copy,
body[data-home-scroll-mode='active'] .curated-nav-panel,
body[data-home-scroll-mode='active'] .dive-match-stage,
body[data-home-scroll-mode='active'] .dive-match-profile-panel,
body[data-home-scroll-mode='active'] .dive-match-focus-card,
body[data-home-scroll-mode='active'] .dive-match-card,
body[data-home-scroll-mode='active'] .story-card {
    transition-property: opacity, transform, border-color, background-color, background !important;
}

body[data-home-scroll-mode='active'] .today-sea-card,
body[data-home-scroll-mode='active'] .today-sea-brief-panel,
body[data-home-scroll-mode='active'] .curated-waters-stage,
body[data-home-scroll-mode='active'] .curated-display-copy,
body[data-home-scroll-mode='active'] .curated-nav-panel,
body[data-home-scroll-mode='active'] .dive-match-stage,
body[data-home-scroll-mode='active'] .dive-match-profile-panel,
body[data-home-scroll-mode='active'] .dive-match-focus-card,
body[data-home-scroll-mode='active'] .dive-match-card,
body[data-home-scroll-mode='active'] .story-card {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

body[data-home-scroll-mode='active'] .curated-waters-stage::before,
body[data-home-scroll-mode='active'] .curated-waters-stage::after,
body[data-home-scroll-mode='active'] .curated-display-media::after,
body[data-home-scroll-mode='active'] .dive-match::before,
body[data-home-scroll-mode='active'] .dive-match::after,
body[data-home-scroll-mode='active'] .dive-match-stage::before,
body[data-home-scroll-mode='active'] .dive-match-focus-card::before,
body[data-home-scroll-mode='active'] .dive-match-focus-card::after,
body[data-home-scroll-mode='active'] .dive-match-profile-presets-focus-aura,
body[data-home-scroll-mode='active'] .story-river-glow,
body[data-home-scroll-mode='active'] .sea-guide-home .sea-guide-trigger::after,
body[data-home-scroll-mode='active'] .sea-guide-home .sea-guide-panel::before,
body[data-home-scroll-mode='active'] .hero-bamboo-scroll-container::before,
body[data-home-scroll-mode='active'] .hero-bamboo-cards-wrapper::before,
body[data-home-scroll-mode='active'] .hero-bamboo-cards-wrapper::after,
body[data-home-scroll-mode='active'] .today-sea-card::before {
    filter: none !important;
    opacity: 0.34 !important;
}

/* 制制精选目的地区域的舞台布局、卡片层级和视觉焦点 */
.bamboo-scroll-section .section-title,
.featured-destinations .section-title,
.why-yanqi .section-title {
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.18);
    position: relative;
    z-index: 1;
}

/* 制制精选目的地区域的舞台布局、卡片层级和视觉焦点 */
.bamboo-scroll-section .section-subtitle,
.featured-destinations .section-subtitle,
.why-yanqi .section-subtitle {
    position: relative;
    z-index: 1;
}

/* 设置通用区块标题的字号、字重和排版节奏 */
.bamboo-scroll-section .section-title {
    color: #17324d;
}

/* 设置通用区块标题的字号、字重和排版节奏 */
.bamboo-scroll-section .section-subtitle {
    color: #426785;
}

/* 制制精选目的地区域的舞台布局、卡片层级和视觉焦点 */
.featured-destinations .section-title,
.why-yanqi .section-title {
    color: #f5fbff;
}

/* 制制精选目的地区域的舞台布局、卡片层级和视觉焦点 */
.featured-destinations .section-subtitle,
.why-yanqi .section-subtitle {
    color: rgba(240, 248, 255, 0.82);
}

/* ============================================
   Footer
   ============================================ */

/* 制制页脚区域的布局、层次和收束氛围 */
.footer {
    position: relative;
    overflow: hidden;
    padding: clamp(64px, 8vw, 92px) var(--spacing-lg) 30px;
    background:
        radial-gradient(circle at 18% 0%, rgba(82, 142, 176, 0.16) 0%, rgba(82, 142, 176, 0) 30%),
        radial-gradient(circle at 82% 14%, rgba(128, 184, 213, 0.08) 0%, rgba(128, 184, 213, 0) 26%),
        linear-gradient(180deg, #092235 0%, #0b2236 44%, #071823 100%);
}

/* .footer::before：页脚顶部的细潮线，帮助整页收束。 */
.footer::before {
    content: "";
    position: absolute;
    left: 6%;
    right: 6%;
    top: 0;
    height: 1px;
    background: linear-gradient(90deg, rgba(188, 221, 241, 0), rgba(188, 221, 241, 0.42), rgba(188, 221, 241, 0));
    opacity: 0.78;
}

/* .footer::after：给页脚再补一层轻微雾面与光感。 */
.footer::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 50% -8%, rgba(112, 176, 207, 0.11) 0%, rgba(112, 176, 207, 0) 34%),
        linear-gradient(180deg, rgba(112, 176, 207, 0.06), rgba(112, 176, 207, 0) 30%);
    pointer-events: none;
}

/* 制制页脚区域的布局、层次和收束氛围 */
.footer-shell {
    position: relative;
    z-index: 1;
    max-width: 1280px;
    margin: 0 auto;
}

/* 制制页脚区域的布局、层次和收束氛围 */
.footer-brand-stage {
    max-width: 720px;
    margin: 0 auto 52px;
    text-align: center;
}

/* 制制页脚区域的布局、层次和收束氛围 */
.footer-overline {
    margin: 0 0 14px;
    font-size: 0.72rem;
    letter-spacing: 0.34em;
    text-transform: uppercase;
    color: rgba(196, 223, 240, 0.62);
}

/* 制制页脚区域的布局、层次和收束氛围 */
.footer-brand {
    margin: 0;
    font-family: "Noto Serif SC", "Source Han Serif SC", "Songti SC", serif;
    font-size: clamp(2.5rem, 4vw, 3.7rem);
    font-weight: 600;
    letter-spacing: 0.12em;
    color: #f4fbff;
    text-shadow: 0 0 24px rgba(176, 216, 238, 0.12);
}

/* 制制页脚区域的布局、层次和收束氛围 */
.footer-whisper {
    margin: 16px 0 12px;
    font-size: clamp(1.05rem, 1.6vw, 1.2rem);
    letter-spacing: 0.06em;
    color: rgba(239, 248, 253, 0.94);
}

/* 制制页脚区域的布局、层次和收束氛围 */
.footer-murmur {
    margin: 0;
    font-size: 0.98rem;
    line-height: 1.9;
    color: rgba(184, 208, 223, 0.7);
}

/* 制制页脚区域的布局、层次和收束氛围 */
.footer-middle {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(280px, 360px);
    gap: clamp(28px, 4vw, 64px);
    align-items: start;
    margin-bottom: 34px;
}

/* 制制页脚区域的布局、层次和收束氛围 */
.footer-nav {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 28px;
}

/* 制制页脚区域的布局、层次和收束氛围 */
.footer-nav-group {
    min-width: 0;
}

/* 制制页脚区域的布局、层次和收束氛围 */
.footer-nav-title {
    margin: 0 0 18px;
    font-size: 0.92rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    color: #f4fbff;
}

/* 制制页脚区域的布局、层次和收束氛围 */
.footer-nav-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* 制制页脚区域的布局、层次和收束氛围 */
.footer-link {
    position: relative;
    display: inline-flex;
    align-items: center;
    width: fit-content;
    color: rgba(190, 213, 228, 0.76);
    text-decoration: none;
    transition: color 220ms ease, transform 220ms ease;
}

/* .footer-link::after：链接 hover 时展开的细下划线。 */
.footer-link::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -4px;
    width: 100%;
    height: 1px;
    background: linear-gradient(90deg, rgba(210, 233, 247, 0.86), rgba(210, 233, 247, 0));
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 220ms ease;
}

/* .footer-link:hover 鼠标移入时的样式 */
.footer-link:hover {
    color: #f2fbff;
    transform: translateX(3px);
}

/* .footer-link:hover::after：让下划线完整展开。 */
.footer-link:hover::after {
    transform: scaleX(1);
}

/* 制制页脚区域的布局、层次和收束氛围 */
.footer-companion {
    padding: 24px 24px 22px;
    border-radius: 28px;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.14) 0%, rgba(175, 209, 231, 0.08) 100%),
        rgba(126, 165, 191, 0.08);
    border: 1px solid rgba(188, 221, 241, 0.16);
    box-shadow:
        0 22px 38px rgba(5, 17, 27, 0.16),
        inset 0 1px 0 rgba(255, 255, 255, 0.14);
    backdrop-filter: blur(18px) saturate(130%);
    -webkit-backdrop-filter: blur(18px) saturate(130%);
}

/* 制制页脚区域的布局、层次和收束氛围 */
.footer-companion-title {
    margin: 0 0 12px;
    font-family: "Noto Serif SC", "Source Han Serif SC", "Songti SC", serif;
    font-size: 1.24rem;
    font-weight: 600;
    color: #f4fbff;
}

/* 制制页脚区域的布局、层次和收束氛围 */
.footer-companion-copy {
    margin: 0 0 18px;
    line-height: 1.8;
    color: rgba(194, 217, 232, 0.72);
}

/* 制制页脚区域的布局、层次和收束氛围 */
.footer-social-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px 12px;
}

/* 制制页脚区域的布局、层次和收束氛围 */
.footer-social-link {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 999px;
    color: rgba(228, 242, 249, 0.82);
    text-decoration: none;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(199, 225, 241, 0.08);
    transition: color 220ms ease, background-color 220ms ease, transform 220ms ease, box-shadow 220ms ease;
}

/* .footer-social-link:hover 鼠标移入时的样式 */
.footer-social-link:hover {
    color: #f8fdff;
    background: rgba(255, 255, 255, 0.09);
    transform: translateY(-2px);
    box-shadow: 0 10px 18px rgba(9, 26, 39, 0.12);
}

/* 制制页脚区域的布局、层次和收束氛围 */
.footer-social-mark {
    color: rgba(171, 208, 229, 0.74);
    font-size: 0.92rem;
    line-height: 1;
}

/* 制制页脚区域的布局、层次和收束氛围 */
.footer-bottom {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 10px 22px;
    padding-top: 22px;
    border-top: 1px solid rgba(188, 221, 241, 0.12);
}

/* 制制页脚区域的布局、层次和收束氛围 */
.footer-bottom p {
    margin: 0;
    font-size: 0.84rem;
    line-height: 1.6;
    color: rgba(168, 192, 208, 0.54);
}

/* ============================================
   Sea Guide
   ============================================ */

/* 首页海图导览外层：制制悬浮位置、显隐和更深层时的强调状态。 */
.sea-guide-home {
    position: fixed;
    right: 26px;
    bottom: 24px;
    z-index: 1380;
    display: grid;
    justify-items: end;
    gap: 14px;
    opacity: 0;
    pointer-events: none;
    transform: translateY(20px);
    transition:
        opacity 300ms ease,
        transform 420ms cubic-bezier(0.22, 0.72, 0.2, 1);
}

/* 首页滚动到一定深度后，显示海图导览浮标。 */
.sea-guide-home.is-visible {
    opacity: 1;
    pointer-events: none;
    transform: none;
}

/* 当用户滚动更深时，让海图导览入口的存在感稍微增强 */
.sea-guide-home.is-deep .sea-guide-trigger {
    border-color: rgba(185, 227, 241, 0.34);
    box-shadow:
        0 18px 36px rgba(6, 20, 31, 0.22),
        inset 0 1px 0 rgba(255, 255, 255, 0.14),
        0 0 18px rgba(142, 204, 227, 0.1);
}

/* 首页海图导览入口：深海玻璃浮标式胶囊按钮 */
.sea-guide-home .sea-guide-trigger {
    all: unset;
    position: relative;
    min-width: 118px;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px 12px 14px;
    border-radius: 999px;
    cursor: pointer;
    color: #eef7fb;
    background:
        radial-gradient(circle at 18% 18%, rgba(137, 205, 225, 0.16), transparent 34%),
        linear-gradient(145deg, rgba(12, 41, 60, 0.8), rgba(13, 52, 74, 0.72));
    border: 1px solid rgba(182, 223, 238, 0.22);
    box-shadow:
        0 18px 36px rgba(6, 20, 31, 0.22),
        inset 0 1px 0 rgba(255, 255, 255, 0.11);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    transition:
        transform 240ms ease,
        box-shadow 240ms ease,
        border-color 240ms ease,
        background-color 240ms ease;
    animation: seaGuideDrift 10.8s ease-in-out infinite;
    animation-play-state: paused;
}

/* 海图导览可见时才播放漂浮动画，节省离屏 GPU 开销 */
.sea-guide-home.is-visible .sea-guide-trigger {
    animation-play-state: running;
    pointer-events: auto;
}

/* 海图导览入口表面的潮光扫过效果。 */
.sea-guide-home .sea-guide-trigger::after {
    content: "";
    position: absolute;
    inset: 1px;
    border-radius: inherit;
    background: linear-gradient(115deg, transparent 10%, rgba(233, 247, 253, 0.12) 48%, transparent 86%);
    opacity: 0.36;
    transform: translateX(-18%);
    transition: transform 460ms ease, opacity 220ms ease;
    pointer-events: none;
}

/* 鼠标移入时，入口轻微上浮并增强玻璃边缘高光*/
.sea-guide-home .sea-guide-trigger:hover {
    transform: translateY(-2px);
    border-color: rgba(200, 235, 245, 0.34);
    box-shadow:
        0 20px 36px rgba(6, 20, 31, 0.24),
        inset 0 1px 0 rgba(255, 255, 255, 0.14),
        0 0 16px rgba(144, 202, 226, 0.1);
}

/* 展开或悬停时，让潮光沿着按钮轻微移动 */
.sea-guide-home .sea-guide-trigger:hover::after,
.sea-guide-home.is-open .sea-guide-trigger::after {
    transform: translateX(16%);
    opacity: 0.44;
}

/* 点击时保留柔和按压，不做机械按钮。*/
.sea-guide-home .sea-guide-trigger:active {
    transform: translateY(-1px);
}

/* 海图导览入口图标的尺寸和居中方式 */
.sea-guide-home .sea-guide-trigger-icon {
    width: 18px;
    height: 18px;
    display: grid;
    place-items: center;
    color: rgba(235, 247, 252, 0.88);
    flex: 0 0 auto;
}

/* 制制海图导览 SVG 图标尺寸 */
.sea-guide-home .sea-guide-trigger-icon svg {
    width: 100%;
    height: 100%;
}

/* 海图导览入口文字区域的上下层次。 */
.sea-guide-home .sea-guide-trigger-copy {
    display: grid;
    gap: 2px;
    min-width: 0;
}

/* 海图导览主标。 */
.sea-guide-home .sea-guide-trigger-copy strong {
    font-size: 0.88rem;
    font-weight: 600;
    letter-spacing: 0.08em;
}

/* 海图导览副标。 */
.sea-guide-home .sea-guide-trigger-copy small {
    font-size: 0.68rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: rgba(215, 234, 243, 0.58);
}

/* 首页海图导览浮层：展开后承载所有快速跳转入口。 */
.sea-guide-home .sea-guide-panel {
    order: -1;
    position: relative;
    isolation: isolate;
    width: min(326px, calc(100vw - 28px));
    max-height: min(62vh, 560px);
    overflow: auto;
    overscroll-behavior-y: auto;
    scroll-padding: 18px 0 26px;
    scrollbar-width: none;
    -ms-overflow-style: none;
    padding: 18px 18px 26px;
    border-radius: 26px;
    background:
        radial-gradient(circle at 16% 14%, rgba(124, 194, 219, 0.15), transparent 28%),
        linear-gradient(150deg, rgba(10, 36, 53, 0.86), rgba(12, 50, 70, 0.8));
    border: 1px solid rgba(182, 224, 239, 0.2);
    box-shadow:
        0 28px 56px rgba(6, 20, 31, 0.28),
        inset 0 1px 0 rgba(255, 255, 255, 0.09);
    backdrop-filter: blur(22px);
    -webkit-backdrop-filter: blur(22px);
    opacity: 0;
    pointer-events: none;
    transform: translateY(16px);
    transition:
        opacity 300ms ease,
        transform 360ms cubic-bezier(0.22, 0.72, 0.2, 1);
}

.sea-guide-home .sea-guide-panel::before {
    content: none;
}

.sea-guide-home .sea-guide-panel > * {
    position: relative;
    z-index: 1;
}

/* 首页与行程页导览面板保留滚动能力，但把原生滚动条藏起来，避免白轨露出来。 */
.sea-guide-home .sea-guide-panel::-webkit-scrollbar {
    width: 0;
    height: 0;
}

/* 首页海图导览打开后，让浮层完整显现。 */
.sea-guide-home.is-open .sea-guide-panel {
    opacity: 1;
    pointer-events: auto;
    transform: none;
}

/* 浮层顶部的英文小标题 */
.sea-guide-home .sea-guide-kicker {
    margin: 0 0 14px;
    font-size: 0.68rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: rgba(205, 228, 239, 0.5);
}

/* 海图导览入口列表布局 */
.sea-guide-home .sea-guide-list {
    display: grid;
    gap: 10px;
    padding-bottom: 12px;
}

/* 每一个海图导览条目：像一张小型海域索引卡 */
.sea-guide-home .sea-guide-entry {
    all: unset;
    position: relative;
    display: block;
    scroll-margin-block: 12px 20px;
    padding: 14px 16px;
    border-radius: 18px;
    cursor: pointer;
    background:
        linear-gradient(150deg, rgba(242, 249, 253, 0.08), rgba(181, 219, 233, 0.04)),
        rgba(13, 44, 63, 0.22);
    border: 1px solid rgba(192, 227, 239, 0.12);
    color: #f0f9fc;
    opacity: 0;
    transform: translateY(14px);
    transition:
        transform 260ms ease,
        opacity 260ms ease,
        border-color 240ms ease,
        box-shadow 240ms ease,
        background-color 240ms ease;
}

/* 浮层打开时，让条目依次淡入出现。 */
.sea-guide-home.is-open .sea-guide-entry {
    opacity: 1;
    transform: none;
}

/* 条目逐个加延迟，让海图导览浮层展开时更有层次。 */
.sea-guide-home.is-open .sea-guide-entry:nth-child(1) { transition-delay: 12ms; }
.sea-guide-home.is-open .sea-guide-entry:nth-child(2) { transition-delay: 30ms; }
.sea-guide-home.is-open .sea-guide-entry:nth-child(3) { transition-delay: 48ms; }
.sea-guide-home.is-open .sea-guide-entry:nth-child(4) { transition-delay: 66ms; }
.sea-guide-home.is-open .sea-guide-entry:nth-child(5) { transition-delay: 84ms; }
.sea-guide-home.is-open .sea-guide-entry:nth-child(6) { transition-delay: 102ms; }

/* 当前所在海层对应条目的细潮线提示。 */
.sea-guide-home .sea-guide-entry::before {
    content: "";
    position: absolute;
    left: 12px;
    top: 14px;
    bottom: 14px;
    width: 2px;
    border-radius: 999px;
    background: linear-gradient(180deg, rgba(163, 218, 239, 0), rgba(163, 218, 239, 0.78), rgba(163, 218, 239, 0));
    opacity: 0;
    transition: opacity 240ms ease;
}

/* 悬停时让条目像轻碰一块海图索引卡 */
.sea-guide-home .sea-guide-entry:hover {
    transform: translateY(-2px);
    border-color: rgba(204, 233, 244, 0.22);
    box-shadow:
        0 18px 30px rgba(6, 20, 31, 0.16),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

/* 当前条目更亮，用于提示用户正位于哪一层海 */
.sea-guide-home .sea-guide-entry.is-current {
    border-color: rgba(198, 231, 242, 0.28);
    background:
        linear-gradient(150deg, rgba(245, 250, 253, 0.14), rgba(184, 222, 236, 0.08)),
        rgba(18, 54, 75, 0.3);
    box-shadow:
        0 18px 30px rgba(6, 20, 31, 0.18),
        0 0 18px rgba(137, 205, 227, 0.09);
}

/* 当前条目的潮线需要真正显现。 */
.sea-guide-home .sea-guide-entry.is-current::before {
    opacity: 1;
}

/* 海图导览条目的标题和说明堆叠 */
.sea-guide-home .sea-guide-entry-copy {
    display: grid;
    gap: 4px;
    padding-left: 10px;
}

/* 条目主标。*/
.sea-guide-home .sea-guide-entry-copy strong {
    font-size: 0.9rem;
    font-weight: 600;
    line-height: 1.35;
    color: #f2fbff;
}

/* 条目辅助说明 */
.sea-guide-home .sea-guide-entry-copy small {
    font-size: 0.76rem;
    line-height: 1.55;
    color: rgba(214, 233, 242, 0.62);
}

/* 当前条目文字更清楚，用于强调当前海层 */
.sea-guide-home .sea-guide-entry.is-current .sea-guide-entry-copy strong {
    color: #fbfeff;
}

/* 当前条目辅助说明提亮一点。 */
.sea-guide-home .sea-guide-entry.is-current .sea-guide-entry-copy small {
    color: rgba(226, 240, 247, 0.78);
}

/* 海图导览按钮保持很轻的呼吸感，像漂浮在海流中的浮标。 */
@keyframes seaGuideDrift {
    0%,
    100% {
        box-shadow:
            0 16px 30px rgba(6, 20, 31, 0.2),
            inset 0 1px 0 rgba(255, 255, 255, 0.11);
    }

    50% {
        box-shadow:
            0 20px 36px rgba(6, 20, 31, 0.24),
            inset 0 1px 0 rgba(255, 255, 255, 0.12);
    }
}

/* ============================================
   Responsive Design
   ============================================ */

/* 当前屏幕条件下的响应式样。*/
@media (max-width: 900px) {
/* 平板下继续制制首屏区的背景层次、留白和整体舞台。 */
    .hero-section {
        min-height: 520px;
        padding-top: calc(var(--spacing-2xl) + 18px);
        padding-bottom: calc(var(--spacing-2xl) + 12px);
    }

/* 设置首页主标题的字号、颜色和视觉重心 */
    .hero-title {
        font-size: 1.8rem;
    }

/* 设置今日海域卡片的玻璃外观、边框和漂浮质感 */
    .today-sea-card {
        width: min(100%, 700px);
        padding: 22px 22px 20px;
    }

/* 平板下让今日海域舞台保持一体化，但收紧外层留白避免过宽 */
    .hero-hotspots-shell {
        padding: 30px 22px 24px;
    }

/* 平板下让标题区和舞台之间仍保留层级，但避免首屏纵向过长。 */
    .hero-hotspots-head {
        margin-bottom: 24px;
    }

/* 平板下稍微收紧轨道边距，保证主卡仍是视觉中心 */
    .hero-bamboo-scroll-container {
        gap: 14px;
        padding: 6px 0 10px;
    }

/* 平板下观察窗底板缩进略收，避免左右按钮吃掉过多空间。 */
    .hero-bamboo-scroll-container::before {
        inset: 8px 44px 12px;
    }

/* 平板下单张卡片略微收窄，保留中间更清晰、两侧更远的舞台关系 */
    .hero-hotspots-shell .bamboo-card {
        flex-basis: 312px;
        min-width: 312px;
    }

/* 平板下边缘雾化罩收窄，避免吃掉过多可见内容。 */
    .hero-bamboo-cards-wrapper::before,
    .hero-bamboo-cards-wrapper::after {
        width: 34px;
    }

/* .trip-planner-shell 的主要视觉与布局效果 */
    .trip-planner-shell {
        grid-template-columns: 1fr;
        padding: 24px;
    }

/* 制制页脚区域的布局、层次和收束氛围 */
    .footer {
        padding-top: 56px;
    }

/* 制制页脚区域的布局、层次和收束氛围 */
    .footer-middle {
        grid-template-columns: 1fr;
    }

/* 制制页脚区域的布局、层次和收束氛围 */
    .footer-nav {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

/* 制制页脚区域的布局、层次和收束氛围 */
    .footer-companion {
        max-width: 560px;
    }

/* 首页海图导览在平板上略微收紧尺寸，避免压住主要内容。 */
    .sea-guide-home {
        right: 20px;
        bottom: 20px;
    }

/* 首页海图导览浮层在平板上压缩宽度，保持更好的边距 */
    .sea-guide-home .sea-guide-panel {
        width: min(312px, calc(100vw - 24px));
    }

/* 平板下故事区改成单列，优先保证阅读流。 */
    .story-shell {
        grid-template-columns: 1fr;
        gap: 24px;
    }

/* 平板下隐藏中间河流轨道，避免版面过长。 */
    .story-river {
        display: none;
    }

/* 平板下取消故事卡左右错位，避免横向拥挤。 */
    .story-card-offset {
        margin-left: 0;
    }

/* 制制精选目的地区域的舞台布局、卡片层级和视觉焦点 */
    .curated-waters-shell {
        gap: 32px;
        align-items: start;
    }

/* 平板下档案墙改为单列堆叠 */
    .curated-waters-stage,
    .curated-archive-wall {
        grid-template-columns: 1fr;
        grid-template-areas:
            "main"
            "rail";
        min-height: auto;
    }

    .curated-waters-stage::after,
    .curated-archive-wall::after {
        display: none;
    }

    .curated-nav-rail {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        overflow-x: auto;
        gap: 10px;
        padding: 0 0 8px;
    }

    .curated-nav-btn {
        min-width: 0;
        padding: 14px 16px 16px;
    }

    .curated-display {
        min-height: 600px;
    }

    .curated-display-surface {
        grid-template-columns: 1fr 1fr;
    }

    .curated-display-facts {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .curated-display-fact:nth-child(2) {
        border-right: 0;
    }

    .curated-display-fact:last-child {
        grid-column: 1 / -1;
        border-top: 1px solid rgba(236, 245, 252, 0.08);
    }

/* 潜水匹配在平板尺寸下改成单列舞台，避免左侧引导卡和右侧推荐卡过挤。 */
    .dive-match-stage {
        padding: 24px 20px;
    }

/* 平板下标题区可读性继续保持宽度。 */
    .dive-match-intro {
        max-width: 100%;
    }

/* 平板下把匹配内容改成一列，先看引导卡，再看推荐。 */
    .dive-match-display {
        min-height: 0;
    }

/* 平板下切换层不再绝对叠放，避免内容高度被截断 */
    .dive-match-surface {
        position: relative;
        grid-template-columns: 1fr;
    }

/* 推荐卡改成两列，保持舒展但不拥挤 */
    .dive-match-card-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

/* 制制搜索栏区域的布局、玻璃材质和输入分布 */
    .search-bar {
        flex-direction: column;
    }

/* 设置搜索输入制件的尺寸、颜色和磨砂玻璃效果 */
    .search-input,
    .search-select {
        min-width: unset;
    }

/* .bamboo-scroll-container 的主要视觉与布局效果 */
    .bamboo-scroll-container {
        flex-direction: column;
    }

/* 在移动端收紧按钮尺寸，避免漂浮制件挤压卡片滚动区。 */
    .scroll-arrow {
        width: 52px;
        height: 52px;
        margin: 0;
    }
}

/* 当前屏幕条件下的响应式样。*/
@media (max-width: 600px) {
/* 手机端继续收紧首屏区的留白和整体舞台。 */
    .hero-section {
        min-height: 500px;
        padding: calc(var(--spacing-xl) + 10px) var(--spacing-md) var(--spacing-xl);
    }

/* .hero-ocean-glow-one 的主要视觉与布局效果 */
    .hero-ocean-glow-one {
        min-width: 380px;
        min-height: 380px;
    }

/* .hero-ocean-glow-two, .hero-plankton-five, .hero-plankton-six 的主要视觉与布局效果 */
    .hero-ocean-glow-two,
    .hero-plankton-five,
    .hero-plankton-six {
        display: none;
    }

/* 设置首页主标题的字号、颜色和视觉重心 */
    .hero-title {
        font-size: 1.5rem;
    }

/* 设置首页副标题的颜色、节奏和阅读距离 */
    .hero-subtitle {
        font-size: 1rem;
    }

/* 设置今日海域卡片的玻璃外观、边框和漂浮质感 */
    .today-sea-card {
        width: 100%;
        padding: 24px 16px 20px;
        border-radius: 24px;
    }

/* 设置今日海域卡片的玻璃外观、边框和漂浮质感 */
    .home-page.hero-awakened .today-sea-card {
        animation-duration: 1s, 7.6s;
    }

/* 手机端让今日海域舞台标题和卡片区关系更清楚，避免塌成普通资讯卡 */
    .hero-hotspots-shell {
        padding: 24px 16px 20px;
    }

/* 手机端标题区进一步收紧留白，但仍保持居中和层次。 */
    .hero-hotspots-head {
        margin-bottom: 20px;
        gap: 8px;
    }

/* 手机端让主标题不要太大，保持像海域观察台而不是普通分区标题。 */
    .hero-hotspots-title {
        font-size: 1.34rem;
        letter-spacing: 0.1em;
    }

/* 手机端副文案改为更适合竖向阅读的行距。 */
    .hero-hotspots-subtitle {
        font-size: 0.94rem;
        line-height: 1.78;
        max-width: 100%;
    }

/* 手机端把滚动舞台与箭头间距再压紧，减少首屏拥挤感 */
    .hero-bamboo-scroll-container {
        gap: 10px;
        padding: 4px 0 8px;
    }

/* 手机端观察窗底板继续收紧，保证卡片轨道仍有舞台底板但不显得笨重。 */
    .hero-bamboo-scroll-container::before {
        inset: 6px 34px 10px;
        border-radius: 24px;
    }

/* 手机端维持单卡主舞台感，但缩小卡宽以适配窄屏 */
    .hero-hotspots-shell .bamboo-card {
        flex-basis: 284px;
        min-width: 284px;
    }

/* 手机端边缘雾化罩继续收窄，避免把可见卡面吃掉太多 */
    .hero-bamboo-cards-wrapper::before,
    .hero-bamboo-cards-wrapper::after {
        width: 18px;
    }

/* 手机端底部流向按钮改成单列，更像舞台下沿的两条流线。 */
    .hero-hotspots-actions {
        grid-template-columns: 1fr;
        gap: 10px;
        margin-top: 20px;
        padding-top: 16px;
    }

/* .today-sea-spot-link::after：手机端把动作提示改成随正文排列。 */
    .today-sea-spot-link::after {
        position: static;
        display: inline-block;
        margin-top: 10px;
    }

/* .today-sea-description 的主要视觉与布局效果 */
    .today-sea-description {
        max-width: 100%;
    }

/* 小屏下潜水匹配标签改成更紧凑的两列漂浮铭牌。 */
    .dive-match-rail {
        gap: 10px;
    }

/* 小屏下分类标签宽度收紧，避免一行只摆一个*/
    .dive-match-filter {
        min-width: calc(50% - 5px);
        padding: 12px 14px;
    }

/* 小屏下推荐卡改单列，信息层级更清楚。 */
    .dive-match-card-grid {
        grid-template-columns: 1fr;
    }

/* 小屏下当前分类卡片和推荐卡的边距更紧凑。 */
    .dive-match-focus-card,
    .dive-match-card-copy {
        padding-left: 16px;
        padding-right: 16px;
    }

/* .today-sea-actions 的主要视觉与布局效果 */
    .today-sea-actions {
        flex-direction: column;
    }

/* 设置 首屏 操作按钮的外观、圆角和悬停过渡 */
    .sea-action {
        width: 100%;
    }

/* .trip-planner-section 的主要视觉与布局效果 */
    .trip-planner-section {
        padding: var(--spacing-xl) var(--spacing-md);
    }

/* .trip-planner-shell 的主要视觉与布局效果 */
    .trip-planner-shell {
        padding: 20px 16px;
        border-radius: 24px;
    }

/* 制制页脚区域的布局、层次和收束氛围 */
    .footer {
        padding: 48px var(--spacing-md) 26px;
    }

/* 制制页脚区域的布局、层次和收束氛围 */
    .footer-brand-stage {
        margin-bottom: 40px;
    }

/* 制制页脚区域的布局、层次和收束氛围 */
    .footer-nav {
        grid-template-columns: 1fr;
        gap: 24px;
    }

/* 制制页脚区域的布局、层次和收束氛围 */
    .footer-social-list {
        grid-template-columns: 1fr;
    }

/* 制制页脚区域的布局、层次和收束氛围 */
    .footer-bottom {
        flex-direction: column;
        align-items: flex-start;
    }

/* 手机端故事区标题稍微收小，避免压迫。 */
    .story-title {
        font-size: 1.7rem;
    }

/* 手机端故事卡同步收紧内边距和圆角。 */
    .story-card {
        padding: 20px 18px;
        border-radius: 24px;
    }

/* 制制精选目的地区域的舞台布局、卡片层级和视觉焦点 */
    .featured-destinations {
        padding: 72px var(--spacing-md);
    }

/* 制制精选目的地区域的舞台布局、卡片层级和视觉焦点 */
    .curated-waters-title {
        font-size: 1.8rem;
    }

/* 手机下副标题 */
    .curated-waters-subtitle {
        max-width: 100%;
    }

/* 手机下档案墙缩小圆角 */
    .curated-waters-stage,
    .curated-archive-wall {
        padding: 14px;
        border-radius: 28px;
    }

    .curated-display {
        min-height: 700px;
    }

    .curated-display-surface {
        padding: 14px;
        border-radius: 22px;
    }

    .curated-display-media {
        position: relative;
        inset: auto;
        min-height: 260px;
    }

    .curated-display-facts {
        grid-template-columns: 1fr;
    }

    .curated-display-name {
        font-size: 1.8rem;
    }

    .curated-display-copy {
        position: relative;
        right: auto;
        bottom: auto;
        width: auto;
        margin-top: 14px;
        padding: 20px 18px 22px;
        border-radius: 24px;
    }

    .curated-display-sea-note {
        top: 16px;
        left: 16px;
        min-width: 132px;
        padding: 12px 14px;
    }

    .curated-nav-rail {
        display: grid;
        grid-auto-flow: column;
        grid-auto-columns: minmax(220px, 76vw);
        grid-template-columns: none;
        overflow-x: auto;
        overflow-y: hidden;
        padding: 0 0 10px;
    }

    .curated-nav-btn {
        grid-template-columns: 64px minmax(0, 1fr);
        min-height: 114px;
        padding: 12px 14px 14px;
        gap: 10px 12px;
    }

    .curated-nav-thumb {
        width: 64px;
        height: 74px;
        border-radius: 16px;
    }

    .curated-nav-name-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 6px;
    }

/* 设置热门潜点卡片的外观、层次和悬停反馈 */
    .bamboo-card {
        flex: 0 0 240px;
        min-width: 240px;
    }
}

/* 在手机宽度下，把海图导览进一步收成更紧凑的悬浮胶囊。 */
@media (max-width: 640px) {
    .sea-guide-home {
        right: 14px;
        bottom: 14px;
        gap: 10px;
    }

    .sea-guide-home .sea-guide-trigger {
        min-width: 106px;
        padding: 11px 14px 11px 13px;
        gap: 10px;
    }

    .sea-guide-home .sea-guide-panel {
        width: min(286px, calc(100vw - 18px));
        padding: 15px 15px 24px;
        border-radius: 22px;
    }

    .sea-guide-home .sea-guide-entry {
        padding: 13px 14px;
    }
}

/* 首页与共享页脚的高对比度保护层：保持品牌标题、深色按钮和页脚导航在高对比度环境里仍是浅色。 */
@media (forced-colors: active) {
    .home-page :is(
        .hero-title,
        .hero-hotspots-title,
        .curated-waters-title,
        .dive-match-title,
        .story-title
    ) {
        forced-color-adjust: none;
        color: var(--yanqi-forced-title);
        -webkit-text-fill-color: var(--yanqi-forced-title);
    }

    .home-page :is(
        .hero-subtitle,
        .hero-hotspots-subtitle,
        .curated-waters-subtitle,
        .curated-waters-lead,
        .dive-match-subtitle,
        .story-lead
    ) {
        forced-color-adjust: none;
        color: var(--yanqi-forced-copy);
        -webkit-text-fill-color: var(--yanqi-forced-copy);
    }

    .home-page :is(
        .hero-hotspots-kicker,
        .curated-waters-kicker,
        .dive-match-kicker,
        .story-kicker,
        .hero-hotspots-stage-hud-label,
        .hero-hotspots-stage-hud-hint
    ) {
        forced-color-adjust: none;
        color: var(--yanqi-forced-kicker);
        -webkit-text-fill-color: var(--yanqi-forced-kicker);
    }

    .home-page .hero-hotspots-stage-hud-value {
        forced-color-adjust: none;
        color: var(--yanqi-forced-title);
        -webkit-text-fill-color: var(--yanqi-forced-title);
    }

    :is(.home-page, .trip-page) :is(
        .footer-overline,
        .footer-social-mark
    ) {
        forced-color-adjust: none;
        color: var(--yanqi-forced-kicker);
        -webkit-text-fill-color: var(--yanqi-forced-kicker);
    }

    :is(.home-page, .trip-page) :is(
        .footer-brand,
        .footer-whisper,
        .footer-nav-title,
        .footer-companion-title
    ) {
        forced-color-adjust: none;
        color: var(--yanqi-forced-title);
        -webkit-text-fill-color: var(--yanqi-forced-title);
    }

    :is(.home-page, .trip-page) :is(
        .footer-murmur,
        .footer-companion-copy,
        .footer-bottom p
    ) {
        forced-color-adjust: none;
        color: var(--yanqi-forced-copy);
        -webkit-text-fill-color: var(--yanqi-forced-copy);
    }

    :is(.home-page, .trip-page) :is(
        .sea-action,
        .hero-hotspots-stage-reset,
        .footer-link,
        .footer-social-link
    ),
    :is(.home-page, .trip-page) :is(
        .sea-action,
        .hero-hotspots-stage-reset,
        .footer-link,
        .footer-social-link
    ):visited,
    :is(.home-page, .trip-page) :is(
        .sea-action,
        .hero-hotspots-stage-reset,
        .footer-link,
        .footer-social-link
    ):hover,
    :is(.home-page, .trip-page) :is(
        .sea-action,
        .hero-hotspots-stage-reset,
        .footer-link,
        .footer-social-link
    ):focus-visible,
    :is(.home-page, .trip-page) :is(
        .sea-action,
        .hero-hotspots-stage-reset,
        .footer-link,
        .footer-social-link
    ):active {
        forced-color-adjust: none;
        color: var(--yanqi-forced-link);
        -webkit-text-fill-color: var(--yanqi-forced-link);
    }

    .home-page .hero-hotspots-stage-reset,
    :is(.home-page, .trip-page) :is(.sea-action, .footer-social-link) {
        border-color: var(--yanqi-forced-border);
    }

    .home-page .footer-link::after {
        forced-color-adjust: none;
        background: linear-gradient(90deg, rgba(236, 247, 253, 0.88), rgba(236, 247, 253, 0));
    }

    :is(.home-page, .trip-page) :is(
        .sea-action,
        .footer-link,
        .footer-social-link
    ):focus-visible,
    .home-page .hero-hotspots-stage-reset:focus-visible {
        outline: 2px solid var(--yanqi-forced-ring);
        outline-offset: 3px;
    }
}

/* First Group Enhancement Late Overrides */

body.home-page .hero-subtitle {
    margin-bottom: 16px;
}

body.home-page .hero-hotspots-shell {
    padding-top: 38px;
    border: 1px solid rgba(225, 243, 251, 0.09);
    box-shadow:
        0 30px 62px rgba(4, 20, 31, 0.22),
        0 0 30px rgba(87, 154, 186, 0.055),
        inset 0 1px 0 rgba(255, 255, 255, 0.1),
        inset 0 -22px 42px rgba(6, 29, 45, 0.11);
}

body.home-page .hero-hotspots-shell::before {
    content: "";
    position: absolute;
    inset: 18px 22px auto;
    height: 96px;
    border-radius: 22px;
    background:
        linear-gradient(90deg, rgba(189, 225, 241, 0.12) 0 1px, transparent 1px 100%),
        linear-gradient(180deg, rgba(189, 225, 241, 0.08) 0 1px, transparent 1px 100%);
    background-size: 60px 100%, 100% 30px;
    mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.64), rgba(0, 0, 0, 0));
    opacity: 0.18;
    pointer-events: none;
    z-index: 0;
}

body.home-page .hero-hotspots-head {
    gap: 16px;
}

body.home-page .hero-bamboo-scroll-container::before {
    background:
        linear-gradient(180deg, rgba(237, 247, 252, 0.05) 0%, rgba(237, 247, 252, 0.01) 100%),
        rgba(5, 27, 41, 0.34);
}

body.home-page .dive-match-intro {
    gap: 16px;
}

body.home-page .footer-shell {
    display: grid;
    gap: 34px;
}

body.home-page .footer-brand-stage {
    margin-bottom: 46px;
}

body.home-page .footer-companion {
    position: relative;
    overflow: hidden;
}

body.home-page .footer-companion::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(120deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0) 46%);
    pointer-events: none;
}

/* 今日海域首屏强化：删除上方开场文案后，让观察舱成为进入首页的第一视觉。 */
body.home-page .hero-section {
    min-height: calc(100vh - var(--nav-height, 82px));
    padding-top: clamp(28px, 4.2vh, 46px);
    padding-bottom: clamp(24px, 4vh, 46px);
    display: flex;
    align-items: flex-start;
}

body.home-page .hero-content {
    width: min(100%, 1400px);
    max-width: 1400px;
    display: block;
}

body.home-page .hero-hotspots-stage-shell {
    --hero-hotspots-stage-width: min(100%, 1320px);
    width: var(--hero-hotspots-stage-width);
    max-width: min(100%, 1320px);
}

body.home-page .hero-hotspots-shell {
    min-height: clamp(500px, calc(100vh - 280px), 620px);
    padding: clamp(18px, 2.4vh, 28px) clamp(16px, 2vw, 28px) clamp(18px, 2.4vh, 26px);
    border-radius: clamp(28px, 2.8vw, 40px);
    background:
        radial-gradient(circle at 50% -18%, rgba(219, 244, 255, 0.13) 0%, rgba(219, 244, 255, 0) 40%),
        linear-gradient(180deg, rgba(102, 158, 187, 0.13) 0%, rgba(10, 46, 68, 0.3) 46%, rgba(5, 27, 42, 0.47) 100%),
        rgba(5, 30, 47, 0.34);
    border-color: rgba(225, 243, 251, 0.105);
    box-shadow:
        0 28px 58px rgba(4, 20, 31, 0.22),
        0 0 42px rgba(83, 160, 194, 0.07),
        inset 0 1px 0 rgba(255, 255, 255, 0.1),
        inset 0 -30px 58px rgba(4, 22, 35, 0.16);
}

body.home-page .hero-hotspots-shell::before {
    inset: 14px 24px auto;
    height: 84px;
    opacity: 0.14;
}

body.home-page .hero-hotspots-head {
    gap: 8px;
    margin-bottom: clamp(10px, 1.6vh, 16px);
}

body.home-page .hero-hotspots-kicker {
    font-size: 0.68rem;
    letter-spacing: 0.46em;
    color: rgba(202, 231, 244, 0.5);
}

body.home-page .hero-hotspots-copy {
    gap: 7px;
}

body.home-page .hero-hotspots-title {
    font-size: clamp(1.8rem, 2.55vw, 2.38rem);
    letter-spacing: 0.14em;
}

body.home-page .hero-hotspots-subtitle {
    font-size: clamp(0.88rem, 1vw, 0.98rem);
    line-height: 1.64;
    color: rgba(218, 236, 245, 0.62);
}

body.home-page .hero-observation-rail {
    width: min(100%, 590px);
    gap: 7px;
}

body.home-page .hero-observation-chip {
    min-height: 25px;
    padding: 0 11px;
    border-radius: 999px;
    background:
        linear-gradient(90deg, rgba(185, 223, 240, 0.02), rgba(222, 244, 252, 0.09), rgba(185, 223, 240, 0.02)),
        rgba(7, 31, 48, 0.12);
    border-color: rgba(213, 238, 248, 0.1);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.08),
        0 0 0 1px rgba(108, 174, 205, 0.02);
    font-size: 0.68rem;
    letter-spacing: 0.07em;
    color: rgba(218, 237, 246, 0.58);
}

body.home-page .hero-bamboo-scroll-container {
    flex: 1 1 auto;
    min-height: 0;
    gap: clamp(8px, 1vw, 14px);
    padding: 0 4px 4px;
}

body.home-page .hero-bamboo-scroll-container::before {
    inset: 8px clamp(36px, 3.6vw, 58px) 10px;
    border-radius: clamp(24px, 2.4vw, 36px);
    background:
        linear-gradient(180deg, rgba(237, 247, 252, 0.045) 0%, rgba(237, 247, 252, 0.008) 100%),
        rgba(4, 24, 38, 0.22);
}

body.home-page .hero-bamboo-cards-wrapper {
    align-self: stretch;
    min-height: clamp(320px, calc(100vh - 500px), 430px);
    padding: clamp(8px, 1.2vh, 14px) 0 clamp(10px, 1.4vh, 18px);
    display: flex;
    align-items: center;
}

body.home-page .hero-hotspots-shell .bamboo-cards-content {
    width: 100%;
    padding-block: 8px;
    gap: clamp(12px, 1.35vw, 18px);
    align-items: stretch;
}

body.home-page .hero-hotspots-shell .bamboo-card {
    flex-basis: clamp(286px, 22vw, 330px);
    min-width: clamp(286px, 22vw, 330px);
}

body.home-page .hero-hotspots-shell .bamboo-card-image {
    height: clamp(178px, 20vh, 220px);
}

@media (min-width: 1600px) {
    body.home-page .hero-content {
        width: min(100%, 1440px);
        max-width: 1440px;
    }

    body.home-page .hero-hotspots-stage-shell {
        --hero-hotspots-stage-width: min(100%, 1360px);
        max-width: min(100%, 1360px);
    }
}

@media (max-width: 1179px) {
    body.home-page .hero-section {
        min-height: auto;
        padding-top: 42px;
        align-items: stretch;
    }

    body.home-page .hero-hotspots-shell {
        min-height: 0;
        padding: 28px 20px 24px;
    }

    body.home-page .hero-bamboo-cards-wrapper {
        min-height: 0;
    }
}

@media (max-width: 720px) {
    body.home-page .hero-section {
        padding-top: 28px;
        padding-inline: 14px;
    }

    body.home-page .hero-hotspots-shell {
        padding: 24px 14px 20px;
        border-radius: 28px;
    }

    body.home-page .hero-hotspots-head {
        margin-bottom: 16px;
    }

    body.home-page .hero-hotspots-title {
        font-size: clamp(1.65rem, 9vw, 2.15rem);
    }

    body.home-page .hero-observation-rail {
        gap: 7px;
    }

    body.home-page .hero-observation-chip {
        width: auto;
        min-height: 30px;
        padding-inline: 10px;
        font-size: 0.68rem;
        letter-spacing: 0.04em;
    }

    body.home-page .hero-bamboo-scroll-container::before {
        inset: 6px 32px 8px;
    }
}

@media (max-width: 960px) {
    body.home-page .hero-hotspots-shell {
        padding-top: 34px;
    }
}

/* ============================================
   今日海域观察窗升级
   ============================================ */

body.home-page .hero-hotspots-stage-shell {
    --hero-hotspots-stage-width: min(100%, 1380px);
    max-width: min(100%, 1380px);
}

body.home-page .hero-hotspots-shell.today-sea-card {
    position: relative;
    min-height: clamp(510px, calc(100vh - 272px), 650px);
    padding: clamp(22px, 3vh, 34px) clamp(18px, 2.2vw, 34px) clamp(18px, 2.6vh, 28px);
    border-radius: clamp(18px, 2.2vw, 30px);
    overflow: hidden;
    background:
        linear-gradient(90deg, rgba(2, 18, 31, 0.42), rgba(2, 18, 31, 0) 14%, rgba(2, 18, 31, 0) 86%, rgba(2, 18, 31, 0.44)),
        linear-gradient(180deg, rgba(222, 246, 255, 0.07), rgba(128, 188, 213, 0.035) 38%, rgba(4, 28, 44, 0.18)),
        rgba(4, 28, 44, 0.22);
    border: 0;
    box-shadow:
        inset 0 1px 0 rgba(226, 247, 255, 0.18),
        inset 0 -1px 0 rgba(184, 228, 244, 0.1),
        inset 36px 0 70px rgba(2, 18, 31, 0.18),
        inset -36px 0 70px rgba(2, 18, 31, 0.2),
        0 26px 58px rgba(3, 17, 28, 0.18);
    backdrop-filter: blur(18px) saturate(118%);
    -webkit-backdrop-filter: blur(18px) saturate(118%);
}

body.home-page .hero-hotspots-shell.today-sea-card::before {
    content: "";
    position: absolute;
    left: clamp(20px, 3vw, 44px);
    right: clamp(20px, 3vw, 44px);
    top: 0;
    height: 1px;
    background: linear-gradient(90deg, rgba(188, 231, 247, 0), rgba(211, 241, 251, 0.42), rgba(188, 231, 247, 0));
    opacity: 0.88;
    pointer-events: none;
}

body.home-page .hero-hotspots-shell.today-sea-card::after {
    content: "";
    position: absolute;
    left: clamp(20px, 3vw, 44px);
    right: clamp(20px, 3vw, 44px);
    bottom: 0;
    height: 1px;
    background: linear-gradient(90deg, rgba(120, 194, 222, 0), rgba(168, 223, 239, 0.28), rgba(120, 194, 222, 0));
    opacity: 0.72;
    pointer-events: none;
}

body.home-page .hero-hotspots-head {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
        "kicker hints"
        "copy hints";
    align-items: end;
    gap: 6px 24px;
    width: min(100%, 1120px);
    margin: 0 auto clamp(18px, 2.4vh, 26px);
    padding: 0 clamp(6px, 1vw, 12px);
    text-align: left;
}

body.home-page .hero-hotspots-kicker {
    grid-area: kicker;
    margin: 0;
    font-size: 0.66rem;
    letter-spacing: 0.38em;
    color: rgba(207, 233, 244, 0.48);
}

body.home-page .hero-hotspots-copy {
    grid-area: copy;
    display: grid;
    gap: 8px;
    justify-items: start;
}

body.home-page .hero-hotspots-title {
    font-size: clamp(2rem, 2.7vw, 2.72rem);
    line-height: 1.08;
    letter-spacing: 0.04em;
    text-align: left;
    text-shadow: 0 18px 42px rgba(2, 16, 27, 0.28);
}

body.home-page .hero-hotspots-subtitle {
    max-width: 36ch;
    margin: 0;
    font-size: clamp(0.9rem, 1vw, 1rem);
    line-height: 1.66;
    color: rgba(218, 237, 246, 0.66);
    text-align: left;
}

body.home-page .hero-observation-rail {
    grid-area: hints;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    flex-wrap: wrap;
    width: auto;
    max-width: 360px;
    gap: 8px;
}

body.home-page .hero-observation-chip {
    min-height: 26px;
    padding: 0 0 0 16px;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    font-size: 0.72rem;
    letter-spacing: 0.08em;
    color: rgba(207, 232, 242, 0.56);
}

body.home-page .hero-observation-chip::before {
    content: "";
    position: absolute;
    left: 2px;
    top: 50%;
    width: 5px;
    height: 5px;
    border-radius: 999px;
    background: rgba(157, 219, 239, 0.52);
    box-shadow: 0 0 12px rgba(126, 207, 235, 0.3);
    transform: translateY(-50%);
}

body.home-page .hero-bamboo-scroll-container {
    position: relative;
    flex: 1 1 auto;
    min-height: 0;
    gap: 0;
    padding: 0 clamp(42px, 4vw, 70px) clamp(8px, 1vh, 14px);
}

body.home-page .hero-bamboo-scroll-container::before {
    inset: clamp(4px, 0.8vh, 10px) clamp(40px, 4.2vw, 74px) clamp(8px, 1.2vh, 16px);
    border-radius: clamp(16px, 1.6vw, 24px);
    background:
        linear-gradient(90deg, rgba(3, 18, 30, 0.46), rgba(3, 18, 30, 0) 18%, rgba(3, 18, 30, 0) 82%, rgba(3, 18, 30, 0.48)),
        linear-gradient(180deg, rgba(228, 248, 255, 0.045), rgba(228, 248, 255, 0.012)),
        rgba(4, 24, 38, 0.16);
    border: 0;
    box-shadow:
        inset 0 1px 0 rgba(224, 245, 253, 0.08),
        inset 0 -1px 0 rgba(138, 208, 231, 0.06);
}

body.home-page .hero-bamboo-cards-wrapper {
    align-self: stretch;
    min-height: clamp(328px, calc(100vh - 500px), 450px);
    padding: clamp(8px, 1.2vh, 14px) 0 clamp(10px, 1.4vh, 18px);
}

body.home-page .hero-hotspots-shell .bamboo-cards-content {
    gap: clamp(24px, 2.4vw, 38px);
    padding-block: 10px;
}

body.home-page .hero-hotspots-shell .bamboo-card {
    flex-basis: clamp(300px, 23vw, 360px);
    min-width: clamp(300px, 23vw, 360px);
    border-radius: 22px;
    overflow: hidden;
    background: rgba(6, 28, 43, 0.42);
    border: 1px solid rgba(211, 238, 248, 0.1);
    box-shadow:
        0 18px 38px rgba(3, 17, 28, 0.22),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);
    opacity: 0.78;
    filter: saturate(0.9) brightness(0.9) blur(0.2px);
}

body.home-page .hero-hotspots-shell .bamboo-card:hover {
    opacity: 0.92;
    filter: saturate(1) brightness(0.98) blur(0);
}

body.home-page .hero-hotspots-shell .bamboo-card.active {
    --card-scale: 1.035;
    opacity: 1;
    border-color: rgba(220, 244, 252, 0.22);
    box-shadow:
        0 26px 54px rgba(3, 17, 28, 0.3),
        0 0 44px rgba(119, 202, 232, 0.13),
        inset 0 1px 0 rgba(255, 255, 255, 0.14);
    filter: saturate(1.04) brightness(1) blur(0);
}

/* 今日海域卡片内容区：将原版竹简卡收紧为更深海的玻璃资料卡。
   这里重新设定图片高度、文案区玻璃背景、标题/副文案/价格/评分的颜色与字号，
   让卡片在深色首屏里不跳脱，而是作为观察窗里的档案页自然浮现。 */
body.home-page .hero-hotspots-shell .bamboo-card.active::before {
    content: "";
    position: absolute;
    left: 24px;
    right: 24px;
    top: 0;
    height: 1px;
    background: linear-gradient(90deg, rgba(194, 235, 248, 0), rgba(220, 246, 253, 0.62), rgba(194, 235, 248, 0));
    opacity: 0.84;
    z-index: 2;
    pointer-events: none;
}

body.home-page .hero-hotspots-shell .bamboo-card-image {
    height: clamp(208px, 24vh, 260px);
}

body.home-page .hero-hotspots-shell .bamboo-card-content {
    margin-top: -26px;
    padding: 32px 22px 18px;
    background:
        linear-gradient(180deg, rgba(8, 35, 52, 0.04), rgba(6, 25, 38, 0.58) 28%, rgba(4, 18, 29, 0.82));
    border-top: 1px solid rgba(235, 247, 252, 0.08);
    box-shadow:
        0 -16px 30px rgba(4, 20, 31, 0.14),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(14px) saturate(124%);
    -webkit-backdrop-filter: blur(14px) saturate(124%);
}

body.home-page .hero-hotspots-shell .bamboo-card-title {
    color: rgba(242, 250, 253, 0.94);
    font-size: 1.03rem;
    letter-spacing: 0.02em;
}

body.home-page .hero-hotspots-shell .bamboo-card-tagline {
    color: rgba(204, 226, 236, 0.68);
    line-height: 1.62;
}

body.home-page .hero-hotspots-shell .bamboo-card-footer {
    border-top-color: rgba(214, 234, 244, 0.08);
}

body.home-page .hero-hotspots-shell .bamboo-card-price {
    color: rgba(218, 240, 249, 0.72);
    font-size: 0.8rem;
}

body.home-page .hero-hotspots-shell .bamboo-card-flow {
    color: rgba(184, 224, 236, 0.78);
}

/* 今日海域观察窗左右滚动箭头：用胶囊形玻璃按钮替代原版圆形箭头。
   左右分列卡片轨道两侧，半透明深海玻璃材质 + 微弱内发光，
   hover 时略微提亮边框和阴影，不抢夺卡片主视觉。 */
body.home-page .hero-hotspots-shell .scroll-arrow {
    position: absolute;
    z-index: 4;
    top: 50%;
    width: clamp(34px, 3vw, 46px);
    height: clamp(118px, 18vh, 166px);
    border-radius: 999px;
    transform: translateY(-50%);
    background:
        linear-gradient(180deg, rgba(232, 248, 254, 0.14), rgba(108, 174, 205, 0.05)),
        rgba(3, 22, 36, 0.26);
    border: 1px solid rgba(213, 239, 248, 0.12);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.1),
        0 16px 28px rgba(2, 15, 25, 0.18);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}

/* 左箭头靠左悬浮，右箭头靠右悬浮，各自留出呼吸边距 */
body.home-page .hero-hotspots-shell .scroll-arrow.left {
    left: clamp(4px, 1vw, 14px);
}

body.home-page .hero-hotspots-shell .scroll-arrow.right {
    right: clamp(4px, 1vw, 14px);
}

/* 在观察窗胶囊箭头中，原版 button-top/bottom/base 分层结构退化为透明占位，
   只靠箭头本身承载交互，避免旧版玻璃层叠干扰当前简洁外观。 */
body.home-page .hero-hotspots-shell

/* 箭头图标：比原版略大，颜色更亮，附带微弱的青光投影以融入深海氛围 */
body.home-page .hero-hotspots-shell .scroll-arrow-icon {
    width: 26px;
    height: 26px;
    stroke: rgba(224, 243, 250, 0.76);
    stroke-width: 1.8;
    filter: drop-shadow(0 0 10px rgba(144, 218, 239, 0.18));
}

/* hover 时箭头整体微微上浮，背景和边框同步提亮，给出可点击的呼吸感 */
body.home-page .hero-hotspots-shell .scroll-arrow:hover {
    transform: translateY(-50%) translate3d(0, -1px, 0);
    background:
        linear-gradient(180deg, rgba(232, 248, 254, 0.2), rgba(108, 174, 205, 0.08)),
        rgba(3, 22, 36, 0.34);
    border-color: rgba(220, 243, 251, 0.22);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.14),
        0 18px 34px rgba(2, 15, 25, 0.22),
        0 0 24px rgba(120, 204, 233, 0.1);
}

body.home-page .hero-hotspots-actions {
    width: min(100%, 1120px);
    margin: auto auto 0;
    padding-top: clamp(12px, 1.8vh, 20px);
    grid-template-columns: minmax(0, 0.86fr) minmax(0, 0.86fr);
    justify-content: center;
    gap: 12px;
}

/* 观察窗底部行动按钮区：用轻柔分隔线托起两个深海玻璃按钮。
   主按钮用更深的海蓝色调，次按钮用半透明磨砂玻璃，统一胶囊外形。 */
body.home-page .hero-hotspots-actions::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    width: min(100%, 640px);
    height: 1px;
    background: linear-gradient(90deg, rgba(185, 219, 235, 0), rgba(185, 219, 235, 0.2), rgba(185, 219, 235, 0));
    transform: translateX(-50%);
}

body.home-page .hero-hotspots-actions .sea-action {
    min-height: 44px;
    border-radius: 999px;
    border-color: rgba(218, 240, 249, 0.12);
    font-size: 0.9rem;
    letter-spacing: 0.04em;
    color: rgba(235, 248, 252, 0.9);
    background:
        linear-gradient(180deg, rgba(240, 250, 253, 0.08), rgba(117, 178, 205, 0.035)),
        rgba(6, 30, 46, 0.24);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.08),
        0 12px 24px rgba(3, 17, 28, 0.1);
}

/* 主行动按钮：更深、更亮的蓝调，作为视觉锚点 */
body.home-page .hero-hotspots-actions .sea-action-primary {
    background:
        linear-gradient(180deg, rgba(202, 238, 248, 0.12), rgba(78, 148, 180, 0.06)),
        rgba(7, 38, 58, 0.34);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.1),
        0 12px 24px rgba(3, 17, 28, 0.12),
        0 0 18px rgba(120, 204, 233, 0.06);
}

body.home-page .hero-hotspots-actions .sea-action:hover {
    transform: translate3d(0, -1px, 0);
    border-color: rgba(221, 242, 250, 0.2);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.12),
        0 16px 28px rgba(3, 17, 28, 0.16),
        0 0 22px rgba(120, 204, 233, 0.08);
}

@media (max-width: 1179px) {
    body.home-page .hero-hotspots-head {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas:
            "kicker"
            "copy"
            "hints";
        justify-items: start;
    }

    body.home-page .hero-observation-rail {
        justify-content: flex-start;
        max-width: none;
    }

    body.home-page .hero-bamboo-scroll-container {
        padding-inline: 40px;
    }
}

@media (max-width: 720px) {
    body.home-page .hero-hotspots-shell.today-sea-card {
        min-height: 0;
        padding: 22px 12px 18px;
        border-radius: 22px;
    }

    body.home-page .hero-hotspots-title {
        font-size: clamp(1.62rem, 8vw, 2.12rem);
    }

    body.home-page .hero-bamboo-scroll-container {
        padding-inline: 30px;
    }

    body.home-page .hero-bamboo-scroll-container::before {
        inset: 6px 28px 8px;
    }

    body.home-page .hero-hotspots-shell .scroll-arrow {
        width: 30px;
        height: 118px;
    }

    body.home-page .hero-hotspots-shell .bamboo-card {
        flex-basis: min(74vw, 304px);
        min-width: min(74vw, 304px);
    }

    body.home-page .hero-hotspots-shell .bamboo-card-image {
        height: 190px;
    }

    body.home-page .hero-hotspots-actions {
        grid-template-columns: minmax(0, 1fr);
        gap: 10px;
    }
}

/* 观察窗中心光带：不依赖 JS hover，也能让中间海域自然成为当前观察点。 */
body.home-page .hero-bamboo-cards-wrapper {
    position: relative;
    overflow: hidden;
    border-radius: clamp(18px, 1.8vw, 28px);
}

body.home-page .hero-bamboo-cards-wrapper::before {
    content: "";
    position: absolute;
    top: clamp(8px, 1vh, 14px);
    bottom: clamp(10px, 1.2vh, 18px);
    left: 50%;
    z-index: 2;
    width: clamp(280px, 25vw, 390px);
    border-radius: 28px;
    background:
        radial-gradient(ellipse at 50% 0%, rgba(224, 248, 255, 0.14), transparent 58%),
        linear-gradient(180deg, rgba(224, 248, 255, 0.04), rgba(224, 248, 255, 0));
    border-top: 1px solid rgba(220, 246, 253, 0.22);
    box-shadow: 0 0 36px rgba(126, 207, 235, 0.08);
    transform: translateX(-50%);
    pointer-events: none;
}

body.home-page .hero-bamboo-cards-wrapper::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 3;
    background: linear-gradient(90deg, rgba(4, 22, 35, 0.66), rgba(4, 22, 35, 0) 18%, rgba(4, 22, 35, 0) 82%, rgba(4, 22, 35, 0.68));
    pointer-events: none;
}

body.home-page .hero-hotspots-shell .bamboo-cards-content,
body.home-page .hero-hotspots-shell .bamboo-card,
body.home-page .hero-hotspots-shell .scroll-arrow {
    position: relative;
    z-index: 4;
}

@media (max-width: 720px) {
    body.home-page .hero-bamboo-cards-wrapper::before {
        width: min(72vw, 304px);
    }
}

/* 移动端观察窗收束：让海域切片靠近标题，避免首屏变成长面板。 */
@media (max-width: 720px) {
    body.home-page .hero-section {
        padding-top: 22px;
        padding-bottom: 22px;
    }

    body.home-page .hero-hotspots-shell.today-sea-card {
        max-height: none;
        padding: 20px 12px 16px;
    }

    body.home-page .hero-hotspots-head {
        margin-bottom: 12px;
    }

    body.home-page .hero-bamboo-scroll-container {
        flex: 0 0 auto;
        min-height: 360px;
    }

    body.home-page .hero-bamboo-cards-wrapper {
        align-items: flex-start;
        min-height: 344px;
        padding-top: 12px;
        padding-bottom: 10px;
    }

    body.home-page .hero-hotspots-shell .bamboo-card {
        flex-basis: min(72vw, 292px);
        min-width: min(72vw, 292px);
    }

    body.home-page .hero-hotspots-shell .bamboo-card-image {
        height: 176px;
    }

    body.home-page .hero-hotspots-shell .bamboo-card-content {
        margin-top: -24px;
        padding: 28px 18px 16px;
    }

    body.home-page .hero-hotspots-actions {
        margin-top: 8px;
    }
}

/* ============================================
   今日海域海流带重构
   这一层覆盖专门用来把首屏从“大玻璃面板 + 商品轮播”
   收回成更开阔的海面观察带。
   ============================================ */

/* 海流带模式下的英雄区容器：
   不再像原版那样铺满整屏，而是把高度收紧为"视口减去导航栏"，
   让首屏变成一段横向海面观察带，而不是一片全屏沉浸区。
   min-height: 100svh - nav-height 保证在导航固定不参与滚动的页面上，
   英雄区恰好填满剩余空间，既无留白也不溢出。 */
body.home-page .hero-section {
    /* 高度：填满视口减去顶部导航高度，让英雄区刚好一屏 */
    min-height: calc(100svh - var(--nav-height, 82px));
    /* 内边距用 clamp 做弹性呼吸：上下用 vh 单位，左右用 vw 单位，各自有最小/最大值 */
    padding: clamp(24px, 3.4vh, 42px) clamp(30px, 5vw, 72px) clamp(28px, 4vh, 48px);
    /* 垂直居中：让卡片内容在剩下的空间里上下居中 */
    align-items: center;
}

/* 英雄区内容宽度：用 min(100%, 1500px) 保证不超出视口，宽屏上限锁死在 1500px，
   避免海流带内容在超宽屏上被拉伸到视觉空旷。 */
body.home-page .hero-content {
    width: min(100%, 1500px);
    max-width: 1500px;
}

/* 舞台外壳在海流带模式下的宽度收紧：
   用 CSS 自定义属性 --hero-hotspots-stage-width 统一管理宽度，
   min(100%, 1360px) 在窄屏下填满，宽屏上限 1360px 维持内容密度。
   单独设 width + max-width 双重兜底，避免某些布局上下文中变量不生效。 */
body.home-page .hero-hotspots-stage-shell {
    --hero-hotspots-stage-width: min(100%, 1360px);
    width: var(--hero-hotspots-stage-width);
    max-width: min(100%, 1360px);
}

/* 今日海域卡片在海流带模式下彻底去玻璃化：
   把原来的玻璃面板（backdrop-filter、渐变背景、圆角、阴影）全部清掉，
   让卡片变成透明容器，内容直接浮在海面渐变背景上，制造"站在海边看海"的开阔感。
   overflow: visible 确保滚动箭头可以伸出卡片边界而不被裁切。 */
body.home-page .hero-hotspots-shell.today-sea-card {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    /* min-height: 视口高度减去导航和上下间距的估计值，保证卡片有足够纵向空间承载轮播 */
    min-height: clamp(500px, calc(100svh - 218px), 642px);
    padding: clamp(18px, 2.7vh, 32px) 0 clamp(10px, 2vh, 22px);
    overflow: visible;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none !important;  /* !important 覆盖原版玻璃卡的阴影，确保彻底清除 */
    animation: none;
    /* 清掉毛玻璃效果：这是去玻璃化的核心，让卡片不再有"水底面板"的质感 */
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

/* 卡片 ::before——海面渐变底层：
   三层渐变叠加制造"海平面远处深、中间有光、下方暗"的视觉深度。
   display: none 表示这个装饰层当前处于关闭状态，可能是布局调试/待启用。
   mask-image 两端透明渐变让渐变层只在卡片中间区域可见，两侧自然淡出。 */
body.home-page .hero-hotspots-shell.today-sea-card::before {
    content: "";
    position: absolute;
    /* inset 上下用 clamp 留出安全区，保证渐变层不会紧贴卡片边缘 */
    inset: clamp(76px, 10vh, 112px) 0 clamp(64px, 8vh, 88px);
    z-index: 0;
    border-radius: 0;
    /* 三层叠加渐变：
       第1层：横向暗→透→暗，营造左右两侧的深度消失在远处的感觉
       第2层：椭圆径向渐变，从顶部中心向下扩散一点暖光
       第3层：纵向渐变，从微亮到中灰到底部更暗，模拟海面纵向光衰减 */
    background:
        linear-gradient(90deg, rgba(2, 15, 27, 0.76), rgba(2, 15, 27, 0.12) 13%, rgba(2, 15, 27, 0) 46%, rgba(2, 15, 27, 0.12) 87%, rgba(2, 15, 27, 0.78)),
        radial-gradient(ellipse at 50% 0%, rgba(218, 245, 255, 0.16), rgba(218, 245, 255, 0) 54%),
        linear-gradient(180deg, rgba(228, 247, 255, 0.045), rgba(24, 72, 96, 0.08) 48%, rgba(4, 21, 34, 0.2));
    box-shadow: none;
    /* mask 让渐变层在左右两端渐隐，避免硬切边缘 */
    mask-image: linear-gradient(90deg, transparent 0%, #000 9%, #000 91%, transparent 100%);
    pointer-events: none;
    display: none;
}

/* 卡片 ::after——海面横线装饰：
   上下两条微弱边框 + 横向渐变光带 + 竖条纹阵列，模拟"海平线 + 水纹"的视觉语言。
   同样当前处于 display: none 关闭状态。 */
body.home-page .hero-hotspots-shell.today-sea-card::after {
    content: "";
    position: absolute;
    inset: clamp(92px, 12vh, 132px) clamp(16px, 4vw, 72px) clamp(76px, 10vh, 102px);
    z-index: 0;
    /* 上下两条微弱边框模拟海平线 */
    border-top: 1px solid rgba(203, 235, 247, 0.18);
    border-bottom: 1px solid rgba(127, 195, 221, 0.12);
    /* 两层背景叠加：第1层是横向渐变光带，第2层是 90px 周期的竖条纹（模拟水纹） */
    background:
        linear-gradient(90deg, transparent, rgba(220, 244, 252, 0.055), transparent),
        repeating-linear-gradient(90deg, rgba(216, 240, 249, 0.06) 0 1px, transparent 1px 90px);
    opacity: 0.7;
    mask-image: linear-gradient(90deg, transparent 0%, #000 12%, #000 88%, transparent 100%);
    pointer-events: none;
    display: none;
}

/* 海域信息头区：两列网格承载左侧标题信息 + 右侧观察条。
   左列纵向排列 kicker（标签）在上、copy（标题+副标题）在下，
   右列 hints 跨两行与左列底部齐平，形成"左侧读取、右侧速览"的空间叙事。 */
body.home-page .hero-hotspots-head {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
        "kicker hints"
        "copy hints";
    align-items: end;
    width: min(100%, 1180px);
    margin: 0 auto clamp(18px, 2.8vh, 30px);
    padding-inline: clamp(12px, 1.8vw, 24px);
    gap: 6px clamp(22px, 3vw, 46px);
    justify-items: stretch;
    text-align: left;
}

/* 左侧装饰竖线：一条从透明→微亮→透明的细线，夹在标题区左侧边缘，
   像海面上一道轻微的光痕，为阅读提供一个微弱的左边界支点。 */
body.home-page .hero-hotspots-head::before {
    content: "";
    position: absolute;
    left: clamp(12px, 1.8vw, 24px);
    top: 4px;
    bottom: 4px;
    width: 1px;
    background: linear-gradient(180deg, rgba(202, 235, 247, 0), rgba(202, 235, 247, 0.34), rgba(202, 235, 247, 0));
    opacity: 0.7;
}

/* 海域标签文字：小号大写字母，高字间距营造"仪器读数"的冷静质感，
   位于标题区最上方，作为海域信息的第一层视觉引导。 */
body.home-page .hero-hotspots-kicker {
    grid-area: kicker;
    margin: 0 0 0 16px;
    font-size: 0.64rem;
    line-height: 1;
    letter-spacing: 0.34em;
    text-transform: uppercase;
    color: rgba(207, 234, 244, 0.44);
}

/* 标题-副标题容器：用 grid 纵向堆放 title 和 subtitle，
   整体左对齐，让标题与副标题形成连续的纵向阅读流。 */
body.home-page .hero-hotspots-copy {
    grid-area: copy;
    display: grid;
    justify-items: start;
    gap: 7px;
    max-width: none;
    margin-left: 16px;
}

/* 海域标题：大号流体字号，极紧行高 + 微字间距营造"紧密但通透"的海报标题感。
   深色投影把文字从背景中托起，不透明度 0.96 让白字不要过于刺眼。 */
body.home-page .hero-hotspots-title {
    margin: 0;
    font-size: clamp(1.96rem, 2.6vw, 2.84rem);
    line-height: 1.04;
    letter-spacing: 0.08em;
    text-align: left;
    color: rgba(244, 251, 255, 0.96);
    text-shadow: 0 18px 42px rgba(2, 14, 24, 0.24);
}

/* 海域副标题/描述：30ch 字符宽度限制保证长文本自动换行后仍保持舒适阅读节奏，
   行高 1.62 适合中文段落阅读，颜色比标题更弱以形成信息层级。 */
body.home-page .hero-hotspots-subtitle {
    max-width: 30ch;
    margin: 0;
    font-size: clamp(0.9rem, 0.98vw, 1rem);
    line-height: 1.62;
    color: rgba(218, 237, 246, 0.66);
    text-align: left;
}

/* 观察条（hints 区域）：位于标题头区右侧，用 flex 横排承载多个 observation-chip。
   每个 chip 是一条海域实时小数据（如浪高、水温、能见度），
   flex-wrap: wrap 保证窄屏时自动换行不溢出。 */
body.home-page .hero-observation-rail {
    grid-area: hints;
    align-self: end;
    justify-self: end;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    width: auto;
    max-width: 360px;
    gap: 14px 18px;
    padding-bottom: 2px;
}

/* 观察数据芯片：每条海域实时指标的容器，左侧 18px 留给 ::before 光点，
   无背景无边框，全靠文字和前方光点构成"仪器读数的光学投影"感。 */
body.home-page .hero-observation-chip {
    position: relative;
    min-height: auto;
    padding: 0 0 0 18px;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    font-size: 0.72rem;
    line-height: 1.4;
    letter-spacing: 0.08em;
    color: rgba(205, 229, 239, 0.54);
}

/* 芯片前方光点：一个 7px 宽 1px 高的发光横条，位于芯片文字左侧。
   通过 border-radius: 999px 收成胶囊形，box-shadow 向外扩散微光，
   模拟深水仪器面板上一个小小的 LED 指示灯。 */
body.home-page .hero-observation-chip::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    width: 7px;
    height: 1px;
    border-radius: 999px;
    background: rgba(167, 224, 242, 0.58);
    box-shadow: 0 0 12px rgba(126, 207, 235, 0.22);
    transform: translateY(-50%);
}

/* 竹简滚动容器：承载整个卡片轮播轨道，高度用 42vh 流式控制。
   左右 padding 给滚动箭头留出入空间，overflow: visible 让箭头可以伸出轨道之外。 */
body.home-page .hero-bamboo-scroll-container {
    position: relative;
    z-index: 1;
    flex: 0 0 auto;
    width: 100%;
    height: clamp(330px, 42vh, 452px);
    min-height: 0;
    align-items: center;
    gap: 0;
    padding: 0 clamp(48px, 5vw, 82px);
    overflow: visible;
}

/* 竹简轨道背景氛围层：在卡片轨道后方布设三层叠加渐变，
   模拟"海底长廊"的纵深光感：左右暗角收束 → 顶部暖光椭圆 → 纵向光衰减，
   配合 mask-image 让氛围层在左右两端自然渐隐。 */
body.home-page .hero-bamboo-scroll-container::before {
    content: "";
    position: absolute;
    inset: 50% 0 auto;
    height: clamp(268px, 34vh, 372px);
    border: 0;
    border-radius: 0;
    background:
        linear-gradient(90deg, rgba(3, 18, 31, 0.72), rgba(3, 18, 31, 0) 14%, rgba(3, 18, 31, 0) 86%, rgba(3, 18, 31, 0.74)),
        radial-gradient(ellipse at 50% 10%, rgba(226, 248, 255, 0.12), rgba(226, 248, 255, 0) 56%),
        linear-gradient(180deg, rgba(229, 247, 254, 0.04), rgba(7, 30, 46, 0.12) 62%, rgba(3, 18, 31, 0.24));
    box-shadow: none;
    filter: none;
    transform: translateY(-50%);
    mask-image: linear-gradient(90deg, transparent 0%, #000 8%, #000 92%, transparent 100%);
    pointer-events: none;
}

/* 竹简卡片内轨：用 flex 横排放置 bamboo-card，overflow: hidden 裁剪溢出卡片以配合 JS 水平滚动。
   perspective: 1200px 为卡片 hover 时的 3D 微动效提供空间基准面，
   touch-action: pan-y 允许触摸屏上水平滑动浏览卡片。 */
body.home-page .hero-bamboo-cards-wrapper {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    align-self: stretch;
    min-height: 0;
    height: 100%;
    padding: 0;
    overflow: hidden;
    overscroll-behavior-y: auto;
    touch-action: pan-y;
    border-radius: 0;
    perspective: 1200px;
    perspective-origin: 50% 55%;
}

/* 竹简轨道中央光晕：一条居中的柔光柱，在卡片后方形成"长廊顶灯"般的氛围。
   椭圆径向渐变从顶部向下渐隐，配合半透明青白顶部边框模拟光线入射。 */
body.home-page .hero-bamboo-cards-wrapper::before {
    content: "";
    position: absolute;
    left: 50%;
    top: clamp(12px, 2vh, 24px);
    bottom: clamp(12px, 2vh, 24px);
    z-index: 2;
    width: clamp(320px, 29vw, 455px);
    border-radius: 24px;
    border-top: 1px solid rgba(219, 245, 253, 0.3);
    background:
        radial-gradient(ellipse at 50% 0%, rgba(226, 249, 255, 0.18), rgba(226, 249, 255, 0) 52%),
        linear-gradient(180deg, rgba(226, 249, 255, 0.035), rgba(226, 249, 255, 0));
    box-shadow: 0 0 42px rgba(126, 207, 235, 0.08);
    opacity: 0.88;
    transform: translateX(-50%);
    pointer-events: none;
}

/* 满图卡片布局：将卡片改为全幅图片 + 底部渐变文案浮层。
   图片填满卡片，文案区从底部渐显，让每张卡更像一张海域档案照片而非商品卡。
   左右边缘用渐变遮罩收束轨道，使卡片在滚动时自然隐入两侧海雾。 */
body.home-page .hero-bamboo-cards-wrapper::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 4;
    background: linear-gradient(90deg, rgba(2, 16, 28, 0.54), rgba(2, 16, 28, 0.03) 5%, rgba(2, 16, 28, 0) 50%, rgba(2, 16, 28, 0.03) 95%, rgba(2, 16, 28, 0.56));
    pointer-events: none;
}

/* 竹简卡片内容列：flex 横排承载 bamboo-card，用 gap 控制卡片间距。
   作为 bamboo-cards-wrapper 的直接子级，配合 JS 平移实现水平轮播。 */
body.home-page .hero-hotspots-shell .bamboo-cards-content {
    position: relative;
    z-index: 3;
    align-items: center;
    width: auto;
    min-height: 100%;
    gap: clamp(24px, 2.5vw, 36px);
    padding: 0;
}

/* 满图卡：图片全幅撑满卡片，底部叠加渐变文案区。
   默认低饱和偏暗，hover/active 时恢复饱和度和亮度，边框和阴影同步提亮。 */
body.home-page .hero-hotspots-shell .bamboo-card {
    --card-scale: 1;
    position: relative;
    flex: 0 0 clamp(330px, 27vw, 430px);
    min-width: clamp(330px, 27vw, 430px);
    height: clamp(286px, 35vh, 388px);
    overflow: hidden;
    border-radius: clamp(18px, 1.6vw, 24px);
    border: 1px solid rgba(222, 244, 252, 0.1);
    background: rgba(5, 24, 38, 0.34);
    box-shadow:
        0 22px 42px rgba(2, 14, 24, 0.24),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
    opacity: 0.7;
    filter: saturate(0.84) brightness(0.86);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    transform-origin: 50% 72%;
}

/* 满图卡表面微光层：模拟海面反射的扫光，从顶部和两侧微微透入 */
body.home-page .hero-hotspots-shell .bamboo-card::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    border-radius: inherit;
    background:
        linear-gradient(180deg, rgba(236, 249, 255, 0.12), rgba(236, 249, 255, 0) 26%),
        linear-gradient(90deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0) 18%, rgba(255, 255, 255, 0) 82%, rgba(255, 255, 255, 0.06));
    opacity: 0.62;
    pointer-events: none;
}

body.home-page .hero-hotspots-shell .bamboo-card:hover,
body.home-page .hero-hotspots-shell .bamboo-card.active {
    --card-scale: 1.018;
    opacity: 0.98;
    border-color: rgba(224, 247, 254, 0.24);
    filter: saturate(1) brightness(0.98);
    box-shadow:
        0 30px 60px rgba(2, 14, 24, 0.32),
        0 0 34px rgba(126, 207, 235, 0.12),
        inset 0 1px 0 rgba(255, 255, 255, 0.14);
}

/* 满图卡图片容器：绝对定位填满卡片，图片做轻微放大裁切。
   hover/active 时图片进一步放大并恢复饱和度，形成向前的沉浸感。 */
body.home-page .hero-hotspots-shell .bamboo-card-image-wrapper {
    position: absolute;
    inset: 0;
    overflow: hidden;
    border-radius: inherit;
}

/* 满图卡图片：覆盖整个卡片，初始微放大 1.035 做裁切构图，
   低饱和低亮让图片作为背景氛围而非抢眼的焦点。 */
body.home-page .hero-hotspots-shell .bamboo-card-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scale(1.035);
    filter: saturate(0.9) contrast(0.96) brightness(0.9);
}

/* 满图卡 hover/active 图片：进一步放大至 1.065 并恢复全饱和度，
   配合卡片本身亮度恢复，形成"靠近观察"的沉浸反馈。 */
body.home-page .hero-hotspots-shell .bamboo-card:hover .bamboo-card-image,
body.home-page .hero-hotspots-shell .bamboo-card.active .bamboo-card-image {
    transform: scale(1.065);
    filter: saturate(1) contrast(0.98) brightness(0.98);
}

/* 满图卡底部文案浮层：从透明渐变到深色，标题/副文案/价格在图片之上自然浮现。
   不依赖 backdrop-filter，靠纯渐变遮罩保证文字对比度。 */
body.home-page .hero-hotspots-shell .bamboo-card-content {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 3;
    margin: 0;
    padding: 82px clamp(18px, 2vw, 24px) clamp(17px, 2vw, 22px);
    border: 0;
    background:
        linear-gradient(180deg, rgba(2, 16, 28, 0), rgba(3, 19, 31, 0.6) 44%, rgba(2, 14, 24, 0.86) 100%);
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

/* 满图卡标题：白色高不透明度，1.22 紧行高保持标题紧凑感，
   在底部渐变文案区中作为最亮的第一层信息。 */
body.home-page .hero-hotspots-shell .bamboo-card-title {
    margin: 0 0 7px;
    font-size: clamp(1.02rem, 1.18vw, 1.22rem);
    line-height: 1.22;
    letter-spacing: 0.03em;
    color: rgba(246, 252, 255, 0.96);
}

/* 满图卡副文案：30ch 宽度限制 + 1.58 行高适合中文短句，
   颜色比标题弱一个层级，作为海域描述的补充信息。 */
body.home-page .hero-hotspots-shell .bamboo-card-tagline {
    max-width: 30ch;
    margin: 0;
    font-size: clamp(0.78rem, 0.82vw, 0.86rem);
    line-height: 1.58;
    color: rgba(211, 231, 240, 0.72);
}

/* 满图卡底部信息条：flex 横排承载价格和评分，左对齐排列，
   无顶部分割线，保持与上方文案的视觉连贯性。 */
body.home-page .hero-hotspots-shell .bamboo-card-footer {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 12px;
    margin-top: 12px;
    padding-top: 0;
    border-top: 0;
}

/* 满图卡价格与评分共享字号和字距，各自单独覆写颜色。 */
body.home-page .hero-hotspots-shell .bamboo-card-price,
body.home-page .hero-hotspots-shell .bamboo-card-flow {
    font-size: 0.7rem;
    line-height: 1.2;
    font-weight: 500;
    letter-spacing: 0.08em;
}

/* 满图卡价格：青白色，作为参考信息低调停留。 */
body.home-page .hero-hotspots-shell .bamboo-card-price {
    color: rgba(220, 239, 247, 0.62);
}

/* 满图卡水层标签：替代星级评分，回到潜水节奏语义。 */
body.home-page .hero-hotspots-shell .bamboo-card-flow {
    color: rgba(181, 224, 236, 0.74);
}

/* 满图卡竖条滚动箭头：用细长半透明条替代圆形按钮，悬浮在卡片轨道两侧。
   自身不渲染玻璃背景，只在 ::before 伪元素中画一条竖向渐亮光带，
   hover 时提亮光带并略微横向扩展，给出"向侧滑动"的轻提示。 */
body.home-page .hero-hotspots-shell .scroll-arrow {
    position: absolute;
    top: 50%;
    z-index: 6;
    width: clamp(30px, 3vw, 42px);
    height: clamp(236px, 32vh, 352px);
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    opacity: 0.72;
    animation: none;
    transform: translateY(-50%);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

/* 左箭头贴左侧，右箭头贴右侧，各留最小呼吸边距 */
body.home-page .hero-hotspots-shell .scroll-arrow.left {
    left: clamp(2px, 1.2vw, 16px);
}

body.home-page .hero-hotspots-shell .scroll-arrow.right {
    right: clamp(2px, 1.2vw, 16px);
}

/* 在竖条箭头中，button-top/bottom/base 三层退化为纯透明容器。
   button-bottom/base 完全隐藏，只靠 button-top::before 画出光带。 */
body.home-page .hero-hotspots-shell

/* 竖条箭头中 button-bottom 和 button-base 完全隐藏，仅保留空壳结构。 */
body.home-page .hero-hotspots-shell

/* 竖条光带：从上到下渐亮再渐隐，左侧箭头光带靠左、右侧箭头光带靠右 */
body.home-page .hero-hotspots-shell

/* 右侧箭头光带方向翻转，让光始终从卡片侧照入 */
body.home-page .hero-hotspots-shell

/* 隐藏原版 button-top::after 扫光，竖条箭头不需要额外的流光层 */
body.home-page .hero-hotspots-shell

/* 箭头 SVG 图标：稍小号，带微弱青色投影 */
body.home-page .hero-hotspots-shell .scroll-arrow-icon {
    width: 23px;
    height: 23px;
    stroke: currentColor;
    stroke-width: 1.65;
    filter: drop-shadow(0 0 10px rgba(126, 207, 235, 0.16));
}

/* hover 时箭头整体透明度升到 1，光带提亮并横向扩展，给出手势提示 */
body.home-page .hero-hotspots-shell .scroll-arrow:hover {
    opacity: 1;
    background: transparent;
    border: 0;
    box-shadow: none;
    transform: translateY(-50%);
}

body.home-page .hero-hotspots-shell .scroll-arrow:hover .button-top {
    transform: none;
}

body.home-page .hero-hotspots-shell

/* 满图卡底部行动按钮：改为 flex 横排右对齐，在卡片轨道下方形成轻量操作栏。
   不再使用网格双列布局，按钮靠右放置，给左侧留出海域信息呼吸空间。 */
body.home-page .hero-hotspots-actions {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: row;
    grid-template-columns: none;
    align-items: center;
    justify-content: flex-end;
    width: min(100%, 1180px);
    margin: clamp(14px, 2vh, 22px) auto 0;
    padding: 0 clamp(12px, 1.8vw, 24px);
    gap: clamp(18px, 2.2vw, 30px);
}

/* 行动栏顶部分割线：从左到右渐隐的微光细线，放在按钮后方作为视觉分隔。 */
body.home-page .hero-hotspots-actions::before {
    content: "";
    position: absolute;
    left: clamp(12px, 1.8vw, 24px);
    right: clamp(12px, 1.8vw, 24px);
    top: 50%;
    z-index: -1;
    width: auto;
    height: 1px;
    background: linear-gradient(90deg, rgba(172, 215, 232, 0.24), rgba(172, 215, 232, 0.05) 55%, rgba(172, 215, 232, 0));
    transform: none;
}

/* 行动按钮：无背景无边框的纯文字链接，min-height: 38px 保证最小触控区域。
   ::after 伪元素画一条小尾巴短线作为视觉引导。 */
body.home-page .hero-hotspots-actions .sea-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: auto;
    min-width: 0;
    min-height: 38px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    color: rgba(232, 247, 252, 0.8);
    font-size: 0.88rem;
    letter-spacing: 0.08em;
    text-shadow: 0 8px 18px rgba(2, 14, 24, 0.28);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

/* 按钮尾部的引导短线：30px 渐隐光带，hover 时延长至 42px 强化"继续前进"暗示。 */
body.home-page .hero-hotspots-actions .sea-action::after {
    content: "";
    display: block;
    width: 30px;
    height: 1px;
    margin-left: 12px;
    background: linear-gradient(90deg, rgba(173, 224, 241, 0.58), rgba(173, 224, 241, 0));
    transition: width 240ms ease, opacity 240ms ease;
}

/* 主/次按钮去除全局 sea-action 的背景和阴影残留。 */
body.home-page .hero-hotspots-actions .sea-action-primary,
body.home-page .hero-hotspots-actions .sea-action-secondary {
    background: transparent;
    box-shadow: none;
}

/* 次要按钮颜色更弱，形成主次视觉层级。 */
body.home-page .hero-hotspots-actions .sea-action-secondary {
    color: rgba(205, 229, 239, 0.62);
}

/* 按钮 hover：颜色提亮至接近纯白，translate3d 上浮 1px 给出轻微悬浮反馈。 */
body.home-page .hero-hotspots-actions .sea-action:hover {
    color: rgba(246, 252, 255, 0.94);
    border: 0;
    box-shadow: none;
    transform: translate3d(0, -1px, 0);
}

/* hover 时尾部引导线延长至 42px，强化点击欲望。 */
body.home-page .hero-hotspots-actions .sea-action:hover::after {
    width: 42px;
    opacity: 1;
}

/* 大屏 (>1600px)：放宽今日海域卡片的 max-width 到 1460px，
   让超宽屏上卡片不会过于局促。 */
@media (min-width: 1600px) {
    body.home-page .hero-hotspots-stage-shell {
        --hero-hotspots-stage-width: min(100%, 1460px);
        max-width: min(100%, 1460px);
    }
}

/* 中屏 (≤1179px)：今日海域头区从两列退化为单列堆叠，
   观察条从左下角开始排列，卡片高度取消最小限制。 */
@media (max-width: 1179px) {
    body.home-page .hero-section {
        align-items: flex-start;
        padding-top: clamp(26px, 4vh, 42px);
    }

    body.home-page .hero-hotspots-shell.today-sea-card {
        min-height: 0;
    }

    body.home-page .hero-hotspots-head {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas:
            "kicker"
            "copy"
            "hints";
        justify-items: start;
    }

    body.home-page .hero-observation-rail {
        justify-self: start;
        justify-content: flex-start;
        max-width: none;
        margin-left: 16px;
    }
}

/* 小屏 (≤720px)：今日海域整体收缩，stage-shell 宽度拉满，
   卡片尺寸大幅缩小，竹简卡片用 vw 单位自适应，滚动箭头贴边放置。 */
@media (max-width: 720px) {
    body.home-page .hero-section {
        min-height: auto;
        padding: clamp(72px, 10vh, 88px) 0 28px;
    }

    body.home-page .hero-hotspots-stage-shell {
        --hero-hotspots-stage-width: 100%;
        width: 100%;
        max-width: 100%;
    }

    body.home-page .hero-hotspots-shell.today-sea-card {
        padding: 18px 0 20px;
    }

    body.home-page .hero-hotspots-shell.today-sea-card::before {
        inset: 92px 0 54px;
        mask-image: linear-gradient(90deg, transparent 0%, #000 5%, #000 95%, transparent 100%);
    }

    body.home-page .hero-hotspots-shell.today-sea-card::after {
        inset: 110px 18px 72px;
        opacity: 0.5;
    }

    body.home-page .hero-hotspots-head {
        width: 100%;
        margin-bottom: 14px;
        padding-inline: 22px;
        gap: 6px;
    }

    body.home-page .hero-hotspots-title {
        font-size: clamp(1.68rem, 8.4vw, 2.14rem);
        letter-spacing: 0.07em;
    }

    body.home-page .hero-hotspots-subtitle {
        max-width: 23ch;
        font-size: 0.9rem;
        line-height: 1.56;
    }

    body.home-page .hero-observation-rail {
        gap: 8px 14px;
        margin-top: 6px;
    }

    body.home-page .hero-observation-chip {
        font-size: 0.68rem;
        letter-spacing: 0.04em;
    }

    body.home-page .hero-bamboo-scroll-container {
        height: 348px;
        padding-inline: 28px;
    }

    body.home-page .hero-bamboo-scroll-container::before {
        height: 286px;
        mask-image: linear-gradient(90deg, transparent 0%, #000 5%, #000 95%, transparent 100%);
    }

    body.home-page .hero-bamboo-cards-wrapper::before {
        top: 18px;
        bottom: 18px;
        width: min(76vw, 304px);
    }

    body.home-page .hero-bamboo-cards-wrapper::after {
        background: linear-gradient(90deg, rgba(2, 16, 28, 0.5), rgba(2, 16, 28, 0.02) 5%, rgba(2, 16, 28, 0) 50%, rgba(2, 16, 28, 0.02) 95%, rgba(2, 16, 28, 0.52));
    }

    body.home-page .hero-hotspots-shell .bamboo-cards-content {
        gap: 20px;
    }

    body.home-page .hero-hotspots-shell .bamboo-card {
        flex-basis: min(77vw, 304px);
        min-width: min(77vw, 304px);
        height: 300px;
        border-radius: 18px;
    }

    body.home-page .hero-hotspots-shell .bamboo-card-content {
        padding: 72px 18px 18px;
    }

    body.home-page .hero-hotspots-shell .bamboo-card-title {
        font-size: 1.02rem;
    }

    body.home-page .hero-hotspots-shell .bamboo-card-tagline {
        font-size: 0.78rem;
        line-height: 1.5;
    }

    body.home-page .hero-hotspots-shell .scroll-arrow {
        width: 28px;
        height: 278px;
    }

    body.home-page .hero-hotspots-shell .scroll-arrow.left {
        left: 0;
    }

    body.home-page .hero-hotspots-shell .scroll-arrow.right {
        right: 0;
    }

    body.home-page .hero-hotspots-actions {
        justify-content: flex-start;
        flex-direction: row;
        flex-wrap: wrap;
        width: 100%;
        margin-top: 10px;
        padding-inline: 22px;
        gap: 12px 22px;
    }

    body.home-page .hero-hotspots-actions::before {
        left: 22px;
        right: 22px;
    }

    body.home-page .hero-hotspots-actions .sea-action {
        min-height: 38px;
        font-size: 0.82rem;
        letter-spacing: 0.06em;
        box-shadow: none;
    }

    body.home-page .hero-hotspots-actions .sea-action::after {
        width: 22px;
        margin-left: 9px;
    }
}

/* ============================================
   今日海域观察窗最终收束
   清掉旧面板残影，把标题、光束和当前海域卡片重新对齐到中心。
   ============================================ */

body.home-page .hero-section {
    align-items: center;
}

body.home-page .hero-hotspots-stage-shell {
    margin-inline: auto;
}

body.home-page .hero-hotspots-shell.today-sea-card {
    isolation: isolate;
}

body.home-page .hero-hotspots-shell.today-sea-card::before,
body.home-page .hero-hotspots-shell.today-sea-card::after {
    content: none !important;
    display: none !important;
}

body.home-page .hero-hotspots-head {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
        "kicker"
        "copy"
        "hints";
    justify-items: center;
    width: min(100%, 760px);
    margin: 0 auto clamp(14px, 2.2vh, 24px);
    padding-inline: clamp(20px, 2.4vw, 34px);
    gap: 7px;
    text-align: center;
}

body.home-page .hero-hotspots-head::before {
    content: none;
    display: none;
}

body.home-page .hero-hotspots-kicker,
body.home-page .hero-hotspots-copy {
    margin-left: 0;
    justify-items: center;
}

body.home-page .hero-hotspots-title,
body.home-page .hero-hotspots-subtitle {
    text-align: center;
}

body.home-page .hero-hotspots-subtitle {
    max-width: 32ch;
}

body.home-page .hero-observation-rail {
    justify-self: center;
    justify-content: center;
    max-width: none;
    margin-left: 0;
    padding-bottom: 0;
}

body.home-page .hero-bamboo-scroll-container::before {
    inset: clamp(2px, 0.8vh, 10px) 0 clamp(8px, 1.8vh, 18px);
    height: auto;
    border-radius: 0;
    background:
        radial-gradient(ellipse at 50% 0%, rgba(244, 253, 255, 0.2), rgba(230, 249, 255, 0.075) 24%, rgba(230, 249, 255, 0) 56%),
        linear-gradient(90deg, rgba(5, 23, 37, 0), rgba(219, 244, 252, 0.018) 42%, rgba(219, 244, 252, 0.018) 58%, rgba(5, 23, 37, 0));
    box-shadow: none;
    opacity: 0.72;
    transform: none;
    mask-image:
        radial-gradient(ellipse at 50% 0%, #000 0%, #000 42%, transparent 72%),
        linear-gradient(90deg, transparent 0%, #000 22%, #000 78%, transparent 100%);
    mask-composite: intersect;
    -webkit-mask-image:
        radial-gradient(ellipse at 50% 0%, #000 0%, #000 42%, transparent 72%),
        linear-gradient(90deg, transparent 0%, #000 22%, #000 78%, transparent 100%);
    -webkit-mask-composite: source-in;
}

body.home-page .hero-bamboo-cards-wrapper::before {
    top: clamp(0px, 0.4vh, 6px);
    bottom: auto;
    width: clamp(300px, 31vw, 480px);
    height: clamp(70px, 10vh, 108px);
    border: 0;
    border-radius: 999px;
    background:
        radial-gradient(ellipse at 50% 0%, rgba(248, 254, 255, 0.3), rgba(225, 248, 255, 0.13) 30%, rgba(225, 248, 255, 0) 72%);
    box-shadow: 0 -14px 58px rgba(201, 239, 250, 0.1);
    opacity: 0.7;
}

/* 清掉旧版容器表面装饰（边缘渐变遮罩和竹简容器 ::before），
   避免与当前收紧后的卡片重叠产生视觉噪音。 */
body.home-page .hero-bamboo-cards-wrapper::after {
    content: none !important;
    display: none !important;
}

body.home-page .hero-bamboo-scroll-container::before {
    content: none !important;
    display: none !important;
}

/* 收紧卡片阴影：由上一版较重的投影改为更克制的一层，保持卡片在深色背景中的层次但不拖重 */
body.home-page .hero-hotspots-shell .bamboo-card {
    box-shadow:
        0 14px 26px rgba(2, 14, 24, 0.14),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

body.home-page .hero-hotspots-shell .bamboo-card:hover,
body.home-page .hero-hotspots-shell .bamboo-card.active {
    box-shadow:
        0 20px 36px rgba(2, 14, 24, 0.2),
        0 0 22px rgba(126, 207, 235, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.14);
}

/* 收窄滚动箭头，降低默认透明度，让它们更轻地漂浮在卡片两侧。
   光带收在中间一竖条，两端用 mask 渐隐，避免与卡片边缘硬切。 */
body.home-page .hero-hotspots-shell .scroll-arrow {
    width: clamp(18px, 1.8vw, 26px);
    opacity: 0.5;
}

body.home-page .hero-hotspots-shell .scroll-arrow.left {
    left: clamp(10px, 2.2vw, 30px);
}

body.home-page .hero-hotspots-shell .scroll-arrow.right {
    right: clamp(10px, 2.2vw, 30px);
}

body.home-page .hero-hotspots-shell

body.home-page .hero-hotspots-shell

body.home-page .hero-hotspots-shell .scroll-arrow-icon {
    width: 20px;
    height: 20px;
    opacity: 0.78;
}

body.home-page .hero-hotspots-shell .scroll-arrow:hover .scroll-arrow-icon {
    opacity: 1;
}

body.home-page .hero-hotspots-actions {
    justify-content: center;
    width: min(100%, 760px);
}

body.home-page .hero-hotspots-actions::before {
    left: clamp(20px, 2.4vw, 34px);
    right: clamp(20px, 2.4vw, 34px);
    background: linear-gradient(90deg, rgba(172, 215, 232, 0), rgba(172, 215, 232, 0.2), rgba(172, 215, 232, 0));
}

@media (max-width: 720px) {
    body.home-page .hero-section {
        align-items: flex-start;
    }

    body.home-page .hero-hotspots-head {
        width: 100%;
        padding-inline: 22px;
    }

    body.home-page .hero-bamboo-scroll-container::before {
        mask-image: linear-gradient(90deg, transparent 0%, #000 7%, #000 93%, transparent 100%);
    }

    body.home-page .hero-bamboo-cards-wrapper::before {
        width: min(78vw, 318px);
    }

    body.home-page .hero-hotspots-shell .scroll-arrow {
        width: 22px;
    }

    body.home-page .hero-hotspots-shell .scroll-arrow.left {
        left: 3px;
    }

    body.home-page .hero-hotspots-shell .scroll-arrow.right {
        right: 3px;
    }

    body.home-page .hero-hotspots-actions {
        justify-content: center;
        padding-inline: 22px;
    }
}

/* ============================================
   今日海域横向潜游完成层
   在现有 BambooScroll 上补足主卡层级、拖拽提示和首屏承接信息。
   ============================================ */

body.home-page .hero-section {
    padding-top: clamp(18px, 2.8vh, 34px);
    padding-bottom: clamp(22px, 3.2vh, 42px);
}

body.home-page .hero-hotspots-stage-shell {
    --hero-hotspots-stage-width: min(100%, 1420px);
    max-width: min(100%, 1420px);
}

body.home-page .hero-hotspots-shell.today-sea-card {
    min-height: clamp(650px, calc(100svh - 118px), 760px);
    padding: clamp(14px, 2vh, 24px) 0 clamp(14px, 2.4vh, 24px);
}

body.home-page .hero-hotspots-shell.today-sea-card::before {
    content: "" !important;
    display: block !important;
    position: absolute;
    left: 50%;
    top: clamp(92px, 13vh, 138px);
    z-index: 0;
    width: min(68vw, 880px);
    height: clamp(230px, 34vh, 360px);
    border-radius: 50%;
    background:
        radial-gradient(ellipse at 50% 8%, rgba(242, 253, 255, 0.34), rgba(170, 223, 239, 0.12) 30%, rgba(7, 37, 56, 0) 70%),
        linear-gradient(180deg, rgba(229, 248, 255, 0.08), rgba(229, 248, 255, 0));
    filter: blur(0.2px);
    opacity: 0.7;
    transform: translateX(-50%);
    pointer-events: none;
}

body.home-page .hero-hotspots-shell.today-sea-card::after {
    content: "" !important;
    display: block !important;
    position: absolute;
    left: 50%;
    top: clamp(134px, 18vh, 188px);
    z-index: 0;
    width: min(86vw, 1180px);
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(216, 242, 251, 0.34), transparent);
    box-shadow:
        0 42px 80px rgba(116, 203, 231, 0.08),
        0 110px 120px rgba(7, 28, 42, 0.22);
    opacity: 0.76;
    transform: translateX(-50%);
    pointer-events: none;
}

body.home-page .hero-hotspots-head {
    width: min(100%, 860px);
    margin-bottom: clamp(12px, 1.8vh, 20px);
}

body.home-page .hero-hotspots-head::after {
    content: "";
    display: block;
    width: min(280px, 42vw);
    height: 1px;
    margin-top: 7px;
    background: linear-gradient(90deg, transparent, rgba(214, 240, 249, 0.44), transparent);
    box-shadow: 0 0 18px rgba(142, 219, 242, 0.12);
}

body.home-page .hero-hotspots-kicker {
    letter-spacing: 0.42em;
    color: rgba(215, 239, 247, 0.5);
}

body.home-page .hero-hotspots-title {
    font-size: clamp(2.15rem, 2.7vw, 3.05rem);
    text-shadow:
        0 0 32px rgba(207, 238, 248, 0.16),
        0 18px 46px rgba(2, 14, 24, 0.38);
}

body.home-page .hero-hotspots-subtitle {
    color: rgba(224, 241, 248, 0.72);
}

body.home-page .hero-observation-rail {
    gap: 10px 20px;
    margin-top: 4px;
}

body.home-page .hero-observation-chip {
    color: rgba(214, 236, 245, 0.68);
}

body.home-page .hero-observation-chip::before {
    width: 14px;
    background: linear-gradient(90deg, rgba(174, 225, 242, 0), rgba(174, 225, 242, 0.82));
}

body.home-page .hero-bamboo-scroll-container {
    height: clamp(316px, 37vh, 408px);
    padding-inline: clamp(74px, 7.6vw, 126px);
}

body.home-page .hero-bamboo-cards-wrapper {
    perspective: 1500px;
    cursor: grab;
}

body.home-page .hero-bamboo-cards-wrapper.is-dragging {
    cursor: grabbing;
}

body.home-page .hero-bamboo-cards-wrapper::before {
    top: clamp(4px, 0.8vh, 12px);
    width: clamp(340px, 34vw, 520px);
    height: clamp(92px, 13vh, 126px);
    background:
        radial-gradient(ellipse at 50% 0%, rgba(248, 254, 255, 0.34), rgba(222, 248, 255, 0.18) 32%, rgba(222, 248, 255, 0) 72%),
        linear-gradient(180deg, rgba(229, 248, 255, 0.06), rgba(229, 248, 255, 0));
    box-shadow:
        0 -16px 70px rgba(198, 238, 250, 0.14),
        0 70px 110px rgba(88, 179, 209, 0.08);
    opacity: 0.92;
}

body.home-page .hero-hotspots-shell .bamboo-cards-content {
    gap: clamp(34px, 3.2vw, 50px);
}

body.home-page .hero-hotspots-shell .bamboo-card {
    --stage-scale: 0.78;
    --stage-y: 18px;
    --stage-rotate-y: 0deg;
    --stage-rotate-z: 0deg;
    --stage-opacity: 0.48;
    --stage-saturate: 0.62;
    --stage-brightness: 0.66;
    --stage-blur: 0.8px;
    --stage-depth-shadow: 0.18;
    --stage-z: 1;
    flex-basis: clamp(332px, 27vw, 436px);
    min-width: clamp(332px, 27vw, 436px);
    height: clamp(286px, 34vh, 386px);
    border-radius: 18px;
    border-color: rgba(222, 244, 252, 0.12);
    opacity: var(--stage-opacity);
    z-index: var(--stage-z);
    filter:
        saturate(var(--stage-saturate))
        brightness(var(--stage-brightness))
        blur(var(--stage-blur));
    box-shadow:
        0 22px 44px rgba(2, 14, 24, calc(var(--stage-depth-shadow) + 0.08)),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
    animation: none !important;
    transform:
        translate3d(
            calc(var(--elastic-x) + var(--wobble-x)),
            calc(var(--lift-y) + var(--wobble-y) + var(--gravity-y) + var(--stage-y)),
            0
        )
        rotate(calc(var(--wobble-r) + var(--tilt-r) + var(--stage-rotate-z)))
        rotateY(calc(var(--roll-y) + var(--stage-rotate-y)))
        scale(var(--card-scale))
        scale(var(--stage-scale));
    transition:
        opacity 420ms cubic-bezier(0.18, 0.8, 0.22, 1),
        filter 520ms cubic-bezier(0.18, 0.8, 0.22, 1),
        border-color 420ms ease,
        box-shadow 520ms ease;
}

body.home-page .hero-hotspots-shell .bamboo-card::before {
    background:
        linear-gradient(180deg, rgba(246, 253, 255, 0.16), rgba(246, 253, 255, 0) 28%),
        linear-gradient(95deg, rgba(255, 255, 255, 0.11), rgba(255, 255, 255, 0) 18%, rgba(255, 255, 255, 0) 82%, rgba(255, 255, 255, 0.08));
    opacity: 0.48;
}

body.home-page .hero-hotspots-shell .bamboo-card.is-prev,
body.home-page .hero-hotspots-shell .bamboo-card.is-next {
    border-color: rgba(190, 229, 242, 0.12);
}

body.home-page .hero-hotspots-shell .bamboo-card.is-active {
    --card-scale: 1;
    border-color: rgba(234, 250, 255, 0.38);
    box-shadow:
        0 34px 74px rgba(2, 14, 24, 0.38),
        0 0 0 1px rgba(226, 248, 255, 0.16),
        0 0 46px rgba(128, 211, 237, 0.16),
        inset 0 1px 0 rgba(255, 255, 255, 0.18);
}

body.home-page .hero-hotspots-shell .bamboo-card.is-active::before {
    opacity: 0.82;
}

body.home-page .hero-hotspots-shell .bamboo-card:hover {
    --card-scale: 1.012;
}

body.home-page .hero-hotspots-shell .bamboo-card:hover,
body.home-page .hero-hotspots-shell .bamboo-card.active,
body.home-page .hero-hotspots-shell .bamboo-card.is-active {
    opacity: var(--stage-opacity);
    filter:
        saturate(var(--stage-saturate))
        brightness(var(--stage-brightness))
        blur(var(--stage-blur));
}

body.home-page .hero-hotspots-shell .bamboo-card.active:not(.is-active),
body.home-page .hero-hotspots-shell .bamboo-card.active:not(.is-active):hover {
    --card-scale: 1.012;
    border-color: rgba(215, 243, 252, 0.2);
    box-shadow:
        0 24px 48px rgba(2, 14, 24, calc(var(--stage-depth-shadow) + 0.08)),
        0 0 26px rgba(126, 207, 235, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

body.home-page .hero-hotspots-shell .bamboo-card-image {
    transform: scale(1.045);
    filter: saturate(0.92) contrast(0.98) brightness(0.92);
}

body.home-page .hero-hotspots-shell .bamboo-card.is-active .bamboo-card-image,
body.home-page .hero-hotspots-shell .bamboo-card:hover .bamboo-card-image {
    transform: scale(1.075);
    filter: saturate(1.06) contrast(1) brightness(1);
}

body.home-page .hero-hotspots-shell .bamboo-card-content {
    padding: 96px clamp(20px, 2vw, 26px) clamp(18px, 2vw, 24px);
}

body.home-page .hero-hotspots-shell .bamboo-card-title {
    font-size: clamp(1.12rem, 1.28vw, 1.36rem);
    letter-spacing: 0.04em;
}

body.home-page .hero-hotspots-shell .bamboo-card-tagline {
    max-width: 29ch;
    color: rgba(218, 237, 246, 0.78);
}

body.home-page .hero-hotspots-shell .bamboo-card-footer {
    justify-content: space-between;
    margin-top: 14px;
}

body.home-page .hero-hotspots-shell .bamboo-card-badge {
    position: absolute;
    left: clamp(18px, 1.8vw, 24px);
    top: clamp(16px, 1.8vw, 22px);
    z-index: 4;
    padding: 6px 10px;
    border: 1px solid rgba(226, 248, 255, 0.18);
    border-radius: 999px;
    background: rgba(3, 18, 31, 0.38);
    color: rgba(234, 248, 253, 0.8);
    font-size: 0.66rem;
    line-height: 1;
    letter-spacing: 0.12em;
    opacity: 0;
    transform: translate3d(0, -6px, 0);
    transition: opacity 320ms ease, transform 320ms ease, border-color 320ms ease;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

body.home-page .hero-hotspots-shell .bamboo-card.is-active .bamboo-card-badge {
    opacity: 1;
    border-color: rgba(230, 249, 255, 0.32);
    transform: translate3d(0, 0, 0);
}

body.home-page .hero-hotspots-shell .bamboo-card-entry {
    position: absolute;
    right: clamp(18px, 1.8vw, 24px);
    bottom: clamp(18px, 1.8vw, 24px);
    z-index: 5;
    display: inline-flex;
    width: 42px;
    height: 42px;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(230, 249, 255, 0.2);
    border-radius: 50%;
    background:
        radial-gradient(circle at 42% 30%, rgba(239, 253, 255, 0.32), rgba(111, 199, 228, 0.08) 44%, rgba(4, 22, 36, 0.58) 100%);
    color: rgba(240, 251, 255, 0.86);
    opacity: 0;
    transform: translate3d(8px, 8px, 0) scale(0.88);
    transition: opacity 360ms ease, transform 360ms cubic-bezier(0.18, 0.8, 0.22, 1), box-shadow 360ms ease;
    box-shadow: 0 0 0 rgba(126, 207, 235, 0);
}

body.home-page .hero-hotspots-shell .bamboo-card-entry svg {
    width: 20px;
    height: 20px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

body.home-page .hero-hotspots-shell .bamboo-card.is-active .bamboo-card-entry,
body.home-page .hero-hotspots-shell .bamboo-card:hover .bamboo-card-entry {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
    box-shadow: 0 0 26px rgba(126, 207, 235, 0.16);
}

body.home-page .hero-bamboo-cards-wrapper.is-dragging .bamboo-card.is-active {
    box-shadow:
        0 28px 64px rgba(2, 14, 24, 0.34),
        0 0 36px rgba(128, 211, 237, 0.12),
        inset 0 1px 0 rgba(255, 255, 255, 0.16);
}

body.home-page .hero-bamboo-cards-wrapper.is-dragging .bamboo-card {
    transition:
        opacity 160ms ease,
        filter 160ms ease,
        border-color 160ms ease,
        box-shadow 160ms ease;
}

body.home-page .hero-bamboo-cards-wrapper.is-animating .bamboo-card.is-active {
    box-shadow:
        0 32px 70px rgba(2, 14, 24, 0.36),
        0 0 42px rgba(128, 211, 237, 0.14),
        inset 0 1px 0 rgba(255, 255, 255, 0.18);
}

/* 圆形玻璃滚动按钮：将胶囊/竖条箭头替换为等宽高的圆按钮。
   button-top 用径向渐变模拟深海玻璃珠的高光和进深，
   ::before 在外圈画一层雾状光环，::after 在内圈画一圈细描边。
   hover 时整体放大 1.04x，active 时收缩至 0.96x 给出按压反馈。 */
body.home-page .hero-hotspots-shell .scroll-arrow {
    width: clamp(48px, 4.2vw, 62px);
    height: clamp(48px, 4.2vw, 62px);
    opacity: 0.82;
    border-radius: 50%;
    transform: translateY(-50%);
    filter: drop-shadow(0 16px 30px rgba(2, 14, 24, 0.24));
}

body.home-page .hero-hotspots-shell .scroll-arrow.left {
    left: clamp(20px, 4.2vw, 56px);
}

body.home-page .hero-hotspots-shell .scroll-arrow.right {
    right: clamp(20px, 4.2vw, 56px);
}

/* 三层结构统一圆角，形成完整圆形按钮 */
body.home-page .hero-hotspots-shell

/* button-top：径向渐变模拟深海玻璃珠，从左上角高光到右下角深色 */
body.home-page .hero-hotspots-shell

/* ::before 外圈雾状光环：比按钮大一圈，用半透明径向渐变模拟光晕 */
body.home-page .hero-hotspots-shell

/* ::after 内圈细描边：在按钮内画一圈更轻的描边，增加玻璃层次 */
body.home-page .hero-hotspots-shell

body.home-page .hero-hotspots-shell .scroll-arrow:hover {
    opacity: 1;
    transform: translateY(-50%) scale(1.04);
}

body.home-page .hero-hotspots-shell .scroll-arrow:active {
    transform: translateY(-50%) scale(0.96);
}

body.home-page .hero-hotspots-shell

/* 箭头图标居中，稍小号以保证不溢出按钮内圈描边 */
body.home-page .hero-hotspots-shell .scroll-arrow-icon {
    width: 23px;
    height: 23px;
    opacity: 0.92;
    stroke-width: 1.8;
}

/* 今日海域底部信息承接层：在卡片轮播下方形成统一的海域档案摘要区。
   包含横向漂移提示线、三列信息面板（海域位置/潜水读数/探索进度），
   用柔光分隔线和轻量玻璃面板把卡片区和详情区自然过渡在一起。 */

/* 横向漂移提示：居中一行轻提示文字，左右用渐变短线装饰，引导横向滑动 */
body.home-page .today-sea-drift-hint {
    position: relative;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    width: min(100%, 820px);
    margin: clamp(4px, 0.8vh, 8px) auto clamp(10px, 1.4vh, 16px);
    padding-inline: clamp(24px, 3vw, 42px);
    color: rgba(219, 240, 248, 0.64);
    font-size: 0.74rem;
    line-height: 1.4;
    letter-spacing: 0.11em;
}

/* 提示文字右侧附加一条呼吸式短线，模拟海流方向 */
body.home-page .today-sea-drift-copy {
    position: relative;
    white-space: nowrap;
}

body.home-page .today-sea-drift-copy::after {
    content: "";
    display: inline-block;
    width: 22px;
    height: 1px;
    margin-left: 10px;
    vertical-align: middle;
    background: linear-gradient(90deg, rgba(164, 224, 242, 0.75), rgba(164, 224, 242, 0));
    animation: today-sea-hint-tide 2.8s ease-in-out infinite;
}

/* 提示文字左右两侧的渐隐分隔线 */
body.home-page .today-sea-drift-line {
    flex: 1;
    max-width: 180px;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(174, 224, 241, 0.24), transparent);
}

/* 三列海域信息面板：用网格布局承接海域位置、潜水读数和探索进度 */
body.home-page .today-sea-brief {
    --brief-progress: 93%;
    position: relative;
    z-index: 3;
    display: grid;
    grid-template-columns: minmax(250px, 1.05fr) minmax(330px, 1.22fr) minmax(250px, 0.95fr);
    gap: clamp(10px, 1.1vw, 14px);
    width: min(100%, 1060px);
    margin: 0 auto;
    padding-inline: clamp(20px, 2.4vw, 32px);
}

body.home-page .today-sea-brief-panel {
    position: relative;
    min-height: 104px;
    border: 1px solid rgba(219, 244, 252, 0.12);
    border-radius: 8px;
    background:
        linear-gradient(180deg, rgba(11, 39, 58, 0.52), rgba(3, 19, 32, 0.34)),
        radial-gradient(circle at 20% 0%, rgba(220, 248, 255, 0.12), rgba(220, 248, 255, 0) 58%);
    box-shadow:
        0 18px 34px rgba(2, 14, 24, 0.16),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(16px) saturate(128%);
    -webkit-backdrop-filter: blur(16px) saturate(128%);
    overflow: hidden;
}

body.home-page .today-sea-brief-panel::before {
    content: "";
    position: absolute;
    inset: 0;
    border-top: 1px solid rgba(238, 252, 255, 0.08);
    background: linear-gradient(90deg, rgba(246, 253, 255, 0.06), rgba(246, 253, 255, 0));
    pointer-events: none;
}

body.home-page .today-sea-brief-kicker {
    margin: 0;
    color: rgba(183, 222, 236, 0.62);
    font-size: 0.62rem;
    line-height: 1;
    letter-spacing: 0.22em;
    text-transform: uppercase;
}

body.home-page .today-sea-position-panel {
    display: grid;
    grid-template-columns: 76px minmax(0, 1fr);
    grid-template-areas:
        "kicker kicker"
        "map copy"
        "map link";
    gap: 8px 14px;
    padding: 16px 16px 14px;
}

body.home-page .today-sea-position-panel .today-sea-brief-kicker {
    grid-area: kicker;
}

body.home-page .today-sea-maplet {
    grid-area: map;
    position: relative;
    width: 72px;
    min-height: 62px;
    align-self: center;
    border: 1px solid rgba(219, 244, 252, 0.14);
    border-radius: 8px;
    background:
        radial-gradient(circle at 68% 36%, rgba(164, 225, 243, 0.28), rgba(164, 225, 243, 0) 18%),
        radial-gradient(circle at 28% 70%, rgba(239, 253, 255, 0.14), rgba(239, 253, 255, 0) 19%),
        linear-gradient(135deg, rgba(9, 44, 67, 0.54), rgba(2, 17, 30, 0.42));
    overflow: hidden;
}

body.home-page .today-sea-maplet-route {
    position: absolute;
    inset: 24px 10px auto;
    height: 1px;
    background: linear-gradient(90deg, rgba(201, 236, 247, 0), rgba(201, 236, 247, 0.62), rgba(201, 236, 247, 0));
    transform: rotate(-18deg);
}

body.home-page .today-sea-maplet-dot {
    position: absolute;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: rgba(217, 245, 253, 0.78);
    box-shadow: 0 0 14px rgba(126, 207, 235, 0.36);
}

body.home-page .today-sea-maplet-dot.is-origin {
    left: 16px;
    bottom: 15px;
    opacity: 0.42;
}

body.home-page .today-sea-maplet-dot.is-current {
    right: 17px;
    top: 19px;
}

body.home-page .today-sea-brief-copy {
    grid-area: copy;
    min-width: 0;
}

body.home-page .today-sea-brief-copy h3 {
    margin: 0 0 5px;
    color: rgba(246, 252, 255, 0.95);
    font-size: 1.04rem;
    line-height: 1.18;
    letter-spacing: 0.04em;
}

body.home-page .today-sea-brief-copy p,
body.home-page .today-sea-brief-copy span {
    display: block;
    margin: 0;
    color: rgba(210, 233, 242, 0.66);
    font-size: 0.74rem;
    line-height: 1.45;
}

body.home-page .today-sea-brief-link {
    grid-area: link;
    justify-self: start;
    min-height: 28px;
    padding: 0;
    border: 0;
    background: transparent;
    color: rgba(230, 249, 255, 0.78);
    font: inherit;
    font-size: 0.75rem;
    letter-spacing: 0.08em;
    cursor: pointer;
}

body.home-page .today-sea-brief-link::after {
    content: "";
    display: inline-block;
    width: 22px;
    height: 1px;
    margin-left: 9px;
    vertical-align: middle;
    background: linear-gradient(90deg, rgba(165, 224, 242, 0.7), rgba(165, 224, 242, 0));
    transition: width 220ms ease;
}

body.home-page .today-sea-brief-link:hover::after {
    width: 34px;
}

body.home-page .today-sea-data-panel {
    display: grid;
    align-content: start;
    gap: 14px;
    padding: 16px 18px 14px;
}

body.home-page .today-sea-data-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
    margin: 0;
}

body.home-page .today-sea-data-grid div {
    min-width: 0;
}

body.home-page .today-sea-data-grid dt {
    margin: 0 0 7px;
    color: rgba(183, 222, 236, 0.58);
    font-size: 0.64rem;
    letter-spacing: 0.12em;
}

body.home-page .today-sea-data-grid dd {
    margin: 0;
    color: rgba(245, 252, 255, 0.9);
    font-size: clamp(0.86rem, 0.9vw, 1rem);
    line-height: 1.2;
    white-space: nowrap;
}

body.home-page .today-sea-progress-panel {
    display: grid;
    grid-template-columns: 58px minmax(0, 1fr);
    grid-template-areas:
        "kicker kicker"
        "orbit copy";
    gap: 9px 14px;
    padding: 16px 16px 14px;
}

body.home-page .today-sea-progress-panel .today-sea-brief-kicker {
    grid-area: kicker;
}

body.home-page .today-sea-progress-orbit {
    grid-area: orbit;
    position: relative;
    width: 56px;
    height: 56px;
    align-self: center;
    border-radius: 50%;
    background:
        conic-gradient(rgba(181, 232, 246, 0.78) var(--brief-progress), rgba(77, 128, 150, 0.18) 0),
        radial-gradient(circle, rgba(5, 23, 37, 0.94) 56%, rgba(5, 23, 37, 0) 57%);
    box-shadow: inset 0 0 0 1px rgba(229, 248, 255, 0.12), 0 0 24px rgba(126, 207, 235, 0.08);
}

body.home-page .today-sea-progress-orbit span {
    position: absolute;
    inset: 12px;
    border-radius: 50%;
    border: 1px solid rgba(229, 248, 255, 0.12);
    background: rgba(3, 18, 31, 0.34);
}

body.home-page .today-sea-progress-copy {
    grid-area: copy;
    min-width: 0;
}

body.home-page .today-sea-progress-copy strong {
    display: block;
    margin-bottom: 5px;
    color: rgba(246, 252, 255, 0.94);
    font-size: 1.1rem;
    line-height: 1.1;
    letter-spacing: 0.04em;
}

body.home-page .today-sea-progress-copy span {
    display: block;
    margin-bottom: 6px;
    color: rgba(214, 236, 245, 0.68);
    font-size: 0.74rem;
    line-height: 1.3;
}

body.home-page .today-sea-progress-copy p {
    margin: 0;
    color: rgba(204, 229, 239, 0.62);
    font-size: 0.72rem;
    line-height: 1.5;
}

body.home-page .hero-hotspots-actions {
    width: min(100%, 1060px);
    margin-top: clamp(10px, 1.4vh, 16px);
}

@keyframes today-sea-hint-tide {
    0%,
    100% {
        opacity: 0.38;
        transform: translateX(0);
    }

    50% {
        opacity: 0.9;
        transform: translateX(5px);
    }
}

@media (max-height: 840px) and (min-width: 960px) {
    body.home-page .hero-hotspots-shell.today-sea-card {
        min-height: clamp(606px, calc(100svh - 104px), 690px);
    }

    body.home-page .hero-bamboo-scroll-container {
        height: clamp(286px, 33vh, 350px);
    }

    body.home-page .today-sea-brief-panel {
        min-height: 92px;
    }

    body.home-page .today-sea-progress-copy p {
        display: none;
    }
}

@media (max-width: 1180px) {
    body.home-page .today-sea-brief {
        grid-template-columns: 1fr 1fr;
    }

    body.home-page .today-sea-progress-panel {
        grid-column: 1 / -1;
    }
}

@media (max-width: 720px) {
    body.home-page .hero-hotspots-shell.today-sea-card {
        min-height: 0;
    }

    body.home-page .hero-bamboo-scroll-container {
        height: 336px;
        padding-inline: 46px;
    }

    body.home-page .hero-hotspots-shell .bamboo-card {
        flex-basis: min(76vw, 312px);
        min-width: min(76vw, 312px);
        height: 292px;
    }

    /* 移动端进一步缩小圆形滚动箭头至 40px，贴近卡片边缘 */
    body.home-page .hero-hotspots-shell .scroll-arrow {
        width: 40px;
        height: 40px;
    }

    body.home-page .hero-hotspots-shell .scroll-arrow.left {
        left: 4px;
    }

    body.home-page .hero-hotspots-shell .scroll-arrow.right {
        right: 4px;
    }

    body.home-page .today-sea-drift-hint {
        padding-inline: 20px;
        font-size: 0.68rem;
        letter-spacing: 0.06em;
    }

    body.home-page .today-sea-drift-line {
        max-width: 72px;
    }

    body.home-page .today-sea-brief {
        grid-template-columns: 1fr;
        padding-inline: 20px;
    }

    body.home-page .today-sea-data-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* ============================================
   今日海域反馈收束层
   根据展示反馈补回旧版顶部柔光柱，并把底部信息层做完整。
   ============================================ */

body.home-page .hero-section {
    min-height: max(940px, calc(100svh - var(--nav-height, 82px)));
    padding-top: clamp(30px, 4vh, 54px);
    padding-bottom: clamp(40px, 5vh, 70px);
    align-items: flex-start;
}

body.home-page .hero-content {
    width: min(100%, 1540px);
    max-width: 1540px;
}

body.home-page .hero-ocean-glow-one {
    inset: -12% auto auto 50%;
    width: min(76vw, 1160px);
    height: min(76vw, 1160px);
    min-width: 680px;
    min-height: 680px;
    background:
        radial-gradient(circle, rgba(255, 255, 255, 0.2) 0%, rgba(205, 235, 247, 0.13) 27%, rgba(205, 235, 247, 0) 67%);
    filter: blur(14px);
    transform: translate3d(-50%, -12%, 0) scale(0.92);
}

body.home-page .hero-ocean-wave-two {
    inset: 5% -10% auto -10%;
    height: 46%;
    background:
        radial-gradient(circle at 50% 34%, rgba(255, 255, 255, 0.14) 0%, rgba(255, 255, 255, 0) 52%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0));
    filter: blur(12px);
}

body.home-page .hero-hotspots-stage-shell {
    --hero-hotspots-stage-width: min(100%, 1460px);
    max-width: min(100%, 1460px);
}

body.home-page .hero-hotspots-shell.today-sea-card {
    min-height: clamp(790px, calc(100svh - 72px), 940px);
    padding: clamp(18px, 2.5vh, 32px) 0 clamp(26px, 3.6vh, 44px);
}

body.home-page .hero-hotspots-shell.today-sea-card::before {
    content: "" !important;
    display: block !important;
    position: absolute;
    left: 50%;
    top: clamp(-160px, -13vh, -92px);
    z-index: 0;
    width: min(96vw, 1500px);
    height: clamp(560px, 62vh, 720px);
    border-radius: 50%;
    background:
        radial-gradient(ellipse at 50% 8%, rgba(249, 254, 255, 0.32), rgba(215, 242, 250, 0.17) 26%, rgba(151, 211, 231, 0.065) 52%, rgba(151, 211, 231, 0) 74%),
        linear-gradient(180deg, rgba(239, 252, 255, 0.12), rgba(239, 252, 255, 0) 72%);
    opacity: 0.76;
    transform: translateX(-50%);
    pointer-events: none;
}

body.home-page .hero-hotspots-shell.today-sea-card::after {
    content: "" !important;
    display: block !important;
    position: absolute;
    left: 50%;
    top: clamp(150px, 19vh, 220px);
    z-index: 0;
    width: min(88vw, 1300px);
    height: clamp(300px, 34vh, 420px);
    border-radius: 50%;
    background:
        radial-gradient(ellipse at 50% 8%, rgba(220, 248, 255, 0.2), rgba(155, 215, 235, 0.07) 43%, rgba(5, 25, 40, 0) 73%);
    opacity: 0.62;
    transform: translateX(-50%);
    pointer-events: none;
}

body.home-page .hero-hotspots-head {
    width: min(100%, 820px);
    margin-bottom: clamp(16px, 2.4vh, 28px);
}

body.home-page .hero-hotspots-title {
    font-size: clamp(2.34rem, 3vw, 3.45rem);
}

body.home-page .hero-bamboo-scroll-container {
    height: clamp(350px, 39vh, 448px);
    padding-inline: clamp(78px, 7vw, 128px);
}

body.home-page .hero-bamboo-cards-wrapper::before {
    top: clamp(2px, 0.6vh, 10px);
    width: clamp(360px, 35vw, 560px);
    height: clamp(96px, 12vh, 138px);
    background:
        radial-gradient(ellipse at 50% 0%, rgba(250, 254, 255, 0.34), rgba(229, 249, 255, 0.14) 32%, rgba(229, 249, 255, 0) 74%);
    box-shadow:
        0 -18px 70px rgba(203, 240, 250, 0.11),
        0 62px 120px rgba(98, 190, 220, 0.08);
    opacity: 0.82;
}

body.home-page .today-sea-drift-hint {
    margin: clamp(8px, 1vh, 14px) auto clamp(14px, 1.9vh, 22px);
}

body.home-page .today-sea-brief {
    --brief-progress: 93%;
    grid-template-columns: minmax(300px, 1fr) minmax(500px, 1.55fr) minmax(292px, 0.92fr);
    gap: clamp(16px, 1.6vw, 22px);
    width: min(100%, 1260px);
    padding-inline: clamp(22px, 2.4vw, 34px);
}

body.home-page .today-sea-brief-panel {
    min-height: 154px;
    border-color: rgba(220, 246, 254, 0.14);
    background:
        linear-gradient(180deg, rgba(14, 48, 69, 0.58), rgba(4, 24, 38, 0.42)),
        radial-gradient(circle at 22% 0%, rgba(224, 249, 255, 0.13), rgba(224, 249, 255, 0) 62%);
    box-shadow:
        0 22px 42px rgba(2, 14, 24, 0.18),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

body.home-page .today-sea-brief-kicker {
    font-size: 0.66rem;
    letter-spacing: 0.28em;
}

body.home-page .today-sea-position-panel {
    grid-template-columns: 112px minmax(0, 1fr);
    gap: 12px 20px;
    padding: 24px 26px 22px;
}

body.home-page .today-sea-maplet {
    width: 106px;
    min-height: 92px;
    border-color: rgba(221, 247, 255, 0.16);
    background:
        radial-gradient(circle at 70% 33%, rgba(173, 235, 249, 0.24), rgba(173, 235, 249, 0) 20%),
        radial-gradient(circle at 28% 72%, rgba(239, 253, 255, 0.16), rgba(239, 253, 255, 0) 22%),
        linear-gradient(135deg, rgba(11, 49, 72, 0.62), rgba(3, 20, 34, 0.48));
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.08),
        0 16px 28px rgba(2, 14, 24, 0.14);
}

body.home-page .today-sea-maplet-grid,
body.home-page .today-sea-maplet-wake,
body.home-page .today-sea-maplet-ring {
    position: absolute;
    pointer-events: none;
}

body.home-page .today-sea-maplet-grid {
    inset: 0;
    background:
        linear-gradient(90deg, rgba(214, 243, 252, 0.05) 1px, transparent 1px),
        linear-gradient(180deg, rgba(214, 243, 252, 0.04) 1px, transparent 1px);
    background-size: 26px 26px;
    opacity: 0.28;
}

body.home-page .today-sea-maplet-wake {
    left: 18px;
    right: 18px;
    bottom: 18px;
    height: 26px;
    border-radius: 50%;
    background: radial-gradient(ellipse at 50% 100%, rgba(159, 225, 244, 0.18), rgba(159, 225, 244, 0));
    filter: blur(1px);
}

body.home-page .today-sea-maplet-route {
    left: 20px;
    right: 19px;
    top: 50px;
    inset: 50px 19px auto 20px;
    height: 2px;
    background: linear-gradient(90deg, rgba(201, 236, 247, 0), rgba(219, 248, 255, 0.72), rgba(201, 236, 247, 0));
    transform: rotate(-20deg);
}

body.home-page .today-sea-maplet-ring {
    right: 21px;
    top: 24px;
    width: 28px;
    height: 28px;
    border: 1px solid rgba(211, 244, 253, 0.16);
    border-radius: 50%;
    box-shadow: 0 0 18px rgba(126, 207, 235, 0.14);
}

body.home-page .today-sea-maplet-dot {
    width: 10px;
    height: 10px;
}

body.home-page .today-sea-maplet-dot.is-origin {
    left: 26px;
    bottom: 24px;
}

body.home-page .today-sea-maplet-dot.is-current {
    right: 28px;
    top: 33px;
}

body.home-page .today-sea-brief-copy h3 {
    margin-bottom: 8px;
    font-size: clamp(1.24rem, 1.28vw, 1.48rem);
}

body.home-page .today-sea-brief-copy p,
body.home-page .today-sea-brief-copy span {
    font-size: clamp(0.82rem, 0.86vw, 0.92rem);
}

body.home-page .today-sea-brief-link {
    font-size: 0.86rem;
    min-height: 32px;
}

body.home-page .today-sea-data-panel {
    gap: 18px;
    padding: 24px 26px 22px;
}

body.home-page .today-sea-data-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0;
    min-height: 86px;
}

body.home-page .today-sea-data-item {
    position: relative;
    min-width: 0;
    padding: 2px clamp(8px, 0.9vw, 14px) 0;
}

body.home-page .today-sea-data-item + .today-sea-data-item::before {
    content: "";
    position: absolute;
    left: 0;
    top: 8px;
    bottom: 6px;
    width: 1px;
    background: linear-gradient(180deg, transparent, rgba(203, 235, 247, 0.16), transparent);
}

body.home-page .today-sea-data-grid dt {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 14px;
    font-size: 0.72rem;
    letter-spacing: 0.13em;
    white-space: nowrap;
}

body.home-page .today-sea-data-icon {
    position: relative;
    display: inline-flex;
    width: 28px;
    height: 28px;
    flex: 0 0 28px;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(131, 221, 236, 0.2), rgba(27, 83, 105, 0.28));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 0 16px rgba(126, 207, 235, 0.1);
}

body.home-page .today-sea-data-icon::before,
body.home-page .today-sea-data-icon::after {
    content: "";
    position: absolute;
    border-color: rgba(214, 247, 255, 0.76);
}

body.home-page .today-sea-data-item.is-temp .today-sea-data-icon::before {
    width: 5px;
    height: 14px;
    border: 2px solid rgba(214, 247, 255, 0.7);
    border-bottom: 0;
    border-radius: 999px 999px 0 0;
    top: 6px;
}

body.home-page .today-sea-data-item.is-temp .today-sea-data-icon::after {
    width: 10px;
    height: 10px;
    bottom: 5px;
    border-radius: 50%;
    background: rgba(126, 229, 239, 0.62);
}

body.home-page .today-sea-data-item.is-current .today-sea-data-icon::before {
    width: 17px;
    height: 10px;
    border-top: 2px solid rgba(214, 247, 255, 0.72);
    border-bottom: 2px solid rgba(214, 247, 255, 0.48);
    border-radius: 50%;
    transform: rotate(-4deg);
}

body.home-page .today-sea-data-item.is-current .today-sea-data-icon::after {
    width: 17px;
    height: 1px;
    background: rgba(214, 247, 255, 0.62);
    transform: translateY(1px) rotate(-4deg);
}

body.home-page .today-sea-data-item.is-tide .today-sea-data-icon::before {
    width: 16px;
    height: 16px;
    border: 2px solid rgba(214, 247, 255, 0.62);
    border-radius: 50%;
}

body.home-page .today-sea-data-item.is-tide .today-sea-data-icon::after {
    width: 7px;
    height: 7px;
    border-left: 2px solid rgba(214, 247, 255, 0.72);
    border-bottom: 2px solid rgba(214, 247, 255, 0.72);
    transform: translate(2px, -1px);
}

body.home-page .today-sea-data-item.is-visibility .today-sea-data-icon::before {
    width: 18px;
    height: 11px;
    border: 2px solid rgba(214, 247, 255, 0.62);
    border-radius: 50% 50% 48% 48%;
}

body.home-page .today-sea-data-item.is-visibility .today-sea-data-icon::after {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: rgba(126, 229, 239, 0.62);
}

body.home-page .today-sea-data-grid dd {
    font-size: clamp(1rem, 1.08vw, 1.24rem);
    line-height: 1.28;
    white-space: normal;
}

body.home-page .today-sea-progress-panel {
    grid-template-columns: 82px minmax(0, 1fr);
    gap: 12px 20px;
    padding: 24px 26px 22px;
}

body.home-page .today-sea-progress-orbit {
    width: 76px;
    height: 76px;
    box-shadow:
        inset 0 0 0 1px rgba(229, 248, 255, 0.13),
        0 0 30px rgba(126, 207, 235, 0.1);
}

body.home-page .today-sea-progress-orbit span {
    inset: 15px;
}

body.home-page .today-sea-progress-copy strong {
    margin-bottom: 8px;
    font-size: clamp(1.24rem, 1.36vw, 1.58rem);
}

body.home-page .today-sea-progress-copy span {
    margin-bottom: 8px;
    font-size: 0.88rem;
}

body.home-page .today-sea-progress-copy p {
    display: block;
    font-size: 0.78rem;
    line-height: 1.58;
}

body.home-page .today-sea-actions.hero-hotspots-actions {
    display: none !important;
}

@media (max-height: 840px) and (min-width: 960px) {
    body.home-page .hero-section {
        min-height: 910px;
        padding-top: 28px;
        padding-bottom: 44px;
    }

    body.home-page .hero-hotspots-shell.today-sea-card {
        min-height: 790px;
    }

    body.home-page .hero-bamboo-scroll-container {
        height: 352px;
    }

    body.home-page .today-sea-brief-panel {
        min-height: 146px;
    }

    body.home-page .today-sea-progress-copy p {
        display: block;
    }
}

@media (max-width: 1180px) {
    body.home-page .today-sea-brief {
        grid-template-columns: 1fr 1fr;
        width: min(100%, 980px);
    }

    body.home-page .today-sea-progress-panel {
        grid-column: 1 / -1;
    }
}

/* ============================================
   今日海域光束与首屏可读性二次收束
   把大面积白雾压回纵向水下光束，并让宽屏低高度视口完整看到承接层。
   ============================================ */

body.home-page .hero-section {
    min-height: max(860px, calc(100svh - var(--nav-height, 82px)));
    padding-top: clamp(20px, 2.6vh, 38px);
    padding-bottom: clamp(22px, 3vh, 44px);
    background:
        radial-gradient(ellipse at 50% 34%, rgba(75, 158, 190, 0.18), rgba(7, 28, 43, 0) 43%),
        linear-gradient(180deg, #061a29 0%, #09263d 38%, #0f4665 72%, #2d7b9c 100%);
    box-shadow:
        inset 18vw 0 22vw rgba(1, 10, 20, 0.42),
        inset -18vw 0 22vw rgba(1, 10, 20, 0.42),
        inset 0 16vh 16vh rgba(1, 12, 23, 0.28);
}

body.home-page .hero-section::before {
    background:
        linear-gradient(90deg, rgba(1, 10, 20, 0.62), rgba(1, 10, 20, 0.12) 18%, rgba(1, 10, 20, 0) 50%, rgba(1, 10, 20, 0.12) 82%, rgba(1, 10, 20, 0.62)),
        radial-gradient(ellipse at 50% 7%, rgba(235, 252, 255, 0.12), rgba(171, 222, 238, 0.055) 28%, rgba(171, 222, 238, 0) 52%),
        linear-gradient(180deg, rgba(232, 251, 255, 0.055), rgba(232, 251, 255, 0) 40%);
    opacity: 1;
    filter: none;
}

body.home-page .hero-section::after {
    bottom: -72px;
    height: 132px;
    background: linear-gradient(180deg, rgba(8, 44, 64, 0), rgba(23, 85, 112, 0.36) 52%, rgba(80, 156, 182, 0.42) 100%);
    filter: blur(24px);
    opacity: 0.72;
}

body.home-page .hero-ocean-glow-one {
    inset: -14% auto auto 50%;
    width: min(42vw, 780px);
    height: clamp(560px, 62vh, 760px);
    min-width: 480px;
    min-height: 560px;
    background:
        radial-gradient(ellipse at 50% 0%, rgba(252, 255, 255, 0.16), rgba(198, 233, 245, 0.075) 28%, rgba(198, 233, 245, 0) 64%),
        linear-gradient(90deg, rgba(218, 246, 255, 0), rgba(218, 246, 255, 0.045) 48%, rgba(218, 246, 255, 0));
    filter: blur(8px);
    transform: translate3d(-50%, -8%, 0) scale(0.96);
}

body.home-page.hero-awakened .hero-ocean-glow-one {
    opacity: 0.58;
}

body.home-page.hero-awakened .hero-ocean-wave-two {
    opacity: 0.42;
}

body.home-page .hero-hotspots-shell.today-sea-card {
    min-height: clamp(760px, calc(100svh - 82px), 900px);
    padding-top: clamp(10px, 1.6vh, 24px);
    padding-bottom: clamp(18px, 2.4vh, 34px);
}

body.home-page .hero-hotspots-shell.today-sea-card::before {
    top: clamp(-104px, -10vh, -56px);
    width: min(48vw, 780px);
    height: clamp(440px, 54vh, 620px);
    border-radius: 44% 44% 50% 50%;
    background:
        radial-gradient(ellipse at 50% 0%, rgba(247, 254, 255, 0.18), rgba(189, 230, 243, 0.085) 30%, rgba(125, 197, 220, 0.032) 54%, rgba(125, 197, 220, 0) 72%),
        linear-gradient(90deg, rgba(229, 250, 255, 0), rgba(229, 250, 255, 0.05) 45%, rgba(229, 250, 255, 0.05) 55%, rgba(229, 250, 255, 0));
    opacity: 0.52;
    filter: blur(1px);
}

body.home-page .hero-hotspots-shell.today-sea-card::after {
    top: clamp(214px, 28vh, 286px);
    width: min(46vw, 680px);
    height: clamp(130px, 16vh, 190px);
    background: radial-gradient(ellipse at 50% 50%, rgba(129, 210, 235, 0.18), rgba(29, 107, 137, 0.06) 42%, rgba(5, 25, 40, 0) 74%);
    opacity: 0.44;
    filter: blur(3px);
}

body.home-page .hero-hotspots-head {
    margin-bottom: clamp(8px, 1.2vh, 18px);
}

body.home-page .hero-hotspots-kicker {
    color: rgba(222, 243, 250, 0.62);
}

body.home-page .hero-hotspots-title {
    color: rgba(247, 253, 255, 0.98);
    text-shadow:
        0 0 18px rgba(211, 240, 249, 0.12),
        0 18px 46px rgba(1, 10, 20, 0.5);
}

body.home-page .hero-hotspots-subtitle,
body.home-page .hero-observation-chip {
    color: rgba(225, 243, 249, 0.76);
}

body.home-page .hero-bamboo-scroll-container {
    height: clamp(326px, 36vh, 414px);
}

body.home-page .hero-bamboo-cards-wrapper::before {
    width: clamp(300px, 28vw, 460px);
    height: clamp(72px, 9vh, 108px);
    background: radial-gradient(ellipse at 50% 0%, rgba(245, 254, 255, 0.22), rgba(190, 234, 248, 0.08) 34%, rgba(190, 234, 248, 0) 74%);
    opacity: 0.5;
}

body.home-page .hero-hotspots-shell .bamboo-card {
    border-color: rgba(220, 246, 254, 0.16);
    box-shadow:
        0 22px 48px rgba(1, 10, 20, calc(var(--stage-depth-shadow) + 0.12)),
        inset 0 1px 0 rgba(255, 255, 255, 0.11);
}

body.home-page .hero-hotspots-shell .bamboo-card.is-prev,
body.home-page .hero-hotspots-shell .bamboo-card.is-next {
    border-color: rgba(216, 244, 253, 0.2);
    box-shadow:
        0 24px 54px rgba(1, 10, 20, 0.34),
        0 0 0 1px rgba(224, 248, 255, 0.045),
        inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

body.home-page .hero-hotspots-shell .bamboo-card.is-active {
    --card-scale: 1.018;
    border-color: rgba(238, 252, 255, 0.54);
    box-shadow:
        0 44px 90px rgba(1, 10, 20, 0.5),
        0 0 0 1px rgba(234, 250, 255, 0.22),
        0 0 52px rgba(116, 211, 240, 0.18),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

body.home-page .hero-hotspots-shell .bamboo-card-image {
    filter: saturate(var(--stage-saturate)) contrast(1.02) brightness(var(--stage-brightness));
}

body.home-page .hero-hotspots-shell .bamboo-card.is-active .bamboo-card-image {
    filter: saturate(1.12) contrast(1.08) brightness(1.02);
}

body.home-page .hero-hotspots-shell .bamboo-card-content {
    background:
        linear-gradient(180deg, rgba(2, 13, 24, 0), rgba(2, 13, 24, 0.62) 38%, rgba(1, 9, 18, 0.94) 100%);
}

body.home-page .hero-hotspots-shell .bamboo-card-title {
    text-shadow: 0 8px 20px rgba(1, 10, 20, 0.5);
}

body.home-page .today-sea-drift-hint {
    margin: clamp(3px, 0.5vh, 8px) auto clamp(8px, 1vh, 14px);
}

body.home-page .today-sea-brief-panel {
    min-height: 140px;
}

body.home-page .today-sea-position-panel,
body.home-page .today-sea-data-panel,
body.home-page .today-sea-progress-panel {
    padding-top: 18px;
    padding-bottom: 18px;
}

body.home-page .today-sea-maplet {
    width: 92px;
    min-height: 78px;
}

body.home-page .today-sea-progress-orbit {
    width: 64px;
    height: 64px;
}

body.home-page .today-sea-progress-orbit span {
    inset: 13px;
}

@media (min-width: 1280px) and (max-height: 960px) {
    body.home-page .hero-section {
        min-height: calc(100svh - var(--nav-height, 82px));
        padding-top: 12px;
        padding-bottom: 16px;
    }

    body.home-page .hero-hotspots-shell.today-sea-card {
        min-height: calc(100svh - var(--nav-height, 82px) - 18px);
        padding-top: 8px;
        padding-bottom: 12px;
    }

    body.home-page .hero-hotspots-head {
        gap: 4px;
        margin-bottom: 6px;
    }

    body.home-page .hero-hotspots-title {
        font-size: clamp(2.08rem, 2.45vw, 2.82rem);
    }

    body.home-page .hero-hotspots-subtitle {
        line-height: 1.42;
    }

    body.home-page .hero-observation-rail {
        transform: translateY(-2px);
    }

    body.home-page .hero-bamboo-scroll-container {
        height: clamp(300px, 37vh, 348px);
        padding-inline: clamp(64px, 5.4vw, 104px);
    }

    body.home-page .hero-hotspots-shell .bamboo-card {
        height: clamp(270px, 31vh, 318px);
    }

    body.home-page .today-sea-drift-hint {
        margin: 0 auto 6px;
    }

    body.home-page .today-sea-brief {
        width: min(100%, 1220px);
        gap: 14px;
    }

    body.home-page .today-sea-brief-panel {
        min-height: 126px;
    }

    body.home-page .today-sea-position-panel {
        grid-template-columns: 86px minmax(0, 1fr);
        gap: 8px 16px;
        padding: 14px 20px;
    }

    body.home-page .today-sea-data-panel,
    body.home-page .today-sea-progress-panel {
        padding: 14px 20px;
    }

    body.home-page .today-sea-maplet {
        width: 76px;
        min-height: 66px;
    }

    body.home-page .today-sea-data-grid {
        min-height: 70px;
    }

    body.home-page .today-sea-data-icon {
        width: 24px;
        height: 24px;
        flex-basis: 24px;
    }

    body.home-page .today-sea-data-grid dt {
        margin-bottom: 8px;
        font-size: 0.66rem;
    }

    body.home-page .today-sea-data-grid dd {
        font-size: clamp(0.9rem, 0.95vw, 1.05rem);
    }

    body.home-page .today-sea-progress-panel {
        grid-template-columns: 62px minmax(0, 1fr);
        gap: 8px 14px;
    }

    body.home-page .today-sea-progress-orbit {
        width: 56px;
        height: 56px;
    }

    body.home-page .today-sea-progress-orbit span {
        inset: 11px;
    }

    body.home-page .today-sea-progress-copy p {
        font-size: 0.72rem;
        line-height: 1.42;
    }
}

body.home-page .hero-hotspots-shell .bamboo-card.is-prev .bamboo-card-content,
body.home-page .hero-hotspots-shell .bamboo-card.is-next .bamboo-card-content {
    padding-left: clamp(30px, 2.6vw, 38px);
    padding-right: clamp(24px, 2.2vw, 34px);
    background:
        linear-gradient(180deg, rgba(2, 13, 24, 0.02), rgba(2, 13, 24, 0.66) 40%, rgba(1, 9, 18, 0.96) 100%);
}

body.home-page .hero-hotspots-shell .bamboo-card.is-prev .bamboo-card-content {
    padding-left: clamp(72px, 7vw, 118px);
}

body.home-page .hero-hotspots-shell .bamboo-card.is-prev .bamboo-card-title,
body.home-page .hero-hotspots-shell .bamboo-card.is-next .bamboo-card-title {
    color: rgba(239, 252, 255, 0.92);
    text-shadow: 0 9px 22px rgba(1, 9, 18, 0.74);
}

body.home-page .hero-hotspots-shell .bamboo-card.is-prev .bamboo-card-tagline,
body.home-page .hero-hotspots-shell .bamboo-card.is-next .bamboo-card-tagline,
body.home-page .hero-hotspots-shell .bamboo-card.is-prev .bamboo-card-footer,
body.home-page .hero-hotspots-shell .bamboo-card.is-next .bamboo-card-footer {
    color: rgba(221, 240, 247, 0.82);
}

/* 今日海域：修正卡片上沿裁切与 Sea Position 小地图显示 */
body.home-page .hero-bamboo-scroll-container {
    height: clamp(348px, 38vh, 430px);
}

body.home-page .hero-bamboo-cards-wrapper {
    padding-top: clamp(18px, 2vh, 26px);
    padding-bottom: clamp(12px, 1.4vh, 18px);
}

body.home-page .hero-hotspots-shell .bamboo-cards-content {
    min-height: calc(100% + 18px);
    padding-block: clamp(12px, 1.3vh, 18px);
    align-items: center;
}

body.home-page .today-sea-maplet {
    position: relative;
    aspect-ratio: 1.22;
    min-height: 72px;
    border-radius: 12px;
    background:
        radial-gradient(ellipse at 78% 22%, rgba(152, 226, 244, 0.22), rgba(152, 226, 244, 0) 24%),
        radial-gradient(ellipse at 24% 76%, rgba(220, 249, 255, 0.13), rgba(220, 249, 255, 0) 26%),
        linear-gradient(145deg, rgba(12, 57, 80, 0.72), rgba(4, 22, 36, 0.54));
    overflow: hidden;
}

body.home-page .today-sea-maplet::before,
body.home-page .today-sea-maplet::after {
    content: "";
    position: absolute;
    pointer-events: none;
}

body.home-page .today-sea-maplet::before {
    left: 9%;
    right: 9%;
    top: 18%;
    bottom: 16%;
    border-radius: 50%;
    border: 1px solid rgba(180, 226, 240, 0.09);
    background:
        linear-gradient(148deg, transparent 0 44%, rgba(181, 229, 242, 0.18) 45% 47%, transparent 49%),
        radial-gradient(ellipse at 72% 35%, rgba(167, 232, 247, 0.18), rgba(167, 232, 247, 0) 26%),
        radial-gradient(ellipse at 24% 69%, rgba(223, 249, 255, 0.12), rgba(223, 249, 255, 0) 26%);
}

body.home-page .today-sea-maplet::after {
    left: 17%;
    right: 18%;
    top: 58%;
    height: 2px;
    border-radius: 999px;
    background: linear-gradient(90deg, rgba(191, 231, 243, 0), rgba(224, 250, 255, 0.8) 46%, rgba(139, 214, 236, 0.16));
    box-shadow: 0 0 14px rgba(126, 207, 235, 0.25);
    transform: rotate(-22deg);
    transform-origin: center;
}

body.home-page .today-sea-maplet-grid,
body.home-page .today-sea-maplet-wake,
body.home-page .today-sea-maplet-route,
body.home-page .today-sea-maplet-ring,
body.home-page .today-sea-maplet-dot {
    position: absolute;
}

body.home-page .today-sea-maplet-grid {
    inset: 0;
    z-index: 1;
    background:
        linear-gradient(90deg, rgba(218, 246, 255, 0.055) 1px, transparent 1px),
        linear-gradient(180deg, rgba(218, 246, 255, 0.045) 1px, transparent 1px);
    background-size: 24px 24px;
    opacity: 0.42;
}

body.home-page .today-sea-maplet-wake {
    left: 12%;
    right: 14%;
    bottom: 13%;
    z-index: 2;
    height: 34%;
    border-radius: 999px;
    background:
        radial-gradient(ellipse at 36% 65%, rgba(185, 236, 249, 0.18), rgba(185, 236, 249, 0) 48%),
        linear-gradient(160deg, rgba(204, 241, 251, 0), rgba(204, 241, 251, 0.12), rgba(204, 241, 251, 0));
    filter: blur(0.4px);
}

body.home-page .today-sea-maplet-route {
    left: 22%;
    right: 20%;
    top: 58%;
    z-index: 4;
    height: 2px;
    border-radius: 999px;
    background: linear-gradient(90deg, rgba(203, 239, 249, 0), rgba(236, 253, 255, 0.86), rgba(148, 218, 239, 0.16));
    box-shadow: 0 0 12px rgba(137, 214, 238, 0.28);
    transform: rotate(-22deg);
}

body.home-page .today-sea-maplet-ring {
    right: 20%;
    top: 28%;
    z-index: 3;
    width: 30%;
    height: 30%;
    border-color: rgba(211, 244, 253, 0.18);
    box-shadow:
        0 0 0 1px rgba(211, 244, 253, 0.05),
        0 0 18px rgba(126, 207, 235, 0.18);
}

body.home-page .today-sea-maplet-dot {
    z-index: 5;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: rgba(223, 249, 255, 0.86);
    box-shadow:
        0 0 0 5px rgba(126, 207, 235, 0.08),
        0 0 18px rgba(126, 207, 235, 0.34);
}

body.home-page .today-sea-maplet-dot.is-origin {
    left: 26%;
    bottom: 27%;
    opacity: 0.52;
}

body.home-page .today-sea-maplet-dot.is-current {
    right: 27%;
    top: 35%;
}

@media (min-width: 1280px) and (max-height: 960px) {
    body.home-page .hero-bamboo-scroll-container {
        height: clamp(326px, 39vh, 368px);
    }

    body.home-page .hero-bamboo-cards-wrapper {
        padding-top: 18px;
        padding-bottom: 12px;
    }

    body.home-page .hero-hotspots-shell .bamboo-cards-content {
        min-height: calc(100% + 14px);
        padding-block: 10px 12px;
    }

    body.home-page .today-sea-maplet {
        width: 82px;
        min-height: 68px;
    }
}

/* 今日海域：展示稿级质感收束 */
body.home-page .hero-section {
    background:
        radial-gradient(ellipse at 50% 58%, rgba(31, 126, 157, 0.23), rgba(31, 126, 157, 0.08) 28%, rgba(3, 15, 28, 0) 58%),
        linear-gradient(180deg, #061b2c 0%, #082338 43%, #0a3549 100%);
    box-shadow:
        inset 0 0 0 1px rgba(159, 218, 238, 0.045),
        inset 12vw 0 18vw rgba(1, 8, 17, 0.62),
        inset -12vw 0 18vw rgba(1, 8, 17, 0.66),
        inset 0 -16vh 20vh rgba(2, 13, 24, 0.18);
}

body.home-page .hero-section::before {
    background:
        radial-gradient(ellipse at 50% -10%, rgba(238, 252, 255, 0.17), rgba(182, 228, 244, 0.08) 23%, rgba(11, 54, 74, 0.025) 42%, rgba(2, 13, 24, 0) 63%),
        linear-gradient(105deg, rgba(238, 252, 255, 0) 35%, rgba(236, 252, 255, 0.075) 48%, rgba(236, 252, 255, 0.028) 56%, rgba(236, 252, 255, 0) 69%),
        linear-gradient(255deg, rgba(238, 252, 255, 0) 37%, rgba(197, 237, 248, 0.055) 50%, rgba(236, 252, 255, 0.018) 59%, rgba(238, 252, 255, 0) 72%);
    filter: blur(0.2px);
    opacity: 0.82;
}

body.home-page .hero-section::after {
    background:
        radial-gradient(ellipse at 50% 72%, rgba(63, 161, 191, 0.13), rgba(23, 100, 132, 0.07) 30%, rgba(3, 18, 31, 0) 62%),
        linear-gradient(180deg, rgba(3, 16, 28, 0), rgba(3, 17, 30, 0.22) 100%);
    opacity: 0.72;
}

body.home-page .hero-ocean-glow-one {
    width: min(34vw, 620px);
    height: min(56vh, 540px);
    top: -12vh;
    background:
        linear-gradient(180deg, rgba(240, 253, 255, 0.16), rgba(155, 220, 240, 0.07) 42%, rgba(44, 142, 174, 0) 86%),
        radial-gradient(ellipse at 50% 0%, rgba(241, 253, 255, 0.16), rgba(183, 231, 246, 0.05) 34%, rgba(183, 231, 246, 0) 70%);
    filter: blur(7px);
}

body.home-page.hero-awakened .hero-ocean-glow-one {
    opacity: 0.42;
}

body.home-page .hero-hotspots-shell.today-sea-card::before {
    width: min(38vw, 620px);
    height: min(48vh, 430px);
    top: -15%;
    background:
        linear-gradient(180deg, rgba(239, 253, 255, 0.15), rgba(164, 226, 244, 0.07) 44%, rgba(83, 177, 207, 0) 84%),
        radial-gradient(ellipse at 50% 6%, rgba(242, 254, 255, 0.12), rgba(187, 232, 246, 0.04) 42%, rgba(187, 232, 246, 0) 72%);
    filter: blur(8px);
    opacity: 0.38;
}

body.home-page .hero-hotspots-shell.today-sea-card::after {
    width: min(48vw, 720px);
    height: clamp(170px, 24vh, 250px);
    top: 28%;
    background:
        radial-gradient(ellipse at 50% 50%, rgba(99, 193, 221, 0.16), rgba(53, 145, 177, 0.07) 39%, rgba(5, 24, 38, 0) 72%);
    filter: blur(14px);
    opacity: 0.48;
}

body.home-page .hero-hotspots-head {
    gap: 5px;
    margin-bottom: clamp(4px, 0.8vh, 10px);
}

body.home-page .hero-hotspots-kicker {
    color: rgba(213, 237, 246, 0.72);
}

body.home-page .hero-hotspots-title {
    color: rgba(247, 253, 255, 0.95);
    text-shadow:
        0 2px 16px rgba(189, 230, 244, 0.18),
        0 14px 36px rgba(1, 9, 18, 0.54);
}

body.home-page .hero-hotspots-subtitle,
body.home-page .hero-observation-chip {
    color: rgba(228, 244, 250, 0.84);
}

body.home-page .hero-observation-rail {
    gap: 14px;
    opacity: 0.96;
}

body.home-page .today-sea-drift-copy {
    color: rgba(219, 241, 248, 0.78);
    text-shadow: 0 8px 22px rgba(1, 10, 20, 0.42);
}

body.home-page .hero-hotspots-shell .bamboo-card {
    border-color: rgba(222, 247, 255, 0.18);
    box-shadow:
        0 26px 62px rgba(1, 9, 18, calc(var(--stage-depth-shadow) + 0.17)),
        0 0 0 1px rgba(219, 248, 255, 0.035),
        inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

body.home-page .hero-hotspots-shell .bamboo-card.is-active {
    --card-scale: 1.024;
    border-color: rgba(241, 253, 255, 0.64);
    box-shadow:
        0 52px 112px rgba(0, 7, 16, 0.62),
        0 18px 52px rgba(7, 61, 82, 0.24),
        0 0 0 1px rgba(238, 252, 255, 0.34),
        0 0 62px rgba(128, 214, 240, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.26),
        inset 0 -1px 0 rgba(165, 225, 244, 0.12);
}

body.home-page .hero-hotspots-shell .bamboo-card.is-active::before {
    opacity: 0.94;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.24), rgba(255, 255, 255, 0) 30%),
        linear-gradient(100deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0) 20%, rgba(255, 255, 255, 0) 78%, rgba(255, 255, 255, 0.1));
}

body.home-page .hero-hotspots-shell .bamboo-card.is-active .bamboo-card-image {
    filter: saturate(1.16) contrast(1.1) brightness(1.035);
}

body.home-page .hero-hotspots-shell .bamboo-card.is-prev,
body.home-page .hero-hotspots-shell .bamboo-card.is-next {
    border-color: rgba(224, 248, 255, 0.27);
    box-shadow:
        0 30px 62px rgba(1, 9, 18, 0.42),
        0 0 0 1px rgba(224, 248, 255, 0.065),
        inset 0 1px 0 rgba(255, 255, 255, 0.13);
}

body.home-page .hero-hotspots-shell .bamboo-card.is-prev .bamboo-card-image,
body.home-page .hero-hotspots-shell .bamboo-card.is-next .bamboo-card-image {
    filter: saturate(0.96) contrast(1.04) brightness(0.88);
}

body.home-page .hero-hotspots-shell .bamboo-card.is-prev:hover,
body.home-page .hero-hotspots-shell .bamboo-card.is-next:hover {
    border-color: rgba(232, 251, 255, 0.36);
    box-shadow:
        0 34px 68px rgba(1, 9, 18, 0.46),
        0 0 34px rgba(126, 207, 235, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.16);
}

body.home-page .hero-hotspots-shell .bamboo-card-content {
    padding-right: clamp(86px, 6.4vw, 112px);
    background:
        linear-gradient(180deg, rgba(2, 13, 24, 0), rgba(2, 13, 24, 0.52) 31%, rgba(1, 8, 17, 0.96) 100%),
        radial-gradient(ellipse at 22% 92%, rgba(6, 48, 66, 0.38), rgba(6, 48, 66, 0) 62%);
}

body.home-page .hero-hotspots-shell .bamboo-card.is-active .bamboo-card-content {
    padding-bottom: clamp(21px, 2.1vw, 28px);
    background:
        linear-gradient(180deg, rgba(2, 13, 24, 0), rgba(2, 13, 24, 0.46) 28%, rgba(1, 8, 17, 0.98) 100%),
        radial-gradient(ellipse at 18% 94%, rgba(12, 73, 94, 0.45), rgba(12, 73, 94, 0) 64%);
}

body.home-page .hero-hotspots-shell .bamboo-card-title {
    color: rgba(248, 253, 255, 0.97);
}

body.home-page .hero-hotspots-shell .bamboo-card-footer {
    justify-content: flex-start;
    gap: 10px;
    max-width: calc(100% - 52px);
}

body.home-page .hero-hotspots-shell .bamboo-card-price {
    color: rgba(228, 244, 250, 0.76);
    font-weight: 600;
}

body.home-page .hero-hotspots-shell .bamboo-card-flow {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 8px 4px;
    border: 1px solid rgba(190, 227, 239, 0.14);
    border-radius: 999px;
    background: rgba(190, 227, 239, 0.055);
    color: rgba(196, 231, 240, 0.82);
}

body.home-page .hero-hotspots-shell .bamboo-card-entry {
    right: clamp(18px, 1.7vw, 24px);
    bottom: clamp(20px, 2vw, 28px);
    width: 48px;
    height: 48px;
    border-color: rgba(236, 252, 255, 0.28);
    background:
        radial-gradient(circle at 38% 28%, rgba(249, 254, 255, 0.42), rgba(137, 218, 241, 0.13) 44%, rgba(3, 18, 31, 0.7) 100%);
}

body.home-page .hero-hotspots-shell .bamboo-card.is-active .bamboo-card-entry {
    box-shadow:
        0 0 0 1px rgba(236, 252, 255, 0.08),
        0 0 32px rgba(126, 207, 235, 0.25),
        0 16px 32px rgba(1, 9, 18, 0.42);
}

body.home-page .hero-hotspots-shell .bamboo-card.is-active:hover {
    box-shadow:
        0 58px 120px rgba(0, 7, 16, 0.66),
        0 20px 56px rgba(7, 61, 82, 0.26),
        0 0 0 1px rgba(244, 254, 255, 0.38),
        0 0 72px rgba(128, 214, 240, 0.24),
        inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

body.home-page .today-sea-brief {
    gap: clamp(14px, 1.45vw, 20px);
}

body.home-page .today-sea-brief-panel {
    border-color: rgba(221, 247, 255, 0.18);
    background:
        linear-gradient(180deg, rgba(13, 47, 68, 0.62), rgba(3, 20, 34, 0.5)),
        radial-gradient(circle at 18% 0%, rgba(226, 250, 255, 0.16), rgba(226, 250, 255, 0) 56%),
        linear-gradient(115deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0) 33%);
    box-shadow:
        0 24px 52px rgba(1, 9, 18, 0.24),
        0 0 0 1px rgba(221, 247, 255, 0.035),
        inset 0 1px 0 rgba(255, 255, 255, 0.13);
}

body.home-page .today-sea-brief-panel::before {
    opacity: 0.72;
}

body.home-page .today-sea-brief-kicker {
    color: rgba(185, 226, 240, 0.74);
}

body.home-page .today-sea-position-panel {
    grid-template-columns: 92px minmax(0, 1fr);
}

body.home-page .today-sea-brief-copy h3 {
    color: rgba(248, 253, 255, 0.97);
    text-shadow: 0 10px 24px rgba(1, 9, 18, 0.42);
}

body.home-page .today-sea-brief-copy p,
body.home-page .today-sea-brief-copy span {
    color: rgba(213, 234, 243, 0.78);
}

body.home-page .today-sea-brief-link {
    color: rgba(226, 244, 250, 0.82);
}

body.home-page .today-sea-maplet {
    border-color: rgba(221, 247, 255, 0.22);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.12),
        inset 0 -18px 30px rgba(1, 9, 18, 0.16),
        0 14px 30px rgba(1, 9, 18, 0.22);
}

body.home-page .today-sea-data-grid {
    column-gap: clamp(16px, 2vw, 28px);
}

body.home-page .today-sea-data-item {
    min-width: 0;
}

body.home-page .today-sea-data-icon {
    width: 26px;
    height: 26px;
    flex-basis: 26px;
}

body.home-page .today-sea-data-grid dt {
    color: rgba(186, 224, 238, 0.72);
}

body.home-page .today-sea-data-grid dd {
    color: rgba(241, 251, 255, 0.92);
    text-shadow: 0 8px 22px rgba(1, 9, 18, 0.36);
    white-space: nowrap;
}

body.home-page .today-sea-progress-panel {
    grid-template-columns: 62px minmax(0, 1fr);
}

body.home-page .today-sea-progress-copy::before {
    content: "探索进度";
    display: block;
    margin-bottom: 4px;
    color: rgba(185, 226, 240, 0.72);
    font-size: 0.68rem;
    letter-spacing: 0.16em;
}

body.home-page .today-sea-progress-copy strong {
    display: inline-flex;
    align-items: baseline;
    gap: 5px;
    font-size: clamp(1.28rem, 1.62vw, 1.78rem);
}

body.home-page .today-sea-progress-copy strong::after {
    content: "片海域";
    color: rgba(211, 234, 242, 0.68);
    font-size: 0.72rem;
    font-weight: 500;
    letter-spacing: 0.08em;
}

body.home-page .today-sea-progress-copy span {
    color: rgba(220, 240, 247, 0.76);
}

body.home-page .today-sea-progress-copy p {
    max-width: 25ch;
    color: rgba(205, 229, 238, 0.78);
}

body.home-page .today-sea-progress-orbit {
    background:
        radial-gradient(circle at 50% 50%, rgba(4, 22, 36, 0.88) 0 42%, rgba(127, 209, 234, 0.22) 43% 45%, transparent 46%),
        conic-gradient(from -18deg, rgba(177, 232, 246, 0.86) var(--brief-progress), rgba(177, 232, 246, 0.14) 0);
    box-shadow:
        inset 0 0 18px rgba(2, 14, 24, 0.48),
        0 0 28px rgba(126, 207, 235, 0.12);
}

@media (min-width: 1280px) and (max-height: 960px) {
    body.home-page .hero-hotspots-head {
        gap: 3px;
        margin-bottom: 2px;
    }

    body.home-page .hero-bamboo-scroll-container {
        height: clamp(322px, 38vh, 360px);
    }

    body.home-page .hero-hotspots-shell .bamboo-card-content {
        padding-right: clamp(78px, 5.8vw, 96px);
    }

    body.home-page .hero-hotspots-shell .bamboo-card-entry {
        width: 44px;
        height: 44px;
        bottom: 20px;
    }

    body.home-page .today-sea-progress-copy::before {
        margin-bottom: 2px;
        font-size: 0.62rem;
    }

    body.home-page .today-sea-progress-copy strong::after {
        font-size: 0.66rem;
    }

    body.home-page .today-sea-data-grid {
        column-gap: clamp(12px, 1.55vw, 20px);
    }

    body.home-page .today-sea-data-grid dd {
        font-size: clamp(0.86rem, 0.9vw, 1rem);
    }
}

/* 今日海域：主图统一与水下光束终稿 */
body.home-page .hero-section {
    background:
        radial-gradient(ellipse at 50% 60%, rgba(34, 132, 163, 0.2), rgba(20, 83, 112, 0.08) 30%, rgba(2, 14, 26, 0) 58%),
        linear-gradient(180deg, #041625 0%, #061f33 45%, #0a3448 100%);
    box-shadow:
        inset 0 0 0 1px rgba(154, 218, 238, 0.04),
        inset 15vw 0 18vw rgba(1, 7, 15, 0.72),
        inset -15vw 0 18vw rgba(1, 7, 15, 0.74),
        inset 0 16vh 20vh rgba(1, 7, 15, 0.22),
        inset 0 -14vh 18vh rgba(2, 13, 24, 0.24);
}

body.home-page .hero-section::before {
    background:
        linear-gradient(102deg, rgba(236, 252, 255, 0) 38%, rgba(238, 252, 255, 0.052) 49%, rgba(238, 252, 255, 0.014) 58%, rgba(236, 252, 255, 0) 70%),
        linear-gradient(78deg, rgba(190, 232, 246, 0) 42%, rgba(201, 239, 249, 0.04) 53%, rgba(190, 232, 246, 0) 64%),
        linear-gradient(118deg, rgba(190, 232, 246, 0) 28%, rgba(203, 239, 249, 0.028) 39%, rgba(190, 232, 246, 0) 50%),
        radial-gradient(ellipse at 50% -16%, rgba(242, 253, 255, 0.1), rgba(184, 229, 244, 0.034) 31%, rgba(6, 36, 54, 0.012) 49%, rgba(2, 13, 24, 0) 66%);
    filter: blur(0.1px);
    opacity: 0.68;
}

body.home-page .hero-section::after {
    bottom: -96px;
    height: 230px;
    background:
        radial-gradient(ellipse at 50% 42%, rgba(58, 150, 184, 0.1), rgba(20, 92, 124, 0.05) 34%, rgba(2, 13, 24, 0) 64%),
        radial-gradient(ellipse at 3% 50%, rgba(1, 7, 15, 0.78), rgba(1, 7, 15, 0.22) 40%, rgba(1, 7, 15, 0) 64%),
        radial-gradient(ellipse at 97% 50%, rgba(1, 7, 15, 0.8), rgba(1, 7, 15, 0.24) 40%, rgba(1, 7, 15, 0) 64%),
        linear-gradient(180deg, rgba(2, 13, 24, 0) 0%, rgba(5, 26, 39, 0.34) 42%, rgba(8, 47, 67, 0.76) 68%, rgba(10, 52, 72, 0.92) 100%);
    filter: none;
    opacity: 0.9;
}

body.home-page .hero-ocean-glow-one {
    width: min(28vw, 520px);
    height: min(50vh, 460px);
    min-width: 300px;
    min-height: 360px;
    top: -15vh;
    background:
        linear-gradient(180deg, rgba(242, 253, 255, 0.12), rgba(147, 216, 238, 0.045) 42%, rgba(44, 142, 174, 0) 86%),
        radial-gradient(ellipse at 50% 0%, rgba(245, 254, 255, 0.115), rgba(176, 228, 244, 0.035) 33%, rgba(176, 228, 244, 0) 72%);
    filter: blur(5px);
}

body.home-page.hero-awakened .hero-ocean-glow-one {
    opacity: 0.34;
}

body.home-page .hero-ocean-glow-two {
    opacity: 0.32;
}

body.home-page .hero-hotspots-shell.today-sea-card::before {
    width: min(30vw, 540px);
    height: min(43vh, 390px);
    top: -18%;
    background:
        linear-gradient(180deg, rgba(240, 253, 255, 0.11), rgba(164, 226, 244, 0.045) 42%, rgba(83, 177, 207, 0) 86%),
        radial-gradient(ellipse at 50% 5%, rgba(244, 254, 255, 0.08), rgba(187, 232, 246, 0.025) 40%, rgba(187, 232, 246, 0) 72%);
    filter: blur(6px);
    opacity: 0.28;
}

body.home-page .hero-hotspots-shell.today-sea-card::after {
    width: min(40vw, 660px);
    height: clamp(140px, 20vh, 220px);
    top: 33%;
    background:
        radial-gradient(ellipse at 50% 52%, rgba(83, 177, 207, 0.13), rgba(36, 122, 155, 0.052) 42%, rgba(5, 24, 38, 0) 72%);
    filter: blur(12px);
    opacity: 0.36;
}

body.home-page .hero-hotspots-shell .bamboo-card-image-wrapper::before,
body.home-page .hero-hotspots-shell .bamboo-card-image-wrapper::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    border-radius: inherit;
}

body.home-page .hero-hotspots-shell .bamboo-card-image-wrapper::before {
    background:
        radial-gradient(ellipse at 50% 45%, rgba(1, 7, 15, 0) 42%, rgba(1, 7, 15, 0.34) 100%),
        linear-gradient(90deg, rgba(1, 7, 15, 0.22), rgba(1, 7, 15, 0) 20%, rgba(1, 7, 15, 0) 80%, rgba(1, 7, 15, 0.24));
    opacity: 0.82;
}

body.home-page .hero-hotspots-shell .bamboo-card-image-wrapper::after {
    background:
        linear-gradient(180deg, rgba(0, 7, 15, 0.12) 0%, rgba(0, 7, 15, 0.03) 34%, rgba(1, 8, 17, 0.62) 75%, rgba(0, 5, 12, 0.94) 100%),
        radial-gradient(ellipse at 30% 84%, rgba(20, 101, 132, 0.24), rgba(20, 101, 132, 0) 52%);
    opacity: 0.86;
}

body.home-page .hero-hotspots-shell .bamboo-card.is-active .bamboo-card-image {
    filter: saturate(1.12) contrast(1.13) brightness(0.99);
}

body.home-page .hero-hotspots-shell .bamboo-card.is-active .bamboo-card-image-wrapper::before {
    opacity: 0.76;
}

body.home-page .hero-hotspots-shell .bamboo-card.is-active .bamboo-card-image-wrapper::after {
    background:
        linear-gradient(180deg, rgba(0, 7, 15, 0.08) 0%, rgba(0, 7, 15, 0.02) 32%, rgba(1, 8, 17, 0.64) 74%, rgba(0, 5, 12, 0.96) 100%),
        radial-gradient(ellipse at 24% 90%, rgba(18, 102, 134, 0.32), rgba(18, 102, 134, 0) 58%);
    opacity: 0.92;
}

body.home-page .hero-hotspots-shell .bamboo-card.is-prev .bamboo-card-image,
body.home-page .hero-hotspots-shell .bamboo-card.is-next .bamboo-card-image {
    filter: saturate(1.02) contrast(1.07) brightness(0.9);
}

body.home-page .hero-hotspots-shell .bamboo-card.is-prev .bamboo-card-image-wrapper::after,
body.home-page .hero-hotspots-shell .bamboo-card.is-next .bamboo-card-image-wrapper::after {
    opacity: 0.78;
}

body.home-page .hero-hotspots-shell .bamboo-card.is-prev:hover .bamboo-card-image,
body.home-page .hero-hotspots-shell .bamboo-card.is-next:hover .bamboo-card-image {
    filter: saturate(1.05) contrast(1.08) brightness(0.95);
}

body.home-page .hero-hotspots-shell .bamboo-card.is-prev .bamboo-card-title,
body.home-page .hero-hotspots-shell .bamboo-card.is-next .bamboo-card-title {
    color: rgba(246, 253, 255, 0.95);
}

body.home-page .hero-hotspots-shell .bamboo-card.is-prev .bamboo-card-tagline,
body.home-page .hero-hotspots-shell .bamboo-card.is-next .bamboo-card-tagline {
    color: rgba(224, 242, 248, 0.84);
}

body.home-page .hero-hotspots-shell .bamboo-card.is-prev .bamboo-card-price,
body.home-page .hero-hotspots-shell .bamboo-card.is-next .bamboo-card-price {
    color: rgba(225, 243, 249, 0.82);
}

body.home-page .hero-hotspots-shell .bamboo-card.is-prev .bamboo-card-flow,
body.home-page .hero-hotspots-shell .bamboo-card.is-next .bamboo-card-flow {
    color: rgba(196, 231, 240, 0.82);
}

body.home-page .hero-hotspots-shell .bamboo-card.is-active .bamboo-card-content {
    background:
        linear-gradient(180deg, rgba(2, 13, 24, 0), rgba(2, 13, 24, 0.5) 26%, rgba(1, 8, 17, 0.99) 100%),
        radial-gradient(ellipse at 18% 94%, rgba(13, 82, 104, 0.48), rgba(13, 82, 104, 0) 64%);
}

body.home-page .today-sea-brief-panel {
    overflow: hidden;
    border-color: rgba(218, 247, 255, 0.22);
    background:
        linear-gradient(180deg, rgba(15, 53, 74, 0.64), rgba(3, 19, 33, 0.54)),
        radial-gradient(circle at 16% 0%, rgba(226, 250, 255, 0.14), rgba(226, 250, 255, 0) 48%),
        linear-gradient(118deg, rgba(255, 255, 255, 0.065), rgba(255, 255, 255, 0) 36%);
}

body.home-page .today-sea-brief-panel::after {
    content: "";
    position: absolute;
    inset: 1px;
    z-index: 0;
    border-radius: inherit;
    background:
        linear-gradient(90deg, rgba(222, 249, 255, 0.1), rgba(222, 249, 255, 0) 18% 82%, rgba(222, 249, 255, 0.06)),
        linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0) 36%);
    pointer-events: none;
    opacity: 0.62;
}

body.home-page .today-sea-brief-panel > * {
    position: relative;
    z-index: 1;
}

body.home-page .today-sea-maplet {
    background:
        radial-gradient(ellipse at 72% 26%, rgba(159, 229, 246, 0.24), rgba(159, 229, 246, 0) 23%),
        radial-gradient(ellipse at 27% 76%, rgba(220, 249, 255, 0.14), rgba(220, 249, 255, 0) 26%),
        linear-gradient(145deg, rgba(13, 60, 82, 0.74), rgba(4, 20, 34, 0.58));
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.13),
        inset 0 -18px 30px rgba(1, 9, 18, 0.18),
        0 0 0 1px rgba(214, 246, 255, 0.08),
        0 14px 30px rgba(1, 9, 18, 0.22);
}

body.home-page .today-sea-maplet-grid {
    background-size: 18px 18px;
    opacity: 0.5;
}

body.home-page .today-sea-maplet-ring {
    border-color: rgba(221, 249, 255, 0.24);
    box-shadow:
        0 0 0 1px rgba(221, 249, 255, 0.06),
        0 0 22px rgba(126, 207, 235, 0.22);
}

body.home-page .today-sea-data-grid {
    align-items: start;
}

body.home-page .today-sea-data-grid dt {
    letter-spacing: 0.08em;
}

body.home-page .today-sea-data-icon {
    opacity: 0.92;
    box-shadow:
        0 0 0 1px rgba(211, 246, 255, 0.08),
        0 0 18px rgba(126, 207, 235, 0.1);
}

body.home-page .today-sea-progress-orbit {
    opacity: 0.92;
    background:
        radial-gradient(circle at 50% 50%, rgba(4, 22, 36, 0.88) 0 42%, rgba(127, 209, 234, 0.16) 43% 45%, transparent 46%),
        conic-gradient(from -18deg, rgba(177, 232, 246, 0.78) var(--brief-progress), rgba(177, 232, 246, 0.12) 0);
}

body.home-page .today-sea-progress-copy strong {
    letter-spacing: 0.04em;
}

body.home-page .today-sea-progress-copy p {
    max-width: 30ch;
    color: rgba(214, 237, 245, 0.82);
}

/* 今日海域：入场态压雾与亮图校准 */
body.home-page.hero-awakened .hero-section::before {
    opacity: 0.62;
}

body.home-page.hero-awakened .hero-section::after {
    opacity: 0.86;
}

body.home-page.hero-awakened .hero-hotspots-shell.today-sea-card::before {
    opacity: 0.24;
}

body.home-page.hero-awakened .hero-hotspots-shell.today-sea-card::after {
    opacity: 0.32;
}

body.home-page .hero-hotspots-shell .bamboo-card.is-active .bamboo-card-image {
    filter: saturate(1.12) contrast(1.14) brightness(0.97);
}

body.home-page .hero-hotspots-shell .bamboo-card.is-active .bamboo-card-image-wrapper::before {
    background:
        linear-gradient(180deg, rgba(0, 7, 15, 0.18), rgba(0, 7, 15, 0.03) 30%, rgba(0, 7, 15, 0) 52%),
        radial-gradient(ellipse at 50% 45%, rgba(1, 7, 15, 0) 40%, rgba(1, 7, 15, 0.38) 100%),
        linear-gradient(90deg, rgba(1, 7, 15, 0.24), rgba(1, 7, 15, 0) 20%, rgba(1, 7, 15, 0) 80%, rgba(1, 7, 15, 0.26));
    opacity: 0.82;
}

/* 今日海域：Sea Position 小海图修正 */
body.home-page .today-sea-maplet {
    --map-main-x: 63%;
    --map-main-y: 36%;
    --map-sub-x: 45%;
    --map-sub-y: 58%;
    --map-origin-x: 27%;
    --map-origin-y: 71%;
    --map-route-x: 25%;
    --map-route-y: 55%;
    --map-route-w: 48%;
    --map-route-h: 26%;
    --map-route-rotate: -24deg;
    --map-coast-x: -9%;
    --map-coast-y: 0%;
    --map-coast-rotate: 16deg;
    --map-coast-scale: 0.88;
    --map-coast-opacity: 0.76;
    --map-island-x: 63%;
    --map-island-y: 36%;
    --map-small-x: 45%;
    --map-small-y: 58%;
    --map-glow-x: 64%;
    --map-glow-y: 36%;
    --map-shadow-x: 28%;
    --map-shadow-y: 76%;
    --map-grid-x: 5px;
    --map-grid-y: 2px;
    --map-outer-rotate: -20deg;
    --map-inner-rotate: -27deg;
    --map-shelf-rotate: 24deg;
    width: 92px;
    min-height: 76px;
    border: 1px solid rgba(213, 246, 255, 0.2);
    background:
        radial-gradient(ellipse at var(--map-glow-x) var(--map-glow-y), rgba(176, 235, 249, 0.22), rgba(176, 235, 249, 0) 23%),
        radial-gradient(ellipse at var(--map-shadow-x) var(--map-shadow-y), rgba(110, 193, 220, 0.2), rgba(110, 193, 220, 0) 34%),
        linear-gradient(150deg, rgba(18, 78, 102, 0.78), rgba(7, 34, 54, 0.66) 56%, rgba(4, 19, 33, 0.72));
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.16),
        inset 0 -18px 34px rgba(1, 9, 18, 0.2),
        0 0 0 1px rgba(214, 246, 255, 0.075),
        0 14px 28px rgba(1, 9, 18, 0.2);
    transition:
        background-position 320ms ease,
        border-color 320ms ease,
        box-shadow 320ms ease;
}

body.home-page .today-sea-maplet::before {
    inset: 0;
    border: 0;
    border-radius: inherit;
    background:
        linear-gradient(90deg, transparent 49%, rgba(221, 249, 255, 0.045) 50%, transparent 51%),
        linear-gradient(180deg, transparent 49%, rgba(221, 249, 255, 0.04) 50%, transparent 51%),
        radial-gradient(ellipse at var(--map-glow-x) var(--map-glow-y), rgba(224, 250, 255, 0.1), transparent 26%),
        radial-gradient(ellipse at var(--map-shadow-x) var(--map-shadow-y), rgba(1, 11, 22, 0.2), transparent 48%);
    opacity: 0.68;
    transition: opacity 320ms ease;
}

body.home-page .today-sea-maplet::after {
    inset: 0;
    height: auto;
    border-radius: inherit;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.05), transparent 36%),
        radial-gradient(ellipse at 50% 50%, transparent 48%, rgba(1, 9, 18, 0.22) 100%);
    box-shadow: inset 0 0 0 1px rgba(236, 253, 255, 0.045);
    transform: none;
}

body.home-page .today-sea-maplet-grid,
body.home-page .today-sea-maplet-wake,
body.home-page .today-sea-maplet-route,
body.home-page .today-sea-maplet-ring,
body.home-page .today-sea-maplet-dot,
body.home-page .today-sea-maplet-depth,
body.home-page .today-sea-maplet-coast,
body.home-page .today-sea-maplet-island,
body.home-page .today-sea-maplet-bearing,
body.home-page .today-sea-maplet-scale {
    position: absolute;
    pointer-events: none;
}

body.home-page .today-sea-maplet-bearing {
    right: 8px;
    top: 6px;
    z-index: 9;
    color: rgba(214, 244, 250, 0.42);
    font-size: 0.48rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    text-shadow: 0 0 8px rgba(126, 207, 235, 0.12);
}

body.home-page .today-sea-maplet-scale {
    left: 9px;
    bottom: 7px;
    z-index: 9;
    width: 22px;
    height: 4px;
    border-left: 1px solid rgba(218, 248, 255, 0.34);
    border-right: 1px solid rgba(218, 248, 255, 0.34);
    border-bottom: 1px solid rgba(218, 248, 255, 0.26);
    opacity: 0.58;
}

body.home-page .today-sea-maplet-grid {
    z-index: 1;
    background:
        linear-gradient(90deg, rgba(218, 246, 255, 0.075) 1px, transparent 1px),
        linear-gradient(180deg, rgba(218, 246, 255, 0.06) 1px, transparent 1px);
    background-size: 18px 18px;
    background-position: var(--map-grid-x) var(--map-grid-y);
    opacity: 0.5;
    mask-image: radial-gradient(ellipse at 50% 50%, #000 58%, transparent 100%);
    transition:
        background-position 320ms ease,
        opacity 320ms ease;
}

body.home-page .today-sea-maplet-depth {
    z-index: 2;
    border: 1px solid rgba(200, 239, 248, 0.27);
    border-color: rgba(200, 239, 248, 0.27) transparent transparent rgba(200, 239, 248, 0.2);
    border-radius: 50%;
    opacity: 0.62;
    transition:
        opacity 320ms ease,
        transform 320ms ease;
}

body.home-page .today-sea-maplet-depth.is-outer {
    left: 8%;
    top: 14%;
    width: 72%;
    height: 78%;
    transform: rotate(var(--map-outer-rotate));
}

body.home-page .today-sea-maplet-depth.is-inner {
    left: 20%;
    top: 25%;
    width: 50%;
    height: 50%;
    border-color: rgba(226, 251, 255, 0.28) transparent transparent rgba(226, 251, 255, 0.16);
    transform: rotate(var(--map-inner-rotate));
}

body.home-page .today-sea-maplet-depth.is-shelf {
    right: 10%;
    top: 18%;
    width: 40%;
    height: 46%;
    border-color: rgba(150, 218, 238, 0.16) rgba(150, 218, 238, 0.12) transparent transparent;
    transform: rotate(var(--map-shelf-rotate));
    opacity: 0.44;
}

body.home-page .today-sea-maplet-coast {
    z-index: 3;
    left: var(--map-coast-x);
    top: var(--map-coast-y);
    width: 50%;
    height: 68%;
    border-radius: 38% 62% 52% 42% / 46% 56% 44% 52%;
    background:
        radial-gradient(ellipse at 58% 20%, rgba(235, 252, 255, 0.22), transparent 28%),
        linear-gradient(136deg, rgba(121, 184, 171, 0.44), rgba(48, 113, 104, 0.34) 46%, rgba(20, 68, 72, 0.16) 78%);
    box-shadow:
        inset -1px -1px 0 rgba(232, 252, 255, 0.26),
        1px 0 0 rgba(232, 252, 255, 0.16),
        6px 8px 18px rgba(1, 11, 22, 0.18);
    clip-path: polygon(0 0, 75% 0, 92% 18%, 78% 31%, 94% 48%, 68% 58%, 74% 79%, 48% 90%, 32% 76%, 0 84%);
    opacity: var(--map-coast-opacity);
    transform: rotate(var(--map-coast-rotate)) scale(var(--map-coast-scale));
    transform-origin: 35% 42%;
    transition:
        left 320ms ease,
        top 320ms ease,
        opacity 320ms ease,
        transform 320ms ease;
}

body.home-page .today-sea-maplet-coast::after {
    content: "";
    position: absolute;
    right: 8%;
    top: 10%;
    width: 38%;
    height: 78%;
    border-right: 1px solid rgba(232, 252, 255, 0.42);
    border-top: 1px solid rgba(232, 252, 255, 0.18);
    border-radius: 50%;
    transform: rotate(16deg);
    filter: blur(0.1px);
}

body.home-page .today-sea-maplet-island {
    z-index: 4;
    border-radius: 48% 52% 45% 55% / 54% 44% 56% 46%;
    background:
        linear-gradient(145deg, rgba(224, 252, 252, 0.5), rgba(91, 162, 151, 0.34) 54%, rgba(20, 72, 78, 0.2));
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.22),
        0 0 13px rgba(139, 218, 232, 0.18);
    transition:
        left 320ms ease,
        top 320ms ease,
        opacity 320ms ease,
        transform 320ms ease;
}

body.home-page .today-sea-maplet-island::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: rgba(230, 253, 255, 0.5);
    box-shadow: 0 0 9px rgba(126, 207, 235, 0.18);
    transform: translate(-50%, -50%);
}

body.home-page .today-sea-maplet-island::after {
    content: "";
    position: absolute;
    inset: 1px;
    border-radius: inherit;
    border: 1px solid rgba(235, 253, 255, 0.22);
    opacity: 0.72;
}

body.home-page .today-sea-maplet-island.is-main {
    left: var(--map-island-x);
    top: var(--map-island-y);
    width: 20%;
    height: 16%;
    transform: translate(-50%, -50%) rotate(-18deg);
}

body.home-page .today-sea-maplet-island.is-small {
    left: var(--map-small-x);
    top: var(--map-small-y);
    width: 10%;
    height: 9%;
    opacity: 0.86;
    transform: translate(-50%, -50%) rotate(18deg);
}

body.home-page .today-sea-maplet-island.is-small::before {
    width: 3px;
    height: 3px;
    opacity: 0.7;
}

body.home-page .today-sea-maplet-wake {
    z-index: 2;
    left: 19%;
    right: 18%;
    bottom: 13%;
    height: 28%;
    background:
        radial-gradient(ellipse at 44% 55%, rgba(199, 241, 251, 0.1), rgba(199, 241, 251, 0) 54%),
        linear-gradient(160deg, transparent, rgba(204, 241, 251, 0.055), transparent);
    filter: blur(0.25px);
}

body.home-page .today-sea-maplet-route {
    z-index: 6;
    left: var(--map-route-x);
    top: var(--map-route-y);
    width: var(--map-route-w);
    height: var(--map-route-h);
    border-top: 1px solid rgba(229, 252, 255, 0.58);
    border-radius: 50%;
    background: none;
    box-shadow: 0 -4px 10px rgba(126, 207, 235, 0.1);
    transform: rotate(var(--map-route-rotate));
    opacity: 0.82;
    mask-image: linear-gradient(90deg, transparent 0%, #000 18%, #000 82%, transparent 100%);
    transition:
        left 320ms ease,
        top 320ms ease,
        width 320ms ease,
        height 320ms ease,
        opacity 320ms ease,
        transform 320ms ease;
}

body.home-page .today-sea-maplet-route::after {
    content: "";
    position: absolute;
    right: 3px;
    top: -3px;
    width: 5px;
    height: 5px;
    border-top: 1px solid rgba(229, 252, 255, 0.46);
    border-right: 1px solid rgba(229, 252, 255, 0.46);
    transform: rotate(28deg);
}

body.home-page .today-sea-maplet-ring {
    left: var(--map-main-x);
    top: var(--map-main-y);
    z-index: 7;
    width: 16%;
    height: 16%;
    border: 1px solid rgba(232, 252, 255, 0.18);
    box-shadow:
        0 0 0 1px rgba(222, 249, 255, 0.03),
        0 0 10px rgba(126, 207, 235, 0.08);
    opacity: 0.56;
    transform: translate(-50%, -50%);
    transition:
        left 320ms ease,
        top 320ms ease,
        opacity 320ms ease;
}

body.home-page .today-sea-maplet-dot {
    z-index: 8;
    width: 7px;
    height: 7px;
    background: rgba(228, 252, 255, 0.88);
    box-shadow:
        0 0 0 3px rgba(126, 207, 235, 0.09),
        0 0 12px rgba(126, 207, 235, 0.3);
    transform: translate(-50%, -50%);
    transition:
        left 320ms ease,
        top 320ms ease,
        opacity 320ms ease,
        box-shadow 320ms ease;
}

body.home-page .today-sea-maplet-dot.is-origin {
    left: var(--map-origin-x);
    top: var(--map-origin-y);
    width: 4px;
    height: 4px;
    background: rgba(214, 244, 250, 0.48);
    box-shadow: 0 0 7px rgba(126, 207, 235, 0.12);
    opacity: 0.72;
}

body.home-page .today-sea-maplet-dot.is-current {
    left: var(--map-main-x);
    top: var(--map-main-y);
}

/* 今日海域：最后一轮投屏可读性小修 */
body.home-page .today-sea-maplet {
    background:
        radial-gradient(ellipse at var(--map-glow-x) var(--map-glow-y), rgba(186, 238, 249, 0.24), rgba(186, 238, 249, 0) 24%),
        radial-gradient(ellipse at var(--map-shadow-x) var(--map-shadow-y), rgba(112, 195, 220, 0.22), rgba(112, 195, 220, 0) 35%),
        linear-gradient(150deg, rgba(20, 84, 108, 0.8), rgba(8, 38, 58, 0.68) 56%, rgba(4, 19, 33, 0.72));
}

body.home-page .today-sea-maplet-grid {
    opacity: 0.56;
}

body.home-page .today-sea-maplet-bearing {
    color: rgba(218, 247, 252, 0.5);
}

body.home-page .today-sea-maplet-coast {
    opacity: var(--map-coast-opacity);
}

body.home-page .today-sea-maplet-depth {
    opacity: 0.68;
}

body.home-page .today-sea-maplet-route {
    border-top-color: rgba(229, 252, 255, 0.52);
    box-shadow: 0 -3px 8px rgba(126, 207, 235, 0.08);
    opacity: 0.72;
}

body.home-page .today-sea-maplet-ring {
    opacity: 0.42;
}

body.home-page .today-sea-maplet-dot.is-current {
    width: 8px;
    height: 8px;
    background: rgba(231, 253, 255, 0.9);
    box-shadow:
        0 0 0 3px rgba(126, 207, 235, 0.1),
        0 0 13px rgba(126, 207, 235, 0.34);
}

body.home-page .today-sea-maplet-route,
body.home-page .today-sea-maplet-route::after,
body.home-page .today-sea-maplet-ring,
body.home-page .today-sea-maplet-dot,
body.home-page .today-sea-maplet-depth,
body.home-page .today-sea-maplet-island,
body.home-page .today-sea-maplet-island::before {
    display: none;
}

body.home-page .today-sea-maplet {
    background:
        linear-gradient(180deg, rgba(222, 248, 255, 0.035), rgba(222, 248, 255, 0) 32%),
        radial-gradient(ellipse at var(--map-glow-x) var(--map-glow-y), rgba(138, 215, 235, 0.13), rgba(138, 215, 235, 0) 24%),
        linear-gradient(150deg, rgba(11, 54, 76, 0.84), rgba(5, 30, 49, 0.8) 55%, rgba(3, 17, 31, 0.86));
}

body.home-page .today-sea-maplet::before {
    background:
        linear-gradient(90deg, transparent 49%, rgba(221, 249, 255, 0.05) 50%, transparent 51%),
        linear-gradient(180deg, transparent 49%, rgba(221, 249, 255, 0.045) 50%, transparent 51%),
        repeating-linear-gradient(22deg, transparent 0 12px, rgba(198, 235, 244, 0.035) 12px 13px, transparent 13px 25px);
    opacity: 0.72;
}

body.home-page .today-sea-maplet::after {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.045), transparent 30%),
        radial-gradient(ellipse at 50% 52%, transparent 58%, rgba(1, 9, 18, 0.26) 100%);
}

body.home-page .today-sea-maplet-coast {
    width: 58%;
    height: 74%;
    border-radius: 32% 68% 50% 42% / 38% 56% 44% 58%;
    background:
        linear-gradient(138deg, rgba(122, 177, 165, 0.58), rgba(54, 112, 111, 0.5) 48%, rgba(18, 62, 72, 0.32) 78%),
        repeating-linear-gradient(155deg, rgba(237, 253, 255, 0.12) 0 1px, transparent 1px 13px);
    box-shadow:
        inset -1px -1px 0 rgba(235, 253, 255, 0.36),
        inset 7px 0 18px rgba(238, 253, 255, 0.08),
        1px 0 0 rgba(232, 252, 255, 0.24),
        8px 10px 18px rgba(1, 11, 22, 0.18);
    clip-path: polygon(0 0, 70% 0, 88% 16%, 76% 27%, 94% 43%, 66% 55%, 76% 73%, 48% 91%, 32% 78%, 0 88%);
    filter: none;
    mix-blend-mode: screen;
}

body.home-page .today-sea-maplet-coast::after {
    right: 9%;
    top: 7%;
    width: 44%;
    height: 84%;
    border-right-color: rgba(238, 253, 255, 0.55);
    border-top-color: rgba(238, 253, 255, 0.24);
    box-shadow: 8px 0 0 -7px rgba(238, 253, 255, 0.18);
    opacity: 0.84;
}

body.home-page .today-sea-maplet-wake {
    left: 19%;
    right: 10%;
    bottom: 14%;
    height: 32%;
    border: 1px solid rgba(150, 215, 231, 0.12);
    border-color: rgba(190, 235, 246, 0.16) transparent transparent rgba(190, 235, 246, 0.08);
    border-radius: 45% 55% 48% 52% / 62% 42% 58% 38%;
    background:
        linear-gradient(150deg, rgba(118, 195, 214, 0.16), rgba(52, 115, 139, 0.11) 52%, rgba(7, 34, 54, 0) 78%),
        repeating-linear-gradient(172deg, rgba(220, 248, 255, 0.055) 0 1px, transparent 1px 11px);
    filter: none;
    opacity: 0.72;
    transform: rotate(calc(var(--map-route-rotate) * 0.35));
    transform-origin: center;
    transition:
        opacity 320ms ease,
        transform 320ms ease;
}

body.home-page .today-sea-maplet[data-map="palau"] .today-sea-maplet-coast,
body.home-page .today-sea-maplet[data-map="coron"] .today-sea-maplet-coast {
    clip-path: polygon(12% 0, 78% 0, 100% 20%, 80% 34%, 92% 54%, 66% 63%, 72% 86%, 38% 100%, 18% 75%, 0 58%, 16% 38%, 0 18%);
    border-radius: 44% 56% 64% 36% / 48% 52% 42% 58%;
}

body.home-page .today-sea-maplet[data-map="maldives"] .today-sea-maplet-coast,
body.home-page .today-sea-maplet[data-map="rangiroa"] .today-sea-maplet-coast,
body.home-page .today-sea-maplet[data-map="belize"] .today-sea-maplet-coast {
    clip-path: polygon(18% 8%, 58% 0, 86% 18%, 72% 34%, 96% 50%, 68% 60%, 78% 78%, 48% 92%, 22% 84%, 0 64%, 18% 44%, 4% 24%);
    border-radius: 58% 42% 54% 46% / 42% 62% 38% 58%;
}

body.home-page .today-sea-maplet[data-map="komodo"] .today-sea-maplet-coast,
body.home-page .today-sea-maplet[data-map="alor"] .today-sea-maplet-coast,
body.home-page .today-sea-maplet[data-map="bohol"] .today-sea-maplet-coast {
    clip-path: polygon(0 18%, 26% 0, 70% 10%, 86% 28%, 70% 42%, 100% 56%, 72% 66%, 80% 90%, 48% 100%, 28% 82%, 8% 90%, 0 62%);
    border-radius: 28% 72% 40% 60% / 54% 42% 58% 46%;
}

body.home-page .today-sea-maplet[data-map="lembeh"] .today-sea-maplet-coast,
body.home-page .today-sea-maplet[data-map="bunaken"] .today-sea-maplet-coast,
body.home-page .today-sea-maplet[data-map="sipadan"] .today-sea-maplet-coast,
body.home-page .today-sea-maplet[data-map="mabul"] .today-sea-maplet-coast {
    clip-path: polygon(0 0, 58% 0, 78% 12%, 68% 28%, 90% 38%, 58% 52%, 66% 72%, 44% 88%, 22% 76%, 4% 88%, 0 58%);
    border-radius: 34% 66% 46% 54% / 38% 58% 42% 62%;
}

body.home-page .today-sea-maplet {
    width: 106px;
    min-height: 92px;
    padding: 0;
    border-color: rgba(211, 243, 252, 0.24);
    background:
        linear-gradient(180deg, rgba(226, 247, 252, 0.05), rgba(226, 247, 252, 0) 32%),
        linear-gradient(150deg, rgba(12, 47, 66, 0.94), rgba(5, 28, 46, 0.92) 56%, rgba(2, 15, 29, 0.94));
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.14),
        inset 0 -18px 28px rgba(1, 9, 18, 0.2),
        0 0 0 1px rgba(214, 246, 255, 0.08),
        0 14px 28px rgba(1, 9, 18, 0.22);
}

body.home-page .today-sea-maplet::before,
body.home-page .today-sea-maplet::after {
    display: none;
}

body.home-page .today-sea-maplet-svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
    display: block;
    z-index: 1;
}

body.home-page .today-sea-maplet-bg {
    fill: rgba(5, 28, 47, 0.64);
}

body.home-page .today-sea-maplet-grid-line {
    fill: none;
    stroke: rgba(208, 239, 247, 0.1);
    stroke-width: 0.55;
    vector-effect: non-scaling-stroke;
}

body.home-page .today-sea-maplet-contour {
    fill: none;
    stroke: rgba(188, 225, 235, 0.34);
    stroke-width: 0.9;
    stroke-linecap: round;
    stroke-linejoin: round;
    vector-effect: non-scaling-stroke;
}

body.home-page .today-sea-maplet-contour.is-inner {
    stroke: rgba(188, 225, 235, 0.24);
    stroke-dasharray: 4 4;
}

body.home-page .today-sea-maplet-coast-shape {
    fill: url("#todaySeaMapletLandPattern");
    stroke: rgba(216, 231, 217, 0.72);
    stroke-width: 1;
    stroke-linejoin: round;
    vector-effect: non-scaling-stroke;
    filter: drop-shadow(0.8px 1.2px 1.2px rgba(0, 9, 18, 0.2));
    paint-order: stroke fill;
}

body.home-page .today-sea-maplet-shelf-shape {
    fill: url("#todaySeaMapletReefPattern");
    stroke: rgba(175, 220, 219, 0.4);
    stroke-width: 0.75;
    stroke-linejoin: round;
    vector-effect: non-scaling-stroke;
}

body.home-page .today-sea-maplet-route-line {
    fill: none;
    stroke: rgba(232, 246, 243, 0.58);
    stroke-width: 0.95;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 4.5 3.2;
    stroke-dashoffset: 0;
    vector-effect: non-scaling-stroke;
}

body.home-page .today-sea-maplet-point {
    vector-effect: non-scaling-stroke;
}

body.home-page .today-sea-maplet-point.is-main {
    fill: rgba(5, 31, 48, 0.72);
    stroke: rgba(238, 251, 248, 0.88);
    stroke-width: 1.2;
    filter: none;
}

body.home-page .today-sea-maplet-point.is-sub {
    fill: rgba(5, 30, 46, 0.48);
    stroke: rgba(194, 230, 234, 0.54);
    stroke-width: 0.9;
}

body.home-page .today-sea-maplet-bearing,
body.home-page .today-sea-maplet-sounding,
body.home-page .today-sea-maplet-scale,
body.home-page .today-sea-maplet-grid-line {
    transition:
        opacity 260ms ease,
        transform 420ms cubic-bezier(0.2, 0.78, 0.22, 1),
        filter 420ms ease;
    transform-origin: 50% 50%;
}

body.home-page .today-sea-maplet-bearing {
    fill: rgba(218, 242, 246, 0.58);
    font-size: 8px;
    font-weight: 700;
    letter-spacing: 0.16em;
}

body.home-page .today-sea-maplet-label {
    fill: rgba(226, 237, 226, 0.48);
    font-size: 4.9px;
    font-weight: 700;
    letter-spacing: 0.09em;
    pointer-events: none;
    text-shadow: 0 1px 2px rgba(0, 10, 18, 0.35);
}

body.home-page .today-sea-maplet-label.is-reef {
    fill: rgba(188, 226, 224, 0.44);
}

body.home-page .today-sea-maplet-sounding {
    fill: rgba(194, 224, 230, 0.42);
    font-size: 5.5px;
    font-weight: 600;
    letter-spacing: 0.04em;
}

body.home-page .today-sea-maplet-scale {
    fill: none;
    stroke: rgba(218, 243, 246, 0.34);
    stroke-width: 0.85;
    stroke-linecap: round;
    vector-effect: non-scaling-stroke;
}

body.home-page .today-sea-maplet-coast-shape,
body.home-page .today-sea-maplet-shelf-shape,
body.home-page .today-sea-maplet-route-line,
body.home-page .today-sea-maplet-contour,
body.home-page .today-sea-maplet-point,
body.home-page .today-sea-maplet-label {
    transition:
        opacity 260ms ease,
        transform 560ms cubic-bezier(0.18, 0.78, 0.22, 1),
        filter 560ms ease,
        stroke-dashoffset 780ms cubic-bezier(0.18, 0.78, 0.22, 1);
    transform-origin: 50% 50%;
}

body.home-page .today-sea-maplet.is-map-exiting .today-sea-maplet-coast-shape,
body.home-page .today-sea-maplet.is-map-exiting .today-sea-maplet-shelf-shape,
body.home-page .today-sea-maplet.is-map-exiting .today-sea-maplet-route-line,
body.home-page .today-sea-maplet.is-map-exiting .today-sea-maplet-contour,
body.home-page .today-sea-maplet.is-map-exiting .today-sea-maplet-point,
body.home-page .today-sea-maplet.is-map-exiting .today-sea-maplet-label,
body.home-page .today-sea-maplet.is-map-exiting .today-sea-maplet-bearing,
body.home-page .today-sea-maplet.is-map-exiting .today-sea-maplet-sounding,
body.home-page .today-sea-maplet.is-map-exiting .today-sea-maplet-scale {
    opacity: 0.12;
    transform: translate3d(-6px, 7px, 0) scale(0.96);
    filter: blur(1.4px);
}

body.home-page .today-sea-maplet-echo-layer {
    pointer-events: none;
    transform-box: fill-box;
    transform-origin: 50% 50%;
}

body.home-page .today-sea-maplet-echo-layer .today-sea-maplet-echo-mark {
    transform-box: fill-box;
    transform-origin: 50% 50%;
}

body.home-page .today-sea-maplet-echo-layer .today-sea-maplet-route-line {
    stroke-dasharray: 4.5 3.2;
}

body.home-page .today-sea-maplet-echo-layer.is-retiring {
    animation: today-sea-maplet-echo-retire 720ms cubic-bezier(0.24, 0.7, 0.2, 1) both;
}

body.home-page .today-sea-maplet-echo-layer.is-retiring .today-sea-maplet-contour {
    animation: today-sea-maplet-echo-line-retire 580ms ease both;
}

body.home-page .today-sea-maplet-echo-layer.is-retiring .today-sea-maplet-route-line {
    animation: today-sea-maplet-echo-route-retire 640ms ease both;
}

body.home-page .today-sea-maplet-echo-layer.is-retiring .today-sea-maplet-point {
    animation: today-sea-maplet-echo-point-retire 540ms ease both;
}

body.home-page .today-sea-maplet.is-changing .today-sea-maplet-coast-shape,
body.home-page .today-sea-maplet.is-changing .today-sea-maplet-shelf-shape,
body.home-page .today-sea-maplet.is-changing .today-sea-maplet-route-line,
body.home-page .today-sea-maplet.is-changing .today-sea-maplet-contour,
body.home-page .today-sea-maplet.is-changing .today-sea-maplet-point,
body.home-page .today-sea-maplet.is-changing .today-sea-maplet-label {
    animation: today-sea-maplet-svg-read 920ms cubic-bezier(0.18, 0.78, 0.22, 1) both;
}

body.home-page .today-sea-maplet.is-changing .today-sea-maplet-contour {
    animation-name: today-sea-maplet-contour-read;
    animation-delay: 40ms;
}

body.home-page .today-sea-maplet.is-changing .today-sea-maplet-shelf-shape {
    animation-delay: 120ms;
}

body.home-page .today-sea-maplet.is-changing .today-sea-maplet-coast-shape {
    animation-delay: 190ms;
}

body.home-page .today-sea-maplet.is-changing .today-sea-maplet-route-line {
    animation-name: today-sea-maplet-route-read;
    animation-delay: 300ms;
    stroke-dasharray: var(--today-map-route-length, 38) var(--today-map-route-length, 38);
    stroke-dashoffset: var(--today-map-route-length, 38);
}

body.home-page .today-sea-maplet.is-changing .today-sea-maplet-point {
    animation-name: today-sea-maplet-point-read;
    animation-delay: 420ms;
}

body.home-page .today-sea-maplet.is-changing .today-sea-maplet-label,
body.home-page .today-sea-maplet.is-changing .today-sea-maplet-bearing {
    animation-name: today-sea-maplet-label-read;
    animation-delay: 500ms;
}

@keyframes today-sea-maplet-svg-read {
    0% {
        opacity: 0;
        transform: translate3d(7px, -8px, 0) scale(0.95);
        filter: blur(1.8px);
    }

    46% {
        opacity: 0.78;
        transform: translate3d(-1px, 1.5px, 0) scale(1.01);
        filter: blur(0.2px);
    }

    100% {
        opacity: 1;
        transform: translate3d(0, 0, 0);
        filter: blur(0);
    }
}

@keyframes today-sea-maplet-contour-read {
    0% {
        opacity: 0;
        transform: translate3d(4px, -5px, 0);
        filter: blur(1.4px);
    }

    100% {
        opacity: 1;
        transform: translate3d(0, 0, 0);
        filter: blur(0);
    }
}

@keyframes today-sea-maplet-route-read {
    0% {
        opacity: 0;
        stroke-dasharray: var(--today-map-route-length, 38) var(--today-map-route-length, 38);
        stroke-dashoffset: var(--today-map-route-length, 38);
        transform: translate3d(-5px, 4px, 0);
        filter: blur(1.1px);
    }

    62% {
        opacity: 0.85;
    }

    100% {
        opacity: 1;
        stroke-dasharray: 4.5 3.2;
        stroke-dashoffset: 0;
        transform: translate3d(0, 0, 0);
        filter: blur(0);
    }
}

@keyframes today-sea-maplet-echo-retire {
    0% {
        opacity: 0.96;
        transform: translate3d(0, 0, 0) scale(1);
        filter: blur(0);
    }

    42% {
        opacity: 0.52;
        transform: translate3d(-3px, 5px, 0) scale(0.985);
        filter: blur(0.45px);
    }

    100% {
        opacity: 0;
        transform: translate3d(-9px, 13px, 0) scale(0.94);
        filter: blur(1.6px);
    }
}

@keyframes today-sea-maplet-echo-line-retire {
    0% {
        stroke-dashoffset: 0;
    }

    100% {
        stroke-dashoffset: 18;
    }
}

@keyframes today-sea-maplet-echo-route-retire {
    0% {
        stroke-dashoffset: 0;
        opacity: 0.8;
    }

    100% {
        stroke-dashoffset: -24;
        opacity: 0;
    }
}

@keyframes today-sea-maplet-echo-point-retire {
    0% {
        opacity: 1;
        transform: scale(1);
    }

    100% {
        opacity: 0;
        transform: scale(0.42);
    }
}

@keyframes today-sea-maplet-point-read {
    0% {
        opacity: 0;
        transform: scale(0.35);
        filter: blur(1.2px);
    }

    54% {
        opacity: 1;
        transform: scale(1.18);
        filter: blur(0);
    }

    100% {
        opacity: 1;
        transform: scale(1);
        filter: blur(0);
    }
}

@keyframes today-sea-maplet-label-read {
    0% {
        opacity: 0;
        transform: translate3d(0, 4px, 0);
        filter: blur(0.8px);
    }

    100% {
        opacity: 1;
        transform: translate3d(0, 0, 0);
        filter: blur(0);
    }
}

body.home-page .hero-hotspots-shell .bamboo-card.is-active .bamboo-card-image {
    filter: saturate(1.12) contrast(1.14) brightness(0.965);
}

body.home-page .hero-hotspots-shell .bamboo-card.is-active .bamboo-card-image-wrapper::after {
    background:
        linear-gradient(180deg, rgba(0, 7, 15, 0.1) 0%, rgba(0, 7, 15, 0.08) 36%, rgba(1, 8, 17, 0.7) 74%, rgba(0, 5, 12, 0.98) 100%),
        radial-gradient(ellipse at 24% 88%, rgba(18, 102, 134, 0.36), rgba(18, 102, 134, 0) 58%),
        linear-gradient(90deg, rgba(0, 7, 15, 0.08), transparent 18%, transparent 82%, rgba(0, 7, 15, 0.08));
    opacity: 0.94;
}

body.home-page .hero-hotspots-shell .bamboo-card.is-active .bamboo-card-content {
    background:
        linear-gradient(180deg, rgba(2, 13, 24, 0), rgba(2, 13, 24, 0.56) 24%, rgba(1, 8, 17, 0.99) 100%),
        radial-gradient(ellipse at 18% 94%, rgba(13, 82, 104, 0.5), rgba(13, 82, 104, 0) 64%);
}

body.home-page .hero-hotspots-shell .bamboo-card.is-prev .bamboo-card-image,
body.home-page .hero-hotspots-shell .bamboo-card.is-next .bamboo-card-image {
    filter: saturate(1.04) contrast(1.08) brightness(0.92);
}

body.home-page .hero-hotspots-shell .bamboo-card.is-prev .bamboo-card-image-wrapper::after,
body.home-page .hero-hotspots-shell .bamboo-card.is-next .bamboo-card-image-wrapper::after {
    opacity: 0.82;
}

body.home-page .hero-hotspots-shell .bamboo-card.is-prev .bamboo-card-content,
body.home-page .hero-hotspots-shell .bamboo-card.is-next .bamboo-card-content {
    background:
        linear-gradient(180deg, rgba(2, 13, 24, 0.02), rgba(2, 13, 24, 0.61) 38%, rgba(1, 9, 18, 0.96) 100%);
}

body.home-page .hero-hotspots-shell .bamboo-card.is-prev .bamboo-card-tagline,
body.home-page .hero-hotspots-shell .bamboo-card.is-next .bamboo-card-tagline {
    color: rgba(226, 244, 250, 0.86);
}

body.home-page .today-sea-progress-copy::before {
    content: "海层阅读";
    color: rgba(190, 229, 241, 0.7);
}

body.home-page .today-sea-progress-copy strong {
    color: rgba(236, 249, 253, 0.9);
    font-weight: 650;
    text-shadow: 0 8px 20px rgba(1, 9, 18, 0.28);
}

body.home-page .today-sea-progress-copy strong::after {
    content: "片海域";
    color: rgba(213, 236, 244, 0.62);
}

body.home-page .today-sea-progress-orbit {
    opacity: 0.82;
    background:
        radial-gradient(circle at 50% 50%, rgba(4, 22, 36, 0.9) 0 42%, rgba(127, 209, 234, 0.12) 43% 45%, transparent 46%),
        conic-gradient(from -18deg, rgba(177, 232, 246, 0.66) var(--brief-progress), rgba(177, 232, 246, 0.1) 0);
}

body.home-page .today-sea-progress-copy p {
    color: rgba(213, 237, 245, 0.78);
}

/* 今日海域：下方海域档案承接层精修 */
body.home-page .today-sea-brief {
    isolation: isolate;
    align-items: stretch;
}

body.home-page .today-sea-brief::before {
    content: "";
    position: absolute;
    z-index: 0;
    left: clamp(34px, 4vw, 58px);
    right: clamp(34px, 4vw, 58px);
    top: 13px;
    height: 1px;
    background: linear-gradient(90deg, rgba(207, 241, 250, 0), rgba(207, 241, 250, 0.16), rgba(207, 241, 250, 0));
    pointer-events: none;
}

body.home-page .today-sea-brief::after {
    content: "";
    position: absolute;
    z-index: 2;
    inset: 4px clamp(24px, 3vw, 42px);
    border-radius: 12px;
    background:
        linear-gradient(100deg, rgba(229, 250, 255, 0) 0%, rgba(229, 250, 255, 0.07) 30%, rgba(225, 249, 255, 0.24) 48%, rgba(157, 223, 238, 0.12) 66%, rgba(157, 223, 238, 0) 100%);
    filter: blur(8px);
    opacity: 0;
    mix-blend-mode: screen;
    pointer-events: none;
    transform: translate3d(-24%, 0, 0) scaleX(0.88);
}

body.home-page .today-sea-brief.is-updating::after,
body.home-page .today-sea-brief.is-reading::after {
    animation: today-sea-brief-water-sheen 940ms cubic-bezier(0.2, 0.72, 0.22, 1) both;
}

body.home-page .today-sea-brief-panel {
    z-index: 1;
    border-color: rgba(222, 249, 255, 0.2);
    background:
        linear-gradient(180deg, rgba(14, 51, 72, 0.66), rgba(3, 20, 33, 0.56)),
        radial-gradient(circle at 16% 0%, rgba(231, 252, 255, 0.13), rgba(231, 252, 255, 0) 50%),
        linear-gradient(115deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0) 38%);
    box-shadow:
        0 22px 48px rgba(1, 9, 18, 0.26),
        0 0 0 1px rgba(222, 249, 255, 0.04),
        inset 0 1px 0 rgba(255, 255, 255, 0.13),
        inset 0 -18px 34px rgba(1, 9, 18, 0.12);
}

body.home-page .today-sea-brief-panel::before {
    border-top-color: rgba(242, 254, 255, 0.12);
    background:
        linear-gradient(90deg, rgba(246, 253, 255, 0.09), rgba(246, 253, 255, 0) 26%),
        linear-gradient(180deg, rgba(148, 220, 239, 0.06), rgba(148, 220, 239, 0));
}

body.home-page .today-sea-brief-kicker {
    display: flex;
    align-items: center;
    gap: 10px;
    color: rgba(192, 232, 244, 0.78);
    font-weight: 600;
}

body.home-page .today-sea-brief-kicker::after {
    content: "";
    flex: 1 1 auto;
    height: 1px;
    min-width: 20px;
    background: linear-gradient(90deg, rgba(185, 230, 243, 0.3), rgba(185, 230, 243, 0));
}

body.home-page .today-sea-position-panel {
    align-items: center;
    column-gap: clamp(14px, 1.4vw, 20px);
}

body.home-page .today-sea-position-panel .today-sea-brief-copy {
    align-self: end;
    padding-top: 2px;
}

body.home-page .today-sea-brief-copy h3 {
    margin-bottom: 6px;
}

body.home-page .today-sea-brief-copy p {
    margin-bottom: 2px;
}

body.home-page .today-sea-brief-link {
    align-self: start;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    min-height: 24px;
    color: rgba(229, 247, 253, 0.84);
    text-shadow: 0 8px 18px rgba(1, 9, 18, 0.24);
}

body.home-page .today-sea-brief-link::before {
    content: "";
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: rgba(173, 230, 243, 0.7);
    box-shadow: 0 0 10px rgba(126, 207, 235, 0.24);
}

body.home-page .today-sea-brief-link::after {
    margin-left: 0;
    background: linear-gradient(90deg, rgba(173, 230, 243, 0.72), rgba(173, 230, 243, 0));
}

body.home-page .today-sea-data-panel {
    gap: clamp(9px, 1vh, 13px);
}

body.home-page .today-sea-data-grid {
    position: relative;
    min-height: clamp(68px, 8vh, 82px);
    padding: 6px clamp(6px, 0.7vw, 10px);
    border: 1px solid rgba(218, 247, 255, 0.08);
    border-radius: 8px;
    background:
        linear-gradient(180deg, rgba(7, 37, 56, 0.26), rgba(2, 15, 27, 0.18)),
        linear-gradient(90deg, rgba(217, 247, 255, 0.04), rgba(217, 247, 255, 0) 22% 78%, rgba(217, 247, 255, 0.03));
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.06),
        inset 0 -12px 24px rgba(1, 9, 18, 0.1);
}

body.home-page .today-sea-data-grid::before {
    content: "";
    position: absolute;
    left: 12px;
    right: 12px;
    bottom: 8px;
    height: 1px;
    background: linear-gradient(90deg, rgba(198, 237, 248, 0), rgba(198, 237, 248, 0.09), rgba(198, 237, 248, 0));
    pointer-events: none;
    opacity: 0.72;
}

body.home-page .today-sea-data-item {
    display: grid;
    align-content: center;
    padding: 4px clamp(7px, 0.85vw, 12px);
    border-radius: 7px;
    background: linear-gradient(180deg, rgba(229, 252, 255, 0.035), rgba(229, 252, 255, 0));
}

body.home-page .today-sea-data-item + .today-sea-data-item::before {
    top: 10px;
    bottom: 10px;
    background: linear-gradient(180deg, transparent, rgba(205, 239, 249, 0.18), transparent);
}

body.home-page .today-sea-data-grid dt {
    gap: 7px;
    margin-bottom: 8px;
    color: rgba(198, 232, 243, 0.82);
    font-weight: 600;
}

body.home-page .today-sea-data-icon {
    width: 24px;
    height: 24px;
    flex-basis: 24px;
    opacity: 1;
    background:
        radial-gradient(circle at 50% 42%, rgba(151, 232, 243, 0.3), rgba(24, 87, 111, 0.28) 62%, rgba(8, 37, 57, 0.18));
    box-shadow:
        0 0 0 1px rgba(211, 246, 255, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.12),
        0 0 15px rgba(126, 207, 235, 0.12);
}

body.home-page .today-sea-data-grid dd {
    color: rgba(246, 253, 255, 0.94);
    font-weight: 650;
    letter-spacing: 0.01em;
}

body.home-page .today-sea-progress-panel {
    align-items: center;
    grid-template-columns: clamp(58px, 5.4vw, 70px) minmax(0, 1fr);
    column-gap: clamp(12px, 1.25vw, 18px);
}

body.home-page .today-sea-progress-orbit {
    width: clamp(56px, 5vw, 66px);
    height: clamp(56px, 5vw, 66px);
    align-self: center;
    justify-self: center;
    opacity: 0.76;
    background:
        radial-gradient(circle at 50% 50%, rgba(4, 22, 36, 0.9) 0 43%, rgba(122, 207, 232, 0.1) 44% 47%, transparent 48%),
        conic-gradient(from -20deg, rgba(181, 232, 246, 0.58) var(--brief-progress), rgba(181, 232, 246, 0.1) 0);
    box-shadow:
        inset 0 0 0 1px rgba(229, 248, 255, 0.1),
        0 0 22px rgba(126, 207, 235, 0.08);
}

body.home-page .today-sea-progress-orbit span {
    inset: clamp(11px, 1vw, 13px);
    border-color: rgba(229, 248, 255, 0.1);
}

body.home-page .today-sea-progress-copy {
    align-self: center;
    display: grid;
    gap: 3px;
}

body.home-page .today-sea-progress-copy::before {
    content: "海域阅读记录";
    margin-bottom: 1px;
    color: rgba(192, 229, 240, 0.72);
    font-size: 0.62rem;
    line-height: 1;
    letter-spacing: 0.18em;
}

body.home-page .today-sea-progress-copy strong {
    display: flex;
    align-items: baseline;
    gap: 7px;
    margin-bottom: 0;
    font-size: clamp(1.08rem, 1.14vw, 1.32rem);
    font-weight: 620;
}

body.home-page .today-sea-progress-copy strong::after {
    margin-left: 0;
    color: rgba(210, 235, 243, 0.66);
    font-size: 0.58rem;
    font-weight: 500;
    letter-spacing: 0.14em;
}

body.home-page .today-sea-progress-copy span {
    margin-bottom: 0;
    color: rgba(215, 238, 246, 0.72);
    font-size: 0.78rem;
}

body.home-page .today-sea-progress-copy p {
    max-width: 23em;
    color: rgba(213, 237, 245, 0.76);
    line-height: 1.46;
}

/* 今日海域：最终间距与读数轻量化微调 */
body.home-page .today-sea-brief {
    margin-top: clamp(6px, 0.9vh, 10px);
}

body.home-page .today-sea-data-grid {
    border-color: rgba(218, 247, 255, 0.06);
    background:
        radial-gradient(ellipse at 18% 0%, rgba(220, 249, 255, 0.055), rgba(220, 249, 255, 0) 56%),
        linear-gradient(180deg, rgba(13, 58, 78, 0.16), rgba(3, 22, 36, 0.08)),
        linear-gradient(90deg, rgba(217, 247, 255, 0.028), rgba(217, 247, 255, 0) 24% 76%, rgba(217, 247, 255, 0.024));
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.045),
        inset 0 -10px 20px rgba(1, 9, 18, 0.06);
}

body.home-page .today-sea-data-grid::before {
    background: linear-gradient(90deg, rgba(198, 237, 248, 0), rgba(198, 237, 248, 0.065), rgba(198, 237, 248, 0));
    opacity: 0.58;
}

body.home-page .today-sea-data-item {
    background:
        radial-gradient(ellipse at 50% 0%, rgba(229, 252, 255, 0.045), rgba(229, 252, 255, 0) 62%);
}

body.home-page .today-sea-data-item + .today-sea-data-item::before {
    background: linear-gradient(180deg, transparent, rgba(205, 239, 249, 0.14), transparent);
}

body.home-page .today-sea-data-icon {
    background:
        radial-gradient(circle at 50% 42%, rgba(151, 232, 243, 0.26), rgba(24, 87, 111, 0.22) 62%, rgba(8, 37, 57, 0.12));
    box-shadow:
        0 0 0 1px rgba(211, 246, 255, 0.085),
        inset 0 1px 0 rgba(255, 255, 255, 0.1),
        0 0 13px rgba(126, 207, 235, 0.1);
}

body.home-page .hero-hotspots-shell .bamboo-card.is-prev .bamboo-card-title,
body.home-page .hero-hotspots-shell .bamboo-card.is-next .bamboo-card-title {
    color: rgba(248, 254, 255, 0.97);
    text-shadow: 0 9px 24px rgba(1, 9, 18, 0.78);
}

body.home-page .hero-hotspots-shell .bamboo-card.is-prev .bamboo-card-tagline,
body.home-page .hero-hotspots-shell .bamboo-card.is-next .bamboo-card-tagline {
    color: rgba(229, 245, 250, 0.9);
    text-shadow: 0 8px 22px rgba(1, 9, 18, 0.64);
}

body.home-page .hero-hotspots-shell .bamboo-card.is-prev .bamboo-card-price,
body.home-page .hero-hotspots-shell .bamboo-card.is-next .bamboo-card-price {
    color: rgba(232, 247, 252, 0.88);
}

body.home-page .hero-hotspots-shell .bamboo-card.is-prev .bamboo-card-flow,
body.home-page .hero-hotspots-shell .bamboo-card.is-next .bamboo-card-flow {
    color: rgba(209, 238, 245, 0.88);
    text-shadow: 0 7px 18px rgba(1, 9, 18, 0.5);
}

/* 今日海域：档案切换动画与轮播稳定性 */
body.home-page .today-sea-brief-panel {
    transition:
        opacity 260ms ease,
        transform 260ms cubic-bezier(0.28, 0.64, 0.24, 1),
        filter 260ms ease,
        border-color 360ms ease,
        box-shadow 420ms ease;
    transform-origin: 50% 72%;
}

body.home-page .today-sea-brief.is-updating .today-sea-brief-panel {
    opacity: 0.58;
    transform: translate3d(0, 8px, 0);
    filter: blur(0.38px);
}

body.home-page .today-sea-brief.is-updating .today-sea-maplet,
body.home-page .today-sea-brief.is-updating .today-sea-brief-copy,
body.home-page .today-sea-brief.is-updating .today-sea-data-item,
body.home-page .today-sea-brief.is-updating .today-sea-progress-orbit,
body.home-page .today-sea-brief.is-updating .today-sea-progress-copy {
    opacity: 0.24;
    transform: translate3d(0, 11px, 0);
    filter: blur(0.82px);
    transition:
        opacity 260ms ease,
        transform 260ms cubic-bezier(0.28, 0.64, 0.24, 1),
        filter 260ms ease;
}

body.home-page .today-sea-brief.is-updating .today-sea-maplet {
    opacity: 0.7;
    transform: translate3d(0, 5px, 0) scale(0.994);
    filter: none;
}

body.home-page .today-sea-brief.is-updating .today-sea-progress-orbit {
    transform: translate3d(0, 10px, 0) scale(0.92) rotate(-10deg);
}

body.home-page .today-sea-brief.is-updating .today-sea-position-panel {
    transition-delay: 0ms;
}

body.home-page .today-sea-brief.is-updating .today-sea-data-panel {
    transition-delay: 44ms;
}

body.home-page .today-sea-brief.is-updating .today-sea-progress-panel {
    transition-delay: 88ms;
}

body.home-page .today-sea-brief.is-reading .today-sea-brief-panel {
    animation: today-sea-brief-read-in 520ms cubic-bezier(0.18, 0.72, 0.22, 1) both;
}

body.home-page .today-sea-brief.is-reading .today-sea-position-panel {
    animation-delay: 0ms;
}

body.home-page .today-sea-brief.is-reading .today-sea-data-panel {
    animation-delay: 70ms;
}

body.home-page .today-sea-brief.is-reading .today-sea-progress-panel {
    animation-delay: 130ms;
}

body.home-page .today-sea-brief.is-reading .today-sea-maplet,
body.home-page .today-sea-brief.is-reading .today-sea-brief-copy {
    animation: today-sea-content-read-in 560ms cubic-bezier(0.18, 0.72, 0.22, 1) both;
}

body.home-page .today-sea-brief.is-reading .today-sea-maplet {
    animation-delay: 0ms;
}

body.home-page .today-sea-brief.is-reading .today-sea-brief-copy {
    animation-delay: 55ms;
}

body.home-page .today-sea-brief.is-reading .today-sea-maplet-point.is-main {
    animation: today-sea-map-point-read 560ms ease-out both;
}

body.home-page .today-sea-brief.is-reading .today-sea-data-item {
    animation: today-sea-data-read 560ms cubic-bezier(0.18, 0.72, 0.22, 1) both;
}

body.home-page .today-sea-brief.is-reading .today-sea-data-grid dd {
    animation: today-sea-data-value-read 640ms cubic-bezier(0.18, 0.72, 0.22, 1) both;
}

body.home-page .today-sea-brief.is-reading .today-sea-data-item:nth-child(1),
body.home-page .today-sea-brief.is-reading .today-sea-data-item:nth-child(1) dd {
    animation-delay: 20ms;
}

body.home-page .today-sea-brief.is-reading .today-sea-data-item:nth-child(2),
body.home-page .today-sea-brief.is-reading .today-sea-data-item:nth-child(2) dd {
    animation-delay: 90ms;
}

body.home-page .today-sea-brief.is-reading .today-sea-data-item:nth-child(3),
body.home-page .today-sea-brief.is-reading .today-sea-data-item:nth-child(3) dd {
    animation-delay: 160ms;
}

body.home-page .today-sea-brief.is-reading .today-sea-data-item:nth-child(4),
body.home-page .today-sea-brief.is-reading .today-sea-data-item:nth-child(4) dd {
    animation-delay: 230ms;
}

body.home-page .today-sea-brief.is-reading .today-sea-data-grid dd.today-sea-type-line {
    animation: today-sea-type-line-in 780ms cubic-bezier(0.18, 0.78, 0.22, 1) both;
    animation-delay: var(--today-sea-line-delay, 0ms);
}

body.home-page .today-sea-brief.is-reading .today-sea-progress-orbit {
    animation: today-sea-progress-read 620ms cubic-bezier(0.18, 0.72, 0.22, 1) 110ms both;
}

body.home-page .today-sea-brief.is-reading .today-sea-progress-copy {
    animation: today-sea-content-read-in 560ms cubic-bezier(0.18, 0.72, 0.22, 1) 155ms both;
}

body.home-page .today-sea-brief.is-reading-current.is-awakened .today-sea-brief-copy,
body.home-page .today-sea-brief.is-reading-current.is-awakened .today-sea-progress-copy,
body.home-page .today-sea-brief.is-reading-current.is-awakened .today-sea-data-grid dd {
    transform: translate3d(0, 0, 0);
}

body.home-page .today-sea-brief.is-updating .today-sea-brief-copy h3,
body.home-page .today-sea-brief.is-updating .today-sea-brief-copy p,
body.home-page .today-sea-brief.is-updating .today-sea-brief-copy span,
body.home-page .today-sea-brief.is-updating .today-sea-data-grid dd,
body.home-page .today-sea-brief.is-updating .today-sea-progress-copy strong,
body.home-page .today-sea-brief.is-updating .today-sea-progress-copy span,
body.home-page .today-sea-brief.is-updating .today-sea-progress-copy p {
    animation: today-sea-type-line-out 280ms ease both;
}

body.home-page .today-sea-brief.is-updating .today-sea-brief-copy p {
    animation-delay: 28ms;
}

body.home-page .today-sea-brief.is-updating .today-sea-brief-copy span,
body.home-page .today-sea-brief.is-updating .today-sea-data-grid .today-sea-data-item:nth-child(2) dd {
    animation-delay: 56ms;
}

body.home-page .today-sea-brief.is-updating .today-sea-data-grid .today-sea-data-item:nth-child(3) dd,
body.home-page .today-sea-brief.is-updating .today-sea-progress-copy span {
    animation-delay: 84ms;
}

body.home-page .today-sea-brief.is-updating .today-sea-data-grid .today-sea-data-item:nth-child(4) dd,
body.home-page .today-sea-brief.is-updating .today-sea-progress-copy p {
    animation-delay: 112ms;
}

body.home-page .today-sea-type-line {
    position: relative;
    display: block;
    min-height: 1em;
    isolation: isolate;
    white-space: normal;
    opacity: 1;
    transform: translate3d(0, 0, 0);
    filter: blur(0);
    animation: today-sea-type-line-in 640ms cubic-bezier(0.18, 0.78, 0.22, 1) both;
    animation-delay: var(--today-sea-line-delay, 0ms);
    will-change: opacity, transform, filter;
}

body.home-page .today-sea-data-grid dd.today-sea-type-line,
body.home-page .today-sea-progress-copy strong.today-sea-type-line {
    white-space: nowrap;
}

body.home-page .today-sea-brief-copy p.today-sea-type-line,
body.home-page .today-sea-brief-copy span.today-sea-type-line,
body.home-page .today-sea-progress-copy span.today-sea-type-line,
body.home-page .today-sea-progress-copy p.today-sea-type-line {
    overflow: hidden;
}

body.home-page .today-sea-progress-copy strong.today-sea-type-line {
    display: block;
}

body.home-page .today-sea-type-line::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -2px;
    height: 1px;
    background: linear-gradient(90deg, rgba(177, 230, 244, 0), rgba(177, 230, 244, 0.42), rgba(177, 230, 244, 0));
    opacity: 0;
    transform: scaleX(0.24);
    transform-origin: left center;
    pointer-events: none;
}

body.home-page .today-sea-brief.is-reading-current.is-awakened .today-sea-type-line::after {
    animation: today-sea-type-line-scan 860ms cubic-bezier(0.18, 0.78, 0.22, 1) both;
    animation-delay: var(--today-sea-line-delay, 0ms);
}

body.home-page .today-sea-type-title {
    animation-duration: 780ms;
}

body.home-page .today-sea-brief .today-sea-type-line.today-sea-type-meta {
    color: rgba(230, 248, 253, 0.92);
}

body.home-page .today-sea-brief .today-sea-type-line.today-sea-type-reading,
body.home-page .today-sea-brief .today-sea-type-line.today-sea-type-progress {
    color: rgba(250, 254, 255, 0.98);
    text-shadow:
        0 0 12px rgba(126, 207, 235, 0.18),
        0 8px 18px rgba(1, 9, 18, 0.32);
}

body.home-page .today-sea-brief .today-sea-type-line.today-sea-type-note {
    color: rgba(232, 247, 252, 0.9);
}

body.home-page .today-sea-type-char {
    display: inline-block;
    font-size: inherit;
    line-height: inherit;
    font-weight: inherit;
    letter-spacing: inherit;
    opacity: 0;
    filter: blur(18px);
    transform: translate3d(0, 13px, 0);
    vertical-align: baseline;
    text-shadow: 0 0 0 rgba(198, 228, 241, 0);
    transition:
        opacity 0.24s ease,
        transform 0.24s ease,
        filter 0.24s ease,
        text-shadow 0.24s ease;
    will-change: opacity, transform, filter;
}

body.home-page .today-sea-brief .today-sea-type-line > .today-sea-type-char {
    display: inline-block;
    font-size: inherit;
    line-height: inherit;
    font-weight: inherit;
    letter-spacing: inherit;
}

body.home-page .today-sea-type-char.is-space {
    width: 0.3em;
}

body.home-page .today-sea-type-char.is-visible {
    animation: today-sea-char-mist-in 920ms cubic-bezier(0.18, 0.78, 0.22, 1) both;
    animation-delay: var(--today-sea-char-delay, 0ms);
}

body.home-page .today-sea-type-char.is-visible.is-stable {
    opacity: 1;
    filter: blur(0);
    transform: translate3d(0, 0, 0);
    animation: none;
    text-shadow: 0 9px 18px rgba(117, 177, 202, 0.14);
}

body.home-page .today-sea-type-reading .today-sea-type-char,
body.home-page .today-sea-type-progress .today-sea-type-char {
    filter: blur(15px);
    transform: translate3d(0, 11px, 0);
}

body.home-page .today-sea-type-reading .today-sea-type-char.is-visible,
body.home-page .today-sea-type-progress .today-sea-type-char.is-visible {
    animation-name: today-sea-reading-char-mist-in;
}

body.home-page .today-sea-type-reading .today-sea-type-char.is-visible.is-stable,
body.home-page .today-sea-type-progress .today-sea-type-char.is-visible.is-stable {
    animation: none;
    opacity: 1;
    filter: blur(0);
    transform: translate3d(0, 0, 0);
    text-shadow:
        0 0 10px rgba(181, 232, 246, 0.22),
        0 9px 18px rgba(1, 9, 18, 0.2);
}

body.home-page .today-sea-type-meta .today-sea-type-char.is-visible,
body.home-page .today-sea-type-note .today-sea-type-char.is-visible {
    text-shadow: 0 7px 14px rgba(117, 177, 202, 0.16);
}

body.home-page .today-sea-type-line.is-typed .today-sea-type-char.is-visible {
    transition-duration: 0.34s, 0.52s, 0.5s, 0.52s;
}

body.home-page .today-sea-brief.is-typed .today-sea-brief-copy h3,
body.home-page .today-sea-brief.is-typed .today-sea-data-grid dd,
body.home-page .today-sea-brief.is-typed .today-sea-progress-copy strong {
    animation: none;
    transform: none;
}

body.home-page .hero-bamboo-cards-wrapper.is-step-locked {
    cursor: default;
}

body.home-page .hero-bamboo-cards-wrapper.is-step-locked .bamboo-card:hover,
body.home-page .hero-bamboo-cards-wrapper.is-step-locked .bamboo-card.active:not(.is-active),
body.home-page .hero-bamboo-cards-wrapper.is-step-locked .bamboo-card.active:not(.is-active):hover {
    --card-scale: 1;
}

body.home-page .hero-bamboo-cards-wrapper.is-step-locked .bamboo-card:hover .bamboo-card-image {
    transform: scale(1.045);
}

/* 滚轮命中区修正：这些层只用于视觉裁剪，不应成为吞掉页面 wheel 的滚动容器。 */
body.home-page .featured-destinations,
body.home-page .dive-match,
body.home-page .curated-display-surface,
body.home-page .curated-display-media,
body.home-page .dive-match-stage,
body.home-page .dive-match-profile-panel,
body.home-page .dive-match-surface,
body.home-page .why-yanqi,
body.home-page .story-card,
body.home-page .footer {
    overflow: clip;
}

body.home-page .hero-hotspots-shell .scroll-arrow:disabled,
body.home-page .hero-hotspots-shell .scroll-arrow.is-step-locked {
    opacity: 0.56;
    cursor: default;
    filter: drop-shadow(0 10px 20px rgba(2, 14, 24, 0.16));
}

body.home-page .hero-hotspots-shell .scroll-arrow:disabled .button-top,
body.home-page .hero-hotspots-shell .scroll-arrow.is-step-locked .button-top {
    transform: translateY(0) scale(0.98);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.13),
        0 0 18px rgba(126, 207, 235, 0.08);
}

@keyframes today-sea-brief-read-in {
    0% {
        opacity: 0.62;
        transform: translate3d(0, -7px, 0);
        filter: blur(0.3px);
    }

    58% {
        opacity: 0.92;
        transform: translate3d(0, 2px, 0);
        filter: blur(0.08px);
    }

    100% {
        opacity: 1;
        transform: translate3d(0, 0, 0);
        filter: blur(0);
    }
}

@keyframes today-sea-data-read {
    0% {
        opacity: 0.26;
        transform: translate3d(0, -11px, 0);
        filter: blur(0.5px);
    }

    54% {
        opacity: 0.86;
        transform: translate3d(0, 2px, 0);
        filter: blur(0.08px);
    }

    100% {
        opacity: 1;
        transform: translate3d(0, 0, 0);
        filter: blur(0);
    }
}

@keyframes today-sea-data-value-read {
    0% {
        opacity: 0;
        transform: translate3d(0, -7px, 0);
        filter: blur(0.4px);
    }

    42% {
        opacity: 0.72;
        filter: blur(0.08px);
    }

    100% {
        opacity: 1;
        transform: translate3d(0, 0, 0);
        filter: blur(0);
    }
}

@keyframes today-sea-type-line-out {
    from {
        opacity: 1;
        transform: translate3d(0, 0, 0);
        filter: blur(0);
    }

    to {
        opacity: 0;
        transform: translate3d(0, 12px, 0);
        filter: blur(8px);
    }
}

@keyframes today-sea-type-line-in {
    0% {
        opacity: 0;
        transform: translate3d(0, 14px, 0);
        filter: blur(8px);
    }

    54% {
        opacity: 1;
        transform: translate3d(0, -1.5px, 0);
        filter: blur(0);
    }

    100% {
        opacity: 1;
        transform: translate3d(0, 0, 0);
        filter: blur(0);
    }
}

@keyframes today-sea-type-line-scan {
    0% {
        opacity: 0;
        transform: scaleX(0.16);
    }

    42% {
        opacity: 0.68;
    }

    100% {
        opacity: 0;
        transform: scaleX(1);
    }
}

@keyframes today-sea-char-mist-in {
    0% {
        opacity: 0;
        filter: blur(18px);
        transform: translate3d(0, 14px, 0);
        text-shadow: 0 0 0 rgba(198, 228, 241, 0);
    }

    18% {
        opacity: 0.36;
        filter: blur(15px);
        transform: translate3d(0, 10px, 0);
    }

    42% {
        opacity: 0.78;
        filter: blur(7px);
        transform: translate3d(0, 3px, 0);
        text-shadow:
            0 0 18px rgba(180, 229, 244, 0.24),
            0 10px 20px rgba(1, 9, 18, 0.18);
    }

    72% {
        opacity: 1;
        filter: blur(1.2px);
        transform: translate3d(0, -1px, 0);
        text-shadow:
            0 0 10px rgba(180, 229, 244, 0.2),
            0 9px 18px rgba(1, 9, 18, 0.14);
    }

    100% {
        opacity: 1;
        filter: blur(0);
        transform: translate3d(0, 0, 0);
        text-shadow: 0 9px 18px rgba(117, 177, 202, 0.18);
    }
}

@keyframes today-sea-reading-char-mist-in {
    0% {
        opacity: 0;
        filter: blur(16px);
        transform: translate3d(0, 12px, 0);
        text-shadow: 0 0 0 rgba(181, 232, 246, 0);
    }

    20% {
        opacity: 0.42;
        filter: blur(12px);
        transform: translate3d(0, 8px, 0);
    }

    46% {
        opacity: 0.88;
        filter: blur(5.5px);
        transform: translate3d(0, 2px, 0);
        text-shadow:
            0 0 20px rgba(181, 232, 246, 0.46),
            0 10px 18px rgba(1, 9, 18, 0.22);
    }

    76% {
        opacity: 1;
        filter: blur(0.9px);
        transform: translate3d(0, -1px, 0);
        text-shadow:
            0 0 14px rgba(181, 232, 246, 0.34),
            0 9px 18px rgba(1, 9, 18, 0.24);
    }

    100% {
        opacity: 1;
        filter: blur(0);
        transform: translate3d(0, 0, 0);
        text-shadow:
            0 0 10px rgba(181, 232, 246, 0.3),
            0 9px 18px rgba(1, 9, 18, 0.24);
    }
}

@keyframes today-sea-type-reading-settle {
    0% {
        text-shadow:
            0 0 16px rgba(181, 232, 246, 0.42),
            0 9px 18px rgba(1, 9, 18, 0.26);
    }

    100% {
        text-shadow:
            0 0 8px rgba(181, 232, 246, 0.16),
            0 8px 18px rgba(1, 9, 18, 0.24);
    }
}

@keyframes today-sea-map-point-read {
    0% {
        box-shadow:
            0 0 0 2px rgba(126, 207, 235, 0.06),
            0 0 8px rgba(126, 207, 235, 0.2);
    }

    42% {
        box-shadow:
            0 0 0 7px rgba(126, 207, 235, 0.13),
            0 0 18px rgba(126, 207, 235, 0.42);
    }

    100% {
        box-shadow:
            0 0 0 3px rgba(126, 207, 235, 0.1),
            0 0 13px rgba(126, 207, 235, 0.34);
    }
}

@keyframes today-sea-progress-read {
    0% {
        opacity: 0.38;
        transform: translate3d(0, -8px, 0) scale(0.84) rotate(-16deg);
        filter: blur(0.55px);
    }

    55% {
        opacity: 0.9;
        transform: translate3d(0, 1px, 0) scale(1.035) rotate(7deg);
        filter: blur(0.08px);
    }

    100% {
        opacity: 0.76;
        transform: translate3d(0, 0, 0) scale(1) rotate(0deg);
        filter: blur(0);
    }
}

@keyframes today-sea-type-title-settle {
    0% {
        transform: translate3d(0, 0, 0);
    }

    42% {
        transform: translate3d(0, -2px, 0);
    }

    100% {
        transform: translate3d(0, 0, 0);
    }
}

@keyframes today-sea-content-read-in {
    0% {
        opacity: 0;
        transform: translate3d(0, -13px, 0);
        filter: blur(0.55px);
    }

    48% {
        opacity: 0.82;
        transform: translate3d(0, 2px, 0);
        filter: blur(0.08px);
    }

    100% {
        opacity: 1;
        transform: translate3d(0, 0, 0);
        filter: blur(0);
    }
}

@keyframes today-sea-brief-water-sheen {
    0% {
        opacity: 0;
        transform: translate3d(-18%, 0, 0) scaleX(0.94);
    }

    34% {
        opacity: 0.3;
    }

    70% {
        opacity: 0.22;
    }

    100% {
        opacity: 0;
        transform: translate3d(24%, 0, 0) scaleX(1.04);
    }
}

/* Updated modern minimalist scroll arrow */
body.home-page .hero-hotspots-shell .scroll-arrow {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, 0.8);
    transition: all 0.3s ease;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}
body.home-page .hero-hotspots-shell .scroll-arrow:hover {
    background: rgba(255, 255, 255, 0.2);
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
}
body.home-page .hero-hotspots-shell .scroll-arrow:disabled {
    opacity: 0.3;
    cursor: not-allowed;
    transform: none;
}
.scroll-arrow-icon {
    width: 24px;
    height: 24px;
}

/* 首页重绘热点减负：保留海面层次，把大面积实时滤镜换成静态玻璃底。 */
body.home-page .curated-display-surface,
body.home-page .curated-display-media,
body.home-page .today-sea-brief,
body.home-page .today-sea-brief-panel {
    contain: paint;
}

body.home-page .curated-display-media {
    pointer-events: none;
    transform: translateZ(0);
}

body.home-page .curated-display-copy,
body.home-page .curated-display-sea-note,
body.home-page .today-sea-brief-panel {
    backface-visibility: hidden;
}

body.home-page.hero-awakened .today-sea-card {
    animation: none;
}

body.home-page .curated-display-media::after {
    animation: none;
    transform: none;
    opacity: 0.2;
}

body.home-page .curated-waters-stage,
body.home-page .curated-archive-wall {
    backdrop-filter: blur(10px) saturate(116%);
    -webkit-backdrop-filter: blur(10px) saturate(116%);
}

body.home-page .hero-hotspots-shell .bamboo-card,
body.home-page .hero-hotspots-shell .bamboo-card:hover,
body.home-page .hero-hotspots-shell .bamboo-card.active,
body.home-page .hero-hotspots-shell .bamboo-card.is-active {
    filter: none;
    transition:
        opacity 420ms cubic-bezier(0.18, 0.8, 0.22, 1),
        border-color 420ms ease,
        box-shadow 420ms ease;
}

body.home-page .hero-hotspots-shell .bamboo-card {
    backdrop-filter: blur(8px) saturate(118%);
    -webkit-backdrop-filter: blur(8px) saturate(118%);
}

body.home-page .today-sea-card,
body.home-page .today-sea-brief-panel {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

body.home-page .curated-display-image,
body.home-page .curated-display-surface.from-depth .curated-display-image,
body.home-page .curated-display-surface.is-entering .curated-display-image,
body.home-page .featured-destinations.is-stage-visible.is-stage-hydrated .curated-display-surface.is-active .curated-display-image,
body.home-page .curated-display-surface.is-leaving.to-depth .curated-display-image,
body.home-page .curated-display-surface.is-leaving.to-left .curated-display-image,
body.home-page .curated-display-surface.is-leaving.to-right .curated-display-image,
body.home-page .curated-waters-stage.curated-archive-wall .curated-display-image,
body.home-page .featured-destinations.is-stage-visible.is-stage-hydrated .curated-waters-stage.curated-archive-wall .curated-display-surface.is-active .curated-display-image {
    filter: none;
}

body.home-page .curated-reveal,
body.home-page .curated-display-surface,
body.home-page .curated-display-surface.from-depth,
body.home-page .curated-display-surface.from-left,
body.home-page .curated-display-surface.from-right,
body.home-page .curated-display-surface.is-entering,
body.home-page .curated-display-surface.is-leaving.to-depth,
body.home-page .curated-display-surface.is-leaving.to-left,
body.home-page .curated-display-surface.is-leaving.to-right,
body.home-page .curated-display-copy > *,
body.home-page .curated-display-sea-note {
    filter: none;
}

body.home-page .curated-reveal,
body.home-page .curated-display-surface,
body.home-page .curated-display-copy > *,
body.home-page .curated-display-sea-note {
    transition-property: opacity, transform;
}

body.home-page .curated-waters-stage,
body.home-page .curated-archive-wall,
body.home-page .curated-display-copy,
body.home-page .curated-display-sea-note {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

body.home-page .hero-section::after,
body.home-page .hero-ocean-glow-one,
body.home-page .hero-hotspots-shell.today-sea-card::before,
body.home-page .hero-hotspots-shell.today-sea-card::after,
body.home-page .today-sea-type-char {
    filter: none;
}

/* 展示前海层衔接小修：桌面端让首屏到底下档案层像继续下潜，而不是硬切到下一段。 */
@media (min-width: 981px) {
    body.home-page .hero-section {
        min-height: clamp(640px, 78vh, 820px);
        padding-bottom: clamp(64px, 8vh, 108px);
        background:
            radial-gradient(circle at 50% -8%, rgba(244, 252, 255, 0.18) 0%, rgba(244, 252, 255, 0) 31%),
            radial-gradient(circle at 52% 58%, rgba(117, 190, 220, 0.12) 0%, rgba(117, 190, 220, 0) 38%),
            linear-gradient(180deg, #081d2d 0%, #0d314b 34%, #103c58 68%, #061c2d 100%);
    }

    body.home-page .hero-section::after {
        bottom: -132px;
        height: 260px;
        background:
            linear-gradient(180deg, rgba(7, 27, 42, 0) 0%, rgba(8, 31, 47, 0.72) 38%, rgba(5, 20, 32, 0.98) 74%, rgba(5, 20, 32, 0) 100%);
        opacity: 0.98;
        filter: none;
    }

    body.home-page .featured-destinations {
        position: relative;
        margin-top: -54px;
        padding-top: clamp(112px, 10vw, 156px);
    }

    body.home-page .featured-destinations::before {
        top: 0;
        height: 172px;
        background:
            linear-gradient(180deg, rgba(5, 20, 32, 0.96) 0%, rgba(8, 35, 52, 0.64) 42%, rgba(8, 35, 52, 0) 100%),
            radial-gradient(circle at 50% 0%, rgba(174, 223, 240, 0.08), rgba(174, 223, 240, 0) 54%);
        opacity: 0.92;
    }

    body.home-page .hero-observation-rail,
    body.home-page .today-sea-drift-hint {
        opacity: 0.66;
    }
}