* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
}

html, body {
    width: 100%;
    height: 100%;
    overflow: hidden;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
    background: #000;
    color: #fff;
}

/* ========== 竖屏锁定提示 ========== */
.portrait-lock-tip {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.95);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    transition: opacity 0.3s ease;
}

.portrait-lock-tip.hidden {
    opacity: 0;
    pointer-events: none;
}

/* ========== 封面（项目外）：底图 + 加载 gif / begin 按钮 ========== */
.cover {
    position: fixed;
    inset: 0;
    z-index: 9990;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    pointer-events: auto;
}

.cover.cover-hidden {
    display: none;
}

.cover-bg {
    position: absolute;
    inset: 0;
    background-color: #0d0b09; /* 底图加载前的底色，避免透出后面块内容 */
    background-image: url('https://jmaigc.ctdsb.net/2026dfbg/assets0/images/bg_00.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    z-index: 0;
}

/* 加载 gif：位置和大小用屏幕百分比，居中；改 width/height 的 vw/vh 或 left/top 的 % 即可 */
.cover-load-gif {
    position: absolute;
    left: 26%;
    top: 50%;
    transform: translate(-50%, -50%) rotate(90deg);
    z-index: 1;
    width: 70vw;
    height: auto;
    max-width: 90%;
    pointer-events: none;
}

.tip-inner {
    text-align: center;
    padding: 2rem;
}

.tip-title {
    font-size: 1.25rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.tip-desc {
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.8);
}

/* ========== 主应用：仅竖屏时显示 ========== */
.app {
    position: fixed;
    inset: 0;
    display: none;
    background: #fff;
}

.app.portrait-ok {
    display: block;
}

/* 封面/视频阶段隐藏主内容，避免闪烁；goToSecondBlock 时移除 */
.app.app-intro-hidden {
    visibility: hidden;
}

/* ========== 竖屏长图：正常滑动，无块吸附 ========== */
.block-swiper {
    width: 100%;
    height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: none !important;
    background: #fff;
}

.block-swiper .swiper-wrapper {
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    background: #fff;
}

.block-swiper .swiper-slide {
    width: 100%;
    height: auto;
    flex-shrink: 0;
    position: relative;
    overflow: hidden;
    scroll-snap-align: none !important;
    scroll-snap-stop: normal !important;
}

/* 每块高度由背景图决定，块与块紧密相连无黑边 */
.block {
    width: 100%;
    position: relative;
}

/* 所有块背景图：宽度撑满，高度按比例 */
.block-bg {
    display: block;
    width: 100%;
    height: auto;
    vertical-align: top;
    pointer-events: none;
    object-fit: contain;
}

/* 块内交互层（按钮、浮层、视频等），叠在背景图上不占高度 */
.block-content {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 2;
    pointer-events: none;
}

.block-content > * {
    pointer-events: auto;
}

/* ========== 公用：浮层、视频、滚动动画（多块共用） ========== */
/* 以下块内图片/按钮：位置与尺寸均用 %，相对本块背景图，纵向不随屏幕只随背景图高度，便于微调 */

/* 公用：点击提示图标，多处复用；各块内用 #block-X .tap-hint 单独设 left/top/width */
.tap-hint {
    position: absolute;
    height: auto;
    display: block;
    object-fit: contain;
    pointer-events: none;
    animation: tap-hint-pulse 1.2s ease-in-out infinite;
}

@keyframes tap-hint-pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.15); }
}

#block-3 .tap-hint {
    left: 30%;
    top: 29%;
    width: 12%;
}

#block-3 .tap-hint-2 {
    left: 30%;
    top: 45%;
    width: 12%;
}

/* ========== 第二块 ========== */
/* 按钮：位置用 %，相对背景图宽高 */
.btn-show-float {
    position: absolute;
    left: 23%;
    top: 30%;
    transform: translate(-50%, -50%);
    padding: 0;
    border: none;
    background: transparent;
    cursor: pointer;
    z-index: 10;
    display: block;
    width: 13%;
}

/* 图片上下左右撑满按钮容器 */
.btn-show-float img {
    display: block;
    width: 100%;
    height: auto;
    pointer-events: none;
    vertical-align: top;
}

/* ========== 公用：浮层、鸟卡、视频、滚动动画 ========== */
.block-overlay .float-img {
    max-width: 90%;
    max-height: 85vh;
    width: auto;
    height: auto;
    object-fit: contain;
}

/* 宽图浮层：图片高度 50vh，超出宽度可左右滑动，默认停右侧 */
.overlay-wide-image {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.75);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 9999;
}

.overlay-wide-image.show {
    display: flex;
}

.overlay-wide-image-scroll {
    width: 100%;
    max-width: 100vw;
    height: 66vh;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
}

.overlay-wide-image-img {
    display: block;
    height: 66vh;
    width: auto;
    max-width: none;
    object-fit: contain;
}

/* 宽图浮层关闭按钮：位置和尺寸用屏幕百分比，便于适配不同机型 */
.overlay-wide-image-close {
    position: absolute;
    bottom: 10%;
    right: 5%;
    width: 10vw;
    height: 10vw;
    min-width: 2rem;
    min-height: 2rem;
    border: none;
    background: rgba(255, 255, 255, 0.9);
    border-radius: 50%;
    font-size: 1.2rem;
    cursor: pointer;
    z-index: 10;
}

/* 点击触发的浮层：遮罩覆盖整个屏幕 */
.block-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.7);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    width: 100vw;
    height: 100vh;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
}

.block-overlay.show {
    display: flex;
}

