/* ==================================================
   CREATIVEGEN - ŚCIĄGA KLAS ANIMACJI

   .hover-lift / .cgn-hover-lift
   Unosi element po najechaniu i dodaje cień.

   .cgn-hover-scale
   Delikatnie powiększa element po najechaniu.

   .cgn-float
   Ciągłe, łagodne unoszenie elementu.

   .cgn-mouse
   Element porusza się zgodnie z ruchem myszy.

   .cgn-mouse-reverse
   Element porusza się przeciwnie do ruchu myszy.

   .cgn-tilt
   Efekt przestrzennego przechylenia elementu 3D.

   .cgn-reveal-up
   Pojawienie się elementu od dołu.

   .cgn-reveal-left
   Pojawienie się elementu z lewej strony.

   .cgn-reveal-right
   Pojawienie się elementu z prawej strony.

   .cgn-reveal-scale
   Pojawienie się z delikatnym powiększeniem.

   .cgn-delay-1 / .cgn-delay-2 / .cgn-delay-3
   Opóźnienie animacji pojawiania: 100 / 200 / 300 ms.

   Opcjonalnie:
   data-cgn-strength="20" - siła ruchu myszy.
   data-cgn-tilt="10"     - siła przechylenia 3D.

   .cgn-zoom
   Powiększa zdjęcie po najechaniu i przycina je do kontenera.

   .cgn-bg-zoom
   Powiększa obraz ustawiony jako tło kolumny Kadence.

   .cgn-stagger
   Animuje kolejno bezpośrednie elementy wewnątrz kontenera.

   .cgn-parallax
   Delikatnie przesuwa element podczas przewijania strony.

   .cgn-parallax-reverse
   Przesuwa element w przeciwnym kierunku podczas przewijania.

   .cgn-arrow-move
   Przesuwa ikonę lub strzałkę w prawo po najechaniu.

   .cgn-underline
   Animowane podkreślenie linku od lewej strony.

   .cgn-shine
   Dodaje przechodzący refleks do przycisku lub kafelka.

   .cgn-border-hover
   Podświetla obramowanie elementu po najechaniu.

   .cgn-image-pan
   Powiększa zdjęcie i delikatnie przesuwa je po najechaniu.

   .cgn-rotate-hover
   Delikatnie obraca element po najechaniu.

   Opcjonalnie:
   data-cgn-speed="0.08"
   Określa szybkość paralaksy. Zalecany zakres: 0.04-0.15.


/* ==================================================
   Creativegen - zmienne globalne
   ================================================== */

:root {
	--cgn-primary: var(--global-palette1);
	--cgn-primary-alt: var(--global-palette2);
	--cgn-heading: var(--global-palette3);
	--cgn-text: var(--global-palette4);
	--cgn-muted: var(--global-palette5);
	--cgn-border: var(--global-palette7);
	--cgn-background-alt: var(--global-palette8);
	--cgn-background: var(--global-palette9);

	--cgn-radius-sm: 6px;
	--cgn-radius-md: 12px;
	--cgn-radius-lg: 20px;

	--cgn-transition: 250ms ease;
	--cgn-shadow-sm: 0 8px 20px rgb(0 0 0 / 8%);
	--cgn-shadow-md: 0 12px 30px rgb(0 0 0 / 12%);
}


/* ==================================================
   Creativegen - klasy pomocnicze
   ================================================== */

.text-balance {
	text-wrap: balance;
}

.text-pretty {
	text-wrap: pretty;
}

.no-margin-last > :last-child {
	margin-bottom: 0;
}

.image-cover img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}


/* ==================================================
   Creativegen - animacje
   ================================================== */

@property --cgn-float-y {
	syntax: "<length>";
	inherits: false;
	initial-value: 0px;
}

