/* 主页插画与特效（CN/EN 两个首页共用，动效在 home-fx.js）
   类名一律 h- 开头：首页自己有 .d / .t 等类，插画里绝不能用同名类。
   色值全部来自 site.css 的 :root。 */

/* ── 首屏大标题：AI 两字半透明电青、关键词会计双划线、刻度尺、Σ 注记 ── */
.h-hero .g.ai{fill:var(--cy);fill-opacity:.55}
.h-hero .h-dbl{fill:none;stroke:var(--bb);stroke-width:14}
.h-hero .h-lead{fill:none;stroke:var(--bbm);stroke-width:5;stroke-dasharray:18 14}
.h-hero .h-sig{font-family:var(--mono);fill:var(--bb);font-weight:700}
html.fx .h-hero:not(.drawn) :is(.h-sig,.h-lead){opacity:0}
.h-hero :is(.h-sig,.h-lead){transition:opacity .6s ease .9s}

/* ── 通用：插画里的面、线、色块 ──
   线有层级：外轮廓粗（h-sil）· 面内棱细且半透（h-e）· 被挡住的棱虚点（h-hid）·
   地面网格分主次（h-gr / .mj）· 投影与色块只用透明度，不加新色 */
:is(.h-pano,.h-portal,.h-ico,.h-intro) .h-e{fill:none;stroke:var(--bb);stroke-width:.75;stroke-opacity:.8;stroke-linejoin:round;vector-effect:non-scaling-stroke}
:is(.h-pano,.h-portal,.h-ico,.h-intro) .h-sil{fill:none;stroke:var(--bb);stroke-width:1.7;stroke-linejoin:round;vector-effect:non-scaling-stroke}
:is(.h-pano,.h-portal,.h-ico,.h-intro) .h-hid{fill:none;stroke:var(--bb);stroke-opacity:.35;stroke-width:.8;stroke-dasharray:2 3;vector-effect:non-scaling-stroke}
:is(.h-pano,.h-portal,.h-ico,.h-intro) .h-shd{fill:var(--bb);fill-opacity:.07}
:is(.h-pano,.h-portal,.h-ico,.h-intro) .h-roll{fill:none;stroke:var(--bb);stroke-opacity:.45;stroke-width:.7;vector-effect:non-scaling-stroke}
:is(.h-pano,.h-portal,.h-ico,.h-intro) .h-dim{fill:none;stroke:var(--bbm);stroke-opacity:.7;stroke-width:.8;vector-effect:non-scaling-stroke}
:is(.h-pano,.h-portal,.h-ico,.h-intro) .h-dimt{font-family:var(--mono);fill:var(--bbm);fill-opacity:.85;letter-spacing:.5px}
:is(.h-pano,.h-portal,.h-ico,.h-intro) .h-reg{fill:none;stroke:var(--bbm);stroke-opacity:.6;stroke-width:1;vector-effect:non-scaling-stroke}
:is(.h-pano,.h-portal,.h-ico,.h-intro) .h-zone{fill:var(--or);fill-opacity:.06;stroke:var(--or);stroke-width:1.3;stroke-dasharray:5 4;vector-effect:non-scaling-stroke;animation:h-flow 4s linear infinite}
:is(.h-pano,.h-portal,.h-ico,.h-intro) .h-zone2{fill:none;stroke:var(--or);stroke-opacity:.35;stroke-width:.8;vector-effect:non-scaling-stroke}
:is(.h-pano,.h-portal,.h-ico,.h-intro) .h-lane{fill:var(--cy);fill-opacity:.14;mix-blend-mode:multiply}
:is(.h-pano,.h-portal,.h-ico,.h-intro) .h-rail{fill:none;stroke:var(--cy);stroke-opacity:.18;stroke-width:6;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke}
:is(.h-pano,.h-portal,.h-ico,.h-intro) .h-rail.o{stroke:var(--or);stroke-opacity:.16}
:is(.h-pano,.h-portal,.h-ico,.h-intro) .h-node{fill:var(--white);stroke:var(--cy);stroke-width:1.4;vector-effect:non-scaling-stroke}
:is(.h-pano,.h-portal,.h-ico,.h-intro) .h-node.o{stroke:var(--or)}
:is(.h-pano,.h-portal,.h-ico,.h-intro) .h-link{fill:none;stroke:var(--or);stroke-width:2;stroke-dasharray:.5 5.5;stroke-linecap:round;vector-effect:non-scaling-stroke;animation:h-flow 1.2s linear infinite}
:is(.h-pano,.h-portal,.h-ico,.h-intro) .h-thin{stroke-width:.7}
:is(.h-pano,.h-portal,.h-ico,.h-intro) .h-ft{fill:var(--white)}
:is(.h-pano,.h-portal,.h-ico,.h-intro) .h-fl{fill:var(--wash)}
:is(.h-pano,.h-portal,.h-ico,.h-intro) .h-fr{fill:var(--wash2)}
:is(.h-pano,.h-portal,.h-ico,.h-intro) .h-mk{fill:var(--or)}
:is(.h-pano,.h-portal,.h-ico,.h-intro) .h-hum{fill:var(--white);stroke:var(--bbm);stroke-dasharray:3 2}
:is(.h-pano,.h-portal,.h-ico,.h-intro) .h-gr{fill:none;stroke:var(--bb);stroke-opacity:.07;stroke-width:.8;vector-effect:non-scaling-stroke}
:is(.h-pano,.h-portal,.h-ico,.h-intro) .h-gr.mj{stroke-opacity:.16;stroke-width:1}
:is(.h-pano,.h-portal,.h-ico,.h-intro) .h-scr{fill:none;stroke:var(--cy);stroke-width:1.6;animation:h-scr 2.6s steps(2) infinite}
:is(.h-pano,.h-portal,.h-ico,.h-intro) .h-scr:nth-of-type(2n){animation-delay:-1.1s}
@keyframes h-scr{50%{opacity:.25}}
:is(.h-pano,.h-portal,.h-ico,.h-intro) .h-head-ai{fill:var(--cy);stroke:var(--bb);stroke-width:1.3;stroke-linejoin:round;vector-effect:non-scaling-stroke}
:is(.h-pano,.h-portal,.h-ico,.h-intro) .h-head-h{fill:var(--white);stroke:var(--bbm);stroke-width:1.1;stroke-dasharray:3 2;vector-effect:non-scaling-stroke}
:is(.h-pano,.h-portal,.h-ico,.h-intro) .h-pk{fill:var(--cy);stroke:var(--white);stroke-width:1}
:is(.h-pano,.h-portal,.h-ico,.h-intro) .h-pkc{fill:var(--or)}
:is(.h-pano,.h-portal,.h-ico,.h-intro) .h-beam{fill:none;stroke-width:1.6;stroke-dasharray:4 5;stroke-linecap:round;vector-effect:non-scaling-stroke;animation:h-flow 1s linear infinite}
:is(.h-pano,.h-portal,.h-ico,.h-intro) .h-beam.o{stroke:var(--or)}
:is(.h-pano,.h-portal,.h-ico,.h-intro) .h-beam.b{stroke:var(--cy)}
:is(.h-pano,.h-portal,.h-ico,.h-intro) .h-row{fill:none;stroke:var(--bb);stroke-width:1;opacity:clamp(0,calc(var(--t,1) * 7 - var(--j,0)),1)}
:is(.h-pano,.h-portal,.h-ico,.h-intro) .h-tag{font-family:var(--mono);font-size:var(--f3);fill:var(--bbm)}
:is(.h-pano,.h-portal,.h-ico,.h-intro) .h-ovo{fill:var(--or);fill-opacity:.3;mix-blend-mode:multiply}
:is(.h-pano,.h-portal,.h-ico,.h-intro) .h-ovb{fill:var(--cy);fill-opacity:.2;mix-blend-mode:multiply}
@keyframes h-flow{to{stroke-dashoffset:-18}}

