/*
 * FoS Motion Effects — Sequential Lazy Load with Pulse
 *
 * Targets the three pink (#EDB0FF) heading widgets on the homepage.
 *
 * Sequence per element:
 *   1. Starts fully hidden
 *   2. Fades in with a slide-up entrance (0.6s)
 *   3. Gently pulses for a configurable duration (controlled by JS)
 *   4. Settles to resting state; next element begins
 */

/* ------------------------------------------------------------------
   Pre-animation state: fully hidden
   ------------------------------------------------------------------ */
.fos-lazy-load {
	opacity: 0;
	transform: translateY(40px);
}

/* ------------------------------------------------------------------
   Entrance: fade-in + slide-up
   ------------------------------------------------------------------ */
.fos-lazy-load.fos-entering {
	animation: fosEntrance 0.6s ease-out forwards;
}

@keyframes fosEntrance {
	from {
		opacity: 0;
		transform: translateY(40px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

/* ------------------------------------------------------------------
   Pulse: gentle scale+opacity throb, runs indefinitely until JS
   removes the class after the configured duration
   ------------------------------------------------------------------ */
.fos-lazy-load.fos-pulsing {
	opacity: 1;
	transform: translateY(0);
	animation: fosPulse 0.75s ease-in-out infinite;
}

@keyframes fosPulse {
	0%, 100% {
		transform: scale(1);
		opacity: 1;
	}
	50% {
		transform: scale(1.02);
		opacity: 0.85;
	}
}

/* ------------------------------------------------------------------
   Settled: final resting state after pulse completes
   ------------------------------------------------------------------ */
.fos-lazy-load.fos-settled {
	opacity: 1;
	transform: translateY(0);
}