/* ============================================================
   hero-overlay-demo.css — the voiced-overlay hero animation.
   A miniature publisher site in a browser frame, auto-playing the
   voiced overlay's real states — launcher, warm-up, Lexy reading
   (karaoke + answer glow), listening, heard, checking, verdict by
   color, evidence jump with the minimized pill, per-source score —
   on an article page and then on a video page whose "footage" is a
   live canvas scene with cycling captions. Pure presentation: the
   timeline lives in js/hero-overlay-demo.js. Design box is 720px
   wide; the JS scales the stage to the container. Flat colors
   throughout (gradients retired across the widgets).
   ============================================================ */

#lxOvStage { width: 100%; max-width: 720px; pointer-events: none; user-select: none; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; }
.lxov-scaler { transform-origin: top left; }

/* ---- browser frame ---- */
.lxov-frame {
    position: relative; width: 720px; height: 470px;
    border-radius: 18px; overflow: hidden;
    background: #FDFCFA;
    box-shadow: 0 24px 60px -18px rgba(35, 30, 65, .35), 0 0 0 1px rgba(35, 30, 65, .07);
    transition: opacity .5s ease;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}
.lxov-frame.s-swap { opacity: 0; }

.lxov-chrome {
    height: 36px; display: flex; align-items: center; gap: 6px;
    padding: 0 14px; background: #F1EEF9; border-bottom: 1px solid #E5E0F2;
}
.lxov-dot { width: 9px; height: 9px; border-radius: 50%; }
.lxov-url {
    flex: 1; margin: 0 60px 0 12px; height: 21px; border-radius: 11px;
    background: #fff; border: 1px solid #E5E0F2;
    display: flex; align-items: center; justify-content: center; gap: 6px;
    font-size: 10.5px; color: #8a86a3; letter-spacing: .01em;
}
.lxov-url svg { flex-shrink: 0; }

.lxov-view { position: absolute; top: 36px; left: 0; right: 0; bottom: 0; overflow: hidden; }

/* ---- the sample pages (scrolled by translateY) ---- */
.lxov-page {
    position: absolute; left: 0; right: 0; top: 0;
    padding: 26px 44px 60px; opacity: 0; visibility: hidden;
    transition: transform 1.6s cubic-bezier(.45, 0, .2, 1), opacity .4s ease;
}
.scene-article .lxov-page-article, .scene-video .lxov-page-video { opacity: 1; visibility: visible; }
.s-scrolled .lxov-page-article { transform: translateY(-268px); }
.s-evidence.scene-article .lxov-page-article { transform: translateY(-332px); }

