:root {
    --black: #d89a35;
    --index: calc(1vw + 1vh);
    --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: #272121;
}
.magic-list {
	font-family: arsenal_f, sans-serif;
	font-size: calc(var(--index) * 2);
	padding: calc(var(--index) * 2);
	background-color: #272121;
}
.magic-list__item {
	cursor: pointer;
	color: var(--black);
	text-decoration: none;
	display: block;
	line-height: .9;
	padding: calc(var(--index) * 1) calc(var(--index) * 7.5);
	border-bottom: 1px solid rgba(192, 154, 2, 0.308);
	counter-increment: my-counter;
}
.magic-list__item:last-child {
    border-bottom: none;
}
.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: .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;
}
.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) * -.4);
	left: calc(var(--width) * -.25);
	background-size: cover;
	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);
}