/* intro / sign-in splash + iPhone-style app open */
#intro{position:fixed;inset:0;z-index:100;background:#000;display:grid;place-items:center;cursor:pointer;transition:opacity .7s .1s,visibility 0s .8s}
#intro.out{opacity:0;visibility:hidden;pointer-events:none}
#intro .lg{width:min(80vw,440px);overflow:visible;transition:transform .9s var(--spring)}
#intro.out .lg{transform:scale(1.25)}
#intro text{font:700 64px var(--sans);letter-spacing:-2px}
.lg-text{fill:none;stroke:#fff;stroke-width:1.3;stroke-linejoin:round;stroke-dasharray:600;stroke-dashoffset:600;animation:draw 2.4s .2s cubic-bezier(.65,0,.35,1) forwards}
.lg-fill{fill:#fff}
.lg-clip{transform-box:fill-box;transform-origin:0 50%;transform:scaleX(0);animation:fillx 1s 2.3s cubic-bezier(.65,0,.35,1) forwards}
@keyframes draw{to{stroke-dashoffset:0}}
@keyframes fillx{to{transform:scaleX(1)}}

body:not(.entered){overflow:hidden;height:100svh}
#app{background:#000;transition:transform 1s var(--spring),opacity .6s,border-radius 1s,filter .8s}
body:not(.entered) #app{transform:scale(.84);opacity:0;border-radius:52px;filter:blur(10px)}
nav{transition:transform .9s .35s var(--spring),opacity .5s .35s}
body:not(.entered) nav{transform:translate(-50%,160%);opacity:0}
body:not(.entered) #bar{opacity:0}
/* hero text starts only after the site opens */
body:not(.entered) .line span,body:not(.entered) .role,body:not(.entered) .cta,body:not(.entered) .scroll{animation:none}