/* Page */

:root,
* {
  font-family: "Overused Grotesk", "Helvetica Neue", Helvetica, Arial, sans-serif;

  --black: #090a10;
  --white: #f6f5ef;
  --white50: #f6f5efA8;

  -ms-overflow-style: none;
  scrollbar-width: none;

  cursor: none;
}

body {
  background-color: var(--black);
  color: var(--white);

  margin: 0;
  padding: 0;
  user-select: none;
}

::selection {
  background-color: var(--white);
  color: var(--black);
}

::-webkit-scrollbar {
  display: none;
}

*:not(.hero-title, .hero-title *, body, header, .hero, :root, .cursor) {
  animation: waitFade 3000ms cubic-bezier(0.165, 0.84, 0.44, 1);
}

@keyframes waitFade {
  0%,
  66% {
    opacity: 0;
  }
}

@keyframes cursorShow {
  0%,
  80% {
    height: 0;
    width: 0;
  }
}

/* Header & Navigation */

header {
  display: flex;
  flex-direction: column;
  row-gap: 2rem;

  padding: 2rem 8rem;
  height: calc(100vh - 64px);
  box-sizing: border-box;
}

nav {
  color: var(--white);

  margin: 0;
  padding: 1rem;

  border-radius: 999px;

  position: sticky;
  top: 2rem;

  transition:
    color 300ms ease,
    background-color 300ms ease,
    opacity 300ms ease;
}

.logo {
  display: flex;
  align-items: center;

  column-gap: 1rem;

  transition: column-gap 2000ms cubic-bezier(0.19, 1, 0.22, 1);
}

.logo * {
  transition:
    width 300ms ease,
    filter 1000ms cubic-bezier(0.19, 1, 0.22, 1),
    scale 1000ms cubic-bezier(0.19, 1, 0.22, 1),
    opacity 1000ms cubic-bezier(0.19, 1, 0.22, 1);
}

.logo svg {
  height: 3rem;
  width: 3rem;

  overflow: hidden;
}

.logo span {
  font-size: 1.8rem;
  font-weight: 600;

  overflow: hidden;
}

/* Hero Section */

.hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  row-gap: 3rem;
  height: 100%;
}

.hero-title {
  width: 65%;

  font-size: 6rem;
  font-weight: 600;

  text-wrap: balance;
  text-align: center;

  line-height: 90%;

  color: var(--white50);

  margin: 0;
  margin-bottom: 2rem;

  animation: blur 1500ms cubic-bezier(0.19, 1, 0.22, 1);
}

@keyframes blur {
  0%,
  50% {
    scale: 1.3;
    filter: blur(50px);
    opacity: 0;
  }
}

.hero-title .hero-title-accent {
  color: var(--white);
}

.hero-body {
  width: 65%;

  font-size: 1.5rem;
  font-weight: 350;

  text-wrap: balance;
  text-align: center;
}

.hero-cta {
  background-color: transparent;
  outline: none;
  border: none;
  padding: 0;
  margin: 0;

  font-size: 1.5rem;
  color: var(--white);

  font-weight: 600;
}

/* Footer */

footer {
  background-color: var(--white);
  color: var(--black);

  padding: 4rem 8rem;

  display: flex;
  flex-direction: column;
  justify-content: flex-end;

  row-gap: 4rem;

  height: calc(100vh + 64px);
  box-sizing: border-box;
}

footer .tagline {
  font-size: 2rem;
  font-weight: 600;
}

footer .copyright {
  font-size: 1.2rem;
  font-weight: 350;
}

footer ::selection {
  background-color: var(--black);
  color: var(--white);
}

/* Cursor */

.cursor {
  height: 6rem;
  width: 6rem;

  backdrop-filter: invert(100%);

  border-radius: 3rem;

  position: absolute;
  top: 0;
  left: 0;

  transform: translate(-50%, -50%);

  animation: cursorShow 2500ms cubic-bezier(0.165, 0.84, 0.44, 1);

  transition:
    width 300ms cubic-bezier(0.165, 0.84, 0.44, 1),
    height 300ms cubic-bezier(0.165, 0.84, 0.44, 1);
}