* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
:root {
  --black: #fafafa;
  --index: calc(1vh + 1vw);
  --transition: 1.25s cubic-bezier(0.2, 0.5, 0, 1);
  --transition-cursor: 1.4s cubic-bezier(0.05, 0.5, 0, 1);
}
@font-face {
  font-family: arsenal_f;
  src: url(../fonts/arsenal-regular.woff2);
}

.magic-list {
  font-family: arsenal_f, sans-serif;
  font-size: calc(var(--index) * 1.4);
  /* padding: calc(var(--index) * 3); */
}
@media (max-width: 600px) {
  .magic-list {
    font-size: 20px;
  }
}
.magic-list__item {
  cursor: none;
  color: var(--black);
  text-decoration: none;
  display: block;
  line-height: 0.9;
  padding: calc(var(--index) * 1.4) calc(var(--index) * 7);
  border-bottom: 1px solid #3a3a3a;
  counter-increment: my-counter;
}
.magic-list__item:first-child {
  border-top: 1.5px solid #3a3a3a;
}
.magic-list__header {
  text-align: center;
  transition: transform var(--transition);
  will-change: transform;
}

.magic-list__header span {
  font-size: calc(var(--index) * 1.1);
}
.magic-list__item::before {
  content: "(0" counter(my-counter) ")";
  position: absolute;
  font-size: calc(var(--index) * 0.95);
  margin-left: calc(var(--index) * -2.25);
  margin-top: calc(var(--index) / 5);
  letter-spacing: 0.75px;
  transition: transform var(--transition);
  transition-delay: 0.04s;
  will-change: transform;
}
@media (max-width: 600px) {
  .magic-list__item::before {
    margin-top: calc(var(--index) / 2.3);
  }
}
.magic-list__item:hover .magic-list__header,
.magic-list__item:hover::before {
  transform: translate3d(calc(var(--index) * -5), 0, 0);
}
.magic-list__item:hover .magic-list__header {
  text-align: start;
}
.cursor {
  --width: calc(var(--index) * 22);
  --height: calc(var(--index) * 14);
  position: fixed;
  top: calc(var(--height) * -0.5);
  left: calc(var(--width) * -0.5);
  width: var(--width);
  overflow: hidden;
  transform: translate3d(var(--move-x), var(--move-y), 0);
  transition: transform var(--transition-cursor), height 1s ease;
  z-index: -1;
  will-change: transform;
  height: 0;
}
.cursor__image {
  position: relative;
  width: calc(var(--width) * 2);
  height: calc(var(--height) * 2);
  top: calc(var(--height) * -0.2);
  left: calc(var(--width) * -0.25);
  background-size: contain;
  background-position: center;
  transform: translate3d(calc(var(--move-x) / -5), calc(var(--move-y) / -5), 0)
    scale(1.5);
  transition: transform var(--transition-cursor);
  will-change: transform;
}
.magic-list__item:hover .cursor {
  height: var(--height);
}
.magic-list__item:hover .cursor__image {
  transform: translate3d(calc(var(--move-x) / -5), calc(var(--move-y) / -5), 0)
    scale(1);
}