/**
 * PW Motion — style warstw dekoracyjnych.
 * Wszystko zawężone do klas warstw, żeby nie dotykać reszty strony.
 */

.pw-layer-canvas {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	display: block;
	width: 100%;
	height: 100%;
	pointer-events: none;
}

/* ------------------------------------------------------ pole punktów */

.pw-field > .pw-layer-canvas {
	z-index: 0;
	/* Wygaszenie po lewej, gdzie stoi nagłówek i lead. */
	-webkit-mask-image: linear-gradient(100deg, transparent 0%, rgba(0, 0, 0, 0.16) 26%, #000 58%, #000 100%);
	        mask-image: linear-gradient(100deg, transparent 0%, rgba(0, 0, 0, 0.16) 26%, #000 58%, #000 100%);
}

.pw-field > *:not(.pw-layer-canvas) {
	position: relative;
	z-index: 1;
}

@media (max-width: 767px) {
	.pw-field > .pw-layer-canvas {
		opacity: 0.5;
		-webkit-mask-image: none;
		        mask-image: none;
	}
}

/* --------------------------------------------------- obrysy etapów */
/* Kafelki etapów mają nieprzezroczyste tło, więc obrys musi lec nad nimi.
   Rysowany jest wyłącznie po obwodzie, nigdy przez treść kafelka. */

.pw-track > .pw-layer-canvas {
	z-index: 2;
}

/* --------------------------------------------- skan certyfikatu */

.pw-scan > .pw-layer-canvas {
	z-index: 2;
}

/* ------------------------------------------------- szkielet kart */

.pw-skeleton > .pw-layer-canvas {
	z-index: 0;
	/* Środek wygaszony, żeby komunikat „w przygotowaniu” pozostał czytelny. */
	-webkit-mask-image: radial-gradient(62% 74% at 50% 50%, transparent 0%, rgba(0, 0, 0, 0.3) 46%, #000 80%);
	        mask-image: radial-gradient(62% 74% at 50% 50%, transparent 0%, rgba(0, 0, 0, 0.3) 46%, #000 80%);
}

.pw-skeleton > *:not(.pw-layer-canvas) {
	position: relative;
	z-index: 1;
}

@media (prefers-reduced-motion: reduce) {
	.pw-layer-canvas {
		opacity: 0.7;
	}
}