:root {
  --banner-width: 440px;
  --banner-height: 330px;
  --bg: #ffffff;
  --border: #d6d6d6;
  --loop-duration: 8s;
}

* { box-sizing: border-box; }
html, body {
  margin: 0;
  padding: 0;
  width: var(--banner-width);
  height: var(--banner-height);
  overflow: hidden;
  background: transparent;
}
body { font-family: Arial, Helvetica, sans-serif; }
.banner-link {
  display: block;
  width: var(--banner-width);
  height: var(--banner-height);
  text-decoration: none;
}
.banner {
  position: relative;
  width: var(--banner-width);
  height: var(--banner-height);
  overflow: hidden;
  background: var(--bg);
  border: 1px solid var(--border);
  cursor: pointer;
}
.upper-group,
.lower-shape,
.headline,
.cta,
.logo,
.box-wrap,
.upper-shape,
.upper-url,
.cta-pill,
.cta-text,
.box-img {
  position: absolute;
  display: block;
}

.upper-group {
  left: -48px;
  top: -107px;
  width: 176px;
  height: 132px;
  z-index: 5;
}
.upper-shape {
  left: 0;
  top: 0;
  width: 176px;
  height: auto;
}
.upper-url {
  left: 79px;
  top: 133px;
  width: 74px;
  height: auto;
}

.lower-shape {
  right: -70px;
  bottom: -42px;
  width: 174px;
  height: auto;
  z-index: 1;
}

.headline {
  left: 24px;
  top: 76px;
  width: 158px;
  height: auto;
  z-index: 6;
}

.cta {
  left: 21px;
  top: 132px;
  width: 139px;
  height: 20px;
  z-index: 6;
}
.cta-pill {
  left: 0;
  top: 0;
  width: 139px;
  height: auto;
}
.cta-text {
  left: 15px;
  top: 7px;
  width: 109px;
  height: auto;
}

.logo {
  left: 22px;
  bottom: 25px;
  width: 140px;
  height: auto;
  z-index: 6;
}

.box-wrap {
  right: 18px;
  top: 105px;
  width: 86px;
  height: 101px;
  z-index: 4;
}
.box-img {
  left: 0;
  top: 0;
  width: 86px;
  height: auto;
}

.anim {
  animation-duration: var(--loop-duration);
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  animation-fill-mode: both;
}
.upper { animation-name: upperReveal; }
.lower { animation-name: lowerReveal; }
.headline { animation-name: headlineReveal; }
.cta { animation-name: ctaReveal; }
.logo { animation-name: logoReveal; }
.box { animation-name: boxReveal; }

@keyframes upperReveal {
  0%, 5% { opacity: 0; transform: translate(-24px,-18px); }
  11%, 100% { opacity: 1; transform: translate(0,0); }
}
@keyframes lowerReveal {
  0%, 10% { opacity: 0; transform: translate(44px,34px) scale(0.97); }
  18%, 100% { opacity: 1; transform: translate(0,0) scale(1); }
}
@keyframes headlineReveal {
  0%, 13% { opacity: 0; transform: translateY(12px); }
  22%, 100% { opacity: 1; transform: translateY(0); }
}
@keyframes logoReveal {
  0%, 21% { opacity: 0; transform: translateY(10px); }
  29%, 100% { opacity: 1; transform: translateY(0); }
}
@keyframes ctaReveal {
  0%, 28% { opacity: 0; transform: translateY(8px); }
  36%, 100% { opacity: 1; transform: translateY(0); }
}
@keyframes boxReveal {
  0%, 39% { opacity: 0; }
  47%, 100% { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .anim {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}