/* How I help: scroll-revealed infographics */

.ig-list {
	display: flex;
	flex-direction: column;
	gap: var(--space-96);
}

.ig-row {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-80);
}

.ig-row-reverse {
	flex-direction: row-reverse;
}

.ig-media {
	flex: 0 0 340px;
	max-width: 340px;
}

.ig-copy {
	flex: 0 1 460px;
	display: flex;
	flex-direction: column;
	gap: var(--space-16);
}

.ig-title {
	font-size: var(--font-size-h2);
	font-weight: 600;
	line-height: 1.15;
}

.ig-text {
	font-family: var(--font-body);
	font-size: var(--font-size-body-lg);
	color: var(--color-ink-secondary);
	line-height: 1.6;
	max-width: 44ch;
}

.ig-frame {
	width: 100%;
	aspect-ratio: 9 / 16;
	background: var(--color-bg);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-card);
	overflow: hidden;
}

.ig {
	display: block;
	width: 100%;
	height: 100%;
}

.ig-pair {
	display: flex;
	gap: var(--space-32);
}

.ig-tile {
	flex: 1 1 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space-32);
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
	padding: var(--space-48) var(--space-32);
}

.ig-tile .ig-copy {
	flex: 0 0 auto;
	width: 100%;
	max-width: 420px;
}

.ig-tile .ig-media {
	flex: 0 0 auto;
	width: 100%;
	max-width: 280px;
}

.ig-tile .ig-title {
	font-size: calc(var(--font-size-h3) + 4px);
}

.ig-tile .ig-text {
	font-size: var(--font-size-body);
}

.ig-points {
	display: flex;
	flex-direction: column;
	gap: var(--space-12);
	margin-top: var(--space-8);
}

.ig-point {
	display: flex;
	align-items: center;
	gap: var(--space-12);
	font-family: var(--font-body);
	font-weight: 500;
	color: var(--color-ink);
}

.ig-point-icon {
	flex-shrink: 0;
	width: 36px;
	height: 36px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: var(--radius-md);
	background: var(--color-surface);
	color: var(--color-accent);
}

.ig-point-icon svg {
	width: 18px;
	height: 18px;
}

/* SVG helpers and resting (final) states */

.ig .fb {
	transform-box: fill-box;
	transform-origin: 50% 50%;
}

.ig .fb-b {
	transform-box: fill-box;
	transform-origin: 50% 100%;
}

.ig .ig-draw,
.ig .ig2-line {
	stroke-dasharray: 1;
	stroke-dashoffset: 0;
}

.ig .ig1-m,
.ig .ig-ring {
	opacity: 0;
}

.ig .ig4-pin {
	transform: translateY(0) scale(1.4);
}

/* Motion: only with JS and when the visitor has not asked for reduced motion */