/* ── 全景插画：同一条流程，改造前 → 改造后（--t 由滚动驱动，0 = 改造前，1 = 改造后） ── */
.h-pano-sec{padding-top:var(--s6)}
.h-pano-wrap{position:relative}
.h-pano{display:block;width:100%;height:auto;overflow:visible;--t:0}
:is(.h-pano,.h-intro) .h-ly{transform:translate(calc(var(--mx,0) * var(--z,4) * 1px),calc(var(--my,0) * var(--z,4) * 1px));transition:transform .7s cubic-bezier(.2,.7,.2,1)}
.h-pano .h-before{opacity:calc(1 - var(--t));transform:translateY(calc(var(--t) * -8px))}
.h-pano .h-after{opacity:var(--t);transform:translateY(calc((1 - var(--t)) * 10px))}
.h-pano .h-after-only{opacity:var(--t)}
:is(.h-pano,.h-intro) .h-ticket{fill:var(--white);stroke:var(--bb);stroke-width:1}
:is(.h-pano,.h-intro) .h-flow{fill:none;stroke:var(--cy);stroke-width:1.8;stroke-dasharray:5 4;stroke-linejoin:round;vector-effect:non-scaling-stroke;animation:h-flow 1s linear infinite}
:is(.h-pano,.h-intro) .h-check{fill:none;stroke:var(--or);stroke-width:2.4;stroke-linecap:round}
:is(.h-pano,.h-intro) .h-sum{fill:none;stroke:var(--bb);stroke-width:1.6;opacity:var(--t)}
:is(.h-pano,.h-intro) .h-pulse{transform-box:fill-box;transform-origin:center;animation:tp-pulse 7s ease-in-out infinite}
.h-pano .h-lead{fill:none;stroke:var(--bb);stroke-width:1;vector-effect:non-scaling-stroke;transition:stroke .25s ease}
.h-pano .h-lead-dot{fill:var(--white);stroke:var(--bb);stroke-width:1.5;transition:fill .25s ease}
.h-pano .h-co-n{fill:var(--bb);transition:fill .25s ease}
.h-pano .h-co-nt{font-family:var(--mono);font-size:var(--f2);font-weight:700;fill:var(--white)}
.h-pano .h-co-t{font-size:var(--f5);font-weight:700;fill:var(--bb)}
.h-pano[data-hot="1"] .h-co[data-co="1"] :is(.h-co-n,.h-lead-dot),.h-pano[data-hot="2"] .h-co[data-co="2"] :is(.h-co-n,.h-lead-dot),.h-pano[data-hot="3"] .h-co[data-co="3"] :is(.h-co-n,.h-lead-dot),.h-pano[data-hot="4"] .h-co[data-co="4"] :is(.h-co-n,.h-lead-dot){fill:var(--cy)}
.h-pano[data-hot="1"] .h-co[data-co="1"] .h-lead,.h-pano[data-hot="2"] .h-co[data-co="2"] .h-lead,.h-pano[data-hot="3"] .h-co[data-co="3"] .h-lead,.h-pano[data-hot="4"] .h-co[data-co="4"] .h-lead{stroke:var(--cy);stroke-width:2}
html.fx .h-pano .h-co tspan{opacity:0;transition:opacity .05s linear;transition-delay:calc(var(--k) * 40ms)}
html.fx .h-pano-wrap.in .h-co tspan{opacity:1}
.h-pano .h-cap{font-family:var(--mono);font-size:var(--f3);fill:var(--bbm)}
.h-pano .h-cap.strong{fill:var(--bb);font-weight:700}
.h-pano .h-track{fill:none;stroke:var(--wash2);stroke-width:3}
.h-pano .h-track-on{fill:none;stroke:var(--cy);stroke-width:3;transform-box:fill-box;transform-origin:left;transform:scaleX(var(--t))}
.h-pano .h-knob{fill:var(--cy);stroke:var(--bb);transform:translateX(calc(var(--t) * var(--tw)))}
.h-legend{display:none}
@media(max-width:640px){
  .h-pano :is(.h-co-t,.h-cap,.h-tag,.h-tagbg,.h-dimt){display:none}
  .h-legend{display:grid;grid-template-columns:1fr 1fr;gap:var(--s2) var(--s4);margin-top:var(--s3);list-style:none;font-size:var(--f4);color:var(--bb)}
  .h-legend b{display:inline-block;min-width:var(--s6);font-family:var(--mono);font-size:var(--f2);color:var(--white);background:var(--bb);text-align:center;margin-right:var(--s2)}
  .h-legend .h-legend-ba{grid-column:1 / -1;font-family:var(--mono);font-size:var(--f2);color:var(--bbm)}
}

