/* ============================================================================
 * ffv-render-overlay.css — the FFV's theatrical progress overlay.
 *
 * hardening-vault-faculties S8 / D8.3. Joe: "we need a more dramatic progress
 * indicator while the biography rendering is going on. IT CAN take awhile."
 *
 * The treatment is the vault's own lamplight: a warm scrim over the surface
 * being produced, a lamp breathing above it, the stage named in the display
 * face, and a rail of segments that fill as the work advances. The live
 * segment carries a --ro-sub fill when (and only when) the work counts itself.
 *
 * Host-agnostic by design — it inherits the FFV palette tokens and falls back
 * to the Biographer's Study warmth, so the same overlay reads correctly over a
 * parchment pane, a dark vessel, or the welcome editor.
 * ========================================================================== */

.ffv-render-overlay {
    position: absolute;
    inset: 0;
    z-index: 8;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 22px 26px;
    text-align: center;
    border-radius: inherit;
    background:
        radial-gradient(ellipse 78% 60% at 50% 34%,
            rgba(70, 46, 16, 0.30), rgba(14, 10, 20, 0.90) 76%),
        rgba(14, 10, 20, 0.86);
    -webkit-backdrop-filter: blur(2.5px);
    backdrop-filter: blur(2.5px);
    color: #f3e2b8;
    opacity: 0;
    transition: opacity 260ms ease;
    pointer-events: auto;   /* the surface beneath is mid-production — no edits */
}
.ffv-render-overlay.is-on { opacity: 1; }

