.intro{display:none}
.intro-pending{background:var(--red)}
.intro-pending body{overflow:hidden}
.intro-pending .intro{position:fixed;inset:0;z-index:1000;display:grid;place-items:center;background:var(--red);color:var(--cream);transition:opacity .55s cubic-bezier(.65,0,.35,1),visibility .55s}
.intro-lockup{display:grid;justify-items:center;text-align:center;padding:2rem;font-family:"Libre Caslon Display",Georgia,serif}
.intro-compass{display:grid;place-items:center;width:clamp(4.5rem,8vw,6.5rem);aspect-ratio:1;border:1px solid rgba(242,234,220,.7);border-radius:50%;font-size:clamp(1.5rem,3vw,2.2rem);margin-bottom:1.6rem;animation:intro-compass 1.7s cubic-bezier(.2,.8,.2,1) both}
.intro-name{font-size:clamp(1.8rem,4vw,3.6rem);font-weight:400;line-height:.95;letter-spacing:-.04em;text-transform:none}
.intro-school{margin-top:.8rem;font-size:.8rem;font-weight:400;letter-spacing:.12em;text-transform:none}
.intro-line{width:min(17rem,55vw);height:1px;margin-top:2.25rem;background:rgba(242,234,220,.28);overflow:hidden}
.intro-line:after{content:"";display:block;width:100%;height:100%;background:var(--cream);transform-origin:left;animation:intro-progress 1.55s cubic-bezier(.65,0,.35,1) both}
.intro-leaving .intro{opacity:0;visibility:hidden}
@keyframes intro-progress{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes intro-compass{0%{opacity:0;transform:rotate(-28deg) scale(.72)}40%{opacity:1}100%{transform:rotate(0) scale(1)}}
@media(prefers-reduced-motion:reduce){.intro-compass,.intro-line:after{animation:none}}