/*
	Global site CSS overrides for ValoraGear.
	Auto-enqueued by functions.php — see the note at the top of functions.php.
	Add more .css files directly in this folder if you want them split up;
	each one is picked up automatically.
*/

/*
	Keep theme and Elementor content aligned while retaining safe page gutters.
	The desktop wrapper includes its 24px gutters, leaving 1340px for content.
*/
:root {
	--valoragear-content-width: 1340px;
	--valoragear-page-gutter: 16px;
}

.page-header .entry-title,
.site-footer .footer-inner,
.site-footer:not(.dynamic-footer),
.site-header .header-inner,
.site-header:not(.dynamic-header),
body:not([class*="elementor-page-"]) .site-main,
.valoragear-content {
	box-sizing: border-box;
	max-width: calc(var(--valoragear-content-width) + 32px);
	margin-inline: auto;
	padding-inline: var(--valoragear-page-gutter);
	width: 100%;
}

/* Match Elementor's default horizontal container padding to the site gutter. */
.elementor .e-con {
	--container-default-padding-left: var(--valoragear-page-gutter);
	--container-default-padding-right: var(--valoragear-page-gutter);
}

/* Add "valora-gradient-heading" to an Elementor Heading widget. */
.elementor-widget-heading.valora-gradient-heading .elementor-heading-title,
.elementor-heading-title.valora-gradient-heading,
h1.valora-gradient-heading,
h2.valora-gradient-heading,
h3.valora-gradient-heading,
h4.valora-gradient-heading,
h5.valora-gradient-heading,
h6.valora-gradient-heading {
	color: #9aeb3d;
}

