/* Promotion dialog follows the A004 coral, peach and white tokens. */
.promo-modal{
  width:fit-content;
  max-width:calc(100vw - 32px);
  max-height:calc(100vh - 32px);
  max-height:calc(100dvh - 32px);
  margin:auto;
  padding:10px;
  border:2px solid var(--primary);
  border-radius:20px;
  background:var(--secondary);
  color:var(--text);
  box-shadow:0 0 20px rgba(0,0,0,.5);
  overflow:hidden;
}
.promo-modal::backdrop{background:rgba(0,0,0,.72)}
.promo-modal__toolbar{position:absolute;top:10px;right:10px;z-index:1}
.promo-modal__close{
  display:flex;
  align-items:center;
  justify-content:center;
  flex:none;
  width:44px;
  height:44px;
  padding:0;
  border:2px solid var(--primary);
  border-radius:50%;
  background:var(--primary);
  color:var(--accent);
  cursor:pointer;
  line-height:1;
}
.promo-modal__close:hover{background:var(--accent);color:var(--primary)}
.promo-modal__close:focus-visible{outline:3px solid var(--text);outline-offset:2px}
.promo-modal__close svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2}
.promo-modal__image{
  display:block;
  width:auto;
  height:auto;
  max-width:min(540px,calc(100vw - 56px));
  max-height:calc(100vh - 56px);
  max-height:calc(100dvh - 56px);
  margin-inline:auto;
  border-radius:8px;
  object-fit:contain;
}
.promo-modal__stage{
  position:relative;
  width:min(540px,calc(100vw - 56px),calc((100vh - 56px) * .749790795));
  width:min(540px,calc(100vw - 56px),calc((100dvh - 56px) * .749790795));
  aspect-ratio:896 / 1195;
  margin-inline:auto;
  overflow:hidden;
  border-radius:8px;
  background:var(--accent);
  touch-action:pan-y;
  user-select:none;
}
.promo-modal__stage .promo-modal__image{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  max-width:none;
  max-height:none;
  margin:0;
  object-fit:contain;
  user-select:none;
}
.promo-modal__stage .promo-modal__image[hidden]{display:none}
.promo-modal__track{
  position:absolute;
  inset:0;
  display:flex;
  width:100%;
  height:100%;
  transform:translateX(0);
  transition:transform .38s ease;
  will-change:transform;
}
.promo-modal__stage .promo-modal__track .promo-modal__image{
  position:static;
  inset:auto;
  flex:0 0 100%;
  min-width:0;
}