* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #050505;
  color: white;
  font-family: 'Inter', sans-serif;
}

canvas {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
}

.overlay {
  position: absolute;
  inset: 0;

  display: flex;
  justify-content: center;
  align-items: center;

  pointer-events: none;
  z-index: 2;
}

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

  text-align: center;

  gap: 24px;

  pointer-events: auto;
}

/* ----------------------------- */
/* NAME */
/* ----------------------------- */

.hero-name {
  font-family: 'IBM Plex Mono', monospace;

  font-size: 0.8rem;

  letter-spacing: 0.38em;

  text-transform: uppercase;

  color: #72f7e7;

  opacity: 0.95;

  margin-bottom: -6px;
}

/* ----------------------------- */
/* TITLE */
/* ----------------------------- */

.hero h1 {
  font-size: clamp(4rem, 9vw, 7rem);

  font-weight: 800;

  line-height: 0.9;

  letter-spacing: -0.05em;

  transition: color 0.6s, opacity 0.25s ease;
}

/* ----------------------------- */

.hero p {
  width: min(600px, 90vw);

  color: rgba(255, 255, 255, 0.72);

  line-height: 1.8;

  font-size: 1rem;
}

/* ----------------------------- */
/* SIDE LABELS */
/* ----------------------------- */

.left-label,
.right-label {
  position: absolute;

  display: flex;
  flex-direction: column;

  gap: 14px;

  font-family: 'IBM Plex Mono', monospace;

  font-size: 0.7rem;

  letter-spacing: 0.12em;

  text-transform: uppercase;

  color: rgba(255, 255, 255, 0.28);
}

.left-label {
  left: 4vw;

  align-items: flex-start;
}

.right-label {
  right: 4vw;

  align-items: flex-end;
}

/* ----------------------------- */
/* BOTTOM SOCIAL NAV */
/* ----------------------------- */

nav {
  position: absolute;

  left: 50%;
  bottom: 42px;

  transform: translateX(-50%);

  display: flex;
  align-items: center;
  justify-content: center;

  gap: 44px;

  z-index: 10;
}

nav a {
  display: flex;
  align-items: center;
  gap: 10px;

  color: rgba(255, 255, 255, 0.48);

  text-decoration: none;

  font-size: 0.82rem;

  letter-spacing: 0.18em;

  text-transform: uppercase;

  transition: all 0.3s ease;
}

nav a i {
  font-size: 1rem;

  opacity: 0.75;

  transition: all 0.3s ease;
}

nav a:hover {
  color: white;

  transform: translateY(-2px);
}

nav a:hover i {
  opacity: 1;

  transform: scale(1.15);
}

/* ----------------------------- */
/* MOBILE */
/* ----------------------------- */

@media (max-width: 900px) {
  .left-label,
  .right-label {
    display: none;
  }

  .overlay {
    align-items: flex-start;
    padding-top: 10vh;
  }

  .hero {
    width: min(92vw, 420px);
    gap: 18px;
  }

  .hero-name {
    font-size: 0.72rem;
    letter-spacing: 0.34em;
    margin-bottom: 0;
  }

  .hero h1 {
    font-size: clamp(3.3rem, 16vw, 4.9rem);

    line-height: 0.9;

    max-width: 100%;

    word-break: keep-all;

    overflow-wrap: normal;
  }

  .hero p {
    width: 100%;
    max-width: 330px;

    font-size: 1rem;

    line-height: 1.6;
  }

  nav {
    left: 50%;
    transform: translateX(-50%);

    width: 100%;
    max-width: 360px;

    bottom: max(42px, env(safe-area-inset-bottom));

    display: grid;

    grid-template-columns: repeat(2, 1fr);

    row-gap: 22px;
    column-gap: 14px;

    justify-items: center;
    align-items: center;
  }

  nav a {
    justify-content: center;

    gap: 8px;

    font-size: 0.8rem;

    letter-spacing: 0.12em;
  }

  nav a i {
    font-size: 1rem;
  }
}