/**
 * Nauré storefront intro – scoped overlay (#naure-storefront-intro only).
 */

#naure-storefront-intro {
	position: fixed;
	inset: 0;
	z-index: 100000;
	display: none;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	pointer-events: none;
	transform: scale(1);
	filter: blur(0);
	/* CSS-only failsafe (~3.2s) when JS never takes control; disabled by .naure-intro--js at POSTER_VISIBLE. */
	animation: naure-intro-failsafe 3.2s ease forwards;
}

html.naure-intro-pending #naure-storefront-intro {
	display: flex;
	pointer-events: auto;
}

#naure-storefront-intro.naure-intro--js {
	animation: none;
}

#naure-storefront-intro.naure-intro--exiting {
	opacity: 0;
	transform: scale(1.018);
	filter: blur(6px);
	pointer-events: none;
	transition:
		opacity 0.5s cubic-bezier(0.4, 0, 0.2, 1),
		transform 0.5s cubic-bezier(0.4, 0, 0.2, 1),
		filter 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

#naure-storefront-intro.naure-intro--exiting.naure-intro--exiting-fast {
	transition-duration: 0.2s;
}

@keyframes naure-intro-failsafe {
	0%,
	90% {
		opacity: 1;
		visibility: visible;
	}
	100% {
		opacity: 0;
		visibility: hidden;
		pointer-events: none;
	}
}

/* ── Poster + video layers ── */

#naure-storefront-intro .naure-intro__media {
	position: absolute;
	inset: 0;
	overflow: hidden;
}

#naure-storefront-intro .naure-intro__poster {
	position: absolute;
	inset: 0;
	z-index: 1;
	display: block;
	width: 100%;
	height: 100%;
	pointer-events: none;
}

#naure-storefront-intro .naure-intro__poster-img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	pointer-events: none;
}

#naure-storefront-intro .naure-intro__video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	pointer-events: none;
	opacity: 0;
	z-index: 2;
}

#naure-storefront-intro.naure-intro--video-playing .naure-intro__video {
	opacity: 1;
}

#naure-storefront-intro.naure-intro--video-playing .naure-intro__poster {
	visibility: hidden;
}

#naure-storefront-intro .naure-intro__shade {
	position: absolute;
	inset: 0;
	z-index: 3;
	background: linear-gradient(
		180deg,
		rgba(6, 6, 7, 0.18) 0%,
		rgba(6, 6, 7, 0.32) 55%,
		rgba(6, 6, 7, 0.42) 100%
	);
	pointer-events: none;
}

/* ── Fog layers ── */

#naure-storefront-intro .naure-intro__fog {
	position: absolute;
	inset: -25%;
	z-index: 4;
	pointer-events: none;
	filter: blur(48px);
	opacity: 0.28;
	mix-blend-mode: soft-light;
	will-change: transform;
}

#naure-storefront-intro .naure-intro__fog--one {
	background:
		radial-gradient(ellipse 55% 42% at 22% 38%, rgba(255, 255, 255, 0.22), transparent 68%),
		radial-gradient(ellipse 48% 38% at 78% 62%, rgba(191, 176, 154, 0.14), transparent 72%);
	animation: naure-intro-fog-drift-a 28s ease-in-out infinite alternate;
}

#naure-storefront-intro .naure-intro__fog--two {
	background:
		radial-gradient(ellipse 62% 50% at 68% 28%, rgba(255, 255, 255, 0.16), transparent 70%),
		radial-gradient(ellipse 40% 36% at 35% 72%, rgba(230, 228, 223, 0.1), transparent 74%);
	opacity: 0.22;
	filter: blur(56px);
	animation: naure-intro-fog-drift-b 34s ease-in-out infinite alternate;
}

#naure-storefront-intro .naure-intro__fog--three {
	background:
		radial-gradient(ellipse 70% 55% at 50% 50%, rgba(255, 255, 255, 0.08), transparent 75%);
	opacity: 0.18;
	filter: blur(64px);
	animation: naure-intro-fog-drift-c 40s ease-in-out infinite alternate;
}

@keyframes naure-intro-fog-drift-a {
	0% {
		transform: translate3d(-2%, 0, 0) scale(1);
	}
	100% {
		transform: translate3d(3%, -1.5%, 0) scale(1.04);
	}
}

@keyframes naure-intro-fog-drift-b {
	0% {
		transform: translate3d(2.5%, 1%, 0) scale(1.02);
	}
	100% {
		transform: translate3d(-3%, 2%, 0) scale(1.06);
	}
}

@keyframes naure-intro-fog-drift-c {
	0% {
		transform: translate3d(0, 1.5%, 0) scale(1.01);
	}
	100% {
		transform: translate3d(1.5%, -1%, 0) scale(1.03);
	}
}

@media (prefers-reduced-motion: reduce) {
	#naure-storefront-intro.naure-intro--exiting {
		transition-duration: 0.17s;
		transform: none;
		filter: none;
	}

	#naure-storefront-intro.naure-intro--exiting.naure-intro--exiting-fast {
		transition-duration: 0.17s;
	}

	#naure-storefront-intro .naure-intro__fog {
		animation: none !important;
	}
}