/* CCULTURE shader layers. Each layer fills its parent; the canvas is sized by Paper Shaders. */
.cc-shader-layer {
	position: absolute;
	inset: 0;
	pointer-events: none;
	opacity: 0;
	transition: opacity 0.9s ease;
}
.cc-shader-layer.is-ready { opacity: 1; }
.cc-shader-layer canvas { display: block; }

/* Cover: dither sits between the photo and Salient's overlay; lighter overlay once it's live. */
.cc-shader-cover .row-bg-wrap .cc-shader-layer { z-index: 1; }
.cc-shader-cover .row-bg-wrap .row-bg-overlay { z-index: 2; }
.cc-shader-cover.cc-shader-on .row-bg-wrap .row-bg-overlay { opacity: 0.35 !important; }

/* Pull quote: texture stays in the background; dither grid screen-blended over it; top and bottom edges fade out. */
.cc-shader-quote .cc-shader-layer {
	-webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 22%, #000 78%, transparent 100%);
	mask-image: linear-gradient(to bottom, transparent 0%, #000 22%, #000 78%, transparent 100%);
}
.cc-shader-quote .cc-shader-layer.is-ready { opacity: 0.6; }
.cc-shader-quote .cc-shader-layer.cc-shader-dither { mix-blend-mode: screen; }
.cc-shader-quote .cc-shader-layer.cc-shader-dither.is-ready { opacity: 0.45; }

/* Club Kit: halftone print; hover reveals the photo underneath. */
.cc-shader-kit .hover-wrap-inner { position: relative; overflow: hidden; }
.cc-shader-kit .hover-wrap-inner .cc-shader-layer { z-index: 1; transition: opacity 0.5s ease; }
.cc-shader-kit .hover-wrap-inner:hover .cc-shader-layer.is-ready { opacity: 0; }

/* Liquid metal wordmark: the white PNG shows until the shader is running. */
.cc-liquid-logo {
	position: relative;
	width: 100%;
	max-width: 1100px;
	aspect-ratio: 2048 / 290;
	margin: 0 0 5vh;
}
.cc-liquid-logo img {
	display: block;
	width: 100%;
	height: auto;
	transition: opacity 0.6s ease;
}
.cc-liquid-logo.is-live img { opacity: 0; }
.cc-liquid-logo.cc-liquid-logo--full { max-width: none; margin: 0; }
.cc-liquid-logo .cc-shader-layer { z-index: 1; }

/* Liquid metal word inside a heading: crossfade. The shader (drawn from the word's exact box and
   font) fades in over the text while the text fades out, so there is no gap or flash. The text stays
   in the page for search engines and screen readers. */
.cc-liquid-word { position: relative; }
.cc-liquid-word > .cc-shader-layer { z-index: 1; transition: opacity 1.4s ease; }
.cc-liquid-word > :not(.cc-shader-layer) { transition: opacity 1.4s ease; }
.cc-liquid-word.cc-liquid-word-on > :not(.cc-shader-layer) { opacity: 0 !important; }

@media (prefers-reduced-motion: reduce) {
	.cc-shader-layer,
	.cc-liquid-logo img { transition: none; }
}