/**
 * Front-end grain layers.
 * The texture is intentionally oversized and moved in discrete steps to keep
 * the irregular, analog rhythm of film grain without touching source images.
 */

#fcsg-grain-root {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 0;
	margin: 0;
	padding: 0;
	overflow: visible;
	pointer-events: none;
	user-select: none;
	z-index: var(--fcsg-z-index, 3);
}

#fcsg-anita-grain-root {
	position: fixed;
	inset: 0;
	width: 100vw;
	height: 100vh;
	margin: 0;
	padding: 0;
	overflow: hidden;
	pointer-events: none;
	user-select: none;
	z-index: var(--fcsg-z-index, 3);
	contain: strict;
}

.fcsg-grain-window {
	position: absolute;
	left: 0;
	top: 0;
	width: 0;
	height: 0;
	overflow: hidden;
	pointer-events: none;
	user-select: none;
	transform: translate3d(-200vw, -200vh, 0);
	transform-origin: 0 0;
	will-change: transform, width, height, opacity;
	contain: strict;
}

/*
 * Anita Flat Carousel: this variant is a child of the moving slide, so the
 * theme's own transform carries image and grain together without tracking lag.
 */
.fcsg-grain-window--anchored {
	position: absolute;
	z-index: 1;
	transform: none;
	contain: paint;
}

.fcsg-grain-texture,
.fcsg-page-grain::before {
	position: absolute;
	left: -100%;
	top: -100%;
	width: 300%;
	height: 300%;
	content: "";
	background-image: url("../images/grain-noise.svg");
	background-position: 0 0;
	background-repeat: repeat;
	background-size: var(--fcsg-texture-size, 400px) var(--fcsg-texture-size, 400px);
	opacity: var(--fcsg-opacity, 0.08);
	mix-blend-mode: overlay;
	pointer-events: none;
	animation: fcsg-grain-shift var(--fcsg-duration, 6s) steps(10, end) infinite;
	will-change: transform;
}

/*
 * Optional milky veil, kept completely separate from the grain itself.
 * At 0% the noise uses an Overlay blend and therefore keeps black and white
 * points intact instead of lifting the shadows with a white-alpha texture.
 */
.fcsg-grain-window::after,
.fcsg-page-grain::after {
	content: "";
	position: absolute;
	inset: 0;
	background: #fff;
	opacity: var(--fcsg-wash-opacity, 0);
	pointer-events: none;
}

.fcsg-page-grain {
	position: fixed;
	inset: 0;
	width: 100vw;
	height: 100vh;
	overflow: hidden;
	pointer-events: none;
	user-select: none;
	z-index: var(--fcsg-z-index, 3);
	contain: strict;
}

@keyframes fcsg-grain-shift {
	0%   { transform: translate3d(20%, -15%, 0); }
	10%  { transform: translate3d(-20%, -15%, 0); }
	20%  { transform: translate3d(20%, -5%, 0); }
	30%  { transform: translate3d(-20%, -5%, 0); }
	40%  { transform: translate3d(20%, 5%, 0); }
	50%  { transform: translate3d(-20%, 5%, 0); }
	60%  { transform: translate3d(20%, 15%, 0); }
	70%  { transform: translate3d(-20%, 15%, 0); }
	80%  { transform: translate3d(20%, 5%, 0); }
	90%  { transform: translate3d(-20%, 5%, 0); }
	100% { transform: translate3d(20%, -5%, 0); }
}

@media print {
	#fcsg-grain-root,
	#fcsg-anita-grain-root,
	.fcsg-page-grain {
		display: none !important;
	}
}