/* ── 机器门户：同一本账，两种读法 ── */
.h-portal{display:block;width:100%;max-width:360px;height:auto;margin-top:var(--s4);overflow:visible}
.h-portal .h-brace{fill:none;stroke:var(--cy);stroke-width:2;stroke-linecap:round;vector-effect:non-scaling-stroke}

/* ── 业务线小图：靠右浮动，文字绕开不压图 ── */
.h-ico{float:right;width:120px;height:auto;margin:0 0 var(--s3) var(--s4);overflow:visible;transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.h-ico-main{width:170px}
.biz-main:hover .h-ico,.biz-card:hover .h-ico{transform:translateY(-6px)}
@media(max-width:560px){.h-ico{width:96px}.h-ico-main{width:130px}}

/* ── 账本纸带 + 放大镜：「你自己就能查」，镜片跟着鼠标走，不动时自己来回扫 ── */
.h-tape-wrap{margin-top:var(--s7)}
.h-tape-svg{display:block;width:100%;height:auto;overflow:visible}
html.fx .h-tape-wrap .h-tape-svg{clip-path:inset(0 100% 0 0);transition:clip-path 1.2s cubic-bezier(.7,0,.2,1)}
html.fx .h-tape-wrap.in .h-tape-svg{clip-path:inset(-20px -20px -20px -20px)}
.h-tape-svg .h-tape{fill:var(--white);stroke:var(--bb);stroke-width:1}
.h-tape-svg .h-perf{fill:var(--wash)}
.h-tape-svg .h-bar{fill:var(--wash2);stroke:var(--bbm);stroke-width:.8}
.h-tape-svg .h-bar.o{fill:var(--or);stroke:var(--bb)}
.h-tape-svg .h-tick{stroke:var(--bb);stroke-width:1}
.h-tape-svg .h-idx{font-family:var(--mono);font-size:var(--f0);fill:var(--bbm)}
.h-tape-svg .h-lens-bg{fill:var(--white)}
.h-tape-svg .h-zoom .h-bar{fill:var(--cy);fill-opacity:.35;stroke:var(--bb)}
.h-tape-svg .h-zoom .h-bar.o{fill:var(--or);fill-opacity:1}
.h-tape-svg .h-zoom .h-idx{fill:var(--bb);font-weight:700}
.h-tape-svg .h-lens-rim{fill:none;stroke:var(--bb);stroke-width:2}
.h-tape-svg .h-lens-x{fill:none;stroke:var(--cy);stroke-width:2}
.h-tape-svg .h-lens-h{stroke:var(--bb);stroke-width:7;stroke-linecap:round}
.h-tape-svg .h-cap{font-family:var(--mono);font-size:var(--f2);fill:var(--bbm)}
.h-tape-svg .h-cap.strong{fill:var(--bb);font-weight:700}

/* ── BOOTCAMP 描线大字：滚动多少画多少（--wd 0→1），过半时色块伸出 ── */
.h-word-wrap{padding-top:var(--s9);padding-bottom:var(--s6)}
.h-word{display:block;width:100%;height:auto;overflow:visible;--wd:1}
.h-word .g{fill:var(--bb);fill-opacity:.06;stroke:var(--bb);stroke-width:3;vector-effect:non-scaling-stroke;stroke-dasharray:1;stroke-dashoffset:calc(1 - var(--wd))}
.h-word .cl{fill:none;stroke:var(--wash2);stroke-width:1;stroke-dasharray:6 8;vector-effect:non-scaling-stroke}
.h-word .nd{fill:var(--wash);stroke:var(--bb);stroke-width:1;vector-effect:non-scaling-stroke}
.h-word .ha{mix-blend-mode:multiply}
.h-word .ov-o{fill:var(--or);fill-opacity:.42}
.h-word .ov-b{fill:var(--cy);fill-opacity:.26}
.h-word .ha-c{fill-opacity:.2;transform-box:fill-box;transform-origin:center;animation:tp-pulse 7s ease-in-out infinite}
.h-word .ha-ring{fill:none;stroke:var(--or);stroke-width:14;stroke-dasharray:30 70;transform-box:fill-box;transform-origin:center;animation:tp-spin 50s linear infinite}
.h-word .ha-bar{transform-box:fill-box;transform-origin:left;transition:transform .9s cubic-bezier(.7,0,.2,1)}
.h-word .ha-mk{fill:var(--or)}
html.fx .h-word:not(.bars) .ha-bar{transform:scaleX(0)}

@media (prefers-reduced-motion:reduce){
  .h-pano{--t:1}
  .h-pano *,.h-portal *,.h-ico *,.h-word *{animation:none!important}
  .h-word{--wd:1}
}
:is(.h-pano) .h-tagbg{fill:var(--white);fill-opacity:.88;stroke:var(--bb);stroke-width:.6}

/* 门户卡：宽屏时文字在左、插画在右，徽章整行排在下面 */
@media(min-width:760px){
  .mport .mp-lead{flex:1 1 100%;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,340px);column-gap:var(--s7);align-items:center}
  .mport .mp-lead > :not(.h-portal){grid-column:1}
  .mport .mp-lead .h-portal{grid-column:2;grid-row:1 / span 3;margin-top:0}
}

