/* =========================================================================
   Meeting Brief preview — CSS-animated mockup for the "Start your meeting
   prepared" (#phase-before) panel. A window + floating cards, then the AI
   "Brief" card rises and writes itself in. Light/dark via prefers-color-scheme.
   Scoped to .brief-stage so its generic class names don't leak; keyframes are
   brief-prefixed to avoid clashing with hero-demo.css (shared floatA/B names).
   Source: "Boswell Brief[ Light].html". Reduced motion → static Brief card.
   ========================================================================= */
.brief-stage {
    /* dark (default) palette */
    --surface: #16110b;
    --surface-elev: #1c160e;
    --brief: #1a140d;
    --brief-hi: #221a10;
    --border-hi: rgba(255, 240, 220, 0.14);
    --hairline: rgba(255, 240, 220, 0.10);
    --text: #f3e8d4;
    --text-dim: rgba(243, 232, 212, 0.66);
    --text-faint: rgba(243, 232, 212, 0.40);
    --text-ghost: rgba(243, 232, 212, 0.22);
    --accent: #e8b96a;
    --accent-deep: #b8862a;
    --float-overlay: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(0,0,0,0.18));
    --float-a-bg: radial-gradient(120% 80% at 20% 10%, #2a2118 0%, transparent 55%), linear-gradient(150deg, #1a1410 0%, #241b12 100%);
    --float-b-bg: radial-gradient(90% 70% at 80% 18%, rgba(231,111,86,0.28) 0%, transparent 55%), radial-gradient(80% 90% at 12% 92%, rgba(184,134,42,0.30) 0%, transparent 60%), linear-gradient(160deg, #2b1d14 0%, #14100b 100%);
    --window-shadow: 0 30px 70px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.05);
    --dot-bg: rgba(255,240,220,0.16);
    --brief-shadow: 0 0 0 6px rgba(232,185,106,0.06), 0 30px 60px -12px rgba(0,0,0,0.45), inset 0 1px 0 rgba(255,255,255,0.05);

    position: relative;
    width: 100%; max-width: 420px;
    margin-top: var(--s8);
    isolation: isolate;
    user-select: none;
    /* The Brief card is in normal flow (below), so the stage height is driven
       by the card — it can never overflow into the next section, no matter how
       the text reflows. The window + floats are the absolute backdrop, sized in
       cqi so they stay proportional. Card text/spacing also scale with width
       (cqi/em) so it shrinks on narrow screens instead of ballooning. */
    container-type: inline-size;
}

