/* Final visual layer: one restrained cause-and-effect system around the three hero phrases. */
.hero-ink-chain{
  position:absolute;
  inset:0;
  z-index:2;
  overflow:hidden;
  pointer-events:none;
  mix-blend-mode:multiply;
  contain:layout paint style;
}
.hero-chain-wash{
  position:absolute;
  left:var(--chain-x,50%);
  top:var(--chain-y,48%);
  width:min(72vw,1100px);
  aspect-ratio:1.8;
  border-radius:46% 54% 61% 39% / 57% 42% 58% 43%;
  background:radial-gradient(ellipse at center,rgba(20,20,18,.13),rgba(45,44,40,.065) 37%,transparent 72%);
  filter:blur(34px);
  opacity:0;
  transform:translate3d(-50%,-50%,0) scale(.78) rotate(-2deg);
}
.hero-ink-pool{
  position:absolute;
  left:var(--pool-x);
  top:var(--pool-y);
  width:var(--pool-w);
  height:var(--pool-h);
  border-radius:44% 56% 49% 51% / 58% 43% 57% 42%;
  background:
    radial-gradient(ellipse at 48% 52%,rgba(12,12,11,.3) 0,rgba(28,28,25,.19) 26%,rgba(66,65,59,.075) 51%,transparent 75%),
    radial-gradient(ellipse at 66% 42%,rgba(16,16,14,.12),transparent 58%);
  filter:blur(13px);
  opacity:.46;
  transform:translate3d(-50%,-50%,0) scale(.96) rotate(var(--pool-rotate,0deg));
  transition:opacity .42s ease,filter .5s ease,transform .64s cubic-bezier(.2,.72,.2,1);
}
.hero-ink-pool::before,.hero-ink-pool::after{
  position:absolute;
  content:"";
  border-radius:50%;
}
.hero-ink-pool::before{
  inset:20% 8% 24% 15%;
  background:radial-gradient(ellipse,rgba(7,7,6,.14),rgba(42,41,37,.055) 46%,transparent 72%);
  filter:blur(7px);
  transform:rotate(-4deg);
}
.hero-ink-pool::after{
  left:12%;right:2%;bottom:10%;height:16%;
  border-top:1px solid rgba(18,18,16,.12);
  filter:blur(.3px);
  opacity:.52;
  transform:rotate(1.5deg) scaleX(.82);
}
.hero-ink-pool.is-near{
  opacity:.67;
  filter:blur(11px);
  transform:translate3d(-50%,-50%,0) scale(1.025) rotate(var(--pool-rotate,0deg));
}
.hero-ink-pool.is-chain-step{
  animation:heroInkStep 1.35s cubic-bezier(.16,.76,.2,1) both;
}
.hero-chain-svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.hero-chain-path{
  fill:none;
  stroke:rgba(20,20,18,.24);
  stroke-width:1.05;
  stroke-linecap:round;
  stroke-dasharray:1;
  stroke-dashoffset:1;
  opacity:0;
  vector-effect:non-scaling-stroke;
}
.hero-chain-node{
  fill:#ef462c;
  opacity:0;
  filter:drop-shadow(0 0 7px rgba(239,70,44,.28));
  transform-box:fill-box;
  transform-origin:center;
}
.hero.is-chain-active .hero-chain-wash{animation:heroChainWash 1.55s cubic-bezier(.18,.72,.2,1) both}
.hero.is-chain-active .hero-chain-path{animation:heroChainTrace 1.08s cubic-bezier(.2,.68,.2,1) both}
.hero.is-chain-active .hero-chain-node{animation:heroChainNode .76s cubic-bezier(.2,.72,.2,1) both;animation-delay:calc(var(--chain-order,0) * 105ms)}
.hero.is-chain-active .hero-seal{animation:heroSealAnswer 1.28s cubic-bezier(.2,.72,.2,1) both!important}
.hero.is-chain-active .motion-glyphs{animation:heroGlyphAnswer 1.45s ease both}
.hero h1[data-chain-ready="true"]{outline:none}
.hero h1[data-chain-ready="true"]:focus-visible{outline:1px solid rgba(18,18,17,.42);outline-offset:14px}
.hero h1[data-chain-ready="true"]:focus-visible::after{
  content:"回车触发墨脉";
  position:absolute;
  right:0;
  bottom:-30px;
  font:400 9px/1.4 PingFang,"Microsoft YaHei",sans-serif;
  letter-spacing:.18em;
  color:#55554f;
}
@keyframes heroInkStep{
  0%{opacity:.46;filter:blur(13px);transform:translate3d(-50%,-50%,0) scale(.96) rotate(var(--pool-rotate,0deg))}
  32%{opacity:.84;filter:blur(10px);transform:translate3d(-50%,-50%,0) scale(1.075) rotate(calc(var(--pool-rotate,0deg) + .8deg))}
  100%{opacity:.46;filter:blur(13px);transform:translate3d(-50%,-50%,0) scale(.98) rotate(var(--pool-rotate,0deg))}
}
@keyframes heroChainWash{
  0%{opacity:0;transform:translate3d(-50%,-50%,0) scale(.74) rotate(-2deg)}
  28%{opacity:.48}
  100%{opacity:0;transform:translate3d(-50%,-50%,0) scale(1.18) rotate(2deg)}
}
@keyframes heroChainTrace{0%{opacity:0;stroke-dashoffset:1}18%{opacity:.66}72%{opacity:.4;stroke-dashoffset:0}100%{opacity:0;stroke-dashoffset:0}}
@keyframes heroChainNode{0%{opacity:0;transform:scale(.3)}35%{opacity:.92;transform:scale(1.35)}100%{opacity:0;transform:scale(.55)}}
@keyframes heroSealAnswer{0%,100%{transform:rotate(3deg) scale(1);box-shadow:0 5px 25px rgba(240,68,35,.15)}28%{transform:rotate(-2deg) scale(1.07);box-shadow:0 5px 34px rgba(240,68,35,.32)}58%{transform:rotate(5deg) scale(.98)}}
@keyframes heroGlyphAnswer{0%,100%{opacity:.38}38%{opacity:.58}70%{opacity:.32}}
@media(max-width:900px){
  .hero-ink-pool{opacity:.36;filter:blur(10px)}
  .hero-ink-pool.is-near{opacity:.52}
  .hero-chain-wash{width:94vw;filter:blur(25px)}
  .hero-chain-path{stroke-width:.8}
}
@media(prefers-reduced-motion:reduce){
  .hero-ink-pool{opacity:.5;transition:none;animation:none!important}
  .hero-ink-pool.is-near,.hero-ink-pool.is-chain-step{opacity:.62;filter:blur(12px);transform:translate3d(-50%,-50%,0) scale(1) rotate(var(--pool-rotate,0deg))}
  .hero-chain-wash{display:none}
  .hero-chain-path,.hero-chain-node{display:none}
  .hero.is-chain-active .hero-seal{animation:none!important}
  .hero.is-chain-active .motion-glyphs{animation:none}
}