.hta-anim {
    /* mirrored design tokens (maestra-captioner, light theme) */
    --ls-primary: #1073e6;
    --ls-on-primary: #ffffff;
    --ls-text: #334260;
    --ls-bg: #ffffff;
    --ls-el1: #f9fafb;
    --ls-border: #e5e7eb;
    --ls-tertiary: #ff9f11;

    width: 100%;
    height: 100%;
    display: grid;
    place-items: center;
    background: var(--ls-bg);
}

.hta-stage {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1;
    container-type: inline-size;
    overflow: hidden;
    background: var(--ls-bg);
    font-family: var(--appFont, 'Plus Jakarta Sans', sans-serif);
    color: var(--ls-text);
}

@container showcase (aspect-ratio > 1) {
    .hta-stage {
        width: auto;
        height: 100%;
    }
}

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

.hta-session[data-phase="setup"] {
    /* the cursor clicks the dashboard behind the phone (z-index 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-session .ls-desktop {
    transform: scale(1);
    filter: blur(0);
    opacity: 1;
}

.hta-session .ls-desktop.is-faded,
.hta-session:not([data-phase="setup"]) .ls-desktop {
    opacity: 0;
}

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

/* theater end state (reduced-motion; the WAAPI animates to these values) */
.hta-session .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);
}

.hta-session .ls-phone {
    left: 50%;
    top: 50%;
}

.hta-session[data-phase="setup"] .ls-phone[data-phone-role="main"] {
    transform: translate(-50%, -50%) translate(-19cqi, var(--ls-phone-down-y));
}

.hta-session[data-phase="setup"] .ls-phone[data-phone-role="main"].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-session[data-phase="setup"] .ls-scan-qr {
    transform: translate(-50%, -50%) translateY(calc(var(--ls-phone-rest-y) - var(--ls-phone-down-y)));
}

.hta-session[data-phase="setup"] .ls-phone.is-in .ls-scan-qr {
    transform: translate(-50%, -50%) translateY(0);
}

.hta-session[data-phase="join"] .ls-phone[data-phone-role="main"] {
    transform: translate(-50%, -50%) translate(-19cqi, 16cqi) scale(1);
}

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

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

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

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

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

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

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

.hta-session:not([data-phase="setup"]) .ls-phone-scan {
    display: none;
}

.hta-session:not([data-phase="setup"]) .ls-phone-head,
.hta-session:not([data-phase="setup"]) .ls-phone-body {
    opacity: 1;
}

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

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