/* 公用：点击块内图片弹出的鸟卡浮层（所有块共用） */
.bird-card-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.75);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    width: 100vw;
    height: 100vh;
}

.bird-card-overlay.show {
    display: flex;
}

.bird-card-overlay .bird-card-img {
    max-width: 90%;
    max-height: 85vh;
    width: auto;
    height: auto;
    object-fit: contain;
    pointer-events: none;
}

/* 鸟卡关闭按钮：位置和尺寸用屏幕百分比，便于适配不同机型 */
.bird-card-overlay .bird-card-close {
    position: absolute;
    bottom: 10%;
    right: 5%;
    width: 10vw;
    height: 10vw;
    min-width: 2rem;
    min-height: 2rem;
    border: none;
    background: rgba(255, 255, 255, 0.95);
    border-radius: 50%;
    font-size: 1.2rem;
    line-height: 1;
    cursor: pointer;
    z-index: 10;
}

.block-overlay .overlay-close {
    position: absolute;
    top: 1rem;
    right: 1rem;
    width: 2.5rem;
    height: 2.5rem;
    border: none;
    background: rgba(255, 255, 255, 0.9);
    border-radius: 50%;
    font-size: 1.2rem;
    cursor: pointer;
    z-index: 21;
}

.block-video-play-btn {
    position: absolute;
    width: 4rem;
    height: 4rem;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    border: none;
    background: rgba(255, 255, 255, 0.9);
    border-radius: 50%;
    cursor: pointer;
    z-index: 16;
    display: flex;
    align-items: center;
    justify-content: center;
}

.block-video-play-btn::after {
    content: '';
    width: 0;
    height: 0;
    border-left: 1.2rem solid #333;
    border-top: 0.7rem solid transparent;
    border-bottom: 0.7rem solid transparent;
    margin-left: 4px;
}

/* 跳过按钮：放在块内、不随视频旋转，固定屏幕右下角 */
.block-video-skip {
    position: fixed;
    right: 1rem;
    bottom: 2rem;
    z-index: 25;
    padding: 0.5rem 1rem;
    font-size: 0.9rem;
    border: none;
    border-radius: 2rem;
    background: rgba(255, 255, 255, 0.95);
    color: #333;
    cursor: pointer;
}

/* 滚动触发的动画元素：默认隐藏或初始状态 */
.block-scroll-anim {
    transition: opacity 0.5s ease, transform 0.5s ease;
}

/* 跳过视频后重置动画用：瞬时切到 out 状态，不播放反向动画 */
.swiper-slide.anim-reset-instant .section2-bird,
.swiper-slide.anim-reset-instant .block-scroll-anim {
    transition: none !important;
}

.block-scroll-anim.anim-out {
    opacity: 0;
    transform: translateY(20px);
}

.block-scroll-anim.anim-in {
    opacity: 1;
    transform: translateY(0);
}

