/* ============================================================
   开屏（方案三 · 色块 AiDeep，移植自 开屏页/03-AiDeep.html）
   播完后进入 morph 态：色杠长粗溶进彩带、眉行淡出、
   英文大字由 splash.js 搬出开屏、本体飞到顶部正中转正为字标；
   无任何提示小字。字体 AiDeep 在 splash-font.css（data-URI，
   file:// 下也可用）。
   ============================================================ */

#splash{position:fixed;inset:0;z-index:150;background:var(--paper);color:var(--ink);
  font-family:"AiDeep","PingFang SC","Microsoft YaHei",sans-serif;
  overflow:hidden;user-select:none;-webkit-user-select:none}
/* morph：让位给彩带画布 */
#splash.morph{background:transparent;pointer-events:none}

/* ---- 五色横幅 ---- */
#splash .s-band{position:absolute;top:0;bottom:0;width:20.6vw;overflow:hidden;pointer-events:none}
#splash .s-band .fill{position:absolute;inset:0;background:var(--c)}
#splash.play .s-band{animation:sbandX .55s cubic-bezier(.3,.9,.25,1) both;animation-delay:var(--d)}
@keyframes sbandX{from{transform:translateX(var(--from))}to{transform:translateX(0)}}
#splash.play .s-band .fill{animation:sbandY .55s cubic-bezier(.6,0,.55,1) both;animation-delay:var(--d2)}
@keyframes sbandY{from{transform:translateY(0)}to{transform:translateY(103%)}}
#splash .s-band:nth-child(1){left:0;--from:-105%}
#splash .s-band:nth-child(2){left:20vw;--from:105%}
#splash .s-band:nth-child(3){left:40vw;--from:-105%}
#splash .s-band:nth-child(4){left:60vw;--from:105%}
#splash .s-band:nth-child(5){left:80vw;--from:-105%}

/* ---- 中央内容 ---- */
#splash .s-stage{position:relative;z-index:10;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center}

.s-equation{display:flex;align-items:center;gap:.9em;
  font-size:clamp(13px,1.15vw,20px);letter-spacing:.5em;text-indent:.5em;
  color:var(--ink-2);margin-bottom:clamp(16px,3vh,34px);opacity:0;transform:translateY(14px)}
.s-equation .plus{color:var(--plus,#9E181E)}
#splash.play .s-equation{animation:sfadeUp .6s cubic-bezier(.2,.8,.3,1) 2.35s both}

.s-word{display:flex;font-size:clamp(64px,12.5vw,244px);line-height:1;
  color:var(--paper);letter-spacing:.01em;margin:0}
#splash.play .s-word{animation:sinkFlip .4s ease 1.95s both}
@keyframes sinkFlip{to{color:var(--ink)}}
.s-word .l{display:inline-block;opacity:0;transform:scale(2.5) rotate(var(--r,3deg)) translateY(.1em)}
#splash.play .s-word .l{animation:sslam .58s cubic-bezier(.18,1.35,.3,1) both;animation-delay:var(--d)}
@keyframes sslam{
  0%{opacity:0;transform:scale(2.5) rotate(var(--r,3deg)) translateY(.1em)}
  100%{opacity:1;transform:scale(1) rotate(0) translateY(0)}
}

/* 五色杠：morph 时长粗、放大、溶进彩带 */
.s-rule{display:flex;gap:clamp(5px,.5vw,10px);margin-top:clamp(20px,3.6vh,40px);width:clamp(240px,52vw,1000px);
  transition:transform 1.05s cubic-bezier(.55,0,.18,1),opacity .85s ease .3s}
.s-rule i{height:clamp(7px,1vh,14px);flex:var(--w,1);background:var(--c);transform:scaleX(0)}
#splash.play .s-rule i{animation:sruleX .55s cubic-bezier(.2,.9,.2,1) both;animation-delay:var(--d)}
@keyframes sruleX{from{transform:scaleX(0)}to{transform:scaleX(1)}}
#splash.morph .s-rule{transform:scale(1.5,4.6);opacity:0}

.s-subtitle{margin-top:clamp(18px,3.4vh,36px);font-family:"PingFang SC","Microsoft YaHei",sans-serif;
  font-weight:700;font-size:clamp(14px,1.5vw,26px);letter-spacing:.5em;text-indent:.5em;
  color:var(--ink);text-align:center;opacity:0;transform:translateY(14px)}
.s-subtitle small{display:block;margin-top:10px;font-weight:400;
  font-size:.62em;letter-spacing:.34em;text-indent:.34em;color:var(--ink-3)}
#splash.play .s-subtitle{animation:sfadeUp .7s cubic-bezier(.2,.8,.3,1) 2.55s both}
@keyframes sfadeUp{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}

/* morph 时淡出的部分（!important 用于压过已结束的填充动画） */
#splash .gone{opacity:0!important;transition:opacity .55s ease!important}

@media (prefers-reduced-motion:reduce){
  #splash *{animation-duration:.01s!important;animation-delay:0s!important}
  .s-rule,#splash .gone{transition:none!important}
}