/* ── 板块切换时的模块反应（home-fx.js 加 .h-boot） ── */
.h-hero.h-boot .h-dbl{animation:h-reink .9s steps(1)}
.h-hero.h-boot .h-sig{animation:h-reink-t .9s steps(1)}
@keyframes h-reink{0%,30%{stroke:var(--cy)}15%,100%{stroke:var(--bb)}}
@keyframes h-reink-t{0%,30%{fill:var(--cy)}15%,100%{fill:var(--bb)}}
.h-pano.h-boot .h-co :is(.h-co-n,.h-lead-dot){animation:h-boot-n .9s steps(1) both}
.h-pano.h-boot .h-co[data-co="2"] :is(.h-co-n,.h-lead-dot){animation-delay:.18s}
.h-pano.h-boot .h-co[data-co="3"] :is(.h-co-n,.h-lead-dot){animation-delay:.36s}
.h-pano.h-boot .h-co[data-co="4"] :is(.h-co-n,.h-lead-dot){animation-delay:.54s}
@keyframes h-boot-n{0%{fill:var(--cy)}20%{fill:var(--bb)}30%{fill:var(--cy)}80%{fill:var(--cy)}100%{fill:var(--bb)}}
.h-pano.h-boot .h-knob{animation:h-knob .8s cubic-bezier(.3,1.6,.4,1)}
@keyframes h-knob{40%{scale:1.6}}
.h-portal.h-boot .h-beam{animation-duration:.25s}