:where(
	.hover-lift,
	.cgn-hover-lift,
	.cgn-hover-scale,
	.cgn-float,
	.cgn-mouse,
	.cgn-mouse-reverse,
	.cgn-tilt,
	.cgn-reveal-up,
	.cgn-reveal-left,
	.cgn-reveal-right,
	.cgn-reveal-scale
) {
	--cgn-mouse-x: 0px;
	--cgn-mouse-y: 0px;
	--cgn-reveal-x: 0px;
	--cgn-reveal-y: 0px;
	--cgn-hover-y: 0px;
	--cgn-rotate-x: 0deg;
	--cgn-rotate-y: 0deg;
	--cgn-scale: 1;

	translate: 0 calc(var(--cgn-hover-y) + var(--cgn-float-y));

	transform:
		translate3d(
			calc(var(--cgn-mouse-x) + var(--cgn-reveal-x)),
			calc(var(--cgn-mouse-y) + var(--cgn-reveal-y)),
			0
		)
		rotateX(var(--cgn-rotate-x))
		rotateY(var(--cgn-rotate-y))
		scale(var(--cgn-scale));

	transform-origin: center;
	transform-style: preserve-3d;

	transition:
		opacity 600ms ease var(--cgn-reveal-delay, 0ms),
		transform 450ms cubic-bezier(0.22, 1, 0.36, 1)
			var(--cgn-reveal-delay, 0ms),
		translate var(--cgn-transition),
		box-shadow var(--cgn-transition);
}


/* Unoszenie i powiększenie po najechaniu */

@media (hover: hover) and (pointer: fine) {
	:is(.hover-lift, .cgn-hover-lift):hover {
		--cgn-hover-y: -6px;

		box-shadow: var(--cgn-shadow-md);
	}

	.cgn-hover-scale:hover {
		--cgn-scale: 1.035;
	}
}


/* Ciągłe delikatne unoszenie */

.cgn-float {
	animation: cgn-float 4s ease-in-out infinite;
}

@keyframes cgn-float {
	0%,
	100% {
		--cgn-float-y: 0px;
	}

	50% {
		--cgn-float-y: -10px;
	}
}


/* Elementy sterowane ruchem myszy */

:where(
	.cgn-mouse,
	.cgn-mouse-reverse,
	.cgn-tilt
) {
	transition:
		opacity 600ms ease,
		transform 120ms linear,
		translate var(--cgn-transition),
		box-shadow var(--cgn-transition);
}


/* Animacje pojawiania */

.cgn-motion-ready
	:where(
		.cgn-reveal-up,
		.cgn-reveal-left,
		.cgn-reveal-right,
		.cgn-reveal-scale
	):not(.is-cgn-visible) {
	opacity: 0;
}

.cgn-motion-ready
	.cgn-reveal-up:not(.is-cgn-visible) {
	--cgn-reveal-y: 28px;
}

.cgn-motion-ready
	.cgn-reveal-left:not(.is-cgn-visible) {
	--cgn-reveal-x: -28px;
}

.cgn-motion-ready
	.cgn-reveal-right:not(.is-cgn-visible) {
	--cgn-reveal-x: 28px;
}

.cgn-motion-ready
	.cgn-reveal-scale:not(.is-cgn-visible) {
	--cgn-scale: 0.94;
}

.is-cgn-visible {
	opacity: 1;
	--cgn-reveal-x: 0px;
	--cgn-reveal-y: 0px;
	--cgn-scale: 1;
}


/* Opóźnienia animacji */

.cgn-delay-1 {
	--cgn-reveal-delay: 100ms;
}

.cgn-delay-2 {
	--cgn-reveal-delay: 200ms;
}

.cgn-delay-3 {
	--cgn-reveal-delay: 300ms;
}


/* Wyłączenie ruchu zgodnie z ustawieniami użytkownika */

@media (prefers-reduced-motion: reduce) {
	.cgn-float {
		animation: none;
	}

	:where(
		.hover-lift,
		.cgn-hover-lift,
		.cgn-hover-scale,
		.cgn-float,
		.cgn-mouse,
		.cgn-mouse-reverse,
		.cgn-tilt,
		.cgn-reveal-up,
		.cgn-reveal-left,
		.cgn-reveal-right,
		.cgn-reveal-scale
	) {
		opacity: 1;
		translate: none;
		transform: none;
	}
}

/* ==================================================
   Creativegen - animowanie elementów po kolei
   ================================================== */

.cgn-motion-ready .cgn-stagger > * {
	--cgn-stagger-y: 24px;

	opacity: 0;
	translate:
		0
		calc(
			var(--cgn-stagger-y) +
			var(--cgn-hover-y, 0px) +
			var(--cgn-float-y, 0px) +
			var(--cgn-parallax-y, 0px)
		);

	transition:
		opacity 600ms ease
			calc(var(--cgn-stagger-index, 0) * 90ms),
		translate 600ms cubic-bezier(0.22, 1, 0.36, 1)
			calc(var(--cgn-stagger-index, 0) * 90ms);
}

