/* --foo is animated to force the animation onto main due to a bug. */

.product-view {
  view-timeline-name: --product-view;
}

@keyframes bg2 {
  0% { opacity: 0; }
  23% { opacity: 0; }
  43% { opacity: 1; }
  100% { opacity: 1; }
}
@keyframes bg3 {
  0% { opacity: 0; }
  57% { opacity: 0; }
  77% { opacity: 1; }
  100% { opacity: 1; }
}

.screen > div {
  animation: auto both;
  animation-timeline: --product-view;
  animation-range: contain 0% contain 100%;
}
.screen > div:nth-child(2) {
  animation-name: bg2;
}
.screen > div:nth-child(3) {
  animation-name: bg3;
}

@keyframes grow-and-shrink {
  0% {
    transform: translateY(50%) scale(1, 0) translateY(-50%);
    opacity: 0;
  }
  60% {
    transform: translateY(50%) scale(1, 1) translateY(-50%);
    opacity: 1;
  }
  80% {
    transform: translateY(-50%) scale(1, 1) translateY(50%);
    opacity: 1;
  }
  100% {
    transform: translateY(-50%) scale(1, 0) translateY(50%);
    opacity: 0;
  }
}

.line {
  animation: grow-and-shrink auto both;
  animation-timeline: --product-view;
}

@keyframes show-and-hide {
  0%   { opacity: 0; transform: translateY(40px); }
  20%  { opacity: 1; }
  80%  { opacity: 1; }
  100% { opacity: 0; }
}

.feature-text {
  animation: show-and-hide auto both;
  animation-timeline: --product-view;
}

.line1,.feature1 {
  animation-range: contain 0% contain 33%;
}
.line2,.feature2 {
  animation-range: contain 33% contain 67%;
}
.line3,.feature3 {
  animation-range: contain 67% contain 100%;
}