@font-face {
  font-family: "Inter Tight";
  src: url("./assets/fonts/InterTight-VariableFont_wght.ttf")
    format("truetype");
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}

@font-face {
  font-family: "Inter Tight";
  src: url("./assets/fonts/InterTight-Italic-VariableFont_wght.ttf")
    format("truetype");
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
}

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

@font-face {
  font-family: "VTF Redzone Classic";
  src: url("./assets/fonts/VTFRedzone-ClassicOblique.ttf") format("truetype");
  font-style: oblique;
  font-weight: 400;
  font-display: swap;
}

* {
  box-sizing: border-box;
}

:root {
  --white: #ffffff;
  --grey-100: #cbcbcb;
}

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

body {
  margin: 0;
  font-family: "Inter Tight", Arial, sans-serif;
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
  text-rendering: geometricPrecision;
  background: #060c4c;
}

.coming-soon {
  position: relative;
  display: flex;
  min-height: 100svh;
  width: 100%;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: 100px 32px;
  color: var(--white);
  isolation: isolate;
}

.background-gradient {
  position: absolute;
  inset: 0;
  z-index: -3;
  overflow: hidden;
  background: #060c4c;
}

.background-gradient::before {
  position: absolute;
  inset: -28%;
  content: "";
  background:
    linear-gradient(90deg, #060c4c 0 50%, #0112da 50% 100%) top / 100% 50%
      no-repeat,
    linear-gradient(90deg, #0b13ab 0 50%, #080c55 50% 100%) bottom / 100% 50%
      no-repeat;
  filter: blur(260px);
  transform: translateZ(0);
}

.gradient-blur {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.2);
}

.background-logo {
  position: absolute;
  z-index: -2;
  top: calc(50% - 28px);
  left: 50%;
  width: min(72.36vw, 1389.32px);
  aspect-ratio: 1389.32 / 567.61;
  height: auto;
  transform: translate(-50%, -50%);
  pointer-events: none;
  user-select: none;
}

.content {
  display: flex;
  width: min(851px, 100%);
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 38px;
  text-align: center;
}

.brand-logo {
  display: block;
  width: 256.41px;
  max-width: min(256.41px, 62vw);
  aspect-ratio: 256.41 / 200;
  height: auto;
}

h1,
p {
  margin: 0;
}

.copy {
  display: flex;
  width: 100%;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  color: var(--grey-100);
}

h1 {
  max-width: 100%;
  font-family: "VTF Redzone Classic", "Arial Narrow", "Inter Tight", sans-serif;
  font-size: clamp(30px, 2.083vw, 40px);
  font-weight: 300;
  line-height: 1.2;
  text-transform: uppercase;
  opacity: 0.8;
  overflow-wrap: anywhere;
}

p {
  max-width: 851px;
  font-size: clamp(17px, 1.25vw, 24px);
  font-weight: 300;
  line-height: 1.25;
  text-transform: capitalize;
  opacity: 0.8;
}

.tagline {
  font-family: "VTF Redzone Classic", "Arial Narrow", "Inter Tight", sans-serif;
  font-size: clamp(30px, 2.083vw, 40px);
  font-weight: 300;
  line-height: 1.2;
  text-transform: uppercase;
}

@media (max-width: 700px) {
  .coming-soon {
    min-height: 100dvh;
    padding: 64px 24px;
  }

  .background-gradient::before {
    inset: -42%;
    filter: blur(150px);
  }

  .background-logo {
    top: 40%;
    left: 50%;
    width: 100vw;
    opacity: 1;
    filter: brightness(1.35) contrast(1.15)
      drop-shadow(0 0 0.8px rgba(255, 255, 255, 0.22));
  }

  .content {
    gap: 24px;
  }

  .brand-logo {
    width: min(168px, 46vw);
    max-width: none;
  }

  .copy {
    gap: 9px;
    max-width: 326px;
  }

  h1 {
    font-size: clamp(24px, 7vw, 30px);
    line-height: 1.12;
  }

  p {
    max-width: 315px;
    font-size: clamp(15px, 4.15vw, 16px);
    line-height: 1.28;
  }

  .tagline {
    max-width: 100%;
    font-size: clamp(22px, 6.35vw, 25px);
    line-height: 1.15;
    white-space: nowrap;
  }
}

@media (max-width: 380px) {
  .coming-soon {
    padding-inline: 20px;
  }

  .content {
    gap: 22px;
  }

  .brand-logo {
    width: min(156px, 44vw);
  }

  .background-logo {
    top: 40%;
  }

  h1 {
    font-size: clamp(23px, 7vw, 28px);
  }

  .tagline {
    font-size: clamp(20px, 6.15vw, 23px);
  }
}

@media (max-width: 340px) {
  .tagline {
    white-space: normal;
  }
}