.aviator {
	height: 100%;
	position: relative;
	overflow: hidden;
	background-color: #000;
	isolation: isolate;
	container-name: aviator;
	container-type: inline-size;
}
.aviator[data-stage="1"] {
	--aviator-stage-color: #34b4ff;
}
.aviator[data-stage="2"] {
	--aviator-stage-color: #913ef8;
}
.aviator[data-stage="3"] {
	--aviator-stage-color: #c017b4;
}
.aviator__body {
	height: 100%;
}
.aviator__back {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: -1;
}
.aviator__sun-wrapper,
.aviator__blur {
	position: absolute;
	left: 0;
}
.aviator__sun-wrapper {
    bottom: 0;
    transform: translate(-50%, 50%);
    width: 6000px;
    height: 6000px;
}
.aviator__sun {
	width: 100%;
	height: 100%;
	animation: aviator-rotate 40s linear infinite paused;

}
.aviator__blur {
	top: 0;
	width: 100%;
	height: 100%;
	background-color: var(--aviator-stage-color);
	-webkit-mask: url('../images/aviator/blur-low.svg') center / 100% 100% no-repeat;
	mask: url('../images/aviator/blur-low.svg') center / 100% 100% no-repeat;
	visibility: hidden;
	transition: visibility 2s, background-color 1s;
}
.aviator[data-state="fly"] .aviator__blur {
	visibility: visible;
}
.aviator__dots {
	position: absolute;
	overflow: hidden;
	display: none;
}
.aviator[data-state="fly"] .aviator__dots {
	display: block;
}
.aviator__dots::before {
	animation-timing-function: linear;
	animation-iteration-count: infinite;
	animation-duration: 20s;
	animation-delay: 8s;
}
.aviator__dots_h {
	left: 30px;
	bottom: 0;
	width: 100%;
	height: 30px;
	border-top: 2px solid #271e20;
}
.aviator__dots_v {
	left: 0;
	bottom: 30px;
	width: 30px;
	height: 100%;
	border-right: 2px solid #271e20;
}
.aviator__dots_h::before {
	--dot-size: calc(1px * var(--aviator-w) / 10);
	content: '';
	height: 100%;
	width: 200%;
	display: block;
	background: radial-gradient(#fff 2px, transparent 0) left center / var(--dot-size) var(--dot-size);
	animation-name: aviator-translate-x;
}
.aviator__dots_v::before {
	--dot-size: calc(1px * var(--aviator-h) / 10);
	content: '';
	width: 100%;
	height: 200%;
	display: block;
	background: radial-gradient(#34b4ff 2px, transparent 0) center top / var(--dot-size) var(--dot-size);
	position: absolute;
	bottom: 0;
	animation-name: aviator-translate-y;
}
@keyframes aviator-translate-x {
	to {
		transform: translate3d(-50%, 0, 0);
	}
}
@keyframes aviator-translate-y {
	to {
		transform: translate3d(0, 50%, 0);
	}
}
@keyframes aviator-rotate {
	to {
		transform: rotate(360deg);
	}
}
@container (min-width: 480px) {
	.aviator__dots::before {
		animation-duration: 35s;
	}
}
@container (min-width: 600px) {
	.aviator__dots::before {
		animation-duration: 50s;
	}
}

/* aviator-plane */
.aviator-plane {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	display: none;
}
.aviator[data-state="loading"] .aviator-plane,
.aviator[data-state="fly"] .aviator-plane,
.aviator[data-state="flyOut"] .aviator-plane {
	display: block;
}
.aviator-plane__img-holder {
	--plane-w: 100;
	--plane-h: 49.333333333;
	--end1-x: calc(var(--aviator-w) * 89.5 / 100);
	--end2-x: calc((var(--aviator-w) - var(--plane-w)) * 1px * 97 / 100);
	--end1-y: calc(var(--aviator-h) * 1 / 100);
	--end2-y: calc((var(--aviator-h) - var(--plane-h)) * 1px * 50 / 100);
	--p0x: 9;
	--p0y: calc(var(--aviator-h) - 22);
	--p1x: calc(var(--end1-x) / 2);
	--p1y: calc(var(--aviator-h) * 83 / 100);
	--p2x: calc(var(--end1-x) * 83 / 100);
	--p2y: calc(var(--aviator-h) / 2);
	--p3x: var(--end1-x);
	--p3y: var(--end1-y);
	--q1x: calc(3 * var(--p1x) - 3 * var(--p2x) + var(--p3x));
	--q1y: calc(3 * var(--p1y) - 3 * var(--p2y) + var(--p3y));
	--q2x: calc(3 * var(--p2x) - 2 * var(--p3x));
	--q2y: calc(3 * var(--p2y) - 2 * var(--p3y));
	position: absolute;
	top: 0;
	left: 0;
	width: calc(var(--plane-w) * 1px);
	height: calc(var(--plane-h) * 1px);
	transform: translate3d(calc(1px * var(--p0x)), calc(1px * (var(--p0y) - var(--plane-h))), 0px);
}
.aviator[data-state="fly"] .aviator-plane__img-holder,
.aviator[data-state="flyOut"] .aviator-plane__img-holder {
	animation-name: aviator-fly-1, aviator-fly-2, aviator-fly-3, aviator-fly-4;
	animation-duration: 8s, 8s, 8s, 8s;
	animation-delay: 0s, 0s, 0s, 8s;
	animation-timing-function: cubic-bezier(.5,0.5,.5,1);
	animation-iteration-count: 1, 1, 1, infinite;
	animation-fill-mode: none, none, none, forwards;
}
.aviator-plane__img {
	width: 100%;
	height: 100%;
	display: block;
	background: url('../images/aviator/plane.svg') 0 0 / auto 100% no-repeat;
	animation: aviator-plane-propeller 0.4s steps(3) infinite;
}
.aviator[data-state="flyOut"] .aviator-plane {
	transform: translate(calc(var(--aviator-w) * 1px), calc(var(--aviator-h) * -0.5px));
	visibility: hidden;
	transition: transform .5s linear, visibility .5s linear;
}
@keyframes aviator-plane-propeller {
	100% {
		background-position: calc(var(--plane-w) * -3px) 0;
	}
}
@keyframes aviator-fly-1 {
	from {
		transform: translate3d(calc(1px * var(--p0x)), calc(1px * (var(--p0y) - var(--plane-h))), 0px);
	}
	to { transform: translate3d(calc(1px * var(--q1x)), calc(1px * (var(--q1y) - var(--plane-h))), 0px); }
  }
  @keyframes aviator-fly-2 {
	to {
		transform: translate3d(calc(1px * (var(--q2x) - var(--plane-w))), calc(1px * var(--q2y)), 0px);
	}
  }
  @keyframes aviator-fly-3 {
	to {
		transform: translate3d(calc(1px * (var(--p3x) - var(--plane-w))), calc(1px * var(--p3y)), 0px);
	}
  }
@keyframes aviator-fly-4 {
	0% {
		transform: translate3d(calc(1px * (var(--p3x) - var(--plane-w))), calc(1px * var(--p3y)), 0px);
	}
	50% {
		transform: translate3d(var(--end2-x), var(--end2-y), 0);
	}
	100% {
		transform: translate3d(calc(1px * (var(--p3x) - var(--plane-w))), calc(1px * var(--p3y)), 0px);
	}
}
@media (min-width: 640px) {
	.aviator-plane__img-holder {
		--plane-w: 150;
		--plane-h: 74;
		--end2-y: calc((var(--aviator-h) - var(--plane-h)) * 1px * 28 / 100);
	}
}

/* aviator-preloader */
.aviator-preloader {
	height: 100%;
	text-align: center;
	padding: 30px;
	box-sizing: border-box;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	display: none;
}
.aviator[data-state="loading"] .aviator-preloader {
	display: flex;
}
.aviator-preloader__propeller {
	animation: aviator-rotate 1400ms linear infinite;
	width: min(20%, 120px);
	max-width: 100%;
	height: auto;
}
.aviator-preloader__text {
	color: #fff;
	text-transform: uppercase;
	font-size: min(36px, 3.57143cqw + 7.14286px);
	margin-top: 10px;
	margin-bottom: 20px;
}
.aviator-preloader__progress {
	width: 200px;
	height: 6px;
	border-radius: 6px;
	background-color: #262830;
}
.aviator-preloader__progress::before {
	content: '';
	height: 100%;
	display: block;
	border-radius: inherit;
	background-color: #e50539;
	animation: linear forwards aviator-progress;
	animation-duration: inherit;
}
@keyframes aviator-progress {
	from {
		width: 100%;
	}
	to {
		width: 0%;
	}
}
@supports not (font-size: min(1px, 2px)) {
	@media (min-width: 600px) {
		.aviator-preloader__propeller {
			width: 120px;
		}
	}
}

/* aviator-svg */
.aviator-svg {
	position: absolute;
	bottom: 30px;
	left: 30px;
	width: 100%;
	height: 100%;
}
.aviator:not([data-state="fly"]) .aviator-svg {
	display: none;
}

/* aviator-score */
.aviator-score {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	color: #fff;
}
.aviator-score__inner {
	position: relative;
}
.aviator-score__fly-out {
	display: none;
	text-transform: uppercase;
	font-size: min(36px, 3.57143cqw + 7.14286px);
	position: absolute;
	bottom: 100%;
	left: 50%;
	transform: translateX(-50%);
}
.aviator[data-state="flyOut"] .aviator-score__fly-out {
	display: block;
}
.aviator-score__value {
	font-weight: 700;
	font-size: min(76px, 10.7143cqw + 11.7143px);
	letter-spacing: .05em;
}
.aviator:not([data-state="fly"]):not([data-state="flyOut"]) .aviator-score {
	display: none;
}
.aviator[data-state="flyOut"] .aviator-score__value {
	color: #d0021b;
}

/* fallback */
@supports not (font-size: min(1px, 2px)) {
	.aviator-score__fly-out,
	.aviator-preloader__text {
		font-size: 20px;
	}
	.aviator-score__value {
		font-size: 46px;
	}
	@media (min-width: 480px) {
		.aviator-score__fly-out,
		.aviator-preloader__text {
			font-size: 30px;
		}
		.aviator-score__value {
			font-size: 60px;
		}
	}
	@media (min-width: 600px) {
		.aviator-score__fly-out,
		.aviator-preloader__text {
			font-size: 36px;
		}
		.aviator-score__value {
			font-size: 76px;
		}
	}
}