/* 1. Define the animation steps */
@keyframes fadeIn {
  0% {
    opacity: 0;
    transform: scale(0.9);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes fadeInRight {
  0% {
    opacity: 0;
    transform: translateX(-20px);
  }
  100% {
    opacity: 1;
    transform: translateX(0px);
  }
}
@keyframes fadeInFast {
  0% {
    opacity: 0;
    transform: scale(0.5);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}


/* 2. Apply the animation to an element */
.fadeBigLetter {
    opacity: 0;
    animation: 1s ease-in forwards fadeIn;
    animation-delay: 0s;
    display: inline-block;
}
.fadeOtherLetters {
    opacity: 0;
    animation: 1s ease-out forwards fadeInRight;
    animation-delay: 1.5s;
    display: inline-block;
}
.fadeDate {
    opacity: 0;
    animation: 1s ease-in forwards fadeIn;
    animation-delay: 1.5s;
}
.circled {
    /* opacity: 0; */
    animation: fadeInFast 5s ease-in forwards;
    animation-timeline: view(); /* Links animation to element's visibility */
    animation-range: entry 0% cover 10%; /* Starts when 20% enters, ends when 50% is covered */
    opacity: 0; /* Initial state before animation starts */
}