.cgn-motion-ready .cgn-stagger.is-cgn-visible > * {
	--cgn-stagger-y: 0px;

	opacity: 1;
}


/* ==================================================
   Creativegen - paralaksa podczas przewijania
   ================================================== */

:where(
	.cgn-parallax,
	.cgn-parallax-reverse
) {
	--cgn-parallax-y: 0px;

	translate:
		0
		calc(
			var(--cgn-parallax-y) +
			var(--cgn-hover-y, 0px) +
			var(--cgn-float-y, 0px)
		);

	will-change: translate;
}


/* ==================================================
   Creativegen - animacja strzałki
   ================================================== */

.cgn-arrow-move :where(
	svg,
	.kt-btn-svg-icon,
	.kadence-svg-iconset,
	.kb-svg-icon-wrap
) {
	transition: transform var(--cgn-transition);
}

@media (hover: hover) and (pointer: fine) {
	.cgn-arrow-move:hover :where(
		svg,
		.kt-btn-svg-icon,
		.kadence-svg-iconset,
		.kb-svg-icon-wrap
	),
	.cgn-arrow-move:focus-visible :where(
		svg,
		.kt-btn-svg-icon,
		.kadence-svg-iconset,
		.kb-svg-icon-wrap
	) {
		transform: translateX(5px);
	}
}


/* ==================================================
   Creativegen - animowane podkreślenie
   ================================================== */

.cgn-underline {
	color: inherit;
	text-decoration: none;
	background-image: linear-gradient(
		currentColor,
		currentColor
	);
	background-repeat: no-repeat;
	background-position: 0 100%;
	background-size: 0 2px;
	box-decoration-break: clone;

	transition: background-size var(--cgn-transition);
}

@media (hover: hover) and (pointer: fine) {
	.cgn-underline:hover,
	.cgn-underline:focus-visible {
		background-size: 100% 2px;
	}
}


/* ==================================================
   Creativegen - refleks
   ================================================== */

.cgn-shine {
	position: relative;
	overflow: hidden;
	isolation: isolate;
}

.cgn-shine::after {
	position: absolute;
	z-index: 2;
	top: -50%;
	left: -80%;
	width: 40%;
	height: 200%;
	content: "";
	pointer-events: none;

	background: linear-gradient(
		90deg,
		transparent,
		rgb(255 255 255 / 35%),
		transparent
	);

	transform: skewX(-20deg);
	transition: left 700ms ease;
}

@media (hover: hover) and (pointer: fine) {
	.cgn-shine:hover::after,
	.cgn-shine:focus-visible::after {
		left: 140%;
	}
}


/* ==================================================
   Creativegen - animowane obramowanie
   ================================================== */

.cgn-border-hover {
	border: 1px solid var(--cgn-border);

	transition:
		border-color var(--cgn-transition),
		box-shadow var(--cgn-transition);
}

@media (hover: hover) and (pointer: fine) {
	.cgn-border-hover:hover,
	.cgn-border-hover:focus-within {
		border-color: var(--cgn-primary);
		box-shadow:
			0 0 0 3px
			color-mix(
				in srgb,
				var(--cgn-primary) 18%,
				transparent
			);
	}
}


/* ==================================================
   Creativegen - przesuwanie zdjęcia
   ================================================== */

.cgn-image-pan,
.cgn-image-pan figure,
.cgn-image-pan picture,
.cgn-image-pan .kb-dynamic-image {
	overflow: hidden;
}

.cgn-image-pan img {
	display: block;
	width: 100%;
	height: auto;

	transition: transform 800ms
		cubic-bezier(0.22, 1, 0.36, 1);
}

@media (hover: hover) and (pointer: fine) {
	.cgn-image-pan img {
		transform: scale(1.08) translateX(-2%);
	}

	.cgn-image-pan:hover img {
		transform: scale(1.08) translateX(2%);
	}
}


/* ==================================================
   Creativegen - delikatny obrót
   ================================================== */

.cgn-rotate-hover {
	rotate: 0deg;
	transform-origin: center;

	transition: rotate var(--cgn-transition);
}

@media (hover: hover) and (pointer: fine) {
	.cgn-rotate-hover:hover {
		rotate: 4deg;
	}
}


/* ==================================================
   Creativegen - ograniczenie ruchu
   ================================================== */

