#intro {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  background: radial-gradient(
    circle at top,
    hsl(var(--sky-bg)) 0,
    hsl(var(--sky-bg-mid)) 45%,
    hsl(var(--sky-bg-deep)) 100%
  );
  z-index: 10;
  overflow: hidden;
}

.intro-inner {
  position: relative;
  width: clamp(180px, 40vw, 280px);
  height: clamp(180px, 40vw, 280px);
  display: grid;
  place-items: center;
}

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

.intro-ripple {
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 999px;
  border: 1px solid hsla(var(--sky-star), 0.55);
  box-shadow: 0 0 0 1px hsla(var(--sky-star), 0.08) inset;
  opacity: 0;
  transform: scale(0.55);
}

.intro-avatar {
  width: clamp(74px, 16vw, 108px);
  height: clamp(74px, 16vw, 108px);
  border-radius: 999px;
  object-fit: cover;
  border: 3px solid rgba(255, 255, 255, 0.18);
  box-shadow: 0 18px 55px rgba(0, 0, 0, 0.65);
}

.is-loading .main-layout,
.is-loading .site-footer {
  opacity: 0;
  transform: translateY(14px);
}