.grp-outer {
  width: 100%;
  max-width: 420px;
  margin: 0 auto;
  position: relative;
}
.grp-scene {
  position: relative;
  width: 100%;
}

.g-green  { opacity:0; animation: gFade 0.6s ease 0.1s both; }
.g-lt-clip { animation: gClipLt 1.4s cubic-bezier(0.25,1,0.5,1) 0.6s both; }
.g-lb-clip { animation: gClipLb 1.4s cubic-bezier(0.25,1,0.5,1) 0.8s both; }
.g-dots   { opacity:0; animation: gFade 0.4s ease 1.1s both; }
.g-sum    { opacity:0; animation: gFade 0.4s ease 1.4s both; }
.g-sum2   { opacity:0; animation: gFade 0.4s ease 1.6s both; }
.g-arrows { opacity:0; animation: gFade 0.4s ease 1.9s both; }
.g-yellow { opacity:0; animation: gFade 0.6s ease 2.0s both; }
.g-red    { opacity:0; animation: gFade 0.6s ease 2.2s both; }

@keyframes gFade  { from{opacity:0} to{opacity:1} }
@keyframes gClipLt { from{width:0} to{width:234px} }
@keyframes gClipLb { from{width:0} to{width:162px} }

@media (prefers-reduced-motion: reduce) {
  .g-green,.g-dots,.g-sum,.g-sum2,.g-arrows,.g-yellow,.g-red { animation:none; opacity:1; }
  .g-lt-clip { animation:none; width:234px; }
  .g-lb-clip { animation:none; width:162px; }
}