@media (prefers-color-scheme: light) {
    .brief-stage {
        --surface: #fbf8f1;
        --surface-elev: #ffffff;
        --brief: #faf7f5;
        --brief-hi: #ffffff;
        --border-hi: rgba(40, 30, 18, 0.16);
        --hairline: rgba(40, 30, 18, 0.12);
        --text: #2a2018;
        --text-dim: rgba(42, 32, 24, 0.68);
        --text-faint: rgba(42, 32, 24, 0.44);
        --text-ghost: rgba(42, 32, 24, 0.32);
        --accent: #b8862a;
        --accent-deep: #8f6718;
        --float-overlay: linear-gradient(180deg, rgba(255,255,255,0.18), rgba(120,90,40,0.10));
        --float-a-bg: radial-gradient(120% 80% at 20% 10%, #f4ecda 0%, transparent 55%), linear-gradient(150deg, #ece3d0 0%, #ddd0b8 100%);
        --float-b-bg: radial-gradient(90% 70% at 80% 18%, rgba(231,111,86,0.26) 0%, transparent 55%), radial-gradient(80% 90% at 12% 92%, rgba(184,134,42,0.32) 0%, transparent 60%), linear-gradient(160deg, #f2e7d2 0%, #e2d4ba 100%);
        --window-shadow: 0 30px 70px rgba(70,52,24,0.22), inset 0 1px 0 rgba(255,255,255,0.7);
        --dot-bg: rgba(40,30,18,0.16);
        --brief-shadow: 0 0 0 6px rgba(71,67,42,0.05), 0 30px 60px -12px rgba(71,67,42,0.22), inset 0 1px 0 rgba(255,255,255,0.7);
    }
}

/* floating poster cards behind */
.brief-stage .floats { position: absolute; left: 0; top: 0; width: 100%; height: 73.6cqi; z-index: 0; }
.brief-stage .float { position: absolute; border-radius: 6px; overflow: hidden; box-shadow: 0 24px 60px rgba(0,0,0,0.5); }
.brief-stage .float::after { content: ""; position: absolute; inset: 0; background: var(--float-overlay); mix-blend-mode: overlay; }
.brief-stage .float-a { left: 1%; top: -6%; width: 98%; height: 104%;
    background: var(--float-a-bg); animation: briefFloatA 14s ease-in-out infinite; }
.brief-stage .float-b { left: -6%; top: 2%; width: 112%; height: 98%;
    background: var(--float-b-bg); animation: briefFloatB 16s ease-in-out infinite; }
@keyframes briefFloatA { 0%,100% { transform: translate(0,0) rotate(-1.4deg); } 50% { transform: translate(-7px,-12px) rotate(-2.4deg); } }
@keyframes briefFloatB { 0%,100% { transform: translate(0,0) rotate(1.8deg); } 50% { transform: translate(9px,11px) rotate(2.9deg); } }

/* window */
.brief-stage .window {
    position: absolute; left: 4%; top: 1.2cqi; width: 92%; height: 71.4cqi; z-index: 10;
    display: flex; flex-direction: column;
    border-radius: 18px; overflow: hidden;
    background: var(--surface); border: 1px solid var(--border-hi);
    box-shadow: var(--window-shadow);
}
.brief-stage .win-bar { display: flex; align-items: center; gap: 7px; height: 40px; flex-shrink: 0; padding-left: 15px; }
.brief-stage .dot { width: 11px; height: 11px; border-radius: 50%; background: var(--dot-bg); }
.brief-stage .win-head { padding: 12px 18px 0; flex-shrink: 0; }
.brief-stage .win-title { font-family: var(--font-serif); font-size: 22px; letter-spacing: -0.4px; color: var(--text); }
.brief-stage .win-chips { display: flex; align-items: center; gap: 8px; margin-top: 12px; }
.brief-stage .chip {
    display: inline-flex; align-items: center; gap: 6px; min-height: 26px; padding: 0 10px;
    border-radius: 999px; border: 1px solid var(--hairline);
    font-size: 11px; color: var(--text-dim); font-family: var(--font-mono);
}
.brief-stage .chip svg { width: 14px; height: 14px; color: var(--text-faint); }
.brief-stage .win-notes { flex: 1; min-height: 0; padding: 14px 18px 0; }
.brief-stage .placeholder { font-family: var(--font-mono); font-size: 12px; color: var(--text-ghost); }
.brief-stage .ask {
    margin: 0 12px 14px; flex-shrink: 0;
    display: flex; align-items: center; gap: 8px; height: 38px;
    padding: 0 5px 0 16px; border-radius: 999px;
    border: 1px solid var(--hairline); background: var(--surface-elev);
}
.brief-stage .ask .lbl { flex: 1; font-family: var(--font-mono); font-size: 12px; color: var(--text-ghost); }
.brief-stage .ask .send { width: 28px; height: 28px; border-radius: 50%; background: var(--accent); display: grid; place-items: center; }
.brief-stage .ask .send svg { width: 13px; height: 13px; color: #1a1208; }

/* brief card */
.brief-stage .brief {
    position: relative; z-index: 20;
    width: 93%; margin: 34.5cqi 3.5% 0;
    border-radius: 26px; padding: 1.63em 1.78em 1.78em;
    background: linear-gradient(147deg, var(--brief-hi) 28%, var(--brief) 78%);
    box-shadow: var(--brief-shadow);
    /* font in container units, spacing in em → whole card scales with width */
    font-size: 3.21cqi; line-height: 1.55; color: var(--text);
    overflow: hidden;
    animation: briefRise 15s ease-in-out infinite;
    opacity: 0; transform: translateY(18px);
}
@keyframes briefRise {
    0% { opacity: 0; transform: translateY(18px); }
    4% { opacity: 0; transform: translateY(18px); }
    13% { opacity: 1; transform: translateY(0); }
    93% { opacity: 1; transform: translateY(0); }
    98% { opacity: 0; transform: translateY(10px); }
    100% { opacity: 0; transform: translateY(18px); }
}
/* clip-reveal wrapper so text "writes" in top→down */
.brief-stage .brief-clip { animation: briefClip 15s linear infinite; clip-path: inset(0 0 100% 0); }
@keyframes briefClip {
    0%,7% { clip-path: inset(0 0 100% 0); }
    26% { clip-path: inset(0 0 0% 0); }
    94% { clip-path: inset(0 0 0% 0); }
    98% { clip-path: inset(0 0 100% 0); }
    100% { clip-path: inset(0 0 100% 0); }
}
/* sweeping AI sheen */
.brief-stage .brief::after {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(105deg, transparent 38%, rgba(232,185,106,0.14) 50%, transparent 62%);
    background-size: 260% 100%;
    animation: briefSheen 15s linear infinite;
}
@keyframes briefSheen {
    0%,7% { background-position: 160% 0; opacity: 0; }
    11% { opacity: 1; }
    26% { background-position: -60% 0; opacity: 1; }
    32% { opacity: 0; }
    100% { background-position: -60% 0; opacity: 0; }
}
.brief-stage .brief-label {
    display: flex; align-items: center; gap: 0.5em;
    font-family: var(--font-mono); font-size: 0.81em; letter-spacing: 1px; text-transform: uppercase;
    color: var(--accent);
}
.brief-stage .brief-label svg { width: 1.1em; height: 1.1em; }
.brief-stage .brief-lead { margin: 1.04em 0 0; color: var(--text-dim); }
.brief-stage .brief-lead .src { display: inline-grid; place-items: center; width: 1.1em; height: 1.1em; border-radius: 4px; background: var(--accent); margin-right: 0.37em; vertical-align: -0.22em; }
.brief-stage .brief-lead .src svg { width: 0.74em; height: 0.74em; color: #1a1208; }
.brief-stage .brief-lead b, .brief-stage .brief-list b { color: var(--text); font-weight: 600; }
.brief-stage .brief-list { list-style: none; margin: 1.19em 0 0; padding: 0; display: flex; flex-direction: column; gap: 0.81em; }
.brief-stage .brief-list li { display: flex; gap: 0.67em; color: var(--text-dim); }
.brief-stage .brief-list .bullet { color: var(--accent-deep); flex-shrink: 0; }

@media (prefers-reduced-motion: reduce) {
    .brief-stage .brief,
    .brief-stage .brief-clip,
    .brief-stage .brief::after,
    .brief-stage .float-a,
    .brief-stage .float-b { animation: none !important; }
    .brief-stage .brief { opacity: 1; transform: none; }
    .brief-stage .brief-clip { clip-path: inset(0 0 0 0); }
    .brief-stage .brief::after { opacity: 0; }
}