/* ========== 第二块（续）小鸟 ========== */
/* 小鸟图：划入时从上往下浮出，位置/大小与按钮同方式控制（先居中）；位置/宽度用 %，相对背景图 */
.section2-bird {
    position: absolute;
    left: 10%;
    top: 50%;
    width: 78%;
    height: auto;
    display: block;
    pointer-events: none;
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.section2-bird.block-float-reveal,
.section2-bird.float-reveal-out {
    opacity: 0;
    transform: translate(-50%, -50%) translateY(-25%);
}

.section2-bird.float-reveal-in {
    opacity: 1;
    transform: translate(-50%, -50%) translateY(0);
}

/* ========== 第三块 ========== */
/* 第三块鸟图 1、2：位置/宽度用 %，相对背景图；使用公用金色呼吸光 */
.section3-bird1,
.section3-bird2 {
    position: absolute;
    height: auto;
    display: block;
    object-fit: contain;
    pointer-events: none;
}

.section3-bird1 {
    left: 38%;
    top: 28%;
    width: 16%;
    pointer-events: auto;
    cursor: pointer;
}

.section3-bird2 {
    left: 32%;
    top: 42%;
    pointer-events: auto;
    cursor: pointer;
    width: 25%;
}

/* 第三块图：位置/宽度用 %，相对背景图，无动画 */
.section3-float {
    position: absolute;
    left: 0;
    top: 5%;
    width: 90%;
    height: auto;
    display: block;
    object-fit: contain;
    pointer-events: none;
}

/* 第三块评论图：位置/宽度用 % 相对背景图；入屏后 0.2s 淡入 + 0.3s 从右向左移 */
.section3-comment1 {
    position: absolute;
    right: 89%;
    top: 62%;
    width: 15%;
    height: auto;
    display: block;
    object-fit: contain;
    pointer-events: none;
    opacity: 0;
    transform: translateX(50vw);
}

.section3-comment1.comment1-hide {
    opacity: 0;
    transform: translateX(50vw);
    animation: none;
}

.section3-comment1.comment1-show {
    animation: comment1-in 0.7s ease forwards;
}

@keyframes comment1-in {
    0% {
        opacity: 0;
        transform: translateX(50vw);
    }
    50% {
        opacity: 0;
        transform: translateX(50vw);
    }
    80% {
        opacity: 1;
        transform: translateX(50vw);
    }
    100% {
        opacity: 1;
        transform: translateX(15vw);
    }
}

/* 第三块评论图 2：与 comment1 相同逻辑，单独写便于微调 */
.section3-comment2 {
    position: absolute;
    right: 74%;
    top: 62%;
    width: 15%;
    height: auto;
    display: block;
    object-fit: contain;
    pointer-events: none;
    opacity: 0;
    transform: translateX(50vw);
}

.section3-comment2.comment2-hide {
    opacity: 0;
    transform: translateX(50vw);
    animation: none;
}

.section3-comment2.comment2-show {
    animation: comment2-in 1.5s ease forwards;
}

@keyframes comment2-in {
    0% {
        opacity: 0;
        transform: translateX(35vw);
    }
    70% {
        opacity: 0;
        transform: translateX(35vw);
    }
    85% {
        opacity: 1;
        transform: translateX(35vw);
    }
    100% {
        opacity: 1;
        transform: translateX(20vw);
    }
}

/* 第三块评论图 3：与 comment1 相同逻辑，单独写便于微调 */
.section3-comment3 {
    position: absolute;
    right: 59%;
    top: 62%;
    width: 15%;
    height: auto;
    display: block;
    object-fit: contain;
    pointer-events: none;
    opacity: 0;
    transform: translateX(50vw);
}

.section3-comment3.comment3-hide {
    opacity: 0;
    transform: translateX(50vw);
    animation: none;
}

.section3-comment3.comment3-show {
    animation: comment3-in 2s ease forwards;
}

@keyframes comment3-in {
    0% {
        opacity: 0;
        transform: translateX(20vw);
    }
    85% {
        opacity: 0;
        transform: translateX(20vw);
    }
    100% {
        opacity: 1;
        transform: translateX(20vw);
    }
}

/* ========== 第四块 ========== */
/* 鸟图：位置/宽度用 % 相对背景图，划入时从上往下浮出 */
.section4-bird {
    position: absolute;
    left: 60%;
    top: 0;
    width: 40%;
    height: auto;
    display: block;
    pointer-events: none;
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.section4-bird.block-float-reveal,
.section4-bird.float-reveal-out {
    opacity: 0;
    transform: translate(-50%, -50%) translateY(-25%);
}

.section4-bird.float-reveal-in {
    opacity: 1;
    transform: translate(-50%, -50%) translateY(0);
}

/* block-4 音乐按钮：绝对定位，点击播放 04_2016.mp3 */
.btn-music-04 {
    position: absolute;
    right: 25%;
    top: 52%;
    padding: 0;
    border: none;
    background: transparent;
    cursor: pointer;
    z-index: 10;
    display: block;
    width: 10%;
}

.btn-music-04 img {
    display: block;
    width: 100%;
    height: auto;
    pointer-events: none;
}

/* block-22 音乐按钮：点击播放 22_end.mp3（自动播放若被拦截可点此） */
.btn-music-22 {
    position: absolute;
    right: 45%;
    top: 9%;
    padding: 0;
    border: none;
    background: transparent;
    cursor: pointer;
    z-index: 10;
    display: block;
    width: 10%;
}

.btn-music-22 img {
    display: block;
    width: 100%;
    height: auto;
    pointer-events: none;
}

/* ========== 第五块 ========== */
/* 图：位置/宽度用 %，相对背景图 */
.section5-men {
    position: absolute;
    left: 0;
    top: 0;
    width: 90%;
    height: auto;
    display: block;
    pointer-events: none;
}

/* 第五块：滑入时下雨动画，雨向从右向左（顺时针 90°） */
.section5-rain {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    overflow: hidden;
    opacity: 0;
    transition: opacity 0.4s ease;
}

.section5-rain.rain-visible {
    opacity: 1;
}

.section5-rain.rain-hidden {
    opacity: 0;
}

.rain-drop {
    position: absolute;
    left: 100%;
    width: 40px;
    height: 2px;
    background: linear-gradient(to right, transparent, rgba(255, 255, 255, 0.5), transparent);
    animation: rain-left 2s linear infinite;
}

@keyframes rain-left {
    to {
        transform: translateX(-150vw);
    }
}

/* ========== 第六块 ========== */
/* 图：位置/宽度用 %，相对背景图；下雨效果同第五块 */
.section6-men {
    position: absolute;
    left: 0;
    top: 2%;
    width: 90%;
    height: auto;
    display: block;
    pointer-events: none;
}

/* 第六块图 2：位置/宽度用 %，相对背景图；可点击弹出 06_news 宽图 */
.section6-men2 {
    position: absolute;
    left: 0;
    top: 70%;
    width: 90%;
    height: auto;
    display: block;
    cursor: pointer;
}

.section6-rain {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    overflow: hidden;
    opacity: 0;
    transition: opacity 0.4s ease;
}

.section6-rain.rain-visible {
    opacity: 1;
}

.section6-rain.rain-hidden {
    opacity: 0;
}

/* ========== 公用：金色渐变外发光呼吸闪烁（可加在任意需要该效果的元素上） ========== */
.glow-golden-breath {
    animation: glow-golden-breath 1.2s ease-in-out infinite;
}

@keyframes glow-golden-breath {
    0%, 100% {
        filter: drop-shadow(0 0 2px rgba(255, 227, 68, 0.7)) drop-shadow(0 0 3px rgba(255, 203, 82, 0.5)) drop-shadow(0 0 5px rgba(255, 217, 81, 0.35));
    }
    50% {
        filter: drop-shadow(0 0 8px rgb(255, 227, 67)) drop-shadow(0 0 10px rgba(255, 205, 88, 0.85)) drop-shadow(0 0 15px rgba(255, 223, 105, 0.6));
    }
}

/* ========== 第七块 ========== */
/* 鸟图，绝对定位 + 发光 + 点击弹出鸟卡（同 block-16 定位方式） */
.section7-bird {
    position: absolute;
    left: 10%;
    top: 74%;
    width: 12%;
    height: auto;
    display: block;
    object-fit: contain;
    pointer-events: auto;
    cursor: pointer;
}

/* ========== 第八块 ========== */
/* 内容同第三块结构，命名与动画独立便于微调 */
.section8-float {
    position: absolute;
    left: 5%;
    top: 19%;
    width: 88%;
    height: auto;
    display: block;
    object-fit: contain;
    pointer-events: none;
}

.section8-comment1 {
    position: absolute;
    right: 85%;
    top: 71%;
    width: 15%;
    height: auto;
    display: block;
    object-fit: contain;
    pointer-events: none;
    opacity: 0;
    transform: translateX(50vw);
}

.section8-comment1.comment8-1-hide {
    opacity: 0;
    transform: translateX(50vw);
    animation: none;
}

.section8-comment1.comment8-1-show {
    animation: comment8-1-in 0.7s ease forwards;
}

@keyframes comment8-1-in {
    0% { opacity: 0; transform: translateX(50vw); }
    50% { opacity: 0; transform: translateX(50vw); }
    80% { opacity: 1; transform: translateX(50vw); }
    100% { opacity: 1; transform: translateX(15vw); }
}

.section8-comment2 {
    position: absolute;
    right: 74%;
    top: 71%;
    width: 15%;
    height: auto;
    display: block;
    object-fit: contain;
    pointer-events: none;
    opacity: 0;
    transform: translateX(50vw);
}

.section8-comment2.comment8-2-hide {
    opacity: 0;
    transform: translateX(50vw);
    animation: none;
}

.section8-comment2.comment8-2-show {
    animation: comment8-2-in 1.5s ease forwards;
}

@keyframes comment8-2-in {
    0% { opacity: 0; transform: translateX(35vw); }
    70% { opacity: 0; transform: translateX(35vw); }
    85% { opacity: 1; transform: translateX(35vw); }
    100% { opacity: 1; transform: translateX(20vw); }
}

.section8-comment3 {
    position: absolute;
    right: 59%;
    top: 71%;
    width: 15%;
    height: auto;
    display: block;
    object-fit: contain;
    pointer-events: none;
    opacity: 0;
    transform: translateX(50vw);
}

.section8-comment3.comment8-3-hide {
    opacity: 0;
    transform: translateX(50vw);
    animation: none;
}

.section8-comment3.comment8-3-show {
    animation: comment8-3-in 2s ease forwards;
}

@keyframes comment8-3-in {
    0% { opacity: 0; transform: translateX(20vw); }
    85% { opacity: 0; transform: translateX(20vw); }
    100% { opacity: 1; transform: translateX(20vw); }
}

.section8-bird1,
.section8-bird2 {
    position: absolute;
    height: auto;
    display: block;
    object-fit: contain;
    pointer-events: none;
}

.section8-bird1 {
    left: 38%;
    top: 28%;
    width: 16%;
    pointer-events: auto;
    cursor: pointer;
}

.section8-bird2 {
    left: 33%;
    top: 46%;
    width: 25%;
    pointer-events: auto;
    cursor: pointer;
}

/* 第八块：图片切换区域（绝对定位，暂居中便于微调） */
.section8-pyq-area {
    position: absolute;
    left: 42%;
    top: 43%;
    transform: translate(-50%, -50%);
    width: 49%;
    pointer-events: auto;
}

/* 第一张时只显示 down，第二张时只显示 up */
.section8-pyq-area.show-p1 .section8-pyq-up { display: none; }
.section8-pyq-area.show-p1 .section8-pyq-down { display: block; }
.section8-pyq-area.show-p2 .section8-pyq-up { display: block; }
.section8-pyq-area.show-p2 .section8-pyq-down { display: none; }

/* 两只鸟的容器：与 p1 同步做上下滑入，随第一张图一起滑动 */
.section8-pyq-birds {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    transition: transform 0.35s ease-out;
}
.section8-pyq-area.show-p1 .section8-pyq-birds { transform: translateY(0); }
.section8-pyq-area.show-p2 .section8-pyq-birds { transform: translateY(-100%); }

.section8-pyq-birds .section8-pyq-bird1 {
    position: absolute;
    left: 9%;
    top: 4%;
    width: 68%;
    height: auto;
    display: block;
    object-fit: contain;
    pointer-events: auto;
    cursor: pointer;
    z-index: 2;
}

.section8-pyq-img-wrap {
    position: relative;
    width: 100%;
    overflow: hidden;
}

/* p1 占位撑高，p2 绝对叠在上方；两者都做上下滑入的 transition */
.section8-pyq-img-wrap .section8-pyq-p1 {
    display: block;
    width: 100%;
    height: auto;
    position: relative;
    transition: transform 0.35s ease-out;
}

.section8-pyq-img-wrap .section8-pyq-p2 {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    transition: transform 0.35s ease-out;
}

/* 显示第一张：p1 在中间，p2 在下方；显示第二张：p1 在上方，p2 在中间 → 切换时上下滑入 */
.section8-pyq-area.show-p1 .section8-pyq-p1 { transform: translateY(0); }
.section8-pyq-area.show-p1 .section8-pyq-p2 { transform: translateY(100%); }
.section8-pyq-area.show-p2 .section8-pyq-p1 { transform: translateY(-100%); }
.section8-pyq-area.show-p2 .section8-pyq-p2 { transform: translateY(0); }

.section8-pyq-area .section8-pyq-up,
.section8-pyq-area .section8-pyq-down {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    padding: 0;
    border: none;
    background: none;
    cursor: pointer;
    display: block;
    line-height: 0;
}

.section8-pyq-area .section8-pyq-up img,
.section8-pyq-area .section8-pyq-down img {
    display: block;
    width: 100%;
    height: auto;
    pointer-events: none;
}

.section8-pyq-area .section8-pyq-up {
    top: -8%;
    width: 18%;
}

.section8-pyq-area .section8-pyq-down {
    bottom: -8%;
    width: 18%;
}

/* 08_pyq_p1 上的点击提示，与 section8-pyq-birds 同在容器内，随底图 p1 一起滑入滑出；叠在鸟图之上 */
.section8-pyq-birds .tap-hint-pyq1 {
    position: absolute;
    left: 3%;
    top: 24%;
    width: 26%;
    z-index: 3;
}

/* ========== 第九块 ========== */
/* 重大通知图，绝对定位 + 缩放强调动画 */
.section9-notice {
    position: absolute;
    left: 64%;
    top: 66%;
    width: 43%;
    height: auto;
    display: block;
    object-fit: contain;
    animation: notice-scale 0.7s ease-in-out infinite;
}

@keyframes notice-scale {
    0%, 100% {
        transform: translateX(-50%) scale(1);
    }
    50% {
        transform: translateX(-50%) scale(1.1);
    }
}

/* ========== 第十块 ========== */
/* 鸟图，绝对定位 + 发光 + 点击弹出鸟卡 */
.section10-bird {
    position: absolute;
    left: 18%;
    top: 52%;
    width: 22%;
    height: auto;
    display: block;
    object-fit: contain;
    pointer-events: auto;
    cursor: pointer;
}

/* ========== 第十一块 ========== */
/* 弹幕从下往上飘入，循环播放，宽度按屏幕百分比、长宽比不变 */
.section11-danmu-wrap {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    pointer-events: none;
}

.section11-danmu {
    position: absolute;
    bottom: 0;
    width: 14vw;
    height: auto;
    display: block;
    object-fit: contain;
    animation: danmu-up 6s linear infinite;
    animation-play-state: paused;
    transform: translateY(100%);
}

.section11-danmu-wrap.section11-danmu-paused .section11-danmu {
    animation-play-state: paused;
    transform: translateY(100%);
}

.section11-danmu-wrap.section11-danmu-playing .section11-danmu {
    animation-play-state: running;
}

.section11-danmu-1 { left: 15%; animation-delay: 0s; }
.section11-danmu-2 { left: 36%; animation-delay: 1s; }
.section11-danmu-3 { left: 50%; animation-delay: 2s; }
.section11-danmu-4 { left: 74%; animation-delay: 3.5s; }

@keyframes danmu-up {
    0%   { transform: translateY(100%); }
    100% { transform: translateY(calc(-100vh - 100%)); }
}

/* ========== 第十二块 ========== */
/* 鸟图，绝对定位 + 发光 + 点击弹出鸟卡 */
.section12-bird {
    position: absolute;
    left: 37%;
    top: 8%;
    width: 48%;
    height: auto;
    display: block;
    object-fit: contain;
    pointer-events: auto;
    cursor: pointer;
}

/* ========== 第十三块 ========== */
/* 鸟图从上往下飘入，进入块时触发 */
.section13-bird {
    position: absolute;
    left: 14%;
    top: 24%;
    width: 63%;
    height: auto;
    display: block;
    object-fit: contain;
    transition: transform 0.9s ease-out;
    transform: translateY(-100%);
}

.section13-bird-out {
    transform: translateY(-100%);
}

.section13-bird-in {
    transform: translateY(0);
}

/* ========== 第十四块 ========== */
/* 鸟图，绝对定位 */
.section14-bird {
    position: absolute;
    left: 0%;
    top: 76%;
    width: 82%;
    height: auto;
    display: block;
    object-fit: contain;
}

/* 相机闪光效果，快速放大缩小 + 外发光 */
.section14-flash {
    position: absolute;
    left: 70%;
    top: 81%;
    transform: translate(-50%, -50%);
    width: 13%;
    height: auto;
    display: block;
    object-fit: contain;
    pointer-events: none;
    animation: section14-flash-pulse 0.5s ease-in-out infinite;
}

@keyframes section14-flash-pulse {
    0%, 100% {
        transform: translate(-50%, -50%) scale(1);
        filter: drop-shadow(0 0 6px rgba(255, 255, 200, 0.7)) drop-shadow(0 0 12px rgba(255, 255, 220, 0.5));
        opacity: 0.85;
    }
    50% {
        transform: translate(-50%, -50%) scale(1.3);
        filter: drop-shadow(0 0 16px rgba(255, 255, 230, 1)) drop-shadow(0 0 28px rgba(255, 255, 255, 0.9));
        opacity: 1;
    }
}

/* ========== 第十五块 ========== */
/* 鸟图，绝对定位 + 发光 + 点击弹出鸟卡 */
.section15-bird {
    position: absolute;
    left: 28%;
    top: 57%;
    width: 28%;
    height: auto;
    display: block;
    object-fit: contain;
    pointer-events: auto;
    cursor: pointer;
}

/* ========== 第十六块 ========== */
/* 两只鸟图，绝对定位 + 发光 + 点击弹出鸟卡 */
.section16-bird1,
.section16-bird2 {
    position: absolute;
    height: auto;
    display: block;
    object-fit: contain;
    pointer-events: auto;
    cursor: pointer;
}

.section16-bird1 {
    left: 48%;
    top: 2%;
    width: 33%;
}

.section16-bird2 {
    left: 9%;
    top: 51%;
    width: 53%;
}

/* ========== 第十七块、第十八块 ========== */
/* （无专用样式） */

/* ========== 第十九块 ========== */
/* 鸟图从上往下飘入，进入块时触发 */
.section19-bird {
    position: absolute;
    left: 54%;
    top: 28%;
    width: 41%;
    height: auto;
    display: block;
    object-fit: contain;
    transition: transform 0.9s ease-out;
    transform: translateY(-130%);
}

.section19-bird-out {
    transform: translateY(-130%);
}

.section19-bird-in {
    transform: translateY(0);
}

/* 第十九块：表格图，top:80%，从下往上擦除出现，由哨兵触发 */
.section19-table-wrap {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.section19-table {
    position: absolute;
    left: 45%;
    top: 69%;
    transform: translateX(-50%);
    width: 60%;
    height: auto;
    display: block;
    object-fit: contain;
    clip-path: inset(0 0 100% 0);
    opacity: 0;
    transition: clip-path 1.5s ease-out, opacity 1.5s ease-out;
}

.section19-table-wrap.section19-table-in .section19-table {
    clip-path: inset(0 0 0 0);
    opacity: 1;
}

/* 哨兵：滑到此处进入视口时触发表格擦除动画，调 top 可微调触发时机 */
.section19-table-trigger {
    position: absolute;
    left: 0;
    top: 80%;
    width: 100%;
    height: 1px;
    pointer-events: none;
    visibility: hidden;
}

/* ========== 第二十块 ========== */
/* 彩色叠层，叠在黑白底图上，哨兵进入视口时逐渐浮现，3s */
.section20-color-wrap {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    z-index: 1;
}

.section20-color-layer {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    pointer-events: none;
    opacity: 0;
    transition: opacity 4s ease-out;
}

.block#block-20.section20-color-in .section20-color-layer {
    opacity: 1;
}

/* 哨兵：滑到此处进入视口时触发彩色浮现，调 top 可微调从块内什么位置开始播 */
.section20-color-trigger {
    position: absolute;
    left: 0;
    top: 20%;
    width: 100%;
    height: 1px;
    pointer-events: none;
    visibility: hidden;
}

/* 五只鸟图，绝对定位 + 发光 + 滑到哨兵位置时浮现 + 点击弹出鸟卡 */
.section20-bird1-wrap,
.section20-bird2-wrap,
.section20-bird3-wrap,
.section20-bird4-wrap,
.section20-bird5-wrap {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.section20-bird1-wrap .section20-bird1,
.section20-bird2-wrap .section20-bird2,
.section20-bird3-wrap .section20-bird3,
.section20-bird4-wrap .section20-bird4,
.section20-bird5-wrap .section20-bird5 {
    pointer-events: auto;
    cursor: pointer;
}

.section20-bird1,
.section20-bird2,
.section20-bird3,
.section20-bird4,
.section20-bird5 {
    position: absolute;
    height: auto;
    display: block;
    object-fit: contain;
    opacity: 0;
    transition: opacity 0.9s ease-out, transform 0.9s ease-out;
    transform: translateY(24px);
}

.section20-bird1 {
    left: 1%;
    top: 39%;
    width: 43%;
}

.section20-bird2 {
    left: 7%;
    top: 55%;
    width: 37%;
}

.section20-bird3 {
    left: 20%;
    top: 68%;
    width: 25%;
}

.section20-bird4 {
    left: 17%;
    top: 79%;
    width: 17%;
}

.section20-bird5 {
    left: 17%;
    top: 92%;
    width: 48%;
}

.section20-bird1-wrap.section20-bird1-in .section20-bird1,
.section20-bird2-wrap.section20-bird2-in .section20-bird2,
.section20-bird3-wrap.section20-bird3-in .section20-bird3,
.section20-bird4-wrap.section20-bird4-in .section20-bird4,
.section20-bird5-wrap.section20-bird5-in .section20-bird5 {
    opacity: 1;
    transform: translateY(0);
}

/* 哨兵：滑到此处时对应鸟图浮现，调 top 可微调触发位置 */
.section20-bird1-trigger {
    position: absolute;
    left: 0;
    top: 50%;
    width: 100%;
    height: 1px;
    pointer-events: none;
    visibility: hidden;
}

.section20-bird2-trigger {
    position: absolute;
    left: 0;
    top: 60%;
    width: 100%;
    height: 1px;
    pointer-events: none;
    visibility: hidden;
}

.section20-bird3-trigger {
    position: absolute;
    left: 0;
    top: 75%;
    width: 100%;
    height: 1px;
    pointer-events: none;
    visibility: hidden;
}

.section20-bird4-trigger {
    position: absolute;
    left: 0;
    top: 85%;
    width: 100%;
    height: 1px;
    pointer-events: none;
    visibility: hidden;
}

.section20-bird5-trigger {
    position: absolute;
    left: 0;
    top: 98%;
    width: 100%;
    height: 1px;
    pointer-events: none;
    visibility: hidden;
}

/* 10 组背景鸟图（20_bg_bird1～10），容器与结构同 section20-bird1～5，哨兵控制渐显，无发光无弹卡 */
.section20-bg-bird1-wrap,
.section20-bg-bird2-wrap,
.section20-bg-bird3-wrap,
.section20-bg-bird4-wrap,
.section20-bg-bird5-wrap,
.section20-bg-bird6-wrap,
.section20-bg-bird7-wrap,
.section20-bg-bird9-wrap,
.section20-bg-bird10-wrap {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.section20-bg-bird1,
.section20-bg-bird2,
.section20-bg-bird3,
.section20-bg-bird4,
.section20-bg-bird5,
.section20-bg-bird6,
.section20-bg-bird7,
.section20-bg-bird9,
.section20-bg-bird10 {
    position: absolute;
    height: auto;
    display: block;
    object-fit: contain;
    opacity: 0;
    transition: opacity 0.9s ease-out;
}

/* 每张图相对整块(底图)的位置与大小，可单独改 left / top / width */
.section20-bg-bird1 {
    left: 52%;
    top: 2%;
    width: 32%;
}

.section20-bg-bird2 {
    left: 46%;
    top: 15%;
    width: 50%;
}

.section20-bg-bird3 {
    left: 1%;
    top: 27%;
    width: 61%;
}

.section20-bg-bird4 {
    left: 56%;
    top: 32%;
    width: 41%;
}

.section20-bg-bird5 {
    left: 10%;
    top: 49%;
    width: 28%;
}

.section20-bg-bird6 {
    left: 54%;
    top: 55%;
    width: 39%;
}

.section20-bg-bird7 {
    left: 25%;
    top: 62%;
    width: 35%;
}

.section20-bg-bird9 {
    left: 62%;
    top: 79%;
    width: 26%;
}

.section20-bg-bird10 {
    left: 0%;
    top: 85%;
    width: 56%;
}

.section20-bg-bird1-wrap.section20-bg-bird1-in .section20-bg-bird1,
.section20-bg-bird2-wrap.section20-bg-bird2-in .section20-bg-bird2,
.section20-bg-bird3-wrap.section20-bg-bird3-in .section20-bg-bird3,
.section20-bg-bird4-wrap.section20-bg-bird4-in .section20-bg-bird4,
.section20-bg-bird5-wrap.section20-bg-bird5-in .section20-bg-bird5,
.section20-bg-bird6-wrap.section20-bg-bird6-in .section20-bg-bird6,
.section20-bg-bird7-wrap.section20-bg-bird7-in .section20-bg-bird7,
.section20-bg-bird9-wrap.section20-bg-bird9-in .section20-bg-bird9,
.section20-bg-bird10-wrap.section20-bg-bird10-in .section20-bg-bird10 {
    opacity: 1;
}

/* 哨兵：滑到此处时对应背景鸟图渐显，调各 trigger 的 top 可微调出现时机（相对整块） */
.section20-bg-bird1-trigger {
    position: absolute;
    left: 0;
    top: 20%;
    width: 100%;
    height: 1px;
    pointer-events: none;
    visibility: hidden;
}

.section20-bg-bird2-trigger {
    position: absolute;
    left: 0;
    top: 25%;
    width: 100%;
    height: 1px;
    pointer-events: none;
    visibility: hidden;
}

.section20-bg-bird3-trigger {
    position: absolute;
    left: 0;
    top: 35%;
    width: 100%;
    height: 1px;
    pointer-events: none;
    visibility: hidden;
}

.section20-bg-bird4-trigger {
    position: absolute;
    left: 0;
    top: 39%;
    width: 100%;
    height: 1px;
    pointer-events: none;
    visibility: hidden;
}

.section20-bg-bird5-trigger {
    position: absolute;
    left: 0;
    top: 60%;
    width: 100%;
    height: 1px;
    pointer-events: none;
    visibility: hidden;
}

.section20-bg-bird6-trigger {
    position: absolute;
    left: 0;
    top: 63%;
    width: 100%;
    height: 1px;
    pointer-events: none;
    visibility: hidden;
}

.section20-bg-bird7-trigger {
    position: absolute;
    left: 0;
    top: 68%;
    width: 100%;
    height: 1px;
    pointer-events: none;
    visibility: hidden;
}

.section20-bg-bird9-trigger {
    position: absolute;
    left: 0;
    top: 88%;
    width: 100%;
    height: 1px;
    pointer-events: none;
    visibility: hidden;
}

.section20-bg-bird10-trigger {
    position: absolute;
    left: 0;
    top: 95%;
    width: 100%;
    height: 1px;
    pointer-events: none;
    visibility: hidden;
}

/* 两个按钮：点击查看、活动回顾，结构同 section20-bg-bird，哨兵控制渐显，点击触发宽图浮层 */
.section20-btn1-wrap,
.section20-btn2-wrap {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.section20-btn1,
.section20-btn2 {
    position: absolute;
    height: auto;
    display: block;
    object-fit: contain;
    opacity: 0;
    transition: opacity 0.9s ease-out;
    pointer-events: auto;
    cursor: pointer;
}

.section20-btn1 { left: 38%; top: 10%; width: 16%; }
.section20-btn2 { left: 67%; top: 67%; width: 16%; }

.section20-btn1-wrap.section20-btn1-in .section20-btn1,
.section20-btn2-wrap.section20-btn2-in .section20-btn2 {
    opacity: 1;
}

.section20-btn1-trigger {
    position: absolute;
    left: 0;
    top: 25%;
    width: 100%;
    height: 1px;
    pointer-events: none;
    visibility: hidden;
}

.section20-btn2-trigger {
    position: absolute;
    left: 0;
    top: 75%;
    width: 100%;
    height: 1px;
    pointer-events: none;
    visibility: hidden;
}

/* ========== 第十八块：6 张鸟卡叠放，点击弹出到块中间查看，再点或点背景收回；划出块时全部收回 ========== */
/* 让 block-content 铺满整块，卡片 left/top 的 % 才相对整块计算，贴在左侧 */
#block-18 .block-content {
    position: absolute;
    inset: 0;
}

.section18-cards {
    position: absolute;
    inset: 0;
    z-index: 5;
    pointer-events: none;
}

.section18-cards .section18-card {
    pointer-events: auto;
    position: absolute;
    width: 45%;
    height: auto;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25),
                0 0 0 2px rgba(212, 175, 55, 0.9),
                0 0 12px 2px rgba(218, 165, 32, 0.6),
                0 0 20px 4px rgba(255, 215, 0, 0.3);
    cursor: pointer;
    transition: transform 0.35s ease, left 0.35s ease, top 0.35s ease, width 0.35s ease, z-index 0s;
    z-index: 1;
}

.section18-cards .section18-card img {
    display: block;
    width: 100%;
    height: auto;
    vertical-align: top;
}

/* 初始状态：贴块最左侧、垂直居中扇形叠放 */
.section18-card-1 { left: -20%;   top: 11%; transform: rotate(-22deg); }
.section18-card-2 { left: -11%;  top: 17%; transform: rotate(-10deg);  }
.section18-card-3 { left: -7%; top: 23%; transform: rotate(0deg);   }
.section18-card-4 { left: -6%; top: 30%; transform: rotate(5deg);   }
.section18-card-5 { left: -9%; top: 37%; transform: rotate(14deg);   }
.section18-card-6 { left: -14%; top: 45%; transform: rotate(22deg);  }

/* 弹出状态：到块中间，放大，置顶 */
.section18-cards .section18-card.popout {
    left: 50%;
    top: 50%;
    width: 72%;
    max-width: none;
    transform: translate(-50%, -50%);
    z-index: 10;
}

.section18-cards .section18-card.popout img {
    width: 100%;
}

/* ========== 第二十一块 ========== */
/* 五张数据图，哨兵控制出现时机，从左往右渐变擦除出现 */
/* 以下 wrap 的 top/left 均为相对整块(底图)的百分比定位 */
.section21-table1-wrap,
.section21-table2-wrap,
.section21-table3-wrap,
.section21-table4-wrap,
.section21-table5-wrap {
    position: absolute;
    left: 0;
    width: 100%;
    height: 20%;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    overflow: visible;
}

/* 每张图在底图上的位置：top=距底图顶部的比例，left=距底图左侧的比例（0 为贴左），可单独改 */
.section21-table1-wrap { top: 2%; left: -7%; }
.section21-table2-wrap { top: 19%; left: -7%; }
.section21-table3-wrap { top: 35.5%; left: -7%; }
.section21-table4-wrap { top: 53%; left: -7%; }
.section21-table5-wrap { top: 70%; left: -7%; }

/* 宽度相对整块(与底图同参照)，按比例；height:auto 保持宽高比 */
/* 从左往右擦除：用 clip-path，动画结束后整图完整不透明 */
.section21-table1,
.section21-table2,
.section21-table3,
.section21-table4,
.section21-table5 {
    display: block;
    width: 58%;
    height: auto;
    max-width: none;
    object-fit: contain;
    clip-path: inset(0 100% 0 0);
    transition: clip-path 1.2s ease-out;
}

.section21-table1-wrap.section21-table1-in .section21-table1,
.section21-table2-wrap.section21-table2-in .section21-table2,
.section21-table3-wrap.section21-table3-in .section21-table3,
.section21-table4-wrap.section21-table4-in .section21-table4,
.section21-table5-wrap.section21-table5-in .section21-table5 {
    clip-path: inset(0 0 0 0);
}

/* 哨兵：相对整块(block-21)定位，滑到此处进入视口时触发对应图片；top 为整块高度的百分比，越小越早出现 */
.section21-table1-trigger,
.section21-table2-trigger,
.section21-table3-trigger,
.section21-table4-trigger,
.section21-table5-trigger {
    position: absolute;
    left: 0;
    width: 100%;
    height: 1px;
    pointer-events: none;
    visibility: hidden;
}
.section21-table1-trigger { top: 10%; }   /* 整块顶部起 10% 时第 1 张出现 */
.section21-table2-trigger { top: 45%; }   /* 整块 28% 时第 2 张出现 */
.section21-table3-trigger { top: 58%; }   /* 整块 46% 时第 3 张出现 */
.section21-table4-trigger { top: 68%; }   /* 整块 64% 时第 4 张出现 */
.section21-table5-trigger { top: 85%; }   /* 整块 82% 时第 5 张出现 */

/* 鸟图，哨兵触发，从上往下平移飘入，可见度 0→100%；位置/大小/漂移距离可微调 */
.section21-bird-wrap {
    position: absolute;
    left: -12%;
    top: 85%;
    width: 100%;
    height: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    overflow: visible;
}

.section21-bird {
    display: block;
    width: 50%;
    height: auto;
    max-width: none;
    object-fit: contain;
    opacity: 0;
    transform: translateY(-80px);
    transition: opacity 0.6s ease-out, transform 0.8s ease-out;
}

.section21-bird-wrap.section21-bird-in .section21-bird {
    opacity: 1;
    transform: translateY(0);
}

.section21-bird-trigger {
    position: absolute;
    left: 0;
    top: 95%;
    width: 100%;
    height: 1px;
    pointer-events: none;
    visibility: hidden;
}

/* ========== 第二十二块、第二十三块 ========== */
/* （无专用样式，仅底图） */

/* ========== 公用：滚动浮出 / 点击动画类 ========== */
.block-float-reveal {
    opacity: 0;
    transform: translateY(-80px);
}

.block-float-reveal.float-reveal-out {
    opacity: 0;
    transform: translateY(-80px);
}

.block-float-reveal.float-reveal-in {
    opacity: 1;
    transform: translateY(0);
}

/* 点击触发的动画元素 */
.block-click-anim {
    transition: opacity 0.4s ease, transform 0.4s ease;
}

.block-click-anim.anim-out {
    opacity: 0;
    visibility: hidden;
}

.block-click-anim.anim-in {
    opacity: 1;
    visibility: visible;
}