/* Screen 2 Animations - Woman image pops up, then text fades in, then other elements fade in */

/* Initial state - hide all animated elements */
.screen-2__woman-image,
.screen-2__features,
.screen-2__exchange-rate,
.screen-2__disclaimer,
.screen-2__ellipse-1,
.screen-2__ellipse-2,
.screen-2__phone-image,
.screen-2__logo-section {
  opacity: 0;
}

@keyframes womanImagePopUp {
  0% {
    transform: scale(0);
    opacity: 0;
  }
  10% {
    transform: scale(1);
    opacity: 1;
  }
  70% {
    transform: scale(1);
    opacity: 1;
  }
  80% {
    transform: scale(1);
    opacity: 1;
  }
  90% {
    transform: scale(0);
    opacity: 0;
  }
  100% {
    transform: scale(0);
    opacity: 0;
  }
}

@keyframes textFadeIn {
  0% {
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  50% {
    opacity: 1;
  }
  80% {
    opacity: 1;
  }
  90% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}

@keyframes elementsFadeIn {
  0% {
    transform: scale(0);
    opacity: 0;
  }
  10% {
    transform: scale(0);
    opacity: 0;
  }
  20% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1);
    opacity: 1;
  }
  80% {
    transform: scale(1);
    opacity: 1;
  }
  90% {
    transform: scale(0);
    opacity: 0;
  }
  100% {
    transform: scale(0);
    opacity: 0;
  }
}

/* Woman image pops up first */
.screen-2__woman-image {
  animation: womanImagePopUp 4s ease-out;
  animation-iteration-count: infinite;
  animation-delay: 0s;
}

/* Text content fades in after woman image */
.screen-2__features {
  animation: textFadeIn 4s ease-in-out;
  animation-iteration-count: infinite;
  animation-delay: 0s;
}

.screen-2__exchange-rate {
  animation: textFadeIn 4s ease-in-out;
  animation-iteration-count: infinite;
  animation-delay: 0s;
}

.screen-2__disclaimer {
  animation: textFadeIn 4s ease-in-out;
  animation-iteration-count: infinite;
  animation-delay: 0s;
}

/* Other elements fade in after text */
.screen-2__ellipse-1 {
  animation: elementsFadeIn 4s ease-in-out;
  animation-iteration-count: infinite;
  animation-delay: 0s;
}

.screen-2__ellipse-2 {
  animation: elementsFadeIn 4s ease-in-out;
  animation-iteration-count: infinite;
  animation-delay: 0s;
}

.screen-2__phone-image {
  animation: elementsFadeIn 4s ease-in-out;
  animation-iteration-count: infinite;
  animation-delay: 0s;
}

.screen-2__logo-section {
  animation: elementsFadeIn 4s ease-in-out;
  animation-iteration-count: infinite;
  animation-delay: 0s;
}