.lxov-kicker { font-size: 10px; font-weight: 700; letter-spacing: .14em; color: #8D75E6; text-transform: uppercase; }
.lxov-h1 { font-family: 'Rubik', -apple-system, sans-serif; font-weight: 700; font-size: 26px; line-height: 1.16; letter-spacing: -.01em; color: #231E41; margin: 8px 0 7px; }
.lxov-meta { font-size: 10.5px; color: #9a96ae; margin-bottom: 16px; }
.lxov-img { height: 150px; border-radius: 10px; margin-bottom: 18px; background: #2FA391; position: relative; overflow: hidden; }
.lxov-p { font-size: 12.5px; line-height: 1.75; color: #43405a; margin: 0 0 13px; }
.lxov-evidence { border-radius: 6px; transition: background .5s ease, box-shadow .5s ease; }
.s-evidence.scene-article .lxov-evidence {
    background: rgba(255, 200, 87, .38);
    box-shadow: 0 0 0 6px rgba(255, 200, 87, .38);
}
.lxov-sk { height: 9px; border-radius: 5px; background: #E9E6F2; margin: 0 0 11px; }

/* ---- video page: canvas footage + captions + chrome ---- */
.lxov-player { position: relative; height: 252px; border-radius: 12px; overflow: hidden; background: #10233a; margin-bottom: 16px; }
.lxov-player canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.lxov-cap {
    position: absolute; left: 50%; bottom: 30px; transform: translateX(-50%); z-index: 2;
    max-width: 86%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    font-size: 12px; font-weight: 500; color: #fff; text-align: center;
    background: rgba(0, 0, 0, .55); border-radius: 6px; padding: 4px 10px;
    transition: opacity .3s ease;
}
.lxov-cap.hot { background: rgba(255, 200, 87, .85); color: #231E41; }
.lxov-timecode {
    position: absolute; left: 12px; bottom: 32px; z-index: 2;
    font-size: 10.5px; font-variant-numeric: tabular-nums; color: rgba(255, 255, 255, .92);
    background: rgba(0, 0, 0, .45); border-radius: 6px; padding: 3px 7px;
}
.lxov-pbar { position: absolute; left: 0; right: 0; bottom: 0; height: 5px; background: rgba(255, 255, 255, .18); z-index: 2; }
.lxov-pfill { position: absolute; left: 0; top: 0; bottom: 0; width: 6%; background: #8D75E6; transition: width .45s linear; }
.lxov-pmark { position: absolute; top: -2.5px; width: 10px; height: 10px; border-radius: 50%; background: #FFC857; left: 76%; transform: translateX(-50%); opacity: 0; transition: opacity .3s ease; }
.s-seek .lxov-pmark { opacity: 1; animation: lxovPing 1.1s ease-out 2; }
@keyframes lxovPing {
    0% { box-shadow: 0 0 0 0 rgba(255, 200, 87, .65); }
    100% { box-shadow: 0 0 0 14px rgba(255, 200, 87, 0); }
}
.lxov-eq { position: absolute; right: 12px; top: 12px; z-index: 2; display: flex; align-items: flex-end; gap: 2.5px; height: 14px; }
.lxov-eq span { width: 3px; border-radius: 2px; background: rgba(255, 255, 255, .85); transform-origin: bottom; animation: lxovEq .9s ease-in-out infinite; }
.lxov-eq span:nth-child(2) { animation-delay: .22s; }
.lxov-eq span:nth-child(3) { animation-delay: .44s; }
@keyframes lxovEq { 0%, 100% { transform: scaleY(.35); } 50% { transform: scaleY(1); } }

/* ---- dim ---- */
.lxov-dim { position: absolute; inset: 0; background: rgba(24, 16, 44, .45); opacity: 0; transition: opacity .45s ease; z-index: 3; }
.s-dim .lxov-dim { opacity: 1; }

/* ---- launcher pill / minimized island (one component, two moments) ---- */
.lxov-pill {
    position: absolute; right: 18px; bottom: 18px; z-index: 4;
    display: flex; align-items: flex-start; gap: 10px;
    background: #8D75E6; color: #fff; border-radius: 14px; padding: 11px 15px;
    box-shadow: 0 10px 26px -8px rgba(20, 10, 50, .55);
    transform: translateY(74px); opacity: 0;
    transition: transform .55s cubic-bezier(.3, 1.25, .45, 1), opacity .4s ease;
}
.s-pill .lxov-pill, .s-evidence .lxov-pill { transform: translateY(0); opacity: 1; }
.s-dim .lxov-pill, .s-card .lxov-pill { opacity: 0; transform: translateY(74px); }
.s-evidence.s-dim .lxov-pill, .s-evidence.s-card .lxov-pill { opacity: 1; transform: translateY(0); }
.lxov-pill-title { font-size: 12.5px; font-weight: 600; line-height: 1.25; display: block; }
.lxov-pill-sub { font-size: 10.5px; font-weight: 400; opacity: .85; margin-top: 1px; display: block; }

/* ---- quiz card: the REAL lw skin, flat, true components ---- */
.lxov-card {
    position: absolute; left: 50%; top: 50%; z-index: 5;
    width: 396px; margin-left: -198px;
    border-radius: 18px; padding: 16px 20px 14px; color: #fff;
    background: #8D75E6;
    box-shadow: 0 22px 55px -12px rgba(15, 8, 40, .5);
    opacity: 0; transform: translateY(calc(-50% + 22px)) scale(.96);
    transition: opacity .4s ease, transform .45s cubic-bezier(.3, 1.15, .4, 1);
}
.s-card .lxov-card { opacity: 1; transform: translateY(-50%) scale(1); }
.lxov-card-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; }
.lxov-badge {
    font-size: 11.5px; font-weight: 500;
    background: rgba(255, 255, 255, .15); border-radius: 20px; padding: 5px 13px;
}
/* the neutral source chip, centered in its own row (production treatment) */
.lxov-chiprow { display: flex; justify-content: center; margin-bottom: 8px; }
.lxov-chip {
    display: inline-flex; align-items: center; gap: 5px;
    font-size: 9px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase;
    color: rgba(255, 255, 255, .75); border-radius: 6px; padding: 3px 8px;
    border: 1px solid transparent; background: transparent; transition: all .35s ease;
}
.s-answered .lxov-chip { border-color: rgba(255, 255, 255, .35); }

/* karaoke: spoken words lit, unspoken at 32% */
.lxov-q { font-size: 15px; font-weight: 600; line-height: 1.4; margin: 0 0 12px; }
.lxov-q .kw { transition: opacity .3s ease; }
.lxov-q .kw.koff { opacity: .32; }

.lxov-opt {
    display: flex; align-items: center; gap: 9px;
    background: rgba(255, 255, 255, .12); border: 2px solid transparent;
    border-radius: 11px; padding: 8px 12px; margin-bottom: 7px;
    font-size: 12px; font-weight: 500; transition: all .35s ease;
}
.lxov-opt-c {
    width: 20px; height: 20px; border-radius: 50%; flex-shrink: 0;
    background: rgba(255, 255, 255, .2);
    display: flex; align-items: center; justify-content: center;
    font-size: 10px; font-weight: 600; transition: all .35s ease;
}
.lxov-opt.reading { border-color: rgba(255, 255, 255, .45); background: rgba(255, 255, 255, .2); }
.s-listen .lxov-opt { animation: lxovBreathe 2s ease-in-out infinite; }
.s-answered .lxov-opt.right { border-color: rgba(34, 197, 94, .8); background: rgba(34, 197, 94, .5); }
.s-answered .lxov-opt.right .lxov-opt-c { background: rgba(34, 197, 94, .8); }
.s-answered .lxov-opt:not(.right) { opacity: .55; }
@keyframes lxovBreathe { 0%, 100% { border-color: rgba(255, 255, 255, .2); } 50% { border-color: rgba(255, 255, 255, .5); } }

/* the companion status row: one reserved-height row, several states */
.lxov-status {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    padding: 6px 0 2px; min-height: 24px; font-size: 11.5px; color: rgba(255, 255, 255, .6);
}
.lxov-spec5 { display: flex; align-items: flex-end; gap: 2px; height: 14px; }
.lxov-spec5 span { width: 3px; border-radius: 1px; background: rgba(255, 255, 255, .6); animation: lxovSpec .8s ease-in-out infinite alternate; }
.lxov-spec5 span:nth-child(1) { height: 5px; }
.lxov-spec5 span:nth-child(2) { height: 11px; animation-delay: .1s; }
.lxov-spec5 span:nth-child(3) { height: 7px; animation-delay: .2s; }
.lxov-spec5 span:nth-child(4) { height: 12px; animation-delay: .3s; }
.lxov-spec5 span:nth-child(5) { height: 5px; animation-delay: .15s; }
@keyframes lxovSpec { 0% { transform: scaleY(.4); } 100% { transform: scaleY(1.4); } }
.lxov-spin { width: 13px; height: 13px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .25); border-top-color: rgba(255, 255, 255, .8); animation: lxovSpinK 1s linear infinite; flex-shrink: 0; }
@keyframes lxovSpinK { to { transform: rotate(360deg); } }
.lxov-mini-eq { display: inline-flex; align-items: flex-end; gap: 2px; height: 10px; flex-shrink: 0; }
.lxov-mini-eq span { width: 2.5px; height: 10px; border-radius: 2px; background: currentColor; transform-origin: bottom; animation: lxovEq .85s ease-in-out infinite; }
.lxov-mini-eq span:nth-child(2) { animation-delay: .2s; }
.lxov-mini-eq span:nth-child(3) { animation-delay: .4s; }

/* header audio pill (3-bar) — Lexy's output */
.lxov-spill {
    display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px;
    background: rgba(255, 255, 255, .16); border-radius: 999px; flex-shrink: 0;
}
.lxov-spill .bars { display: flex; align-items: flex-end; gap: 2.5px; height: 12px; }
.lxov-spill .bars span { width: 3px; border-radius: 2px; background: #fff; transform-origin: bottom; animation: lxovEq .85s ease-in-out infinite; }
.lxov-spill .bars span:nth-child(2) { animation-delay: .2s; }
.lxov-spill .bars span:nth-child(3) { animation-delay: .4s; }
.lxov-spill.idle .bars span { animation: none; transform: scaleY(.3); opacity: .5; }

/* warm-up beat: the companion intro's wave bars */
.lxov-warm { text-align: center; padding: 24px 0 18px; display: none; }
.s-warm .lxov-warm { display: block; }
.s-warm .lxov-quizface, .s-warm .lxov-scoreface { display: none; }
.lxov-warm .waves { display: flex; gap: 4px; align-items: flex-end; height: 30px; justify-content: center; margin-bottom: 13px; }
.lxov-warm .waves span { width: 5px; border-radius: 3px; background: #fff; transform-origin: bottom; animation: lxovEq 1s ease-in-out infinite; }
.lxov-warm .waves span:nth-child(1) { height: 12px; }
.lxov-warm .waves span:nth-child(2) { height: 20px; animation-delay: .15s; }
.lxov-warm .waves span:nth-child(3) { height: 16px; animation-delay: .3s; }
.lxov-warm .waves span:nth-child(4) { height: 22px; animation-delay: .45s; }
.lxov-warm h3 { font-family: 'Rubik', sans-serif; font-size: 17px; font-weight: 600; margin: 0 0 4px; }
.lxov-warm p { font-size: 11.5px; opacity: .8; margin: 0 0 14px; }
.lxov-warm .prog { height: 5px; border-radius: 3px; background: rgba(255, 255, 255, .18); overflow: hidden; max-width: 220px; margin: 0 auto; }
.lxov-warm .prog i { display: block; height: 100%; width: 20%; border-radius: 3px; background: #fff; transition: width 1.2s ease; }
.s-warm2 .lxov-warm .prog i { width: 72%; }

/* the slideshow's running footer: Score left, accuracy right */
.lxov-footrow {
    display: flex; align-items: center; justify-content: space-between;
    margin-top: 4px; font-size: 10.5px; color: rgba(255, 255, 255, .9);
}
.lxov-footrow b { font-weight: 700; color: #fff; }

/* score face */
.lxov-scoreface { display: none; text-align: center; padding: 4px 0 2px; }
.s-score .lxov-scoreface { display: block; }
.s-score .lxov-quizface { display: none; }
.lxov-score-eyebrow { font-size: 9.5px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; opacity: .75; }
.lxov-score-big { font-family: 'Rubik', sans-serif; font-size: 38px; font-weight: 700; margin: 5px 0 2px; }
.lxov-score-sub { font-size: 11.5px; opacity: .85; margin-bottom: 13px; }
.lxov-score-cards { display: flex; gap: 10px; }
.lxov-score-card { flex: 1; background: rgba(255, 255, 255, .12); border-radius: 12px; padding: 9px 8px; }
.lxov-score-card b { display: block; font-size: 16px; margin-top: 4px; }
.lxov-score-card span {
    display: inline-flex; align-items: center; justify-content: center; gap: 4px;
    font-size: 8.5px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase;
    color: rgba(255, 255, 255, .75);
}
/* score readout: the bare speaking eq only — no container chrome
   (a pill around it reads as an empty progress bar) */
.lxov-readout {
    margin-top: 13px; display: flex; align-items: center; justify-content: center;
}

/* ---- footnote ---- */
.lxov-foot {
    margin-top: 14px; display: flex; align-items: center; justify-content: center; gap: 7px;
    font-size: 12px; color: #8a86a3; width: 720px;
}
.lxov-foot svg { flex-shrink: 0; opacity: .8; }
[data-theme="dark"] .lxov-foot { color: rgba(255, 255, 255, .55); }

@media (prefers-reduced-motion: reduce) {
    .lxov-eq span, .lxov-spec5 span, .lxov-spin, .lxov-mini-eq span,
    .lxov-spill .bars span, .lxov-warm .waves span, .s-listen .lxov-opt { animation: none !important; }
}