* { box-sizing: border-box; }

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  overflow: hidden;
  background: transparent;
}

#promo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: 0;
  transform: translateX(110%);
}

#promo.is-visible {
  opacity: 1;
  transform: translateX(0);
  transition: transform 650ms cubic-bezier(.16, 1, .3, 1), opacity 160ms ease-out;
}

#promo.is-leaving {
  opacity: 0;
  transform: translateX(-110%);
  transition: transform 520ms cubic-bezier(.7, 0, .84, 0), opacity 420ms ease-in;
}