/* Hero choreography, scoped so the live voice widget is unaffected. */
.hero-split .hero-badge,
.hero-split .hero-sub,
.hero-split .hero-ctas,
.hero-split .hero-proof { opacity: 1; transform: none; }
.hero-split .h1-ghost { visibility: visible; }
.hero-split.motion-ready .h1-ghost { visibility: hidden; }
.hero-split.motion-ready .hero-badge { animation: hero-arrive .7s var(--ease-out-expo) both; }
.hero-split.motion-ready .hero-sub { animation: hero-arrive .85s .18s var(--ease-out-expo) both; }
.hero-split.motion-ready .hero-ctas { animation: hero-arrive .85s .3s var(--ease-out-expo) both; }
.hero-split.motion-ready .hero-proof { animation: hero-arrive .85s .42s var(--ease-out-expo) both; }
.hero-split.motion-ready .hero-demo { animation: hero-arrive 1s .2s var(--ease-out-expo) both; }
.hero-split .tk { animation: hero-ink .65s var(--ease-out-quint) both; }
.hero-split .btn-primary { position: relative; isolation: isolate; overflow: hidden; }
.hero-split .btn-primary::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(110deg, transparent 25%, rgba(255,255,255,.25) 48%, transparent 70%); transform: translateX(-120%); }
.hero-split.motion-ready .btn-primary::after { animation: hero-gleam 1.4s 2.8s var(--ease-out-quint) both; }
.hero-split .btn-link .material-symbols-outlined { transition: transform .3s var(--ease-out-quint); }
.hero-split .btn-link:hover .material-symbols-outlined { transform: translateY(3px); }
.hero-split :is(button, a):focus-visible { outline: 3px solid var(--teal-300); outline-offset: 4px; }

/* The card light and source chips follow the demo's phase. */
.hero-split .hero-demo { border: 1px solid rgba(94,234,212,.1); transition: border-color .8s, box-shadow .8s; }
.hero-split .hero-demo::before { opacity: .45; transform: translate(-5%, 5%); transition: opacity 1.2s, transform 1.8s var(--ease-out-quint); }
.hero-split .hero-demo[data-phase="speak"] { border-color: rgba(94,234,212,.3); box-shadow: var(--shadow-premium), 0 0 40px -20px rgba(13,148,136,.35); }
.hero-split .hero-demo[data-phase="speak"]::before { opacity: 1; transform: translate(-20%, 20%); }
.hero-split .hd-head .vz-orb { isolation: isolate; }
/* Restore this demo's orb motion even when the shared component's reduced-motion
   rule applies. The hero pause control still freezes it via animation-play-state. */
.hero-split .hd-head .vz-orb { animation-name: vzBreathe !important; animation-duration: 4s !important; animation-timing-function: var(--ease-in-out-cubic) !important; animation-iteration-count: infinite !important; }
.hero-split .hd-head .vz-orb[data-state="listen"] { animation-name: vzListen !important; animation-duration: 1.1s !important; }
.hero-split .hd-head .vz-orb[data-state="speak"] { animation-name: vzSpeak !important; animation-duration: .9s !important; }
.hero-split .hd-head .vz-orb::before { animation: none; }
.hero-split .hd-body { min-height: 216px; }
.hero-split .hd-q { transform-origin: bottom right; animation: hero-question .55s var(--ease-out-quint) both; }
.hero-split .hd-think { display: flex; align-items: center; gap: 8px; min-height: 28px; }
.hero-split .hd-think::before { content: ''; flex: 0 0 auto; width: 5px; height: 5px; border-radius: 50%; background: var(--teal-300); box-shadow: 8px 0 0 rgba(94,234,212,.5), 16px 0 0 rgba(94,234,212,.2); margin-right: 18px; animation: hero-thinking 1s ease-in-out infinite; }
.hero-split .hd-a { animation: hero-answer .65s var(--ease-out-quint) both; }
.hero-answer-word { animation: hero-word .3s var(--word-delay) both; }
.hero-split .hd-a .vz-source-chip { animation: hero-arrive .5s var(--source-delay, .4s) var(--ease-out-quint) both; }
.hero-split .hd-a .vz-grounded { animation: hero-arrive .6s .7s var(--ease-out-quint) both; }
.hero-split .hd-a .vz-grounded i::before { animation: hero-grounded 1.5s .9s ease-out 1; }
.hero-split .hd-try { transition: background .25s, transform .25s var(--ease-out-quint), border-color .25s; }
.hero-split .hd-try:hover { transform: translateY(-2px); border-color: rgba(94,234,212,.4); }
.hero-split .hd-try:active { transform: translateY(0); }

/* A small pause control lets visitors stop the autoplaying hero. */
.hd-motion-toggle { position: absolute; bottom: 24px; right: 24px; display: grid; place-items: center; width: 36px; height: 36px; padding: 0; background: transparent; color: rgba(255,255,255,.55); border: 1px solid rgba(255,255,255,.14); border-radius: 50%; cursor: pointer; transition: color .25s, background .25s; }
.hd-motion-toggle:hover { color: #fff; background: rgba(255,255,255,.08); }
.hd-motion-toggle .material-symbols-outlined { font-size: 18px; }
.hero-split .hd-try { max-width: calc(100% - 48px); white-space: normal; text-align: left; }

@keyframes hero-arrive { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } }
@keyframes hero-ink { from { opacity: .5; } to { opacity: 1; } }
@keyframes hero-gleam { to { transform: translateX(120%); } }
@keyframes hero-question { from { opacity: 0; transform: translateY(10px) scale(.97); } to { opacity: 1; transform: none; } }
@keyframes hero-answer { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes hero-word { from { opacity: .12; } to { opacity: 1; } }
@keyframes hero-thinking { 50% { opacity: .3; } }
@keyframes hero-grounded { 0% { box-shadow: 0 0 0 0 rgba(45,212,191,.4); } 100% { box-shadow: 0 0 0 9px rgba(45,212,191,0); } }

.hero-split[data-motion="paused"] *,
.hero-split[data-motion="paused"] *::before,
.hero-split[data-motion="paused"] *::after { animation-play-state: paused !important; }
/* A paused/static conversation remains fully readable, including new answers. */
.hero-split[data-motion="paused"] :is(.hero-answer-word, .hd-q, .hd-a, .vz-source-chip, .vz-grounded) { animation: none; }
.hero-split[data-motion="paused"] .hero-demo,
.hero-split[data-motion="paused"] .hero-demo::before { transition: none; }
@media (max-width: 480px) {
    .hero-split .hd-body { min-height: 280px; }
    .hero-split .hd-a { max-width: 100%; }
    .hero-split .vz-grounded > span { white-space: normal; }
}