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

:root {

	color-scheme: light dark;
	--index: calc(1vw + 1vh);
	--transition-cursor: 2s cubic-bezier(.05, .5, 0, 1);
	--transition: 1.25s cubic-bezier(.2, .5, 0, 1);

	--light-color: #f5f5f5;
	--dark-color: #151515;

	--light-border: rgb(255 255 255 / .09);
	--dark-border: rgb(0 0 0 / .09);

	--light-hover: rgb(255 255 255 / .05);
	--dark-hover: rgb(0 0 0 / .05);

	--light-step: rgb(255 255 255 / .025);
	--dark-step: rgb(0 0 0 / .025);

}

@font-face {
	font-family: arsenal_f;
	src: url(../fonts/arsenal-regular.woff2);
}

body {
	font-family: arsenal_f;
	background-color: light-dark(var(--light-color), var(--dark-color));
	height:100vh;
}

.preloader {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background:  var(--tg-theme-bg-color); /* Фон прелоадера */
	display: flex;
	justify-content: center;
	align-items: center;
	z-index: 1111; /* Убедитесь, что прелоадер поверх всего */
}

/* Контейнер для логотипа */
.logo-container {
	text-align: center;
}

/* Стили для логотипа */
.logo {
	width: 300px; /* Размер логотипа */
	height: 300px;
	animation: spin 3s linear infinite; /* Анимация вращения */
}

/* Анимация вращения */
@keyframes spin {
	0% {
		transform: rotate(0deg);
	}
	100% {
		transform: rotate(360deg);
	}
}
.magic-list{
	display: none;
}
.preloader {
	transition: opacity 0.5s ease, visibility 0.5s ease;
}

.magic-list {
	font-size: calc(var(--index) * 2.75);
	padding: calc(var(--index) * 2.75);
}

.magic-list__item {
	cursor: none;
	color: light-dark(var(--dark-color), var(--light-color));
	text-decoration: none;
	display: block;
	line-height: .9;
	padding: calc(var(--index) * 3) calc(var(--index) * 7.5);
	border-bottom: 1px solid light-dark(var(--dark-border), var(--light-border));
	transition: background-color var(--transition);
	counter-increment: my-counter;
}

.magic-list__item:first-child {
	border-top: 1.5px solid light-dark(var(--dark-border), var(--light-border));
}

.magic-list__item:nth-child(even) {
	background-color: light-dark(var(--dark-step), var(--light-step));
}

.magic-list__item::before {
	content: '(' counter(my-counter, decimal-leading-zero) ')';
	position: absolute;
	margin-left: calc(var(--index) * -2.25);
	margin-top: calc(var(--index) / 1);
	font-size: calc(var(--index) * .95);
	letter-spacing: .5px;
	transition: transform var(--transition);
	will-change: transform;

}

.magic-list__item:hover {
	background-color: light-dark(var(--dark-hover), var(--light-hover));
}

.magic-list__item:hover .cursor {
	opacity: 1;
}

.magic-list__header {
	transition: transform var(--transition);
	will-change: transform;
	width: min-content;
}

.cursor {
	--width: calc(var(--index) * 22);
	--height: calc(var(--index) * 14);
	width: var(--width);
	height: var(--height);
	position: fixed;
	opacity: 0;
	transform: translate3d(var(--move-x), var(--move-y), 0);
	top: calc(var(--height) * -.5);
	left: calc(var(--width) * -.5);
	transition: transform var(--transition-cursor), opacity 1s ease;
	will-change: transform;
	z-index: -1;
	border: 6.5px solid rgba(255 255 255 / .3);
	border-image: linear-gradient(to right, #a830d5 0%, #3a4ed5 100%) 1;
	overflow: hidden;
}

.cursor__image {
	--cursor-transform: translate3d(calc(var(--move-x) / -5), calc(var(--move-y) / -5), 0);
	position: relative;
	width: calc(var(--width) * 1.5);
	height: calc(var(--height) * 1.5);
	top: calc(var(--height) * -.0);
	left: calc(var(--width) * -.);
	background-size: cover;
	background-position: center;
	transform: var(--cursor-transform) scale(1.5);
	transition: transform var(--transition-cursor);
	will-change: transform;
}

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

.item-bg {
	position: fixed;
	inset: 0;
	background-position: center;
	background-size: cover;
	z-index: -2;
	opacity: 0;
	transition: opacity .5s ease;
}
.magic-list__item:hover .item-bg {
	opacity: .1;
}

.magic-list{
	display: none;
}