:root {
  --animation-length: 1.8s;
}

.text-animated {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity var(--animation-length) ease-out, var(--animation-length) ease-out;
  /* 2. Explicitly bind the delay variable (default to 0s if missing) */
  transition-delay: var(--delay, 0s);
  will-change: opacity, transform; /* Optimizes browser performance */
}
.text-animated.is-visible {
  opacity: 1;
  transform: translateY(0); /* Resets element to its original position */
}

.fade-in {
  opacity: 0;
  transition: opacity var(--animation-length) ease-out;/* 2. Explicitly bind the delay variable (default to 0s if missing) */
  transition-delay: var(--delay, 0s);
  will-change: opacity; /* Optimizes browser performance */
}
.fade-in.is-visible {
  /* animation: textAnimated 0.8s ease-out forwards; */
  opacity: 1;
}