/* =========================================================
   PROCES SERWISOWY
   ========================================================= */

.on-service-process {
	position: relative;
	overflow: hidden;
	isolation: isolate;

	padding-block:
		clamp(4.5rem, 7vw, 7rem);

	background:
		radial-gradient(
			circle at 14% 15%,
			rgba(211, 179, 106, 0.045),
			transparent 30rem
		),
		radial-gradient(
			circle at 88% 90%,
			rgba(211, 179, 106, 0.025),
			transparent 28rem
		),
		var(--color-background);
}


/* =========================================================
   DEKORACYJNE LINIE SEKCJI
   ========================================================= */

.on-service-process::before,
.on-service-process::after {
	position: absolute;
	z-index: 0;

	width:
		clamp(18rem, 26vw, 30rem);

	height: 1px;

	content: "";

	pointer-events: none;

	opacity: 0.45;
}


.on-service-process::before {
	top: 2.75rem;
	left: -6rem;

	background:
		linear-gradient(
			90deg,
			transparent,
			rgba(211, 179, 106, 0.3)
		);

	transform:
		rotate(-24deg);
}


.on-service-process::after {
	right: -6rem;
	bottom: 2.75rem;

	background:
		linear-gradient(
			90deg,
			rgba(211, 179, 106, 0.26),
			transparent
		);

	transform:
		rotate(-24deg);
}


.on-service-process > .container {
	position: relative;
	z-index: 1;
}


/* =========================================================
   GŁÓWNY PANEL
   ========================================================= */

.on-service-process__panel {
	position: relative;

	overflow: hidden;

	padding:
		clamp(2rem, 4vw, 3.75rem);

	border:
		1px solid
		rgba(255, 255, 255, 0.1);

	border-radius:
		var(--radius-medium);

	background:
		radial-gradient(
			circle at 10% 0%,
			rgba(211, 179, 106, 0.075),
			transparent 28rem
		),
		linear-gradient(
			145deg,
			rgba(255, 255, 255, 0.025),
			transparent 55%
		),
		var(--color-surface);

	box-shadow:
		0 2rem 5rem
		rgba(0, 0, 0, 0.2);
}


/* subtelny gradient górnej krawędzi */

.on-service-process__panel::before {
	position: absolute;

	top: 0;
	left: 4%;

	width: 24%;
	height: 1px;

	content: "";

	pointer-events: none;

	background:
		linear-gradient(
			90deg,
			var(--color-accent),
			rgba(211, 179, 106, 0.1),
			transparent
		);

	opacity: 0.55;
}


/* delikatne światło po prawej */

.on-service-process__panel::after {
	position: absolute;

	top: 20%;
	right: -10rem;

	width: 24rem;
	height: 24rem;

	content: "";

	pointer-events: none;

	border-radius: 50%;

	background:
		rgba(211, 179, 106, 0.025);

	filter:
		blur(6rem);
}


/* =========================================================
   NAGŁÓWEK
   ========================================================= */

.on-service-process__header {
	position: relative;
	z-index: 2;

	width: min(100%, 49rem);

	margin-bottom:
		clamp(3.5rem, 6vw, 5.5rem);
}


.on-service-process__header
.section-eyebrow {
	display: block;

	margin-bottom: 0.9rem;

	color: var(--color-accent);

	font-size: 0.72rem;
	font-weight: 700;

	line-height: 1;

	letter-spacing: 0.14em;

	text-transform: uppercase;
}


/* =========================================================
   TYTUŁ
   ========================================================= */

.on-service-process__title {
	max-width: 13ch;

	margin: 0;

	color: var(--color-white);

	font-size:
		clamp(
			2.6rem,
			4.1vw,
			4rem
		);

	font-weight: 800;

	line-height: 1.04;

	letter-spacing: -0.045em;

	text-wrap: balance;
}


/* =========================================================
   INTRO
   ========================================================= */

