/* 圈扩散出画版：沿用收敛版「单色墨蓝 + 楷体竖排 + 明确主次」，只把退场改成
   中心光爆 → 光圈向外扩散 → 圆形洞把遮罩吞掉（iris）。零依赖。
   回退：body 去掉 intro-on 即瞬显。prefers-reduced-motion 直接关动画。 */
@property --iris{ syntax:"<number>"; inherits:true; initial-value:0; }
:root{ --sp:1; --ink:#2b4a63; --iris:0; }   /* --iris = 圆洞进度 0~100（78 已覆盖全屏对角）*/
html.revisit{ --sp:.80; }                    /* 回访提速 */

body.intro-on .intro{
  display:flex;
  animation:introBg 22s ease-in-out infinite,
            introIris calc(1.5s * var(--sp)) cubic-bezier(.22,.7,.3,1) calc(3.35s * var(--sp)) both;
}

.intro{
  position:fixed; inset:0; z-index:9999; display:none; overflow:hidden;
  flex-direction:column; align-items:center; justify-content:center;
  background:linear-gradient(165deg,#fbfcfd 0%,#f2f6f9 55%,#e8eff4 100%);
  background-size:150% 150%;
  /* 圆洞 iris：洞内 alpha 0（透出首页）→ 洞外 alpha 1（遮罩）。
     --iris=0 时四个 stop 全在 0%，末段 black 100% 胜出 → 整层不透明，开场无洞。 */
  -webkit-mask-image:radial-gradient(circle 100vmax at 50% 50%, rgba(0,0,0,0) 0%, rgba(0,0,0,0) calc(var(--iris) * 1%), rgba(0,0,0,1) calc(var(--iris) * 1.18%), rgba(0,0,0,1) 100%);
          mask-image:radial-gradient(circle 100vmax at 50% 50%, rgba(0,0,0,0) 0%, rgba(0,0,0,0) calc(var(--iris) * 1%), rgba(0,0,0,1) calc(var(--iris) * 1.18%), rgba(0,0,0,1) 100%);
  -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
}
/* 一处柔光缓慢呼吸（背景，不抢戏）*/
.intro::after{
  content:""; position:absolute; inset:-20%; pointer-events:none; z-index:0;
  background:radial-gradient(46% 40% at 50% 44%, rgba(255,255,255,.8), rgba(255,255,255,0) 64%);
  animation:introBreath 16s ease-in-out infinite;
}
.intro-bg{ position:absolute; inset:0; z-index:0; }

/* ── 主角：四字竖排成一条（楷体＝书法条幅感）＋ 侧边一条墨线 ── */
.intro-inner{
  position:relative; z-index:5; display:flex; align-items:center; gap:26px;
  transition:transform .25s ease-out; will-change:transform;
}
.intro-title{
  display:flex; flex-direction:column; align-items:center; gap:.30em;
  font-family:"KaiTi","STKaiti","Kaiti SC","楷体","Songti SC","Noto Serif SC","STSong",serif;
  font-weight:400; font-size:min(11.5vh,92px); line-height:1;
  color:var(--ink);
}
.intro .ic{
  display:inline-block; position:relative; will-change:transform,filter,opacity;
  text-shadow:0 .018em 0 rgba(255,255,255,.7);
}
.intro .ic::after{                                   /* 极淡墨影：加笔画厚度，不引入新色 */
  content:attr(data-ch); position:absolute; left:.05em; top:.06em; z-index:-1;
  color:rgba(43,74,99,.15); mix-blend-mode:multiply; text-shadow:none;
}
/* 墨线（水线改竖版：自上而下生长，与字列并置成条幅）*/
.intro .il{
  display:block; width:1px; height:min(44vh,340px); border-radius:1px;
  background:linear-gradient(180deg, rgba(43,74,99,0) 0%, rgba(43,74,99,.5) 28%, rgba(43,74,99,.5) 72%, rgba(43,74,99,0) 100%);
  transform-origin:top center;
}
/* 入场：统一动作 + 纯时间错峰；退场：上浮化开（赶在光圈扫到之前先走）*/
body.intro-on .intro .ic{
  animation-name:introCharIn, introBloom, introFadeOut;
  animation-duration:calc(1.5s * var(--sp)), 6.4s, calc(.55s * var(--sp));
  animation-timing-function:cubic-bezier(.16,1,.3,1), ease-in-out, ease-in;
  animation-fill-mode:both, none, forwards;
  animation-iteration-count:1, infinite, 1;
  animation-delay:calc((.55s + var(--i) * .3s) * var(--sp)), calc((.55s + var(--i) * .3s) * var(--sp) + 1.5s * var(--sp)), calc(3.05s * var(--sp));
}
body.intro-on .intro .il{
  animation-name:introLine, introLineGlow, introFadeOut;
  animation-duration:calc(1.2s * var(--sp)), 5s, calc(.55s * var(--sp));
  animation-timing-function:cubic-bezier(.16,1,.3,1), ease-in-out, ease-in;
  animation-fill-mode:both, none, forwards;
  animation-iteration-count:1, infinite, 1;
  animation-delay:calc(2.2s * var(--sp)), calc(3.4s * var(--sp)), calc(3.05s * var(--sp));
}

/* ── 配角（全部降级）── */
.intro-mark{ position:absolute; left:50%; top:50%; z-index:4; width:0; height:0; pointer-events:none; }
.intro-mark .drop{
  position:absolute; left:-9px; top:-9px; width:18px; height:18px; border-radius:50%;
  background:radial-gradient(circle at 34% 28%, #ffffff 0%, rgba(43,74,99,.20) 100%);
  box-shadow:0 0 16px rgba(43,74,99,.16);
  opacity:0; animation:introDrop calc(1.5s * var(--sp)) cubic-bezier(.16,1,.3,1) calc(.1s * var(--sp)) both;
}
.intro-mark .halo{
  position:absolute; left:-26px; top:-26px; width:52px; height:52px; border-radius:50%;
  border:1px solid rgba(43,74,99,.22);
  opacity:0; animation:introHalo calc(1.5s * var(--sp)) cubic-bezier(.2,.7,.3,1) calc(.1s * var(--sp)) both;
}
.intro-mark .spark{
  position:absolute; left:-20px; top:0; width:40px; height:1px; border-radius:1px;
  background:linear-gradient(90deg,transparent,rgba(43,74,99,.3),transparent);
  opacity:0; animation:introSpark calc(1.5s * var(--sp)) ease-out calc(.1s * var(--sp)) both;
}
.intro-mark .spark.v{ rotate:90deg; }

/* 水波涟漪：两环，透明度低 */
.intro-ripple{ position:absolute; left:50%; bottom:16%; z-index:1; width:0; height:0; pointer-events:none; }
.intro-ripple .ring{
  position:absolute; left:0; top:0; width:220px; height:220px; margin:-110px 0 0 -110px;
  border:1px solid rgba(43,74,99,.20); border-radius:50%;
  animation:introRipple 5.6s cubic-bezier(.2,.7,.3,1) infinite;
}
.intro-ripple .ring.r2{ animation-delay:2.8s; }

/* 粒子：14（上浮8/下沉3/横移3），薄雾化 */
.intro-particles{ position:absolute; inset:0; z-index:2; pointer-events:none; }
.intro-particles .particle{
  position:absolute; border-radius:50%; opacity:0;
  background:radial-gradient(circle at 35% 30%, rgba(255,255,255,.8), rgba(43,74,99,.14));
  will-change:transform,opacity;
}
.intro-particles .particle.up{ bottom:-12px; animation-name:introRise; }
.intro-particles .particle.down{ top:-12px; animation-name:introFall; }
.intro-particles .particle.drift{ top:50%; animation-name:introDrift; }
.intro-particles .particle{ animation-timing-function:linear; animation-iteration-count:infinite; animation-fill-mode:both; }

/* 光圈：半径 = 洞半径 * 1.1，与圆洞同一条时间线向外扩散（落在羽化带里，边缘不生硬）*/
.intro-burst{
  position:absolute; left:50%; top:50%; z-index:6; pointer-events:none; border-radius:50%;
  width:calc(var(--iris) * 2.2vmax); height:calc(var(--iris) * 2.2vmax);
  margin:calc(var(--iris) * -1.1vmax) 0 0 calc(var(--iris) * -1.1vmax);
  border:1px solid rgba(43,74,99,.42);
  box-shadow:0 0 20px rgba(43,74,99,.14), inset 0 0 16px rgba(43,74,99,.08);
  opacity:0;
}
body.intro-on .intro-burst{ animation:introBurst calc(1.5s * var(--sp)) cubic-bezier(.22,.7,.3,1) calc(3.35s * var(--sp)) both; }
/* 起爆光核：圈扩散之前中心一闪 */
.intro-burst::before{
  content:""; position:absolute; left:50%; top:50%; width:14px; height:14px; margin:-7px 0 0 -7px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(255,255,255,.95) 0%, rgba(43,74,99,.20) 62%, rgba(43,74,99,0) 100%);
  opacity:0; animation:introCore calc(.5s * var(--sp)) ease-out calc(3.22s * var(--sp)) both;
}

/* 揭幕同时：首页主视觉缓推归位（与光圈同起同长 → 零跳变）*/
body.intro-on .banner-row{
  transform:translate3d(0,46px,0) scale(1.035);
  animation:introPush calc(1.5s * var(--sp)) cubic-bezier(.16,1,.3,1) calc(3.35s * var(--sp)) both;
}

/* 降级：不支持 @property 时（--iris 不能插值 → mask 不动）改走整体淡出 */
body.intro-on.no-iris .intro{
  animation:introBg 22s ease-in-out infinite,
            introVeilOut calc(1s * var(--sp)) ease-in calc(3.4s * var(--sp)) both;
}

@keyframes introCharIn{ from{opacity:0;transform:translateY(-20px);filter:blur(12px);} to{opacity:1;transform:translateY(0);filter:blur(0);} }
@keyframes introBloom{ 0%,100%{filter:drop-shadow(0 0 6px rgba(43,74,99,.14));} 50%{filter:drop-shadow(0 0 14px rgba(43,74,99,.24));} }
@keyframes introLine{ from{transform:scaleY(0);} to{transform:scaleY(1);} }
@keyframes introLineGlow{ 0%,100%{box-shadow:0 0 0 rgba(43,74,99,0);} 50%{box-shadow:0 0 10px rgba(43,74,99,.4);} }
@keyframes introIris{ from{--iris:0;} to{--iris:78;} }
@keyframes introFadeOut{ from{opacity:1;transform:translateY(0);} to{opacity:0;transform:translateY(-14px);} }
@keyframes introPush{ from{transform:translate3d(0,46px,0) scale(1.035);} to{transform:none;} }
@keyframes introBg{ from{background-position:0% 0%;} to{background-position:100% 100%;} }
@keyframes introBreath{ 0%,100%{transform:translate3d(-2%,-1%,0) scale(1);} 50%{transform:translate3d(2%,2%,0) scale(1.06);} }
@keyframes introRipple{ 0%{transform:scale(.15);opacity:.5;} 100%{transform:scale(2.4);opacity:0;} }
@keyframes introRise{ 0%{transform:translate(0,0) scale(.6);opacity:0;} 14%{opacity:.5;} 50%{transform:translate(var(--sway,0px),-43vh) scale(1);} 100%{transform:translate(0,-86vh) scale(1);opacity:0;} }
@keyframes introFall{ 0%{transform:translate(0,0) scale(.6);opacity:0;} 14%{opacity:.4;} 50%{transform:translate(var(--sway,0px),44vh) scale(1);} 100%{transform:translate(0,88vh) scale(1);opacity:0;} }
@keyframes introDrift{ 0%{transform:translate(-7vw,0) scale(.7);opacity:0;} 16%{opacity:.35;} 50%{transform:translate(0,var(--sway,0px)) scale(1);} 100%{transform:translate(7vw,0) scale(.7);opacity:0;} }
@keyframes introDrop{ 0%{opacity:0;transform:scale(.2);} 20%{opacity:1;transform:scale(1.1);} 32%{transform:scale(1);} 60%{opacity:1;transform:scale(1);} 100%{opacity:0;transform:scale(2.4);} }
@keyframes introHalo{ 0%{opacity:0;transform:scale(.4);} 26%{opacity:.7;transform:scale(1);} 100%{opacity:0;transform:scale(2);} }
@keyframes introSpark{ 0%{opacity:0;transform:scaleX(.2);} 24%{opacity:.7;transform:scaleX(1);} 100%{opacity:0;transform:scaleX(1.6);} }
@keyframes introBurst{ 0%{opacity:0;} 10%{opacity:.85;} 55%{opacity:.45;} 100%{opacity:0;} }
@keyframes introCore{ 0%{opacity:0;transform:scale(.2);} 22%{opacity:.85;transform:scale(1.15);} 100%{opacity:0;transform:scale(2.6);} }
@keyframes introVeilOut{ from{opacity:1;transform:scale(1);} to{opacity:0;transform:scale(1.04);} }
@media (prefers-reduced-motion: reduce){
  body.intro-on .intro{ display:none !important; }
  body.intro-on .intro *{ animation:none !important; }
  body.intro-on .banner-row{ transform:none !important; animation:none !important; }
}