@supports ((background-clip: text) or (-webkit-background-clip: text)) {
	.elementor-widget-heading.valora-gradient-heading .elementor-heading-title,
	.elementor-heading-title.valora-gradient-heading,
	h1.valora-gradient-heading,
	h2.valora-gradient-heading,
	h3.valora-gradient-heading,
	h4.valora-gradient-heading,
	h5.valora-gradient-heading,
	h6.valora-gradient-heading {
		-webkit-background-clip: text;
		background-clip: text;
		background-image: linear-gradient(180deg, #d8ff53 0%, #a9f442 45%, #58ca38 100%);
		-webkit-text-fill-color: transparent;
	}
}

/* Add "valora-blur" to any Elementor container or widget. */
.valora-blur,
.elementor-element.valora-blur {
	--valora-blur-strength: 8px;
	-webkit-backdrop-filter: blur(var(--valora-blur-strength)) saturate(110%);
	backdrop-filter: blur(var(--valora-blur-strength)) saturate(110%);
}

/* Add "valora-glass-panel" to an Elementor container or widget. */
.valora-glass-panel,
.elementor-element.valora-glass-panel {
	--valora-glass-light-x: 50%;
	--valora-glass-light-y: 0%;
	-webkit-backdrop-filter: blur(3px) saturate(115%) brightness(1.025);
	backdrop-filter: blur(3px) saturate(115%) brightness(1.025);
	background-color: rgba(12, 18, 10, 0.17) !important;
	background-image:
		radial-gradient(115% 100% at 0% 0%, rgba(255, 255, 255, 0.18) 0%, rgba(255, 255, 255, 0.045) 36%, transparent 64%),
		linear-gradient(135deg, rgba(31, 43, 26, 0.27) 0%, rgba(13, 18, 11, 0.12) 56%, rgba(255, 255, 255, 0.045) 100%) !important;
	border: 1px solid rgba(255, 255, 255, 0.2) !important;
	border-radius: 16px;
	box-shadow:
		0 20px 55px rgba(0, 0, 0, 0.22),
		0 4px 16px rgba(0, 0, 0, 0.12),
		inset 0 1px 0 rgba(255, 255, 255, 0.42),
		inset 1px 0 0 rgba(255, 255, 255, 0.12),
		inset 0 -1px 0 rgba(255, 255, 255, 0.08);
	isolation: isolate;
	overflow: hidden;
	position: relative;
}

.valora-glass-panel::after,
.elementor-element.valora-glass-panel::after {
	-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
	-webkit-mask-composite: xor;
	background: radial-gradient(190px circle at var(--valora-glass-light-x) var(--valora-glass-light-y), rgba(255, 255, 255, 0.98) 0%, rgba(195, 255, 147, 0.58) 28%, rgba(255, 255, 255, 0.16) 52%, transparent 72%);
	border-radius: inherit;
	content: "";
	inset: 0;
	mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
	mask-composite: exclude;
	opacity: 0.62;
	padding: 1px;
	pointer-events: none;
	position: absolute;
	transition: opacity 180ms ease;
	z-index: 2;
}

.valora-glass-panel:hover::after,
.elementor-element.valora-glass-panel:hover::after {
	opacity: 1;
}

@media (max-width: 767px) {
	.valora-glass-panel,
	.elementor-element.valora-glass-panel {
		border-radius: 16px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.valora-glass-panel,
	.elementor-element.valora-glass-panel {
		border-color: rgba(255, 255, 255, 0.4) !important;
	}

	.valora-glass-panel::after,
	.elementor-element.valora-glass-panel::after {
		display: none;
	}
}

/* Add "valora-glass-overlay" to a borderless hero overlay container. */
.valora-glass-overlay,
.elementor-element.valora-glass-overlay {
	background-color: rgba(8, 14, 7, 0.04) !important;
	border: 0 !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	isolation: isolate;
	overflow: hidden;
	position: relative;
}

.valora-glass-overlay::after,
.elementor-element.valora-glass-overlay::after {
	-webkit-backdrop-filter: blur(12px) saturate(118%) brightness(1.02);
	-webkit-mask-image: radial-gradient(ellipse 115% 110% at 0% 0%, #000 0%, rgba(0, 0, 0, 0.96) 28%, rgba(0, 0, 0, 0.56) 55%, transparent 82%);
	backdrop-filter: blur(12px) saturate(118%) brightness(1.02);
	background: radial-gradient(ellipse 115% 110% at 0% 0%, rgba(20, 33, 16, 0.34) 0%, rgba(12, 19, 10, 0.2) 42%, rgba(8, 13, 7, 0.06) 68%, transparent 84%);
	content: "";
	inset: 0;
	mask-image: radial-gradient(ellipse 115% 110% at 0% 0%, #000 0%, rgba(0, 0, 0, 0.96) 28%, rgba(0, 0, 0, 0.56) 55%, transparent 82%);
	pointer-events: none;
	position: absolute;
	z-index: 0;
}

.valora-glass-overlay > *,
.elementor-element.valora-glass-overlay > * {
	position: relative;
	z-index: 1;
}

/* Hero entrance sequence: add one class to each matching Elementor widget. */
.valora-motion-badge {
	animation: valora-motion-badge-in 750ms 100ms cubic-bezier(0.16, 1, 0.3, 1) both;
	transform-origin: left center;
}

.valora-motion-title {
	animation: valora-motion-title-in 850ms 300ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

.valora-motion-title-accent {
	animation: valora-motion-title-in 900ms 600ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

.valora-motion-copy {
	animation: valora-motion-copy-in 700ms 950ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

.valora-motion-benefits {
	--valora-benefits-motion-delay: 1200ms;
	--valora-benefits-motion-duration: 650ms;
	--valora-benefits-motion-stagger: 150ms;
}

.valora-motion-benefits .valora-hero-benefits__item {
	animation: valora-motion-benefit-in var(--valora-benefits-motion-duration) cubic-bezier(0.16, 1, 0.3, 1) both;
	animation-delay: calc(var(--valora-benefits-motion-delay) + (var(--valora-benefit-index, 0) * var(--valora-benefits-motion-stagger)));
}

.valora-motion-cta {
	animation: valora-motion-cta-in 700ms 1950ms cubic-bezier(0.16, 1, 0.3, 1) both;
	transform-origin: left center;
}

/* JavaScript takes ownership of the timeline when Web Animations is available. */
html.valora-motion-sequenced .valora-motion-badge,
html.valora-motion-sequenced .valora-motion-title,
html.valora-motion-sequenced .valora-motion-title-accent,
html.valora-motion-sequenced .valora-motion-copy,
html.valora-motion-sequenced .valora-motion-benefits .valora-hero-benefits__item,
html.valora-motion-sequenced .valora-motion-cta {
	animation: none !important;
}

@keyframes valora-motion-badge-in {
	0% {
		filter: blur(5px);
		opacity: 0;
		transform: translate3d(-16px, 0, 0) scale(0.96);
	}

	65% {
		filter: blur(0);
		opacity: 1;
		transform: translate3d(2px, 0, 0) scale(1.01);
	}

	100% {
		filter: blur(0);
		opacity: 1;
		transform: translate3d(0, 0, 0) scale(1);
	}
}

@keyframes valora-motion-title-in {
	0% {
		clip-path: inset(100% 0 0 0);
		filter: blur(5px);
		opacity: 0;
		transform: translate3d(0, 24px, 0);
	}

	100% {
		clip-path: inset(0 0 0 0);
		filter: blur(0);
		opacity: 1;
		transform: translate3d(0, 0, 0);
	}
}

@keyframes valora-motion-copy-in {
	0% {
		filter: blur(3px);
		opacity: 0;
		transform: translate3d(0, 14px, 0);
	}

	100% {
		filter: blur(0);
		opacity: 1;
		transform: translate3d(0, 0, 0);
	}
}

@keyframes valora-motion-benefit-in {
	0% {
		filter: blur(3px);
		opacity: 0;
		transform: translate3d(0, 18px, 0) scale(0.96);
	}

	70% {
		filter: blur(0);
		opacity: 1;
		transform: translate3d(0, -2px, 0) scale(1.01);
	}

	100% {
		filter: blur(0);
		opacity: 1;
		transform: translate3d(0, 0, 0) scale(1);
	}
}

@keyframes valora-motion-cta-in {
	0% {
		filter: blur(4px);
		opacity: 0;
		transform: translate3d(0, 18px, 0) scale(0.97);
	}

	68% {
		filter: blur(0);
		opacity: 1;
		transform: translate3d(0, -2px, 0) scale(1.008);
	}

	100% {
		filter: blur(0);
		opacity: 1;
		transform: translate3d(0, 0, 0) scale(1);
	}
}

@media (prefers-reduced-motion: reduce) {
	.valora-motion-badge,
	.valora-motion-title,
	.valora-motion-title-accent,
	.valora-motion-copy,
	.valora-motion-benefits .valora-hero-benefits__item,
	.valora-motion-cta {
		animation: none !important;
		filter: none !important;
		opacity: 1 !important;
		transform: none !important;
	}
}

@media (min-width: 768px) {
	:root {
		--valoragear-page-gutter: 20px;
	}

	.page-header .entry-title,
	.site-footer .footer-inner,
	.site-footer:not(.dynamic-footer),
	.site-header .header-inner,
	.site-header:not(.dynamic-header),
	body:not([class*="elementor-page-"]) .site-main,
	.valoragear-content {
		max-width: calc(var(--valoragear-content-width) + 40px);
	}
}

@media (min-width: 1200px) {
	:root {
		--valoragear-page-gutter: 24px;
	}

	.page-header .entry-title,
	.site-footer .footer-inner,
	.site-footer:not(.dynamic-footer),
	.site-header .header-inner,
	.site-header:not(.dynamic-header),
	body:not([class*="elementor-page-"]) .site-main,
	.valoragear-content {
		max-width: calc(var(--valoragear-content-width) + 48px);
	}
}