/* Homepage motion pieces. Everything animates only once .is-live is set by
   motion.js (element in view), and prefers-reduced-motion shows the end state. */
.home-page { --m-card: #121318; --m-line: #262a35; --m-blue: #8caeff; --m-green: #69d7aa; --m-amber: #f0a15c; --m-spring: cubic-bezier(.34, 1.56, .64, 1); }

/* 1. Hero alert: incident springs in, thread draws, resolution follows (spring stack). */
.motion-alert .alert-message, .motion-alert .alert-thread { opacity: 0; }
.motion-alert.is-live .alert-message-incident { animation: m-alert-incident 12s var(--m-spring) infinite; }
.motion-alert.is-live .alert-thread { animation: m-alert-thread 12s ease-out infinite; }
.motion-alert.is-live .alert-thread > span { transform-origin: top; animation: m-alert-thread-line 12s ease-out infinite; }
.motion-alert.is-live .alert-message-resolved { animation: m-alert-resolved 12s var(--m-spring) infinite; }
.motion-alert.is-live .alert-message-incident .alert-state > span { display: inline-grid; place-items: center; width: 1rem; height: 1rem; border-radius: 50%; animation: m-pulse-amber 1.6s ease-out infinite; }
@keyframes m-alert-incident {
    0%, 5% { opacity: 0; transform: translateY(18px) scale(.97); }
    11% { opacity: 1; transform: translateY(-3px) scale(1.01); }
    14%, 90% { opacity: 1; transform: none; }
    96%, 100% { opacity: 0; transform: translateY(-6px); }
}
@keyframes m-alert-thread { 0%, 30% { opacity: 0; } 34%, 90% { opacity: 1; } 96%, 100% { opacity: 0; } }
@keyframes m-alert-thread-line { 0%, 30% { transform: scaleY(0); } 36%, 100% { transform: scaleY(1); } }
@keyframes m-alert-resolved {
    0%, 42% { opacity: 0; transform: translateY(18px) scale(.97); }
    48% { opacity: 1; transform: translateY(-3px) scale(1.01); }
    51%, 90% { opacity: 1; transform: none; }
    96%, 100% { opacity: 0; transform: translateY(-6px); }
}
@keyframes m-pulse-amber { 0% { box-shadow: 0 0 0 0 #cf773266; } 100% { box-shadow: 0 0 0 8px #cf773200; } }

/* 2. Platform strip: a check sweeps across each platform (glass focus). */
.motion-scan > span { position: relative; padding: .35rem .6rem .35rem 1.35rem; border-radius: .5rem; }
.motion-scan > span::before { content: ""; position: absolute; left: .5rem; top: 50%; width: .4rem; height: .4rem; margin-top: -.2rem; border-radius: 50%; background: #3a404d; }
.motion-scan.is-live > span { animation: m-scan-chip 6s ease-in-out infinite; animation-delay: calc(var(--i) * .45s); }
.motion-scan.is-live > span::before { animation: m-scan-dot 6s ease-in-out infinite; animation-delay: calc(var(--i) * .45s); }
@keyframes m-scan-chip { 0%, 100% { background: transparent; } 4% { background: #8caeff1f; box-shadow: inset 0 0 0 1px #8caeff40; } 10% { background: transparent; box-shadow: none; } }
@keyframes m-scan-dot { 0% { background: #3a404d; } 4% { background: var(--m-blue); transform: scale(1.5); } 10%, 85% { background: var(--m-green); transform: none; } 100% { background: #3a404d; } }
.motion-scan-meta { display: inline-flex; align-items: center; gap: .45rem; font-size: .75rem; color: var(--home-muted); }
.motion-scan-meta::before { content: ""; width: .45rem; height: .45rem; border-radius: 50%; background: var(--m-green); animation: m-pulse-green 2s ease-out infinite; }
@keyframes m-pulse-green { 0% { box-shadow: 0 0 0 0 #69d7aa70; } 100% { box-shadow: 0 0 0 7px #69d7aa00; } }

/* 3. Agent flow: signals travel from status sources to the agent to your tools (flowing paths). */
.motion-flow { display: block; width: 100%; max-width: 64rem; margin: 0 auto 3rem; padding: .5rem; border: 1px solid var(--m-line); border-radius: 1.25rem; background: #0e0f13; }
.motion-flow svg { display: block; width: 100%; height: auto; }
.motion-flow text { font-family: Inter, -apple-system, "Segoe UI", Arial, sans-serif; }
.mf-track { stroke: #242833; stroke-width: 1.5; fill: none; }
.mf-pulse { fill: none; stroke-width: 2.5; stroke-linecap: round; stroke-dasharray: 7 93; stroke-dashoffset: 100; opacity: 0; }
.mf-pulse-in { stroke: var(--m-blue); }
.mf-pulse-alert { stroke: var(--m-amber); }
.mf-pulse-ok { stroke: var(--m-green); }
.motion-flow.is-live .mf-pulse { animation: m-flow var(--d, 3s) linear infinite; animation-delay: var(--delay, 0s); }
@keyframes m-flow { 0% { stroke-dashoffset: 100; opacity: 0; } 8% { opacity: 1; } 92% { opacity: 1; } 100% { stroke-dashoffset: 0; opacity: 0; } }
/* One-shot events inside the shared 9s story loop: travel in ~1.8s, then stay dark. */
.motion-flow.is-live .mf-burst { stroke-width: 3.5; stroke-dasharray: 12 88; animation: m-flow-burst 9s linear infinite; animation-delay: var(--delay, 0s); }
@keyframes m-flow-burst { 0% { stroke-dashoffset: 100; opacity: 0; } 2% { opacity: 1; } 19% { opacity: 1; } 20%, 100% { stroke-dashoffset: 0; opacity: 0; } }
.mf-node rect { fill: #15171d; stroke: #2c3140; }
.mf-node text { fill: #e6e9f2; font-size: 15px; font-weight: 600; }
.mf-node .mf-dot { fill: #3a404d; }
.motion-flow.is-live .mf-node .mf-dot { animation: m-scan-dot 3s ease-in-out infinite; animation-delay: var(--delay, 0s); }
.motion-flow.is-live .mf-node-meta rect { animation: m-meta-flag 9s ease-in-out infinite; }
@keyframes m-meta-flag { 0%, 30%, 70%, 100% { stroke: #2c3140; } 36%, 62% { stroke: var(--m-amber); } }
.mf-agent-ring { fill: none; stroke: var(--m-blue); stroke-width: 1.5; stroke-dasharray: 6 10; transform-box: fill-box; transform-origin: center; opacity: .7; }
.motion-flow.is-live .mf-agent-ring { animation: m-spin 14s linear infinite; }
.mf-agent-core { fill: #1a2240; stroke: #4269df; stroke-width: 1.5; }
.motion-flow.is-live .mf-agent-core { animation: m-agent-breathe 3s ease-in-out infinite; }
@keyframes m-spin { to { transform: rotate(360deg); } }
@keyframes m-agent-breathe { 0%, 100% { stroke-opacity: .6; } 50% { stroke-opacity: 1; } }
.mf-label { fill: #7d8496; font-size: 12px; font-weight: 700; letter-spacing: 2px; }
.mf-agent-title { fill: #f1f3fa; font-size: 18px; font-weight: 700; }
.mf-agent-sub { fill: #8f97aa; font-size: 13px; }

/* 4. Ask demo: a question is typed, sent, and the placeholder morphs into the answer (search -> results). */
.ask-demo { max-width: 44rem; margin: 0 auto 3rem; border: 1px solid #344057; border-radius: 1rem; overflow: hidden; background: #fafbfe; color: #202633; box-shadow: 0 24px 70px #0005; }
.ask-demo-header { display: flex; justify-content: space-between; align-items: center; padding: .9rem 1.25rem; background: #202438; color: #f1f3fa; font-size: .875rem; font-weight: 600; }
.ask-demo-header span:first-child { display: flex; gap: .6rem; align-items: center; }
.ask-demo-thread { display: flex; flex-direction: column; gap: 1rem; min-height: 15.5rem; padding: 1.25rem 1.25rem .5rem; }
.ask-msg { display: flex; gap: .7rem; align-items: flex-start; animation: m-msg-in .45s var(--m-spring) both; }
.ask-msg[hidden] { display: none; }
.ask-avatar { flex: 0 0 auto; display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: .4rem; font-size: .75rem; font-weight: 700; color: #fff; background: #7a5bd6; }
.ask-msg-bot .ask-avatar { background: #4269df; font-size: 1rem; }
.ask-msg strong { display: block; font-size: .8125rem; margin-bottom: .15rem; }
.ask-msg strong span { background: #e7eaf0; color: #525d72; border-radius: .2rem; padding: .1rem .3rem; font-size: .5625rem; font-weight: 500; margin-left: .25rem; }
.ask-msg p { font-size: .875rem; line-height: 1.6; color: #333a48; }
.ask-mention { color: #1d5bd6; background: #e3ecff; border-radius: .2rem; padding: 0 .15rem; }
.ask-checking { display: inline-flex; gap: .3rem; align-items: center; color: #6b7384; font-style: italic; }
.ask-checking i { width: .35rem; height: .35rem; border-radius: 50%; background: #9aa3b5; animation: m-dots 1.2s ease-in-out infinite; }
.ask-checking i:nth-child(2) { animation-delay: .15s; }
.ask-checking i:nth-child(3) { animation-delay: .3s; }
@keyframes m-dots { 0%, 80%, 100% { opacity: .3; transform: none; } 40% { opacity: 1; transform: translateY(-3px); } }
.ask-answer { font-size: .8125rem; line-height: 1.6; color: #333a48; margin-top: .35rem; padding: .75rem .9rem; border-left: 3px solid #cf7732; border-radius: 0 .5rem .5rem 0; background: #fff4e8; animation: m-msg-in .5s var(--m-spring) both; }
.ask-answer.is-quiet { border-color: #8a93a6; background: #f0f2f7; }
.ask-answer b { display: block; font-size: .875rem; margin-bottom: .2rem; }
.ask-answer small { display: block; margin-top: .4rem; font-size: .6875rem; color: #6a6f7b; }
.ask-composer { display: flex; align-items: center; gap: .75rem; margin: .75rem 1.25rem 1.25rem; padding: .7rem .9rem; border: 1px solid #d5dae4; border-radius: .6rem; background: #fff; font-size: .875rem; color: #333a48; min-height: 2.9rem; }
.ask-composer-text { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ask-composer-text:empty::before { content: "Message #marketing-ops"; color: #9aa1b0; }
.ask-caret { display: inline-block; width: 1px; height: 1.05em; margin-left: 1px; vertical-align: text-bottom; background: #333a48; animation: m-caret 1s steps(1) infinite; }
.ask-composer i { color: #9aa1b0; }
@keyframes m-caret { 50% { opacity: 0; } }
@keyframes m-msg-in { from { opacity: 0; transform: translateY(10px) scale(.98); } to { opacity: 1; transform: none; } }

/* 5. Proof: incidents logged in the first half of September grow in (chart morph). */
.home-proof { display: grid; grid-template-columns: 1fr 1.3fr; gap: 4rem; align-items: center; padding-block: 4rem; border-top: 1px solid #252830; }
.home-proof h2 { font-size: 2rem; font-weight: 700; letter-spacing: -.03em; line-height: 1.25; margin: 1rem 0; }
.home-proof-copy p { color: var(--home-muted); font-size: .9375rem; line-height: 1.75; margin-bottom: 1rem; }
.proof-chart { padding: 1.5rem; border: 1px solid var(--m-line); border-radius: 1rem; background: var(--m-card); }
.proof-chart-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 1.25rem; font-size: .8125rem; color: var(--home-muted); }
.proof-chart-head strong { color: #f1f3fa; font-size: .9375rem; }
.proof-row { display: grid; grid-template-columns: 6.5rem 1fr 2rem; align-items: center; gap: .9rem; padding: .45rem 0; font-size: .8125rem; color: #d4d8e2; }
.proof-track { height: .7rem; border-radius: 99px; background: #1d2029; overflow: hidden; }
.proof-bar { display: block; height: 100%; width: 0; border-radius: inherit; background: linear-gradient(90deg, #4269df, var(--m-blue)); transition: width 1.1s var(--m-spring); transition-delay: calc(var(--i) * .12s); }
.proof-chart.is-live .proof-bar { width: calc(var(--v) / 4 * 100%); }
.proof-row-zero .proof-track { background: repeating-linear-gradient(90deg, #2a2e39 0 6px, transparent 6px 11px); }
.proof-num { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; color: #f1f3fa; }
.proof-note { margin-top: 1rem; font-size: .75rem; color: #7d8496; line-height: 1.6; }

@media (max-width: 47.99rem) {
    .motion-flow { display: none; }
    .home-proof { grid-template-columns: 1fr; gap: 2rem; padding-block: 2.75rem; }
    .ask-demo-thread { min-height: 18rem; padding: 1rem 1rem .5rem; }
    .ask-composer { margin: .75rem 1rem 1rem; }
    .proof-row { grid-template-columns: 5.5rem 1fr 1.5rem; }
}

@media (prefers-reduced-motion: reduce) {
    .home-page *, .home-page *::before, .home-page *::after { animation: none !important; transition: none !important; }
    .motion-alert .alert-message, .motion-alert .alert-thread { opacity: 1; }
    .mf-pulse { opacity: 0; }
    .proof-chart .proof-bar { width: calc(var(--v) / 4 * 100%); }
}