@media (prefers-reduced-motion: reduce) {
	.cgn-stagger > * {
		opacity: 1 !important;
		translate: none !important;
	}

	:where(
		.cgn-parallax,
		.cgn-parallax-reverse
	) {
		--cgn-parallax-y: 0px !important;

		translate: none !important;
	}

	.cgn-arrow-move :where(
		svg,
		.kt-btn-svg-icon,
		.kadence-svg-iconset,
		.kb-svg-icon-wrap
	) {
		transform: none !important;
	}

	.cgn-shine::after {
		display: none;
	}

	.cgn-image-pan img {
		transform: none !important;
	}

	.cgn-rotate-hover {
		rotate: 0deg !important;
	}
}

/* ==================================================
   Creativegen - powiększanie zdjęcia
   ================================================== */

/* Klasa powinna być dodana do kontenera lub bloku obrazu. */
.cgn-zoom,
.cgn-zoom figure,
.cgn-zoom .kb-dynamic-image {
	overflow: hidden;
}

/* Obsługa zwykłych obrazów i dynamicznych obrazów Kadence. */
.cgn-zoom img,
.cgn-zoom .kb-dynamic-image img {
	display: block;
	width: 100%;
	transition: transform 600ms cubic-bezier(0.22, 1, 0.36, 1);
	transform-origin: center;
}

@media (hover: hover) and (pointer: fine) {
	.cgn-zoom:hover img,
	.cgn-zoom:hover .kb-dynamic-image img {
		transform: scale(1.08);
	}
}

@media (prefers-reduced-motion: reduce) {
	.cgn-zoom img,
	.cgn-zoom .kb-dynamic-image img {
		transition: none;
		transform: none;
	}
}

/* ==================================================
   Creativegen - dostępność
   ================================================== */

:where(
	a,
	button,
	input,
	select,
	textarea,
	summary,
	[tabindex]:not([tabindex="-1"])
):focus-visible {
	outline: 3px solid var(--cgn-primary);
	outline-offset: 3px;
}

.visually-hidden {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	padding: 0 !important;
	margin: -1px !important;
	overflow: hidden !important;
	clip: rect(0, 0, 0, 0) !important;
	white-space: nowrap !important;
	border: 0 !important;
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}
}

/* ==================================================
   Creativegen - interfejs przeglądarki
   ================================================== */

html {
	scrollbar-width: thin;
	scrollbar-color: var(--cgn-primary) var(--cgn-background-alt);
}

/* Paski przewijania - Chrome, Edge i Safari */
::-webkit-scrollbar {
	width: 12px;
	height: 12px;
}

::-webkit-scrollbar-track {
	background: var(--cgn-background-alt);
}

::-webkit-scrollbar-thumb {
	background-color: var(--cgn-primary);
	border: 3px solid var(--cgn-background-alt);
	border-radius: 999px;
}

::-webkit-scrollbar-thumb:hover {
	background-color: var(--cgn-primary-alt);
}

::-webkit-scrollbar-corner {
	background: var(--cgn-background-alt);
}

/* Kolor natywnych elementów formularzy */
:where(
	input[type="checkbox"],
	input[type="radio"],
	input[type="range"],
	progress
) {
	accent-color: var(--cgn-primary);
}

/* Kolor zaznaczenia tekstu */
::selection {
	color: var(--cgn-background);
	background-color: var(--cgn-primary);
}

/* Usunięcie własnych kolorów w trybie wysokiego kontrastu */
@media (forced-colors: active) {
	html {
		scrollbar-color: auto;
	}
}

/* ==================================================
   Creativegen - powiększanie tła Kadence
   ================================================== */

.cgn-bg-zoom > .kt-inside-inner-col {
	overflow: hidden;
	background-size: 100%;
	background-position: center;
	background-repeat: no-repeat;
	transition: background-size 600ms cubic-bezier(0.22, 1, 0.36, 1);
}

@media (hover: hover) and (pointer: fine) {
	.cgn-bg-zoom:hover > .kt-inside-inner-col {
		background-size: 108%;
	}
}

@media (prefers-reduced-motion: reduce) {
	.cgn-bg-zoom > .kt-inside-inner-col {
		transition: none;
	}
}




/* ==================================================
   Creativegen - komponenty
   ================================================== */


/* ==================================================
   Creativegen - style projektu
   ================================================== */