/* ==========================================================================
   Hojas de Estilo para Animaciones e Interfaz Cinemática (animations.css)
   ========================================================================== */

/* ==========================================================================
   SECCIÓN 1: COMPONENTES DEL HERO (Módulo Principal Home)
   ========================================================================== */

/**
 * 1.1 keyframes: pivotWord
 * Produce una oscilación angular rotativa sobre el punto de anclaje base.
 * Diseñado específicamente para destacar textos individuales sin alterar el flujo del bloque.
 */
@keyframes pivotWord {
	0% {
		transform: rotate(0deg);
	}
	50% {
		transform: rotate(-2.5deg);
	}
	100% {
		transform: rotate(0deg);
	}
}

/**
 * 1.2 keyframes: floatSphere
 * Genera una traslación vertical armónica pura (levitación).
 * Ideal para romper la rigidez de elementos vectoriales o decoraciones flotantes.
 */
@keyframes floatSphere {
	0% {
		transform: translateY(0);
	}
	50% {
		transform: translateY(-6px);
	}
	100% {
		transform: translateY(0);
	}
}

/**
 * 1.3 keyframes: shiftMarginLeft
 * Desplazamiento horizontal asimétrico con retorno elástico rápido.
 * Utiliza una ventana de reposo estático prolongado (del 20% al 100%) para evitar la fatiga visual.
 */
@keyframes shiftMarginLeft {
	0% {
		transform: translateX(0);
		opacity: 1;
	}
	5% {
		transform: translateX(-60px);
		opacity: 1;
	}
	15% {
		transform: translateX(10px);
		opacity: 1;
	}
	20% {
		transform: translateX(0);
	}
	100% {
		transform: translateX(0);
	}
}

/* --- CLASES UTILITARIAS PARA COMPONENTES DEL HERO --- */

/* Aplicador del pivot rotativo en palabras clave con gradiente */
.animation-pivot-text {
	display: inline-block;
	transform-origin: left bottom; /* Define el eje rotativo base en la esquina inferior izquierda */
	animation: pivotWord 3s ease-in-out infinite;
	will-change: transform; /* Asigna el elemento a un hilo de renderizado independiente en la GPU */
}

/* Aplicador de levitación continua para la esfera decorativa orbital */
.animation-float-sphere {
	animation: floatSphere 4s ease-in-out infinite;
	will-change: transform;
}

/* Aplicador del desplazamiento horizontal cíclico en el título principal */
.animation-title-shift {
	display: block;
	animation: shiftMarginLeft 3s ease-in-out infinite;
	will-change: transform;
}

/* ==========================================================================
   SECCIÓN 2: COMPONENTES DE SERVICIOS
   ========================================================================== */

/**
 * 2.1 keyframes: landAndExpandScroll
 * Ejecuta una simulación física de impacto inercial (Landing & Bounce Effect):
 * - 0% a 65%: Descenso acelerado con escalado comprimido.
 * - 65%: Punto crítico de impacto en el plano original con sobre-expansión del 18%.
 * - 85%: Micro-frenado elástico inverso de amortiguación.
 * - 100%: Estabilización absoluta a escala natural.
 */
@keyframes landAndExpandScroll {
	0% {
		transform: translateY(-70px) scale(0.6);
		opacity: 0;
	}
	65% {
		transform: translateY(0) scale(1.18);
		opacity: 1;
	}
	85% {
		transform: scale(0.93);
	}
	100% {
		transform: scale(1);
		opacity: 1;
	}
}

/* --- ESTADO ESTÁTICO DE REPOSO (Predisparador en espera) --- */
.services-title {
	opacity: 0;
	transform: translateY(-70px) scale(0.6);
	transform-origin: center center; /* Sincroniza la expansión concéntrica desde el núcleo del texto */
}

/* --- ESTADO ACTIVO CINEMÁTICO (Inyectado dinámicamente mediante Intersection Observer) --- */
.services-title.run-animation {
	opacity: 1;
	transform: scale(1);
	/* Implementa una curva bezier cúbica personalizada para emular aceleración gravitacional */
	animation: landAndExpandScroll 1.1s cubic-bezier(0.25, 1, 0.5, 1.2) forwards;
	will-change: transform, opacity;
}

/* ==========================================================================
   SECCIÓN 3: COMPONENTE - ÚNETE A NUESTRO EQUIPO (CTA Vacantes)
   ========================================================================== */

/**
 * 3.1 keyframes: joinTitleHeartbeat
 * Simula la pulsación bio-rítmica de doble impacto (latido cardiaco de dos tiempos):
 * - 14% / 42%: Ciclos de expansión primaria y secundaria.
 * - 70% a 100%: Intervalo de reposo fisiológico para mantener elegancia visual.
 */
@keyframes joinTitleHeartbeat {
	0% {
		transform: scale(1);
	}
	14% {
		transform: scale(1.04); /* Primer latido (expansión preliminar) */
	}
	28% {
		transform: scale(1); /* Retorno suave a origen */
	}
	42% {
		transform: scale(1.06); /* Segundo latido (fuerza máxima) */
	}
	70% {
		transform: scale(1); /* Inicio de reposo rítmico */
	}
	100% {
		transform: scale(1); /* Pausa para completar ciclo de 2.5s */
	}
}

/* Aplicador de pulsación rítmica continua para el título de reclutamiento */
.animate-join-title-infinite {
	display: inline-block !important;
	transform-origin: left top; /* Crece suavemente hacia abajo/derecha sin tapar el icono superior */
	animation: joinTitleHeartbeat 2.5s ease-in-out infinite;
	will-change: transform;
}

/* ==========================================================================
   SECCIÓN 4: REBOTES CÁLCULADOS Y DISPARADORES BI-DIRECCIONALES (Observer)
   ========================================================================== */

/**
 * 4.1 keyframes: sectionTitleBounce
 * Animación reactiva al desplazamiento del scroll (Scroll-Driven Reveal):
 * - 0% a 60%: Caída vertical acelerada desde el plano superior con elongación inicial.
 * - 60% a 80%: Impacto elástico con rebasamiento dinámico (+5%) y micro-corrección.
 * - 100%: Asentamiento perfecto sobre la grilla tipográfica.
 */
@keyframes sectionTitleBounce {
	0% {
		opacity: 0;
		transform: translateY(-60px) scale(0.94);
	}
	60% {
		opacity: 1;
		transform: translateY(10px) scale(1.05); /* Punto de impacto elástico */
	}
	80% {
		transform: translateY(-3px) scale(0.98); /* Rebote sutil de amortiguación */
	}
	100% {
		opacity: 1;
		transform: translateY(0) scale(1); /* Estado de reposo final */
	}
}

/* Estado base neutro (Oculto antes de cruzar el umbral del Viewport) */
.services-title,
.testimonials-title {
	opacity: 0;
	will-change: transform, opacity;
}

/* Clase desencadenada por JavaScript (IntersectionObserver en main.js) */
.services-title.run-animation,
.testimonials-title.run-animation {
	/* Curva cubic-bezier con sobregiro (overshoot 1.56) para máxima fluidez inercial */
	animation: sectionTitleBounce 1s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

/* Respeta la preferencia del sistema de reducir movimiento */
@media (prefers-reduced-motion: reduce) {
	.animate-join-title-infinite {
		animation: none;
	}
}