/* Tokkers social link and short cinematic entrance. */
.header nav>a.social-x{display:inline-flex;width:43px;height:43px;align-items:center;justify-content:center;padding:0;border:1px solid #41444d;border-radius:6px;color:var(--white);transition:border-color .2s,box-shadow .2s}
.social-x svg{width:17px;height:17px;fill:currentColor;stroke:none}
.header nav>a.social-x:hover{border-color:var(--cyan);box-shadow:2px 2px 0 var(--pink)}
.footer .footer-social{font-size:11px;display:flex;align-items:center;gap:8px;color:#b8bac2}
.footer .footer-social:hover{color:var(--cyan)}
.entry-intro{position:fixed;inset:0;z-index:1000;background:#050505;isolation:isolate;display:flex;align-items:center;justify-content:center;visibility:hidden;pointer-events:none;overflow:hidden}
.intro-active .entry-intro{visibility:visible;pointer-events:auto;animation:intro-depart .5s cubic-bezier(.7,0,.2,1) 1.9s both}
.intro-active body{overflow:hidden}
.intro-top,.intro-bottom{position:absolute;left:38px;right:38px;z-index:3;display:flex;justify-content:space-between;align-items:center;font:9px Mono,monospace;letter-spacing:1px;color:#74747a}
.intro-top{top:29px}.intro-bottom{bottom:29px}
.intro-top>span{color:var(--cyan)}
#skip-intro{border:1px solid #303038;background:transparent;padding:11px 14px;color:#d6d6dc;display:flex;align-items:center;gap:9px;border-radius:5px;font:11px Archivo,Arial,sans-serif}
#skip-intro:hover{border-color:var(--cyan)}
#skip-intro svg{width:12px;height:12px}
.intro-lockup{position:relative;z-index:2;display:flex;align-items:center;flex-direction:column;text-align:center}
.intro-symbol{width:104px;height:104px;filter:drop-shadow(-5px 0 18px #25f4ee20) drop-shadow(5px 0 18px #fe2c5520)}
.intro-wordmark{font-size:88px;line-height:1.1;font-weight:900;letter-spacing:-5.5px;margin:15px 0 20px;color:white;text-shadow:0 4px 45px black}
.intro-wordmark>span{color:var(--cyan)}
.intro-lockup>p{font:9px Mono,monospace;letter-spacing:2.4px;color:#9e9fa7;margin:0}
.intro-accent{display:flex;width:70px;height:2px;margin-top:27px;gap:4px}.intro-accent>i{height:100%;width:50%;background:var(--cyan)}.intro-accent>i:last-child{background:var(--pink)}
.intro-portraits{position:absolute;inset:0;z-index:1;pointer-events:none}
.intro-portrait{position:absolute;width:clamp(135px,15vw,215px);height:clamp(230px,26vw,370px);top:50%;overflow:hidden;border:1px solid #35383f;border-radius:12px;opacity:.4;box-shadow:0 0 60px #000}
.intro-portrait img{width:100%;height:100%;object-fit:cover;filter:saturate(.8) brightness(.65)}
.intro-portrait::after{content:'';position:absolute;inset:0;background:linear-gradient(0deg,#050505a8,transparent 55%,#05050545)}
.intro-portrait-left{left:calc(50% - 440px);transform:translateY(-50%) rotate(-8deg);border-left-color:#25f4ee77}
.intro-portrait-right{right:calc(50% - 440px);transform:translateY(-50%) rotate(8deg);border-right-color:#fe2c5577}
.intro-active .intro-symbol{animation:intro-mark .55s cubic-bezier(.2,.8,.2,1) .12s both}
.intro-active .intro-wordmark{animation:intro-word .65s cubic-bezier(.2,.8,.2,1) .27s both}
.intro-active .intro-lockup>p,.intro-active .intro-accent{animation:intro-detail .45s ease .65s both}
.intro-active .intro-portrait-left{animation:intro-left .9s cubic-bezier(.2,.8,.2,1) .12s both}
.intro-active .intro-portrait-right{animation:intro-right .9s cubic-bezier(.2,.8,.2,1) .2s both}
.intro-complete .hero-copy,.intro-complete .hero-art{animation:entry-page .65s cubic-bezier(.2,.7,.2,1) both}.intro-complete .hero-art{animation-delay:.1s}
@keyframes intro-mark{from{opacity:0;transform:scale(.76) rotate(-8deg);filter:blur(7px)}to{opacity:1;transform:scale(1) rotate(0)}}
@keyframes intro-word{from{opacity:0;transform:translateY(18px);letter-spacing:0}to{opacity:1;transform:translateY(0);letter-spacing:-5.5px}}
@keyframes intro-detail{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}
@keyframes intro-left{from{opacity:0;transform:translate(-65px,calc(-50% + 35px)) rotate(-16deg)}to{opacity:.4;transform:translate(0,-50%) rotate(-8deg)}}
@keyframes intro-right{from{opacity:0;transform:translate(65px,calc(-50% + 35px)) rotate(16deg)}to{opacity:.4;transform:translate(0,-50%) rotate(8deg)}}
@keyframes intro-depart{from{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(1.06)}}
@keyframes entry-page{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:translateY(0)}}
@media(max-width:780px){.header nav{gap:9px}.header nav>a.social-x{width:37px;height:37px}.nav-cta{padding:11px 10px;gap:9px}.intro-top,.intro-bottom{left:20px;right:20px}.intro-wordmark{font-size:70px;letter-spacing:-4.5px}.intro-symbol{width:90px;height:90px}.intro-portrait-left{left:calc(50% - 300px)}.intro-portrait-right{right:calc(50% - 300px)}.intro-bottom{font-size:7px;letter-spacing:.3px}.intro-lockup>p{font-size:8px;letter-spacing:1.5px}}
@media(max-width:400px){.header .brand{font-size:25px}.intro-wordmark{font-size:62px}.intro-portrait-left{left:-65px}.intro-portrait-right{right:-65px}.intro-portrait{opacity:.24}.intro-bottom>span:last-child{display:none}}
@media(prefers-reduced-motion:reduce){.entry-intro{display:none}.intro-complete .hero-copy,.intro-complete .hero-art{animation:none}}
