/* ==========================================================================
   敦煌 · 视频开场（全屏入场动画）  dunhuang-intro.css
   仅 dunhuang.html（敦煌城市专题页）引入；与武威马踏飞燕开场同一套交互。
   —— 性能要点（保证起播「丝滑」，无卡顿）——
   1. 不使用 CSS 实时模糊（全屏 filter:blur 是首屏卡顿主因）：背景用 ffmpeg 预生成的模糊底图；
   2. 不使用 backdrop-filter：提示条/按钮改为半透明纯色；
   3. 视频默认 opacity:0，待真正出画（playing）再淡入，避免「黑屏跳第一帧」的突变；
   4. 只对 opacity 做过渡并加 translateZ(0)/will-change，交给 GPU 合成。
   ========================================================================== */
.dhi{
    position: fixed; inset: 0; z-index: 9000;
    display: grid; place-items: center;
    background: #0a0705; isolation: isolate;
    opacity: 1; will-change: opacity;
    transition: opacity .9s cubic-bezier(.4, 0, .2, 1);
}
.dhi.is-out{ opacity: 0; pointer-events: none; }

/* 背景：预模糊底图（无运行时模糊） */
.dhi__bg{
    position: absolute; inset: 0; z-index: -2;
    background: #0a0705 center/cover no-repeat;
    transform: translateZ(0);
}
/* 视频主体：出画后才淡入 */
.dhi__video{
    position: absolute; inset: 0; z-index: -1;
    width: 100%; height: 100%; object-fit: cover;
    background: #0a0705;
    opacity: 0; will-change: opacity;
    transform: translateZ(0);
    transition: opacity .55s ease;
}
.dhi.is-ready .dhi__video{ opacity: 1; }
/* 竖屏 / 方形视口：完整显示不裁切 */
@media (max-aspect-ratio: 1/1){
    .dhi__video{ object-fit: contain; }
}

