:root {
  --slot-width: 970px;
  --slot-height: 250px;
  --preview-scale: 1;
}

* {
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
}

body {
  overflow: hidden;
  background: #f2f2f2;
  font-family: Arial, Helvetica, sans-serif;
}

.stage {
  display: grid;
  width: 100vw;
  height: 100vh;
  place-items: center;
  overflow: hidden;
  background: #f2f2f2;
}

.banner {
  position: relative;
  display: block;
  width: var(--slot-width);
  height: var(--slot-height);
  --flight-z: 10;
  --phone-frame-z: 6;
  overflow: hidden;
  background: #00fb68;
  color: transparent;
  text-decoration: none;
  transform: scale(var(--preview-scale));
  transform-origin: center;
}

.banner::after {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 5;
  display: none;
  height: var(--bottom-band, 0);
  background: #1d1d1d;
  content: "";
  pointer-events: none;
}

html[data-layout="portrait"] .banner::after,
html[data-layout="narrow"] .banner::after {
  display: block;
}

.banner__fallback {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.banner__layer {
  position: absolute;
  left: var(--x);
  top: var(--y);
  z-index: var(--z);
  display: block;
  width: var(--w);
  height: var(--h);
  max-width: none;
  object-fit: contain;
  pointer-events: none;
  user-select: none;
}

.asset {
  display: none;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: contain;
  pointer-events: none;
  user-select: none;
}

.banner__badge {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: contain;
  pointer-events: none;
  transform-origin: 50% 50%;
  user-select: none;
}

html[data-layout="wide"] .asset--wide,
html[data-layout="landscape"] .asset--landscape,
html[data-layout="portrait"] .asset--portrait,
html[data-layout="narrow"] .asset--narrow {
  display: block;
}

.banner__layer--shape {
  display: none;
}

html[data-layout="portrait"] .banner__layer--shape,
html[data-layout="narrow"] .banner__layer--shape {
  display: block;
}

.banner__layer--product,
.banner__layer--product-empty {
  transition: opacity 180ms linear;
}

.banner__layer--product {
  --product-object-position: center center;
  transform-origin: 50% 100%;
}

.banner__layer--product-empty {
  --product-object-position: center center;
  z-index: var(--phone-frame-z);
  opacity: 0;
}

.banner__layer--product .asset,
.banner__layer--product-empty .asset {
  object-position: var(--product-object-position);
}

html[data-product-phase="empty"] .banner__layer--product-empty,
html[data-product-phase="rabbit"] .banner__layer--product-empty,
html[data-product-phase="dryer"] .banner__layer--product-empty,
html[data-product-phase="towel"] .banner__layer--product-empty,
html[data-product-phase="mango"] .banner__layer--product-empty {
  opacity: 1;
}

html[data-product-phase="empty"] .banner__layer--product,
html[data-product-phase="rabbit"] .banner__layer--product,
html[data-product-phase="dryer"] .banner__layer--product,
html[data-product-phase="towel"] .banner__layer--product,
html[data-product-phase="mango"] .banner__layer--product {
  opacity: 0;
}

.banner__phone-screen {
  position: absolute;
  left: var(--screen-x);
  top: var(--screen-y);
  z-index: var(--screen-z);
  width: var(--screen-w);
  height: var(--screen-h);
  border-radius: 6px;
  transform: rotate(var(--screen-r));
  transform-origin: 0 0;
  pointer-events: none;
}

.banner__phone-screen--mask {
  z-index: calc(var(--screen-z) + 1);
  overflow: hidden;
}

.banner__phone-screen--flight {
  z-index: var(--flight-z);
  overflow: visible;
  clip-path: inset(-220% -320% -220% calc(100% - 2px));
}

html[data-scene-state="hidden"] .banner__layer:not(.banner__layer--product),
html[data-scene-state="hidden"] .banner__phone-screen,
html[data-scene-state="out"] .banner__layer:not(.banner__layer--product),
html[data-scene-state="out"] .banner__phone-screen {
  opacity: 0;
}

html[data-scene-state="hidden"] .banner::after,
html[data-scene-state="exiting"] .banner::after,
html[data-scene-state="out"] .banner::after {
  opacity: 0;
}

.banner__switch-product {
  position: absolute;
  left: var(--product-x, 0);
  top: var(--product-y, 0);
  display: block;
  width: var(--product-w, 100%);
  height: var(--product-h, 100%);
  max-width: none;
  object-fit: contain;
  opacity: 0;
  transform-origin: 50% 50%;
  transform: none;
  z-index: 1;
  pointer-events: none;
  will-change: opacity, transform;
}

.banner__switch-product--dryer {
  --product-x: -36%;
  --product-y: 15%;
  --product-w: 128%;
  --product-h: 78%;
}

.banner__switch-product--rabbit {
  --product-x: -33%;
  --product-y: 4%;
  --product-w: 168%;
  --product-h: 90%;
}

.banner__switch-product--towel {
  --product-x: -56%;
  --product-y: 20%;
  --product-w: 190%;
  --product-h: 63%;
}

.banner__switch-product--mango {
  --product-x: -18%;
  --product-y: 4%;
  --product-w: 136%;
  --product-h: 88%;
}

html[data-layout="narrow"] .banner__switch-product--rabbit {
  --product-x: -22%;
  --product-y: 9%;
  --product-w: 142%;
  --product-h: 76%;
}

html[data-layout="narrow"] .banner__switch-product--dryer {
  --product-x: -25%;
  --product-y: 20%;
  --product-w: 112%;
  --product-h: 66%;
}

html[data-layout="narrow"] .banner__switch-product--towel {
  --product-x: -24%;
  --product-y: 16%;
  --product-w: 142%;
  --product-h: 64%;
}

html[data-layout="narrow"] .banner__switch-product--mango {
  --product-x: -8%;
  --product-y: 12%;
  --product-w: 112%;
  --product-h: 72%;
}

html[data-product-phase="rabbit"] .banner__phone-screen--mask .banner__switch-product--rabbit,
html[data-product-phase="dryer"] .banner__phone-screen--mask .banner__switch-product--dryer,
html[data-product-phase="towel"] .banner__phone-screen--mask .banner__switch-product--towel,
html[data-product-phase="mango"] .banner__phone-screen--mask .banner__switch-product--mango {
  opacity: 1;
}

html[data-layout="wide"] .banner__layer--product,
html[data-layout="wide"] .banner__layer--product-empty {
  --product-object-position: center bottom;
  --x: 50%;
  --y: 0;
  --w: 45.9%;
  --h: 100%;
  --z: 1;
}

html[data-layout="wide"] .banner {
  --bottom-band: 0;
}

html[data-layout="wide"] .banner__phone-screen {
  --screen-x: 60.5%;
  --screen-y: 7%;
  --screen-w: 20.1%;
  --screen-h: 97.1%;
  --screen-r: -10deg;
  --screen-z: 8;
}

html[data-layout="wide"] .banner__layer--headline {
  --x: 2.9%;
  --y: 8%;
  --w: 23.9%;
  --h: 19.6%;
  --z: 3;
}

html[data-layout="wide"] .banner__layer--logo {
  --x: 2.9%;
  --y: 34%;
  --w: 50.8%;
  --h: 32.8%;
  --z: 3;
}

html[data-layout="wide"] .banner__layer--offer {
  --x: 35.5%;
  --y: 8%;
  --w: 18.2%;
  --h: 19.6%;
  --z: 3;
}

html[data-layout="wide"] .banner__layer--cta {
  --x: 2.9%;
  --y: 57.2%;
  --w: 20.5%;
  --h: 34.8%;
  --z: 3;
}

html[data-layout="wide"] .banner__layer--legal {
  --x: 25.6%;
  --y: 74.4%;
  --w: 29.6%;
  --h: 18%;
  --z: 4;
}

html[data-layout="wide"] .banner__layer--age {
  --x: 94.5%;
  --y: 79.2%;
  --w: 3.6%;
  --h: 14.4%;
  --z: 9;
}

html[data-layout="landscape"] .banner__layer--headline {
  --x: 4.2%;
  --y: 5%;
  --w: 48.3%;
  --h: 15.3%;
  --z: 3;
}

html[data-layout="landscape"] .banner__layer--logo {
  --x: 4.2%;
  --y: 27.8%;
  --w: 91.7%;
  --h: 22.8%;
  --z: 3;
}

html[data-layout="landscape"] .banner__layer--offer {
  --x: 59%;
  --y: 5%;
  --w: 36.9%;
  --h: 15.3%;
  --z: 3;
}

html[data-layout="landscape"] .banner__layer--cta {
  --x: 4.2%;
  --y: 45.3%;
  --w: 41.5%;
  --h: 27.2%;
  --z: 3;
}

html[data-layout="landscape"] .banner__layer--product,
html[data-layout="landscape"] .banner__layer--product-empty {
  --product-object-position: center bottom;
  --x: 32.3%;
  --y: 10%;
  --w: 67.7%;
  --h: 90%;
  --z: 4;
}

html[data-layout="landscape"] .banner__phone-screen {
  --screen-x: 49.2%;
  --screen-y: 44.2%;
  --screen-w: 31.3%;
  --screen-h: 58.5%;
  --screen-r: -14deg;
  --screen-z: 8;
}

html[data-layout="landscape"] .banner__layer--legal {
  --x: 4.2%;
  --y: 77.5%;
  --w: 42.5%;
  --h: 15%;
  --z: 7;
}

html[data-layout="landscape"] .banner__layer--age {
  --x: 88.5%;
  --y: 82.8%;
  --w: 7.3%;
  --h: 11.3%;
  --z: 9;
}

html[data-layout="portrait"] .banner {
  --bottom-band: 13.75%;
}

html[data-layout="portrait"] .banner__layer--shape {
  --x: 0;
  --y: 25.8%;
  --w: 100%;
  --h: 74.2%;
  --z: 1;
}

html[data-layout="portrait"] .banner__layer--headline {
  --x: 6.25%;
  --y: 4.2%;
  --w: 49.4%;
  --h: 7.1%;
  --z: 2;
}

html[data-layout="portrait"] .banner__layer--logo {
  --x: 6.25%;
  --y: 15%;
  --w: 87.5%;
  --h: 9.8%;
  --z: 2;
}

html[data-layout="portrait"] .banner__layer--offer {
  --x: 56.3%;
  --y: 4.2%;
  --w: 37.5%;
  --h: 7.1%;
  --z: 2;
}

html[data-layout="portrait"] .banner__layer--cta {
  --x: 6.25%;
  --y: 22.5%;
  --w: 48.4%;
  --h: 14.2%;
  --z: 6;
}

html[data-layout="portrait"] .banner__layer--product,
html[data-layout="portrait"] .banner__layer--product-empty {
  --product-object-position: left bottom;
  --x: 0;
  --y: 23.3%;
  --w: 92.8%;
  --h: 77.3%;
  --z: 3;
}

html[data-layout="portrait"] .banner__phone-screen {
  --screen-x: 23.6%;
  --screen-y: 37.2%;
  --screen-w: 46.9%;
  --screen-h: 39%;
  --screen-r: 13.3deg;
  --screen-z: 8;
}

html[data-layout="portrait"] .banner__layer--legal {
  --x: 6.25%;
  --y: 88.3%;
  --w: 87.5%;
  --h: 8.5%;
  --z: 7;
}

html[data-layout="portrait"] .banner__layer--age {
  --x: 83.4%;
  --y: 27.1%;
  --w: 10.9%;
  --h: 7.5%;
  --z: 9;
}

html[data-layout="narrow"] .banner {
  --bottom-band: 16.7%;
}

html[data-layout="narrow"] .banner__layer--shape {
  --x: 0;
  --y: 30%;
  --w: 100%;
  --h: 63.8%;
  --z: 1;
}

html[data-layout="narrow"] .banner__layer--headline {
  --x: 6.25%;
  --y: 4.3%;
  --w: 41.3%;
  --h: 5%;
  --z: 2;
}

html[data-layout="narrow"] .banner__layer--logo {
  --x: 6.25%;
  --y: 11%;
  --w: 87.5%;
  --h: 8.3%;
  --z: 2;
}

html[data-layout="narrow"] .banner__layer--offer {
  --x: 62.5%;
  --y: 4.3%;
  --w: 31.3%;
  --h: 5%;
  --z: 2;
}

html[data-layout="narrow"] .banner__layer--cta {
  --x: 6.25%;
  --y: 16.7%;
  --w: 35.4%;
  --h: 8.8%;
  --z: 2;
}

html[data-layout="narrow"] .banner__layer--product,
html[data-layout="narrow"] .banner__layer--product-empty {
  --product-object-position: left bottom;
  --x: -7.5%;
  --y: 12.9%;
  --w: 100%;
  --h: 87.9%;
  --z: 3;
}

html[data-layout="narrow"] .banner__phone-screen {
  --screen-x: 19.8%;
  --screen-y: 28.7%;
  --screen-w: 62.5%;
  --screen-h: 44.5%;
  --screen-r: 13.3deg;
  --screen-z: 8;
}

html[data-layout="narrow"] .banner__layer--legal {
  --x: 5.8%;
  --y: 85.7%;
  --w: 88.3%;
  --h: 11.9%;
  --z: 7;
}

html[data-layout="narrow"] .banner__layer--age {
  --x: 81.7%;
  --y: 28.6%;
  --w: 12.5%;
  --h: 7.1%;
  --z: 9;
}

.banner__layer--offer .banner__badge,
.banner__layer--cta .banner__badge {
  animation: messagePing 12s cubic-bezier(.2, .8, .2, 1) infinite;
  will-change: filter, transform;
}

.banner__layer--offer .banner__badge {
  animation-delay: 1.6s;
}

.banner__layer--cta .banner__badge {
  animation-delay: 6.4s;
}

@keyframes messagePing {
  0%,
  17%,
  100% {
    filter: none;
    transform: translate3d(0, 0, 0) scale(1);
  }

  4% {
    filter: drop-shadow(0 10px 16px rgba(0, 0, 0, .18));
    transform: translate3d(0, -2px, 0) scale(1.07);
  }

  8% {
    filter: drop-shadow(0 6px 10px rgba(0, 0, 0, .12));
    transform: translate3d(0, 1px, 0) scale(.985);
  }

  12% {
    filter: drop-shadow(0 4px 8px rgba(0, 0, 0, .08));
    transform: translate3d(0, -1px, 0) scale(1.025);
  }
}

@media (prefers-reduced-motion: reduce) {
  .banner__layer,
  .banner__badge,
  .banner__switch-product {
    transition: none;
    animation: none;
  }
}