/**
 * PK Premium Motion Effects — style frontendu.
 *
 * Wartości dynamiczne (kolory, rozmiary, czasy) pochodzą ze zmiennych CSS
 * dopisywanych inline przez PHP. Poniższe wartości w :root są jedynie
 * awaryjnymi domyślnymi, gdyby zmienne nie zostały wstrzyknięte.
 */

:root {
	--pkpme-cursor-size: 7px;
	--pkpme-cursor-color: #d4af37;
	--pkpme-cursor-opacity: 0.9;
	--pkpme-cursor-ring-size: 34px;
	--pkpme-cursor-ring-color: #d4af37;
	--pkpme-cursor-z: 99999;
	--pkpme-magnetic-hover-color: #d4af37;
	--pkpme-magnetic-duration: 450ms;
	--pkpme-reveal-duration: 750ms;
	--pkpme-reveal-delay: 0ms;
	--pkpme-reveal-distance: 28px;
	--pkpme-lift-height: 6px;
	--pkpme-lift-duration: 360ms;
	--pkpme-lift-ease: cubic-bezier(0.22, 1, 0.36, 1);
	--pkpme-lift-shadow-alpha: 0.18;
	--pkpme-lift-glow-color: #d4af37;
	--pkpme-lift-scale: 1.02;
	--pkpme-glow-color1: #d4af37;
	--pkpme-glow-color2: #f5c542;
	--pkpme-glow-alpha: 0.45;
	--pkpme-glow-blur: 90px;
	--pkpme-glow-pos-x: 50%;
	--pkpme-glow-pos-y: 50%;
	--pkpme-shine-color: #ffffff;
	--pkpme-shine-duration: 850ms;
	--pkpme-shine-alpha: 0.35;
	--pkpme-active-opacity: 0.86;
	--pkpme-imgzoom-scale: 1.08;
	--pkpme-imgzoom-duration: 600ms;
	--pkpme-kenburns-scale: 1.16;
	--pkpme-kenburns-duration: 30s;
	--pkpme-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/*
|--------------------------------------------------------------------------
| 1. Kursor / kropka
|--------------------------------------------------------------------------
| Kropka jest elementem dodatkowym — natywny kursor pozostaje widoczny,
| dzięki czemu strona działa poprawnie nawet bez JavaScriptu.
*/
.pkpme-cursor-dot,
.pkpme-cursor-ring {
	position: fixed;
	top: 0;
	left: 0;
	pointer-events: none;
	border-radius: 50%;
	z-index: var(--pkpme-cursor-z);
	opacity: 0;
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	-webkit-user-select: none;
	user-select: none;
	transform: translate3d(-100px, -100px, 0);
}

/* Pozycję i skalę kursora w całości ustawia JavaScript (właściwość transform),
   dlatego transform celowo nie jest tu animowany przez CSS. */
.pkpme-cursor-dot {
	width: var(--pkpme-cursor-size);
	height: var(--pkpme-cursor-size);
	background-color: var(--pkpme-cursor-color);
	transition: opacity 0.3s ease, background-color 0.25s ease;
}

.pkpme-cursor-ring {
	width: var(--pkpme-cursor-ring-size);
	height: var(--pkpme-cursor-ring-size);
	border: 1.5px solid var(--pkpme-cursor-ring-color);
	transition: opacity 0.3s ease, border-color 0.25s ease;
}

.pkpme-cursor-dot.is-visible {
	opacity: var(--pkpme-cursor-opacity);
}

.pkpme-cursor-ring.is-visible {
	opacity: calc(var(--pkpme-cursor-opacity) * 0.55);
}

/* Tryb Soft Glow — delikatna poświata wokół kropki. */
html.pkpme-cursor-soft .pkpme-cursor-dot {
	box-shadow: 0 0 16px 3px color-mix(in srgb, var(--pkpme-cursor-color) 65%, transparent);
}

/* Tryb Premium Blend — kropka miesza się z tłem pod spodem. */
html.pkpme-cursor-blend .pkpme-cursor-dot {
	mix-blend-mode: difference;
	background-color: #ffffff;
}

html.pkpme-cursor-blend .pkpme-cursor-ring {
	mix-blend-mode: difference;
	border-color: #ffffff;
}

/* Stan najechania na element magnetyczny (skalę ustawia JavaScript).
   Prefiks „html” podnosi swoistość, by kolor zadziałał także w trybie blend. */
html .pkpme-cursor-dot.is-hover {
	background-color: var(--pkpme-magnetic-hover-color);
}

html .pkpme-cursor-ring.is-hover {
	border-color: var(--pkpme-magnetic-hover-color);
}

.pkpme-cursor-dot.is-hidden,
.pkpme-cursor-ring.is-hidden {
	opacity: 0 !important;
}

/*
|--------------------------------------------------------------------------
| 2. Magnetyczne przyciski
|--------------------------------------------------------------------------
| Przesunięcie przycisku ustawia JavaScript (transform inline).
| CSS odpowiada jedynie za płynny powrót i opcjonalną poświatę.
*/
html.pkpme-fx-magnetic .pkpme-magnetic-btn {
	transition: transform var(--pkpme-magnetic-duration) var(--pkpme-ease),
		box-shadow var(--pkpme-magnetic-duration) ease;
	will-change: transform;
}

html.pkpme-fx-magnetic.pkpme-fx-magnetic-glow .pkpme-magnetic-btn.is-magnetic-active {
	box-shadow: 0 10px 30px -8px color-mix(in srgb, var(--pkpme-magnetic-hover-color) 55%, transparent);
}

/*
|--------------------------------------------------------------------------
| 3. Animacje wejścia (scroll reveal)
|--------------------------------------------------------------------------
| Stan ukryty nadaje JavaScript przez klasę .pkpme-reveal-init.
| Bez JS klasa nie zostanie dodana, więc treść jest zawsze widoczna.
*/
html.pkpme-js .pkpme-reveal-init {
	opacity: 0;
	transition-property: opacity, transform, filter;
	transition-duration: var(--pkpme-reveal-duration);
	transition-timing-function: var(--pkpme-ease);
	transition-delay: var(--pkpme-reveal-delay);
}

html.pkpme-js .pkpme-rv-fade_up.pkpme-reveal-init,
html.pkpme-js .pkpme-rv-premium_stagger.pkpme-reveal-init {
	transform: translate3d(0, var(--pkpme-reveal-distance), 0);
}

html.pkpme-js .pkpme-rv-slide_up.pkpme-reveal-init {
	transform: translate3d(0, calc(var(--pkpme-reveal-distance) * 1.6), 0);
}

html.pkpme-js .pkpme-rv-slide_left.pkpme-reveal-init {
	transform: translate3d(calc(var(--pkpme-reveal-distance) * 1.6), 0, 0);
}

html.pkpme-js .pkpme-rv-slide_right.pkpme-reveal-init {
	transform: translate3d(calc(var(--pkpme-reveal-distance) * -1.6), 0, 0);
}

html.pkpme-js .pkpme-rv-zoom_soft.pkpme-reveal-init {
	transform: scale(0.93);
}

html.pkpme-js .pkpme-rv-blur_reveal.pkpme-reveal-init {
	filter: blur(14px);
	transform: translate3d(0, calc(var(--pkpme-reveal-distance) * 0.5), 0);
}

/* Stan końcowy — element w pełni widoczny. */
html.pkpme-js .pkpme-reveal-init.pkpme-reveal-in {
	opacity: 1;
	transform: translate3d(0, 0, 0) scale(1);
	filter: blur(0);
}

/*
|--------------------------------------------------------------------------
| 4. Unoszenie kontenerów / sekcji (hover lift)
|--------------------------------------------------------------------------
*/
html.pkpme-fx-lift .pkpme-lift-target {
	transition: transform var(--pkpme-lift-duration) var(--pkpme-lift-ease),
		box-shadow var(--pkpme-lift-duration) var(--pkpme-lift-ease);
}

html.pkpme-fx-lift .pkpme-lift-target:hover {
	transform: translate3d(0, calc(var(--pkpme-lift-height) * -1), 0);
}

html.pkpme-fx-lift.pkpme-fx-lift-scale .pkpme-lift-target:hover {
	transform: translate3d(0, calc(var(--pkpme-lift-height) * -1), 0) scale(var(--pkpme-lift-scale));
}

/* Cień bez poświaty. */
html.pkpme-fx-lift.pkpme-fx-lift-shadow:not(.pkpme-fx-lift-glow) .pkpme-lift-target:hover {
	box-shadow: 0 18px 40px -14px rgba(0, 0, 0, var(--pkpme-lift-shadow-alpha));
}

/* Poświata bez cienia. */
html.pkpme-fx-lift.pkpme-fx-lift-glow:not(.pkpme-fx-lift-shadow) .pkpme-lift-target:hover {
	box-shadow: 0 0 34px -4px color-mix(in srgb, var(--pkpme-lift-glow-color) 55%, transparent);
}

/* Cień i poświata jednocześnie. */
html.pkpme-fx-lift.pkpme-fx-lift-shadow.pkpme-fx-lift-glow .pkpme-lift-target:hover {
	box-shadow: 0 18px 40px -14px rgba(0, 0, 0, var(--pkpme-lift-shadow-alpha)),
		0 0 34px -4px color-mix(in srgb, var(--pkpme-lift-glow-color) 55%, transparent);
}

/*
|--------------------------------------------------------------------------
| 4b. Przybliżanie obrazów po najechaniu (image zoom)
|--------------------------------------------------------------------------
| Obraz skaluje się wewnątrz przycinającego kontenera, więc nie wpływa
| na układ strony.
*/
html.pkpme-fx-imgzoom .pkpme-zoom-target {
	overflow: hidden;
}

html.pkpme-fx-imgzoom .pkpme-zoom-target img {
	transition: transform var(--pkpme-imgzoom-duration) var(--pkpme-ease);
	transform: translate3d(0, 0, 0) scale(1);
}

html.pkpme-fx-imgzoom .pkpme-zoom-target:hover img {
	transform: translate3d(0, 0, 0) scale(var(--pkpme-imgzoom-scale));
}

/*
|--------------------------------------------------------------------------
| 4c. Samoistny ruch obrazów / teł (Ken Burns)
|--------------------------------------------------------------------------
*/
html.pkpme-fx-kenburns .pkpme-kenburns-clip {
	overflow: hidden !important;
	/* Klipowanie musi mieć kontekst pozycjonowania — w innym razie warstwa
	   absolutna (np. .kb-blocks-bg-img w Kadence) zostałaby wycięta przez
	   element położony wyżej w drzewie. */
	position: relative;
}

html.pkpme-fx-kenburns .pkpme-kenburns-layer {
	animation: pkpme-kenburns var(--pkpme-kenburns-duration) ease-in-out infinite alternate;
	will-change: transform;
	transform-origin: center center;
}

/* Tło Kadence — <img class="kb-blocks-bg-img-element"> jest wewnątrz
   absolutnie pozycjonowanego .kb-blocks-bg-img. Po dodaniu klasy
   pkpme-kenburns-layer animacja scale() musi mieć działającą object-fit,
   inaczej skalowanie obrazu wystaje poza wrapper i jest widoczne tylko
   częściowo. */
html.pkpme-fx-kenburns img.pkpme-kenburns-layer {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center center;
}

@keyframes pkpme-kenburns {
	from {
		transform: scale(1.05) translate3d(0, 0, 0);
	}
	to {
		transform: scale(var(--pkpme-kenburns-scale)) translate3d(-1.6%, -2.2%, 0);
	}
}

html.pkpme-fx-kenburns .pkpme-kenburns-bg {
	animation: pkpme-kenburns-pan var(--pkpme-kenburns-duration) ease-in-out infinite alternate;
	background-size: cover;
}

@keyframes pkpme-kenburns-pan {
	from {
		background-position: 46% 46%;
		background-size: 110% auto;
	}
	to {
		background-position: 56% 56%;
		background-size: calc(100% * var(--pkpme-kenburns-scale)) auto;
	}
}

/*
|--------------------------------------------------------------------------
| 5. Gradientowa poświata sekcji (.pkpme-glow-section)
|--------------------------------------------------------------------------
| Poświata renderowana jest za sekcją (z-index: -1).
*/
html.pkpme-fx-glow .pkpme-glow-section {
	position: relative;
	/* Izolacja gwarantuje, że poświata (z-index: -1) jest renderowana
	   nad tłem sekcji, a pod jej treścią — niezależnie od kontekstu. */
	isolation: isolate;
}

html.pkpme-fx-glow .pkpme-glow-section::before {
	content: "";
	position: absolute;
	z-index: -1;
	left: var(--pkpme-glow-pos-x);
	top: var(--pkpme-glow-pos-y);
	width: 80%;
	height: 80%;
	transform: translate3d(-50%, -50%, 0);
	background: radial-gradient(circle at center,
		var(--pkpme-glow-color1) 0%,
		var(--pkpme-glow-color2) 48%,
		transparent 76%);
	filter: blur(var(--pkpme-glow-blur));
	opacity: var(--pkpme-glow-alpha);
	pointer-events: none;
	border-radius: 50%;
}

html.pkpme-fx-glow.pkpme-fx-glow-animated .pkpme-glow-section::before {
	animation: pkpme-glow-breathe 9s ease-in-out infinite;
}

@keyframes pkpme-glow-breathe {
	0%,
	100% {
		opacity: calc(var(--pkpme-glow-alpha) * 0.7);
		transform: translate3d(-50%, -50%, 0) scale(0.94);
	}
	50% {
		opacity: var(--pkpme-glow-alpha);
		transform: translate3d(-50%, -50%, 0) scale(1.08);
	}
}

/*
|--------------------------------------------------------------------------
| 6. Efekt shine na przyciskach
|--------------------------------------------------------------------------
*/
html.pkpme-fx-shine .pkpme-shine-target {
	position: relative;
	overflow: hidden;
}

html.pkpme-fx-shine .pkpme-shine-target::after {
	content: "";
	position: absolute;
	top: -10%;
	left: -85%;
	width: 55%;
	height: 120%;
	background: linear-gradient(100deg,
		transparent 0%,
		var(--pkpme-shine-color) 50%,
		transparent 100%);
	opacity: var(--pkpme-shine-alpha);
	transform: translate3d(0, 0, 0) skewX(-20deg);
	pointer-events: none;
}

html.pkpme-fx-shine .pkpme-shine-target:hover::after {
	animation: pkpme-shine-sweep var(--pkpme-shine-duration) ease;
}

@keyframes pkpme-shine-sweep {
	from {
		transform: translate3d(0, 0, 0) skewX(-20deg);
	}
	to {
		transform: translate3d(360%, 0, 0) skewX(-20deg);
	}
}

/*
|--------------------------------------------------------------------------
| 7. Podświetlenie aktywnej sekcji (.pkpme-active-section)
|--------------------------------------------------------------------------
*/
html.pkpme-fx-active-section .pkpme-active-section {
	transition: opacity 0.6s var(--pkpme-ease), filter 0.6s var(--pkpme-ease);
	opacity: var(--pkpme-active-opacity);
}

html.pkpme-fx-active-section .pkpme-active-section.pkpme-active-in {
	opacity: 1;
	filter: saturate(1.06);
}

/*
|--------------------------------------------------------------------------
| 8. Parallax
|--------------------------------------------------------------------------
| Przesunięcie ustawia JavaScript. CSS zapewnia jedynie kontekst.
*/
html.pkpme-fx-parallax .pkpme-parallax-target {
	will-change: transform;
}

/* === FAZA 2 — nowe moduły efektów (domyślnie wyłączone) === */

/*
|--------------------------------------------------------------------------
| 10. Scroll Progress Bar (pasek postępu)
|--------------------------------------------------------------------------
| Pozycję ustawia JS przez transform: scaleX/scaleY 0..1.
*/
.pkpme-progress-bar {
	position: fixed;
	z-index: var(--pkpme-progress-z);
	background-color: var(--pkpme-progress-color);
	pointer-events: none;
	will-change: transform;
	transition: transform 0.05s linear;
}

.pkpme-progress-bar.pkpme-progress-top,
.pkpme-progress-bar.pkpme-progress-bottom {
	left: 0;
	width: 100%;
	height: var(--pkpme-progress-thickness);
	transform: scaleX(0);
	transform-origin: left center;
}

.pkpme-progress-bar.pkpme-progress-top { top: 0; }
.pkpme-progress-bar.pkpme-progress-bottom { bottom: 0; }

.pkpme-progress-bar.pkpme-progress-left,
.pkpme-progress-bar.pkpme-progress-right {
	top: 0;
	width: var(--pkpme-progress-thickness);
	height: 100%;
	transform: scaleY(0);
	transform-origin: center top;
}

.pkpme-progress-bar.pkpme-progress-left { left: 0; }
.pkpme-progress-bar.pkpme-progress-right { right: 0; }

.pkpme-progress-bar.pkpme-progress-gradient {
	background: linear-gradient(90deg, var(--pkpme-progress-color), var(--pkpme-progress-color2));
}

.pkpme-progress-bar.pkpme-progress-left.pkpme-progress-gradient,
.pkpme-progress-bar.pkpme-progress-right.pkpme-progress-gradient {
	background: linear-gradient(180deg, var(--pkpme-progress-color), var(--pkpme-progress-color2));
}

/*
|--------------------------------------------------------------------------
| 11. Image Mask Reveal
|--------------------------------------------------------------------------
*/
html.pkpme-fx-imask .pkpme-imask-init {
	transition: clip-path var(--pkpme-imask-duration) var(--pkpme-imask-ease);
	transition-delay: var(--pkpme-imask-delay);
	will-change: clip-path;
}

html.pkpme-fx-imask .pkpme-imask-init.pkpme-imask-dir-left   { clip-path: inset(0 100% 0 0); }
html.pkpme-fx-imask .pkpme-imask-init.pkpme-imask-dir-right  { clip-path: inset(0 0 0 100%); }
html.pkpme-fx-imask .pkpme-imask-init.pkpme-imask-dir-up     { clip-path: inset(100% 0 0 0); }
html.pkpme-fx-imask .pkpme-imask-init.pkpme-imask-dir-down   { clip-path: inset(0 0 100% 0); }
html.pkpme-fx-imask .pkpme-imask-init.pkpme-imask-dir-diagonal {
	clip-path: polygon(0 0, 0 0, 0 100%, 0 100%);
}

html.pkpme-fx-imask .pkpme-imask-init.pkpme-imask-in {
	clip-path: inset(0);
}

html.pkpme-fx-imask .pkpme-imask-init.pkpme-imask-dir-diagonal.pkpme-imask-in {
	clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
}

/*
|--------------------------------------------------------------------------
| 12. Text Split Reveal
|--------------------------------------------------------------------------
| Spanami dzielimy tekst na słowa / litery / linie. Oryginalny tekst
| jest zachowany w atrybucie aria-label hosta — czytniki ekranowe
| odczytują pełną treść, a wyszukiwarki widzą oryginalny DOM textContent.
*/
html.pkpme-fx-textreveal .pkpme-tr-w,
html.pkpme-fx-textreveal .pkpme-tr-l,
html.pkpme-fx-textreveal .pkpme-tr-line {
	display: inline-block;
	opacity: 0;
	transform: translate3d(0, var(--pkpme-textreveal-distance), 0);
	transition: opacity var(--pkpme-textreveal-duration) var(--pkpme-ease),
		transform var(--pkpme-textreveal-duration) var(--pkpme-ease),
		filter var(--pkpme-textreveal-duration) var(--pkpme-ease);
	will-change: opacity, transform;
}

html.pkpme-fx-textreveal .pkpme-tr-line {
	display: block;
}

/* Tryb mask_up — kontener przycina, dziecko wjeżdża z dołu. */
html.pkpme-fx-textreveal .pkpme-tr-mask {
	overflow: hidden;
	padding-bottom: 0.18em;
}

html.pkpme-fx-textreveal .pkpme-tr-mask .pkpme-tr-w,
html.pkpme-fx-textreveal .pkpme-tr-mask .pkpme-tr-l {
	transform: translate3d(0, 110%, 0);
}

/* Tryb soft_blur_words — początkowy blur. */
html.pkpme-fx-textreveal .pkpme-tr-blur .pkpme-tr-w,
html.pkpme-fx-textreveal .pkpme-tr-blur .pkpme-tr-l {
	filter: blur(var(--pkpme-textreveal-blur));
}

/* Stan końcowy — wszystkie kawałki widoczne. */
html.pkpme-fx-textreveal .pkpme-textreveal-in .pkpme-tr-w,
html.pkpme-fx-textreveal .pkpme-textreveal-in .pkpme-tr-l,
html.pkpme-fx-textreveal .pkpme-textreveal-in .pkpme-tr-line {
	opacity: 1;
	transform: translate3d(0, 0, 0);
	filter: blur(0);
}

/*
|--------------------------------------------------------------------------
| 13. Premium Card Tilt
|--------------------------------------------------------------------------
| Wartości transform ustawia JavaScript. CSS zapewnia przejścia powrotu.
*/
html.pkpme-fx-tilt .pkpme-tilt-target {
	transform-style: preserve-3d;
	transition: transform var(--pkpme-tilt-speed) cubic-bezier(0.22, 1, 0.36, 1),
		box-shadow var(--pkpme-tilt-speed) ease;
	will-change: transform;
}

html.pkpme-fx-tilt.pkpme-fx-tilt-shadow .pkpme-tilt-target.is-tilting {
	box-shadow: 0 22px 50px -18px rgba(0, 0, 0, 0.32);
}

html.pkpme-fx-tilt.pkpme-fx-tilt-glow .pkpme-tilt-target.is-tilting {
	box-shadow: 0 0 42px -4px color-mix(in srgb, var(--pkpme-tilt-glow-color) 50%, transparent);
}

html.pkpme-fx-tilt.pkpme-fx-tilt-shadow.pkpme-fx-tilt-glow .pkpme-tilt-target.is-tilting {
	box-shadow: 0 22px 50px -18px rgba(0, 0, 0, 0.32),
		0 0 42px -4px color-mix(in srgb, var(--pkpme-tilt-glow-color) 50%, transparent);
}

/*
|--------------------------------------------------------------------------
| 14. Cursor Tooltip
|--------------------------------------------------------------------------
*/
.pkpme-cursor-tooltip {
	position: fixed;
	top: 0;
	left: 0;
	z-index: var(--pkpme-cursor-z);
	background-color: var(--pkpme-tooltip-bg);
	color: var(--pkpme-tooltip-color);
	font-size: var(--pkpme-tooltip-size);
	line-height: 1.3;
	padding: var(--pkpme-tooltip-padding) calc(var(--pkpme-tooltip-padding) * 1.6);
	border-radius: var(--pkpme-tooltip-radius);
	pointer-events: none;
	user-select: none;
	white-space: nowrap;
	opacity: 0;
	transform: translate3d(-200px, -200px, 0);
	transition: opacity var(--pkpme-tooltip-duration) ease;
	max-width: 50vw;
}

.pkpme-cursor-tooltip.is-visible {
	opacity: 1;
}

/*
|--------------------------------------------------------------------------
| 15. Smart CTA Reveal
|--------------------------------------------------------------------------
*/
html.pkpme-fx-ctareveal .pkpme-cta-reveal,
html.pkpme-fx-ctareveal .pkpme-premium-cta {
	position: relative;
	isolation: isolate;
	opacity: 0;
	transform: translate3d(0, 30px, 0);
	transition: opacity var(--pkpme-cta-duration) var(--pkpme-ease),
		transform var(--pkpme-cta-duration) var(--pkpme-ease);
}

html.pkpme-fx-ctareveal .pkpme-cta-reveal.pkpme-cta-in,
html.pkpme-fx-ctareveal .pkpme-premium-cta.pkpme-cta-in {
	opacity: 1;
	transform: translate3d(0, 0, 0);
}

html.pkpme-fx-ctareveal.pkpme-fx-ctareveal-glow .pkpme-cta-reveal.pkpme-cta-in::before,
html.pkpme-fx-ctareveal.pkpme-fx-ctareveal-glow .pkpme-premium-cta.pkpme-cta-in::before {
	content: "";
	position: absolute;
	inset: -8%;
	z-index: -1;
	background: radial-gradient(circle at center, var(--pkpme-cta-glow-color) 0%, transparent 70%);
	opacity: var(--pkpme-cta-glow-alpha);
	filter: blur(50px);
	pointer-events: none;
	border-radius: inherit;
}

html.pkpme-fx-ctareveal.pkpme-fx-ctareveal-pulse .pkpme-cta-reveal.pkpme-cta-in .wp-block-button__link,
html.pkpme-fx-ctareveal.pkpme-fx-ctareveal-pulse .pkpme-cta-reveal.pkpme-cta-in .kb-button,
html.pkpme-fx-ctareveal.pkpme-fx-ctareveal-pulse .pkpme-premium-cta.pkpme-cta-in .wp-block-button__link,
html.pkpme-fx-ctareveal.pkpme-fx-ctareveal-pulse .pkpme-premium-cta.pkpme-cta-in .kb-button {
	animation: pkpme-cta-pulse 2.6s ease-in-out infinite;
}

@keyframes pkpme-cta-pulse {
	0%, 100% { transform: scale(1); }
	50% { transform: scale(1.025); }
}

/*
|--------------------------------------------------------------------------
| 16. Floating Elements
|--------------------------------------------------------------------------
*/
@keyframes pkpme-float-v {
	0%, 100% { transform: translate3d(0, 0, 0); }
	50% { transform: translate3d(0, calc(var(--pkpme-float-amplitude) * -1), 0); }
}

@keyframes pkpme-float-h {
	0%, 100% { transform: translate3d(0, 0, 0); }
	50% { transform: translate3d(calc(var(--pkpme-float-amplitude) * -1), 0, 0); }
}

@keyframes pkpme-float-o {
	0%   { transform: translate3d(0, 0, 0); }
	25%  { transform: translate3d(var(--pkpme-float-amplitude), calc(var(--pkpme-float-amplitude) * -1), 0); }
	50%  { transform: translate3d(0, calc(var(--pkpme-float-amplitude) * -2), 0); }
	75%  { transform: translate3d(calc(var(--pkpme-float-amplitude) * -1), calc(var(--pkpme-float-amplitude) * -1), 0); }
	100% { transform: translate3d(0, 0, 0); }
}

html.pkpme-fx-floating .pkpme-float,
html.pkpme-fx-floating .pkpme-float-slow,
html.pkpme-fx-floating .pkpme-float-medium,
html.pkpme-fx-floating .pkpme-float-fast {
	animation-name: pkpme-float-v;
	animation-duration: var(--pkpme-float-duration);
	animation-iteration-count: infinite;
	animation-timing-function: ease-in-out;
	will-change: transform;
}

html.pkpme-fx-floating .pkpme-float-slow   { animation-duration: calc(var(--pkpme-float-duration) * 1.6); }
html.pkpme-fx-floating .pkpme-float-fast   { animation-duration: calc(var(--pkpme-float-duration) * 0.55); }

html.pkpme-fx-floating.pkpme-fx-floating-horizontal .pkpme-float,
html.pkpme-fx-floating.pkpme-fx-floating-horizontal .pkpme-float-slow,
html.pkpme-fx-floating.pkpme-fx-floating-horizontal .pkpme-float-medium,
html.pkpme-fx-floating.pkpme-fx-floating-horizontal .pkpme-float-fast {
	animation-name: pkpme-float-h;
}

html.pkpme-fx-floating.pkpme-fx-floating-orbit .pkpme-float,
html.pkpme-fx-floating.pkpme-fx-floating-orbit .pkpme-float-slow,
html.pkpme-fx-floating.pkpme-fx-floating-orbit .pkpme-float-medium,
html.pkpme-fx-floating.pkpme-fx-floating-orbit .pkpme-float-fast {
	animation-name: pkpme-float-o;
}

/*
|--------------------------------------------------------------------------
| 17. Button Ripple / Press Feedback
|--------------------------------------------------------------------------
*/
html.pkpme-fx-ripple .pkpme-ripple-target {
	position: relative;
	overflow: hidden;
}

.pkpme-ripple-fx {
	position: absolute;
	border-radius: 50%;
	background-color: var(--pkpme-ripple-color);
	opacity: var(--pkpme-ripple-alpha);
	pointer-events: none;
	transform: translate(-50%, -50%) scale(0);
	animation: pkpme-ripple var(--pkpme-ripple-duration) cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

@keyframes pkpme-ripple {
	to {
		transform: translate(-50%, -50%) scale(2.6);
		opacity: 0;
	}
}

html.pkpme-fx-ripple.pkpme-fx-ripple-press .pkpme-ripple-target {
	transition: transform 0.15s ease;
}

html.pkpme-fx-ripple.pkpme-fx-ripple-press .pkpme-ripple-target:active {
	transform: scale(0.97);
}

html.pkpme-fx-ripple.pkpme-fx-ripple-soft .pkpme-ripple-target {
	transition: box-shadow 0.3s ease;
}

html.pkpme-fx-ripple.pkpme-fx-ripple-soft .pkpme-ripple-target:active {
	box-shadow: 0 0 30px -4px color-mix(in srgb, var(--pkpme-ripple-color) 60%, transparent);
}

/*
|--------------------------------------------------------------------------
| 18. Active Section Highlight — tryby (rozszerzenie)
|--------------------------------------------------------------------------
*/
html.pkpme-fx-active-section .pkpme-active-section {
	transition: opacity 0.6s var(--pkpme-ease),
		filter 0.6s var(--pkpme-ease),
		transform 0.6s var(--pkpme-ease),
		box-shadow 0.6s var(--pkpme-ease);
}

html.pkpme-fx-active-section.pkpme-active-mode-glow .pkpme-active-section.pkpme-active-in {
	box-shadow: 0 0 60px -10px color-mix(in srgb, var(--pkpme-active-glow-color) 60%, transparent);
}

html.pkpme-fx-active-section.pkpme-active-mode-scale .pkpme-active-section.pkpme-active-in {
	transform: scale(1.015);
}

html.pkpme-fx-active-section.pkpme-active-mode-contrast .pkpme-active-section.pkpme-active-in {
	filter: contrast(1.08);
}

html.pkpme-fx-active-section.pkpme-active-mode-mixed .pkpme-active-section.pkpme-active-in {
	filter: saturate(1.08) contrast(1.04);
	transform: scale(1.01);
	box-shadow: 0 0 44px -8px color-mix(in srgb, var(--pkpme-active-glow-color) 40%, transparent);
}

/* === FAZA 2 część 2 — kolejne moduły efektów (domyślnie wyłączone) === */

/*
|--------------------------------------------------------------------------
| 19. Page Transitions — pełna przebudowa 1.0.8
|--------------------------------------------------------------------------
| Architektura:
|  • Każdy tryb to JEDNA klasa .pkpme-pt-<mode> na #overlay-u.
|  • Stan wyjściowy = .is-out (overlay przykrywa stronę przed nawigacją).
|  • Animowane są wyłącznie: opacity, transform i clip-path
|    (najbezpieczniejsze dla GPU).
|  • Logo / podtytuł / spinner renderowane są przez JS jako dzieci
|    .pkpme-pt-inner i zawsze leżą wycentrowane pod overlay-em.
|  • Brak modyfikacji <body>/<html> (żaden tryb nie psuje layoutu strony).
|
| Tryby usunięte (nie działały lub psuły layout): glitch_premium,
| masonry_tiles, zoom_in_premium, zoom_out_premium.
*/
.pkpme-page-overlay {
	position: fixed;
	inset: 0;
	z-index: var(--pkpme-pagetrans-z);
	background-color: var(--pkpme-pagetrans-bg);
	pointer-events: none;
	opacity: 0;
	visibility: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: opacity var(--pkpme-pagetrans-duration) var(--pkpme-pagetrans-ease),
	            visibility 0s linear var(--pkpme-pagetrans-duration),
	            transform var(--pkpme-pagetrans-duration) var(--pkpme-pagetrans-ease),
	            clip-path var(--pkpme-pagetrans-duration) cubic-bezier(0.85, 0, 0.15, 1),
	            backdrop-filter var(--pkpme-pagetrans-duration) var(--pkpme-pagetrans-ease);
}

.pkpme-page-overlay.is-out {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transition-delay: 0s;
}

/* Wewnętrzny wrapper — logo + spinner + podtytuł */
.pkpme-pt-inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 14px;
	opacity: 0;
	transform: translateY(14px);
	transition: opacity calc(var(--pkpme-pagetrans-duration) * 0.6) ease calc(var(--pkpme-pagetrans-duration) * 0.4),
	            transform calc(var(--pkpme-pagetrans-duration) * 0.6) ease calc(var(--pkpme-pagetrans-duration) * 0.4);
}
.pkpme-page-overlay.is-out .pkpme-pt-inner {
	opacity: 1;
	transform: translateY(0);
}
.pkpme-pt-logo {
	max-width: var(--pkpme-pagetrans-logo-size, 80px);
	max-height: var(--pkpme-pagetrans-logo-size, 80px);
	width: auto;
	height: auto;
	display: block;
}
.pkpme-pt-subtitle {
	font-size: 13px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	opacity: 0.7;
	color: var(--pkpme-pagetrans-text-color, #fff);
}
.pkpme-pt-spinner {
	width: 30px;
	height: 30px;
	border-radius: 50%;
	border: 2px solid color-mix(in srgb, var(--pkpme-pagetrans-text-color, #fff) 15%, transparent);
	border-top-color: var(--pkpme-pagetrans-accent);
	animation: pkpme-pt-spin 0.9s linear infinite;
}
@keyframes pkpme-pt-spin {
	to { transform: rotate(360deg); }
}

/*
|--------------------------------------------------------------------------
|  TRYBY (każdy potwierdzony i działa samodzielnie)
|--------------------------------------------------------------------------
*/

/* 1) Fade — najsubtelniej. Tylko opacity. */
/* (Bazowa .pkpme-page-overlay już to robi.) */

/* 2) Soft Overlay — fade + gradient od góry. */
.pkpme-page-overlay.pkpme-pt-soft_overlay {
	background: linear-gradient(180deg,
		var(--pkpme-pagetrans-bg) 0%,
		color-mix(in srgb, var(--pkpme-pagetrans-bg) 70%, transparent) 100%);
}

/* 3) Slide Curtain — kurtyna z góry. */
.pkpme-page-overlay.pkpme-pt-slide_curtain {
	transform: translateY(-100%);
	opacity: 1;
	visibility: visible;
	transition: transform var(--pkpme-pagetrans-duration) var(--pkpme-pagetrans-ease),
	            visibility 0s linear var(--pkpme-pagetrans-duration);
}
.pkpme-page-overlay.pkpme-pt-slide_curtain.is-out {
	transform: translateY(0);
}

/* 4) Blur — efekt soczewki (treść strony rozmywa się). */
.pkpme-page-overlay.pkpme-pt-blur {
	background-color: color-mix(in srgb, var(--pkpme-pagetrans-bg) 10%, transparent);
	backdrop-filter: blur(0px);
	-webkit-backdrop-filter: blur(0px);
}
.pkpme-page-overlay.pkpme-pt-blur.is-out {
	background-color: color-mix(in srgb, var(--pkpme-pagetrans-bg) 30%, transparent);
	backdrop-filter: blur(var(--pkpme-pagetrans-blur, 14px));
	-webkit-backdrop-filter: blur(var(--pkpme-pagetrans-blur, 14px));
}

/* 5) Circular Reveal — koło z centrum. */
.pkpme-page-overlay.pkpme-pt-circular_reveal {
	clip-path: circle(0% at 50% 50%);
	-webkit-clip-path: circle(0% at 50% 50%);
	opacity: 1;
	visibility: visible;
}
.pkpme-page-overlay.pkpme-pt-circular_reveal.is-out {
	clip-path: circle(150% at 50% 50%);
	-webkit-clip-path: circle(150% at 50% 50%);
}

/* 6) Premium Dark — głęboki gradient (z opcjonalnym logo + spinnerem). */
.pkpme-page-overlay.pkpme-pt-premium_dark {
	--pkpme-pagetrans-text-color: #ffffff;
	background: radial-gradient(circle at 50% 40%,
		color-mix(in srgb, var(--pkpme-pagetrans-bg) 80%, var(--pkpme-pagetrans-accent)) 0%,
		var(--pkpme-pagetrans-bg) 60%,
		#000000 100%);
}

/* 7) Premium Light — jasny premium gradient. */
.pkpme-page-overlay.pkpme-pt-premium_light {
	--pkpme-pagetrans-text-color: #111111;
	background: radial-gradient(circle at 50% 40%,
		#ffffff 0%,
		color-mix(in srgb, #ffffff 70%, var(--pkpme-pagetrans-accent)) 70%,
		#f0f0f0 100%);
}

/* 8) Gold Wipe — złota fala przesuwająca się od prawej. */
.pkpme-page-overlay.pkpme-pt-gold_wipe {
	background: linear-gradient(110deg,
		transparent 0%,
		transparent 20%,
		var(--pkpme-pagetrans-accent) 40%,
		color-mix(in srgb, var(--pkpme-pagetrans-bg) 70%, var(--pkpme-pagetrans-accent)) 55%,
		var(--pkpme-pagetrans-bg) 70%,
		var(--pkpme-pagetrans-bg) 100%);
	background-size: 250% 100%;
	background-position: 100% 0;
	opacity: 1;
	visibility: visible;
	transition: background-position var(--pkpme-pagetrans-duration) var(--pkpme-pagetrans-ease),
	            visibility 0s linear var(--pkpme-pagetrans-duration);
}
.pkpme-page-overlay.pkpme-pt-gold_wipe.is-out {
	background-position: 0% 0;
}

/* 9) Diagonal Wipe — clip-path po skosie. */
.pkpme-page-overlay.pkpme-pt-diagonal_wipe {
	clip-path: polygon(-30% 130%, -30% 130%, -30% 130%, -30% 130%);
	-webkit-clip-path: polygon(-30% 130%, -30% 130%, -30% 130%, -30% 130%);
	opacity: 1;
	visibility: visible;
}
.pkpme-page-overlay.pkpme-pt-diagonal_wipe.is-out {
	clip-path: polygon(-30% -30%, 130% -30%, 130% 130%, -30% 130%);
	-webkit-clip-path: polygon(-30% -30%, 130% -30%, 130% 130%, -30% 130%);
}

/* 10) Split Horizontal — dwie połowy zamykają się od środka. */
.pkpme-page-overlay.pkpme-pt-split_horizontal,
.pkpme-page-overlay.pkpme-pt-split_vertical {
	background: transparent;
	opacity: 1;
	visibility: visible;
	overflow: hidden;
}
.pkpme-page-overlay.pkpme-pt-split_horizontal::before,
.pkpme-page-overlay.pkpme-pt-split_horizontal::after,
.pkpme-page-overlay.pkpme-pt-split_vertical::before,
.pkpme-page-overlay.pkpme-pt-split_vertical::after {
	content: "";
	position: absolute;
	background: var(--pkpme-pagetrans-bg);
	transition: transform var(--pkpme-pagetrans-duration) var(--pkpme-pagetrans-ease);
}
.pkpme-page-overlay.pkpme-pt-split_horizontal::before {
	left: 0; right: 0; top: 0;
	height: 51%; /* +1% nakładka eliminująca cienką szczelinę */
	transform: translateY(-100%);
}
.pkpme-page-overlay.pkpme-pt-split_horizontal::after {
	left: 0; right: 0; bottom: 0;
	height: 51%;
	transform: translateY(100%);
}
.pkpme-page-overlay.pkpme-pt-split_horizontal.is-out::before,
.pkpme-page-overlay.pkpme-pt-split_horizontal.is-out::after {
	transform: translateY(0);
}
.pkpme-page-overlay.pkpme-pt-split_vertical::before {
	top: 0; bottom: 0; left: 0;
	width: 51%;
	transform: translateX(-100%);
}
.pkpme-page-overlay.pkpme-pt-split_vertical::after {
	top: 0; bottom: 0; right: 0;
	width: 51%;
	transform: translateX(100%);
}
.pkpme-page-overlay.pkpme-pt-split_vertical.is-out::before,
.pkpme-page-overlay.pkpme-pt-split_vertical.is-out::after {
	transform: translateX(0);
}

/* 11) Organic Blob — koło rozszerza się do pełnego ekranu (z radial tłem). */
.pkpme-page-overlay.pkpme-pt-organic_blob {
	background: radial-gradient(circle at 50% 50%,
		color-mix(in srgb, var(--pkpme-pagetrans-bg) 70%, var(--pkpme-pagetrans-accent)) 0%,
		var(--pkpme-pagetrans-bg) 100%);
	clip-path: circle(0% at 50% 50%);
	-webkit-clip-path: circle(0% at 50% 50%);
	opacity: 1;
	visibility: visible;
	transition: clip-path var(--pkpme-pagetrans-duration) cubic-bezier(0.85, 0, 0.15, 1),
	            visibility 0s linear var(--pkpme-pagetrans-duration);
}
.pkpme-page-overlay.pkpme-pt-organic_blob.is-out {
	clip-path: circle(150% at 50% 50%);
	-webkit-clip-path: circle(150% at 50% 50%);
}

/* 12) Gold Curtain — kurtyna ze złotą obwódką u góry. */
.pkpme-page-overlay.pkpme-pt-gold_curtain {
	background: linear-gradient(180deg,
		var(--pkpme-pagetrans-accent) 0%,
		var(--pkpme-pagetrans-accent) 3%,
		var(--pkpme-pagetrans-bg) 6%,
		var(--pkpme-pagetrans-bg) 100%);
	transform: translateY(-100%);
	opacity: 1;
	visibility: visible;
	transition: transform var(--pkpme-pagetrans-duration) var(--pkpme-pagetrans-ease),
	            visibility 0s linear var(--pkpme-pagetrans-duration);
}
.pkpme-page-overlay.pkpme-pt-gold_curtain.is-out {
	transform: translateY(0);
}

/* 13) Ripple Zoom — koło rośnie od miejsca kliknięcia. */
.pkpme-page-overlay.pkpme-pt-ripple_zoom {
	background: transparent;
	overflow: hidden;
	opacity: 1;
	visibility: visible;
}
.pkpme-page-overlay.pkpme-pt-ripple_zoom .pkpme-pt-ripple-bubble {
	position: absolute;
	left: var(--pkpme-pt-x, 50%);
	top: var(--pkpme-pt-y, 50%);
	width: 20px;
	height: 20px;
	margin: -10px 0 0 -10px;
	border-radius: 50%;
	background: var(--pkpme-pagetrans-bg);
	transform: scale(0);
	transition: transform var(--pkpme-pagetrans-duration) cubic-bezier(0.65, 0, 0.35, 1);
}
.pkpme-page-overlay.pkpme-pt-ripple_zoom.is-out .pkpme-pt-ripple-bubble {
	transform: scale(200);
}

/* 14) Liquid Swipe — fala SVG-like przez clip-path z bumpem. */
.pkpme-page-overlay.pkpme-pt-liquid_swipe {
	background: var(--pkpme-pagetrans-bg);
	transform: translateX(-100%);
	opacity: 1;
	visibility: visible;
	clip-path: polygon(0 0, 92% 0, 100% 50%, 92% 100%, 0 100%);
	-webkit-clip-path: polygon(0 0, 92% 0, 100% 50%, 92% 100%, 0 100%);
	transition: transform var(--pkpme-pagetrans-duration) cubic-bezier(0.8, 0, 0.2, 1),
	            visibility 0s linear var(--pkpme-pagetrans-duration);
}
.pkpme-page-overlay.pkpme-pt-liquid_swipe.is-out {
	transform: translateX(0);
}

/* 15) Reveal Stripes — 5 pionowych pasów wjeżdża z góry, każdy z innym delayem. */
.pkpme-page-overlay.pkpme-pt-reveal_stripes {
	background: transparent;
	opacity: 1;
	visibility: visible;
	display: flex;
}
.pkpme-page-overlay.pkpme-pt-reveal_stripes::before {
	display: none;
}
.pkpme-page-overlay.pkpme-pt-reveal_stripes .pkpme-pt-stripes {
	position: absolute;
	inset: 0;
	display: flex;
}
.pkpme-page-overlay.pkpme-pt-reveal_stripes .pkpme-pt-stripes span {
	flex: 1 1 0;
	background: var(--pkpme-pagetrans-bg);
	transform: translateY(-100%);
	transition: transform var(--pkpme-pagetrans-duration) var(--pkpme-pagetrans-ease);
}
.pkpme-page-overlay.pkpme-pt-reveal_stripes .pkpme-pt-stripes span:nth-child(1) { transition-delay: 0s; }
.pkpme-page-overlay.pkpme-pt-reveal_stripes .pkpme-pt-stripes span:nth-child(2) { transition-delay: 0.05s; }
.pkpme-page-overlay.pkpme-pt-reveal_stripes .pkpme-pt-stripes span:nth-child(3) { transition-delay: 0.1s; }
.pkpme-page-overlay.pkpme-pt-reveal_stripes .pkpme-pt-stripes span:nth-child(4) { transition-delay: 0.15s; }
.pkpme-page-overlay.pkpme-pt-reveal_stripes .pkpme-pt-stripes span:nth-child(5) { transition-delay: 0.2s; }
.pkpme-page-overlay.pkpme-pt-reveal_stripes.is-out .pkpme-pt-stripes span {
	transform: translateY(0);
}

/* 16) Scale Fade — strona „delikatnie się oddala" pod zaciemnieniem. */
.pkpme-page-overlay.pkpme-pt-scale_fade {
	background: color-mix(in srgb, var(--pkpme-pagetrans-bg) 70%, transparent);
	backdrop-filter: blur(2px);
	-webkit-backdrop-filter: blur(2px);
}
.pkpme-page-overlay.pkpme-pt-scale_fade.is-out {
	background: color-mix(in srgb, var(--pkpme-pagetrans-bg) 92%, transparent);
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
}

/*
|--------------------------------------------------------------------------
| 20. Animated Gradient Border
|--------------------------------------------------------------------------
| Wykorzystuje conic-gradient z @property dla płynnej animacji
| obracającej obwódki, plus mask-composite dla efektu „tylko ramka”.
*/
@property --pkpme-gborder-angle {
	syntax: "<angle>";
	initial-value: 0deg;
	inherits: false;
}

html.pkpme-fx-gborder .pkpme-gradient-border,
html.pkpme-fx-gborder .pkpme-premium-border,
html.pkpme-fx-gborder .pkpme-glow-border,
html.pkpme-fx-gborder .pkpme-gborder {
	position: relative;
	border-radius: var(--pkpme-gborder-radius);
	/* Bez isolation, żeby ramka leżała na warstwie elementu (nie pod jego
	   tłem). pointer-events na ::before pozwala kliknąć w środek. */
}

html.pkpme-fx-gborder .pkpme-gradient-border::before,
html.pkpme-fx-gborder .pkpme-premium-border::before,
html.pkpme-fx-gborder .pkpme-glow-border::before,
html.pkpme-fx-gborder .pkpme-gborder::before {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	padding: var(--pkpme-gborder-thickness);
	background: conic-gradient(from var(--pkpme-gborder-angle),
		var(--pkpme-gborder-color1),
		var(--pkpme-gborder-color2),
		var(--pkpme-gborder-color3),
		var(--pkpme-gborder-color1));
	-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
	        mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
	-webkit-mask-composite: xor;
	        mask-composite: exclude;
	pointer-events: none;
	/* Bez ujemnego z-indeksu: maska wycina wnętrze, więc treść hosta jest
	   w pełni widoczna, a obwódka leży na samej krawędzi. */
}

html.pkpme-fx-gborder.pkpme-fx-gborder-animated .pkpme-gradient-border::before,
html.pkpme-fx-gborder.pkpme-fx-gborder-animated .pkpme-premium-border::before,
html.pkpme-fx-gborder.pkpme-fx-gborder-animated .pkpme-glow-border::before {
	animation: pkpme-gborder-spin var(--pkpme-gborder-speed) linear infinite;
}

@keyframes pkpme-gborder-spin {
	to {
		--pkpme-gborder-angle: 360deg;
	}
}

html.pkpme-fx-gborder.pkpme-fx-gborder-hover .pkpme-gradient-border::before,
html.pkpme-fx-gborder.pkpme-fx-gborder-hover .pkpme-premium-border::before,
html.pkpme-fx-gborder.pkpme-fx-gborder-hover .pkpme-glow-border::before {
	opacity: 0;
	transition: opacity 0.3s ease;
}

html.pkpme-fx-gborder.pkpme-fx-gborder-hover .pkpme-gradient-border:hover::before,
html.pkpme-fx-gborder.pkpme-fx-gborder-hover .pkpme-premium-border:hover::before,
html.pkpme-fx-gborder.pkpme-fx-gborder-hover .pkpme-glow-border:hover::before {
	opacity: 1;
}

html.pkpme-fx-gborder .pkpme-glow-border {
	box-shadow: 0 0 30px -8px color-mix(in srgb, var(--pkpme-gborder-color1) calc(var(--pkpme-gborder-glow-alpha) * 100%), transparent);
}

/*
|--------------------------------------------------------------------------
| 21. SVG Line Drawing
|--------------------------------------------------------------------------
| Długość ścieżki wylicza JS i zapisuje w CSS var --pkpme-svg-len.
*/
html.pkpme-fx-svgdraw .pkpme-svg-draw path,
html.pkpme-fx-svgdraw .pkpme-line-draw path {
	stroke-dasharray: var(--pkpme-svg-len, 2000);
	stroke-dashoffset: var(--pkpme-svg-len, 2000);
	transition: stroke-dashoffset var(--pkpme-svgdraw-duration) var(--pkpme-svgdraw-ease);
	transition-delay: var(--pkpme-svgdraw-delay);
}

html.pkpme-fx-svgdraw .pkpme-svg-draw.pkpme-svgdraw-in path,
html.pkpme-fx-svgdraw .pkpme-line-draw.pkpme-svgdraw-in path {
	stroke-dashoffset: 0;
}

/*
|--------------------------------------------------------------------------
| 22. Portfolio Hover (Magnetic Images)
|--------------------------------------------------------------------------
| Przesunięcie obrazu względem kursora ustawia JS. CSS odpowiada
| za overlay, skalowanie i animację tytułu.
*/
html.pkpme-fx-porthover .pkpme-porthover-target {
	position: relative;
	overflow: hidden;
}

html.pkpme-fx-porthover .pkpme-porthover-target img {
	transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
	will-change: transform;
}

html.pkpme-fx-porthover .pkpme-porthover-target:hover img {
	transform: scale(var(--pkpme-porthover-scale));
}

html.pkpme-fx-porthover.pkpme-fx-porthover-overlay .pkpme-porthover-target::after {
	content: "";
	position: absolute;
	inset: 0;
	background-color: var(--pkpme-porthover-overlay-color);
	opacity: 0;
	transition: opacity 0.35s ease;
	pointer-events: none;
}

html.pkpme-fx-porthover.pkpme-fx-porthover-overlay .pkpme-porthover-target:hover::after {
	opacity: var(--pkpme-porthover-overlay-alpha);
}

html.pkpme-fx-porthover.pkpme-fx-porthover-title .pkpme-porthover-target h2,
html.pkpme-fx-porthover.pkpme-fx-porthover-title .pkpme-porthover-target h3,
html.pkpme-fx-porthover.pkpme-fx-porthover-title .pkpme-porthover-target .pkpme-porthover-title {
	position: absolute;
	bottom: 16px;
	left: 18px;
	right: 18px;
	color: #fff;
	transform: translate3d(0, 30px, 0);
	opacity: 0;
	transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.35s ease;
	z-index: 2;
	pointer-events: none;
	margin: 0;
}

html.pkpme-fx-porthover.pkpme-fx-porthover-title .pkpme-porthover-target:hover h2,
html.pkpme-fx-porthover.pkpme-fx-porthover-title .pkpme-porthover-target:hover h3,
html.pkpme-fx-porthover.pkpme-fx-porthover-title .pkpme-porthover-target:hover .pkpme-porthover-title {
	transform: translate3d(0, 0, 0);
	opacity: 1;
}

/*
|--------------------------------------------------------------------------
| 23. Premium Loading Screen (Preloader)
|--------------------------------------------------------------------------
*/
.pkpme-preloader {
	position: fixed;
	inset: 0;
	z-index: 2147483000;
	background-color: var(--pkpme-preloader-bg);
	color: var(--pkpme-preloader-color);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 18px;
	transition: opacity var(--pkpme-preloader-fadeout) ease, visibility 0s linear var(--pkpme-preloader-fadeout);
	opacity: 1;
	visibility: visible;
}

.pkpme-preloader.is-hidden {
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
}

.pkpme-preloader-text {
	font-size: 38px;
	font-weight: 600;
	letter-spacing: 0.05em;
}

.pkpme-preloader-logo img {
	max-width: 240px;
	max-height: 100px;
	width: auto;
	height: auto;
}

.pkpme-preloader-line {
	margin-top: 18px;
	width: 260px;
	max-width: 70vw;
	height: 2px;
	background: color-mix(in srgb, var(--pkpme-preloader-color) 18%, transparent);
	border-radius: 1px;
	overflow: hidden;
}

.pkpme-preloader-line::after {
	content: "";
	display: block;
	height: 100%;
	width: 35%;
	background: var(--pkpme-preloader-accent);
	animation: pkpme-pl-line 1.2s ease-in-out infinite;
	transform: translateX(-110%);
}

@keyframes pkpme-pl-line {
	0% { transform: translateX(-110%); }
	100% { transform: translateX(320%); }
}

.pkpme-preloader.pkpme-pl-soft_gradient {
	background: linear-gradient(135deg, var(--pkpme-preloader-bg) 0%, color-mix(in srgb, var(--pkpme-preloader-bg) 60%, var(--pkpme-preloader-accent)) 100%);
}

.pkpme-preloader.pkpme-pl-minimal_light {
	background-color: #fafafa;
	color: #111111;
}

.pkpme-preloader.pkpme-pl-minimal_light .pkpme-preloader-line {
	background: rgba(0, 0, 0, 0.1);
}

/* Inner wrapper — wszystkie nowe tryby trafiają wewnątrz .pkpme-pl-inner */
.pkpme-preloader .pkpme-pl-inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 18px;
	transition: opacity calc(var(--pkpme-preloader-fadeout) * 0.7) ease,
	            transform calc(var(--pkpme-preloader-fadeout) * 0.7) ease,
	            filter calc(var(--pkpme-preloader-fadeout) * 0.7) ease;
}

.pkpme-preloader.pkpme-pl-blur-out.is-hidden .pkpme-pl-inner {
	filter: blur(12px);
}

.pkpme-preloader.pkpme-pl-scale-out.is-hidden .pkpme-pl-inner {
	transform: scale(0.92);
}

.pkpme-preloader-subtext {
	font-size: 13px;
	opacity: 0.65;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.pkpme-preloader .pkpme-preloader-logo img {
	max-width: var(--pkpme-preloader-logo-size, 64px);
	max-height: var(--pkpme-preloader-logo-size, 64px);
}

/* Dolny pasek postępu — opcjonalny dla każdego trybu */
.pkpme-pl-bottom-progress {
	position: absolute;
	left: 0; right: 0; bottom: 0;
	height: 2px;
	background: color-mix(in srgb, var(--pkpme-preloader-color) 10%, transparent);
	overflow: hidden;
}

.pkpme-pl-bottom-progress::after {
	content: "";
	display: block;
	width: 30%;
	height: 100%;
	background: var(--pkpme-preloader-accent);
	animation: pkpme-pl-line 1.4s ease-in-out infinite;
}

/* ✨ Ring Spinner */
.pkpme-pl-ring {
	width: 48px;
	height: 48px;
	border-radius: 50%;
	border: 3px solid color-mix(in srgb, var(--pkpme-preloader-color) 12%, transparent);
	border-top-color: var(--pkpme-preloader-accent);
	animation: pkpme-pl-spin 1s linear infinite;
}

.pkpme-pl-premium_gold .pkpme-pl-ring {
	width: 96px;
	height: 96px;
	position: absolute;
	border-width: 2px;
	border-top-color: var(--pkpme-preloader-accent);
	border-right-color: color-mix(in srgb, var(--pkpme-preloader-accent) 40%, transparent);
}

@keyframes pkpme-pl-spin {
	to { transform: rotate(360deg); }
}

/* ✨ Double Ring */
.pkpme-pl-dring {
	position: relative;
	width: 60px;
	height: 60px;
}
.pkpme-pl-dring span {
	position: absolute;
	inset: 0;
	border-radius: 50%;
	border: 2px solid transparent;
}
.pkpme-pl-dring span:nth-child(1) {
	border-top-color: var(--pkpme-preloader-accent);
	border-right-color: var(--pkpme-preloader-accent);
	animation: pkpme-pl-spin 1.1s linear infinite;
}
.pkpme-pl-dring span:nth-child(2) {
	inset: 8px;
	border-bottom-color: var(--pkpme-preloader-color);
	border-left-color: var(--pkpme-preloader-color);
	animation: pkpme-pl-spin 1.4s linear reverse infinite;
	opacity: 0.5;
}

/* ✨ Dots — pulsujące */
.pkpme-pl-dots,
.pkpme-pl-dots-wave {
	display: flex;
	gap: 10px;
}
.pkpme-pl-dots span,
.pkpme-pl-dots-wave span {
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: var(--pkpme-preloader-accent);
	animation: pkpme-pl-bounce 0.9s ease-in-out infinite both;
}
.pkpme-pl-dots span:nth-child(2),
.pkpme-pl-dots-wave span:nth-child(2) { animation-delay: 0.15s; }
.pkpme-pl-dots span:nth-child(3),
.pkpme-pl-dots-wave span:nth-child(3) { animation-delay: 0.3s; }
.pkpme-pl-dots-wave span:nth-child(4) { animation-delay: 0.45s; }
.pkpme-pl-dots-wave span:nth-child(5) { animation-delay: 0.6s; }

@keyframes pkpme-pl-bounce {
	0%, 80%, 100% { transform: scale(0.55); opacity: 0.5; }
	40%           { transform: scale(1.0);  opacity: 1; }
}

/* ✨ Pulse */
.pkpme-pl-pulse {
	width: 50px;
	height: 50px;
	border-radius: 50%;
	background: var(--pkpme-preloader-accent);
	animation: pkpme-pl-pulse-anim 1.2s ease-in-out infinite;
}
@keyframes pkpme-pl-pulse-anim {
	0%   { transform: scale(0.4); opacity: 0.9; }
	100% { transform: scale(1.6); opacity: 0; }
}

/* ✨ Glow Pulse */
.pkpme-pl-glow-pulse {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 22px 36px;
	border-radius: 100px;
	font-weight: 600;
	letter-spacing: 0.08em;
	box-shadow: 0 0 0 0 color-mix(in srgb, var(--pkpme-preloader-accent) 60%, transparent);
	animation: pkpme-pl-glow 2s ease-in-out infinite;
}
@keyframes pkpme-pl-glow {
	0%, 100% { box-shadow: 0 0 0 0   color-mix(in srgb, var(--pkpme-preloader-accent) 50%, transparent); }
	50%      { box-shadow: 0 0 40px 14px color-mix(in srgb, var(--pkpme-preloader-accent) 30%, transparent); }
}

/* ✨ Premium Gold — pierścień obraca się wokół loga/inicjałów */
.pkpme-pl-premium_gold {
	background: radial-gradient(circle at center, #1a1a1a 0%, #0a0a0a 80%);
}
.pkpme-pl-premium_gold .pkpme-pl-inner {
	position: relative;
	width: 140px;
	height: 140px;
	justify-content: center;
}

/* ✨ Gradient Bars */
.pkpme-pl-bars {
	display: flex;
	gap: 6px;
	align-items: flex-end;
	height: 48px;
}
.pkpme-pl-bars span {
	width: 6px;
	height: 100%;
	background: linear-gradient(180deg, var(--pkpme-preloader-accent) 0%, color-mix(in srgb, var(--pkpme-preloader-accent) 30%, transparent) 100%);
	border-radius: 3px;
	animation: pkpme-pl-bars-anim 0.9s ease-in-out infinite alternate;
	transform-origin: bottom center;
}
.pkpme-pl-bars span:nth-child(2) { animation-delay: 0.12s; }
.pkpme-pl-bars span:nth-child(3) { animation-delay: 0.24s; }
.pkpme-pl-bars span:nth-child(4) { animation-delay: 0.36s; }
@keyframes pkpme-pl-bars-anim {
	from { transform: scaleY(0.25); }
	to   { transform: scaleY(1); }
}

/* ✨ Animated Text (typewriter) */
.pkpme-pl-typewriter {
	font-size: 28px;
	font-weight: 500;
	letter-spacing: 0.04em;
	border-right: 2px solid var(--pkpme-preloader-accent);
	white-space: nowrap;
	overflow: hidden;
	width: 0;
	animation: pkpme-pl-type 2.4s steps(20, end) infinite alternate,
	           pkpme-pl-caret 0.8s steps(2) infinite;
}
@keyframes pkpme-pl-type {
	0%   { width: 0; }
	100% { width: 12ch; }
}
@keyframes pkpme-pl-caret {
	50% { border-color: transparent; }
}

/* ✨ Ripple */
.pkpme-pl-ripple {
	position: relative;
	width: 90px;
	height: 90px;
}
.pkpme-pl-ripple span {
	position: absolute;
	inset: 0;
	border: 2px solid var(--pkpme-preloader-accent);
	border-radius: 50%;
	opacity: 0;
	animation: pkpme-pl-ripple-anim 1.6s ease-out infinite;
}
.pkpme-pl-ripple span:nth-child(2) { animation-delay: 0.4s; }
.pkpme-pl-ripple span:nth-child(3) { animation-delay: 0.8s; }
@keyframes pkpme-pl-ripple-anim {
	0%   { transform: scale(0.3); opacity: 0.8; }
	100% { transform: scale(1.6); opacity: 0; }
}

/* ✨ Particles */
.pkpme-pl-particles {
	position: relative;
	width: 120px;
	height: 120px;
}
.pkpme-pl-particles span {
	position: absolute;
	left: 50%;
	top: 50%;
	width: 6px;
	height: 6px;
	margin: -3px 0 0 -3px;
	border-radius: 50%;
	background: var(--pkpme-preloader-accent);
	opacity: 0.7;
	animation: pkpme-pl-particle 2.4s ease-in-out infinite;
}
.pkpme-pl-particles span:nth-child(1)  { animation-delay: 0s;    --pkpme-px:  44px; --pkpme-py: -22px; }
.pkpme-pl-particles span:nth-child(2)  { animation-delay: 0.18s; --pkpme-px: -38px; --pkpme-py:  18px; }
.pkpme-pl-particles span:nth-child(3)  { animation-delay: 0.36s; --pkpme-px:  20px; --pkpme-py:  48px; }
.pkpme-pl-particles span:nth-child(4)  { animation-delay: 0.54s; --pkpme-px: -22px; --pkpme-py: -42px; }
.pkpme-pl-particles span:nth-child(5)  { animation-delay: 0.72s; --pkpme-px:  50px; --pkpme-py:  10px; }
.pkpme-pl-particles span:nth-child(6)  { animation-delay: 0.9s;  --pkpme-px: -48px; --pkpme-py: -10px; }
.pkpme-pl-particles span:nth-child(7)  { animation-delay: 1.08s; --pkpme-px:  10px; --pkpme-py:  50px; }
.pkpme-pl-particles span:nth-child(8)  { animation-delay: 1.26s; --pkpme-px: -10px; --pkpme-py: -50px; }
.pkpme-pl-particles span:nth-child(9)  { animation-delay: 1.44s; --pkpme-px:  35px; --pkpme-py:  35px; }
.pkpme-pl-particles span:nth-child(10) { animation-delay: 1.62s; --pkpme-px: -35px; --pkpme-py: -35px; }
.pkpme-pl-particles span:nth-child(11) { animation-delay: 1.8s;  --pkpme-px:  46px; --pkpme-py: -26px; }
.pkpme-pl-particles span:nth-child(12) { animation-delay: 1.98s; --pkpme-px: -46px; --pkpme-py:  26px; }
@keyframes pkpme-pl-particle {
	0%, 100% { transform: translate3d(0, 0, 0) scale(0.3); opacity: 0; }
	50%      { transform: translate3d(var(--pkpme-px, 0), var(--pkpme-py, 0), 0) scale(1); opacity: 1; }
}

/* ✨ Fade Only — minimal: tylko gradient + tekst */
.pkpme-pl-fade_only {
	background: radial-gradient(ellipse at center, color-mix(in srgb, var(--pkpme-preloader-bg) 90%, var(--pkpme-preloader-accent)) 0%, var(--pkpme-preloader-bg) 80%);
}

/* === Preloader 1.0.8 — advanced presety inspirowane Awwwards / Apple / Linear === */

/* ✨ Logo Only — czyste logo + opcjonalny tekst */
.pkpme-pl-logo_only .pkpme-pl-inner {
	gap: 24px;
}
.pkpme-pl-logo_only .pkpme-preloader-text {
	font-size: 14px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	opacity: 0.6;
	font-weight: 500;
}

/* ✨ Logo + Ring — logo w środku, złoty pierścień obraca się dookoła */
.pkpme-pl-logo_ring .pkpme-pl-inner {
	position: relative;
	width: 160px;
	height: 160px;
	justify-content: center;
}
.pkpme-pl-logo_ring .pkpme-preloader-logo {
	z-index: 2;
}
.pkpme-pl-logo_ring .pkpme-pl-ring {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border-width: 2px;
	border-color: color-mix(in srgb, var(--pkpme-preloader-accent) 15%, transparent);
	border-top-color: var(--pkpme-preloader-accent);
	border-right-color: color-mix(in srgb, var(--pkpme-preloader-accent) 40%, transparent);
	animation-duration: 1.4s;
}
.pkpme-pl-logo_ring .pkpme-preloader-text {
	position: absolute;
	bottom: -42px;
	left: 50%;
	transform: translateX(-50%);
	font-size: 12px;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	opacity: 0.6;
	white-space: nowrap;
}

/* ✨ Logo + Progress — logo + cienki pasek pod nim */
.pkpme-pl-logo_progress .pkpme-pl-inner {
	gap: 22px;
}
.pkpme-pl-logo_progress .pkpme-preloader-line {
	width: 200px;
	margin-top: 0;
}

/* ✨ Brand Badge — logo w „karcie" z cieniem i obwódką */
.pkpme-pl-brand_badge .pkpme-pl-inner {
	padding: 36px 44px;
	background: color-mix(in srgb, var(--pkpme-preloader-color) 6%, transparent);
	border: 1px solid color-mix(in srgb, var(--pkpme-preloader-color) 10%, transparent);
	border-radius: 18px;
	box-shadow: 0 22px 60px -25px rgba(0, 0, 0, 0.6);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	gap: 14px;
}
.pkpme-pl-brand_badge .pkpme-preloader-text {
	font-size: 18px;
	letter-spacing: 0.04em;
}
.pkpme-pl-brand_badge .pkpme-preloader-subtext {
	font-size: 11px;
}

/* ✨ Letter Stagger — litery wchodzą po kolei (JS dzieli na span-y) */
.pkpme-pl-letter_stagger .pkpme-preloader-text {
	display: inline-flex;
	gap: 2px;
}
.pkpme-pl-letter_stagger .pkpme-preloader-text span {
	display: inline-block;
	opacity: 0;
	transform: translateY(20px);
	animation: pkpme-pl-letter 1.8s cubic-bezier(0.2, 0.7, 0.3, 1) infinite both;
}
@keyframes pkpme-pl-letter {
	0%   { opacity: 0; transform: translateY(20px); }
	30%  { opacity: 1; transform: translateY(0); }
	70%  { opacity: 1; transform: translateY(0); }
	100% { opacity: 0; transform: translateY(-20px); }
}

/* ✨ Gradient Shimmer — animowany gradient na tekście */
.pkpme-pl-gradient_shimmer .pkpme-preloader-text {
	background: linear-gradient(90deg,
		color-mix(in srgb, var(--pkpme-preloader-color) 35%, transparent) 0%,
		var(--pkpme-preloader-color) 25%,
		var(--pkpme-preloader-accent) 50%,
		var(--pkpme-preloader-color) 75%,
		color-mix(in srgb, var(--pkpme-preloader-color) 35%, transparent) 100%);
	background-size: 200% 100%;
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	-webkit-text-fill-color: transparent;
	animation: pkpme-pl-shimmer 2.4s linear infinite;
	font-size: 42px;
	letter-spacing: 0.06em;
}
@keyframes pkpme-pl-shimmer {
	0%   { background-position: 200% 0; }
	100% { background-position: -200% 0; }
}

/* ✨ Liquid Drop — animowana kropla (SVG-like przez border-radius) */
.pkpme-pl-liquid_drop .pkpme-pl-visual {
	width: 70px;
	height: 70px;
}
.pkpme-pl-drop {
	width: 100%;
	height: 100%;
	background: var(--pkpme-preloader-accent);
	border-radius: 50%;
	animation: pkpme-pl-drop 2.2s ease-in-out infinite;
	box-shadow: 0 0 30px 5px color-mix(in srgb, var(--pkpme-preloader-accent) 40%, transparent);
}
@keyframes pkpme-pl-drop {
	0%, 100% { border-radius: 50%; transform: scale(1); }
	25%      { border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%; transform: scale(1.1); }
	50%      { border-radius: 30% 60% 70% 40% / 50% 60% 30% 60%; transform: scale(0.9); }
	75%      { border-radius: 60% 40% 30% 70% / 40% 70% 30% 60%; transform: scale(1.05); }
}

/* ✨ Morph Dots — 3 kropki które łączą się w pasek */
.pkpme-pl-morph_dots .pkpme-pl-mdots {
	position: relative;
	width: 90px;
	height: 18px;
}
.pkpme-pl-morph_dots .pkpme-pl-mdots span {
	position: absolute;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background: var(--pkpme-preloader-accent);
	animation: pkpme-pl-morph 2s ease-in-out infinite;
}
.pkpme-pl-morph_dots .pkpme-pl-mdots span:nth-child(1) { left:  0;    animation-delay: 0s; }
.pkpme-pl-morph_dots .pkpme-pl-mdots span:nth-child(2) { left: 36px;  animation-delay: 0.2s; }
.pkpme-pl-morph_dots .pkpme-pl-mdots span:nth-child(3) { left: 72px;  animation-delay: 0.4s; }
@keyframes pkpme-pl-morph {
	0%, 100% { transform: scale(1); opacity: 0.6; }
	30%      { transform: scale(1.4); opacity: 1; }
}

/* ✨ Premium Wave — pozioma fala 3 punktów + ślad */
.pkpme-pl-premium_wave .pkpme-pl-wave {
	display: flex;
	gap: 6px;
	align-items: center;
}
.pkpme-pl-premium_wave .pkpme-pl-wave span {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--pkpme-preloader-accent);
	box-shadow: 0 0 12px color-mix(in srgb, var(--pkpme-preloader-accent) 60%, transparent);
	animation: pkpme-pl-wave-anim 1.4s ease-in-out infinite;
}
.pkpme-pl-premium_wave .pkpme-pl-wave span:nth-child(1) { animation-delay: 0s; }
.pkpme-pl-premium_wave .pkpme-pl-wave span:nth-child(2) { animation-delay: 0.15s; }
.pkpme-pl-premium_wave .pkpme-pl-wave span:nth-child(3) { animation-delay: 0.3s; }
.pkpme-pl-premium_wave .pkpme-pl-wave span:nth-child(4) { animation-delay: 0.45s; }
.pkpme-pl-premium_wave .pkpme-pl-wave span:nth-child(5) { animation-delay: 0.6s; }
@keyframes pkpme-pl-wave-anim {
	0%, 100% { transform: translateY(0); opacity: 0.4; }
	50%      { transform: translateY(-12px); opacity: 1; }
}

/* ✨ Counter — duży licznik 0% → 100% (CSS counter-reset / inkremenetuje JS-em opcjonalnie) */
.pkpme-pl-counter .pkpme-pl-counter-num {
	font-size: 80px;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	letter-spacing: -0.04em;
	color: var(--pkpme-preloader-color);
	line-height: 1;
}
.pkpme-pl-counter .pkpme-pl-counter-num::after {
	content: "%";
	font-size: 0.5em;
	margin-left: 4px;
	opacity: 0.5;
}
.pkpme-pl-counter .pkpme-pl-counter-bar {
	margin-top: 16px;
	width: 240px;
	height: 1px;
	background: color-mix(in srgb, var(--pkpme-preloader-color) 12%, transparent);
	position: relative;
	overflow: hidden;
}
.pkpme-pl-counter .pkpme-pl-counter-bar::after {
	content: "";
	position: absolute;
	left: 0; top: 0;
	height: 100%;
	width: 0;
	background: var(--pkpme-preloader-accent);
	animation: pkpme-pl-counter-fill var(--pkpme-pl-counter-duration, 2.2s) ease-out forwards;
}
@keyframes pkpme-pl-counter-fill {
	to { width: 100%; }
}

/*
|--------------------------------------------------------------------------
| 24. Horizontal Scroll Sections (eksperymentalne)
|--------------------------------------------------------------------------
*/
html.pkpme-fx-hscroll .pkpme-horizontal-scroll {
	position: relative;
	overflow: hidden;
}

html.pkpme-fx-hscroll .pkpme-horizontal-scroll .pkpme-horizontal-track {
	display: flex;
	gap: 20px;
	will-change: transform;
	transition: transform 0.08s linear;
}

html.pkpme-fx-hscroll .pkpme-horizontal-scroll .pkpme-horizontal-item {
	flex: 0 0 auto;
}

html.pkpme-fx-hscroll .pkpme-horizontal-scroll.pkpme-hscroll-snap .pkpme-horizontal-track {
	scroll-snap-type: x mandatory;
}

html.pkpme-fx-hscroll .pkpme-horizontal-scroll.pkpme-hscroll-snap .pkpme-horizontal-item {
	scroll-snap-align: start;
}

/*
|--------------------------------------------------------------------------
| 25. Pinned Storytelling (eksperymentalne)
|--------------------------------------------------------------------------
*/
html.pkpme-fx-pinned .pkpme-pinned-story {
	position: relative;
}

html.pkpme-fx-pinned .pkpme-pinned-story .pkpme-story-visual {
	position: sticky;
	top: 12vh;
	height: 76vh;
	display: flex;
	align-items: center;
	justify-content: center;
}

html.pkpme-fx-pinned .pkpme-pinned-story .pkpme-story-step {
	transition: opacity 0.45s ease, transform 0.45s ease, text-shadow 0.45s ease;
	opacity: 0.35;
}

html.pkpme-fx-pinned .pkpme-pinned-story .pkpme-story-step.is-active {
	opacity: 1;
}

html.pkpme-fx-pinned.pkpme-fx-pinned-scale .pkpme-pinned-story .pkpme-story-step.is-active {
	transform: scale(1.02);
}

html.pkpme-fx-pinned.pkpme-fx-pinned-glow .pkpme-pinned-story .pkpme-story-step.is-active {
	text-shadow: 0 0 24px color-mix(in srgb, var(--pkpme-active-glow-color) 50%, transparent);
}

/*
|--------------------------------------------------------------------------
| 26. Scroll Velocity (eksperymentalne)
|--------------------------------------------------------------------------
| Wartości transform/filter ustawia JavaScript na podstawie prędkości scrolla.
*/
html.pkpme-fx-velocity .pkpme-velocity,
html.pkpme-fx-velocity .pkpme-velocity-image,
html.pkpme-fx-velocity .pkpme-velocity-text {
	will-change: transform, filter;
	transition: filter 0.18s ease, transform 0.18s ease;
}

/*
|--------------------------------------------------------------------------
| 9. Dostępność — ograniczenie ruchu
|--------------------------------------------------------------------------
| Twarda siatka bezpieczeństwa. JavaScript dodatkowo wyłącza efekty.
*/
@media (prefers-reduced-motion: reduce) {

	.pkpme-cursor-dot,
	.pkpme-cursor-ring {
		display: none !important;
	}

	html.pkpme-js .pkpme-reveal-init {
		opacity: 1 !important;
		transform: none !important;
		filter: none !important;
		transition: none !important;
	}

	html.pkpme-fx-lift .pkpme-lift-target,
	html.pkpme-fx-magnetic .pkpme-magnetic-btn,
	html.pkpme-fx-active-section .pkpme-active-section,
	html.pkpme-fx-imgzoom .pkpme-zoom-target img {
		transition: none !important;
	}

	html.pkpme-fx-lift .pkpme-lift-target:hover {
		transform: none !important;
	}

	html.pkpme-fx-imgzoom .pkpme-zoom-target:hover img {
		transform: none !important;
	}

	html.pkpme-fx-shine .pkpme-shine-target:hover::after,
	html.pkpme-fx-glow.pkpme-fx-glow-animated .pkpme-glow-section::before,
	html.pkpme-fx-kenburns .pkpme-kenburns-layer,
	html.pkpme-fx-kenburns .pkpme-kenburns-bg {
		animation: none !important;
	}

	/* === Faza 2 === */

	html.pkpme-fx-imask .pkpme-imask-init {
		clip-path: inset(0) !important;
		transition: none !important;
	}

	html.pkpme-fx-textreveal .pkpme-tr-w,
	html.pkpme-fx-textreveal .pkpme-tr-l,
	html.pkpme-fx-textreveal .pkpme-tr-line {
		opacity: 1 !important;
		transform: none !important;
		filter: none !important;
		transition: none !important;
	}

	html.pkpme-fx-tilt .pkpme-tilt-target {
		transform: none !important;
		transition: none !important;
	}

	html.pkpme-fx-ctareveal .pkpme-cta-reveal,
	html.pkpme-fx-ctareveal .pkpme-premium-cta {
		opacity: 1 !important;
		transform: none !important;
		transition: none !important;
	}

	html.pkpme-fx-ctareveal.pkpme-fx-ctareveal-pulse .pkpme-cta-reveal .wp-block-button__link,
	html.pkpme-fx-ctareveal.pkpme-fx-ctareveal-pulse .pkpme-cta-reveal .kb-button,
	html.pkpme-fx-ctareveal.pkpme-fx-ctareveal-pulse .pkpme-premium-cta .wp-block-button__link,
	html.pkpme-fx-ctareveal.pkpme-fx-ctareveal-pulse .pkpme-premium-cta .kb-button,
	html.pkpme-fx-floating .pkpme-float,
	html.pkpme-fx-floating .pkpme-float-slow,
	html.pkpme-fx-floating .pkpme-float-medium,
	html.pkpme-fx-floating .pkpme-float-fast,
	.pkpme-ripple-fx {
		animation: none !important;
	}

	.pkpme-cursor-tooltip {
		display: none !important;
	}

	.pkpme-progress-bar {
		transition: none !important;
	}

	/* Faza 2 część 2 — wyłączenia w reduced-motion. */
	.pkpme-page-overlay {
		transition: none !important;
	}

	html.pkpme-fx-gborder.pkpme-fx-gborder-animated .pkpme-gradient-border::before,
	html.pkpme-fx-gborder.pkpme-fx-gborder-animated .pkpme-premium-border::before,
	html.pkpme-fx-gborder.pkpme-fx-gborder-animated .pkpme-glow-border::before,
	.pkpme-preloader-line::after {
		animation: none !important;
	}

	html.pkpme-fx-svgdraw .pkpme-svg-draw path,
	html.pkpme-fx-svgdraw .pkpme-line-draw path {
		stroke-dashoffset: 0 !important;
		transition: none !important;
	}

	html.pkpme-fx-porthover .pkpme-porthover-target img,
	html.pkpme-fx-porthover.pkpme-fx-porthover-overlay .pkpme-porthover-target::after,
	html.pkpme-fx-porthover.pkpme-fx-porthover-title .pkpme-porthover-target h2,
	html.pkpme-fx-porthover.pkpme-fx-porthover-title .pkpme-porthover-target h3,
	html.pkpme-fx-porthover.pkpme-fx-porthover-title .pkpme-porthover-target .pkpme-porthover-title {
		transition: none !important;
	}

	html.pkpme-fx-porthover .pkpme-porthover-target:hover img {
		transform: none !important;
	}

	html.pkpme-fx-pinned .pkpme-pinned-story .pkpme-story-step,
	html.pkpme-fx-velocity .pkpme-velocity,
	html.pkpme-fx-velocity .pkpme-velocity-image,
	html.pkpme-fx-velocity .pkpme-velocity-text,
	html.pkpme-fx-hscroll .pkpme-horizontal-scroll .pkpme-horizontal-track {
		transition: none !important;
		transform: none !important;
		filter: none !important;
	}
}