/* ════════════════════════════════════════════════════════════
   开场卷轴动画 v4——横向卷轴 + 6 层精细包头
   ════════════════════════════════════════════════════════════ */

@property --reveal-radius {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 0%;
}

/* ─── 覆盖层 ─── */
.intro-overlay {
    position: fixed; inset: 0; z-index: 9999;
    pointer-events: all; overflow: hidden;
    display: flex; align-items: center; justify-content: center;
}

/* ─── 黑虚空背景 ─── */
.intro-backdrop {
    position: absolute; inset: 0;
    --reveal-radius: 0%;
    background: radial-gradient(
        circle at center,
        transparent 0%,
        transparent var(--reveal-radius),
        rgba(6, 3, 1, .96) calc(var(--reveal-radius) + 18%),
        rgba(0, 0, 0, 1) 100%
    );
    transition:
        --reveal-radius 2.2s cubic-bezier(.45, 0, .55, 1),
        opacity 2.2s cubic-bezier(.45, 0, .55, 1);
    opacity: 1;
    pointer-events: none;
}
.intro-overlay.intro-dawn .intro-backdrop {
    --reveal-radius: 100%;
    opacity: 0;
}

/* ─── 飘浮光点 ─── */
.intro-stars {
    position: absolute; inset: 0;
    pointer-events: none;
    transition: opacity 1.2s ease;
}
.intro-overlay.intro-dawn .intro-stars { opacity: 0; }
.intro-star {
    position: absolute;
    width: 3px; height: 3px; border-radius: 50%;
    background: radial-gradient(circle,
        rgba(255, 230, 175, .95) 0%,
        rgba(255, 195, 115, .55) 50%,
        transparent 80%);
    box-shadow:
        0 0 6px rgba(255, 215, 135, .8),
        0 0 14px rgba(255, 175, 75, .35);
    opacity: 0;
    animation: starDrift ease-in-out infinite;
}
.intro-star.big { width: 4px; height: 4px; }
.intro-star.cool {
    background: radial-gradient(circle,
        rgba(220, 232, 255, .95) 0%,
        rgba(160, 195, 245, .55) 50%,
        transparent 80%);
    box-shadow:
        0 0 6px rgba(200, 220, 255, .7),
        0 0 14px rgba(140, 180, 235, .35);
}
@keyframes starDrift {
    0%   { opacity: 0; transform: translate(0, 0) scale(.4); }
    20%  { opacity: .85; }
    50%  { opacity: 1; transform: translate(var(--dx, 0), var(--dy, -20px)) scale(1.1); }
    80%  { opacity: .7; }
    100% { opacity: 0; transform: translate(calc(var(--dx, 0) * 2), calc(var(--dy, -20px) * 2)) scale(.3); }
}

/* ─── 底部迷雾 ─── */
.intro-mist {
    position: absolute; bottom: 0; left: -10%; right: -10%;
    height: 35%;
    pointer-events: none;
    background:
        radial-gradient(ellipse 60% 90% at 30% 100%,
            rgba(60, 40, 24, .35) 0%, transparent 70%),
        radial-gradient(ellipse 65% 90% at 70% 100%,
            rgba(40, 28, 18, .3) 0%, transparent 70%);
    filter: blur(22px);
    animation: mistSway 18s ease-in-out infinite;
    transition: opacity 1.2s ease;
}
.intro-overlay.intro-dawn .intro-mist { opacity: 0; }
@keyframes mistSway {
    0%, 100% { transform: translateX(0) scaleX(1); opacity: .85; }
    50%      { transform: translateX(24px) scaleX(1.05); opacity: 1; }
}

/* ═══════════════════════════════════════════════════════════
   卷轴外层 wrap——承载呼吸缩放 + 点击响应
   （把 scale 动画放在 wrap 上，避免与 scroll 自身的 dissolve transform 冲突）
   ═══════════════════════════════════════════════════════════ */
.intro-scroll-wrap {
    position: relative; z-index: 5;
    cursor: pointer;
    transform-origin: center center;
    animation: scrollBreathing 2.5s ease-in-out infinite;
    transition: transform .35s ease;
}
.intro-overlay.intro-unfurl .intro-scroll-wrap {
    animation: none;
    cursor: default;
    transform: scale(1);
}
@keyframes scrollBreathing {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.03); }
}

