/* Start screen shown over the site until the visitor chooses how to open it. */
#intro{position:fixed;inset:0;z-index:100;background:#030307;color:#e5e6ed;overflow:hidden;display:flex;align-items:center;padding:110px 10vw 90px;font-family:Arial,Helvetica,sans-serif}
#intro-fx{position:absolute;inset:0;width:100%;height:100%;display:block}
#intro .intro-shade{position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,#030307 0%,#030307d9 26%,#03030700 58%),linear-gradient(0deg,#030307e6 0%,#03030700 34%),radial-gradient(circle at 50% 50%,transparent 60%,#03030799 100%);transition:opacity .5s}
#intro .intro-grid{position:absolute;inset:0;pointer-events:none;opacity:.16;background-image:radial-gradient(circle,#9fc6ff 0.7px,transparent 1.3px);background-size:6px 6px;mask-image:linear-gradient(90deg,transparent 30%,black 75%);transition:opacity .5s}
#intro .intro-ui{position:relative;z-index:2;max-width:640px;transition:opacity .5s ease,transform .7s cubic-bezier(.7,0,.3,1),filter .5s}
#intro.ready .intro-ui>*{animation:intro-rise .9s cubic-bezier(.2,.7,.2,1) both}
#intro.ready .intro-ui>*:nth-child(2){animation-delay:.12s}#intro.ready .intro-ui>*:nth-child(3){animation-delay:.24s}#intro.ready .intro-ui>*:nth-child(4){animation-delay:.36s}#intro.ready .intro-ui>*:nth-child(5){animation-delay:.48s}#intro.ready .intro-ui>*:nth-child(6){animation-delay:.6s}
@keyframes intro-rise{from{opacity:0;transform:translateY(16px);filter:blur(6px)}to{opacity:1;transform:none;filter:none}}
#intro .intro-kicker{font-size:12px;letter-spacing:3px;color:#a0b2cb;margin:0 0 26px}
#intro .intro-title{font-family:'Ethnocentric',Georgia,serif;font-weight:400;font-size:clamp(40px,5.2vw,100px);letter-spacing:.05em;line-height:1.1;margin:0 0 30px;white-space:nowrap;text-shadow:0 0 40px #aecaff26}
#intro .intro-socials{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:44px}
#intro .intro-socials a{height:44px;width:44px;display:grid;place-items:center;border:1px solid #c3d2ef30;border-radius:50%;color:#c5cddd;background:#07071066;transition:background .2s,color .2s,transform .2s}
#intro .intro-socials a:hover,#intro .intro-socials a:focus-visible{background:#79b8eb25;color:#9ad2ff;transform:translateY(-3px)}
#intro .intro-socials svg{width:19px;height:19px;fill:currentColor}
#intro button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
#intro button:focus-visible,#intro a:focus-visible{outline:2px solid #9ad2ff;outline-offset:5px}
#intro .intro-open{position:relative;display:inline-flex;align-items:center;gap:18px;padding:18px 30px 18px 24px;border:1px solid #c6ddff66;border-radius:60px;font-size:14px;letter-spacing:.24em;text-transform:uppercase;background:#0a1224a6;box-shadow:0 0 0 0 #5aa8ff00;transition:border-color .3s,background .3s,box-shadow .4s,transform .3s}
#intro .intro-open:hover{border-color:#bfe0ff;background:#12203dcc;box-shadow:0 0 38px #4b9dff40;transform:translateY(-2px)}
#intro .intro-open:after{content:'';position:absolute;inset:-7px;border-radius:70px;border:1px solid #9ad2ff40;animation:intro-ping 2.6s ease-out infinite;pointer-events:none}
@keyframes intro-ping{0%{opacity:.9;transform:scale(.96)}70%,100%{opacity:0;transform:scale(1.12)}}
#intro .intro-bars{display:flex;align-items:flex-end;gap:3px;height:16px}
#intro .intro-bars i{display:block;width:3px;height:100%;background:#9ad2ff;border-radius:2px;transform-origin:bottom;animation:intro-bar 1s ease-in-out infinite}
#intro .intro-bars i:nth-child(2){animation-delay:-.35s}#intro .intro-bars i:nth-child(3){animation-delay:-.7s}#intro .intro-bars i:nth-child(4){animation-delay:-.15s}
@keyframes intro-bar{0%,100%{transform:scaleY(.25)}50%{transform:scaleY(1)}}
#intro .intro-hint{display:block;margin-top:16px;font-size:11px;letter-spacing:2px;color:#7f8ba0}
#intro .intro-silent{position:absolute;z-index:2;right:4vw;bottom:34px;font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:#98a4b8;padding:10px 0;border-bottom:1px solid #9eadc140;transition:color .2s,border-color .2s,opacity .5s}
#intro .intro-silent:hover{color:#fff;border-color:#fff}
#intro .intro-copy{position:absolute;z-index:2;left:4vw;bottom:40px;font-size:11px;letter-spacing:2px;color:#6f7a8e;transition:opacity .5s}
#intro.leaving .intro-ui{opacity:0;transform:translateY(-26px) scale(.98);filter:blur(8px)}
#intro.leaving .intro-silent,#intro.leaving .intro-copy,#intro.leaving .intro-grid,#intro.leaving .intro-shade{opacity:0}
#intro:not(.ready) .intro-ui>*,#intro:not(.ready) .intro-silent,#intro:not(.ready) .intro-copy{opacity:0}
#intro.ready .intro-silent,#intro.ready .intro-copy{animation:intro-fade 1s .8s both}
#intro.leaving .intro-silent,#intro.leaving .intro-copy{animation:none}
@keyframes intro-fade{from{opacity:0}to{opacity:1}}
#intro.leaving{pointer-events:none}
#intro.gone{display:none}
body.intro-lock{overflow:hidden}
@media(max-width:900px){#intro .intro-title{font-size:clamp(30px,8.4vw,60px);white-space:normal}#intro .intro-shade{background:linear-gradient(0deg,#030307 0%,#030307e0 42%,#03030700 72%),radial-gradient(circle at 50% 40%,transparent 55%,#03030799 100%)}#intro{align-items:flex-end;padding:90px 26px 120px}#intro .intro-grid{mask-image:linear-gradient(0deg,transparent 35%,black 80%)}}
@media(max-width:600px){#intro .intro-kicker{font-size:10px;letter-spacing:2.5px;margin-bottom:18px}#intro .intro-socials{gap:8px;margin-bottom:30px}#intro .intro-socials a{width:40px;height:40px}#intro .intro-open{padding:16px 24px 16px 20px;font-size:12px;letter-spacing:.2em}#intro .intro-silent{left:26px;right:auto;bottom:40px}#intro .intro-copy{display:none}#intro .intro-hint{display:none}}
@media(prefers-reduced-motion:reduce){#intro .intro-open:after,#intro .intro-bars i,#intro.ready .intro-ui>*{animation:none}}
