#srs-page-intro-video {
	position: fixed;
	inset: 0;
	object-fit: cover;
	width: 100vw;
	height: 100vh;
	z-index: 9996;
	opacity: 0;
	animation: srsIntroOverlayIn 0.6s ease-out forwards, srsIntroOverlayOut 1.4s ease-in-out 2.5s forwards;
}

.srs-page-intro-blur,
#srs-page-intro-logo {
	transition: all 0.5s ease-in-out;
}

.srs-page-intro-blur {
	position: fixed;
	inset: 0;
	background: radial-gradient(circle at center, rgba(255, 215, 0, 0.12) 0%, rgba(255, 215, 0, 0) 40%);
	backdrop-filter: blur(4px);
	-webkit-backdrop-filter: blur(4px);
	z-index: 9997;
	pointer-events: none;
	opacity: 0;
	animation: srsIntroBlurIn 0.6s ease-out forwards, srsIntroBlurOut 1.4s ease-in-out 2.5s forwards;
}

#srs-page-intro-logo {
	position: fixed;
	left: 50%;
	transform: translate(-50%, -50%) scale(0.9);
	opacity: 0;
	z-index: 9999;
	animation: srsIntroLogoIn 0.6s ease-out forwards, srsIntroLogoOut 1.4s ease-in-out 2.5s forwards;
}

#srs-page-intro-logo img {
	width: 100%;
	max-width: 280px;
	height: auto;
	filter: none;
	display: block;
}

@media screen and (max-width: 768px) {
	#srs-page-intro-logo {
		top: 50%;
	}
}

@media screen and (min-width: 769px) {
	#srs-page-intro-logo {
		top: 45%;
	}
}

@keyframes srsIntroOverlayIn {
	to {
		opacity: 1;
	}
}

@keyframes srsIntroOverlayOut {
	to {
		opacity: 0;
		visibility: hidden;
	}
}

@keyframes srsIntroBlurIn {
	to {
		opacity: 1;
	}
}

@keyframes srsIntroBlurOut {
	to {
		opacity: 0;
		visibility: hidden;
	}
}

@keyframes srsIntroLogoIn {
	0% {
		transform: translate(-50%, -50%) scale(0.7);
		opacity: 0;
	}
	100% {
		transform: translate(-50%, -50%) scale(1);
		opacity: 1;
	}
}

@keyframes srsIntroLogoOut {
	to {
		opacity: 0;
		visibility: hidden;
	}
}

/* 4 projecteurs (coins) — ex-snippet Mandalooun « animation » */
.srs-page-projecteur {
	position: fixed;
	z-index: 9998;
	opacity: 0;
	pointer-events: none;
	filter: drop-shadow(0 0 80px rgba(255, 255, 180, 0.75));
	transition: opacity 0.5s ease;
	width: 300px;
	height: 300px;
}

.srs-page-projecteur-1 {
	top: 0;
	left: 0;
	transform: scaleX(1) scaleY(1);
}

.srs-page-projecteur-2 {
	top: 0;
	right: 0;
	transform: scaleX(-1) scaleY(1);
}

.srs-page-projecteur-3 {
	bottom: 0;
	left: 0;
	transform: scaleX(1) scaleY(-1);
}

.srs-page-projecteur-4 {
	bottom: 0;
	right: 0;
	transform: scaleX(-1) scaleY(-1);
}

@media (min-width: 768px) {
	.srs-page-projecteur {
		width: 600px;
		height: 600px;
		filter: drop-shadow(0 0 100px rgba(255, 255, 180, 0.85));
	}
}