html.site-intro-active,
html.site-intro-active body{
  overflow:hidden;
}

.site-intro{
  position:fixed;
  z-index:1000;
  inset:0;
  overflow:hidden;
  display:grid;
  place-items:center;
  color:#fff;
  background:#050608;
  isolation:isolate;
  cursor:default;
}

.site-intro::before{
  content:"";
  position:absolute;
  inset:-20%;
  z-index:-3;
  background:
    radial-gradient(circle at 50% 43%,rgba(157,170,202,.16),transparent 19%),
    radial-gradient(circle at 50% 48%,rgba(63,72,92,.19),transparent 37%),
    #050608;
  transform:scale(.92);
  opacity:0;
}

.site-intro.is-running::before{
  animation:introAtmosphere 3.8s cubic-bezier(.22,1,.36,1) both;
}

.site-intro-noise{
  position:absolute;
  inset:-50%;
  z-index:-1;
  opacity:.035;
  pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.92' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.85'/%3E%3C/svg%3E");
  animation:introGrain .24s steps(2) infinite;
}

.site-intro-beam{
  position:absolute;
  z-index:-2;
  top:-18%;
  bottom:-18%;
  left:50%;
  width:1px;
  opacity:0;
  background:linear-gradient(transparent,rgba(255,255,255,.82) 42%,rgba(255,255,255,.18) 60%,transparent);
  box-shadow:0 0 42px 8px rgba(154,171,210,.15);
  transform:rotate(13deg) translateX(-38vw);
}

.site-intro.is-running .site-intro-beam{
  animation:introBeam 2.45s .38s cubic-bezier(.2,.75,.25,1) both;
}

.site-intro-frame{
  position:absolute;
  inset:22px;
  border:1px solid rgba(255,255,255,.065);
  opacity:0;
  transform:scale(.985);
}

.site-intro.is-running .site-intro-frame{
  animation:introFrame 2.2s .25s cubic-bezier(.22,1,.36,1) both;
}

.site-intro-content{
  position:relative;
  width:min(920px,calc(100vw - 52px));
  display:grid;
  justify-items:center;
  text-align:center;
}

.site-intro-mark{
  position:relative;
  width:106px;
  height:106px;
  display:grid;
  place-items:center;
}

.site-intro-mark svg{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  overflow:visible;
  transform:rotate(-90deg);
}

.site-intro-mark circle{
  fill:none;
  stroke:rgba(255,255,255,.7);
  stroke-width:.72;
  stroke-linecap:round;
  stroke-dasharray:302;
  stroke-dashoffset:302;
  filter:drop-shadow(0 0 10px rgba(255,255,255,.12));
}

.site-intro.is-running .site-intro-mark circle{
  animation:introRing 1.5s .2s cubic-bezier(.65,0,.2,1) forwards;
}

.site-intro-monogram{
  position:relative;
  z-index:1;
  opacity:0;
  filter:blur(12px);
  transform:scale(.82);
  font-size:25px;
  font-weight:650;
  letter-spacing:-.075em;
}

.site-intro.is-running .site-intro-monogram{
  animation:introMonogram 1.1s .74s cubic-bezier(.22,1,.36,1) forwards;
}

.site-intro-kicker{
  margin:33px 0 0;
  overflow:hidden;
  color:rgba(255,255,255,.52);
  font-size:9px;
  font-weight:650;
  letter-spacing:.28em;
  text-transform:uppercase;
}

.site-intro-kicker span{
  display:block;
  opacity:0;
  transform:translateY(120%);
}

.site-intro.is-running .site-intro-kicker span{
  animation:introTextUp .85s 1.12s cubic-bezier(.22,1,.36,1) forwards;
}

.site-intro-title{
  margin:18px 0 0;
  font-family:Manrope,Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  font-size:clamp(46px,8.2vw,108px);
  font-weight:500;
  line-height:.87;
  letter-spacing:-.07em;
}

