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

.hta-ongoing {
    --anim-cursor-z: 60;
}

/* dimmed first frame (matches join's end) + reduced-motion */
.hta-ongoing .ls-live.is-dimmed {
    opacity: 0.3;
    filter: blur(4px);
}

/* theater end state (reduced-motion; the WAAPI animates to these values) */
.hta-ongoing .ls-live.is-theater {
    top: 3cqi;
    left: 8cqi;
    right: 8cqi;
    bottom: 59cqi; /* -> width 84cqi, height 38cqi, centered horizontally */
    border-radius: 1.5cqi;
    box-shadow: 0 3cqi 8cqi rgba(0, 0, 0, 0.18);
}

/* phone bases (the WAAPI "from"s) and the `.is-row` end states (reduced-motion).
   All settle at scale 0.55 in a centered row; the main phone starts centered. */
.hta-ongoing .ls-phone {
    left: 50%;
    top: 50%;
}

.hta-ongoing .ls-phone[data-phone-role="main"] {
    transform: translate(-50%, -50%) scale(1.42);
}

.hta-ongoing .ls-phone[data-phone-role="de"] {
    transform: translate(-50%, -50%) translate(-19cqi, 130cqi) scale(0.55);
}

.hta-ongoing .ls-phone[data-phone-role="fr"] {
    transform: translate(-50%, -50%) translate(19cqi, 130cqi) scale(0.55);
}

.hta-ongoing .ls-phone[data-phone-role="main"].is-row {
    transform: translate(-50%, -50%) translate(0cqi, 20cqi) scale(0.55);
}

.hta-ongoing .ls-phone[data-phone-role="de"].is-row {
    transform: translate(-50%, -50%) translate(-19cqi, 20cqi) scale(0.55);
}

.hta-ongoing .ls-phone[data-phone-role="fr"].is-row {
    transform: translate(-50%, -50%) translate(19cqi, 20cqi) scale(0.55);
}

.hta-ongoing .ls-phone-scan {
    display: none;
}

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

/* a phone in its caption state hides the join body and shows the caption
   (other phones use this class instantly; the main phone is WAAPI-crossfaded) */
.hta-ongoing .ls-phone.is-caption .ls-phone-body {
    opacity: 0;
}

.hta-ongoing .ls-phone.is-caption .ls-phone-caption {
    opacity: 1;
}