.on-service-process__intro {
	max-width: 44rem;

	margin:
		1.25rem 0 0;

	color:
		rgba(244, 242, 237, 0.65);

	font-size:
		clamp(
			0.95rem,
			1.3vw,
			1.08rem
		);

	line-height: 1.75;

	text-wrap: pretty;
}


/* =========================================================
   OŚ PROCESU
   ========================================================= */

.on-service-process__steps {
	position: relative;
	z-index: 2;

	display: grid;

	grid-template-columns:
		repeat(
			var(--process-count),
			minmax(0, 1fr)
		);

	margin: 0;
	padding: 0;

	list-style: none;
}


/* =========================================================
   PODSTAWOWA LINIA
   ========================================================= */

.on-service-process__steps::before {
	position: absolute;

	top: 1.35rem;

	right:
		calc(
			50% /
			var(--process-count)
		);

	left:
		calc(
			50% /
			var(--process-count)
		);

	z-index: 0;

	height: 1px;

	content: "";

	pointer-events: none;

	background:
		rgba(255, 255, 255, 0.095);
}


/* =========================================================
   ANIMOWANA ZŁOTA LINIA
   ========================================================= */

.on-service-process__steps::after {
	position: absolute;

	top: 1.35rem;

	right:
		calc(
			50% /
			var(--process-count)
		);

	left:
		calc(
			50% /
			var(--process-count)
		);

	z-index: 1;

	height: 1px;

	content: "";

	pointer-events: none;

	background:
		linear-gradient(
			90deg,
			rgba(211, 179, 106, 0.25),
			var(--color-accent) 50%,
			rgba(211, 179, 106, 0.45)
		);

	box-shadow:
		0 0 1rem
		rgba(211, 179, 106, 0.18);

	transform:
		scaleX(0);

	transform-origin:
		left center;

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


.on-service-process.is-visible
.on-service-process__steps::after {
	transform:
		scaleX(1);
}


/* =========================================================
   POJEDYNCZY ETAP
   ========================================================= */

.on-service-process__step {
	position: relative;
	z-index: 2;

	display: grid;

	grid-template-rows:
		auto auto auto 1fr;

	justify-items: center;

	min-width: 0;

	padding-inline:
		clamp(0.65rem, 1.6vw, 1.4rem);

	text-align: center;

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


/* =========================================================
   NUMER
   ========================================================= */

.on-service-process__number {
	position: relative;
	z-index: 3;

	display: grid;

	width: 2.7rem;
	height: 2.7rem;

	place-items: center;

	color: var(--color-accent);

	font-family: var(--font-heading);

	font-size: 0.78rem;
	font-weight: 800;

	border:
		1px solid
		rgba(211, 179, 106, 0.58);

	border-radius: 50%;

	background:
		var(--color-surface);

	box-shadow:
		0 0 0 0.45rem
		var(--color-surface);

	transition:
		color 350ms ease,
		border-color 350ms ease,
		background-color 350ms ease,
		box-shadow 350ms ease,
		transform
			450ms
			cubic-bezier(0.22, 1, 0.36, 1);
}


/* mała kropka pod numerem */

.on-service-process__number::after {
	position: absolute;

	left: 50%;
	bottom: -0.65rem;

	width: 0.25rem;
	height: 0.25rem;

	content: "";

	border-radius: 50%;

	background:
		var(--color-accent);

	opacity: 0;

	transform:
		translateX(-50%)
		scale(0);

	transition:
		opacity 350ms ease,
		transform 350ms ease;
}


/* =========================================================
   AKTYWNY / HOVER NUMER
   ========================================================= */

@media (hover: hover) {

	.on-service-process__step:hover {
		transform:
			translateY(-0.2rem);
	}


	.on-service-process__step:hover
	.on-service-process__number {
		color:
			var(--color-background);

		border-color:
			var(--color-accent);

		background:
			var(--color-accent);

		box-shadow:
			0 0 0 0.45rem
				var(--color-surface),

			0 0 1.8rem
				rgba(211, 179, 106, 0.18);

		transform:
			scale(1.08);
	}


	.on-service-process__step:hover
	.on-service-process__number::after {
		opacity: 1;

		transform:
			translateX(-50%)
			scale(1);
	}

}


/* =========================================================
   IKONA
   ========================================================= */

.on-service-process__icon {
	position: relative;

	display: grid;

	width: 5rem;
	height: 5rem;

	margin:
		2rem 0
		1.35rem;

	place-items: center;
}


/* subtelna poświata */

.on-service-process__icon::before {
	position: absolute;

	top: 50%;
	left: 50%;

	width: 4.75rem;
	height: 4.75rem;

	content: "";

	pointer-events: none;

	border-radius: 50%;

	background:
		radial-gradient(
			circle,
			rgba(211, 179, 106, 0.1),
			rgba(211, 179, 106, 0.02) 45%,
			transparent 72%
		);

	filter:
		blur(0.4rem);

	opacity: 0.35;

	transform:
		translate(-50%, -50%)
		scale(0.82);

	transition:
		opacity 400ms ease,
		transform
			500ms
			cubic-bezier(0.22, 1, 0.36, 1);
}


/* =========================================================
   PNG IKONY
   ========================================================= */

.on-service-process__icon-image {
	position: relative;
	z-index: 1;

	display: block;

	width: 4rem;
	height: 4rem;

	object-fit: contain;

	/*
	 * Zamiana czarnych PNG na złoty.
	 */

	filter:
		brightness(0)
		saturate(100%)
		invert(77%)
		sepia(31%)
		saturate(700%)
		hue-rotate(4deg)
		brightness(94%)
		contrast(88%);

	opacity: 0.78;

	transform:
		translateZ(0);

	transition:
		opacity 350ms ease,

		filter 400ms ease,

		transform
			500ms
			cubic-bezier(0.22, 1, 0.36, 1);
}


@media (hover: hover) {

	.on-service-process__step:hover
	.on-service-process__icon::before {
		opacity: 0.9;

		transform:
			translate(-50%, -50%)
			scale(1.1);
	}


	.on-service-process__step:hover
	.on-service-process__icon-image {
		opacity: 1;

		filter:
			brightness(0)
			saturate(100%)
			invert(82%)
			sepia(35%)
			saturate(820%)
			hue-rotate(3deg)
			brightness(100%)
			contrast(90%)
			drop-shadow(
				0 0.5rem 0.8rem
				rgba(211, 179, 106, 0.18)
			);

		transform:
			translateY(-0.2rem)
			scale(1.055);
	}

}


/* =========================================================
   TYTUŁ KROKU
   ========================================================= */

.on-service-process__step-title {
	max-width: 13rem;

	margin:
		0 0 0.65rem;

	color:
		var(--color-white);

	font-size:
		clamp(
			1rem,
			1.25vw,
			1.12rem
		);

	font-weight: 700;

	line-height: 1.3;

	letter-spacing: -0.02em;

	text-wrap: balance;
}


/* =========================================================
   OPIS KROKU
   ========================================================= */

.on-service-process__description {
	max-width: 14.5rem;

	margin: 0;

	color:
		rgba(244, 242, 237, 0.58);

	font-size: 0.78rem;

	line-height: 1.65;

	text-wrap: pretty;
}


/* =========================================================
   MESSAGE W EDYTORZE
   ========================================================= */

.on-service-process__message {
	padding: 2rem;

	color:
		var(--color-text-muted);

	text-align: center;

	border:
		1px dashed
		var(--color-border);

	border-radius:
		var(--radius-small);
}


/* =========================================================
   JS — STAN POCZĄTKOWY
   ========================================================= */

/*
 * Elementy chowamy tylko jeśli JS faktycznie
 * uruchomi animację.
 */

.on-service-process.is-animated
.on-service-process__header > * {
	opacity: 0;

	transform:
		translateY(1rem);
}


.on-service-process.is-animated
.on-service-process__step {
	opacity: 0;

	transform:
		translateY(1.4rem);
}


/* =========================================================
   WEJŚCIE NAGŁÓWKA
   ========================================================= */

.on-service-process.is-animated.is-visible
.on-service-process__header > * {
	animation:
		processHeaderIn
		700ms
		cubic-bezier(0.22, 1, 0.36, 1)
		forwards;
}


.on-service-process.is-animated.is-visible
.on-service-process__header > :nth-child(1) {
	animation-delay: 40ms;
}


.on-service-process.is-animated.is-visible
.on-service-process__header > :nth-child(2) {
	animation-delay: 110ms;
}


.on-service-process.is-animated.is-visible
.on-service-process__header > :nth-child(3) {
	animation-delay: 180ms;
}


/* =========================================================
   WEJŚCIE KROKÓW
   ========================================================= */

.on-service-process.is-animated.is-visible
.on-service-process__step {
	animation:
		processStepIn
		750ms
		cubic-bezier(0.22, 1, 0.36, 1)
		forwards;

	animation-delay:
		calc(
			260ms +
			(
				var(--process-index, 0) *
				120ms
			)
		);
}


/* =========================================================
   PULS NUMERU PO WEJŚCIU
   ========================================================= */

.on-service-process.is-animated.is-visible
.on-service-process__number {
	animation:
		processNumberPulse
		600ms
		cubic-bezier(0.22, 1, 0.36, 1)
		both;

	animation-delay:
		calc(
			410ms +
			(
				var(--process-index, 0) *
				120ms
			)
		);
}


/* =========================================================
   KEYFRAMES
   ========================================================= */

@keyframes processHeaderIn {

	from {
		opacity: 0;

		transform:
			translateY(1rem);
	}

	to {
		opacity: 1;

		transform:
			translateY(0);
	}

}


@keyframes processStepIn {

	from {
		opacity: 0;

		transform:
			translateY(1.4rem);
	}

	to {
		opacity: 1;

		transform:
			translateY(0);
	}

}


@keyframes processNumberPulse {

	0% {
		transform:
			scale(0.85);
	}

	55% {
		transform:
			scale(1.1);
	}

	100% {
		transform:
			scale(1);
	}

}


/* =========================================================
   MNIEJSZY LAPTOP
   ========================================================= */

@media (max-width: 74.99rem) {

	.on-service-process__panel {
		padding:
			2.5rem 2rem;
	}


	.on-service-process__step {
		padding-inline: 0.55rem;
	}


	.on-service-process__icon {
		width: 4.5rem;
		height: 4.5rem;
	}


	.on-service-process__icon-image {
		width: 3.5rem;
		height: 3.5rem;
	}


	.on-service-process__description {
		font-size: 0.72rem;
	}

}


/* =========================================================
   TABLET — PRZEJŚCIE NA OŚ PIONOWĄ
   ========================================================= */

@media (max-width: 61.99rem) {

	.on-service-process {
		padding-block: 5rem;
	}


	.on-service-process__panel {
		padding:
			2.25rem;
	}


	.on-service-process__header {
		margin-bottom: 3.5rem;
	}


	.on-service-process__steps {
		display: grid;

		grid-template-columns: 1fr;

		gap: 0;
	}


	/* podstawowa pionowa linia */

	.on-service-process__steps::before {
		top: 1.35rem;
		right: auto;
		bottom: 1.35rem;
		left: 1.35rem;

		width: 1px;
		height: auto;
	}


	/* animowana pionowa linia */

	.on-service-process__steps::after {
		top: 1.35rem;
		right: auto;
		bottom: 1.35rem;
		left: 1.35rem;

		width: 1px;
		height: auto;

		transform:
			scaleY(0);

		transform-origin:
			center top;
	}


	.on-service-process.is-visible
	.on-service-process__steps::after {
		transform:
			scaleY(1);
	}


	/* krok */

	.on-service-process__step {
		grid-template-columns:
			2.7rem
			minmax(0, 1fr);

		grid-template-rows:
			auto auto auto;

		column-gap: 1.5rem;

		justify-items: start;

		padding:
			0 0 2.75rem;

		text-align: left;
	}


	.on-service-process__step:last-child {
		padding-bottom: 0;
	}


	/* numer */

	.on-service-process__number {
		grid-column: 1;
		grid-row: 1 / span 3;
	}


	.on-service-process__number::after {
		display: none;
	}


	/* ikonka */

	.on-service-process__icon {
		grid-column: 2;
		grid-row: 1;

		width: 4.25rem;
		height: 4.25rem;

		margin:
			0 0 1rem;
	}


	.on-service-process__icon-image {
		width: 3.4rem;
		height: 3.4rem;
	}


	/* tytuł */

	.on-service-process__step-title {
		grid-column: 2;
		grid-row: 2;

		max-width: none;

		margin-bottom: 0.45rem;

		font-size: 1.05rem;
	}


	/* opis */

	.on-service-process__description {
		grid-column: 2;
		grid-row: 3;

		max-width: 30rem;

		font-size: 0.8rem;
	}

}


/* =========================================================
   TELEFON
   ========================================================= */

@media (max-width: 39.99rem) {

	.on-service-process {
		padding-block: 4rem;
	}


	.on-service-process::before {
		top: 1.5rem;
		left: -10rem;

		width: 20rem;

		opacity: 0.3;
	}


	.on-service-process::after {
		right: -10rem;
		bottom: 1.5rem;

		width: 20rem;

		opacity: 0.22;
	}


	.on-service-process__panel {
		padding:
			1.5rem 1.25rem;

		border-radius:
			var(--radius-small);
	}


	.on-service-process__panel::before {
		left: 1.25rem;

		width: 5rem;
	}


	.on-service-process__header {
		margin-bottom: 3rem;
	}


	.on-service-process__title {
		max-width: 11ch;

		font-size:
			clamp(
				2.25rem,
				11vw,
				3rem
			);
	}


	.on-service-process__intro {
		font-size: 0.9rem;
	}


	.on-service-process__step {
		grid-template-columns:
			2.5rem
			minmax(0, 1fr);

		column-gap: 1.2rem;

		padding-bottom: 2.5rem;
	}


	.on-service-process__steps::before,
	.on-service-process__steps::after {
		left: 1.25rem;
	}


	.on-service-process__number {
		width: 2.5rem;
		height: 2.5rem;
	}


	.on-service-process__icon {
		width: 3.8rem;
		height: 3.8rem;
	}


	.on-service-process__icon-image {
		width: 3rem;
		height: 3rem;
	}


	.on-service-process__description {
		font-size: 0.78rem;

		line-height: 1.6;
	}

}


/* =========================================================
   BARDZO MAŁY TELEFON
   ========================================================= */

@media (max-width: 23rem) {

	.on-service-process__panel {
		padding:
			1.25rem 1rem;
	}


	.on-service-process__step {
		column-gap: 1rem;
	}


	.on-service-process__title {
		font-size: 2.1rem;
	}

}


/* =========================================================
   REDUKCJA RUCHU
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

	.on-service-process.is-animated
	.on-service-process__header > *,

	.on-service-process.is-animated
	.on-service-process__step {
		opacity: 1;

		transform: none;

		animation: none;
	}


	.on-service-process__steps::after {
		transform: none;

		transition: none;
	}


	.on-service-process__step,
	.on-service-process__number,
	.on-service-process__number::after,
	.on-service-process__icon::before,
	.on-service-process__icon-image {
		transition: none;
	}


	.on-service-process__step:hover,
	.on-service-process__step:hover
	.on-service-process__number,
	.on-service-process__step:hover
	.on-service-process__icon-image {
		transform: none;
	}

}