* {
  box-sizing: border-box;
}

html {
  background: #080a0d;
}

body {
  margin: 0;
  min-block-size: 100vh;
  min-block-size: 100dvh;
  color: #d9dde2;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

.stage {
  display: grid;
  place-items: center;
  min-block-size: 100vh;
  min-block-size: 100dvh;
  padding: clamp(1.5rem, 5vw, 5rem);
}

.composition {
  display: grid;
  justify-items: center;
  gap: clamp(1.8rem, 4vw, 3rem);
  inline-size: min(100%, 60rem);
}

.logo {
  display: block;
  inline-size: 100%;
  block-size: auto;
  animation: logo-enter 950ms ease-out both;
}

.announcement {
  margin: 0;
  color: #b7bec7;
  font-size: clamp(0.75rem, 0.65rem + 0.4vw, 1rem);
  font-weight: 500;
  letter-spacing: 0.18em;
  line-height: 1.5;
  white-space: nowrap;
  animation: type-in 1.4s steps(19, end) 1.1s both;
}

@keyframes logo-enter {
  from {
    opacity: 0;
    transform: translateY(8px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes type-in {
  from {
    clip-path: inset(0 100% 0 0);
  }

  to {
    clip-path: inset(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .logo,
  .announcement {
    animation: none;
  }
}