@font-face {
  font-family: "Cormorant";
  src: url("./assets/fonts/Cormorant-Regular.ttf") format("truetype");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "Cormorant";
  src: url("./assets/fonts/Cormorant-Medium.ttf") format("truetype");
  font-style: normal;
  font-weight: 500;
  font-display: swap;
}

@font-face {
  font-family: "DMSans";
  src: url("./assets/fonts/DMSans-Regular.ttf") format("truetype");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

:root {
  --color-terracotta: #b06f52;
  --color-opague-beige: #e1d3be;
  --color-lightest-beige: #f9f5f0;
  --color-light-beige: #f2e9df;
  --color-beige: #c9b08c;
  --color-dark-beige: #927f66;
  --color-brown: #6a5641;
  --color-dark-brown: #2c2420;
  --color-text: #3f3f3f;
  --color-background: var(--color-lightest-beige);

  --font-family-primary: "DMSans", sans-serif;
  --font-family-secondary: "Cormorant", serif;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

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

body {
  font-family: var(--font-family-primary);
  color: var(--color-text);
  background-color: var(--color-background);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.stage {
  position: relative;
  min-height: 100vh;
  min-height: 100dvh;
  display: grid;
  place-items: center;
  overflow: hidden;
  background:
    radial-gradient(ellipse 70% 55% at 50% 38%, var(--color-light-beige) 0%, transparent 70%),
    radial-gradient(ellipse 90% 70% at 80% 100%, color-mix(in srgb, var(--color-opague-beige) 55%, transparent) 0%, transparent 55%),
    radial-gradient(ellipse 80% 60% at 10% 90%, color-mix(in srgb, var(--color-beige) 28%, transparent) 0%, transparent 50%),
    var(--color-lightest-beige);
}

.stage__glow {
  position: absolute;
  inset: auto 0 0;
  height: 45%;
  background: linear-gradient(
    to top,
    color-mix(in srgb, var(--color-opague-beige) 40%, transparent),
    transparent
  );
  pointer-events: none;
  animation: glow-rise 4.5s ease-out both;
}

.stage__content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(1.5rem, 4vw, 2.25rem);
  padding: 2rem;
  text-align: center;
}

.stage__logo {
  display: block;
  width: min(280px, 72vw);
  height: auto;
  animation: fade-up 900ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

.stage__label {
  margin: 0;
  font-family: var(--font-family-secondary);
  font-weight: 400;
  font-size: clamp(1.75rem, 5vw, 2.75rem);
  line-height: 1.15;
  letter-spacing: 0.04em;
  color: var(--color-brown);
  animation: fade-up 900ms cubic-bezier(0.22, 1, 0.36, 1) 180ms both;
}

@keyframes fade-up {
  from {
    opacity: 0;
    transform: translateY(18px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

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

@media (prefers-reduced-motion: reduce) {
  .stage__glow,
  .stage__logo,
  .stage__label {
    animation: none;
  }
}