/* Screen transition animations - 10 seconds per screen */

/* Keyframes for each screen's visibility cycle */
@keyframes screen1Cycle {
  0% {
    opacity: 1;
  }
  31.33% {
    opacity: 1;
  }
  33.33% {
    opacity: 0;
  }
  90.66% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@keyframes screen2Cycle {
  0% {
    opacity: 0;
  }
  31.33% {
    opacity: 0;
  }
  33.34% {
    opacity: 1;
  }
  64.66% {
    opacity: 1;
  }
  66.66% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}

@keyframes screen3Cycle {
  0% {
    opacity: 0;
  }
  64.66% {
    opacity: 0;
  }
  66.67% {
    opacity: 1;
  }
  96.66% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

/* Screen 1: Visible from 0s to 10s */
.screen-1__container {
  animation: screen1Cycle 12s infinite;
}

/* Screen 2: Visible from 10s to 20s */
.screen-2__container {
  animation: screen2Cycle 12s infinite;
}

/* Screen 3: Visible from 20s to 12s */
.screen-3__container {
  animation: screen3Cycle 12s infinite;
}

/* Initial state - hide all screens */
.screen-container {
  opacity: 0;
}

/* Show screen 1 initially */
.screen-1__container {
  opacity: 1;
}