/* ── 开场：全屏图纸舞台。插画从左侧旋入，分五拍画完，再缩小飞向右上并淡出（home-fx.js），不在首屏留位置 ── */
html.intro{overflow:hidden}
html.intro body::after{content:"";position:fixed;inset:0;z-index:179;background:var(--wash)}
html.intro .hero-rc :is(.hero-lead,.counter){opacity:0;transform:translateY(16px)}
.hero-rc :is(.hero-lead,.counter){transition:opacity .7s ease .1s,transform .8s cubic-bezier(.2,.8,.2,1) .1s}
.hero-rc .counter{transition-delay:.3s}
.h-intro{display:block;width:100%;height:auto;overflow:visible}
.h-stage{position:fixed;inset:0;z-index:180;background:var(--wash);transition:opacity .8s ease}
.h-stage::before{content:"";position:absolute;inset:0;background:linear-gradient(var(--wash2) 1px,transparent 1px) 0 0/48px 48px,linear-gradient(90deg,var(--wash2) 1px,transparent 1px) 0 0/48px 48px;opacity:.7}
.h-stage.out{opacity:0;pointer-events:none}
.h-stage .fig{position:absolute;left:50%;top:46%;width:min(84vw,920px,calc(62vh * 1.516));translate:-50% -50%;opacity:0;
  transform:translateX(-34vw) scale(.5) rotate(-9deg) skewX(8deg);filter:blur(6px);
  transition:transform 1.1s cubic-bezier(.16,.9,.24,1),opacity .6s ease,filter .8s ease}
