/* GT Motion — easing y duración canónicos.
 *
 * Sistema restrictivo: solo dos easings y cinco duraciones. El sistema NO
 * acepta otros. Las transiciones deben listar propiedades explícitas
 * (nunca `transition: all`) para mantener performance y permitir
 * reduced-motion limpio.
 */

:root {
	/* ----- Easing -----
	 * out      → entrada/salida estándar de UI (foco visual claro)
	 * in-out   → cambios bidireccionales, transformaciones de estado
	 *
	 * FORBIDDEN: --gt-ease-spring NO existe en este sistema. Cualquier
	 * efecto "spring/bouncy" se considera fuera de marca. Si tenés que
	 * hacer algo que se sienta "vivo", subí a --gt-duration-cinematic
	 * con --gt-ease-out, no introduzcas un bounce.
	 */
	--gt-ease-out:    cubic-bezier(0, 0, 0.2, 1);
	--gt-ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);

	/* ----- Duration ----- */
	--gt-duration-instant:   80ms;
	--gt-duration-fast:      150ms;
	--gt-duration-base:      220ms;
	--gt-duration-slow:      360ms;
	--gt-duration-cinematic: 560ms;
}

/* ----- Helpers — propiedades específicas, nunca `all` ----- */
.gt-transition-colors {
	transition-property: color, background-color, border-color, fill, stroke;
	transition-duration: var(--gt-duration-base);
	transition-timing-function: var(--gt-ease-out);
}

.gt-transition-transform {
	transition-property: transform;
	transition-duration: var(--gt-duration-base);
	transition-timing-function: var(--gt-ease-out);
}

.gt-transition-opacity {
	transition-property: opacity;
	transition-duration: var(--gt-duration-base);
	transition-timing-function: var(--gt-ease-out);
}

.gt-transition-shadow {
	transition-property: box-shadow, filter;
	transition-duration: var(--gt-duration-base);
	transition-timing-function: var(--gt-ease-out);
}

/* Combinado para superficies interactivas (card hover típico). */
.gt-transition-surface {
	transition-property: transform, box-shadow, background-color, border-color;
	transition-duration: var(--gt-duration-base);
	transition-timing-function: var(--gt-ease-out);
}

/* ----- Reduced motion ----- */
@media (prefers-reduced-motion: reduce) {
	:root {
		--gt-duration-instant:   0.01ms;
		--gt-duration-fast:      0.01ms;
		--gt-duration-base:      0.01ms;
		--gt-duration-slow:      0.01ms;
		--gt-duration-cinematic: 0.01ms;
	}

	.gt-transition-colors,
	.gt-transition-transform,
	.gt-transition-opacity,
	.gt-transition-shadow,
	.gt-transition-surface {
		transition-duration: 0.01ms !important;
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
	}
}