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

.hta-join {
    /* cursor sits ABOVE the phone so it can tap the dropdown / button */
    --anim-cursor-z: 60;
}

.hta-join .ls-live.is-dimmed {
    opacity: 0.3;
    filter: blur(4px);
}

/* phone base (lower-left, joined) — the WAAPI "from"; matches setup's end */
.hta-join .ls-phone {
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%) translate(-19cqi, 16cqi) scale(1);
}

.hta-join .ls-phone.is-centered {
    transform: translate(-50%, -50%) scale(1.42);
}

/* no scanning step here — the join screen (header + body) is already shown */
.hta-join .ls-phone-scan {
    display: none;
}

.hta-join .ls-phone-head,
.hta-join .ls-phone-body {
    opacity: 1;
}