/* 暗黑模式规则已迁入 dark-mode-unified.css（原 index-hero.css） */
/* ========================================
   首页 Hero + 顶栏
   浅色：分层渐变 + 极淡网格/光晕（专业感，非大白板）
   深色模式：沉浸顶栏 + 深色 Hero
   ======================================== */

/* ---------- Hero 结构 + 潮流 Aurora Mesh 令牌 ---------- */
.index-hero-section {
    position: relative;
    width: 100%;
    min-height: 200px;
    overflow: hidden;
    contain: layout style;
    isolation: isolate;
    --hero-accent-a: #a3a3a3;
    --hero-accent-b: #d4d4d4;
    --hero-accent-c: #e5e5e5;
    --hero-bg-a: #fafafa;
    --hero-bg-b: #f7f7f7;
    --hero-bg-base: #ffffff;
    --hero-orb-a: rgba(229, 229, 229, 0.09);
    --hero-orb-b: rgba(245, 245, 245, 0.07);
    --hero-orb-c: rgba(250, 250, 250, 0.05);
    --hero-mesh-a: rgba(0, 0, 0, 0.02);
    --hero-mesh-b: rgba(0, 0, 0, 0.015);
    --hero-mesh-c: rgba(255, 255, 255, 0.03);
    --hero-mesh-d: rgba(245, 245, 245, 0.02);
    --hero-title-gradient: linear-gradient(118deg, #1e1b4b 8%, #6366f1 42%, #ec4899 72%, #0891b2 100%);
    --hero-subtitle: #64748b;
    --hero-divider-gradient: linear-gradient(90deg, rgba(99, 102, 241, 0.15), #6366f1 22%, #ec4899 50%, #06b6d4 78%, rgba(6, 182, 212, 0.15));
    --hero-wave-fill: url(#hero-wave-home);
}

.index-hero-section--teachers {
    --hero-accent-a: #8b5cf6;
    --hero-accent-b: #f472b6;
    --hero-accent-c: #f97316;
    --hero-bg-a: #fdf4ff;
    --hero-bg-b: #fff7ed;
    --hero-orb-a: rgba(139, 92, 246, 0.32);
    --hero-orb-b: rgba(244, 114, 182, 0.22);
    --hero-orb-c: rgba(249, 115, 22, 0.2);
    --hero-mesh-a: rgba(139, 92, 246, 0.15);
    --hero-mesh-b: rgba(244, 114, 182, 0.11);
    --hero-mesh-c: rgba(251, 146, 60, 0.12);
    --hero-mesh-d: rgba(253, 186, 116, 0.09);
    --hero-title-gradient: linear-gradient(118deg, #3b0764 8%, #8b5cf6 40%, #ec4899 68%, #f97316 100%);
    --hero-subtitle: #6b7280;
    --hero-divider-gradient: linear-gradient(90deg, rgba(139, 92, 246, 0.15), #8b5cf6 22%, #f472b6 50%, #f97316 78%, rgba(249, 115, 22, 0.15));
    --hero-wave-fill: url(#hero-wave-teachers);
}

.index-hero-section--samples {
    --hero-accent-a: #0ea5e9;
    --hero-accent-b: #2dd4bf;
    --hero-accent-c: #6366f1;
    --hero-bg-a: #ecfeff;
    --hero-bg-b: #eff6ff;
    --hero-orb-a: rgba(14, 165, 233, 0.32);
    --hero-orb-b: rgba(45, 212, 191, 0.24);
    --hero-orb-c: rgba(99, 102, 241, 0.22);
    --hero-mesh-a: rgba(14, 165, 233, 0.14);
    --hero-mesh-b: rgba(45, 212, 191, 0.12);
    --hero-mesh-c: rgba(99, 102, 241, 0.11);
    --hero-mesh-d: rgba(56, 189, 248, 0.1);
    --hero-title-gradient: linear-gradient(118deg, #0c4a6e 8%, #0ea5e9 38%, #2dd4bf 66%, #6366f1 100%);
    --hero-subtitle: #64748b;
    --hero-divider-gradient: linear-gradient(90deg, rgba(14, 165, 233, 0.15), #0ea5e9 22%, #2dd4bf 50%, #6366f1 78%, rgba(99, 102, 241, 0.15));
    --hero-wave-fill: url(#hero-wave-samples);
}

.index-hero-section--apply {
    --hero-accent-a: #8b5cf6;
    --hero-accent-b: #f472b6;
    --hero-accent-c: #f97316;
    --hero-bg-a: #fdf4ff;
    --hero-bg-b: #fff7ed;
    --hero-orb-a: rgba(139, 92, 246, 0.32);
    --hero-orb-b: rgba(244, 114, 182, 0.22);
    --hero-orb-c: rgba(249, 115, 22, 0.2);
    --hero-mesh-a: rgba(139, 92, 246, 0.15);
    --hero-mesh-b: rgba(244, 114, 182, 0.11);
    --hero-mesh-c: rgba(251, 146, 60, 0.12);
    --hero-mesh-d: rgba(253, 186, 116, 0.09);
    --hero-title-gradient: linear-gradient(118deg, #3b0764 8%, #8b5cf6 40%, #ec4899 68%, #f97316 100%);
    --hero-subtitle: #6b7280;
    --hero-divider-gradient: linear-gradient(90deg, rgba(139, 92, 246, 0.15), #8b5cf6 22%, #f472b6 50%, #f97316 78%, rgba(249, 115, 22, 0.15));
    --hero-wave-fill: url(#hero-wave-teachers);
}

/* ---------- 氛围层：CSS 柔光球 + 底部波形 ---------- */
.hero-ambient {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(
        180deg,
        #000 0%,
        #000 38%,
        rgba(0, 0, 0, 0.72) 62%,
        rgba(0, 0, 0, 0.28) 82%,
        transparent 100%
    );
    mask-image: linear-gradient(
        180deg,
        #000 0%,
        #000 38%,
        rgba(0, 0, 0, 0.72) 62%,
        rgba(0, 0, 0, 0.28) 82%,
        transparent 100%
    );
}

.hero-ambient__orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px) saturate(1.15);
    will-change: transform;
    animation: heroOrbFlow 28s linear infinite;
}

.hero-ambient__orb--a { animation-delay: 0s; }
.hero-ambient__orb--b { animation-delay: -9.33s; }
.hero-ambient__orb--c { animation-delay: -18.66s; }

/* 闭合椭圆轨迹：加大纵向摆幅 */
@keyframes heroOrbFlow {
    0%   { transform: translate3d(0, 0, 0) scale(1); }
    25%  { transform: translate3d(2.8%, 4.5%, 0) scale(1.05); }
    50%  { transform: translate3d(0, 7%, 0) scale(1.08); }
    75%  { transform: translate3d(-2.8%, 4.5%, 0) scale(1.05); }
    100% { transform: translate3d(0, 0, 0) scale(1); }
}

.hero-ambient__wave-wrap {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
    height: 118px;
    overflow: hidden;
    pointer-events: none;
    -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 30%, transparent 100%);
    mask-image: linear-gradient(180deg, transparent 0%, #000 30%, transparent 100%);
    animation: heroWaveBob 7s ease-in-out infinite;
    will-change: transform;
    backface-visibility: hidden;
}

.hero-ambient__wave-defs {
    position: absolute;
    width: 0;
    height: 0;
    overflow: hidden;
    pointer-events: none;
}

.hero-ambient__wave-track {
    display: flex;
    flex-wrap: nowrap;
    width: max-content;
    height: 100%;
    will-change: transform;
    animation: heroWaveScrollX 32s linear infinite;
    backface-visibility: hidden;
}

.hero-ambient__wave-tile {
    display: block;
    flex: 0 0 100vw;
    width: 100vw;
    height: 100%;
}

.hero-ambient__wave-fill {
    fill: var(--hero-wave-fill);
    opacity: 1;
}

/* 双 tile 各 100vw，track 宽 200vw；-50% = 精确 100vw，循环无跳帧 */
@keyframes heroWaveScrollX {
    0%   { transform: translate3d(0, 0, 0); }
    100% { transform: translate3d(-50%, 0, 0); }
}

@keyframes heroWaveBob {
    0%, 100% { transform: translate3d(0, 10px, 0); }
    50%      { transform: translate3d(0, -16px, 0); }
}

@media (prefers-reduced-motion: reduce) {
    .hero-ambient__orb {
        animation: none !important;
    }

    .hero-ambient__wave-wrap {
        animation: none !important;
    }

    .hero-ambient__wave-track {
        animation: none !important;
        width: 100%;
    }

    .hero-ambient__wave-tile {
        flex: 0 0 100%;
        width: 100%;
    }

    .hero-ambient__wave-tile + .hero-ambient__wave-tile {
        display: none;
    }

    .index-hero-section--home::before,
    .index-hero-section--teachers::before,
    .index-hero-section--samples::before,
    .index-hero-section--apply::before {
        animation: none !important;
        transform: none !important;
    }
}

/* 三页共用柔光布局，仅令牌色值不同 */
.index-hero-section .hero-ambient__orb--a {
    width: min(480px, 58vw);
    height: min(480px, 58vw);
    top: -40%;
    left: 50%;
    margin-left: min(-240px, -29vw);
    background: var(--hero-orb-a);
}

.index-hero-section .hero-ambient__orb--b {
    width: min(340px, 42vw);
    height: min(340px, 42vw);
    top: -6%;
    left: -5%;
    background: var(--hero-orb-b);
}

.index-hero-section .hero-ambient__orb--c {
    width: min(300px, 38vw);
    height: min(300px, 38vw);
    top: 4%;
    right: -3%;
    background: var(--hero-orb-c);
}

.index-hero-section .hero-ambient__wave-wrap {
    opacity: 0.92;
}

/* ---------- 全站紧凑氛围条 → 与 login.php 同款全屏背景（仅背景层，不改内容布局） ---------- */
.index-hero-section--ambient-only {
    min-height: 108px;
    padding-bottom: 0;
}

/* 页面底色：与登录页一致 */
html.dark-mode:has(body.hero-ambient-page),
body.dark-mode.hero-ambient-page {
    background-color: var(--dm-page-bg, #111111) !important;
}

body.hero-ambient-page {
    background-color: var(--color-bg-page, #ffffff);
}

body.dark-mode.hero-ambient-page {
    background-color: var(--dm-page-bg, #111111);
    background-image: none;
}

/* 全屏渐变底（login.php 同款） */
body.dark-mode.hero-ambient-page::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background:
        linear-gradient(180deg, rgba(10, 10, 10, 0) 0%, rgba(10, 10, 10, 0.28) 55%, var(--dm-page-bg, #111111) 100%),
        linear-gradient(180deg, #111111 0%, #0d0d0d 55%, #0a0a0a 100%);
}

body.hero-ambient-page > .Whole,
body.hero-ambient-page .Whole {
    position: relative;
    z-index: 1;
    padding-top: 0 !important;
    margin-top: 0 !important;
}

/* 柔光球：全屏固定（与登录页一致） */
body.hero-ambient-page .hero-ambient {
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
    -webkit-mask-image: none;
    mask-image: none;
}

body.hero-ambient-page .index-hero-section .hero-ambient__orb--a {
    width: min(520px, 72vw);
    height: min(520px, 72vw);
    top: -6%;
    left: 50%;
    margin-left: min(-260px, -36vw);
}

body.hero-ambient-page .index-hero-section .hero-ambient__orb--b {
    width: min(380px, 52vw);
    height: min(380px, 52vw);
    top: 38%;
    left: -10%;
}

body.hero-ambient-page .index-hero-section .hero-ambient__orb--c {
    width: min(340px, 46vw);
    height: min(340px, 46vw);
    top: 58%;
    right: -8%;
}

/* 底部波浪：全屏固定（与登录页一致） */
body.hero-ambient-page .hero-ambient__wave-wrap {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 0;
    height: min(200px, 24vh);
    opacity: 0.95;
    animation: heroWaveBob 7s ease-in-out infinite;
}

/* 氛围条容器：仅占位，视觉由 fixed 层承担；去掉实底避免遮挡 */
body.hero-ambient-page .index-hero-section--ambient-only {
    background: transparent !important;
    overflow: visible;
    contain: none;
}

body.hero-ambient-page .index-hero-section--ambient-only::before,
body.hero-ambient-page .index-hero-section--ambient-only::after {
    display: none !important;
}

body.dark-mode.hero-ambient-page .index-hero-section--home,
body.dark-mode.hero-ambient-page .index-hero-section--teachers,
body.dark-mode.hero-ambient-page .index-hero-section--samples,
body.dark-mode.hero-ambient-page .index-hero-section--apply {
    background: transparent !important;
    overflow: visible;
    contain: none;
}

body.dark-mode.hero-ambient-page .index-hero-section--home::before,
body.dark-mode.hero-ambient-page .index-hero-section--teachers::before,
body.dark-mode.hero-ambient-page .index-hero-section--samples::before,
body.dark-mode.hero-ambient-page .index-hero-section--apply::before,
body.dark-mode.hero-ambient-page .index-hero-section--home::after,
body.dark-mode.hero-ambient-page .index-hero-section--teachers::after,
body.dark-mode.hero-ambient-page .index-hero-section--samples::after,
body.dark-mode.hero-ambient-page .index-hero-section--apply::after {
    display: none !important;
}

/* 列表/首页：去掉 dark-mode-unified 中 Hero↔Content 衔接晕染，露出全屏背景 */
body.dark-mode.hero-ambient-page.index-page .index-hero-section + .Content {
    box-shadow: none !important;
}

body.dark-mode.hero-ambient-page .index-hero-section.index-hero-section--home,
body.dark-mode.hero-ambient-page .index-hero-section.index-hero-section--teachers,
body.dark-mode.hero-ambient-page .index-hero-section.index-hero-section--samples,
body.dark-mode.hero-ambient-page .index-hero-section.index-hero-section--apply {
    box-shadow: none !important;
}

@media screen and (max-width: 768px) {
    body.dark-mode.hero-ambient-page.index-page .index-hero-section + .Content {
        box-shadow: none !important;
    }
}

/* 取消 100vw 负边距，避免右侧露色差 */
body.hero-ambient-page .Whole > .index-hero-section,
body.hero-ambient-page .Content > .index-hero-section {
    width: 100% !important;
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

html:has(body.hero-ambient-page) {
    height: auto !important;
    min-height: 0 !important;
    scrollbar-gutter: auto;
}

body.hero-ambient-page .Whole > .Content,
body.hero-ambient-page .Whole > .content,
body.hero-ambient-page .Whole > .main-content,
body.hero-ambient-page .Whole > .page-content {
    padding-top: 12px !important;
}

@media (max-width: 992px) {
    .index-hero-section--ambient-only {
        min-height: 176px;
    }

    body.hero-ambient-page .Whole > .Content,
    body.hero-ambient-page .Whole > .content,
    body.hero-ambient-page .Whole > .main-content,
    body.hero-ambient-page .Whole > .page-content {
        padding-top: 0 !important;
    }
}

@media (max-width: 768px) {
    .index-hero-section--ambient-only {
        min-height: 168px;
    }

    /* 与首页 .Public.Floor05 首块 margin-top: 32px 对齐 */
    body.hero-ambient-page .Whole > .Content,
    body.hero-ambient-page .Whole > .content,
    body.hero-ambient-page .Whole > .main-content,
    body.hero-ambient-page .Whole > .page-content {
        padding-top: 32px !important;
    }

    /* 老师主页：资料区负边距上浮，不再保留 Content 顶距 */
    body.teacher-home-page.hero-ambient-page .Whole > .Content {
        padding-top: 0 !important;
    }

    /* 样音详情页：同上 */
    body.sound-detail-page.hero-ambient-page .Whole > .Content {
        padding-top: 0 !important;
    }
}

/* 老师主页：资料卡叠在紧凑 Hero 渐变上（桌面端同样去掉 Content 顶距） */
body.teacher-home-page.hero-ambient-page .Whole > .Content {
    padding-top: 0 !important;
}

/* 样音详情页：内容叠在紧凑 Hero 渐变上 */
body.sound-detail-page.hero-ambient-page .Whole > .Content {
    padding-top: 0 !important;
}

/* Aurora 底：粉紫青 mesh + 底部收白 */
.index-hero-section--home,
.index-hero-section--teachers,
.index-hero-section--samples,
.index-hero-section--apply {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.55) 58%, #ffffff 100%),
        linear-gradient(135deg, var(--hero-bg-a) 0%, var(--hero-bg-b) 52%, var(--hero-bg-base) 100%);
    border-bottom: none;
    padding-bottom: 12px;
    box-sizing: border-box;
}

.index-hero-section--home::before,
.index-hero-section--teachers::before,
.index-hero-section--samples::before,
.index-hero-section--apply::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background-image:
        radial-gradient(ellipse 72% 56% at 18% 8%, var(--hero-mesh-a) 0%, transparent 58%),
        radial-gradient(ellipse 58% 48% at 88% 12%, var(--hero-mesh-b) 0%, transparent 55%),
        radial-gradient(ellipse 64% 52% at 52% 92%, var(--hero-mesh-c) 0%, transparent 58%),
        radial-gradient(ellipse 48% 40% at 72% 38%, var(--hero-mesh-d) 0%, transparent 52%);
    background-size: 100% 100%;
    animation: heroMeshFlow 28s linear infinite;
    -webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.88) 0%, rgba(0, 0, 0, 0.35) 72%, transparent 100%);
    mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.88) 0%, rgba(0, 0, 0, 0.35) 72%, transparent 100%);
    transform-origin: 50% 20%;
    will-change: transform;
}

@keyframes heroMeshFlow {
    0%   { transform: translate3d(0, 0, 0) scale(1); }
    50%  { transform: translate3d(1.2%, 2.2%, 0) scale(1.02); }
    100% { transform: translate3d(0, 0, 0) scale(1); }
}

.index-hero-section--home::after,
.index-hero-section--teachers::after,
.index-hero-section--samples::after,
.index-hero-section--apply::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    opacity: 0.035;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    -webkit-mask-image: linear-gradient(180deg, #000 0%, transparent 85%);
    mask-image: linear-gradient(180deg, #000 0%, transparent 85%);
}

/* Hero 铺满视口宽度（突破 body / Content 版心留白）
   - 列表页 Hero 在 .Whole 下（teacher_list / sound_list）
   - 部分页 Hero 在 .Content 内
   - header 注入的紧凑氛围条同样在 .Whole 下 */
.Whole > .index-hero-section,
.Content > .index-hero-section {
    width: 100vw;
    max-width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    box-sizing: border-box;
}

.hero-content {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 168px;
    padding: 88px 28px 36px;
    text-align: center;
}

/* 首页 / 样音 / 老师列表：标题区底内边距略收，更贴近下方内容 */
.index-hero-section--home .hero-content,
.index-hero-section--samples .hero-content,
.index-hero-section--teachers .hero-content,
.index-hero-section--apply .hero-content {
    padding-bottom: 20px;
}

.hero-title-block {
    position: relative;
    display: block;
    max-width: 40rem;
    margin: 0 auto;
}

.hero-slogan-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    animation: heroRevealSoft 0.75s cubic-bezier(0.25, 0.1, 0.25, 1) both;
}

.hero-eyebrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 5px 14px;
    border-radius: 999px;
    font-family: "Alimama FangYuanTi VF", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    letter-spacing: 0.18em;
    text-transform: none;
    color: var(--hero-accent-a) !important;
    background: color-mix(in srgb, var(--hero-accent-a) 10%, transparent);
    border: 1px solid color-mix(in srgb, var(--hero-accent-a) 22%, transparent);
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.65) inset;
    animation: heroFadeUp 0.55s 0.05s cubic-bezier(0.25, 0.8, 0.25, 1) both;
}

/*
 * Master.css 对 h1/span 写了 font-family !important 与 font-weight:600，
 * 必须用首页作用域 + !important 才能生效。
 */
.index-hero-section h1.hero-title {
    margin: 0;
    font-family: "Alimama FangYuanTi VF", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif !important;
    font-variation-settings: normal;
    font-feature-settings: "kern" 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    line-height: 1.15;
}

.hero-title-line {
    display: block;
}

.hero-title-brand {
    display: inline-block;
    background: var(--hero-title-gradient);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    filter: drop-shadow(0 1px 0 rgba(255, 255, 255, 0.35));
}

.hero-title-lead {
    display: inline-block;
    background: var(--hero-title-gradient);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    letter-spacing: -0.03em;
}

.index-hero-section .hero-title-line--head {
    font-size: clamp(30px, 4.8vw, 46px) !important;
    font-weight: 700 !important;
    letter-spacing: -0.04em;
    text-shadow: none;
}

.index-hero-section .hero-title-line--desc {
    font-size: clamp(15px, 1.85vw, 18px) !important;
    font-weight: 500 !important;
    letter-spacing: 0.02em;
    line-height: 1.55;
    color: #475569 !important;
    max-width: 24em;
    -webkit-font-smoothing: antialiased;
}

/* 无中间大标题时，说明文案略加强（样音库 / 配音员列表） */
.index-hero-section--teachers .hero-title-line--desc,
.index-hero-section--samples .hero-title-line--desc,
.index-hero-section--apply .hero-title-line--desc {
    font-size: clamp(16px, 2vw, 19px) !important;
    font-weight: 600 !important;
    color: #334155 !important;
    letter-spacing: 0.03em;
}

/* 兼容旧类名（若有缓存模板引用） */
.index-hero-section .hero-title-line--sub {
    font-size: clamp(15px, 1.85vw, 18px) !important;
    font-weight: 500 !important;
    letter-spacing: 0.02em;
    line-height: 1.55;
    color: #475569 !important;
    max-width: 24em;
}

.hero-title-divider {
    display: block;
    width: 64px;
    height: 3px;
    margin: 4px auto 0;
    border: none;
    border-radius: 999px;
    background: var(--hero-divider-gradient);
    animation: heroExpandLine 0.7s 0.55s cubic-bezier(0.25, 0.8, 0.25, 1) both;
    position: relative;
    box-shadow: 0 0 20px color-mix(in srgb, var(--hero-accent-a) 28%, transparent);
}

.hero-title-divider::after {
    display: none;
}

.index-hero-section--home .hero-title-divider,
.index-hero-section--teachers .hero-title-divider,
.index-hero-section--samples .hero-title-divider,
.index-hero-section--apply .hero-title-divider {
    background: var(--hero-divider-gradient);
}

@keyframes heroExpandLine {
    from { width: 0; opacity: 0; }
    to   { width: 64px; opacity: 1; }
}

/* 主标题入场 */
.index-hero-section .hero-title-line--head {
    animation: heroFadeUp 0.6s 0.12s cubic-bezier(0.25, 0.8, 0.25, 1) both;
}

/* 副文案延迟入场 */
.index-hero-section .hero-title-line--desc,
.index-hero-section .hero-title-line--sub {
    animation: heroFadeUp 0.6s 0.28s cubic-bezier(0.25, 0.8, 0.25, 1) both;
}

@keyframes heroFadeUp {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes heroRevealSoft {
    from {
        opacity: 0;
        transform: translateY(8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (prefers-reduced-motion: reduce) {
    .hero-slogan-wrap,
    .hero-eyebrow,
    .index-hero-section .hero-title-line--head,
    .index-hero-section .hero-title-line--desc,
    .index-hero-section .hero-title-line--sub,
    .hero-title-divider {
        animation: none !important;
        opacity: 1 !important;
        transform: none !important;
    }
}

/* ---------- 首页布局 ----------
   顶栏固定时：必须去掉 .Whole / .Content 的顶内边距（见 header-styles 全局 66px+8px），
   否则透明导航下会露出 body 白底；列表页 Hero 在 .Content 内时尤其明显。 */
body.index-page > .Whole,
body.index-page .Whole,
body.hero-ambient-page > .Whole,
body.hero-ambient-page .Whole {
    padding-top: 0 !important;
    margin-top: 0 !important;
}

/* 列表页 Hero 在 .Content 内时：去掉 Content 顶内边距，避免顶栏下露白 */
body.index-page .Whole > .Content:has(.index-hero-section) {
    padding-top: 0 !important;
}

/* Hero 在 Content 上方时：去掉全局 Content 顶 18px，让筛选区贴近 Hero 渐变底 */
body.index-page.list-filter-page .index-hero-section + .Content {
    padding-top: 0 !important;
}

/* 首页：Hero 与主内容区顶对齐收紧（与列表页同一套间距逻辑） */
body.index-page .index-hero-section--home + .Content {
    padding-top: 0 !important;
}

/* 老师/样音列表：筛选区与屏幕左右边距统一（与顶栏内容区 1300 栅格对齐） */
body.index-page.list-filter-page .Whole > .Content:has(.filter-horizontal) {
    padding-left: clamp(16px, 4.2vw, 24px) !important;
    padding-right: clamp(16px, 4.2vw, 24px) !important;
    box-sizing: border-box;
}

/* Hero 在 Content 外：筛选条尽量贴近 Hero 底（仅极小缝避免贴死） */
body.index-page.list-filter-page .index-hero-section + .Content > .filter-horizontal {
    margin-top: 2px;
}

body.index-page.list-filter-page .Content > .index-hero-section + .filter-horizontal {
    margin-top: 2px;
}

/* 组件默认 padding:10px 0，列表顶行再收一点上内边距，更贴 Hero */
body.index-page.list-filter-page .index-hero-section + .Content > .filter-horizontal,
body.index-page.list-filter-page .Content > .index-hero-section + .filter-horizontal {
    padding-top: 4px;
}

body.index-page.list-filter-page .Whole > .Content:has(.filter-horizontal):not(:has(.index-hero-section)) {
    padding-top: 18px !important;
}

body.teacher-apply-page .Whole > .Content.teacher-apply-layout {
    padding-top: 0 !important;
}

body.teacher-apply-page .index-hero-section + .Content.teacher-apply-layout {
    padding-top: 0 !important;
}

@media (max-width: 768px) {
    /* 列表页 / 入驻页：Hero 随内容收缩 */
    body.index-page.list-filter-page .index-hero-section,
    body.teacher-apply-page .index-hero-section {
        min-height: 0;
        padding-bottom: 0;
    }

    body.index-page.list-filter-page .index-hero-section--teachers,
    body.index-page.list-filter-page .index-hero-section--samples,
    body.teacher-apply-page .index-hero-section--apply {
        padding-bottom: 0;
    }

    body.index-page.list-filter-page .index-hero-section .hero-content,
    body.teacher-apply-page .index-hero-section .hero-content {
        min-height: 0;
        padding: 72px 16px 6px;
        justify-content: flex-start;
    }

    body.index-page.list-filter-page .index-hero-section--teachers .hero-content,
    body.index-page.list-filter-page .index-hero-section--samples .hero-content,
    body.teacher-apply-page .index-hero-section--apply .hero-content {
        padding-bottom: 6px;
    }

    body.index-page.list-filter-page .hero-slogan-wrap,
    body.teacher-apply-page .hero-slogan-wrap {
        gap: 8px;
    }

    body.index-page.list-filter-page .hero-title-divider,
    body.teacher-apply-page .hero-title-divider {
        margin-top: 0;
        width: 48px;
    }

    body.teacher-apply-page .index-hero-section + .Content.teacher-apply-layout > .compact-form {
        margin-top: 12px;
    }

    body.index-page.list-filter-page .index-hero-section + .Content > .filter-horizontal {
        margin-top: 12px;
        padding-top: 4px;
    }

    body.index-page.list-filter-page .Content > .index-hero-section + .filter-horizontal {
        margin-top: 12px;
        padding-top: 4px;
    }

    body.index-page.list-filter-page .Whole > .Content:has(.filter-horizontal):not(:has(.index-hero-section)) {
        padding-top: 30px !important;
    }
}

body.index-page .nav,
body.hero-ambient-page .nav {
    background: transparent !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    box-shadow: none !important;
    position: fixed !important;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    /* 不设透明 border、不过渡 border-color，避免与 nav-scrolled 切换时闪一条线 */
    border-bottom: none !important;
    transition: background 0.2s ease, box-shadow 0.2s ease, backdrop-filter 0.2s ease;
}

/* 滚动后：实色顶栏，与正文区背景一致（勿透明） */
body:not(.dark-mode).index-page.nav-scrolled .nav,
body:not(.dark-mode).hero-ambient-page.nav-scrolled .nav {
    background: var(--color-bg-page, #ffffff) !important;
    background-color: var(--color-bg-page, #ffffff) !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
    border-bottom: 1px solid rgba(0, 0, 0, 0.06) !important;
}

/* 亮色模式：仅顶栏/桌面横向导航（全屏菜单 .main-nav.active 由内联 header-styles 配色） */
body:not(.dark-mode).index-page .main-nav:not(.active) .nav-link,
body:not(.dark-mode).hero-ambient-page .main-nav:not(.active) .nav-link {
    color: rgba(15, 23, 42, 0.88) !important;
}

body:not(.dark-mode).index-page .main-nav:not(.active) .nav-link:hover,
body:not(.dark-mode).hero-ambient-page .main-nav:not(.active) .nav-link:hover {
    color: #111827 !important;
}

body:not(.dark-mode).index-page .main-nav:not(.active) .nav-link.active,
body:not(.dark-mode).hero-ambient-page .main-nav:not(.active) .nav-link.active {
    color: #0f172a !important;
}

/*
 * 透明顶栏叠在 Hero 渐变上：字与下划线都容易被背景「吃掉」
 * —— 未滚动：浅色光晕字 + 当前项下划线略加粗、略提亮，并带极细白边
 * —— 已滚动白底：去掉字晕，下划线恢复克制
 */
body:not(.dark-mode).index-page:not(.nav-scrolled) .main-nav:not(.active) .nav-link,
body:not(.dark-mode).hero-ambient-page:not(.nav-scrolled) .main-nav:not(.active) .nav-link {
    text-shadow: 0 0 12px rgba(255, 255, 255, 0.94), 0 1px 2px rgba(255, 255, 255, 0.88);
}

body:not(.dark-mode).index-page:not(.nav-scrolled) .main-nav:not(.active) .nav-link:hover,
body:not(.dark-mode).index-page:not(.nav-scrolled) .main-nav:not(.active) .nav-link.active,
body:not(.dark-mode).hero-ambient-page:not(.nav-scrolled) .main-nav:not(.active) .nav-link:hover,
body:not(.dark-mode).hero-ambient-page:not(.nav-scrolled) .main-nav:not(.active) .nav-link.active {
    text-shadow: 0 0 14px rgba(255, 255, 255, 0.97), 0 1px 3px rgba(255, 255, 255, 0.92);
}

body:not(.dark-mode).index-page:not(.nav-scrolled) .main-nav:not(.active) .nav-link::after,
body:not(.dark-mode).hero-ambient-page:not(.nav-scrolled) .main-nav:not(.active) .nav-link::after {
    height: 2px !important;
    background: rgba(15, 23, 42, 0.78) !important;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.45);
}

body:not(.dark-mode).index-page.nav-scrolled .main-nav:not(.active) .nav-link,
body:not(.dark-mode).hero-ambient-page.nav-scrolled .main-nav:not(.active) .nav-link {
    text-shadow: none !important;
}

body:not(.dark-mode).index-page.nav-scrolled .main-nav:not(.active) .nav-link::after,
body:not(.dark-mode).hero-ambient-page.nav-scrolled .main-nav:not(.active) .nav-link::after {
    background: rgba(24, 24, 27, 0.4) !important;
    box-shadow: none !important;
}

body.index-page .nav .nav-logo img,
body.index-page .nav .nav-logo img.trans,
body.index-page .nav .nav-logo img.brand-primary,
body.hero-ambient-page .nav .nav-logo img,
body.hero-ambient-page .nav .nav-logo img.trans,
body.hero-ambient-page .nav .nav-logo img.brand-primary {
    filter: none !important;
    mix-blend-mode: normal !important;
}

body.index-page .nav .user-links a,
body.hero-ambient-page .nav .user-links a {
    color: rgba(15, 23, 42, 0.85) !important;
    border-color: rgba(15, 23, 42, 0.25) !important;
}

body.index-page .nav .user-links a:hover,
body.hero-ambient-page .nav .user-links a:hover {
    color: #0f172a !important;
    border-color: rgba(15, 23, 42, 0.45) !important;
}

body.index-page .nav #login-btn,
body.hero-ambient-page .nav #login-btn {
    background: rgba(0, 0, 0, 0.04) !important;
    border: none !important;
    color: rgba(15, 23, 42, 0.7) !important;
    padding: 6px !important;
    border-radius: 50% !important;
    transition: color 0.2s ease, background 0.2s ease !important;
}

body.index-page .nav #login-btn:hover,
body.hero-ambient-page .nav #login-btn:hover {
    color: #0f172a !important;
    background: rgba(0, 0, 0, 0.08) !important;
}

/* 首页顶栏：版心切换与登录按钮同一套浅底 */
body.index-page .nav .site-layout-toggle,
body.hero-ambient-page .nav .site-layout-toggle {
    background: rgba(0, 0, 0, 0.04) !important;
    color: rgba(15, 23, 42, 0.7) !important;
}

body.index-page .nav .site-layout-toggle:hover,
body.hero-ambient-page .nav .site-layout-toggle:hover {
    color: #0f172a !important;
    background: rgba(0, 0, 0, 0.08) !important;
}

body.index-page .nav .site-layout-toggle:active,
body.hero-ambient-page .nav .site-layout-toggle:active {
    background: rgba(0, 0, 0, 0.1) !important;
}

body.index-page .nav #login-btn:active,
body.hero-ambient-page .nav #login-btn:active {
    transform: translateY(0) !important;
}

body.index-page .nav .user-avatar,
body.hero-ambient-page .nav .user-avatar {
    background-color: rgba(15, 23, 42, 0.08) !important;
    color: #0f172a !important;
    border: 1px solid rgba(15, 23, 42, 0.12) !important;
}

body.index-page .nav .user-avatar:hover,
body.hero-ambient-page .nav .user-avatar:hover {
    background-color: rgba(15, 23, 42, 0.12) !important;
}

body.index-page .nav .menu-toggle span,
body.hero-ambient-page .nav .menu-toggle span {
    background: rgba(15, 23, 42, 0.85) !important;
}

/* ---------- 响应式 ---------- */
@media (max-width: 992px) {
    .index-hero-section {
        min-height: 176px;
    }
    .hero-content {
        padding: 82px 18px 28px;
        min-height: 158px;
    }
    .index-hero-section--home .hero-content,
    .index-hero-section--samples .hero-content,
    .index-hero-section--teachers .hero-content,
    .index-hero-section--apply .hero-content {
        padding-bottom: 18px;
    }
}

@media (max-width: 768px) {
    .index-hero-section {
        min-height: 168px;
    }
    .hero-content {
        padding: 78px 16px 24px;
        min-height: 150px;
    }
    .index-hero-section--home .hero-content,
    .index-hero-section--samples .hero-content,
    .index-hero-section--teachers .hero-content,
    .index-hero-section--apply .hero-content {
        padding-bottom: 14px;
    }
    .index-hero-section .hero-title-line--head {
        font-size: clamp(26px, 5.2vw, 34px) !important;
    }
    .index-hero-section .hero-title-line--desc,
    .index-hero-section .hero-title-line--sub {
        font-size: clamp(14px, 2.6vw, 16px) !important;
        letter-spacing: 0.02em;
    }
    .hero-eyebrow {
        font-size: 10px !important;
        padding: 4px 12px;
        letter-spacing: 0.14em;
    }
    /* 仅折叠态顶栏透明；全屏菜单 .active 需实底，否则链接浮在页面上 */
    body.index-page .main-nav:not(.active),
    body.hero-ambient-page .main-nav:not(.active) {
        background: transparent !important;
    }
    body.index-page.nav-scrolled .main-nav:not(.active),
    body.hero-ambient-page.nav-scrolled .main-nav:not(.active) {
        background: var(--color-bg-page, #ffffff) !important;
    }
    body.index-page .main-nav.active,
    body.hero-ambient-page .main-nav.active {
        background: #ffffff !important;
    }
}

@media (max-width: 480px) {
    .index-hero-section .hero-title-line--head {
        font-size: clamp(20px, 5.2vw, 26px) !important;
        letter-spacing: 0.03em;
    }
    .index-hero-section .hero-title-line--desc,
    .index-hero-section .hero-title-line--sub {
        letter-spacing: 0.04em;
    }
    .hero-title-block {
        padding-left: 6px;
        padding-right: 6px;
    }
}



























/*
 * 首页画布与主内容区内边距（仅 index.php 使用 body.index-page）
 * 老师/样音/打折等卡片样式在 css/web/components/teacher_card.css，全站随组件生效
 */
body.index-page {
    background-color: var(--color-bg-page, #ffffff);
    min-height: 0;
}

/* 首页 / 样音库：禁止页面被撑出多余滚动高度 */
html:has(body.index-page) {
    height: auto !important;
    min-height: 0 !important;
}

html.dark-mode:has(body.index-page) {
    min-height: 0 !important;
    height: auto !important;
}

body.index-page .Whole {
    min-height: 0 !important;
    height: auto !important;
}

body.index-page .index-hero-section {
    overflow: hidden;
}

body.hero-ambient-page.index-page .index-hero-section {
    overflow: visible;
    contain: none;
}

/* 未打开的全屏弹层不参与布局 */
body.index-page .teacher-price-popup:not(.show):not(.closing) {
    display: none !important;
}

body.index-page .Content,
body.index-page .Content.index-home-content {
    background: transparent;
}

/* 列表页 Hero 更紧凑 — 仅桌面；手机端与首页同一套高度/内边距 */
@media (min-width: 769px) {
    body.index-page.list-filter-page .index-hero-section {
        min-height: 160px;
    }

    body.index-page.list-filter-page .index-hero-section .hero-content {
        min-height: 132px;
        padding-top: 78px;
        padding-bottom: 14px;
    }
}

body.index-page.list-filter-page .Sound_4-4 {
    margin-bottom: 0;
}

body.index-page .load-more-container {
    margin-bottom: 0;
}