/**
 * PW Motion — pierścień ładowania wokół numeru (klasa pw-ring).
 *
 * Rysunek pierścienia dokłada skrypt pw-ring.js; tutaj tylko wygląd i dwa
 * stany: pw-ring-start zamyka pierścień, pw-ring-gotowe zapala wypełnienie
 * kółka. Bez skryptu kółko wygląda dokładnie tak jak dotąd.
 */
.pw-ring {
	position: relative;
	transition: background-color 0.5s ease, border-color 0.5s ease;
}

.pw-ring-svg {
	position: absolute;
	top: -5px;
	right: -5px;
	bottom: -5px;
	left: -5px;
	/*
	 * Wymiary podajemy wprost. Sam <svg> z viewBox ma wlasne proporcje
	 * i przy height: auto dobiera wysokosc od szerokosci, przez co przy
	 * szerszym kolku rysunek rozrastal sie na cala sekcje.
	 */
	width: calc( 100% + 10px );
	height: calc( 100% + 10px );
	overflow: visible;
	transform: rotate( -90deg );
	pointer-events: none;
}

.pw-ring-tor {
	fill: none;
	stroke: rgba( 120, 200, 255, 0.16 );
	stroke-width: 2.6;
}

/*
 * Łuk rysuje się kreską długości całego obwodu, odsuniętą poza okrąg.
 * Dosunięcie jej do zera zamyka pierścień — stąd wrażenie ładowania.
 * Obwód i czas podaje skrypt, bo zależą od promienia i ustawionego tempa.
 */
.pw-ring-luk {
	fill: none;
	stroke: rgba( 94, 200, 255, 0.95 );
	stroke-width: 2.6;
	stroke-linecap: round;
	stroke-dasharray: var( --pw-ring-obwod, 295 );
	stroke-dashoffset: var( --pw-ring-obwod, 295 );
	transition: stroke-dashoffset var( --pw-ring-czas, 1900ms ) cubic-bezier( 0.2, 0.6, 0.3, 1 ), stroke 0.5s ease;
}

.pw-ring-start .pw-ring-luk {
	stroke-dashoffset: 0;
}

/*
 * Elementor generuje dla każdego elementu reguły w rodzaju
 * .elementor-143 .elementor-element.elementor-element-edpo1 — trzy i więcej
 * klas. Żadne rozsądne zagęszczenie selektora tego nie przebije, bo numer
 * strony i elementu zmienia się przy każdej edycji. Stąd !important: to stan
 * końcowy animacji, a nie stały wygląd kółka.
 */
.pw-ring.pw-ring-gotowe {
	background-color: rgba( 94, 200, 255, 0.16 ) !important;
	border-color: rgba( 94, 200, 255, 0.55 ) !important;
}

.pw-ring.pw-ring-gotowe .elementor-heading-title {
	color: #C8ECFF !important;
}

/* Po zamknięciu pierścień cofa się w tło — rolę akcentu przejmuje kółko. */
.pw-ring.pw-ring-gotowe .pw-ring-luk {
	stroke: rgba( 94, 200, 255, 0.42 );
}