<style>
/* added to create 100% height v-fill */
.mastercontainerparent {
display: flex; 
}
/**/
.mastercontainer {
 position: relative; 
 width: auto;
 display: flex;
 flex-direction: column;
 justify-content: space-between;
 flex: 1;
}

.mastercontainer > * {
  position: relative;
  margin: auto;
}

/* base container */
.container {
  width: 40px;
  height: 250px;
  border-radius: 9999px;
  border-width: 3px 3px 3px 5px;
  border-color: #380403;
  border-style: solid;
  overflow: hidden;
}

/* base meter pieces (no animation) */
.fill {
  width: 50px;
  height: 175px;
  background-color: #600c0b;
  position: absolute;
  left: -5px;
  bottom: -5px;
  transform-origin: bottom center;
}

.dimension {
  width: 30px;
  height: 150px;
  background-color: #980c0b;
  border-radius: 9999px;
  position: absolute;
  right: 8.5px;
  top: 40px;
}

.shine {
  width: 10px;
  height: 100px;
  background-color: #fff;
  border-radius: 9999px;
  position: absolute;
  right: 8.5px;
  top: 60px;
}

.topshine {
  width: 10px;
  height: 12px;
  background-color: #fff;
  border-radius: 9999px;
  position: absolute;
  right: 8.5px;
  top: 60px;
}

/* headings base */
.headingcontainer {
  max-width: 500px;
}

.headingcontainer > * {
  text-align:center;
}

.headingcontainer svg {
  position: relative;
  margin: auto;
  display: block;
  }

.heading1 {
  font-size: 15px;
  font-weight: 700;
}

.heading2 {
  font-size: 15px;
  font-weight: 700;
  margin-top: 1.5rem;
  margin-bottom: 0;
}

/* bolt base */
bolt {
  border: #000 2px solid;
}

.bolt path {
  stroke: #600c0b;
  stroke-width: 2;
  stroke-linejoin: round;
}

/* ---------- default: animations OFF ---------- */

.fill,
.dimension,
.shine,
.topshine,
.heading1,
.bolt path {
  animation: none;
}

/* ---------- when in view: animations ON ---------- */

.mastercontainer.is-visible .fill {
  animation: timetokickofffill 4s cubic-bezier(0.25,0.1,0.25,1) forwards;
}

.mastercontainer.is-visible .dimension {
  animation: dimension 4s cubic-bezier(0.25,0.1,0.25,1) forwards;
}

.mastercontainer.is-visible .shine {
  animation-name: timetokickoffshine;
  animation-duration: 4s;
  animation-fill-mode: forwards;
}

.mastercontainer.is-visible .topshine {
  animation-name: timetokickofftopshine;
  animation-duration: 4s;
  animation-fill-mode: forwards;
}

.mastercontainer.is-visible .heading1 {
  animation: heading1 4s forwards;
}

.mastercontainer.is-visible .bolt path {
  animation:
    boltglow 1.5s ease 3.5s infinite alternate,
    boltstroke 2s ease-in 3.5s forwards;
}

@keyframes boltstroke {
from {stroke: #600c0b;}
to {stroke: #a90d0c;}
}

@keyframes boltglow {
from {filter: drop-shadow(0);}
to {filter: 
    drop-shadow(0 2px 8px rgba(245,189,2,.4))
    drop-shadow(0 2px 3px rgba(245,189,2,.8))
    drop-shadow(0 2px 2px rgba(245,189,2,.1))
    drop-shadow(0 2px 5px rgba(245,99,2,.4))
    drop-shadow(0 2px 14px rgba(152,12,11,.2));}
}
@keyframes dimension {
  0% {background-color: #F5BD02; transform: scaleY(0.3);}
  15% {background-color: #f5bd02;}
  50% {background-color: #f56302;}
  100%   {transform: scaleY(0.7);}
}
@keyframes timetokickofffill {
  0% {background-color: #F5BD02; transform: scaleY(0); }
  15% {background-color: #f5bd02;}
  50% {background-color: #f56302;}
  100%   {transform: scaleY(2);}
}
@keyframes timetokickoffshine {
  from {transform: scaleY(0.3);}
  to   {transform: scaleY(0.7);}
}
@keyframes timetokickofftopshine {
  from {opacity: 0;}
  to   {opacity: 1; transform: scaleY(.8);}
}
@keyframes heading1 {
  from {opacity: 0;}
  to   {opacity: 1; transform: scale(1.5,1.5);}
}
</style>