/* =========================================================================
   Hero demo preview — animated "raw notes → Enhanced Note" window mockup.
   Drops into the hero media column (replaces the SAU-1240 placeholder video).
   Self-contained widget: its own palette scoped to .demo-stage so the generic
   class names (.window/.chip/.toggle/.calls/…) never leak into the site. Fonts
   reuse the site tokens. Dark is the default (site default); light overrides
   are variable-only via prefers-color-scheme. Reuses the demo source verbatim
   from "Boswell Hero[ Light].html". Reduced motion → static Enhanced state.
   ========================================================================= */
.demo-stage {
    /* dark (default) palette */
    --surface: #16110b;
    --surface-elev: #1c160e;
    --border: rgba(255, 240, 220, 0.08);
    --border-hi: rgba(255, 240, 220, 0.14);
    --hairline: rgba(255, 240, 220, 0.10);
    --text: #f3e8d4;
    --text-dim: rgba(243, 232, 212, 0.62);
    --text-faint: rgba(243, 232, 212, 0.40);
    --text-ghost: rgba(243, 232, 212, 0.22);
    --accent: #e8b96a;
    --red: #e76f56;
    --green: #7eb88a;
    --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% 20%, rgba(231,111,86,0.30) 0%, transparent 55%),
        radial-gradient(80% 90% at 10% 90%, rgba(184,134,42,0.32) 0%, transparent 60%),
        linear-gradient(160deg, #2b1d14 0%, #14100b 100%);
    --float-c-bg:
        radial-gradient(100% 80% at 30% 15%, rgba(126,184,138,0.26) 0%, transparent 55%),
        linear-gradient(155deg, #1c2018 0%, #12100b 100%);
    --window-shadow: 0 40px 90px rgba(0,0,0,0.6), inset 0 1px 0 rgba(255,255,255,0.05);
    --winbar-bg: rgba(0,0,0,0.25);
    --calls-bg: #0a0805;
    --calls-border: rgba(255,240,220,0.12);
    --calls-shadow: 0 20px 50px rgba(0,0,0,0.55);
    --call-tile-border: rgba(255,240,220,0.08);
    --call-a-bg: radial-gradient(120% 120% at 30% 20%, #3a2c1c 0%, #1a130c 100%);
    --call-b-bg: radial-gradient(120% 120% at 70% 30%, #2a3326 0%, #131811 100%);
    --call-name-color: rgba(255,255,255,0.78);
    --call-ctrl-bg: #45413a;

    position: relative;
    width: 100%;
    max-width: 400px;
    margin: 0 auto;
    aspect-ratio: 4 / 5.4;
    isolation: isolate;
    user-select: none;
}

@media (prefers-color-scheme: light) {
    .demo-stage {
        --surface: #fbf8f1;
        --surface-elev: #ffffff;
        --border: rgba(40, 30, 18, 0.10);
        --border-hi: rgba(40, 30, 18, 0.17);
        --hairline: rgba(40, 30, 18, 0.12);
        --text: #2a2018;
        --text-dim: rgba(42, 32, 24, 0.66);
        --text-faint: rgba(42, 32, 24, 0.42);
        --text-ghost: rgba(42, 32, 24, 0.24);
        --accent: #b8862a;
        --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% 20%, rgba(231,111,86,0.28) 0%, transparent 55%),
            radial-gradient(80% 90% at 10% 90%, rgba(184,134,42,0.34) 0%, transparent 60%),
            linear-gradient(160deg, #f2e7d2 0%, #e2d4ba 100%);
        --float-c-bg:
            radial-gradient(100% 80% at 30% 15%, rgba(126,184,138,0.30) 0%, transparent 55%),
            linear-gradient(155deg, #ebe9d4 0%, #dcdcbe 100%);
        --window-shadow: 0 40px 90px rgba(70,52,24,0.26), inset 0 1px 0 rgba(255,255,255,0.7);
        --winbar-bg: rgba(120,90,40,0.04);
        --calls-bg: #efe9db;
        --calls-border: rgba(40,30,18,0.14);
        --calls-shadow: 0 20px 50px rgba(70,52,24,0.28);
        --call-tile-border: rgba(40,30,18,0.08);
        --call-a-bg: radial-gradient(120% 120% at 30% 20%, #f1e3c8 0%, #e0d0b0 100%);
        --call-b-bg: radial-gradient(120% 120% at 70% 30%, #e3ebd4 0%, #d2dcbb 100%);
        --call-name-color: rgba(40,30,18,0.72);
        --call-ctrl-bg: #8a8270;
    }
}

/* floating poster cards behind the window */
.demo-stage .floats { position: absolute; inset: 0; z-index: 0; }
.demo-stage .float {
    position: absolute;
    border-radius: 5px;
    overflow: hidden;
    box-shadow: 0 24px 60px rgba(0,0,0,0.5);
}
.demo-stage .float::after {
    content: ""; position: absolute; inset: 0;
    background: var(--float-overlay);
    mix-blend-mode: overlay;
}
.demo-stage .float-a { left: 0; top: -8%; width: 100%; height: 96%;
    background: var(--float-a-bg); animation: floatA 13s ease-in-out infinite; }
.demo-stage .float-b { left: -7%; top: 3%; width: 114%; height: 92%;
    background: var(--float-b-bg); animation: floatB 15s ease-in-out infinite; }
.demo-stage .float-c { left: 8%; top: 0; width: 84%; height: 100%;
    background: var(--float-c-bg); animation: floatC 17s ease-in-out infinite; }
@keyframes floatA { 0%,100% { transform: translate(0,0) rotate(-1.5deg); } 50% { transform: translate(-8px,-14px) rotate(-2.6deg); } }
@keyframes floatB { 0%,100% { transform: translate(0,0) rotate(2deg); } 50% { transform: translate(10px,12px) rotate(3.2deg); } }
@keyframes floatC { 0%,100% { transform: translate(0,0) rotate(0.6deg); } 50% { transform: translate(6px,-10px) rotate(-0.6deg); } }

/* the window */
.demo-stage .window {
    position: relative; z-index: 10;
    display: flex; flex-direction: column;
    width: 100%; height: 100%;
    border-radius: 13px; overflow: hidden;
    background: var(--surface);
    border: 1px solid var(--border-hi);
    box-shadow: var(--window-shadow);
}
.demo-stage .win-bar {
    display: flex; align-items: center; gap: 7px;
    height: 38px; flex-shrink: 0; padding-left: 15px;
    background: var(--winbar-bg); border-bottom: 1px solid var(--border);
}
.demo-stage .tl { width: 10px; height: 10px; border-radius: 50%; box-shadow: inset 0 0 0 0.5px rgba(0,0,0,0.25); }
.demo-stage .tl-r { background: #ff5f57; }
.demo-stage .tl-y { background: #febc2e; }
.demo-stage .tl-g { background: #28c840; }

.demo-stage .win-head { padding: 16px 18px 0; flex-shrink: 0; }
.demo-stage .win-title { font-family: var(--font-serif); font-size: 21px; letter-spacing: -0.3px; color: var(--text); }
.demo-stage .win-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 12px; }
.demo-stage .chip {
    display: inline-flex; align-items: center; gap: 6px;
    min-height: 24px; padding: 0 9px; border-radius: 999px;
    border: 1px solid var(--hairline);
    font-size: 10.5px; color: var(--text-dim); font-family: var(--font-mono);
    letter-spacing: 0.2px;
}
.demo-stage .chip svg { width: 13px; height: 13px; color: var(--text-faint); }
.demo-stage .chip-icon { width: 24px; height: 24px; padding: 0; justify-content: center; }
.demo-stage .chip-icon svg { color: var(--text-faint); }

/* notes body — grid pile */
.demo-stage .win-body { position: relative; flex: 1; min-height: 0; margin-top: 16px; }
.demo-stage .note-layer { position: absolute; inset: 0; padding: 0 18px; overflow: hidden; }

/* raw, hand-typed notes */
.demo-stage .notes-raw {
    display: flex; flex-direction: column; gap: 8px;
    font-family: var(--font-mono); font-size: 11px; line-height: 1.6;
    color: var(--text);
    animation: rawVis 16s linear infinite;
}
.demo-stage .notes-raw p { margin: 0; min-height: 1.1em; }
@keyframes rawVis {
    0% { opacity: 1; } 26% { opacity: 1; } 35% { opacity: 0; }
    92% { opacity: 0; } 100% { opacity: 1; }
}
.demo-stage .caret {
    display: inline-block; width: 1.5px; height: 1em; margin-left: 1px;
    vertical-align: -2px; background: var(--accent);
    animation: blink 1s step-end infinite;
}
@keyframes blink { 0%,50% { opacity: 1; } 51%,100% { opacity: 0; } }

/* enhanced, structured notes */
.demo-stage .notes-enh-clip {
    animation: enhClip 16s linear infinite, enhVis 16s linear infinite;
    clip-path: inset(0 0 100% 0);
}
@keyframes enhClip {
    0% { clip-path: inset(0 0 100% 0); }
    30% { clip-path: inset(0 0 100% 0); }
    60% { clip-path: inset(0 0 0% 0); }
    90% { clip-path: inset(0 0 0% 0); }
    96% { clip-path: inset(0 0 100% 0); }
    100% { clip-path: inset(0 0 100% 0); }
}
@keyframes enhVis {
    0% { opacity: 0; } 28% { opacity: 0; } 33% { opacity: 1; }
    90% { opacity: 1; } 95% { opacity: 0; } 100% { opacity: 0; }
}
.demo-stage .notes-enh {
    display: flex; flex-direction: column;
    font-family: var(--font-sans); font-size: 11px; line-height: 1.5;
}
.demo-stage .notes-enh p { margin: 0; min-height: 1.1em; }
.demo-stage .enh-h { font-weight: 600; margin-top: 13px !important; color: var(--text); }
.demo-stage .enh-h:first-child { margin-top: 0 !important; }
.demo-stage .enh-b { padding-left: 12px; color: var(--text-dim); }
.demo-stage .enh-s { padding-left: 26px; color: var(--text-faint); }
/* shimmer sweep across enhanced text as it reveals */
.demo-stage .shimmer {
    background: linear-gradient(100deg, currentColor 0%, currentColor 40%, var(--accent) 50%, currentColor 60%, currentColor 100%);
    background-size: 280% 100%;
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: shimmer 2.6s linear infinite;
}
@keyframes shimmer { 0% { background-position: 180% 0; } 100% { background-position: -80% 0; } }

/* fade under body so notes dissolve at the bottom edge */
.demo-stage .body-fade {
    position: absolute; left: 0; right: 0; bottom: 0; height: 64px; z-index: 6;
    background: linear-gradient(180deg, transparent, var(--surface));
    pointer-events: none;
}

/* bottom controls */
.demo-stage .win-foot {
    position: relative; z-index: 8; flex-shrink: 0;
    height: 58px; display: grid; place-items: center;
}
.demo-stage .foot-pile { position: relative; display: grid; place-items: center; grid-template-areas: "stack"; }
.demo-stage .foot-pile > * { grid-area: stack; }

.demo-stage .transcribing {
    display: flex; align-items: center; gap: 10px;
    height: 38px; padding: 0 16px; border-radius: 999px;
    background: var(--surface-elev); border: 1px solid var(--hairline);
    box-shadow: 0 8px 22px rgba(0,0,0,0.4);
    animation: footTranscribe 16s linear infinite;
}
@keyframes footTranscribe {
    0% { opacity: 1; transform: scale(1); }
    16% { opacity: 1; transform: scale(1); }
    21% { opacity: 0; transform: scale(0.85); }
    92% { opacity: 0; transform: scale(0.85); }
    98% { opacity: 1; transform: scale(1); }
    100% { opacity: 1; transform: scale(1); }
}
.demo-stage .bars { display: flex; align-items: center; gap: 3px; height: 18px; }
.demo-stage .bars i { width: 3px; border-radius: 2px; background: var(--accent); display: block; }
.demo-stage .bars i:nth-child(1) { height: 8px; animation: bar 0.6s ease-in-out 0s infinite alternate; }
.demo-stage .bars i:nth-child(2) { height: 16px; animation: bar 0.5s ease-in-out 0.15s infinite alternate; }
.demo-stage .bars i:nth-child(3) { height: 11px; animation: bar 0.9s ease-in-out 0.3s infinite alternate; }
.demo-stage .bars i:nth-child(4) { height: 14px; animation: bar 0.55s ease-in-out 0.1s infinite alternate; }
@keyframes bar { from { transform: scaleY(0.4); } to { transform: scaleY(1); } }
.demo-stage .transcribing .lbl { font-size: 12.5px; color: var(--text-dim); }

.demo-stage .generate {
    display: flex; align-items: center; gap: 8px;
    height: 38px; padding: 0 18px; border-radius: 999px;
    background: var(--accent); color: #1a1208;
    font-size: 12.5px; font-weight: 600;
    box-shadow: 0 8px 22px rgba(0,0,0,0.45);
    animation: footGenerate 16s linear infinite;
    opacity: 0; transform: translateY(10px) scale(0.9);
}
@keyframes footGenerate {
    0% { opacity: 0; transform: translateY(10px) scale(0.9); }
    18% { opacity: 0; transform: translateY(10px) scale(0.9); }
    23% { opacity: 1; transform: translateY(0) scale(1); }
    29% { opacity: 1; transform: translateY(0) scale(1); }
    34% { opacity: 0; transform: translateY(-8px) scale(0.92); }
    100% { opacity: 0; transform: translateY(-8px) scale(0.92); }
}
.demo-stage .generate svg { width: 14px; height: 14px; }

.demo-stage .toggle {
    position: relative; display: flex; width: 188px;
    padding: 3px; border-radius: 999px;
    background: var(--surface-elev); border: 1px solid var(--hairline);
    box-shadow: 0 8px 22px rgba(0,0,0,0.4);
    animation: footToggle 16s linear infinite;
    opacity: 0;
}
@keyframes footToggle {
    0% { opacity: 0; } 30% { opacity: 0; } 36% { opacity: 1; }
    90% { opacity: 1; } 95% { opacity: 0; } 100% { opacity: 0; }
}
.demo-stage .toggle .knob {
    position: absolute; top: 3px; bottom: 3px; left: 3px; width: calc(50% - 3px);
    border-radius: 999px; background: rgba(232,185,106,0.16);
    border: 1px solid rgba(232,185,106,0.28);
    animation: knob 16s linear infinite;
    transform: translateX(0);
}
@keyframes knob {
    0% { transform: translateX(0); } 36% { transform: translateX(0); }
    44% { transform: translateX(100%); } 90% { transform: translateX(100%); }
    96% { transform: translateX(0); } 100% { transform: translateX(0); }
}
.demo-stage .toggle span {
    position: relative; z-index: 1; flex: 1; text-align: center;
    padding: 6px 0; font-size: 11px; font-weight: 500; color: var(--text-dim);
}

/* side video-call thumbnails */
.demo-stage .calls {
    position: absolute; top: 46%; right: -16%; z-index: 20;
    width: 28%;
    display: flex; flex-direction: column; gap: 3px;
    padding: 3px; border-radius: 9px;
    background: var(--calls-bg); border: 1px solid var(--calls-border);
    box-shadow: var(--calls-shadow);
    animation: callPar 11s ease-in-out infinite;
}
@keyframes callPar { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }
.demo-stage .call-tile {
    position: relative; aspect-ratio: 1/1; border-radius: 5px; overflow: hidden;
    border: 1px solid var(--call-tile-border);
    display: grid; place-items: center;
}
.demo-stage .call-tile.a { background: var(--call-a-bg); }
.demo-stage .call-tile.b { background: var(--call-b-bg); }
.demo-stage .call-avatar {
    width: 38%; aspect-ratio: 1/1; border-radius: 50%;
    display: grid; place-items: center;
    font-family: var(--font-mono); font-size: 13px; font-weight: 600; color: #1a1208;
}
.demo-stage .ca-1 { background: var(--accent); }
.demo-stage .ca-2 { background: var(--green); }
.demo-stage .call-name {
    position: absolute; left: 5px; bottom: 4px;
    font-family: var(--font-mono); font-size: 8px; letter-spacing: 0.3px;
    color: var(--call-name-color);
}
.demo-stage .call-ctrls { display: flex; align-items: center; justify-content: center; gap: 5px; padding: 2px 0 1px; }
.demo-stage .call-ctrls span {
    display: grid; place-items: center; width: 26px; height: 14px; border-radius: 999px;
    color: #fff; background: var(--call-ctrl-bg);
}
.demo-stage .call-ctrls span.hang { background: var(--red); }
.demo-stage .call-ctrls svg { width: 9px; height: 9px; }

@media (prefers-reduced-motion: reduce) {
    .demo-stage .notes-raw,
    .demo-stage .notes-enh-clip,
    .demo-stage .transcribing,
    .demo-stage .generate,
    .demo-stage .toggle,
    .demo-stage .toggle .knob,
    .demo-stage .float-a,
    .demo-stage .float-b,
    .demo-stage .float-c,
    .demo-stage .calls,
    .demo-stage .shimmer,
    .demo-stage .caret,
    .demo-stage .bars i {
        animation: none !important;
    }
    .demo-stage .notes-raw { opacity: 0; }
    .demo-stage .notes-enh-clip { opacity: 1; clip-path: inset(0 0 0 0); }
    .demo-stage .toggle { opacity: 1; }
    .demo-stage .toggle .knob { transform: translateX(100%); }
    .demo-stage .transcribing, .demo-stage .generate { opacity: 0; }
    .demo-stage .shimmer { -webkit-text-fill-color: currentColor; }
}

/* Pull the floating call thumbnails back in once the hero stacks (site hero
   collapses to one column at 900px) so they don't push horizontal overflow. */
@media (max-width: 900px) {
    .demo-stage .calls { right: -6%; }
}