/* ============================================================
   fx.css — light scroll & hover interactivity for CleanWater
   Uses `translate` (compositor) + `transform` (zoom/tilt) apart
   ============================================================ */

/* ---- reduced motion: kill everything ---- */
@media (prefers-reduced-motion: reduce) {
	.heroBg,
	.heroGlowF,
	.heroFxDot,
	.aboutUsBlock .aboutImgWrap img,
	.heroEyebrowLine,
	.heroBlock h1,
	.heroBlock .heroSub,
	.heroBlock .heroBtns {
		-webkit-animation: none !important;
		animation: none !important;
	}
	.fx-rise,
	.fx-tilt {
		opacity: 1 !important;
		translate: none !important;
		scale: 1 !important;
		-webkit-transform: none !important;
		transform: none !important;
		-webkit-transition: none !important;
		transition: none !important;
	}
	.fx-in.cabColumn,
	.serviceColumn:hover,
	.pricingColumn:hover,
	.serviceColumn:hover .icnWrap,
	.serviceColumn:hover .imgHolder img,
	.processColumn:hover .icnWrap,
	.btnTheme:hover,
	.btnHeroOutline:hover,
	.btn-dark:hover,
	.btn-outline-light:hover {
		-webkit-transform: none !important;
		transform: none !important;
		translate: 0 !important;
		box-shadow: none !important;
		-webkit-animation: none !important;
		animation: none !important;
	}
	.fxProgress {
		display: none !important;
	}
}

/* ---- scroll progress bar ---- */
.fxProgress {
	position: fixed;
	top: 0;
	left: 0;
	height: 3px;
	width: 0;
	z-index: 2000;
	background: linear-gradient(90deg, #4c6ef5, #22b8cf);
	pointer-events: none;
}

/* ---- hero: ken-burns zoom + parallax headroom ---- */
.heroBg {
	top: -18%;
	bottom: -18%;
	-webkit-animation: fxHeroZoom 26s ease-in-out infinite alternate;
	animation: fxHeroZoom 26s ease-in-out infinite alternate;
	will-change: transform;
}
@-webkit-keyframes fxHeroZoom {
	from { -webkit-transform: scale(1); transform: scale(1); }
	to { -webkit-transform: scale(1.1); transform: scale(1.1); }
}
@keyframes fxHeroZoom {
	from { transform: scale(1); }
	to { transform: scale(1.1); }
}

/* ---- hero: decorative layer ---- */
.heroFxLayer {
	position: absolute;
	inset: 0;
	overflow: hidden;
	pointer-events: none;
	z-index: 1;
}
.heroGlowF {
	position: absolute;
	width: 54vmin;
	height: 54vmin;
	right: 6%;
	top: 14%;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(76, 111, 245, .34) 0%, rgba(34, 185, 207, .14) 52%, transparent 72%);
	filter: blur(6px);
	-webkit-animation: fxGlowPulse 11s ease-in-out infinite;
	animation: fxGlowPulse 11s ease-in-out infinite;
	will-change: transform, opacity;
}
.heroFxDot {
	position: absolute;
	border-radius: 50%;
	background: rgba(255, 255, 255, .5);
	box-shadow: 0 0 12px rgba(255, 255, 255, .35);
	-webkit-animation: fxFloatY 7s ease-in-out infinite;
	animation: fxFloatY 7s ease-in-out infinite;
	will-change: translate;
}
.heroFxDot.d1 { -webkit-animation-delay: .2s; animation-delay: .2s; background: rgba(255, 255, 255, .55); }
.heroFxDot.d2 { background: rgba(34, 185, 207, .75); -webkit-animation-delay: 1.4s; animation-delay: 1.4s; box-shadow: 0 0 10px rgba(34, 185, 207, .5); }
.heroFxDot.d3 { background: rgba(76, 111, 245, .7); -webkit-animation-delay: 2.6s; animation-delay: 2.6s; box-shadow: 0 0 12px rgba(76, 111, 245, .55); }

/* ---- hero: entrance ---- */
.heroEyebrowLine {
	-webkit-animation: fxLineGrow .9s ease .05s both;
	animation: fxLineGrow .9s ease .05s both;
	will-change: transform;
}
.heroBlock h1 {
	-webkit-animation: fxHeroUp 1s cubic-bezier(.22, .61, .36, 1) .15s both;
	animation: fxHeroUp 1s cubic-bezier(.22, .61, .36, 1) .15s both;
}
.heroBlock .heroSub {
	-webkit-animation: fxHeroUp 1s cubic-bezier(.22, .61, .36, 1) .33s both;
	animation: fxHeroUp 1s cubic-bezier(.22, .61, .36, 1) .33s both;
}
.heroBlock .heroBtns {
	-webkit-animation: fxHeroUp 1s cubic-bezier(.22, .61, .36, 1) .5s both;
	animation: fxHeroUp 1s cubic-bezier(.22, .61, .36, 1) .5s both;
}
@-webkit-keyframes fxHeroUp {
	from { opacity: 0; translate: 0 36px; }
	to { opacity: 1; translate: 0 0; }
}
@keyframes fxHeroUp {
	from { opacity: 0; translate: 0 36px; }
	to { opacity: 1; translate: 0 0; }
}
@-webkit-keyframes fxLineGrow {
	from { -webkit-transform: scaleX(0); transform: scaleX(0); }
	to { -webkit-transform: scaleX(1); transform: scaleX(1); }
}
@keyframes fxLineGrow {
	from { transform: scaleX(0); }
	to { transform: scaleX(1); }
}

