/* Short brand entrance: separate directions become one intentional movement. */
.intro{background:var(--paper);color:var(--red);transition:opacity .22s ease;transform:none;opacity:1}
.intro.exit{transform:none;opacity:0}
.intro-composition{display:grid;justify-items:center;gap:8px;width:min(360px,84vw);transform:translateY(-12px)}
.intro-flight{display:block;width:100%;height:auto;overflow:visible}
.intro-flight path,.intro-arrival{stroke:currentColor;stroke-width:1.25;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.intro-small-arrow{opacity:0;transform:translate(var(--x),var(--y)) rotate(var(--angle))}
.intro-running .intro-small-arrow{animation:intro-converge .78s cubic-bezier(.45,0,.3,1) both}
@keyframes intro-converge{0%{opacity:0;transform:translate(var(--x),var(--y)) rotate(var(--angle))}15%{opacity:.75}75%{opacity:.9}100%{opacity:0;transform:translate(166px,80px) rotate(0deg)}}
.intro-trails{opacity:0;stroke-dasharray:180;stroke-dashoffset:180}
.intro-running .intro-trails{animation:intro-traces .8s ease both}
@keyframes intro-traces{0%{opacity:0;stroke-dashoffset:180}25%{opacity:.09}70%{opacity:.12;stroke-dashoffset:0}100%{opacity:0;stroke-dashoffset:0}}
.intro-one-arrow{opacity:0;transform:translate(166px,80px)}
.intro-running .intro-one-arrow{animation:intro-forward .51s .62s cubic-bezier(.45,0,.25,1) both}
@keyframes intro-forward{0%{opacity:0;transform:translate(166px,80px)}18%{opacity:1}82%{opacity:1}100%{opacity:0;transform:translate(290px,80px)}}
.intro-goal{fill:currentColor;opacity:.25}
.intro-arrival{opacity:0;transform-origin:302px 80px}
.intro-running .intro-arrival{animation:intro-reach .3s 1.02s ease-out both}
@keyframes intro-reach{0%{opacity:0;transform:scale(.35)}30%{opacity:.45}100%{opacity:0;transform:scale(1.9)}}
.intro-signature{font:400 15px/1.2 var(--serif);letter-spacing:2px;color:var(--ink);padding-left:2px}
.intro-signature>span{color:var(--red)}
@media(prefers-reduced-motion:reduce){.intro{display:none!important}.intro *{animation:none!important}}