.h-stage .fig.in{opacity:1;transform:none;filter:none}
.h-stage .fig.gone{opacity:0;transform:translate(var(--ox,30vw),var(--oy,-20vh)) scale(.18) rotate(7deg);
  transition:transform .9s cubic-bezier(.7,0,.3,1),opacity .45s ease .4s}
.h-stage .crn{position:absolute;width:36px;height:36px;border:2px solid var(--bb)}
.h-stage .crn.tl{left:24px;top:24px;border-right:0;border-bottom:0}
.h-stage .crn.tr{right:24px;top:24px;border-left:0;border-bottom:0}
.h-stage .crn.bl{left:24px;bottom:24px;border-right:0;border-top:0}
.h-stage .crn.br{right:24px;bottom:24px;border-left:0;border-top:0}
.h-stage .ttl{position:absolute;left:72px;top:30px;font-family:var(--mono);font-size:var(--f2);letter-spacing:2px;color:var(--bbm)}
.h-stage .cap{position:absolute;left:50%;bottom:6vh;transform:translateX(-50%);display:flex;align-items:center;gap:var(--s4);font-family:var(--mono);font-size:var(--f4);color:var(--bb);white-space:nowrap}
.h-stage .cap b{color:var(--cy);font-weight:700}
.h-stage .cap .bar{display:block;width:clamp(100px,16vw,200px);height:2px;background:var(--wash2)}
.h-stage .cap .bar i{display:block;height:100%;background:var(--or);transform-origin:left;transform:scaleX(var(--p,0));transition:transform .5s ease}
.h-stage .cap .txt{min-width:16em}
/* 跳过：橙色实心大按钮放右下角，一眼就能找到；下面一行提示其它跳过方式 */
.h-stage .skip{position:absolute;right:72px;bottom:calc(6vh + 14px);display:flex;align-items:center;gap:var(--s3);font-size:var(--f6);font-weight:700;background:var(--or);color:var(--ink);border:2px solid var(--ink);padding:var(--s3) var(--s5);cursor:pointer;box-shadow:4px 4px 0 var(--ink);transition:transform .15s ease,box-shadow .15s ease}
.h-stage .skip i{font-style:normal;font-size:var(--f8);line-height:1;animation:h-nudge 1.2s ease-in-out infinite}
.h-stage .skip:hover{transform:translate(2px,2px);box-shadow:2px 2px 0 var(--ink)}
.h-stage .skip:focus-visible{outline:3px solid var(--ink);outline-offset:3px}
.h-stage .skip-hint{position:absolute;right:72px;bottom:calc(6vh - 10px);font-family:var(--mono);font-size:var(--f2);color:var(--bbm)}
@keyframes h-nudge{50%{transform:translateX(4px)}}
@media(max-width:1100px){.h-stage .cap{bottom:calc(6vh + 88px)}}   /* 中等宽度：说明文字让到按钮上方，不和按钮挤一行 */
@media(max-width:640px){
  .h-stage .cap{flex-direction:column;gap:var(--s2);bottom:calc(4vh + 104px)}.h-stage .cap .txt{min-width:0}.h-stage .ttl{left:24px;top:70px}
  .h-stage .skip{left:24px;right:24px;bottom:calc(4vh + 24px);justify-content:center}
  .h-stage .skip-hint{left:0;right:0;bottom:4vh;text-align:center}
  .h-stage .crn:is(.bl,.br){display:none}
}