.site-intro-title span{
  display:block;
  overflow:hidden;
}

.site-intro-title i{
  display:block;
  opacity:0;
  font-style:normal;
  transform:translateY(115%) skewY(5deg);
}

.site-intro.is-running .site-intro-title span:first-child i{
  animation:introTitle 1.05s 1.34s cubic-bezier(.22,1,.36,1) forwards;
}

.site-intro.is-running .site-intro-title span:last-child i{
  animation:introTitle 1.05s 1.48s cubic-bezier(.22,1,.36,1) forwards;
}

.site-intro-rule{
  width:min(360px,58vw);
  height:1px;
  margin-top:31px;
  overflow:hidden;
  background:rgba(255,255,255,.1);
  opacity:0;
}

.site-intro-rule::after{
  content:"";
  display:block;
  width:100%;
  height:100%;
  background:linear-gradient(90deg,transparent,#fff,transparent);
  transform:translateX(-100%);
}

.site-intro.is-running .site-intro-rule{
  animation:introFade .5s 1.82s forwards;
}

.site-intro.is-running .site-intro-rule::after{
  animation:introRule 1.25s 1.84s cubic-bezier(.22,1,.36,1) forwards;
}

.site-intro-status{
  margin-top:14px;
  opacity:0;
  color:rgba(255,255,255,.38);
  font-size:8px;
  letter-spacing:.16em;
  text-transform:uppercase;
}

.site-intro.is-running .site-intro-status{
  animation:introFade .8s 2.05s forwards;
}

.site-intro-progress{
  position:absolute;
  right:28px;
  bottom:27px;
  left:28px;
  height:1px;
  overflow:hidden;
  background:rgba(255,255,255,.09);
  opacity:0;
}

.site-intro-progress i{
  display:block;
  width:100%;
  height:100%;
  background:rgba(255,255,255,.75);
  transform:translateX(-100%);
}

.site-intro.is-running .site-intro-progress{
  animation:introFade .3s .2s forwards;
}

.site-intro.is-running .site-intro-progress i{
  animation:introProgress 3.45s .25s linear forwards;
}

.site-intro-skip{
  position:absolute;
  top:24px;
  right:25px;
  padding:8px 9px;
  opacity:0;
  color:rgba(255,255,255,.38);
  background:none;
  border:0;
  font-size:8px;
  letter-spacing:.14em;
  text-transform:uppercase;
  cursor:pointer;
  transition:color .2s;
}

.site-intro-skip:hover{color:#fff}
.site-intro.is-running .site-intro-skip{animation:introFade .7s 1.2s forwards}

.site-intro-curtain{
  position:absolute;
  z-index:5;
  top:0;
  bottom:0;
  width:51%;
  background:#050608;
  pointer-events:none;
}

.site-intro-curtain.left{left:0;transform-origin:left}
.site-intro-curtain.right{right:0;transform-origin:right}

.site-intro.is-leaving .site-intro-content{
  animation:introContentExit .66s cubic-bezier(.55,.02,.75,.18) forwards;
}

.site-intro.is-leaving::before{
  animation:introFlash .75s cubic-bezier(.22,1,.36,1) forwards;
}

.site-intro.is-leaving .site-intro-curtain.left{
  animation:introCurtainLeft .95s .08s cubic-bezier(.76,0,.24,1) forwards;
}

.site-intro.is-leaving .site-intro-curtain.right{
  animation:introCurtainRight .95s .08s cubic-bezier(.76,0,.24,1) forwards;
}

.site-intro.is-leaving .site-intro-frame,
.site-intro.is-leaving .site-intro-progress,
.site-intro.is-leaving .site-intro-skip{
  opacity:0;
  transition:opacity .2s;
}

html.site-intro-active .nav,
html.site-intro-active .hero-copy,
html.site-intro-active .hero-meta,
html.site-intro-active .scroll-line{
  opacity:0;
}

html.site-intro-active .hero-media{
  transform:scale(1.12);
  filter:blur(12px) brightness(.72);
}

html.intro-complete .hero-media{
  animation:introHeroSettle 1.8s cubic-bezier(.22,1,.36,1) both;
}

html.intro-complete .nav{
  animation:introNavIn .9s .28s cubic-bezier(.22,1,.36,1) both;
}

html.intro-complete .hero-copy{
  animation:introHeroCopy 1.2s .16s cubic-bezier(.22,1,.36,1) both!important;
}

html.intro-complete .hero-meta,
html.intro-complete .scroll-line{
  animation:introMetaIn 1s .48s cubic-bezier(.22,1,.36,1) both;
}

@keyframes introAtmosphere{
  0%{opacity:0;transform:scale(.92)}
  45%{opacity:1}
  100%{opacity:1;transform:scale(1.04)}
}

@keyframes introGrain{
  0%{transform:translate3d(0,0,0)}
  25%{transform:translate3d(2%,-1%,0)}
  50%{transform:translate3d(-1%,2%,0)}
  75%{transform:translate3d(1%,1%,0)}
  100%{transform:translate3d(-2%,-1%,0)}
}

@keyframes introBeam{
  0%{opacity:0;transform:rotate(13deg) translateX(-42vw)}
  18%{opacity:.78}
  68%{opacity:.42}
  100%{opacity:0;transform:rotate(13deg) translateX(43vw)}
}

@keyframes introFrame{to{opacity:1;transform:scale(1)}}
@keyframes introRing{0%{stroke-dashoffset:302;opacity:.1}100%{stroke-dashoffset:0;opacity:1}}
@keyframes introMonogram{to{opacity:1;filter:blur(0);transform:scale(1)}}
@keyframes introTextUp{to{opacity:1;transform:translateY(0)}}
@keyframes introTitle{to{opacity:1;transform:translateY(0) skewY(0)}}
@keyframes introFade{to{opacity:1}}
@keyframes introRule{to{transform:translateX(100%)}}
@keyframes introProgress{to{transform:translateX(0)}}
@keyframes introContentExit{to{opacity:0;filter:blur(10px);transform:scale(1.035)}}
@keyframes introFlash{0%{opacity:1}50%{opacity:1;filter:brightness(1.25)}100%{opacity:0}}
@keyframes introCurtainLeft{to{transform:translateX(-101%)}}
@keyframes introCurtainRight{to{transform:translateX(101%)}}
@keyframes introHeroSettle{0%{transform:scale(1.12);filter:blur(12px) brightness(.72)}100%{transform:scale(1);filter:blur(0) brightness(1)}}
@keyframes introNavIn{0%{opacity:0;transform:translateY(-18px)}100%{opacity:1;transform:none}}
@keyframes introHeroCopy{0%{opacity:0;filter:blur(10px);transform:translateY(48px)}100%{opacity:1;filter:blur(0);transform:none}}
@keyframes introMetaIn{0%{opacity:0;transform:translateY(18px)}100%{opacity:1;transform:none}}

@media(max-width:760px){
  .site-intro-frame{inset:12px}
  .site-intro-mark{width:88px;height:88px}
  .site-intro-title{font-size:clamp(44px,15.5vw,74px)}
  .site-intro-kicker{margin-top:26px}
  .site-intro-progress{right:17px;bottom:17px;left:17px}
  .site-intro-skip{top:13px;right:14px}
}

@media(prefers-reduced-motion:reduce){
  .site-intro *{animation-duration:.01ms!important;animation-delay:0ms!important}
  .site-intro{transition:opacity .35s}
  .site-intro.is-leaving{opacity:0}
  html.intro-complete .hero-media,
  html.intro-complete .nav,
  html.intro-complete .hero-copy,
  html.intro-complete .hero-meta,
  html.intro-complete .scroll-line{animation:none!important;opacity:1;filter:none;transform:none}
}