body {
  margin: 0;
  padding: 0;
}

.ad-container {
  --translateY: 15px;
  width: 300px;
  height: 250px;
  overflow: hidden;
  box-sizing: border-box;
  position: relative;
  border: 1px solid black;
  display: block;
  background: #f3f4f8;
  opacity: 0;
}
.ad-container.ready {
  opacity: 1;
}
.ad-container.ready .bg-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 300px;
  height: 250px;
}
.ad-container.ready .svg-container {
  position: relative;
}
.ad-container.ready .svg-container #copy [id^=line] {
  opacity: 0;
  transform: translateY(var(--translateY));
  animation-name: upssi8t;
  animation-duration: 2s;
  animation-fill-mode: forwards;
  animation-delay: var(--lineDelay);
  animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
}
@keyframes upssi8t {
  to {
    opacity: 1;
    transform: unset;
  }
}
.ad-container.ready .svg-container #cta {
  opacity: 0;
  transform: translateY(var(--translateY));
  animation-name: upssi9t;
  animation-duration: 2s;
  animation-fill-mode: forwards;
  animation-delay: var(--ctaDelay);
  animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
}
@keyframes upssi9t {
  to {
    opacity: 1;
    transform: unset;
  }
}
.ad-container.ready .svg-container #cta rect {
  transition: fill 0.25s;
}
.ad-container.ready .svg-container #cta path {
  transition: fill 0.25s;
}
.ad-container.ready:hover .svg-container #cta rect {
  fill: #1E2D30;
}
.ad-container.ready:hover .svg-container #cta path {
  fill: #F3F4F8;
}