/* GoldLine homepage visual enhancements (UA + EN) — premium pass */

/* ── 1. GoldLine brand watermark — subtle opacity breath, no marquee/shimmer ── */
.about-us-image-title {
	position: relative;
	margin-bottom: 10px;
	z-index: 0;
	overflow: hidden;
}

.about-us-image-title h2 {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin: 0;
	padding: 0.12em 0;
	font-size: clamp(72px, 5.729vw, 118px);
	font-weight: 700;
	line-height: 0.88em;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	writing-mode: vertical-rl;
	cursor: default;
	color: rgba(97, 83, 40, 0.1);
	background: none;
	-webkit-text-stroke: 1px rgba(189, 173, 123, 0.42);
	filter: none;
	animation: glBrandBreath 9s ease-in-out infinite;
}

.about-us-image-title h2::before,
.about-us-image-title h2::after {
	content: none;
	display: none;
}

@keyframes glBrandBreath {
	0%,
	100% {
		opacity: 0.72;
		-webkit-text-stroke-color: rgba(189, 173, 123, 0.34);
	}

	50% {
		opacity: 1;
		-webkit-text-stroke-color: rgba(189, 173, 123, 0.52);
	}
}

@media only screen and (max-width: 767px) {
	.about-us-image-title h2 {
		writing-mode: horizontal-tb;
		transform: none;
		text-align: center;
		width: 100%;
		font-size: clamp(48px, 13vw, 68px);
		padding: 0.08em 0 0.16em;
		letter-spacing: 0.12em;
	}
}

@media (prefers-reduced-motion: reduce) {
	.about-us-image-title h2 {
		animation: none;
		opacity: 0.88;
	}
}

/* ── 2. Icons — two variants for A/B comparison ── */

/* Shared base */
.gl-home-icon {
	width: 56px;
	height: 56px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 16px;
	flex-shrink: 0;
	transition: background 0.28s ease, border-color 0.28s ease, transform 0.28s ease;
}

.gl-home-icon i {
	font-size: 28px;
	line-height: 1;
	transition: color 0.28s ease;
}

/* A) Flat matte gold — services, about, why-choose */
.service-item .gl-home-icon,
.about-us-item-header .gl-home-icon,
.why-choose-item .gl-home-icon {
	background: var(--accent-color);
	box-shadow: none;
	border: none;
}

.service-item .gl-home-icon i,
.about-us-item-header .gl-home-icon i,
.why-choose-item .gl-home-icon i {
	color: var(--white-color);
}

.about-us-item-header .gl-home-icon {
	width: 52px;
	height: 52px;
	border-radius: 14px;
}

.about-us-item-header .gl-home-icon i {
	font-size: 24px;
}

.service-item .gl-home-icon {
	width: 58px;
	height: 58px;
}

.why-choose-item .gl-home-icon {
	width: 54px;
	height: 54px;
}

.about-us-item:hover .about-us-item-header .gl-home-icon,
.why-choose-item:hover .gl-home-icon {
	transform: translateY(-2px);
	box-shadow: none;
}

.service-item:hover .gl-home-icon,
.service-item.active .gl-home-icon {
	background: rgba(255, 255, 255, 0.2);
	box-shadow: none;
}

.service-item:hover .gl-home-icon i,
.service-item.active .gl-home-icon i {
	color: var(--white-color);
}

/* B) Soft glass — how-it-works block */
.how-works-item .gl-home-icon {
	width: 54px;
	height: 54px;
	background: rgba(255, 255, 255, 0.5);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	border: 1px solid rgba(189, 173, 123, 0.28);
	box-shadow: none;
}

.how-works-item .gl-home-icon i {
	color: var(--accent-color);
}

.how-works-item:hover .gl-home-icon {
	background: rgba(255, 255, 255, 0.22);
	border-color: rgba(255, 255, 255, 0.38);
	transform: translateY(-2px);
	box-shadow: none;
}

.how-works-item:hover .gl-home-icon i {
	color: var(--white-color);
}

/* Neutralize legacy image icon transforms */
.about-us-item:hover .about-us-item-header .icon-box img,
.service-item.active .service-item-body .icon-box img,
.service-item:hover .service-item-body .icon-box img,
.how-works-item:hover .icon-box img,
.why-choose-item:hover .icon-box img {
	filter: none;
	transform: none;
}

/* ── 3. Step numbers 01–04 — solid gold, clean reverse on hover ── */
.how-works-item-no {
	text-align: right;
	margin: 8px -12px -22px 0;
}

.how-works-item-no h2 {
	display: inline-block;
	font-size: clamp(68px, 8.5vw, 96px);
	font-weight: 700;
	line-height: 0.92em;
	color: var(--accent-secondary-color);
	opacity: 0.82;
	background: none;
	-webkit-text-stroke: 0;
	transition: color 0.35s ease, opacity 0.35s ease, transform 0.35s ease;
}

.how-works-item:hover .how-works-item-no h2 {
	color: var(--primary-color);
	opacity: 1;
	background: none;
	-webkit-text-stroke: 0;
	transform: scale(1.02);
	text-shadow: none;
}

/* ── 4. Services — frosted glass ~65% photo visibility ── */
.service-item::before {
	background: rgba(255, 255, 255, 0.35);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
}

.service-item-image {
	opacity: 1;
}

.service-item:not(.active):not(:hover) .service-item-image::after {
	opacity: 0;
}

