/* ==========================================================================
   兰州专题页 · 开场「黄河母亲」入场动画   lanzhou-intro.css
   --------------------------------------------------------------------------
   · 用途：页面打开时，先全屏显示黄河母亲雕塑（何鄂 · 1986），播放
     「上浮 + 微光闪烁」入场，停留后整体淡出，露出页面本身（黄河首屏照片）。
   · 与「马踏飞燕」开场（wuwei-intro.css）同一套时序与交互，只换素材与配色。
   · 作用域：仅 .lzi 这一层固定遮罩，与页面其它元素完全隔离。
   · 启用方式（只给需要的页面）：
       1) <head> 中：<link rel="stylesheet" href="lanzhou-intro.css">
       2) <body> 之后第一行：粘贴 .lzi 结构（见 lanzhou-intro.js 顶部注释）
       3) </body> 前：<script src="lanzhou-intro.js"></script>
   ========================================================================== */

.lzi{
  --lzi-enter:1.6s;
  --lzi-out:1.5s;
  position:fixed; inset:0; z-index:9000;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  background:radial-gradient(120% 95% at 50% 44%, #3A2A1B 0%, #20160E 58%, #100A06 100%);
  opacity:1;
  /* 幕布比素材晚一步收起：先「雕塑淡出」，再「页面浮现」 */
  transition:opacity .82s ease .68s;
  transition:opacity calc(var(--lzi-out) * .55) ease calc(var(--lzi-out) * .45);
}
.lzi.is-out{ opacity:0; }

/* 微光光晕（闪烁） */
.lzi__glow{
  position:absolute; left:50%; top:50%; width:120vmin; height:120vmin;
  transform:translate(-50%,-50%); border-radius:50%; pointer-events:none;
  background:radial-gradient(closest-side, rgba(228,192,118,.46), rgba(228,192,118,.14) 52%, rgba(228,192,118,0) 76%);
  filter:blur(18px); opacity:0;
}

/* 黄河母亲主体（宽幅构图：横向裁切的雕塑） */
.lzi__figure{
  position:relative; width:min(86vw,1080px); height:auto; display:block;
  filter:drop-shadow(0 34px 60px rgba(0,0,0,.62));
  opacity:0; transform:translate3d(0,64px,0) scale(.94);
  will-change:transform,opacity; backface-visibility:hidden;
}

/* 图注：金色细字，随主体一起上浮 */
.lzi__cap{
  position:relative; margin:2.4rem 0 0;
  font-size:.92rem; letter-spacing:.34em; text-indent:.34em;
  color:rgba(244,226,174,.82); opacity:0;
  transform:translate3d(0,18px,0);
}

/* ---- 入场：淡入 + 缓慢上浮 + 微光闪烁（时长 = --lzi-enter） ---- */
.lzi.is-enter .lzi__figure{ animation:lziEnter var(--lzi-enter) cubic-bezier(.4,.08,.3,1) forwards; }
.lzi.is-enter .lzi__cap   { animation:lziCap   var(--lzi-enter) cubic-bezier(.4,.08,.3,1) .18s forwards; }
.lzi.is-enter .lzi__glow  { animation:lziGlow  var(--lzi-enter) ease-in-out forwards; }

@keyframes lziEnter{
  0%   { opacity:0; transform:translate3d(0,60px,0) scale(.95); }
  100% { opacity:1; transform:translate3d(0,0,0) scale(1); }
}
@keyframes lziCap{
  0%   { opacity:0; transform:translate3d(0,18px,0); }
  100% { opacity:.86; transform:translate3d(0,0,0); }
}
@keyframes lziGlow{
  0%   { opacity:0; }
  30%  { opacity:.5; }
  48%  { opacity:.16; }
  68%  { opacity:.42; }
  100% { opacity:.24; }
}

/* ---- 淡出：素材在整段里缓慢淡出（时长 = --lzi-out），幕布再晚一步收起 ---- */
.lzi.is-out .lzi__figure{ animation:lziOut var(--lzi-out) cubic-bezier(.4,.05,.6,.95) forwards; }
.lzi.is-out .lzi__cap   { animation:lziOut var(--lzi-out) cubic-bezier(.4,.05,.6,.95) forwards; }
.lzi.is-out .lzi__glow  { animation:lziGlowOut var(--lzi-out) ease forwards; }

@keyframes lziOut{
  0%   { opacity:1; transform:translate3d(0,0,0) scale(1); }
  100% { opacity:0; transform:translate3d(0,-30px,0) scale(1.05); }
}
@keyframes lziGlowOut{ from{ opacity:.24; } to{ opacity:0; } }

/* ---- 跳过提示 + 点击跳过 ---- */
.lzi{ cursor:pointer; }
.lzi__skip{
  position:absolute; left:0; right:0; bottom:7%;
  text-align:center; font-size:.86rem; letter-spacing:.16em;
  color:rgba(244,226,174,.72); opacity:0; pointer-events:none;
  transition:opacity .6s ease .95s;
}
.lzi.is-enter .lzi__skip{ opacity:.72; }
.lzi.is-out   .lzi__skip,
.lzi.is-skip  .lzi__skip{ opacity:0; transition:opacity .25s ease; }

.lzi.is-skip{ opacity:0; transition:opacity .34s ease; }
.lzi.is-skip .lzi__figure,
.lzi.is-skip .lzi__cap,
.lzi.is-skip .lzi__glow{
  opacity:0 !important;
  transform:translate3d(0,-10px,0) scale(1.02) !important;
  transition:opacity .34s ease, transform .34s ease;
}

/* ---- 响应式 ---- */
@media (max-width:640px){
  .lzi__figure{ width:94vw; }
  .lzi__cap{ font-size:.8rem; letter-spacing:.26em; margin-top:1.8rem; }
}

/* ---- 无障碍：尊重系统「减少动态效果」→ 直接不显示开场层 ---- */
@media (prefers-reduced-motion: reduce){
  .lzi{ display:none !important; }
}