/* 首屏入场加载动画
   给「首页」用的样式。改这一块只动这个文件。 */

/* loader */
.loader{position:absolute;inset:0;height:100svh;z-index:10000;color:var(--ink);overflow:hidden;pointer-events:none}
.loader-backdrop{position:absolute;inset:0;background:var(--bone);opacity:1;transition:opacity 1.25s cubic-bezier(.4,0,.2,1);will-change:opacity}
.loader.is-fading .loader-backdrop{opacity:0}
.loader-grid{position:absolute;inset:0;background-image:linear-gradient(to right,transparent calc(25% - 1px),rgba(18,17,15,.18) 25%,transparent calc(25% + 1px)),linear-gradient(to right,transparent calc(50% - 1px),rgba(18,17,15,.18) 50%,transparent calc(50% + 1px)),linear-gradient(to right,transparent calc(75% - 1px),rgba(18,17,15,.18) 75%,transparent calc(75% + 1px)),linear-gradient(to bottom,transparent calc(50% - 1px),rgba(18,17,15,.18) 50%,transparent calc(50% + 1px));transition:opacity .3s ease}
.loader-label,.loader-status{position:absolute;left:var(--pad);right:var(--pad);display:flex;align-items:center;justify-content:space-between;font:500 11px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase}
.loader-label{top:28px}.loader-label span:last-child{font-size:clamp(24px,3vw,52px)}
.loader-status{bottom:28px}.loader-status i{height:1px;background:currentColor;opacity:.35;flex:1;margin:0 24px;transform-origin:left;animation:loaderLine 1.2s ease-in-out infinite}
@keyframes loaderLine{0%,100%{transform:scaleX(.15)}50%{transform:scaleX(1)}}
.loader-mark{position:absolute;left:50%;top:50%;z-index:2;width:min(82vw,1040px);height:clamp(230px,34vh,360px);border:1px solid currentColor;transform:translate(-50%,-50%);transform-origin:center;will-change:transform;display:grid;place-items:center;background:var(--bone)}
.loader-mark:before,.hero-brand-target:before{content:"";position:absolute;inset:7px;border:1px solid currentColor;opacity:.3;pointer-events:none}
.loader-mark small,.hero-brand-target small{position:absolute;left:12px;bottom:9px;font:500 7px/1 var(--mono);letter-spacing:.1em}
.loader-symbols{position:absolute;inset:0;font:500 clamp(62px,7.2vw,118px)/1 var(--display)}
.loader-symbols span{position:absolute;left:50%;top:50%;display:block;will-change:transform,opacity;animation:symbolDrift 2.4s ease-in-out infinite alternate}
.loader-symbols span:nth-child(1){transform:translate(-215%,-138%) rotate(-8deg);animation-delay:-.4s}
.loader-symbols span:nth-child(2){transform:translate(92%,-155%) rotate(7deg);animation-delay:-1.1s}
.loader-symbols span:nth-child(3){transform:translate(-205%,48%) rotate(6deg);animation-delay:-1.7s}
.loader-symbols span:nth-child(4){transform:translate(105%,34%) rotate(-5deg);animation-delay:-.75s}
.loader-operator{position:absolute;left:50%;top:50%;font:700 var(--brand-size)/1 var(--display);transform:translate(-50%,-50%);will-change:transform,opacity}
.loader-glyph{position:absolute;z-index:3;left:50%;top:50%;font:900 var(--brand-size)/.82 var(--display);opacity:0;transform:translate(-50%,-50%) scale(.35);transform-origin:center;will-change:transform,opacity}
.loader-glyph.is-visible{opacity:1}.loader-mark.is-converging small{opacity:0;transition:opacity .3s}.loader-mark.is-flight .loader-symbols,.loader-mark.is-flight .loader-operator{display:none}
@keyframes symbolDrift{0%{margin:-8px 0 0 -6px}100%{margin:9px 0 0 8px}}
.loader-letters,.hero-brand-letters{display:flex;align-items:baseline;justify-content:flex-start;gap:.12em;width:max-content;font:900 var(--brand-size)/.82 var(--display);letter-spacing:0;white-space:nowrap;font-kerning:none}
.loader-letters span,.hero-brand-letters span{display:block;flex:none}
.loader-letters span{display:block;transition:transform .2s var(--ease),opacity .2s ease;will-change:transform}
.loader-letters.is-settled span{transform:none!important}
.loader-mark.is-priming .loader-letters{animation:loaderPrime .46s cubic-bezier(.32,0,.2,1) both;transform-origin:50% 82%}
.loader-mark.is-flight{color:var(--ink);background:transparent;border-color:transparent}
.loader-mark.is-flight:before,.loader-mark.is-flight small{opacity:0}
.loader-mark.is-flight .loader-letters{animation:none;transform:none}
.loader-mark.is-flight .loader-letters span{transform-origin:50% 82%;transition:none}
@keyframes loaderPrime{0%{transform:scaleY(1) translateY(0)}22%{transform:scaleY(.9) translateY(3px)}55%{transform:scaleY(.68) translateY(10px)}78%{transform:scaleY(.54) translateY(15px)}100%{transform:scaleY(.5) translateY(16px)}}
.loader.is-revealing .loader-grid,.loader.is-revealing .loader-label,.loader.is-revealing .loader-status{opacity:0;transition:opacity .28s ease}