.preloader_container {
    position: fixed;
    top: 0;
    left: 0;
    flex-direction: column;
    align-items: center;
    justify-content: space-evenly;
    background: url(../images/bg.jpg) #060211;
    background-size: cover;
    background-position: center;
    width: 100%;
    height: 100%;
    overflow: hidden;
    padding: 70px 0;
    box-sizing: border-box;
    z-index: 9999;
    display: flex;
}

.animation {
	width: 238px;
	height: 238px;
}
.preload_content {
	position: relative;
	width: 100%;
	height: 100%;
}
@keyframes shinePulse {
	0%, 100% { transform: scale(1) }
	50% { transform: scale(0.85) }
}
@keyframes starPulse {
	0%, 100% { transform: scale(1) }
	50% { transform: scale(1.15) }
}
@keyframes letterJump {
	0%, 20%, 100% { transform: translateY(0) }
	7% { transform: translateY(10px) }
	14% { transform: translateY(-20px) }
}
@keyframes manMove {
	0%, 100% { transform: translate(0, 0) }
	50% { transform: translate(10px, -10px) }
}

.item {
	position: absolute;
	top: 0;
	left: 0;
	transition-timing-function: ease-in-out;
}
.mask {
	border-radius: 50%;
	overflow: hidden;
	width: 238px;
	height: 238px;
	max-width: 238px;
	max-height: 238px;
	transform: translateZ(0);
}
.name {
	top: 100%;
	left: 50%;
}
.bg-shine {
	width: 238px;
	height: 238px;
	max-width: 238px;
	max-height: 238px;
	background: #c86edb;
	animation: shinePulse 3s ease-in-out 0s infinite reverse;
	border-radius: 50%;
	box-shadow: 0 0 100px #8e46ff;
}
.bg-circle {
	width: 238px;
	height: 238px;
	background: linear-gradient(135deg, #b172ff, #8e46ff);
	border-radius: 300px;
}
.bg {
	background-image: url('../images/sprite.webp');
}
.bg-l {
	top: -20px;
	left: -129px;
	width: 63px; height: 96px;
	background-position: -401px -1px;
	animation: letterJump 4s ease-in-out 0.5s infinite;
}
.bg-u {
	top: 8px;
	left: -81px;
	width: 56px; height: 67px;
	background-position: -401px -271px;
	animation: letterJump 4s ease-in-out 0.6s infinite;
}
.bg-c {
	top: -32px;
	left: -33px;
	filter: drop-shadow(0 -3px 5px #2f165866);
	width: 62px; height: 109px;
	background-position: -328px -99px;
	animation: letterJump 4s ease-in-out 0.7s infinite;
}
.bg-k {
	top: 1px;
	left: 29px;
	width: 54px; height: 74px;
	background-position: -401px -195px;
	animation: letterJump 4s ease-in-out 0.8s infinite;
}
.bg-y {
	top: -20px;
	left: 73px;
	width: 70px; height: 96px;
	background-position: -328px -210px;
	animation: letterJump 4s ease-in-out 0.9s infinite;
}
.bg-j {
	top: 80px;
	left: -87px;
	width: 61px; height: 94px;
	background-position: -401px -99px;
	animation: letterJump 4s ease-in-out 0.6s infinite;
}
.bg-e {
	top: 93px;
	left: -24px;
	width: 51px; height: 72px;
	background-position: -328px -308px;
	animation: letterJump 4s ease-in-out 0.75s infinite;
}
.bg-t {
	top: 81px;
	left: 22px;
	width: 71px; height: 96px;
	background-position: -328px -1px;
	animation: letterJump 4s ease-in-out 0.9s infinite;
}
.bg-star {
	top: -10px;
	left: -10px;
	width: 47px; height: 51px;
	background-position: -401px -340px;
	animation: starPulse 3s ease-in-out 0s infinite;
}
.bg-star-2 {
	top: 140px;
	left: 208px;
}
.bg-man {
	top: -18%;
	left: -25%;
	width: 325px; height: 397px;
	background-position: -1px -1px;
	animation: manMove 1.5s ease-in-out 0s infinite;
}
.middle {
	margin-top: 50px;
	height: 363px;
	transform: scale(0.85);
}
@media (max-width: 600px) or (max-height: 600px) {
	.middle {
		transform: scale(0.75);
	}
}
@media (max-width: 450px) or (max-height: 450px) {
	.middle {
		transform: scale(0.66);
	}
}
@media (max-height: 570px) {
	.logo {
		display: none;
	}
	.container {
		justify-content: center;
		padding: 30px 0;
	}
}
@media (max-height: 475px) {
	.progress {
		display: none;
	}
}
.progress {
    width: 280px;
    max-width: calc(100% - 30px);
    height: 18px;
    border-radius: 9px;
    margin: 0px -30px 0;
    position: relative;
}
.progress__value, .progress__line {
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border-radius: 5px;
}
.progress__value {
	top: 50%; /* Центрируем по вертикали */
	left: 50%; /* Центрируем по горизонтали */
	transform: translate(-50%, -50%); /* Центрируем по вертикали и горизонтали */
	background: none; /* Убираем фон */
	color: white;
	font-family: sans-serif;
	font-size: 16px;
	text-align: center;
	z-index: 1;
	font-family: Manrope;
    font-size: 12px;
    font-style: normal;
    font-weight: 600;
}
.progress, .progress__line {
	background: linear-gradient(90deg, #ff9c00, #ff8500);
}
.progress__line {
	width: 0%;
	transition: 8s;
}
.progress[progress="0"] .progress__line {
	width: 33%;
	transition: 5s;
}
.progress[progress="1"] .progress__line {
	width: 66%;
	transition: 3s;
}
.progress[progress="2"] .progress__line {
	width: 99%;
	transition: 1s;
}
.progress[progress="3"] .progress__line {
	width: 100%;
	transition: 0.3s;
}