/* ═══════════════════════════════════════════════════════════
   卷轴本体（横向：左轴 → 纸 → 右轴）
   ═══════════════════════════════════════════════════════════ */
.intro-scroll {
    position: relative;
    display: flex;
    flex-direction: row;          /* 横向 */
    align-items: center;
    justify-content: center;
    filter: drop-shadow(0 24px 56px rgba(0, 0, 0, .95));
    transition:
        opacity 1s cubic-bezier(.4, 0, .6, 1) .4s,
        transform 1s cubic-bezier(.4, 0, .6, 1) .4s;
}
.intro-overlay.intro-dissolve .intro-scroll {
    opacity: 0;
    transform: translateY(24px) scale(.97);
}

/* ═══════════════════════════════════════════════════════════
   底部提示文字"点击卷轴，启程旅途"
   ═══════════════════════════════════════════════════════════ */
.intro-hint {
    position: absolute;
    bottom: 14vh;
    left: 50%;
    transform: translateX(-50%);
    z-index: 6;
    font-family: 'Ma Shan Zheng', 'Noto Serif SC', cursive;
    color: rgba(255, 255, 255, .75);
    font-size: clamp(.95rem, 1.4vw, 1.15rem);
    letter-spacing: .18em;
    white-space: nowrap;
    pointer-events: none;
    text-shadow:
        0 2px 4px rgba(0, 0, 0, .9),
        0 0 12px rgba(0, 0, 0, .6);
    animation: hintBreathe 2.5s ease-in-out infinite;
    transition: opacity .4s ease;
}
/* 点击展开瞬间——立即关掉呼吸动画 + 0.4s 淡出 */
.intro-overlay.intro-unfurl .intro-hint {
    animation: none;          /* ← 关键：释放 opacity 控制权给 transition */
    opacity: 0;
}
@keyframes hintBreathe {
    0%, 100% { opacity: .55; }
    50%      { opacity: .95; }
}

/* ─── 竖向木轴（左右各一根） ─── */
.intro-rod {
    position: relative; z-index: 4;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 60px;
    height: 420px;
    flex-shrink: 0;
}
/* 让木轴"咬住"纸张边缘——负 margin 让纸张 11px 卷入轴头 */
.intro-rod-left  { margin-right: -11px; }
.intro-rod-right { margin-left:  -11px; }

/* ═══════════════════════════════════════════════════════════
   ★ 精细包头：6 层堆叠（顶→底：finial → stem → bowl → ring → collar → base）
     底部包头使用相反顺序（base → collar → ring → bowl → stem → finial）
   ═══════════════════════════════════════════════════════════ */
.rod-cap {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 60px;
    flex-shrink: 0;
    z-index: 5;
}

