/* Shared base for demo screens: a fixed 1920x1080 canvas that player.js scales to fit. */
html, body { margin: 0; height: 100%; overflow: hidden; background: #000; }
*, *::before, *::after { box-sizing: border-box; }
.stage {
  position: absolute; left: 50%; top: 50%;
  width: 1920px; height: 1080px;
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
.slide { position: absolute; inset: 0; opacity: 0; transition: opacity 1.2s ease; }
.slide.on { opacity: 1; }
.slide .rise { opacity: 0; transform: translateY(24px); transition: opacity 1s ease .25s, transform 1s cubic-bezier(.2,.7,.2,1) .25s; }
.slide.on .rise { opacity: 1; transform: none; }
.slide .rise.d2 { transition-delay: .45s; }
.slide .rise.d3 { transition-delay: .65s; }

[data-qr] svg { display: block; width: 100%; height: 100%; }

.ticker { overflow: hidden; white-space: nowrap; }
.ticker > div { display: inline-block; padding-left: 100%; animation: ticker 48s linear infinite; }
@keyframes ticker { to { transform: translateX(-100%); } }

.still *, .still *::before, .still *::after { transition: none !important; animation: none !important; }
.still .ticker > div { padding-left: 72px; }