/* Device stage: a phone frame that hosts one animation (iframe page or video). Import with stage.js. */
.stage { --w: 393; --h: 852; --bezel: 10px; --radius: 54px; position: relative; width: 100%; max-width: 393px; margin: 0 auto; }
.stage__frame { position: relative; border-radius: var(--radius); background: #111; padding: var(--bezel); box-shadow: 0 24px 60px rgba(0,0,0,.18); }
.stage__screen { position: relative; width: 100%; aspect-ratio: var(--w) / var(--h); overflow: hidden; border-radius: calc(var(--radius) - var(--bezel)); background: #fff; }
.stage__screen > iframe, .stage__screen > video { position: absolute; left: 0; top: 0; border: 0; display: block; }
.stage__screen > iframe { width: calc(var(--w) * 1px); height: calc(var(--h) * 1px); transform-origin: 0 0; transform: scale(var(--s, 1)); }
.stage__screen > video { width: 100%; height: 100%; object-fit: cover; }
.stage__foot { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 14px; }
.stage__btns { display: flex; gap: 8px; }
.stage__btn { width: 32px; height: 32px; border-radius: 50%; border: 1px solid #ddd; background: #fff; color: #1A1A1A; display: grid; place-items: center; cursor: pointer; }
.stage__btn:hover { border-color: #1A1A1A; }
.stage__btn svg { width: 18px; height: 18px; fill: currentColor; }
.stage__label { font: 500 14px/1.3 Onest, system-ui, sans-serif; color: #1A1A1A; }
@media (prefers-reduced-motion: reduce) { .stage[data-reduced] .stage__screen > video { display: none; } }

/* static screens */
.stage__screen > img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; }
.stage--tall .stage__screen > img { height: auto; object-fit: unset; will-change: transform; }
.stage--tall.is-visible .stage__screen > img { animation: stage-scroll 16s ease-in-out 1.2s infinite alternate; }
@keyframes stage-scroll { from { transform: translateY(0); } to { transform: translateY(var(--shift, 0px)); } }
@media (prefers-reduced-motion: reduce) { .stage--tall.is-visible .stage__screen > img { animation: none; } }
.stage--flat .stage__frame { padding: 0; background: none; box-shadow: none; border-radius: 24px; }
.stage--flat .stage__screen { border-radius: 24px; }