/* 首页 Hero（WebGL 动画，脚本 static/js/hero.min.js，源码 scripts/hero/）。
   画面按网站色板调色；标语与 SINCE 在左，华一标志在右（竖屏时上下排列）。
   各元素的位置由脚本按画面尺寸计算；脚本未运行（无 JS）时用下方的静态排版。 */
@font-face{font-family:"Huayi Hero Black";src:url("../fonts/hero-black.d7a251ee784e.woff2") format("woff2");font-weight:900;font-style:normal;font-display:swap}

.site-hero{--bg:var(--hy-paper);--fg:var(--hy-blue);--stroke:var(--hy-blue);--rail:rgba(34,67,121,.28);--shade:247,246,242;
  --display:"Huayi Hero Black","Noto Sans SC","Source Han Sans SC","PingFang SC","Microsoft YaHei",sans-serif;
  position:relative;height:calc(100vh - var(--hy-header-h));height:calc(100svh - var(--hy-header-h));min-height:420px;
  overflow:hidden;background:var(--bg);color:var(--fg);isolation:isolate}
.site-hero__gl{position:absolute;inset:0;width:100%;height:100%;display:block}
.site-hero .shade{position:absolute;inset:0;pointer-events:none;opacity:.5;
  background:linear-gradient(90deg,rgba(var(--shade),.82) 0%,rgba(var(--shade),.55) 34%,rgba(var(--shade),0) 62%)}
.site-hero.portrait .shade{background:linear-gradient(180deg,rgba(var(--shade),.78) 0%,rgba(var(--shade),.45) 50%,rgba(var(--shade),.8) 100%)}
.site-hero .dim{position:absolute;inset:0;background:var(--bg);opacity:0;pointer-events:none}
.site-hero .mark{position:absolute;left:0;top:0;width:10px;height:10px;pointer-events:none}
.site-hero .mark svg{display:block;width:100%;height:100%;overflow:visible}
.site-hero #strokes,.site-hero .sm .st{fill:var(--stroke)}
.site-hero .since{position:absolute;left:0;top:0;overflow:visible;pointer-events:none;opacity:0}
.site-hero .since text{font-family:var(--hy-font-latin);font-weight:700}
.site-hero .since .w{fill:var(--fg)}.site-hero .since .r{fill:var(--hy-red)}
.site-hero .slogan{position:absolute;margin:0;font-family:var(--display);font-weight:900;color:var(--fg);line-height:1.3;letter-spacing:.02em;white-space:nowrap;pointer-events:none;font-synthesis:none}
.site-hero .slogan .ln{display:block;min-height:1.3em}
.site-hero .sm{display:inline-block;width:.88em;height:.88em;margin:0 .07em 0 .03em;vertical-align:-.06em;overflow:visible}
.site-hero .yi1{color:var(--hy-red)}
.site-hero .caret{display:inline-block;width:.46em;height:.08em;margin-left:.1em;background:var(--hy-red);opacity:0;vertical-align:baseline}
.site-hero .caret.on{opacity:1}
.site-hero .caret.blink{animation:site-hero-blink 1.05s steps(1) infinite}
@keyframes site-hero-blink{50%{opacity:0}}
.site-hero .play{all:unset;position:absolute;right:max(24px,calc(env(safe-area-inset-right,0px) + 24px));bottom:max(22px,calc(env(safe-area-inset-bottom,0px) + 16px));cursor:pointer;width:34px;height:34px;border-radius:50%;border:1px solid var(--rail);display:grid;place-items:center;color:var(--fg)}
.site-hero .play:hover{border-color:var(--fg)}
.site-hero .play svg{width:12px;height:12px;fill:currentColor}
.site-hero .play:focus-visible{outline:2px solid var(--hy-red);outline-offset:3px}
.site-hero .note{display:none;position:absolute;left:24px;top:24px;color:var(--fg);font:12px var(--hy-font-sans)}
.site-hero.nogl .note{display:block}

/* 脚本未运行：静态排版（标志在右，首句标语在左） */
.site-hero:not(.is-ready) .mark{left:auto;right:7.5%;top:50%;width:min(50vh,32vw);height:auto;aspect-ratio:1;transform:translateY(-50%)}
.site-hero:not(.is-ready) .slogan{left:7%;top:50%;transform:translateY(-50%);font-size:clamp(26px,3.6vw,56px)}
.site-hero:not(.is-ready) .play{display:none}
@media (max-aspect-ratio:21/20){
  .site-hero:not(.is-ready) .mark{right:auto;left:50%;top:13%;width:min(40vw,24vh);transform:translateX(-50%)}
  .site-hero:not(.is-ready) .slogan{left:0;right:0;top:calc(13% + min(40vw,24vh) + 6%);transform:none;text-align:center;font-size:clamp(22px,7vw,40px)}
}