.magnetic-stage {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

.magnetic-stage::before {
  content: "01 / 02";
  position: absolute;
  right: var(--gutter);
  bottom: 28%;
  z-index: 2;
  padding-left: 64px;
  border-bottom: 1px solid rgba(121, 200, 66, .55);
  color: rgba(242, 244, 239, .46);
  font-size: 10px;
  line-height: 1.8;
}

.magnetic-stage::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: rgba(5, 5, 5, .36);
}

.magnetic-word {
  position: absolute;
  left: -16px;
  white-space: nowrap;
  color: transparent;
  font-size: 220px;
  font-weight: 700;
  line-height: .8;
  -webkit-text-stroke: 1px rgba(242, 244, 239, .14);
}

.magnetic-word:nth-child(1) {
  top: 10%;
}

.magnetic-word:nth-child(2) {
  top: 40%;
  left: 12%;
}

.magnetic-word:nth-child(3) {
  top: 70%;
  left: -4%;
}

.magnetic-char {
  display: inline-block;
  color: rgba(242, 244, 239, calc(.025 + var(--signal, 0) * .07));
  transform: translate3d(var(--mx, 0), var(--my, 0), 0);
  -webkit-text-stroke-color: rgba(242, 244, 239, calc(.12 + var(--signal, 0) * .14));
}

.magnetic-char.is-nearest {
  color: rgba(121, 200, 66, .14);
  -webkit-text-stroke-color: rgba(121, 200, 66, .82);
}

.magnetic-type .brand-stage::before {
  content: "Brand / Media / Digital";
  display: block;
  width: max-content;
  margin-bottom: 18px;
  color: var(--green);
  font-size: 10px;
  line-height: 1;
  text-transform: uppercase;
}

@media (max-width: 1100px) {
  .magnetic-word {
    font-size: 154px;
  }
}

@media (max-width: 720px) {
  .magnetic-stage::before {
    right: 18px;
    bottom: 22%;
  }

  .magnetic-word {
    font-size: 104px;
    opacity: .78;
  }

  .magnetic-word:nth-child(1) {
    top: 16%;
  }

  .magnetic-word:nth-child(2) {
    top: 42%;
    left: -30%;
  }

  .magnetic-word:nth-child(3) {
    top: 70%;
  }
}

@media (max-width: 370px) {
  .magnetic-word {
    font-size: 88px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .magnetic-char {
    transform: none !important;
  }
}