/* ① finial——顶端装饰小球 */
.cap-finial {
    width: 11px; height: 13px;
    border-radius: 50%;
    background:
        /* 高光小点 */
        radial-gradient(circle 2px at 32% 28%,
            rgba(255, 250, 220, .95) 0%, transparent 70%),
        /* 主体金属球 */
        radial-gradient(circle at 35% 32%,
            #f8e0a0 0%,
            #d4a878 18%,
            #a87838 38%,
            #6a4220 60%,
            #2a1408 85%,
            #0a0402 100%);
    box-shadow:
        0 2px 3px rgba(0, 0, 0, .9),
        inset 0 -2px 2px rgba(0, 0, 0, .55),
        inset 0 1px 1px rgba(255, 230, 170, .45);
    z-index: 6;
    position: relative;
}

/* ② stem——细颈连接 */
.cap-stem {
    width: 7px; height: 5px;
    margin-top: -2px;
    background:
        linear-gradient(90deg,
            #0a0402 0%,
            #2a1408 18%,
            #5a3018 40%,
            #8b6432 50%,
            #5a3018 60%,
            #2a1408 82%,
            #0a0402 100%);
    border-radius: 1.5px 1.5px 1px 1px;
    box-shadow:
        inset 0 -1px 1px rgba(0, 0, 0, .7),
        inset 0 1px 1px rgba(255, 220, 160, .5),
        0 1px 2px rgba(0, 0, 0, .55);
    z-index: 5;
    position: relative;
}

/* ③ bowl——主球身（精细 4 层径向渐变 + 内嵌高光点） */
.cap-bowl {
    position: relative;
    width: 52px; height: 30px;
    margin-top: -1px;
    border-radius: 50% / 60%;
    background:
        /* (d) 上部小镜面反射 */
        radial-gradient(ellipse 7px 3px at 32% 22%,
            rgba(255, 250, 220, .9) 0%,
            transparent 75%),
        /* (c) 上半弧形高光带 */
        radial-gradient(ellipse 55% 38% at 38% 22%,
            rgba(255, 225, 165, .68) 0%,
            rgba(220, 170, 90, .3) 35%,
            transparent 70%),
        /* (b) 下半阴影 */
        radial-gradient(ellipse 85% 42% at 50% 95%,
            rgba(8, 3, 1, .8) 0%,
            transparent 55%),
        /* (a) 主体古铜色径向 */
        radial-gradient(ellipse at 50% 50%,
            #c89460 0%,
            #9a6a30 20%,
            #6a4218 45%,
            #3a1c08 75%,
            #1a0a04 95%);
    box-shadow:
        0 3px 6px rgba(0, 0, 0, .85),
        /* 边缘暗影制造球体感 */
        inset 0 -4px 8px rgba(0, 0, 0, .7),
        inset 4px 0 6px rgba(0, 0, 0, .35),
        inset -4px 0 6px rgba(0, 0, 0, .35),
        /* 顶部细高光 */
        inset 0 2px 2px rgba(255, 230, 170, .25);
    z-index: 4;
}
/* 球身上额外的小亮点（再加一层立体感） */
.cap-bowl::before {
    content: '';
    position: absolute;
    top: 4px; left: 28%;
    width: 5px; height: 2px;
    background: rgba(255, 250, 220, .65);
    border-radius: 50%;
    filter: blur(.4px);
}

/* ④ ring——主装饰凸环（金属环带） */
.cap-ring {
    width: 56px; height: 6px;
    margin-top: -3px;
    background:
        linear-gradient(180deg,
            #0e0402 0%,
            #3a1c08 10%,
            #6e4220 22%,
            #a87838 32%,
            #d4a878 42%,
            #c89460 52%,
            #a87838 62%,
            #6e4220 75%,
            #2a1408 90%,
            #0a0402 100%);
    border-radius: 50% / 70%;
    box-shadow:
        0 3px 4px rgba(0, 0, 0, .7),
        /* 顶部光带 */
        inset 0 2px 1.5px rgba(255, 235, 180, .65),
        /* 底部暗影 */
        inset 0 -2px 2px rgba(0, 0, 0, .65),
        /* 两侧暗角 */
        inset 4px 0 3px rgba(0, 0, 0, .3),
        inset -4px 0 3px rgba(0, 0, 0, .3);
    z-index: 3;
    position: relative;
}

/* ⑤ collar——副凸环（更窄） */
.cap-collar {
    width: 48px; height: 4px;
    margin-top: -1px;
    background:
        linear-gradient(180deg,
            #0e0402 0%,
            #2a1408 25%,
            #6a4220 50%,
            #2a1408 75%,
            #0a0402 100%);
    border-radius: 50% / 60%;
    box-shadow:
        inset 0 1px 1px rgba(255, 210, 140, .4),
        inset 0 -1px 1px rgba(0, 0, 0, .65),
        0 1px 2px rgba(0, 0, 0, .55);
    z-index: 2;
    position: relative;
}

/* ⑥ base——底座（最宽法兰，连接到木轴） */
.cap-base {
    width: 44px; height: 9px;
    margin-top: -1px;
    background:
        /* 顶部光带 */
        radial-gradient(ellipse 55% 50% at 50% 25%,
            #e0b888 0%,
            #b08858 25%,
            #7a4e22 50%,
            transparent 75%),
        /* 主体过渡到底部暗 */
        radial-gradient(ellipse at 50% 60%,
            #8b5a2a 0%,
            #5a3018 35%,
            #2a1408 70%,
            #0a0402 100%);
    border-radius: 50% 50% 18% 18% / 65% 65% 30% 30%;
    box-shadow:
        0 4px 5px rgba(0, 0, 0, .85),
        /* 顶部高光 */
        inset 0 2.5px 2px rgba(255, 220, 160, .5),
        /* 底部深暗 */
        inset 0 -4px 5px rgba(0, 0, 0, .7),
        /* 两侧 */
        inset 3px 0 4px rgba(0, 0, 0, .3),
        inset -3px 0 4px rgba(0, 0, 0, .3);
    z-index: 1;
    position: relative;
}

/* ═══════════════════════════════════════════════════════════
   木质轴身（中段）
   ═══════════════════════════════════════════════════════════ */
.rod-shaft {
    width: 38px;
    flex: 1;
    background:
        /* 不规则纵向年轮（双频率） */
        repeating-linear-gradient(180deg,
            transparent 0 3px,
            rgba(15, 5, 1, .55) 3px 4px,
            transparent 4px 10px,
            rgba(255, 180, 80, .04) 10px 11px,
            transparent 11px 17px,
            rgba(15, 5, 1, .35) 17px 18px),
        repeating-linear-gradient(180deg,
            transparent 0 23px,
            rgba(255, 200, 140, .03) 23px 24px),
        /* 横向极淡纤维 */
        repeating-linear-gradient(90deg,
            transparent 0 11px,
            rgba(15, 5, 1, .08) 11px 12px),
        /* 圆柱光影（左右暗中间亮） */
        linear-gradient(90deg,
            #060201 0%,
            #1a0c04 12%,
            #3a1c08 30%,
            #5a2c14 46%,
            #6e3818 52%,
            #4a2410 68%,
            #1a0c04 88%,
            #060201 100%);
    box-shadow:
        inset 0 0 16px rgba(0, 0, 0, .8),
        inset 2px 0 3px rgba(255, 180, 80, .07),
        inset -2px 0 3px rgba(255, 180, 80, .07),
        inset 0 3px 4px rgba(0, 0, 0, .5),
        inset 0 -3px 4px rgba(0, 0, 0, .5);
}

/* ═══════════════════════════════════════════════════════════
   羊皮纸（横向：宽度 0 → 760）
   ═══════════════════════════════════════════════════════════ */
.intro-parchment {
    position: relative;
    z-index: 1;
    width: 0;
    height: 340px;
    overflow: hidden;
    background:
        /* 不规则做旧污渍（9 处） */
        radial-gradient(ellipse 8% 10% at 12% 22%, rgba(50, 22, 6, .42) 0%, transparent 65%),
        radial-gradient(ellipse 6% 8% at 80% 18%, rgba(70, 38, 12, .38) 0%, transparent 65%),
        radial-gradient(ellipse 10% 12% at 24% 76%, rgba(60, 32, 10, .38) 0%, transparent 65%),
        radial-gradient(ellipse 7% 10% at 86% 72%, rgba(70, 38, 12, .35) 0%, transparent 65%),
        radial-gradient(ellipse 5% 8% at 48% 42%, rgba(50, 24, 8, .25) 0%, transparent 65%),
        radial-gradient(ellipse 5% 7% at 10% 50%, rgba(90, 55, 22, .3) 0%, transparent 65%),
        radial-gradient(ellipse 8% 10% at 90% 48%, rgba(90, 55, 22, .28) 0%, transparent 65%),
        radial-gradient(ellipse 6% 8% at 40% 88%, rgba(60, 30, 10, .32) 0%, transparent 65%),
        radial-gradient(ellipse 5% 7% at 72% 90%, rgba(70, 40, 14, .3) 0%, transparent 65%),
        /* 双层纤维斜纹 */
        repeating-linear-gradient(45deg,
            rgba(100, 60, 25, .1) 0 2px, transparent 2px 5px),
        repeating-linear-gradient(-30deg,
            rgba(70, 40, 15, .06) 0 3px, transparent 3px 7px),
        /* 纵向极淡褶皱 */
        repeating-linear-gradient(0deg,
            transparent 0 60px,
            rgba(60, 30, 10, .04) 60px 61px),
        /* 主体径向：中央亮、四角沉 */
        radial-gradient(ellipse at 50% 50%,
            #d8b478 0%,
            #b89460 50%,
            #6a4818 95%);
    box-shadow:
        /* 厚度感四周深色嵌入 */
        inset 0 0 70px rgba(35, 18, 4, .8),
        inset 14px 0 22px -8px rgba(40, 20, 5, .65),
        inset -14px 0 22px -8px rgba(40, 20, 5, .65),
        inset 0 12px 22px -6px rgba(40, 20, 5, .55),
        inset 0 -12px 22px -6px rgba(40, 20, 5, .55);
    transition: width 1.5s cubic-bezier(0.65, 0, 0.25, 1);
}
.intro-overlay.intro-unfurl .intro-parchment {
    width: clamp(440px, 60vw, 760px);
}

/* 上下破损撕边（横向卷轴的"长边"） */
.intro-parchment::before,
.intro-parchment::after {
    content: '';
    position: absolute;
    left: 0; right: 0;
    height: 12px;
    background: linear-gradient(180deg,
        #1a0c04 0%,
        #3a1c08 40%,
        rgba(58, 28, 8, .55) 75%,
        transparent 100%);
    pointer-events: none;
    filter: url(#roughen-2);
    z-index: 2;
}
.intro-parchment::before { top: 0; }
.intro-parchment::after  { bottom: 0; transform: scaleY(-1); }

/* 纸面内容包裹 */
.parchment-content {
    position: absolute; inset: 0;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    padding: 26px 50px;
    z-index: 1;
    gap: 18px;
}

/* ═══════════════════════════════════════════════════════════
   标题（字符级动画）
   ═══════════════════════════════════════════════════════════ */
.intro-title {
    font-family: 'Cinzel Decorative', 'Ma Shan Zheng', 'Noto Serif SC', serif;
    font-size: clamp(1.6rem, 3.8vw, 2.8rem);
    font-weight: 700;
    color: #2a1408;
    letter-spacing: .14em;
    white-space: nowrap;
    pointer-events: none;
    text-align: center;
    opacity: 0;
    transform: translateY(10px);
    transition:
        opacity .7s ease .8s,
        transform .7s ease .8s;
}
.intro-overlay.intro-unfurl .intro-title {
    opacity: 1;
    transform: translateY(0);
}
.title-char {
    display: inline-block;
    text-shadow:
        0 1px 0 rgba(255, 230, 180, .55),
        1px 2px 3px rgba(120, 70, 25, .45),
        0 0 16px rgba(180, 120, 50, .2);
}
.intro-overlay.intro-dissolve .title-char {
    animation: titleCharDisperse 1.1s cubic-bezier(.32, 0, .5, 1) forwards;
}
@keyframes titleCharDisperse {
    0% {
        opacity: 1;
        transform: translateY(0) translateX(0) scale(1) rotate(0deg);
        filter: blur(0) brightness(1);
    }
    18% {
        opacity: 1;
        transform: translateY(-6px) scale(1.12);
        filter: blur(0) brightness(1.85);
        text-shadow:
            0 0 14px rgba(255, 200, 100, .95),
            0 0 26px rgba(255, 160, 60, .75),
            0 0 40px rgba(255, 130, 40, .4);
    }
    100% {
        opacity: 0;
        transform:
            translateY(-130px)
            translateX(var(--drift, 0px))
            scale(.5)
            rotate(var(--rot, 0deg));
        filter: blur(8px) brightness(2.2);
        text-shadow:
            0 0 22px rgba(255, 200, 100, .5),
            0 0 36px rgba(255, 160, 60, .3);
    }
}

/* ═══════════════════════════════════════════════════════════
   火漆印章（标题下方）
   ═══════════════════════════════════════════════════════════ */
.wax-seal {
    position: relative;
    width: 60px; height: 60px;
    opacity: 0;
    transform: translateY(8px) scale(.85);
    transition:
        opacity .65s cubic-bezier(.3, 1.4, .5, 1) 1.3s,
        transform .65s cubic-bezier(.3, 1.4, .5, 1) 1.3s;
}
.intro-overlay.intro-unfurl .wax-seal {
    opacity: 1;
    transform: translateY(0) scale(1);
}

/* 丝带——印章背后两条暗红飘带 */
.seal-ribbons {
    position: absolute;
    top: 55%;
    left: 50%;
    transform: translateX(-50%);
    width: 68px;
    height: 42px;
    pointer-events: none;
    z-index: 0;
    filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .75));
}
.seal-ribbons svg { width: 100%; height: 100%; }

/* 印章本体 */
.seal-body {
    position: relative;
    width: 54px; height: 54px;
    margin: 0 auto;
    z-index: 1;
    background:
        /* 中央徽章光环 */
        radial-gradient(circle 14px at 50% 50%,
            transparent 50%,
            rgba(30, 4, 2, .6) 58%,
            rgba(20, 2, 0, .35) 70%,
            transparent 78%),
        /* 主体深红蜡 */
        radial-gradient(circle at 36% 32%,
            #b04028 0%,
            #8b2818 22%,
            #6a1810 50%,
            #3a0808 78%,
            #1a0204 100%);
    /* 不规则圆形（手工压印感） */
    border-radius: 48% 52% 46% 54% / 52% 48% 53% 47%;
    box-shadow:
        0 5px 10px rgba(0, 0, 0, .95),
        0 2px 4px rgba(80, 10, 5, .6),
        /* 受压凹陷 */
        inset 0 -5px 10px rgba(15, 2, 0, .75),
        /* 顶部高光 */
        inset 0 4px 6px rgba(255, 100, 70, .35),
        inset 3px 3px 4px rgba(255, 130, 90, .25);
}
.seal-body::after {
    content: '✦';
    position: absolute;
    inset: 0;
    display: flex; align-items: center; justify-content: center;
    color: rgba(30, 4, 2, .85);
    font-size: 24px;
    font-weight: bold;
    text-shadow:
        0 1px 0 rgba(255, 100, 70, .35),
        0 -1px 0 rgba(15, 2, 0, .8);
}

/* ═══════════════════════════════════════════════════════════
   重播按钮——手绘风格
   ═══════════════════════════════════════════════════════════ */
#test-intro-btn {
    background: transparent !important;
    border: none !important;
    padding: 8px 14px !important;
    font-family: 'Ma Shan Zheng', 'Noto Serif SC', cursive !important;
    font-size: .92rem !important;
    color: rgba(232, 201, 106, .78) !important;
    cursor: pointer;
    letter-spacing: .14em;
    text-shadow:
        -1px -1px 0 #1a0800, 1px -1px 0 #1a0800,
        -1px  1px 0 #1a0800, 1px  1px 0 #1a0800,
        2px 3px 5px rgba(0, 0, 0, .9),
        0 0 12px rgba(255, 180, 80, .3);
    transition: color .3s, transform .3s, text-shadow .3s, opacity .3s;
    opacity: .7;
    user-select: none;
}
#test-intro-btn::before { content: '⟪'; margin-right: 8px; opacity: .75; }
#test-intro-btn::after  { content: '⟫'; margin-left: 8px; opacity: .75; }
#test-intro-btn:hover {
    opacity: 1;
    color: #ffe7c4 !important;
    transform: translateY(-1px);
    text-shadow:
        -1px -1px 0 #1a0800, 1px -1px 0 #1a0800,
        -1px  1px 0 #1a0800, 1px  1px 0 #1a0800,
        2px 3px 5px rgba(0, 0, 0, .9),
        0 0 20px rgba(255, 200, 100, .7);
}
.intro-running #test-intro-btn {
    opacity: 0;
    pointer-events: none;
}

/* ═══════════════════════════════════════════════════════════
   地图元素分阶段显现
   ═══════════════════════════════════════════════════════════ */
body.intro-active .map-title,
body.intro-active .zone-label,
body.intro-active .map-hint,
body.intro-active .status-bar,
body.intro-active #music-btn,
body.intro-active #back-btn {
    opacity: 0 !important;
    transition: opacity .9s ease !important;
}
body.intro-stage-1 .map-title { opacity: .78 !important; }
body.intro-stage-2 .zone-about .zone-label { opacity: .94 !important; }
body.intro-stage-3 .zone-blog .zone-label,
body.intro-stage-3 .zone-projects .zone-label { opacity: .82 !important; }
body.intro-stage-4 .zone-contact .zone-label,
body.intro-stage-4 .zone-forge .zone-label { opacity: .82 !important; }
body.intro-stage-5 .map-hint,
body.intro-stage-5 .status-bar,
body.intro-stage-5 #music-btn { opacity: 1 !important; }