/* ---- scroll reveal (rise + stagger) ---- */
.fx-rise {
	opacity: 0;
	translate: 0 55px;
	scale: .94;
	-webkit-transition: opacity .85s ease, translate .85s cubic-bezier(.22, .61, .36, 1), scale .9s cubic-bezier(.22, .61, .36, 1), box-shadow .5s ease;
	transition: opacity .85s ease, translate .85s cubic-bezier(.22, .61, .36, 1), scale .9s cubic-bezier(.22, .61, .36, 1), box-shadow .5s ease;
	-webkit-transition-delay: var(--fxDelay, 0s);
	transition-delay: var(--fxDelay, 0s);
}
.fx-rise.fx-in {
	opacity: 1;
	translate: 0 0;
	scale: 1;
}

/* ---- counters: springy pop on reveal ---- */
.fx-in.cabColumn {
	-webkit-animation: fxPop .8s cubic-bezier(.34, 1.56, .64, 1) backwards;
	animation: fxPop .8s cubic-bezier(.34, 1.56, .64, 1) backwards;
	-webkit-animation-delay: var(--fxDelay, 0s);
	animation-delay: var(--fxDelay, 0s);
}
@-webkit-keyframes fxPop {
	from { scale: .4; }
	to { scale: 1; }
}
@keyframes fxPop {
	from { scale: .4; }
	to { scale: 1; }
}

/* ---- service cards: image/icon/whole-card hover ---- */
.serviceColumn .imgHolder img {
	-webkit-transition: transform .8s ease;
	transition: transform .8s ease;
	will-change: transform;
}
.serviceColumn:hover .imgHolder img {
	-webkit-transform: scale(1.07);
	transform: scale(1.07);
}
.serviceColumn .icnWrap,
.processColumn .icnWrap {
	-webkit-transition: transform .35s ease;
	transition: transform .35s ease;
	will-change: transform;
}
.serviceColumn:hover .icnWrap,
.processColumn:hover .icnWrap {
	-webkit-transform: translateY(-3px) scale(1.1);
	transform: translateY(-3px) scale(1.1);
}
.serviceColumn:hover,
.pricingColumn:hover {
	translate: 0 -8px;
	box-shadow: 0 24px 48px rgba(30, 41, 59, .16) !important;
}

/* ---- main CTAs: lift on hover ---- */
.btnTheme,
.btnHeroOutline,
.btn-dark,
.btn-outline-light {
	-webkit-transition: color .3s ease, background-color .3s ease, border-color .3s ease, box-shadow .3s ease, transform .3s ease !important;
	transition: color .3s ease, background-color .3s ease, border-color .3s ease, box-shadow .3s ease, transform .3s ease !important;
}
.btnTheme:hover,
.btnHeroOutline:hover,
.btn-dark:hover,
.btn-outline-light:hover {
	-webkit-transform: translateY(-3px);
	transform: translateY(-3px);
	box-shadow: 0 12px 24px rgba(30, 41, 59, .22);
}

/* ---- 3D tilt cards + cursor spotlight ---- */
.fx-tilt {
	-webkit-transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
	transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
	-webkit-transition: -webkit-transform .35s ease;
	transition: transform .35s ease;
	will-change: transform;
}
.fx-tilt::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	background: radial-gradient(560px circle at var(--mx, 50%) var(--my, 50%), rgba(76, 111, 245, .09), transparent 45%);
	opacity: 0;
	-webkit-transition: opacity .3s ease;
	transition: opacity .3s ease;
	pointer-events: none;
}
.fx-tilt:hover::after {
	opacity: 1;
}

/* ---- gentle float (about image) ---- */
.aboutUsBlock .aboutImgWrap img {
	-webkit-animation: fxFloatY 7s ease-in-out infinite alternate;
	animation: fxFloatY 7s ease-in-out infinite alternate;
	will-change: translate;
}
@-webkit-keyframes fxFloatY {
	from { translate: 0 0; }
	to { translate: 0 -8px; }
}
@keyframes fxFloatY {
	from { translate: 0 0; }
	to { translate: 0 -8px; }
}
@-webkit-keyframes fxGlowPulse {
	0%, 100% { -webkit-transform: scale(1); transform: scale(1); opacity: .7; }
	50% { -webkit-transform: scale(1.15); transform: scale(1.15); opacity: 1; }
}
@keyframes fxGlowPulse {
	0%, 100% { transform: scale(1); opacity: .7; }
	50% { transform: scale(1.15); opacity: 1; }
}
/* skip link - показва се само при Tab, за да не разсейва визуално */
.skipLink {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 2000;
	padding: 0.7rem 1.1rem;
	background: #4c6ef5;
	color: #fff;
	font-weight: 600;
	text-decoration: none;
	border-bottom-right-radius: 0.5rem;
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
	translate: 0 -120%;
	transition: translate 0.2s ease;
}
.skipLink:focus {
	translate: 0 0;
	outline: 2px solid #fff;
	outline-offset: -2px;
}
/* фокусът се премества програмно, затова не рисуваме контур около цялата страница */
#main:focus {
	outline: none;
}