/* cкрыто всё кроме #quiz при загрузке */
.qq-hidden {
	display: none !important;
}

/* Контейнер полос (создаётся по клику) */
#quiz-stripes-container {
	position: fixed;
	inset: 0;
	width: 100%;
	height: 100%;
	z-index: 2147483650;
	pointer-events: none;
	overflow: hidden;
}

.quiz-stripe {
	position: absolute;
	left: 0;
	width: 100%;
	height: 25%;
	will-change: transform, opacity;
	backface-visibility: hidden;
	transform: translateX(-100%);
}
.quiz-stripe.s1 {
	top: 0%;
	background: #ffff;
}
.quiz-stripe.s2 {
	top: 25%;
	background: #f5f5f5;
}
.quiz-stripe.s3 {
	top: 50%;
	background: #ebebeb;
}
.quiz-stripe.s4 {
	top: 75%;
	background: #e0e0e0;
}

@keyframes slideInFromLeft {
	from {
		transform: translateX(-100%);
	}
	to {
		transform: translateX(0%);
	}
}
@keyframes slideInFromRight {
	from {
		transform: translateX(100%);
	}
	to {
		transform: translateX(0%);
	}
}
.slide-left {
	animation: slideInFromLeft 0.64s cubic-bezier(0.2, 0.9, 0.2, 1) forwards;
}
.slide-right {
	animation: slideInFromRight 0.64s cubic-bezier(0.2, 0.9, 0.2, 1) forwards;
}

@keyframes stripeExitUp {
	from {
		transform: translateY(0);
		opacity: 1;
	}
	to {
		transform: translateY(-120%);
		opacity: 0;
	}
}
.stripe-exit {
	animation: stripeExitUp 0.7s ease forwards;
}
.content-drop {
	position: relative;
	z-index: 2147483690;
	transform: translateY(-100%);
	will-change: transform, opacity;
	animation: contentDrop 7s cubic-bezier(0.16, 0.9, 0.2, 1) forwards;
}
@keyframes contentDrop {
	0% {
		transform: translateY(-100%);
		opacity: 0.98;
	}
	60% {
		transform: translateY(10px);
		opacity: 1;
	}
	100% {
		transform: translateY(0);
		opacity: 1;
	}
}

@media (prefers-reduced-motion: reduce) {
	.slide-left,
	.slide-right,
	.stripe-exit,
	.content-drop {
		animation-duration: 0.001s !important;
	}
}

.quiz-fade-out {
	transition: opacity 0.36s ease, transform 0.36s ease;
	opacity: 0;
	transform: translateY(-6px) scale(0.998);
	pointer-events: none;
}