@font-face {
  font-family: "Aeonik";
  src: url("./aeoniktrial-light.otf") format("opentype");
  font-weight: 300;
  font-style: normal;
}
@font-face {
  font-family: "Aeonik";
  src: url("./aeoniktrial-regular.otf") format("opentype");
  font-weight: 400 500;
  font-style: normal;
}
@font-face {
  font-family: "Aeonik";
  src: url("./aeoniktrial-bold.otf") format("opentype");
  font-weight: 600 700;
  font-style: normal;
}

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

html,
body {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

body {
  font-family: "Aeonik", sans-serif;
  background-color: #162be0;
  display: flex;
  justify-content: center;
  align-items: center;
}

canvas {
  display: block;
}

.header {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  user-select: none;
  z-index: 2;
}

.header p {
  color: #fff;
  text-transform: uppercase;
  font-weight: 400;
  font-size: clamp(17px, 0.99vw, 25.4px); /* ~17px on a 16" laptop, up to 25.4px on a monitor */
  margin-bottom: 1.5em;
}

.header h1 {
  color: #fff;
  text-align: center;
  font-size: clamp(171px, 9.9vw, 254px); /* ~171px on a 16" laptop, up to 254px on a monitor */
  font-weight: 400;
  line-height: 1.2;
  margin-bottom: 0.75em;
}

/* Hover the heading: an underline wipes in under each line LEFT->RIGHT ("Let's work" first, "together"
   a touch later); on unhover it retracts RIGHT->LEFT ("together" first, then "Let's work"). The IN
   delays live on :hover, the OUT delays on the base rule, so each direction sequences correctly. */
.hl-line {
  position: relative;
  display: inline-block;
  white-space: nowrap;
}
.hl-line::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0.04em; /* below the baseline -> a clear gap between the text and the underline */
  width: 100%;
  height: 0.05em;
  background: currentColor;
  /* wipe via clip-path (not scaleX) so the masked gap below keeps a FIXED position during the reveal */
  clip-path: inset(0 100% 0 0);
  transition: clip-path 1.3s cubic-bezier(0.22, 1, 0.36, 1); /* way slower wipe */
}
/* Break the underline around the "g" in "together!" (g spans ~22-36% of the line) so it never crosses it. */
.hl-line[data-line="1"]::after {
  -webkit-mask: linear-gradient(90deg, #000 0 19%, transparent 19% 39%, #000 39% 100%);
  mask: linear-gradient(90deg, #000 0 19%, transparent 19% 39%, #000 39% 100%);
}
.hl-line[data-line="0"]::after { transition-delay: 0.4s; }
.hl-line[data-line="1"]::after { transition-delay: 0s; }
.header h1:hover .hl-line::after { clip-path: inset(0 0 0 0); }
.header h1:hover .hl-line[data-line="0"]::after { transition-delay: 0s; }
.header h1:hover .hl-line[data-line="1"]::after { transition-delay: 0.22s; }

/* Per-letter roll (same effect as the site's roll links) — a few letters animate at a time. The box is
   a touch taller than 1em so descenders (g, y, p) aren't clipped. */
.rl {
  display: inline-block;
  overflow: hidden;
  height: 1.2em;
  line-height: 1.2;
  vertical-align: bottom;
}
.rl-inner {
  display: flex;
  flex-direction: column;
}
.rl-inner > span {
  display: block;
  height: 1.2em;
  line-height: 1.2;
}
.rl-inner.rolling {
  animation: letterRoll 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes letterRoll {
  to {
    transform: translateY(-50%);
  }
}

button {
  border: none;
  outline: none;
  padding: 1.5em 3em;
  text-transform: uppercase;
  font-weight: 500;
  background-color: #fff;
  border-radius: 2em;
  cursor: pointer;
}

/* Mobile: title 83px and kicker 16.8px (expressed in rem; root = 16px). */
@media (max-width: 812px) {
  .header h1 {
    font-size: 5.1875rem; /* 83px */
    white-space: nowrap; /* keep "Let's work" on one line (the <br/> handles "together!") */
  }

  .header p {
    font-size: 1.05rem; /* 16.8px */
  }
}