/* 中央文字层（点击穿透，任意处可跳过） */
.dhi__box{
    position: relative; z-index: 2; text-align: center;
    padding: 2rem 1.5rem; max-width: 92vw;
    pointer-events: none;
}
.dhi__brand{
    font-size: .74rem; letter-spacing: .42em; text-transform: uppercase;
    color: rgba(242, 222, 168, .82); margin: 0 0 1.1rem;
}
.dhi__title{
    font-family: 'Noto Serif SC', 'Source Han Serif SC', 'Songti SC', STSong, SimSun, serif;
    font-size: clamp(2.6rem, 9vw, 5.6rem); font-weight: 800;
    letter-spacing: .16em; line-height: 1.1; margin: 0 0 1rem;
    background: linear-gradient(180deg, #FBF2D8 0%, #F2DEA8 42%, #C9A15A 78%, #8A6A2E 100%);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; color: #F2DEA8;
}
.dhi__sub{
    font-family: 'Noto Serif SC', 'Source Han Serif SC', 'Songti SC', STSong, SimSun, serif;
    font-size: clamp(.95rem, 2.4vw, 1.2rem); letter-spacing: .3em;
    color: rgba(255, 244, 224, .9); margin: 0 0 .55rem;
}
.dhi__line{
    width: 0; height: 1px; margin: 1.4rem auto 0;
    background: linear-gradient(90deg, transparent, #C9A15A, transparent);
    animation: dhiLine 1.5s .3s cubic-bezier(.4, 0, .2, 1) forwards;
}
@keyframes dhiLine{ to{ width: min(420px, 74vw); } }

.dhi__box > *{ animation: dhiUp .8s cubic-bezier(.22, .61, .36, 1) both; }
.dhi__title{ animation-delay: .12s; }
.dhi__sub{ animation-delay: .26s; }
@keyframes dhiUp{ from{ opacity: 0; transform: translate3d(0, 18px, 0); } to{ opacity: 1; transform: none; } }

/* 底部提示（半透明纯色，不用 backdrop-filter） */
.dhi__skip{
    position: absolute; left: 50%; bottom: max(2.1rem, 4vh); transform: translateX(-50%);
    z-index: 3; font-size: .82rem; letter-spacing: .22em;
    color: rgba(255, 246, 230, .82); white-space: nowrap;
    padding: .45rem 1.1rem; border: 1px solid rgba(242, 222, 168, .34);
    border-radius: 999px; background: rgba(22, 14, 8, .52);
    animation: dhiBlink 2.6s ease-in-out infinite; pointer-events: none;
}
@keyframes dhiBlink{ 0%, 100%{ opacity: .58; } 50%{ opacity: 1; } }

/* 右上角声音开关 */
.dhi__sound{
    position: absolute; right: max(1.1rem, 3vw); top: max(1.1rem, 3vh);
    z-index: 4; width: 2.9rem; height: 2.9rem; border-radius: 50%;
    display: grid; place-items: center; cursor: pointer;
    color: #F2DEA8; font-size: 1.05rem; line-height: 1;
    border: 1px solid rgba(242, 222, 168, .42);
    background: rgba(22, 14, 8, .55);
    transition: background .3s, transform .3s, border-color .3s;
}
.dhi__sound:hover{ background: rgba(181, 43, 67, .6); border-color: rgba(242, 222, 168, .8); transform: scale(1.06); }
.dhi__sound.is-on{ background: rgba(181, 43, 67, .8); border-color: #F2DEA8; }

/* 开场期间锁定滚动 */
html.dhi-lock, html.dhi-lock body{ overflow: hidden !important; }

@media (max-width: 640px){
    .dhi__skip{ font-size: .74rem; letter-spacing: .16em; }
    .dhi__sound{ width: 2.5rem; height: 2.5rem; font-size: .95rem; }
}
/* 尊重「减弱动效」偏好 */
@media (prefers-reduced-motion: reduce){
    .dhi{ display: none !important; }
}


/* ---------- 被浏览器自动播放策略拦截「带声播放」时：引导一键开启声音 ---------- */
.dhi.is-blocked .dhi__skip{ display: none; }        /* 隐藏普通「点击任意处跳过」 */

.dhi__audio{
    position: absolute; left: 50%; bottom: max(2.1rem, 4vh); transform: translateX(-50%);
    z-index: 4; display: none; flex-direction: column; align-items: center; gap: .55rem;
}
.dhi.is-blocked .dhi__audio{ display: flex; animation: dhiUp .5s ease both; }

.dhi__unmute{
    font-family: inherit; font-size: .92rem; letter-spacing: .14em;
    color: #2A1508; padding: .64rem 1.6rem; border: 0; border-radius: 999px; cursor: pointer;
    background: linear-gradient(135deg, #FBF2D8 0%, #EBD08A 45%, #C9A15A 100%);
    box-shadow: 0 8px 26px rgba(0, 0, 0, .4);
    transition: transform .25s, filter .25s, box-shadow .25s;
}
.dhi__unmute:hover{ transform: translateY(-1px) scale(1.03); filter: brightness(1.06); }
.dhi__skiplink{
    font-family: inherit; font-size: .78rem; letter-spacing: .18em;
    color: rgba(255, 246, 230, .74); background: none; border: 0; cursor: pointer;
    padding: .3rem .6rem; text-decoration: underline; text-underline-offset: .25em;
}
.dhi__skiplink:hover{ color: #F2DEA8; }

/* 喇叭改为线条图标：静音 / 有声两态 */
.dhi__sound svg{ width: 1.15rem; height: 1.15rem; display: block; }
.dhi__sound .dhi__ico--on{ display: none; }
.dhi__sound.is-on .dhi__ico--on{ display: block; }
.dhi__sound.is-on .dhi__ico--off{ display: none; }
.dhi__unmute svg{ width: 1rem; height: 1rem; margin-right: .35rem; }
.dhi__unmute{ display: inline-flex; align-items: center; }