/* ── 5. Trusted companies — centered, tighter, larger logos ── */
.our-projects .project-company-slider-box.gl-home-companies {
	justify-content: center;
	align-items: center;
	gap: 28px;
	margin-top: 44px;
}

.project-company-slider-content {
	max-width: none;
	flex: 0 0 auto;
	border-right: none;
	padding-right: 0;
	margin-right: 0;
	text-align: center;
}

.project-company-slider {
	width: auto;
	flex: 0 1 780px;
	max-width: min(780px, 100%);
}

.project-company-slider .company-logo {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 6px 10px;
}

.project-company-slider img {
	max-width: 220px;
	height: auto;
	max-height: 68px;
	object-fit: contain;
	opacity: 0.94;
	transition: opacity 0.28s ease, transform 0.28s ease;
}

.project-company-slider .company-logo:hover img {
	opacity: 1;
	transform: scale(1.03);
}

@media only screen and (max-width: 991px) {
	.our-projects .project-company-slider-box.gl-home-companies {
		flex-direction: column;
		gap: 14px;
		margin-top: 32px;
		align-items: center;
		justify-content: center;
	}

	.our-projects .gl-home-companies .project-company-slider-content {
		width: 100%;
		max-width: 100%;
		text-align: center;
	}

	.our-projects .gl-home-companies .project-company-slider-content h3 {
		margin: 0 auto;
		text-align: center;
	}

	.project-company-slider {
		width: 100%;
		flex: 1 1 auto;
		max-width: 100%;
	}

	.project-company-slider img {
		max-width: 180px;
		max-height: 72px;
	}
}

@media only screen and (max-width: 767px) {
	.our-projects .project-company-slider-box.gl-home-companies {
		margin-top: 28px;
		gap: 12px;
		align-items: center;
		justify-content: center;
	}

	.project-company-slider-content {
		width: 100%;
		max-width: 100%;
		text-align: center;
	}

	.project-company-slider-content h3 {
		margin: 0 auto;
		text-align: center;
	}

	.project-company-slider {
		width: 100%;
		max-width: 100%;
	}

	.project-company-slider .swiper {
		overflow: hidden;
		padding: 0 2px;
	}

	.project-company-slider img {
		max-width: 260px;
		max-height: 108px;
	}

	.project-company-slider .company-logo {
		padding: 4px 8px;
	}
}

/* ── 6. Subtle idle animations (shimmer / breath) ── */
@keyframes glSoftShimmer {
	0%,
	100% {
		transform: translateX(-120%) skewX(-12deg);
		opacity: 0;
	}

	18% {
		opacity: 0.55;
	}

	42% {
		transform: translateX(120%) skewX(-12deg);
		opacity: 0;
	}
}

@keyframes glHeroImageBreath {
	0%,
	100% {
		transform: scale(1);
	}

	50% {
		transform: scale(1.018);
	}
}

@keyframes glCardGlowPulse {
	0%,
	100% {
		opacity: 0.35;
	}

	50% {
		opacity: 0.65;
	}
}

.hero-kassone-media-image::after {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 45%;
	height: 100%;
	z-index: 2;
	pointer-events: none;
	background: linear-gradient(
		105deg,
		transparent 42%,
		rgba(255, 255, 255, 0.14) 50%,
		transparent 58%
	);
	animation: glSoftShimmer 7.5s ease-in-out infinite;
}

.hero-kassone-media-image img {
	animation: glHeroImageBreath 14s ease-in-out infinite;
}

.our-projects .project-item-image a figure {
	position: relative;
	overflow: hidden;
}

.our-projects .project-item-image a figure::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	background: linear-gradient(
		120deg,
		transparent 38%,
		rgba(189, 173, 123, 0.16) 50%,
		transparent 62%
	);
	width: 50%;
	height: 100%;
	animation: glSoftShimmer 9s ease-in-out infinite;
	animation-delay: 1.2s;
}

.our-projects .project-item:hover .project-item-image a figure::after {
	opacity: 0;
	transition: opacity 0.35s ease;
}

.about-us-image figure.image-anime::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 2;
	pointer-events: none;
	background: linear-gradient(
		115deg,
		transparent 40%,
		rgba(255, 255, 255, 0.22) 50%,
		transparent 60%
	);
	width: 40%;
	height: 100%;
	animation: glSoftShimmer 10s ease-in-out infinite;
}

.service-item::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	border-radius: inherit;
	box-shadow: inset 0 0 0 1px rgba(189, 173, 123, 0.08);
	animation: glCardGlowPulse 5s ease-in-out infinite;
}

.how-works-item {
	position: relative;
	overflow: hidden;
}

.how-works-item::after {
	content: "";
	position: absolute;
	top: -60%;
	left: -30%;
	width: 55%;
	height: 220%;
	background: linear-gradient(
		105deg,
		transparent 42%,
		rgba(255, 255, 255, 0.07) 50%,
		transparent 58%
	);
	pointer-events: none;
	animation: glSoftShimmer 11s ease-in-out infinite;
	animation-delay: 0.6s;
}

@media (prefers-reduced-motion: reduce) {
	.hero-kassone-media-image::after,
	.hero-kassone-media-image img,
	.our-projects .project-item-image a figure::after,
	.about-us-image figure.image-anime::before,
	.service-item::after,
	.how-works-item::after {
		animation: none;
	}

	.hero-kassone-media-image img {
		transform: none;
	}
}