@media (prefers-reduced-motion: no-preference) {
	.ig-js [data-reveal] {
		opacity: 0;
		transform: translateY(32px);
		transition: opacity 0.8s ease, transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
	}

	.ig-js [data-reveal].is-visible {
		opacity: 1;
		transform: none;
	}

	.ig-js .ig-pair [data-reveal]:nth-child(2) {
		transition-delay: 0.12s;
	}

	.ig-js .ig .a {
		animation-duration: 5s;
		animation-fill-mode: both;
		animation-timing-function: cubic-bezier(0.45, 0, 0.2, 1);
		animation-delay: var(--d, 0s);
		animation-play-state: paused;
	}

	.ig-js .ig.is-playing .a {
		animation-play-state: running;
	}

	/* Shared moves */
	.ig-js .ig .ig-pop {
		animation-name: ig-pop;
		animation-duration: 0.55s;
		animation-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1);
	}

	.ig-js .ig .ig-draw {
		animation-name: ig-draw;
		animation-duration: 0.7s;
	}

	.ig-js .ig .ig-ring {
		animation-name: ig-ring;
		animation-duration: 1.6s;
		animation-iteration-count: 3;
		animation-timing-function: ease-out;
	}

	/* 1. Before / after redesign */
	.ig-js .ig .ig1-m {
		animation-name: ig1-mess;
	}

	.ig-js .ig .ig1-c {
		animation-name: ig1-snap;
		animation-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1);
	}

	/* 2. Results */
	.ig-js .ig .ig2-bar {
		animation-name: ig2-grow;
		animation-timing-function: cubic-bezier(0.34, 1.3, 0.64, 1);
	}

	.ig-js .ig .ig2-line {
		animation-name: ig2-draw;
		animation-timing-function: cubic-bezier(0.3, 0, 0.2, 1);
	}

	/* 3. Rankings */
	.ig-js .ig .ig3-up { animation-name: ig3-up; animation-timing-function: cubic-bezier(0.65, 0, 0.35, 1); }
	.ig-js .ig .ig3-s1 { animation-name: ig3-s1; animation-timing-function: cubic-bezier(0.65, 0, 0.35, 1); }
	.ig-js .ig .ig3-s2 { animation-name: ig3-s2; animation-timing-function: cubic-bezier(0.65, 0, 0.35, 1); }
	.ig-js .ig .ig3-s3 { animation-name: ig3-s3; animation-timing-function: cubic-bezier(0.65, 0, 0.35, 1); }
	.ig-js .ig .ig3-s4 { animation-name: ig3-s4; animation-timing-function: cubic-bezier(0.65, 0, 0.35, 1); }
	.ig-js .ig .ig3-glow { animation-name: ig3-glow; animation-timing-function: ease-in-out; }

	/* 4. Local SEO */
	.ig-js .ig .ig4-pin {
		animation-name: ig4-drop;
		animation-timing-function: ease-out;
	}

	/* 5. Why choose us */
	.ig-js .ig .ig5-card {
		animation-timing-function: cubic-bezier(0.34, 1.3, 0.64, 1);
	}

	.ig-js .ig .ig5-c1 { animation-name: ig5-c1; }
	.ig-js .ig .ig5-c2 { animation-name: ig5-c2; }
	.ig-js .ig .ig5-c3 { animation-name: ig5-c3; }

	.ig-js .ig .ig5-bar {
		animation-name: ig5-bar;
		animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
	}
}

@keyframes ig-pop {
	0% { opacity: 0; transform: scale(0); }
	100% { opacity: 1; transform: scale(1); }
}

@keyframes ig-draw {
	0% { stroke-dashoffset: 1; }
	100% { stroke-dashoffset: 0; }
}

@keyframes ig-ring {
	0% { opacity: 0; transform: scale(0.5); }
	10% { opacity: 0.8; }
	100% { opacity: 0; transform: scale(3); }
}

@keyframes ig1-mess {
	0% { opacity: 1; transform: translate(0, 0) rotate(0deg) scale(1); }
	8% { transform: translate(2px, -2px) rotate(2deg) scale(1); }
	16% { transform: translate(-2px, 2px) rotate(-2deg) scale(1); }
	24% { transform: translate(2px, 1px) rotate(1deg) scale(1); }
	30% { opacity: 1; transform: translate(0, 0) rotate(0deg) scale(1); }
	40%, 100% { opacity: 0; transform: translate(0, 0) rotate(0deg) scale(0.3); }
}

