/* * 1. Initial hidden state for ALL animated elements
 * This ensures the element is invisible before the animation starts.
 */
.has-animation {
  opacity: 0;
  --os-delay: 0s;
  transition: opacity 1.5s ease-out, transform 1.5s ease-out; /* Base transition */
  transition-delay: var(--os-delay); /* Apply the variable */
  transform: translateY(50px); /* Optional: Slight lift effect */
}

/* * 2. Active state (triggered by JavaScript)
 * This is the final state after the animation runs.
 */
.has-animation.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* * 3. Specific animation class (e.g., Fade In)
 * If you had other animations (slide-up, zoom-in, etc.), you'd define them here.
 */
.is-fading-in {
  /* No need for extra CSS here if the default .has-animation and .is-visible work */
}

.delay-200 { --os-delay: 0.2s; }
.delay-400 { --os-delay: 0.4s; }
.delay-600 { --os-delay: 0.6s; }