/* phone-cycle.css
 * Scoped triple-phone fade and bounce
 */

/* 1) make the banner a positioning context */
.banner-image {
  display: grid;
  place-items: center;  /* horizontally & vertically center the phones */
}

/* 2) absolutely stack the three phones */
.banner-image .phone-img {
  grid-area: 1 / 1;   /* stack all phones in the same grid cell */
  max-width: 100%;
}

/* 3) proper stacking order */
.banner-image .phone1 { z-index: 3; }
.banner-image .phone2 { z-index: 2; }
.banner-image .phone3 { z-index: 1; }

/* 4) reuse your existing bounce plus add the fade timers */
.banner-image .phone1 {
  animation:
    bounce-hero 3s infinite ease-in-out,
    fade1       6s infinite step-end;
}
.banner-image .phone2 {
  animation:
    bounce-hero 3s infinite ease-in-out,
    fade2       6s infinite step-end;
}
.banner-image .phone3 {
  /* only bounces; becomes visible when 1 and 2 hide */
  animation: bounce-hero 3s infinite ease-in-out;
}

/* 5) cross-fade keyframes for phones 1 & 2 */
@keyframes fade1 {
  0%,   33.3333% { opacity: 1; }
  33.3334%, 100% { opacity: 0; }
}
@keyframes fade2 {
  0%,   66.6667% { opacity: 1; }
  66.6668%, 100% { opacity: 0; }
}