/* ── the lamp: two rings breathing outward around a warm core ───────────── */
.ffv-ro-lamp {
    position: relative;
    width: 62px;
    height: 62px;
    margin-bottom: 4px;
    flex: 0 0 auto;
}
.ffv-ro-core {
    position: absolute;
    inset: 40%;
    border-radius: 50%;
    background: radial-gradient(circle at 40% 35%, #ffe9b0, #f0c66a 45%, #d99a3d 100%);
    box-shadow: 0 0 26px rgba(240, 198, 106, 0.6);
    animation: ffv-ro-breathe 2.4s ease-in-out infinite;
}
.ffv-ro-ring {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 1.5px solid rgba(240, 198, 106, 0.55);
    animation: ffv-ro-pulse 2.4s cubic-bezier(0.2, 0.6, 0.3, 1) infinite;
}
.ffv-ro-ring--2 { animation-delay: 1.2s; }

@keyframes ffv-ro-pulse {
    0%   { transform: scale(0.42); opacity: 0; }
    22%  { opacity: 0.85; }
    100% { transform: scale(1.05); opacity: 0; }
}
@keyframes ffv-ro-breathe {
    0%, 100% { transform: scale(1); filter: brightness(1); }
    50%      { transform: scale(1.14); filter: brightness(1.18); }
}

/* ── the words ──────────────────────────────────────────────────────────── */
.ffv-ro-title {
    font-family: var(--ffv-display-font, 'Playfair Display', Georgia, serif);
    font-size: calc(1.16rem * var(--type-scale, 1));
    font-weight: 600;
    color: #f3e2b8;
    letter-spacing: 0.012em;
    text-shadow: 0 0 20px rgba(240, 198, 106, 0.24);
}
.ffv-ro-stage {
    font-size: calc(0.98rem * var(--type-scale, 1));
    color: #f0c66a;
    font-weight: 600;
    min-height: 1.3em;
    transition: opacity 200ms ease;
}
.ffv-ro-detail {
    font-size: calc(0.82rem * var(--type-scale, 1));
    font-style: italic;
    color: rgba(240, 230, 205, 0.78);
    min-height: 1.2em;
}
.ffv-ro-note {
    margin-top: 6px;
    max-width: 34ch;
    font-size: calc(0.76rem * var(--type-scale, 1));
    color: rgba(240, 230, 205, 0.55);
    line-height: 1.5;
}

/* ── the rail: one segment per stage; the live one fills with sub-progress ─ */
.ffv-ro-rail {
    display: flex;
    gap: 6px;
    width: min(280px, 80%);
    margin-top: 4px;
}
.ffv-ro-seg {
    --ro-sub: 0%;
    position: relative;
    flex: 1 1 0;
    height: 4px;
    border-radius: 999px;
    background: rgba(240, 198, 106, 0.18);
    overflow: hidden;
}
.ffv-ro-seg.is-done { background: rgba(240, 198, 106, 0.72); }
/* the live segment: a base shimmer (work is happening, count unknown) plus a
   determinate fill that only advances on a real reported count */
.ffv-ro-seg.is-live {
    background: linear-gradient(90deg,
        rgba(240, 198, 106, 0.7) 0%, rgba(240, 198, 106, 0.24) 40%,
        rgba(240, 198, 106, 0.7) 80%);
    background-size: 220% 100%;
    animation: ffv-ro-shimmer 1.5s linear infinite;
}
.ffv-ro-seg.is-live::after {
    content: '';
    position: absolute;
    inset: 0 auto 0 0;
    width: var(--ro-sub, 0%);
    background: #f0c66a;
    box-shadow: 0 0 10px rgba(240, 198, 106, 0.7);
    transition: width 420ms cubic-bezier(0.32, 0.72, 0.24, 1);
}
@keyframes ffv-ro-shimmer {
    from { background-position: 120% 0; }
    to   { background-position: -120% 0; }
}

/* ── the three terminal moods ───────────────────────────────────────────── */
/* stalled: the lamp slows, the words stay honest ("still working") */
.ffv-render-overlay.is-stalled .ffv-ro-core { animation-duration: 4.2s; }
.ffv-render-overlay.is-stalled .ffv-ro-ring { animation-duration: 4.2s; }

.ffv-render-overlay.is-done .ffv-ro-stage { color: #b7e08a; }
.ffv-render-overlay.is-done .ffv-ro-core {
    animation: none;
    background: radial-gradient(circle at 40% 35%, #eafbd4, #b7e08a 50%, #6f9b3c 100%);
    box-shadow: 0 0 34px rgba(183, 224, 138, 0.6);
}
.ffv-render-overlay.is-done .ffv-ro-ring { animation: none; opacity: 0; }
.ffv-render-overlay.is-done .ffv-ro-seg { background: rgba(183, 224, 138, 0.72); animation: none; }
.ffv-render-overlay.is-done .ffv-ro-seg::after { width: 100%; background: #b7e08a; }

.ffv-render-overlay.is-failed .ffv-ro-stage { color: #f0a08a; }
.ffv-render-overlay.is-failed .ffv-ro-core {
    animation: none;
    background: radial-gradient(circle at 40% 35%, #ffd8cc, #d97a5f 55%, #933a24 100%);
    box-shadow: 0 0 30px rgba(217, 122, 95, 0.5);
}
.ffv-render-overlay.is-failed .ffv-ro-ring { animation: none; opacity: 0; }
.ffv-render-overlay.is-failed .ffv-ro-seg { animation: none; }

/* ── the change reading (repairing-portrait-custody S4, D4.4) ─────────────
   Joe: "presents highlights of the revised biography and characterizes the
   changes … on the basis of input from the user."

   Set as a manuscript note rather than a status widget: the characterization
   in the display face, the changed passage QUOTED in the reading face behind
   a warm rule (this is the biography's own prose — it should look like it),
   and the family's words beneath in the quieter voice. Sized to the pane it
   covers, so a long passage never pushes the rail off the bottom. */
.ffv-ro-change {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    margin-top: 8px;
    max-width: 46ch;
    animation: ffv-ro-change-in 320ms ease both;
}
.ffv-ro-change[hidden] { display: none; }
.ffv-ro-change-line {
    font-size: calc(0.8rem * var(--type-scale, 1));
    font-weight: 600;
    letter-spacing: 0.01em;
    color: rgba(240, 198, 106, 0.92);
}
.ffv-ro-highlight {
    margin: 0;
    padding: 6px 0 6px 12px;
    border-left: 2px solid rgba(240, 198, 106, 0.45);
    text-align: left;
    font-family: var(--font-reading, Georgia, 'Times New Roman', serif);
    font-size: calc(0.84rem * var(--type-scale, 1));
    line-height: 1.55;
    color: rgba(243, 226, 184, 0.90);
    /* a rewritten paragraph can be long — cap it at three lines of quote */
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.ffv-ro-highlight[hidden] { display: none; }
.ffv-ro-hl-kind {
    display: inline-block;
    margin-right: 8px;
    padding: 1px 7px;
    border-radius: 999px;
    background: rgba(240, 198, 106, 0.16);
    font-family: inherit;
    font-size: 0.72em;
    font-weight: 700;
    font-style: normal;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    vertical-align: 2px;
    color: rgba(240, 198, 106, 0.95);
}
.ffv-ro-stimulus {
    font-size: calc(0.74rem * var(--type-scale, 1));
    font-style: italic;
    color: rgba(240, 230, 205, 0.60);
    line-height: 1.45;
}
.ffv-ro-stimulus[hidden] { display: none; }
@keyframes ffv-ro-change-in {
    from { opacity: 0; transform: translateY(4px); }
    to   { opacity: 1; transform: none; }
}

/* ── motion discipline ──────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .ffv-ro-core, .ffv-ro-ring, .ffv-ro-seg.is-live, .ffv-ro-change { animation: none; }
    .ffv-ro-ring { opacity: 0.4; transform: scale(1); }
    .ffv-render-overlay { transition: none; }
    .ffv-ro-seg.is-live::after { transition: none; }
}

/* ── mobile: the sheet is narrower; trim the furniture, keep the words ──── */
@media (max-width: 768px) {
    .ffv-render-overlay { padding: 18px; gap: 8px; }
    .ffv-ro-lamp { width: 50px; height: 50px; }
    .ffv-ro-note { max-width: 30ch; }
    .ffv-ro-change { max-width: 32ch; }
    .ffv-ro-highlight { -webkit-line-clamp: 2; }
}