.mga-component {
  max-width: 400px;
  font-family: Arial, sans-serif;
}

.mga-stack {
  display: flex;
  flex-direction: column-reverse;
  gap: 12px;
}

.mga-base {
  height: 4px;
  background: #1A5FB4;
  opacity: 0;
  transition: opacity .4s;
}

.mga-block {
  padding: 14px;
  border-radius: 10px;
  color: #fff;
  font-weight: 600;
  opacity: 0;
  transform: translateY(40px);
  transition: all .6s cubic-bezier(.25,.1,.25,1);
}

.b1 { background:#1FB8C9; }
.b2 { background:#1A9DB8; }
.b3 { background:#1A5FB4; }
.b4 { background:#0A1628; }

.mga-visible { opacity:1 !important; transform:translateY(0); }
.mga-base.mga-visible { opacity:1; }