html, body {
  margin: 0;
  padding: 0;
  width: 300px;
  height: 600px;
  overflow: hidden;
  background: #000;
  font-family: "Arial Narrow", Arial, Helvetica, sans-serif;
}

#ad {
  display: block;
  width: 300px;
  height: 600px;
  position: relative;
  cursor: pointer;
  text-decoration: none;
}

.banner {
  position: relative;
  width: 300px;
  height: 600px;
  overflow: hidden;
  background: #000;
}

.bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 300px;
  height: 600px;
  object-fit: cover;
  display: block;
}

/* Sign graphic — cropped from the clean source PNG (sign + post), scaled to fill
   the ad width. Slides straight up from below the ad frame at full opacity — no fade. */
.sign-group {
  position: absolute;
  left: -61px;
  top: 51px;
  width: 422px;
  height: 976px;
  opacity: 1;
  transform: translateY(569px);
  animation: slideUpSign 0.5s cubic-bezier(0.22, 0.61, 0.36, 1) 0.3s forwards;
}

.sign-group img.sign {
  display: block;
  width: 100%;
  height: 100%;
}

/* CTA button graphic. Centered horizontally, slides up from below the frame at full
   opacity, following shortly after the sign. */
.cta {
  position: absolute;
  left: 38.0px;
  top: 492px;
  width: 224px;
  height: 60px;
  object-fit: contain;
  display: block;
  opacity: 1;
  transform: translateY(128px);
  animation: slideUpCta 0.35s cubic-bezier(0.22, 0.61, 0.36, 1) 0.68s forwards;
}

@keyframes slideUpSign {
  from { transform: translateY(569px); }
  to { transform: translateY(0); }
}

@keyframes slideUpCta {
  from { transform: translateY(128px); }
  to { transform: translateY(0); }
}