body {
  margin: 0;
  padding: 0;
}

.ad-container {
  --easeIn: cubic-bezier(0.10, 0.00, 0.00, 1.00);
  --easeOut: cubic-bezier(1.00, 0.00, 0.99, 1.00);
  --bgColor: #1C2B33;
  width: 970px;
  height: 250px;
  overflow: hidden;
  position: relative;
  border: 1px solid black;
  box-sizing: border-box;
  display: block;
  background: var(--bgColor);
}
.ad-container .ad-content {
  width: calc(100% - 2px);
  height: calc(100% - 2px);
  margin-left: 1px;
  margin-top: 1px;
  opacity: 0;
  position: relative;
}
.ad-container .ad-content .svg-container {
  position: relative;
  width: 100%;
  height: 100%;
  z-index: 2;
}
.ad-container .ad-content .image-container {
  --width: 0;
  --height: 0;
  --left: 0;
  --top: 0;
  z-index: 1;
  width: var(--width);
  height: var(--height);
  top: var(--top);
  left: var(--left);
  position: absolute;
  overflow: hidden;
}
.ad-container .ad-content .image-container .mask {
  top: 0;
  left: 0;
  position: absolute;
  z-index: 1000;
  width: 100%;
  height: 100%;
}
.ad-container .ad-content .image-container .mask .border {
  position: absolute;
  background: var(--bgColor);
  transition-timing-function: var(--easeIn);
  transition-duration: 0.75s;
}
.ad-container .ad-content .image-container .mask .border.top {
  width: 100%;
  height: 50%;
  top: 0;
  transform-origin: top;
}
.ad-container .ad-content .image-container .mask .border.right {
  width: 50%;
  height: 100%;
  right: 0;
  transform-origin: right;
}
.ad-container .ad-content .image-container .mask .border.bottom {
  width: 100%;
  height: 50%;
  bottom: 0;
  transform-origin: bottom;
}
.ad-container .ad-content .image-container .mask .border.left {
  width: 50%;
  height: 100%;
  left: 0;
  transform-origin: left;
}
.ad-container .ad-content .image-container img {
  --imageScale: 1.15;
  --duration: 5s;
  position: absolute;
  width: 100%;
  height: 100%;
  opacity: 0;
  object-fit: cover;
}
.ad-container .ad-content .image-container img.img1 {
  transform-origin: top left;
}
.ad-container .ad-content .image-container img.img2 {
  transform-origin: center;
}
.ad-container .ad-content .image-container img.img3 {
  transform-origin: top;
  --imageScale: 1.1;
}
.ad-container .ad-content #bg {
  opacity: 0;
}
.ad-container .ad-content #image-container {
  opacity: 0;
}
.ad-container .ad-content #logo {
  opacity: 0;
  transition: opacity 0.55s, transform 0.55s;
  transform: translateY(7.5%);
  transition-timing-function: var(--easeIn);
}
.ad-container .ad-content #cta {
  opacity: 0;
  transition: opacity 0.7s, transform 0.7s;
  transform: translateY(7.5%);
  transition-timing-function: var(--easeIn);
  cursor: pointer;
}
.ad-container .ad-content #cta rect,
.ad-container .ad-content #cta path {
  transition: fill 0.35s;
}
.ad-container .ad-content [id^=line] {
  --durationIn: 834ms;
  --durationOut: 709ms;
  --transitionDelay: 0;
  --positionAdjustmentIn: 1;
  --positionAdjustmentOut: 1;
  --startY: calc(6.66% * var(--positionAdjustmentIn));
  --endY: calc(-7.20% * var(--positionAdjustmentOut));
  --startScale: 0.85;
  --endScale: 1;
  opacity: 0;
  transform-origin: center;
  transition: opacity var(--durationIn), transform var(--durationIn);
  transform: translateY(var(--startY)) scale(var(--startScale));
  transition-timing-function: var(--easeIn);
  transition-delay: var(--transitionDelay);
}
.ad-container .ad-content:hover #cta rect {
  fill: white;
}
.ad-container .ad-content:hover #cta path {
  fill: #1C2B33;
}
.ad-container.ready .ad-content {
  opacity: 1;
}
.ad-container.ready.show-logo #logo {
  transform: unset;
  opacity: 1;
}
.ad-container.ready.show-cta #cta {
  transform: unset;
  opacity: 1;
}
.ad-container.ready.show-text-1 #text1 [id^=line] {
  opacity: 1;
  transform: unset;
}
.ad-container.ready.hide-text-1 #text1 [id^=line] {
  opacity: 0;
  transform: translateY(var(--endY));
  transition-timing-function: var(--easeOut);
  transition-duration: var(--durationOut);
}
.ad-container.ready.show-text-2 #text2 [id^=line] {
  opacity: 1;
  transform: unset;
}
.ad-container.ready.hide-text-2 #text2 [id^=line] {
  opacity: 0;
  transform: translateY(var(--endY));
  transition-timing-function: var(--easeOut);
  transition-duration: var(--durationOut);
}
.ad-container.ready.show-text-3 #text3 [id^=line] {
  opacity: 1;
  transform: unset;
}
.ad-container.ready.reveal-images .image-container .mask .border.left, .ad-container.ready.reveal-images .image-container .mask .border.right {
  transform: scaleX(0);
}
.ad-container.ready.reveal-images .image-container .mask .border.top, .ad-container.ready.reveal-images .image-container .mask .border.bottom {
  transform: scaleY(0);
}
.ad-container.ready.show-image-1 .image-container img.img1 {
  --testDuration: var(--duration);
  animation-name: uvyyj04;
  animation-duration: var(--duration);
  animation-fill-mode: forwards;
  animation-delay: 0s;
  animation-timing-function: linear;
}
@keyframes uvyyj04 {
  0% {
    opacity: 0;
    transform: scale(1);
  }
  10% {
    opacity: 1;
  }
  100% {
    opacity: 1;
    transform: scale(var(--imageScale));
  }
}
.ad-container.ready.show-image-2 .image-container img.img2 {
  --testDuration: var(--duration);
  animation-name: uvyyj0m;
  animation-duration: var(--duration);
  animation-fill-mode: forwards;
  animation-delay: 0s;
  animation-timing-function: linear;
}
@keyframes uvyyj0m {
  0% {
    opacity: 0;
    transform: scale(1);
  }
  10% {
    opacity: 1;
  }
  100% {
    opacity: 1;
    transform: scale(var(--imageScale));
  }
}
.ad-container.ready.show-image-3 .image-container img.img3 {
  --testDuration: var(--duration);
  animation-name: uvyyj0q;
  animation-duration: var(--duration);
  animation-fill-mode: forwards;
  animation-delay: 0s;
  animation-timing-function: linear;
}
@keyframes uvyyj0q {
  0% {
    opacity: 0;
    transform: scale(1);
  }
  10% {
    opacity: 1;
  }
  100% {
    opacity: 1;
    transform: scale(var(--imageScale));
  }
}

.ad-container.size-160x600 .ad-content [id^=line] {
  --positionAdjustmentIn: 0.6;
  --positionAdjustmentOut: 0.4;
}
.ad-container.size-300x600 .ad-content [id^=line] {
  --positionAdjustmentIn: 0.6;
  --positionAdjustmentOut: 0.4;
}
.ad-container.size-728x90 .ad-content [id^=line] {
  --positionAdjustmentIn: 1.5;
  --positionAdjustmentOut: 1.5;
}