.logo-intro {
  position: fixed;
  inset: 0;
  z-index: 2147483647;
  display: grid;
  place-items: center;
  background: #f8f8fa;
  touch-action: none;
}
.logo-intro__mark {
  position: relative;
  width: var(--intro-logo-size);
  aspect-ratio: 871 / 869;
  border-radius: 23%;
  overflow: hidden;
  isolation: isolate;
}
.logo-intro__layer, .logo-intro__mascot {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
}
.logo-intro__mascot img, .logo-intro__gaze {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
@media (prefers-reduced-motion: reduce) {
  .logo-intro { display: none; }
}

.logo-intro__composition {
  --intro-logo-size: min(280px, 32vw, 48svh);
  --intro-word-size: min(480px, 56vw, 76svh);
  --intro-gap: min(28px, 4vw);
  --intro-shift: calc((var(--intro-word-size) + var(--intro-gap)) / 2);
  position: relative;
}
.logo-intro__wordmark {
  position: absolute;
  left: calc(50% + var(--intro-logo-size) / 2 + var(--intro-gap) - var(--intro-shift));
  top: 50%;
  transform: translateY(-50%);
  width: var(--intro-word-size);
  aspect-ratio: 1102 / 304;
}
.logo-intro__wordmark img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
}