/* PrettyWellFit Background Blur 1.02.39

   .pwf-bgblur            enabled container (isolation keeps the negative-z
                          stack above the container's own background)
   .pwf-bgblur-stack      runtime-built overlay, behind content
   .pwf-bgblur-stack span backdrop layers; uniform uses one, progressive
                          compounds five masked layers into a ramp

   Everything reads CSS variables written by the controls, so every
   slider previews live:
   --pwf-bgblur       blur amount (length)
   --pwf-bgblur-dir   gradient direction (from the chosen edge)
   --pwf-bgblur-s     ramp start (%, full strength until here)
   --pwf-bgblur-e     ramp end   (%, sharp from here)
*/

/* The enable flag must not inherit into nested containers — only the
   container whose switcher is on gets a stack. */
@property --pwf-bgblur-on {
	syntax: '*';
	inherits: false;
}

.pwf-bgblur {
	isolation: isolate;
}

.pwf-bgblur-stack {
	position: absolute;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	overflow: hidden;
	border-radius: inherit;
	transition: opacity 600ms ease 60ms;
}

/* While an entrance animation holds an ancestor's opacity below one, the
   browser walls the backdrop off; the stack waits at zero and blooms in
   when the wall drops instead of snapping. */
.pwf-bgblur-stack--pending {
	opacity: 0;
}

.pwf-bgblur-stack span {
	position: absolute;
	inset: 0;
}

/* ---- Uniform: one clean backdrop blur. ---- */

.pwf-bgblur-stack--uniform span:nth-child(1) {
	-webkit-backdrop-filter: blur( var(--pwf-bgblur, 4px) );
	backdrop-filter: blur( var(--pwf-bgblur, 4px) );
}

.pwf-bgblur-stack--uniform span:nth-child(n + 2) {
	display: none;
}

/* ---- Progressive: five compounding masked layers.
   Each layer blurs at ~45% of the set amount; regions nearer the chosen
   edge sit under more layers, so the accumulated blur ramps smoothly
   from full strength (before Ramp Start) to sharp (past Ramp End). ---- */

.pwf-bgblur-stack--progressive span {
	-webkit-backdrop-filter: blur( calc( var(--pwf-bgblur, 4px) * 0.45 ) );
	backdrop-filter: blur( calc( var(--pwf-bgblur, 4px) * 0.45 ) );
}

.pwf-bgblur-stack--progressive span:nth-child(1) {
	-webkit-mask-image: linear-gradient( var(--pwf-bgblur-dir, to top),
		#000 calc( var(--pwf-bgblur-s, 0%) + ( var(--pwf-bgblur-e, 60%) - var(--pwf-bgblur-s, 0%) ) * 0 ),
		transparent calc( var(--pwf-bgblur-s, 0%) + ( var(--pwf-bgblur-e, 60%) - var(--pwf-bgblur-s, 0%) ) * 0.2 ) );
	mask-image: linear-gradient( var(--pwf-bgblur-dir, to top),
		#000 calc( var(--pwf-bgblur-s, 0%) + ( var(--pwf-bgblur-e, 60%) - var(--pwf-bgblur-s, 0%) ) * 0 ),
		transparent calc( var(--pwf-bgblur-s, 0%) + ( var(--pwf-bgblur-e, 60%) - var(--pwf-bgblur-s, 0%) ) * 0.2 ) );
}

.pwf-bgblur-stack--progressive span:nth-child(2) {
	-webkit-mask-image: linear-gradient( var(--pwf-bgblur-dir, to top),
		#000 calc( var(--pwf-bgblur-s, 0%) + ( var(--pwf-bgblur-e, 60%) - var(--pwf-bgblur-s, 0%) ) * 0.2 ),
		transparent calc( var(--pwf-bgblur-s, 0%) + ( var(--pwf-bgblur-e, 60%) - var(--pwf-bgblur-s, 0%) ) * 0.4 ) );
	mask-image: linear-gradient( var(--pwf-bgblur-dir, to top),
		#000 calc( var(--pwf-bgblur-s, 0%) + ( var(--pwf-bgblur-e, 60%) - var(--pwf-bgblur-s, 0%) ) * 0.2 ),
		transparent calc( var(--pwf-bgblur-s, 0%) + ( var(--pwf-bgblur-e, 60%) - var(--pwf-bgblur-s, 0%) ) * 0.4 ) );
}

.pwf-bgblur-stack--progressive span:nth-child(3) {
	-webkit-mask-image: linear-gradient( var(--pwf-bgblur-dir, to top),
		#000 calc( var(--pwf-bgblur-s, 0%) + ( var(--pwf-bgblur-e, 60%) - var(--pwf-bgblur-s, 0%) ) * 0.4 ),
		transparent calc( var(--pwf-bgblur-s, 0%) + ( var(--pwf-bgblur-e, 60%) - var(--pwf-bgblur-s, 0%) ) * 0.6 ) );
	mask-image: linear-gradient( var(--pwf-bgblur-dir, to top),
		#000 calc( var(--pwf-bgblur-s, 0%) + ( var(--pwf-bgblur-e, 60%) - var(--pwf-bgblur-s, 0%) ) * 0.4 ),
		transparent calc( var(--pwf-bgblur-s, 0%) + ( var(--pwf-bgblur-e, 60%) - var(--pwf-bgblur-s, 0%) ) * 0.6 ) );
}

.pwf-bgblur-stack--progressive span:nth-child(4) {
	-webkit-mask-image: linear-gradient( var(--pwf-bgblur-dir, to top),
		#000 calc( var(--pwf-bgblur-s, 0%) + ( var(--pwf-bgblur-e, 60%) - var(--pwf-bgblur-s, 0%) ) * 0.6 ),
		transparent calc( var(--pwf-bgblur-s, 0%) + ( var(--pwf-bgblur-e, 60%) - var(--pwf-bgblur-s, 0%) ) * 0.8 ) );
	mask-image: linear-gradient( var(--pwf-bgblur-dir, to top),
		#000 calc( var(--pwf-bgblur-s, 0%) + ( var(--pwf-bgblur-e, 60%) - var(--pwf-bgblur-s, 0%) ) * 0.6 ),
		transparent calc( var(--pwf-bgblur-s, 0%) + ( var(--pwf-bgblur-e, 60%) - var(--pwf-bgblur-s, 0%) ) * 0.8 ) );
}

.pwf-bgblur-stack--progressive span:nth-child(5) {
	-webkit-mask-image: linear-gradient( var(--pwf-bgblur-dir, to top),
		#000 calc( var(--pwf-bgblur-s, 0%) + ( var(--pwf-bgblur-e, 60%) - var(--pwf-bgblur-s, 0%) ) * 0.8 ),
		transparent calc( var(--pwf-bgblur-e, 60%) ) );
	mask-image: linear-gradient( var(--pwf-bgblur-dir, to top),
		#000 calc( var(--pwf-bgblur-s, 0%) + ( var(--pwf-bgblur-e, 60%) - var(--pwf-bgblur-s, 0%) ) * 0.8 ),
		transparent calc( var(--pwf-bgblur-e, 60%) ) );
}