:root {
  --brand-orange: #ff7a1a;
  --sunfire-start: #ffb021;
  --sunfire-end: #ff6a17;
  --dark-bg: #101114;
  --dark-wordmark: #ffb03a;
  --tagline: rgba(255, 176, 58, 0.72);
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  min-height: 100%;
}

body {
  min-height: 100vh;
  display: grid;
  place-items: center;
  background:
    radial-gradient(
      ellipse 85% 65% at 30% 0%,
      color-mix(in srgb, var(--sunfire-start) 28%, transparent) 0%,
      transparent 55%
    ),
    radial-gradient(
      ellipse 75% 55% at 90% 100%,
      color-mix(in srgb, var(--sunfire-end) 22%, transparent) 0%,
      transparent 50%
    ),
    var(--dark-bg);
  color: var(--dark-wordmark);
  font-family: "Space Grotesk", sans-serif;
}

.hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 2rem 1.5rem 2.5rem;
  max-width: 28rem;
}

.mark {
  display: block;
  width: min(220px, 58vw);
  height: auto;
  aspect-ratio: 1024 / 640;
  margin: 0 0 1.25rem;
  animation: rise 0.9s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.wordmark {
  margin: 0;
  font-size: clamp(2.75rem, 10vw, 4.25rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1;
  color: var(--dark-wordmark);
  animation: rise 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.12s both;
}

.tagline {
  margin: 0.85rem 0 0;
  font-size: 1.125rem;
  font-weight: 400;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--tagline);
  animation: rise 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.24s both;
}

@keyframes rise {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .mark,
  .wordmark,
  .tagline {
    animation: none;
  }
}