/* Page is embedded in an iframe on the site, so it stays transparent and unscrollable. */
:root {
  --bg: transparent;
  color-scheme: dark;
}
html,
body {
  margin: 0;
  height: 100%;
  background: transparent !important;
  background-color: transparent !important;
  overflow: hidden;
}
body {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Phone stage: keeps the 427 x 889 artboard ratio and fits the viewport. */
.stage {
  position: relative;
  width: min(100vw, calc(100vh * 427 / 889));
  aspect-ratio: 427 / 889;
}
.stage > svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  overflow: visible;
}

/* Elements animated from JS via style.transform / style.opacity. */
.anim {
  transform-box: fill-box;
  will-change: transform, opacity;
}
.layer {
  transform-box: fill-box;
  transform-origin: 50% 50%;
}
.ctl {
  transform-origin: 50% 50%;
}
#logoMark,
#logoWord {
  transform-box: fill-box;
  transform-origin: 50% 50%;
}