/*
 * GA Site Core stylesheet.
 * Covers only what free Elementor cannot do natively: the GA Reviews Marquee widget,
 * entrance animations, the sticky header fallback and reduced-motion rules.
 * Values mirror tokens.json (Deep Ink and Mint). It does not restyle Elementor global classes.
 */

/* ===== Tokens used by this file (scoped, no dependency on Elementor variable names) ===== */
:root {
	--ga-color-surface: #0f1a1d;
	--ga-color-border: #22363b;
	--ga-color-border-strong: #34504f;
	--ga-color-text: #e6f0ee;
	--ga-color-text-muted: #95aba8;
	--ga-color-accent: #6fe3bf;
	--ga-space-1: 4px;
	--ga-space-4: 16px;
	--ga-space-5: 24px;
	--ga-space-6: 32px;
	--ga-space-8: 64px;
	--ga-radius-card: 14px;
	--ga-fs-body: 17px;
	--ga-fs-small: 14px;
	--ga-fw-body: 400;
	--ga-fw-strong: 600;
	--ga-lh-body: 1.6;
	--ga-lh-small: 1.5;
	--ga-review-w: 380px;
	--ga-motion-fast: 200ms;
	--ga-motion-base: 600ms;
	--ga-motion-ease: cubic-bezier(0.2, 0.7, 0.2, 1);
	--ga-motion-enter: 24px;
}

@media (max-width: 1024px) {
	:root {
		--ga-review-w: 360px;
	}
}

@media (max-width: 767px) {
	:root {
		--ga-fs-body: 16px;
		--ga-review-w: 300px;
	}
}

/* ===== Anchors and sticky header fallback ===== */
html {
	scroll-behavior: smooth;
}

[id] {
	scroll-margin-top: 72px;
}

@media (max-width: 767px) {
	[id] {
		scroll-margin-top: 64px;
	}
}

header.header {
	position: sticky;
	top: 0;
	z-index: 10;
}

/* ===== Entrance animations (CSS only) ===== */
@keyframes ga-fade-up {
	from {
		opacity: 0;
		transform: translateY(var(--ga-motion-enter));
	}
	to {
		opacity: 1;
		transform: none;
	}
}

.anim-enter {
	animation: ga-fade-up var(--ga-motion-base) var(--ga-motion-ease) both;
}

.anim-enter--d1 {
	animation-delay: 120ms;
}

.anim-enter--d2 {
	animation-delay: 240ms;
}

@supports (animation-timeline: view()) {
	.anim-reveal {
		animation: ga-fade-up linear both;
		animation-timeline: view();
		animation-range: entry 0% entry 35%;
	}
}

/* ===== GA Reviews Marquee ===== */
.ga-reviews {
	--ga-duration: var(--ga-duration-desktop, 70s);
	width: 100%;
}

@media (max-width: 767px) {
	.ga-reviews {
		--ga-duration: var(--ga-duration-mobile, 55s);
	}
}

.ga-reviews .reviews__viewport {
	overflow: hidden;
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 var(--ga-space-8), #000 calc(100% - var(--ga-space-8)), transparent);
	mask-image: linear-gradient(90deg, transparent, #000 var(--ga-space-8), #000 calc(100% - var(--ga-space-8)), transparent);
}

.ga-reviews .reviews__viewport:focus-visible {
	outline: 2px solid var(--ga-color-accent);
	outline-offset: 3px;
	border-radius: var(--ga-radius-card);
}

.ga-reviews .reviews__track {
	display: flex;
	align-items: stretch;
	gap: var(--ga-space-5);
	width: max-content;
	animation: ga-reviews-scroll var(--ga-duration) linear infinite;
}

.ga-reviews--pause .reviews__viewport:hover .reviews__track,
.ga-reviews--pause .reviews__viewport:focus-within .reviews__track {
	animation-play-state: paused;
}

@keyframes ga-reviews-scroll {
	from {
		transform: translateX(0);
	}
	to {
		transform: translateX(calc(-50% - var(--ga-space-5) / 2));
	}
}

.ga-reviews .card-review {
	flex: 0 0 var(--ga-review-w);
	display: flex;
	flex-direction: column;
	gap: var(--ga-space-4);
	padding: var(--ga-space-6);
	box-sizing: border-box;
	background: var(--ga-color-surface);
	border: 1px solid var(--ga-color-border);
	border-radius: var(--ga-radius-card);
	font-size: var(--ga-fs-body);
	line-height: var(--ga-lh-body);
	color: var(--ga-color-text);
}

@media (max-width: 767px) {
	.ga-reviews .card-review {
		padding: var(--ga-space-5);
	}
}

.ga-reviews .card-review__stars {
	display: block;
	width: 88px;
	height: 16px;
	color: var(--ga-color-accent);
}

.ga-reviews .card-review__quote {
	margin: 0;
	flex-grow: 1;
	color: var(--ga-color-text);
	text-wrap: pretty;
}

.ga-reviews .card-review__meta {
	display: flex;
	flex-direction: column;
	gap: var(--ga-space-1);
	padding-top: var(--ga-space-4);
	border-top: 1px solid var(--ga-color-border);
}

.ga-reviews .card-review__name {
	margin: 0;
	font-weight: var(--ga-fw-strong);
}

.ga-reviews .card-review__source {
	margin: 0;
	font-size: var(--ga-fs-small);
	line-height: var(--ga-lh-small);
	font-weight: 500;
	color: var(--ga-color-text-muted);
}

/* ===== Reduced motion ===== */
@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	.anim-enter,
	.anim-enter--d1,
	.anim-enter--d2,
	.anim-reveal {
		animation: none !important;
	}

	/* Elementor interactions (scroll reveals): elements are visible immediately, no movement. */
	[data-interaction-id] {
		opacity: 1 !important;
		transform: none !important;
		translate: none !important;
		scale: none !important;
		transition: none !important;
		animation: none !important;
		visibility: visible !important;
	}

	.ga-reviews .reviews__track {
		animation: none !important;
	}

	.ga-reviews .reviews__viewport {
		overflow-x: auto;
		-webkit-mask-image: none;
		mask-image: none;
		scroll-snap-type: x mandatory;
		padding-bottom: var(--ga-space-4);
	}

	.ga-reviews .card-review {
		scroll-snap-align: start;
	}

	.ga-reviews .card-review--clone {
		display: none !important;
	}
}