@keyframes ig1-snap {
	0%, 40% { opacity: 0; transform: translateY(-22px) scale(0.9); }
	52%, 100% { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes ig2-grow {
	0%, 4% { transform: scaleY(0); }
	16%, 100% { transform: scaleY(1); }
}

@keyframes ig2-draw {
	0%, 38% { stroke-dashoffset: 1; }
	62%, 100% { stroke-dashoffset: 0; }
}

@keyframes ig3-up {
	0%, 10% { transform: translateY(320px); }
	20%, 25% { transform: translateY(240px); }
	35%, 40% { transform: translateY(160px); }
	50%, 55% { transform: translateY(80px); }
	65%, 100% { transform: translateY(0); }
}

@keyframes ig3-s4 {
	0%, 10% { transform: translateY(-80px); }
	20%, 100% { transform: translateY(0); }
}

@keyframes ig3-s3 {
	0%, 25% { transform: translateY(-80px); }
	35%, 100% { transform: translateY(0); }
}

@keyframes ig3-s2 {
	0%, 40% { transform: translateY(-80px); }
	50%, 100% { transform: translateY(0); }
}

@keyframes ig3-s1 {
	0%, 55% { transform: translateY(-80px); }
	65%, 100% { transform: translateY(0); }
}

@keyframes ig3-glow {
	0%, 64% { opacity: 0; }
	72% { opacity: 1; }
	84% { opacity: 0.4; }
	100% { opacity: 1; }
}

@keyframes ig4-drop {
	0%, 4% { opacity: 0; transform: translateY(-240px) scale(1); animation-timing-function: cubic-bezier(0.5, 0, 1, 1); }
	16% { opacity: 1; transform: translateY(0) scale(1); animation-timing-function: ease-out; }
	21% { transform: translateY(-18px) scale(1); animation-timing-function: ease-in; }
	26%, 44% { opacity: 1; transform: translateY(0) scale(1); animation-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1); }
	56%, 100% { opacity: 1; transform: translateY(0) scale(1.4); }
}

@keyframes ig5-c1 {
	0%, 4% { opacity: 0; transform: translate(var(--dx), var(--dy)) rotate(var(--r)) scale(0); }
	12% { opacity: 1; transform: translate(var(--dx), var(--dy)) rotate(var(--r)) scale(1.08); }
	16%, 48% { opacity: 1; transform: translate(var(--dx), var(--dy)) rotate(var(--r)) scale(1); }
	64%, 100% { opacity: 1; transform: translate(0px, 0px) rotate(0deg) scale(1); }
}

@keyframes ig5-c2 {
	0%, 16% { opacity: 0; transform: translate(var(--dx), var(--dy)) rotate(var(--r)) scale(0); }
	24% { opacity: 1; transform: translate(var(--dx), var(--dy)) rotate(var(--r)) scale(1.08); }
	28%, 48% { opacity: 1; transform: translate(var(--dx), var(--dy)) rotate(var(--r)) scale(1); }
	64%, 100% { opacity: 1; transform: translate(0px, 0px) rotate(0deg) scale(1); }
}

@keyframes ig5-c3 {
	0%, 28% { opacity: 0; transform: translate(var(--dx), var(--dy)) rotate(var(--r)) scale(0); }
	36% { opacity: 1; transform: translate(var(--dx), var(--dy)) rotate(var(--r)) scale(1.08); }
	40%, 48% { opacity: 1; transform: translate(var(--dx), var(--dy)) rotate(var(--r)) scale(1); }
	64%, 100% { opacity: 1; transform: translate(0px, 0px) rotate(0deg) scale(1); }
}

@keyframes ig5-bar {
	0%, 62% { transform: scaleX(0); }
	78%, 100% { transform: scaleX(1); }
}

/* Responsive */

@media (max-width: 1024px) {
	.ig-list {
		gap: var(--space-80);
	}

	.ig-row {
		gap: var(--space-48);
	}

	.ig-media {
		flex-basis: 300px;
		max-width: 300px;
	}

	.ig-tile {
		padding: var(--space-32) var(--space-24);
	}
}

@media (max-width: 860px) {
	.ig-row,
	.ig-row-reverse {
		flex-direction: column;
		gap: var(--space-32);
	}

	.ig-media {
		flex: 0 0 auto;
		width: 100%;
		max-width: 300px;
	}

	.ig-copy {
		flex: 0 0 auto;
		width: 100%;
		max-width: 560px;
	}

	.ig-pair {
		flex-direction: column;
		gap: var(--space-80);
	}

	.ig-tile {
		background: transparent;
		border: none;
		padding: 0;
	}

	.ig-tile .ig-copy {
		max-width: 560px;
	}

	.ig-tile .ig-media {
		max-width: 300px;
	}

	.ig-tile .ig-title {
		font-size: var(--font-size-h2);
	}

	.ig-tile .ig-text {
		font-size: var(--font-size-body-lg);
	}

	.ig-js .ig-pair [data-reveal]:nth-child(2) {
		transition-delay: 0s;
	}
}

@media (max-width: 640px) {
	.ig-list,
	.ig-pair {
		gap: var(--space-64);
	}

	.ig-media,
	.ig-tile .ig-media {
		max-width: 260px;
	}
}