body.intro-active{
  overflow:hidden;
}

body.intro-active .wrap,
body.intro-active .dock,
body.intro-active .scroll-progress,
body.intro-active .ambient-backdrop{
  opacity:0;
  filter:blur(22px);
  transform:scale(1.025);
  pointer-events:none;
}

.wrap,
.dock,
.scroll-progress,
.ambient-backdrop{
  transition:
    opacity .9s cubic-bezier(.22,1,.36,1),
    filter 1.1s cubic-bezier(.22,1,.36,1),
    transform 1.1s cubic-bezier(.22,1,.36,1);
}

.site-intro{
  position:fixed;
  inset:0;
  z-index:260;
  overflow:hidden;
  display:grid;
  place-items:center;
  background:
    radial-gradient(circle at 50% 20%,rgba(255,255,255,.08),transparent 24%),
    linear-gradient(180deg,rgba(10,7,18,.68),rgba(4,4,8,.92));
  transition:opacity .88s cubic-bezier(.22,1,.36,1),visibility .88s cubic-bezier(.22,1,.36,1);
}

.site-intro::before,
.site-intro::after{
  content:"";
  position:absolute;
  inset:-16%;
  pointer-events:none;
}

.site-intro::before{
  background:
    radial-gradient(circle at 20% 25%,rgba(232,142,255,.24),transparent 24%),
    radial-gradient(circle at 78% 18%,rgba(158,108,255,.2),transparent 21%),
    radial-gradient(circle at 50% 72%,rgba(255,255,255,.08),transparent 28%);
  filter:blur(42px);
  animation:intro-aura-drift 10s ease-in-out infinite alternate;
}

.site-intro::after{
  background:linear-gradient(115deg,rgba(255,255,255,.06),transparent 26%,transparent 72%,rgba(255,255,255,.08));
  mix-blend-mode:screen;
  opacity:.58;
}

.site-intro-media{
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
}

.site-intro-media::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at center,transparent 0,transparent 24%,rgba(4,5,10,.24) 54%,rgba(4,5,10,.88) 100%);
}

.site-intro-image{
  width:min(92vw,960px);
  aspect-ratio:1 / 1;
  object-fit:cover;
  opacity:.34;
  transform:scale(1.16) translateY(4vh);
  filter:saturate(1.08) brightness(.92) contrast(1.04);
  animation:intro-visual-float 7.6s ease-in-out infinite alternate;
  user-select:none;
  -webkit-user-drag:none;
}

.site-intro-orbit,
.site-intro-orbit::before,
.site-intro-orbit::after{
  position:absolute;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.12);
}

.site-intro-orbit{
  width:min(74vw,780px);
  height:min(74vw,780px);
  opacity:.22;
  transform:rotate(-14deg);
  animation:intro-orbit-spin 14s linear infinite;
}

.site-intro-orbit::before,
.site-intro-orbit::after{
  content:"";
  inset:10%;
}

.site-intro-orbit::after{
  inset:22%;
}

.site-intro-center{
  position:relative;
  z-index:2;
  width:min(92vw,900px);
  display:grid;
  gap:18px;
  justify-items:center;
  text-align:center;
  padding:32px 18px;
}

.site-intro-kicker,
.site-intro-sub,
.site-intro-skip{
  margin:0;
  opacity:0;
  transform:translate3d(0,18px,0);
}

.site-intro-kicker{
  color:rgba(229,238,255,.76);
  font-size:.8rem;
  font-weight:900;
  letter-spacing:.28em;
  text-transform:uppercase;
}

.site-intro-title{
  margin:0;
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:.08em;
  font-size:clamp(2.2rem,7.6vw,5.7rem);
  font-weight:900;
  letter-spacing:.08em;
  line-height:1.06;
  color:#f8f5ff;
  text-shadow:
    0 0 26px rgba(248,236,255,.12),
    0 18px 46px rgba(55,0,83,.36);
}

.site-intro-title .char{
  display:inline-block;
  opacity:0;
  transform:translate3d(0,42px,0) scale(.92);
  filter:blur(10px);
}

.site-intro-title .char.is-space{
  width:.45em;
}

.site-intro-sub{
  color:rgba(226,230,245,.8);
  font-size:.96rem;
  font-weight:700;
  line-height:1.8;
}

.site-intro-skip{
  color:rgba(223,228,248,.54);
  font-size:.76rem;
  font-weight:800;
  letter-spacing:.1em;
}

.site-intro.is-visible .site-intro-kicker,
.site-intro.is-visible .site-intro-sub,
.site-intro.is-visible .site-intro-skip{
  opacity:1;
  transform:none;
  transition:
    opacity .82s cubic-bezier(.22,1,.36,1),
    transform .82s cubic-bezier(.22,1,.36,1);
}

.site-intro.is-visible .site-intro-kicker{
  transition-delay:.16s;
}

.site-intro.is-visible .site-intro-sub{
  transition-delay:1.28s;
}

.site-intro.is-visible .site-intro-skip{
  transition-delay:1.7s;
}

.site-intro.is-title-in .site-intro-title .char{
  opacity:1;
  transform:none;
  filter:none;
  transition:
    opacity .78s cubic-bezier(.22,1,.36,1),
    transform .88s cubic-bezier(.22,1,.36,1),
    filter .88s cubic-bezier(.22,1,.36,1);
  transition-delay:var(--char-delay,0ms);
}

.site-intro.is-final .site-intro-title{
  text-shadow:
    0 0 40px rgba(247,231,255,.22),
    0 22px 60px rgba(56,0,84,.46);
  transition:text-shadow .72s ease;
}

.site-intro.is-final .site-intro-sub{
  color:rgba(246,248,255,.9);
}

.site-intro.is-exit{
  opacity:0;
  visibility:hidden;
}

.site-intro.is-exit .site-intro-center{
  transform:translate3d(0,-18px,0) scale(.985);
  opacity:0;
  transition:
    opacity .62s cubic-bezier(.22,1,.36,1),
    transform .72s cubic-bezier(.22,1,.36,1);
}

@keyframes intro-visual-float{
  0%{
    transform:scale(1.16) translate3d(0,4vh,0);
  }
  50%{
    transform:scale(1.19) translate3d(1vw,1.8vh,0);
  }
  100%{
    transform:scale(1.15) translate3d(-1vw,5.2vh,0);
  }
}

@keyframes intro-aura-drift{
  0%{
    transform:translate3d(-2%,0,0) scale(1);
  }
  100%{
    transform:translate3d(3%,-2%,0) scale(1.08);
  }
}

@keyframes intro-orbit-spin{
  0%{
    transform:rotate(-14deg) scale(1);
  }
  100%{
    transform:rotate(346deg) scale(1.02);
  }
}

@media (max-width:760px){
  .site-intro-image{
    width:118vw;
    opacity:.42;
  }

  .site-intro-center{
    gap:14px;
    padding:24px 16px;
  }

  .site-intro-sub{
    font-size:.88rem;
  }
}

@media (prefers-reduced-motion: reduce){
  body.intro-active .wrap,
  body.intro-active .dock,
  body.intro-active .scroll-progress,
  body.intro-active .ambient-backdrop{
    opacity:1;
    filter:none;
    transform:none;
    pointer-events:auto;
  }

  .site-intro::before,
  .site-intro-image,
  .site-intro-orbit{
    animation:none !important;
  }

  .site-intro-kicker,
  .site-intro-sub,
  .site-intro-skip,
  .site-intro-title .char{
    opacity:1 !important;
    transform:none !important;
    filter:none !important;
    transition:none !important;
  }
}