/* The original transparent logo forms every slice of the extrusion. */
.logo-intro {
  position: fixed;
  inset: 0;
  z-index: 10000;
  pointer-events: none;
  isolation: isolate;
  font-family: 'Segoe UI', Inter, sans-serif;
}
.logo-intro__backdrop {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 50% 43%, #eee7ff 0, #faf8ff 38%, #fff 75%);
}
.logo-intro__stage {
  position: absolute;
  left: 50%;
  top: 44%;
  width: clamp(190px, 31vw, 290px);
  aspect-ratio: 1;
  margin-left: calc(clamp(190px, 31vw, 290px) / -2);
  margin-top: calc(clamp(190px, 31vw, 290px) / -2);
  perspective: 950px;
  transform-origin: center;
  will-change: transform;
}
.logo-intro__model {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
}
.logo-intro__slice, .logo-intro__face, .logo-intro__shine {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.logo-intro__slice {
  background: linear-gradient(135deg, #9b63fa, #4727b5 42%, #18186c 76%, #6140ce);
  -webkit-mask: url('../img/logos/logo.png') center / contain no-repeat;
  mask: url('../img/logos/logo.png') center / contain no-repeat;
}
.logo-intro__face { transform: translateZ(1px); }
.logo-intro__shine {
  transform: translateZ(1.5px);
  -webkit-mask: url('../img/logos/logo.png') center / contain no-repeat;
  mask: url('../img/logos/logo.png') center / contain no-repeat;
  background: linear-gradient(115deg, transparent 35%, #ffffff05 41%, #ffffffac 49%, #ffffff12 56%, transparent 63%);
  background-size: 300% 100%;
  background-position: 140% 0;
}
.logo-intro__shadow {
  position: absolute;
  top: calc(44% + clamp(95px, 15.5vw, 145px));
  left: 50%;
  width: 170px;
  height: 18px;
  margin-left: -85px;
  background: #4a258c33;
  border-radius: 50%;
  filter: blur(14px);
}
.logo-intro__wordmark {
  position: absolute;
  top: calc(44% + clamp(95px, 15.5vw, 145px) + 44px);
  width: 100%;
  text-align: center;
  color: #211646;
  font-size: clamp(22px, 4vw, 30px);
  font-weight: 700;
  letter-spacing: -.8px;
}
.logo-intro__wordmark span { color: #743ad5; }
.logo-intro__caption {
  display: block;
  margin-top: 10px;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 3px;
  color: #7d7391;
  text-transform: uppercase;
}
.logo-intro__skip {
  position: absolute;
  bottom: max(24px, env(safe-area-inset-bottom));
  right: 28px;
  padding: 10px 16px;
  border: 1px solid #e0d9ef;
  border-radius: 100px;
  background: #ffffffb3;
  color: #695d81;
  font: inherit;
  font-size: 12px;
  cursor: pointer;
  pointer-events: auto;
}
.logo-intro__skip:hover { background: #eee7ff; }
.logo-intro__skip:focus-visible { outline: 2px solid #7c3aed; outline-offset: 4px; }
/* If scripts stop unexpectedly, the page must become visible anyway. */
.logo-intro-destination {
  visibility: hidden;
  animation: logo-intro-restore 1ms 3s forwards;
}
@keyframes logo-intro-restore { to { visibility: visible; } }
.logo-intro { animation: logo-intro-release 1ms 3s forwards; }
@keyframes logo-intro-release { to { visibility: hidden; } }
@media (prefers-reduced-motion: reduce) {
  .logo-intro { display: none; }
  .logo-intro-destination { visibility: visible; animation: none; }
}