.intro { display: none; }
html.tb-intro body { overflow: hidden; }
html.tb-intro .intro {
  position: fixed; inset: 0; z-index: 1000;
  display: grid; place-items: center; align-content: center; gap: 34px;
  background:
    radial-gradient(60vmax 60vmax at 50% 45%, rgb(8 100 244 / .18), transparent 60%),
    var(--tb-abyss);
  perspective: 1100px; perspective-origin: 50% 45%;
  cursor: pointer;
}
.intro-logo {
  position: relative; width: min(34vmin, 240px); aspect-ratio: 1;
  transform-style: preserve-3d;
}
.intro-face { position: absolute; inset: 0; transform-style: preserve-3d; will-change: transform, opacity, filter; }
.intro-face svg { width: 100%; height: 100%; overflow: visible; transition: transform .9s cubic-bezier(.7,0,.84,0); }
.intro-face.f-l svg { filter: drop-shadow(0 0 18px rgb(0 198 232 / .55)); }
.intro-face.f-c svg { filter: drop-shadow(0 0 18px rgb(8 100 244 / .6)); }
.intro-face.f-n svg { filter: drop-shadow(0 0 18px rgb(7 58 137 / .8)); }
.intro-face { opacity: 0; }
.intro.go .f-l { animation: fly-l .8s cubic-bezier(.16,1,.3,1) 0s forwards; }
.intro.go .f-c { animation: fly-c .8s cubic-bezier(.16,1,.3,1) .08s forwards; }
.intro.go .f-n { animation: fly-n .8s cubic-bezier(.16,1,.3,1) .16s forwards; }
@keyframes fly-l {
  0%   { opacity: 0; filter: blur(14px); transform: translate3d(-62vw, -48vh, 700px) rotateZ(-150deg) rotateY(70deg) scale(.5); }
  35%  { opacity: 1; }
  70%  { filter: blur(0); }
  100% { opacity: 1; filter: none; transform: none; }
}
@keyframes fly-c {
  0%   { opacity: 0; filter: blur(14px); transform: translate3d(66vw, -26vh, 500px) rotateZ(160deg) rotateX(60deg) scale(.5); }
  35%  { opacity: 1; }
  70%  { filter: blur(0); }
  100% { opacity: 1; filter: none; transform: none; }
}
@keyframes fly-n {
  0%   { opacity: 0; filter: blur(14px); transform: translate3d(-6vw, 64vh, 600px) rotateZ(110deg) rotateX(-70deg) scale(.5); }
  35%  { opacity: 1; }
  70%  { filter: blur(0); }
  100% { opacity: 1; filter: none; transform: none; }
}
.intro-wave {
  position: absolute; inset: -6%; border-radius: 50%; pointer-events: none; opacity: 0;
  box-shadow: 0 0 0 2px rgb(0 198 232 / .7), 0 0 40px rgb(0 198 232 / .5) inset;
}
.intro-wave.w2 { box-shadow: 0 0 0 1px rgb(127 168 255 / .5); }
.intro.joined .intro-wave    { animation: wave 1.1s cubic-bezier(.16,1,.3,1) forwards; }
.intro.joined .intro-wave.w2 { animation-delay: .12s; }
@keyframes wave { 0% { opacity: .9; transform: scale(.7); } 100% { opacity: 0; transform: scale(2.3); } }
.intro-shine {
  position: absolute; inset: 0; pointer-events: none; border-radius: 50%; overflow: hidden;
  -webkit-mask: url("talentbridge-emblem-white.svg") center / contain no-repeat;
          mask: url("talentbridge-emblem-white.svg") center / contain no-repeat;
}
.intro-shine::before {
  content: ""; position: absolute; top: -20%; bottom: -20%; width: 40%; left: -60%;
  background: linear-gradient(100deg, transparent, rgb(255 255 255 / .65), transparent);
  transform: skewX(-18deg);
}
.intro.joined .intro-shine::before { animation: shine .9s cubic-bezier(.4,0,.2,1) .05s forwards; }
@keyframes shine { to { left: 130%; } }
.intro.joined .intro-logo { animation: pop .6s cubic-bezier(.34,1.56,.64,1); }
@keyframes pop { 40% { transform: scale(1.06); } }
.intro-word {
  display: flex; font: 500 clamp(1.6rem, 1.2rem + 1.8vw, 2.6rem)/1 var(--tb-display);
  letter-spacing: -.03em; color: var(--tb-ice);
  transition: transform .9s cubic-bezier(.7,0,.84,0), opacity .6s, filter .6s, letter-spacing .9s;
}
.intro-word b { font-weight: 800; display: contents; }
.intro-word span { display: inline-block; opacity: 0; transform: translateY(60%); filter: blur(8px); white-space: pre; }
.intro.joined .intro-word span { animation: letter .7s cubic-bezier(.16,1,.3,1) forwards; animation-delay: calc(var(--i) * 28ms); }
@keyframes letter { to { opacity: 1; transform: none; filter: none; } }
.intro-bar { position: relative; width: 140px; height: 2px; border-radius: 2px; background: rgb(143 180 255 / .14); overflow: hidden; transition: opacity .4s; }
.intro-bar i { position: absolute; inset: 0; transform-origin: left; transform: scaleX(var(--p, 0)); background: var(--tb-bridge); box-shadow: 0 0 10px var(--tb-lagoon); transition: transform .5s cubic-bezier(.16,1,.3,1); }
.intro-skip { position: absolute; bottom: 28px; left: 0; right: 0; text-align: center; font: 500 12px var(--tb-mono); letter-spacing: .16em; text-transform: uppercase; color: var(--tb-fog); opacity: .7; transition: opacity .3s; }
.intro.leave .intro-logo {
  animation: recede .75s cubic-bezier(.7,0,.84,0) forwards;
}
@keyframes recede {
  0%   { transform: none; opacity: 1; filter: none; }
  100% { transform: translateZ(-2600px) rotateZ(200deg); opacity: 0; filter: blur(6px); }
}
.intro.leave .f-l svg { transform: translate(-16%, -14%) rotate(-14deg); }
.intro.leave .f-c svg { transform: translate(18%, -6%) rotate(12deg); }
.intro.leave .f-n svg { transform: translate(-2%, 18%) rotate(8deg); }
.intro.leave .intro-word { transform: translateZ(-900px); opacity: 0; filter: blur(10px); letter-spacing: .2em; }
.intro.leave .intro-bar, .intro.leave .intro-skip { opacity: 0; }
.intro.fade { transition: opacity .7s ease .1s, background-color .7s; opacity: 0; pointer-events: none; }
html.ui-pre main,
html.ui-pre footer,
html.ui-pre .aurora {
  opacity: 0; transform: scale(.74); filter: blur(10px);
}
html.ui-pre .aurora { transform: scale(1.25); filter: none; }
html.ui-pre main, html.ui-pre footer { transform-origin: 50% calc(var(--sy, 0px) + 50vh); }
html.ui-in main,
html.ui-in footer,
html.ui-in .aurora {
  transition:
    transform 1.25s cubic-bezier(.16,1,.3,1),
    opacity .7s ease,
    filter .9s ease;
}
html.ui-in .aurora { transition-duration: 1.8s, 1s, 0s; }
@media (prefers-reduced-motion: reduce) {
  html.tb-intro .intro { display: none; }
  html.tb-intro body { overflow: auto; }
}