/* ============================================================
   HowTo premade animation — "Live Setup Session"
   Motion is driven by the Web Animations API (live-setup-session.js). This file
   only declares the per-animation BASE geometry (the WAAPI "from") and the
   transition-free `.is-*` end states used by the reduced-motion steady frame.
   ============================================================ */

.hta-setup {
    /* cursor sits behind the phone (phone z-index is 10) */
    --anim-cursor-z: 5;

    /* phone vertical positions; the QR counter-translate uses these so it
       stays world-fixed while the phone rises (travel = down - rest) */
    --ls-phone-down-y: 130cqi; /* off-frame */
    --ls-phone-rest-y: 16cqi;  /* at rest */
}

.hta-setup .ls-desktop {
    transform: scale(1);
    filter: blur(0);
    opacity: 1;
}

.hta-setup .ls-desktop.is-shrunk {
    transform: scale(0.86);
    filter: blur(4px);
}

.hta-setup .ls-desktop.is-faded {
    opacity: 0;
}

/* phone base (off-frame, left-ish) — the WAAPI "from"; center-anchored so the
   rest position matches live-join-session-phone's start. */
.hta-setup .ls-phone {
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%) translate(-19cqi, var(--ls-phone-down-y));
}

.hta-setup .ls-phone.is-in {
    transform: translate(-50%, -50%) translate(-19cqi, var(--ls-phone-rest-y));
}

/* World-fixed QR base: counter-translated by the phone's full vertical travel
   (rest - down) so it stays put while the phone's viewfinder rises to enclose it. */
.hta-setup .ls-scan-qr {
    transform: translate(-50%, -50%) translateY(calc(var(--ls-phone-rest-y) - var(--ls-phone-down-y)));
}

.hta-setup .ls-phone.is-in .ls-scan-qr {
    transform: translate(-50%, -50%) translateY(0);
}