/* ==========================================================================
   APPROUVA global ribbon — ONE fixed WebGL layer for the whole home page.
   Front page only (functions.php gates the enqueue with is_front_page()).
   Ported layer/z-index system from source/lovable-repo/src/styles.css:72-88
   and the fallback/canvas rules from source/lovable-handoff/ribbon/approva-ribbon.css.
   ========================================================================== */

/* Real content stacks above the fixed ribbon layer (z-index 2); section
   backgrounds/pseudo-elements stay inside each section's own isolated
   stacking context (unchanged — see style.css §13). */
body.apv-theme .apv-section {
	position: relative;
	z-index: 10;
}

.approuva-ribbon-layer {
	position: fixed;
	inset: 0;
	width: 100vw;
	height: 100vh;
	z-index: 2;
	pointer-events: none;
	overflow: hidden;
	contain: none; /* must not become a fixed-position containing block */
}

/* Static CSS fallback — always painted (no FOUC), faded out once WebGL is ready. */
.approuva-ribbon-layer::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(
		112deg,
		transparent 9%,
		rgba(125, 53, 216, .11) 28%,
		transparent 46%,
		rgba(88, 68, 254, .09) 70%,
		transparent 88%
	);
	-webkit-mask-image: linear-gradient(to bottom, transparent 1%, #000 10% 92%, transparent);
	mask-image: linear-gradient(to bottom, transparent 1%, #000 10% 92%, transparent);
	opacity: 1;
	transition: opacity .7s ease;
}

.approuva-ribbon-canvas {
	position: absolute;
	inset: 0;
	width: 100% !important;
	height: 100% !important;
	display: block;
	opacity: 0;
	filter: drop-shadow(0 24px 38px rgba(88, 68, 254, .12));
	transition: opacity .7s ease;
}

.approuva-ribbon-layer.is-ready::before { opacity: 0; }
.approuva-ribbon-layer.is-ready .approuva-ribbon-canvas { opacity: .58; }

@media (max-width: 767px) {
	.approuva-ribbon-layer.is-ready .approuva-ribbon-canvas { opacity: .62; }
}

@media (prefers-reduced-motion: reduce) {
	.approuva-ribbon-canvas { display: none; }
	.approuva-ribbon-layer::before { opacity: 1 !important; }
}

@media (forced-colors: active) {
	.approuva-ribbon-layer { display: none; }
}