/* 五拍：s1 图纸线 → s2 工位 → s3 人和工单 → s4 AI 员工上岗、人去复核 → s5 账本出数 → s6 合计点亮 */
.h-intro .grp-before{opacity:0}
.h-intro .h-ledhi{fill:var(--or);fill-opacity:0;mix-blend-mode:multiply;transition:fill-opacity .6s ease}
.h-intro .h-ledp{fill:none;stroke:var(--or);stroke-width:2;opacity:0;transform-box:fill-box;transform-origin:center}
.h-intro .h-row{opacity:1;transition:opacity .3s ease;transition-delay:calc(var(--j,0) * 130ms)}
.h-intro .h-sum{opacity:1;transition:opacity .4s ease .8s,stroke .4s ease,stroke-width .4s ease}
.h-intro :is(.grp-after,.grp-flow,.grp-rev,.grp-tk,.grp-back,.grp-before){transition:opacity .5s ease,transform .6s cubic-bezier(.2,.8,.2,1)}
/* 描线：线宽不随缩放（non-scaling-stroke），虚线长度却按图内单位算——
   所以虚线要乘上图的显示倍数 --dl（home-fx.js 量出来），否则只画到一截就停 */
.h-intro.play .ia1,.h-intro.play .ia2{stroke-dasharray:var(--dl,3) var(--dl,3);stroke-dashoffset:var(--dl,3)}
.h-intro.play .ia1{transition:stroke-dashoffset .9s cubic-bezier(.6,0,.2,1),fill-opacity .6s ease}
.h-intro.play .ia2{transition:stroke-dashoffset .8s cubic-bezier(.6,0,.2,1),fill-opacity .6s ease .4s;transition-delay:calc(var(--i,0) * 80ms)}
.h-intro.play :is(.ia1,.ia2):is(.h-ft,.h-fl,.h-fr,.h-mk){fill-opacity:0}
.h-intro.play :is(.grp-after,.grp-flow,.grp-rev,.grp-tk,.grp-back,.h-scr){opacity:0}
.h-intro.play .h-row,.h-intro.play .h-sum{opacity:0}
.h-intro.play .drop{transform:translateY(-70px);transition:transform .7s cubic-bezier(.3,1.6,.4,1);transition-delay:calc(var(--d,0) * 140ms + 100ms)}
.h-intro.play.s1 .ia1{stroke-dashoffset:0}
.h-intro.play.s1 .ia1:is(.h-ft,.h-fl,.h-fr){fill-opacity:1}
.h-intro.play.s2 .ia2{stroke-dashoffset:0}
.h-intro.play.s2 .ia2:is(.h-ft,.h-fl,.h-fr,.h-mk){fill-opacity:1}
.h-intro.play.s2 .grp-back{opacity:.55}
.h-intro.play.s2 .h-scr{opacity:1}
.h-intro.play.s3 .grp-before,.h-intro.play.s3 .grp-tk{opacity:1}
.h-intro.play.s4 .grp-before{opacity:0;transform:translate(-36px,46px)}
.h-intro.play.s4 :is(.grp-after,.grp-flow,.grp-rev,.grp-back){opacity:1}
.h-intro.play.s4 .drop{transform:none}
.h-intro.play.s5 .h-row,.h-intro.play.s5 .h-sum{opacity:1}
.h-intro :is(.grp-plan,.grp-lane,.grp-link,.h-shd){transition:opacity .6s ease .3s}
.h-intro.play :is(.grp-plan,.grp-lane,.grp-link,.h-shd){opacity:0}
.h-intro.play.s1 .grp-plan,.h-intro.play.s2 .h-shd,.h-intro.play.s4 .grp-lane,.h-intro.play.s5 .grp-link{opacity:1}
.h-intro.play.s6 .h-ledhi{fill-opacity:.24}
.h-intro.play.s6 .h-sum{stroke:var(--or);stroke-width:3}
.h-intro.play.s6 .h-ledp{animation:h-ledp 1.1s cubic-bezier(.2,.7,.3,1) 2}
@keyframes h-ledp{0%{opacity:.9;transform:scale(1)}100%{opacity:0;transform:scale(1.5)}}
@media (prefers-reduced-motion:reduce){.h-stage{display:none}}