/*
 * Movimiento (pedido del usuario: plan §Lo que el Figma no define, Movimiento).
 *
 * Todo vive dentro de prefers-reduced-motion: no-preference: con movimiento
 * reducido el sitio queda exactamente como el Figma, quieto. La aparición al
 * entrar en pantalla solo se activa si motion.js marcó <html class="sy-motion">,
 * así sin JS no queda nada escondido.
 */

@media (prefers-reduced-motion: no-preference) {

	/* --- Aparición al entrar en pantalla ---------------------------------------- */

	/* translate (y no transform) para no pisar el transform del hover. */
	.sy-motion [data-sy-reveal] {
		opacity: 0;
		translate: 0 18px;
		transition:
			opacity 600ms var(--sy-ease) var(--sy-delay, 0ms),
			translate 600ms var(--sy-ease) var(--sy-delay, 0ms);
	}

	.sy-motion [data-sy-reveal].is-visible {
		opacity: 1;
		translate: none;
	}

	/* La línea del proceso se dibuja cuando el bloque aparece. */
	.sy-motion .sy-process__line {
		transform: scaleY(0);
		transform-origin: top;
		transition: transform 1400ms var(--sy-ease) 200ms;
	}

	.sy-motion .sy-process.is-drawn .sy-process__line {
		transform: none;
	}

	/* Embudo de Platform: las curvas se dibujan hacia la barra. */
	.sy-motion .sy-funnel__lines path {
		stroke-dasharray: 1;
		stroke-dashoffset: 1;
		transition: stroke-dashoffset 1200ms var(--sy-ease) 250ms;
	}

	.sy-motion .sy-funnel__lines.is-visible path {
		stroke-dashoffset: 0;
	}

	/* Barras de la tarjeta ancha (Capabilities): crecen en cascada. */
	.sy-motion .sy-card__chart span {
		transform: scaleY(0);
		transform-origin: bottom;
		transition: transform 900ms var(--sy-ease) calc(350ms + var(--sy-bar, 0) * 90ms);
	}

	.sy-motion .sy-card__chart span:nth-child(2) { --sy-bar: 1; }
	.sy-motion .sy-card__chart span:nth-child(3) { --sy-bar: 2; }
	.sy-motion .sy-card__chart span:nth-child(4) { --sy-bar: 3; }
	.sy-motion .sy-card__chart span:nth-child(5) { --sy-bar: 4; }

	.sy-motion .sy-card.is-visible .sy-card__chart span {
		transform: none;
	}

	/* --- Tarjetas: elevación, brillo y el icono que se mueve -------------------- */

	.sy-card,
	.sy-process__card,
	.sy-comparison__check,
	.sy-comparison__item,
	.sy-list__item,
	.sy-faq__item,
	.sy-seal,
	.sy-callout,
	.sy-tile,
	.sy-process__icon,
	.sy-card--media img {
		transition:
			transform 280ms var(--sy-ease),
			box-shadow 280ms var(--sy-ease),
			border-color 280ms var(--sy-ease),
			filter 280ms var(--sy-ease),
			background 280ms var(--sy-ease);
	}

	.sy-motion [data-sy-reveal].sy-card {
		transition:
			opacity 600ms var(--sy-ease) var(--sy-delay, 0ms),
			translate 600ms var(--sy-ease) var(--sy-delay, 0ms),
			transform 280ms var(--sy-ease),
			box-shadow 280ms var(--sy-ease),
			background 280ms var(--sy-ease),
			border-color 280ms var(--sy-ease);
	}

	.sy-card--feature:hover,
	.sy-card--media:hover {
		transform: translateY(-6px);
		box-shadow: 0 30px 50px -32px rgba(10, 23, 145, 0.5);
		background:
			linear-gradient(var(--sy-white), var(--sy-white)) padding-box,
			linear-gradient(145deg, var(--sy-lime) 0%, rgba(13, 159, 35, 0.55) 45%, var(--sy-line) 85%) border-box;
	}

	.sy-card--featured:hover {
		transform: translateY(-6px);
		box-shadow: 0 50px 90px -40px rgba(10, 23, 145, 1), 0 0 0 1px rgba(146, 239, 44, 0.25);
		background:
			var(--sy-overlay-media),
			url("../img/bg-waves.webp") 60% center / cover no-repeat,
			var(--sy-deep);
	}

	.sy-card:hover .sy-tile {
		transform: translateY(-2px) rotate(-6deg) scale(1.06);
	}

	.sy-card--feature:hover .sy-num {
		-webkit-text-stroke-color: var(--sy-green);
	}

	.sy-card--media:hover img {
		filter: brightness(1.06) saturate(1.12);
		transform: translateY(-2px);
	}

	.sy-card--glass:hover {
		transform: translateY(-6px);
		border-color: rgba(146, 239, 44, 0.45);
		background: linear-gradient(160deg, rgba(255, 255, 255, 0.16) 0%, rgba(255, 255, 255, 0.05) 100%);
		box-shadow: var(--sy-shadow-glass), 0 0 44px -12px rgba(146, 239, 44, 0.45);
	}

	.sy-card--glass:hover .sy-tile--glass {
		box-shadow: 0 0 30px -2px rgba(146, 239, 44, 0.8);
	}

	.sy-card--tile:hover {
		transform: translateY(-5px);
		border-color: rgba(146, 239, 44, 0.45);
		background: linear-gradient(160deg, rgba(255, 255, 255, 0.16) 0%, rgba(255, 255, 255, 0.05) 100%);
		box-shadow: var(--sy-shadow-glass), 0 0 40px -14px rgba(146, 239, 44, 0.45);
	}

	.sy-card--tile:hover .sy-tile {
		box-shadow: 0 0 30px -2px rgba(146, 239, 44, 0.8);
	}

	.sy-funnel__source {
		transition: transform 280ms var(--sy-ease), box-shadow 280ms var(--sy-ease), border-color 280ms var(--sy-ease);
	}

	.sy-funnel__source:hover {
		transform: translateY(-4px);
		border-color: rgba(146, 239, 44, 0.7);
		box-shadow: 0 18px 30px -20px rgba(10, 23, 145, 0.6);
	}

	.sy-link-card,
	.sy-chain__item,
	.sy-link-card__arrow,
	.sy-segment__img {
		transition: transform 280ms var(--sy-ease), box-shadow 280ms var(--sy-ease), border-color 280ms var(--sy-ease);
	}

	.sy-link-card:hover {
		transform: translateY(-4px);
		border-color: rgba(146, 239, 44, 0.45);
		box-shadow: var(--sy-shadow-glass), 0 0 40px -14px rgba(146, 239, 44, 0.45);
	}

	.sy-link-card:hover .sy-link-card__arrow {
		transform: translateY(3px);
	}

	.sy-chain__item:hover {
		transform: translateY(-4px);
	}

	.sy-segment__media {
		overflow: hidden;
		border-radius: 15px;
	}

	.sy-segment__img {
		transition-duration: 700ms;
	}

	.sy-segment:hover .sy-segment__img {
		transform: scale(1.03);
	}

	.sy-motion [data-sy-reveal]:is(.sy-link-card, .sy-chain__item),
	.sy-motion [data-sy-reveal].sy-funnel__source {
		transition:
			opacity 600ms var(--sy-ease) var(--sy-delay, 0ms),
			translate 600ms var(--sy-ease) var(--sy-delay, 0ms),
			transform 280ms var(--sy-ease),
			box-shadow 280ms var(--sy-ease),
			border-color 280ms var(--sy-ease);
	}

	.sy-process__step:hover .sy-process__card {
		transform: translateY(-5px);
		box-shadow: 0 26px 46px -30px rgba(10, 23, 145, 0.5);
	}

	.sy-process__step:hover .sy-process__icon {
		transform: scale(1.08);
	}

	.sy-comparison__check:hover {
		transform: translateX(4px);
		border-color: rgba(146, 239, 44, 0.5);
	}

	.sy-comparison__item:hover {
		transform: translateX(4px);
		border-color: var(--sy-line-strong);
	}

	.sy-list__item:hover {
		border-color: rgba(146, 239, 44, 0.45);
		transform: translateX(4px);
	}

	.sy-faq__item:not([open]):hover {
		border-color: var(--sy-line-strong);
		box-shadow: 0 14px 30px -26px rgba(10, 23, 145, 0.5);
	}

	.sy-callout:hover,
	.sy-seal:hover {
		transform: translateY(-4px);
		box-shadow: 0 30px 50px -30px rgba(10, 23, 145, 0.55);
	}

	/* --- Botones: la flecha avanza ------------------------------------------- */

	.sy-btn .elementor-button-icon,
	.sy-btn__icon,
	.sy-form__submit::after {
		transition: transform 220ms var(--sy-ease);
	}

	.sy-btn:not(.sy-btn--ghost) .elementor-button:hover .elementor-button-icon,
	:is(a, button).sy-btn:not(.sy-btn--ghost):hover .sy-btn__icon,
	.sy-form__submit:hover::after {
		transform: translateX(4px);
	}

	/* --- Acentos que respiran ------------------------------------------------- */

	.sy-badge::before {
		animation: sy-pulse 2.4s var(--sy-ease) infinite;
	}

	.sy-video-card__play::after {
		content: "";
		position: absolute;
		inset: 0;
		border-radius: 50%;
		box-shadow: 0 0 0 0 rgba(146, 239, 44, 0.55);
		animation: sy-ring 2.6s var(--sy-ease) infinite;
		pointer-events: none;
	}

	/* La textura del hero se desplaza muy lento. */
	.sy-section--hero {
		animation: sy-drift 28s ease-in-out infinite alternate;
	}

	@keyframes sy-pulse {
		0%, 100% { box-shadow: 0 0 0 4px rgba(146, 239, 44, 0.18); }
		50% { box-shadow: 0 0 0 7px rgba(146, 239, 44, 0.05); }
	}

	@keyframes sy-ring {
		0% { box-shadow: 0 0 0 0 rgba(146, 239, 44, 0.5); }
		70%, 100% { box-shadow: 0 0 0 22px rgba(146, 239, 44, 0); }
	}

	@keyframes sy-drift {
		from { background-position: 0 0, 50% 50%; }
		to { background-position: 0 0, 56% 44%; }
	}
}

@media (prefers-reduced-motion: no-preference) and (min-width: 1024px) {
	.sy-motion .sy-process__line {
		transform: scaleX(0);
		transform-origin: left;
	}
}