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

:root {
    --index: calc(1vh + 1vw);
    --black: #141414;
    --transition: 1.25s cubic-bezier(.2, .5, 0, 1);
    --transition-cursor: 2s cubic-bezier(.05, .5, 0, 1);
}
@font-face {
    font-family: arsenal_f;
    src: url(../fonts/arsenal-regular.woff2);
}

body {
    background-color: #f0f0f0;
}
.magic-list {
    font-family: arsenal_f, sans-serif;
    font-size: calc(var(--index) * 2.75);
    padding: calc(var(--index) * 2.75);
}

.magic-list__item {
    cursor: none;
    color: var(--black);
    text-decoration: none;
    display: block;
    line-height: 0.9;
    padding: calc(var(--index) * 3) calc(var(--index) * 7.5); 
    border-bottom: 1px solid rgb(0 0 0 / .09);
    counter-increment: my-counter;
}
.magic-list__item:first-child{
    border-top: 1px solid var(--black);
}
.magic-list__header {
    width: min-content;
    transition: transform var(--transition);
    will-change: transform;
}

.magic-list__item::before {
    content: '(0' counter(my-counter) ')';
    position: absolute;
    font-size: calc(var(--index) * .95);
    margin-left: calc(var(--index) * -2.25);
    margin-top: calc(var(--index) / 2);
    letter-spacing: 0.5px;
    transition: transform var(--transition);
    transition-delay: .025s;
    will-change: transform;
}

.magic-list__item:hover .magic-list__header , .magic-list__item:hover::before{
    transform: translate3d(calc(var(--index) * -5), 0, 0);
}
.cursor {
    --width: calc(var(--index) * 22);
    --height: calc(var(--index) * 14);
    position: fixed;
    width: var(--width);
    height: 0;
    top: calc(var(--height) * -.5);
    left: calc(var(--width) * -.5);
    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;
    border-radius: 10px;
}
.magic-list__item:hover .cursor {
    height: var(--height);
}
.cursor__image{
    --cursor-transform: translate3d(calc(var(--move-x) / -5), calc(var(--move-y) / -5), 0);
    position: relative;
    width: calc(var(--width) * 2);
    height: calc(var(--height) * 2); 
    top: calc(var(--height) * -.10);
    left: calc(var(--width) * -.25);
    background-size: contain;
    background-position: center;
    transform: var(--cursor-transform) scale(1.5);
    transition: transform var(--transition-cursor);
}

.magic-list__item:hover .cursor__image {
    transform: var(--cursor-transform) scale(1);
}

/* --- Background --- */

html, body {
    width: 100vw;
    height:100vh;
  }
  
  body {
      background: linear-gradient(-45deg, #ef772d, #b61f1f, #154dbe, #14c1fa);
      background-size: 400% 400%;
      animation: gradient 15s ease infinite;
  }
  
  @keyframes gradient {
      0% {
          background-position: 0% 50%;
      }
      50% {
          background-position: 100% 50%;
      }
      100% {
          background-position: 0% 50%;
      }
  }