/* Firefox */
html {
	scrollbar-width: thin;
	scrollbar-color: #1ecad3 #060f1a;
}

/* Chrome, Edge, Safari */
html::-webkit-scrollbar {
	width: 11px;
}

html::-webkit-scrollbar-track-track {
	background: #060f1a;
}

html::-webkit-scrollbar-thumb {
	background: #1ecad3;
	border: 3px solid #060f1a;
	border-radius: 20px;
}

html::-webkit-scrollbar-thumb:hover {
	background: #27e0e9;
}

html::-webkit-scrollbar-corner {
	background: #060f1a;
}






/* =====================================================
   WEBFUNLY HERO – DIGITÁLNÍ PULZY
   Primární barva: #1ecad3
   ===================================================== */

#uvod {
	position: relative;
	overflow: hidden;
	isolation: isolate;
}

/* Jemná tyrkysová aura za monitorem */
#uvod::before {
	content: "";
	position: absolute;
	z-index: 0;
	top: 50%;
	right: -8%;
	width: min(760px, 58vw);
	aspect-ratio: 1;
	border-radius: 50%;
	background: radial-gradient(
		circle,
		rgba(30, 202, 211, 0.15) 0%,
		rgba(30, 202, 211, 0.06) 38%,
		transparent 72%
	);
	transform: translateY(-50%);
	pointer-events: none;
}

/* Canvas s datovými linkami a pulzy */
#uvod .webfunly-pulse-canvas {
	position: absolute;
	inset: 0;
	z-index: 1;
	width: 100%;
	height: 100%;
	pointer-events: none;
}

/* Obsah hero sekce nad animací */
#uvod > *:not(.webfunly-pulse-canvas) {
	position: relative;
	z-index: 2;
}

@media (max-width: 767px) {
	#uvod .webfunly-pulse-canvas {
		opacity: 0.65;
	}

	#uvod::before {
		right: -35%;
		width: 110vw;
	}
}

@media (prefers-reduced-motion: reduce) {
	#uvod .webfunly-pulse-canvas {
		opacity: 0.4;
	}
}




/* =====================================================
   WEBFUNLY – VERTIKÁLNÍ DIGITÁLNÍ PULZY
   Sekce: #ceny
   Primární barva: #1ecad3
   ===================================================== */

#ceny {
	position: relative;
	overflow: hidden;
	isolation: isolate;
}

/* Jemné probarvení téměř bílého pozadí */
#ceny::before,
#ceny::after {
	content: "";
	position: absolute;
	z-index: 0;
	border-radius: 50%;
	pointer-events: none;
}

/* Tyrkysová aura vpravo nahoře */
#ceny::before {
	top: -280px;
	right: -220px;
	width: 680px;
	height: 680px;
	background: radial-gradient(
		circle,
		rgba(30, 202, 211, 0.09) 0%,
		rgba(30, 202, 211, 0.035) 42%,
		transparent 72%
	);
}

/* Druhá velmi jemná aura vlevo dole */
#ceny::after {
	bottom: -340px;
	left: -260px;
	width: 760px;
	height: 760px;
	background: radial-gradient(
		circle,
		rgba(30, 202, 211, 0.065) 0%,
		rgba(30, 202, 211, 0.025) 42%,
		transparent 72%
	);
}

/* Canvas s vertikálními trasami */
#ceny .webfunly-price-pulse-canvas {
	position: absolute;
	inset: 0;
	z-index: 1;
	width: 100%;
	height: 100%;
	pointer-events: none;
}

/* Obsah sekce nad animací */
#ceny > *:not(.webfunly-price-pulse-canvas) {
	/*position: relative;*/
	z-index: 2;
}

@media (max-width: 767px) {
	#ceny .webfunly-price-pulse-canvas {
		opacity: 0.65;
	}

	#ceny::before {
		right: -420px;
	}

	#ceny::after {
		left: -480px;
	}
}

@media (prefers-reduced-motion: reduce) {
	#ceny .webfunly-price-pulse-canvas {
		opacity: 0.45;
	}
}












/* =====================================================
   FLASH PŘES ŽLUTÁ TLAČÍTKA
   Třída tlačítka: flash
   ===================================================== */

.flash {
	position: relative;
	overflow: hidden;
	isolation: isolate;
}

/* Světelný pás */
.flash::after {
	content: "";
	position: absolute;
	z-index: 5;
	top: -70%;
	left: -75%;
	width: 38%;
	height: 240%;
	pointer-events: none;

	background: linear-gradient(
		90deg,
		transparent 0%,
		rgba(255, 255, 255, 0.1) 20%,
		rgba(255, 255, 255, 0.8) 50%,
		rgba(255, 255, 255, 0.1) 80%,
		transparent 100%
	);

	filter: blur(2px);
	transform: rotate(18deg);
	opacity: 0;

	animation: buttonFlash 5.5s
		cubic-bezier(0.2, 0.65, 0.3, 1)
		infinite;
}

@keyframes buttonFlash {
	0%,
	72% {
		left: -75%;
		opacity: 0;
	}

	75% {
		opacity: 1;
	}

	88% {
		left: 145%;
		opacity: 0.85;
	}

	89%,
	100% {
		left: 145%;
		opacity: 0;
	}
}

@media (prefers-reduced-motion: reduce) {
	.flash::after {
		display: none;
		animation: none;
	}
}