/* =========================================================
   ANIMATIONS.CSS — Clases para GSAP + animaciones CSS
   ========================================================= */

/* ── js-reveal: estado inicial para GSAP ScrollTrigger ───── */
.js-reveal {
	opacity: 0;
	transform: translateY(24px);
	will-change: opacity, transform;
}

/* Fallback: sin JS o una vez animado */
.js-reveal.is-visible {
	opacity: 1;
	transform: translateY(0);
	transition:
		opacity 0.6s var(--ease-standard),
		transform 0.6s var(--ease-standard);
}

/* Variantes de dirección */
.js-reveal--from-left {
	transform: translateX(-32px);
}

.js-reveal--from-right {
	transform: translateX(32px);
}

.js-reveal--scale {
	transform: scale(0.92);
}

.js-reveal--from-left.is-visible,
.js-reveal--from-right.is-visible,
.js-reveal--scale.is-visible {
	transform: translate(0) scale(1);
}

/* ── Ticker de scroll infinito ────────────────────────────── */
.ticker-outer {
	overflow: hidden;
	-webkit-mask-image: linear-gradient(
		to right,
		transparent 0%,
		black 10%,
		black 90%,
		transparent 100%
	);
	mask-image: linear-gradient(
		to right,
		transparent 0%,
		black 10%,
		black 90%,
		transparent 100%
	);
}

.ticker-track {
	display: flex;
	gap: var(--space-md);
	width: max-content;
	animation: ticker-scroll 30s linear infinite;
}

.ticker-track:hover {
	animation-play-state: paused;
}

.ticker-track--reverse {
	animation-direction: reverse;
}

.ticker-track--slow {
	animation-duration: 45s;
}

@keyframes ticker-scroll {
	from { transform: translateX(0); }
	to   { transform: translateX(-50%); }
}

.ticker-item {
	display: flex;
	align-items: center;
	gap: var(--space-sm);
	white-space: nowrap;
	flex-shrink: 0;
}

.ticker-item img {
	height: 28px;
	width: auto;
	object-fit: contain;
}

.ticker-item__name {
	font-size: var(--text-sm);
	font-weight: 500;
	color: var(--color-dark-soft);
}

/* Fila doble para app-store section */
.ticker-rows {
	display: flex;
	flex-direction: column;
	gap: var(--space-md);
}

/* ── Fade transitions ─────────────────────────────────────── */
[data-animate="fade-up"] {
	opacity: 0;
	transform: translateY(20px);
}

[data-animate="fade-in"] {
	opacity: 0;
}

[data-animate="scale-in"] {
	opacity: 0;
	transform: scale(0.95);
}

/* ── Counter animation proxy ──────────────────────────────── */
.counter-value {
	display: inline-block;
	font-variant-numeric: tabular-nums;
}

/* ── Onboarding steps línea conectora ─────────────────────── */
.steps-connector {
	display: none;
}

@media (min-width: 1024px) {
	.steps-connector {
		display: block;
		position: absolute;
		top: 24px;
		left: calc(50% + 24px);
		right: calc(-50% + 24px);
		height: 2px;
		background: linear-gradient(
			to right,
			var(--color-secondary) var(--progress, 0%),
			var(--color-medium) var(--progress, 0%)
		);
		transition: --progress 0.5s var(--ease-standard);
	}
}

/* ── Pulse dot animado ────────────────────────────────────── */
.pulse-dot {
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background-color: var(--color-secondary);
	position: relative;
}

.pulse-dot::after {
	content: '';
	position: absolute;
	inset: -4px;
	border-radius: 50%;
	background-color: var(--color-secondary);
	opacity: 0.3;
	animation: pulse-ring 2s ease-out infinite;
}

@keyframes pulse-ring {
	0%   { transform: scale(1);   opacity: 0.3; }
	70%  { transform: scale(2.2); opacity: 0; }
	100% { transform: scale(2.2); opacity: 0; }
}

/* ── Globe SVG ────────────────────────────────────────────── */
.globe-dot {
	fill: var(--color-secondary);
	animation: globe-blink 3s ease-in-out infinite;
}

.globe-dot:nth-child(2n) { animation-delay: -1s; }
.globe-dot:nth-child(3n) { animation-delay: -2s; }

@keyframes globe-blink {
	0%, 100% { opacity: 1; r: 4; }
	50%       { opacity: 0.3; r: 2; }
}

.globe-line {
	stroke: var(--color-secondary);
	stroke-width: 1;
	opacity: 0.3;
	stroke-dasharray: 4 4;
}

/* ── prefers-reduced-motion: todo visible, sin animaciones ── */
@media (prefers-reduced-motion: reduce) {
	.js-reveal,
	.js-reveal--from-left,
	.js-reveal--from-right,
	.js-reveal--scale,
	[data-animate] {
		opacity: 1 !important;
		transform: none !important;
		transition: none !important;
	}

	.ticker-track {
		animation: none;
		width: auto;
		overflow-x: auto;
	}

	.pulse-dot::after {
		animation: none;
	}

	.globe-dot {
		animation: none;
	}
}