/* Three streaks behind the logo; fine splashes in front across the viewport. */
.opening-intro{animation:introExit .55s 2.85s both;pointer-events:auto}
.intro-center{z-index:1;isolation:isolate}
.intro-center>img,.intro-center>span,.intro-center>.intro-line{position:relative;z-index:1}
.intro-paint{position:absolute;left:-18%;top:-12%;width:136%;height:100%;z-index:0;overflow:visible;pointer-events:none}
.intro-scatter{position:absolute;inset:0;width:100%;height:100%;z-index:2;pointer-events:none}
.intro-streak{transform-box:view-box;transform-origin:0 0;animation:paintThrow .44s var(--delay) both cubic-bezier(.12,.75,.22,1)}
.intro-splat{animation:paintFlick .2s var(--delay) both ease-out}
.intro-smear{transform-box:view-box;transform-origin:0 0;animation:paintSmear .38s calc(var(--delay) + .1s) both cubic-bezier(.16,.75,.25,1)}
.intro-skip{z-index:3;background:#101210cc}
@keyframes paintThrow{0%{opacity:0;transform:translateX(-170px) scale(.05,.5)}12%{opacity:1}65%{transform:translateX(6px) scale(1.02,1.1)}100%{opacity:1;transform:none}}
@keyframes paintFlick{0%{opacity:0;transform:translateX(-35px)}25%{opacity:1}100%{opacity:1;transform:translateX(0)}}
@keyframes paintSmear{0%{transform:scale(.08,.85)}55%{transform:scale(.8,1.15)}100%{transform:scale(1,1)}}
@media(prefers-reduced-motion:reduce){.opening-intro,.intro-paint,.intro-scatter{display:none!important}}
