/* ============================================================================
   Composer Agent hero — static export.
   Prefix: ca-hero- (classes, data attributes, keyframes, CSS custom properties).

   Notes that matter for maintenance:
   - The whole story is a CSS timeline. Every staged element carries
     data-ca-hero-cue="<seconds>" (and optionally data-ca-hero-cue-out) and the
     script writes nothing but animation-delay. A seek is one pass of delay
     writes, not a per-frame rewrite.
   - The scroll morph is a single uniform transform on .ca-hero-stage. The stage
     is laid out once at its full-bleed size; the rest card is that same frame
     scaled down. No width/height/top/left is ever animated.
   - Reset rules below use :where(*) so their specificity is 0 and every
     component class wins over them; no bare element selector can reach an
     element that carries a ca-hero- class.
   ========================================================================== */

.ca-hero,
.ca-hero :where(*) { box-sizing: border-box; }
.ca-hero :where(p, h1, figure) { margin: 0; }
.ca-hero :where(button) { font: inherit; }

.ca-hero {
  --ca-hero-e: cubic-bezier(.2,.7,.2,1);
  position: relative;
  width: 100%;
  font-family: 'DM Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  color: #24242A;
  -webkit-font-smoothing: antialiased;
}

/* ---------------------------------------------------------------- intro --- */

.ca-hero-intro {
  max-width: 1760px;
  margin: 0 auto;
  padding: 120px clamp(28px, 5.6vw, 96px) 0;
}
.ca-hero-intro-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 447px);
  gap: 64px;
  align-items: start;
}
.ca-hero-intro-main { display: flex; flex-direction: column; gap: 26px; }
.ca-hero-eyebrow {
  font-family: 'DM Mono', ui-monospace, Menlo, monospace;
  font-size: 14px; font-weight: 400; letter-spacing: 0.09em;
  text-transform: uppercase; color: #5A616C;
}
.ca-hero-title {
  max-width: 700px; font-size: 46px; font-weight: 500; line-height: 1.15;
  letter-spacing: -0.03em; color: #24242A; text-wrap: balance;
}
.ca-hero-cta {
  display: flex; align-items: center; gap: 6px; width: fit-content;
  height: 40px; padding: 8px 12px; border-radius: 8px;
  white-space: nowrap; text-decoration: none;
  font-size: 14px; font-weight: 600;
  color: #FFFFFF;            /* 7.0:1 on #205AE3 — resting state, not hover */
  background: #205AE3;
  transition: background 240ms var(--ca-hero-e);
}
.ca-hero-cta:hover, .ca-hero-cta:focus-visible { background: #0D43C2; color: #FFFFFF; }
.ca-hero-intro-side { padding-top: 76px; justify-self: end; width: 100%; }
.ca-hero-lede { font-size: 16px; line-height: 1.5; color: #24242A; text-wrap: pretty; }

@media (max-width: 1200px) {
  .ca-hero-intro-grid { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .ca-hero-intro-side { padding-top: 0; max-width: 560px; justify-self: start; }
}
@media (max-width: 900px) {
  .ca-hero-intro { padding: 84px 22px 0; }
  .ca-hero-title { font-size: 38px; }
  .ca-hero-track { margin-top: 56px; }
}

/* ------------------------------------------------- stage / scroll morph --- */

.ca-hero-track { position: relative; margin-top: 120px; margin-bottom: 80px; }
.ca-hero-sticky { position: sticky; top: 0; height: 80vh; overflow: hidden; }
.ca-hero-stage {
  position: absolute; left: 0; top: 0;
  display: flex; gap: 24px; overflow: hidden;
  border-radius: 20px;
}
.ca-hero-faces { display: flex; flex-direction: column; gap: 24px; flex: none; }
.ca-hero-face {
  position: relative; flex: 1; min-height: 0; overflow: hidden;
  border-radius: 20px; background: #D5DCE3;
}
.ca-hero-video {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; display: block;
}
.ca-hero-video-niki { object-position: 45% 100%; }
.ca-hero-video-grace { object-position: 10% 85%; }
.ca-hero-face-name {
  position: absolute; left: 16px; right: 16px; bottom: 14px;
  display: flex; align-items: center; gap: 7px; min-width: 0;
  font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
  color: #FFFFFF; text-shadow: 0 1px 4px rgba(0,0,0,0.55);
}
.ca-hero-dot { flex: none; width: 10px; height: 10px; border-radius: 999px; }
.ca-hero-dot-agent { background: linear-gradient(140deg,#6E95F0,#AE95DD); }
.ca-hero-dot-cust  { background: linear-gradient(140deg,#FCB56C,#F87563); }
.ca-hero-typing-pill {
  position: absolute; right: 14px; bottom: 12px; z-index: 3;
  display: flex; align-items: center; gap: 8px;
  padding: 7px 12px; border-radius: 999px;
  background: rgba(20,20,26,0.62);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(255,255,255,0.16);
  color: #FFFFFF; font-size: 12px; font-weight: 600;
}
.ca-hero-call-pill {
  position: absolute; left: 14px; top: 14px;
  display: flex; align-items: center; gap: 10px;
  padding: 7px 16px 7px 7px; border-radius: 999px;
  background: rgba(20,20,26,0.52);
  backdrop-filter: blur(14px) saturate(160%); -webkit-backdrop-filter: blur(14px) saturate(160%);
  border: 1px solid rgba(255,255,255,0.14);
}
.ca-hero-call-av {
  position: relative; flex: none; width: 34px; height: 34px; border-radius: 999px;
  background: #F2F1EE; display: flex; align-items: center; justify-content: center;
  font-size: 14px; font-weight: 600; color: #3C3C47;
}
.ca-hero-call-txt { display: flex; flex-direction: column; gap: 1px; }
.ca-hero-call-name { font-size: 14px; font-weight: 600; letter-spacing: -0.01em; color: #FFFFFF; white-space: nowrap; }
.ca-hero-call-sub { font-size: 12px; font-weight: 500; color: rgba(255,255,255,0.78); }
.ca-hero-live-dot {
  position: absolute; right: 1px; bottom: 0; width: 8px; height: 8px; border-radius: 999px;
  background: #4ADE80; box-shadow: 0 0 0 1.5px rgba(20,20,26,0.55);
}
.ca-hero-ping {
  position: absolute; inset: 0; border-radius: 999px; background: #4ADE80;
  animation: ca-hero-ping 1800ms var(--ca-hero-e) infinite;
}

/* -------------------------------------------------------------- panel ---- */

.ca-hero-panel {
  position: relative; flex: 1; min-width: 0; overflow: hidden;
  border-radius: 20px; background: #0E0E13;
}
.ca-hero-bg {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
  transition: opacity 460ms var(--ca-hero-e);
}
.ca-hero-bg-off { opacity: 0; }

/* Theme tokens. Only the panel is themed; the page around it is always light. */
.ca-hero-panel[data-ca-hero-theme="dark"] {
  --ca-hero-fill: rgba(26,28,38,0.30);
  --ca-hero-border: rgba(255,255,255,0.17);
  --ca-hero-inset: rgba(255,255,255,0.11);
  --ca-hero-shadow: 0 22px 48px rgba(6,6,12,0.26);
  --ca-hero-text: #EDEFF4;
  --ca-hero-strong: #FFFFFF;
  --ca-hero-label: #C2C9D6;
  --ca-hero-tile: rgba(255,255,255,0.10);
  --ca-hero-tile-border: rgba(255,255,255,0.12);
  --ca-hero-input: rgba(255,255,255,0.06);
  --ca-hero-hl: rgba(147,222,253,0.16);
  --ca-hero-hl-border: rgba(147,222,253,0.55);
  --ca-hero-glow: rgba(147,222,253,0.52);
  --ca-hero-mark: none;
  /* Message-bar placeholder ("ghost") text. Full opacity, not a faded label:
     the composite of #C2C9D6 at 0.7 only reached 5.3:1 dark / 3.0:1 light. */
  --ca-hero-ghost: #9297A3;          /* 5.3:1 on the dark message bar */
  --ca-hero-tl-chip: rgba(30,32,42,0.42);
  --ca-hero-tl-border: rgba(255,255,255,0.30);
  --ca-hero-tl-track: rgba(255,255,255,0.18);
  --ca-hero-tl-label: rgba(255,255,255,0.62);
  --ca-hero-tl-strong: #FFFFFF;
}
.ca-hero-panel[data-ca-hero-theme="light"] {
  --ca-hero-fill: rgba(255,255,255,0.90);
  --ca-hero-border: rgba(255,255,255,0.92);
  --ca-hero-inset: rgba(255,255,255,0.95);
  --ca-hero-shadow: 0 22px 48px rgba(10,26,72,0.24);
  --ca-hero-text: #1E1F27;
  --ca-hero-strong: #0E0E13;
  --ca-hero-label: #5A616C;
  --ca-hero-tile: rgba(36,36,42,0.04);
  --ca-hero-tile-border: rgba(36,36,42,0.10);
  --ca-hero-input: rgba(36,36,42,0.03);
  --ca-hero-hl: rgba(32,90,227,0.09);
  --ca-hero-hl-border: rgba(32,90,227,0.45);
  --ca-hero-glow: rgba(32,89,227,0.72);
  --ca-hero-mark: invert(1) brightness(0.18);
  --ca-hero-ghost: #4A515C;          /* 5.2:1 on the light message bar */
  --ca-hero-tl-chip: rgba(255,255,255,0.72);
  --ca-hero-tl-border: rgba(36,36,42,0.32);
  --ca-hero-tl-track: rgba(36,36,42,0.16);
  --ca-hero-tl-label: rgba(36,36,42,0.62);
  --ca-hero-tl-strong: #20212B;
}

.ca-hero-glass {
  background: var(--ca-hero-fill);
  border: 1px solid var(--ca-hero-border);
  backdrop-filter: blur(30px) saturate(165%);
  -webkit-backdrop-filter: blur(30px) saturate(165%);
  box-shadow: inset 0 1px 0 var(--ca-hero-inset), var(--ca-hero-shadow);
}
/* The glass is NOT suspended or thinned while scrolling. Doing so dropped the
   cards and pills to their translucent fill with nothing sampled behind it, so
   they read as having lost their background mid-scroll and snapped back once
   the scroll settled. Same rule as the KA hero. */

.ca-hero-chrome { background: #1C1E2B; }

.ca-hero-chrome {
  position: absolute; top: 0; left: 0; right: 0; height: 38px; z-index: 6; opacity: 0;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 26px 0 20px;
  background: rgba(12,14,22,0.52);
  backdrop-filter: blur(20px) saturate(150%); -webkit-backdrop-filter: blur(20px) saturate(150%);
  border-bottom: 1px solid rgba(255,255,255,0.09);
  color: rgba(255,255,255,0.94); font-size: 14px; font-weight: 500; letter-spacing: -0.005em;
}
.ca-hero-chrome-left { display: flex; align-items: center; gap: 9px; }
.ca-hero-chrome-right { display: flex; align-items: center; gap: 15px; color: rgba(255,255,255,0.8); }
.ca-hero-chrome-mark { width: 15px; height: 15px; object-fit: contain; display: block; }
.ca-hero-clock { font-variant-numeric: tabular-nums; }

/* The authored cluster: 560x540 design, fluid down to 330 (see fitLayout). */
.ca-hero-fit {
  position: absolute; left: 0; top: 0; width: 560px; height: 540px;
  transform-origin: 0 0;
}
.ca-hero-scene { position: absolute; inset: 0; }
.ca-hero-scene-b { display: flex; flex-direction: column; gap: 10px; }
.ca-hero-scene-c { display: flex; align-items: center; justify-content: center; padding: 0 12px; }

/* ------------------------------------------------------- scene A: chat --- */

.ca-hero-win {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  overflow: hidden; border-radius: 16px;
}
.ca-hero-win-bar {
  display: flex; align-items: center; gap: 12px; flex: none;
  padding: 12px 14px; border-bottom: 1px solid var(--ca-hero-tile-border);
  cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none;
}
.ca-hero-win-bar[data-ca-hero-grabbing="1"] { cursor: grabbing; }
.ca-hero-lights { display: flex; gap: 6px; flex: none; }
.ca-hero-light { width: 10px; height: 10px; border-radius: 999px; display: block; }
.ca-hero-url {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  flex: 1; min-width: 0; height: 26px; padding: 0 12px; border-radius: 999px;
  background: var(--ca-hero-tile); border: 1px solid var(--ca-hero-tile-border);
  color: var(--ca-hero-label); font-size: 12px; font-weight: 500;
  white-space: nowrap; overflow: hidden;
}
.ca-hero-chat-head {
  display: flex; align-items: center; gap: 11px; flex: none;
  padding: 12px 16px; border-bottom: 1px solid var(--ca-hero-tile-border);
}
.ca-hero-av {
  display: flex; flex: none; align-items: center; justify-content: center;
  width: 32px; height: 32px; border-radius: 999px;
  background: linear-gradient(140deg,#FCB56C,#F87563);
  border: 1px solid rgba(255,255,255,0.18);
  color: #FFFFFF; font-size: 13px; font-weight: 600;
}
.ca-hero-who { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.ca-hero-who-name { font-size: 14px; font-weight: 600; letter-spacing: -0.005em; color: var(--ca-hero-strong); }
.ca-hero-who-pre { font-weight: 500; color: var(--ca-hero-label); }
.ca-hero-who-sub { font-size: 12px; color: var(--ca-hero-label); }
.ca-hero-chip {
  display: flex; align-items: center; gap: 7px; flex: none;
  padding: 4px 10px; border-radius: 999px;
  background: var(--ca-hero-tile); border: 1px solid var(--ca-hero-tile-border);
  font-size: 11.5px; font-weight: 600; color: var(--ca-hero-text);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.ca-hero-chip-dot { position: relative; flex: none; width: 8px; height: 8px; border-radius: 999px; background: #4ADE80; }
.ca-hero-msgs {
  display: flex; flex-direction: column; justify-content: flex-end; gap: 12px;
  flex: 1; min-height: 0; padding: 16px; overflow: hidden;
}
.ca-hero-msg { display: flex; flex-direction: column; gap: 4px; max-width: 80%; }
.ca-hero-msg-a { align-items: flex-end; align-self: flex-end; }
.ca-hero-bubble {
  padding: 10px 13px; border-radius: 14px 14px 14px 4px;
  background: var(--ca-hero-tile); border: 1px solid var(--ca-hero-tile-border);
  font-size: 14px; line-height: 1.5; letter-spacing: -0.005em;
  color: var(--ca-hero-text); text-wrap: pretty;
}
.ca-hero-bubble-a {
  border-radius: 14px 14px 4px 14px; background: #6B4BD6; border-color: #6B4BD6;
  color: #FFFFFF;                     /* 6.4:1 on #6B4BD6 */
}
.ca-hero-msg-by { font-size: 11.5px; font-weight: 500; color: var(--ca-hero-label); padding: 0 4px; }
.ca-hero-dots {
  display: flex; gap: 4px; width: fit-content; padding: 12px 13px;
  border-radius: 14px 14px 14px 4px;
  background: var(--ca-hero-tile); border: 1px solid var(--ca-hero-tile-border);
}
.ca-hero-dots > span {
  width: 6px; height: 6px; border-radius: 999px; background: var(--ca-hero-label);
  animation: ca-hero-dot 1000ms ease-in-out infinite;
}
.ca-hero-dots > span:nth-child(2) { animation-delay: 150ms; }
.ca-hero-dots > span:nth-child(3) { animation-delay: 300ms; }

.ca-hero-composer {
  flex: none; margin: 0 12px 12px; padding: 12px; border-radius: 14px;
  display: flex; flex-direction: column; gap: 10px;
  /* the Composer Agent panel's purple tint, as a CSS layer over the wallpaper */
  background: linear-gradient(160deg, rgba(124,96,230,0.22), rgba(147,222,253,0.06) 70%), var(--ca-hero-tile);
  border: 1px solid rgba(174,149,221,0.42);
  box-shadow: inset 0 1px 0 var(--ca-hero-inset);
}
.ca-hero-composer-head {
  display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 22px;
}
.ca-hero-brand { display: flex; align-items: center; gap: 8px; }
.ca-hero-mark { width: 14px; height: 14px; object-fit: contain; display: block; filter: var(--ca-hero-mark); }
.ca-hero-brand-name { font-size: 13px; font-weight: 500; color: var(--ca-hero-text); }
.ca-hero-badge {
  display: flex; align-items: center; gap: 6px; flex: none;
  padding: 4px 9px; border-radius: 999px;
  background: linear-gradient(100deg,#4A6FA8,#7B6FA8 45%,#8A6A63);
  color: #FFFFFF; font-size: 11.5px; font-weight: 600; white-space: nowrap;
}
.ca-hero-bar {
  position: relative; display: flex; align-items: center; gap: 10px;
  min-height: 48px; padding: 9px 9px 9px 13px; border-radius: 12px;
  background: var(--ca-hero-input); border: 1px solid var(--ca-hero-tile-border);
}
.ca-hero-bar-text {
  flex: 1; min-width: 0; font-size: 14px; line-height: 1.5; letter-spacing: -0.005em;
  color: var(--ca-hero-strong);
}
.ca-hero-ghost { color: var(--ca-hero-ghost); }
/* Typed text is laid over the bar's own line box, so no word ever reflows it. */
.ca-hero-typed { position: absolute; left: 13px; right: 56px; top: 50%; transform: translateY(-50%); }
.ca-hero-w { display: inline-block; animation: ca-hero-word 260ms var(--ca-hero-e) both;
  animation-delay: calc(var(--ca-hero-line, 9000s) + var(--ca-hero-i, 0) * 170ms); }
.ca-hero-caret {
  display: inline-block; width: 1.5px; height: 16px; margin: 0 1px -3px;
  background: var(--ca-hero-strong); animation: ca-hero-caret 1000ms steps(1) infinite;
}
.ca-hero-send {
  position: relative; display: flex; flex: none; align-items: center; justify-content: center;
  width: 32px; height: 32px; border-radius: 999px;
  background: var(--ca-hero-tile);
  color: var(--ca-hero-label);      /* readable at rest in both themes */
}
/* The "send turns purple" beat is an opacity layer carrying its own white
   icon, not a colour tween on the button. */
.ca-hero-send-on {
  position: absolute; inset: 0; border-radius: 999px; background: #6B4BD6;
  display: flex; align-items: center; justify-content: center;
}

.ca-hero-reply-slot { position: relative; }
.ca-hero-reply {
  position: relative; display: flex; align-items: center; gap: 9px;
  padding: 10px 12px; border-radius: 10px;
  background: var(--ca-hero-tile); border: 1px solid var(--ca-hero-tile-border);
  transform-origin: 50% 0;
}
.ca-hero-reply::before {
  content: ''; position: absolute; inset: 0; border-radius: 10px; padding: 1px;
  background: linear-gradient(135deg,#93DEFD,#AE95DD 45%,#FCB56C);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none;
}
.ca-hero-spark { display: flex; flex: none; position: relative; color: #AE95DD; }
.ca-hero-reply-text { position: relative; font-size: 13.5px; line-height: 1.45; color: var(--ca-hero-text); }
.ca-hero-reply-glow {
  position: absolute; inset: -1px; border-radius: 10px;
  background: var(--ca-hero-hl); pointer-events: none;
}
.ca-hero-cursor {
  position: absolute; right: 22%; top: 46%; z-index: 2; pointer-events: none;
  /* travels on transform only; offsets are % of the cursor's own box so they
     hold at any fluid width */
}

/* ----------------------------------------------- scene B: three chats ---- */

.ca-hero-b-head {
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap;
  gap: 8px 12px; flex: none; padding: 10px 14px; border-radius: 14px;
  cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none;
}
.ca-hero-b-head[data-ca-hero-grabbing="1"] { cursor: grabbing; }
.ca-hero-b-brand { display: flex; align-items: center; gap: 8px; min-width: 0; }
.ca-hero-b-name { font-size: 14px; font-weight: 500; letter-spacing: -0.005em; color: var(--ca-hero-text); white-space: nowrap; }
.ca-hero-b-agent { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--ca-hero-label); white-space: nowrap; }
.ca-hero-b-agent .ca-hero-dot { width: 8px; height: 8px; }
.ca-hero-card {
  position: relative; display: flex; flex-direction: column; gap: 10px; flex: none;
  padding: 14px 16px; border-radius: 14px;
}
.ca-hero-card-head { display: flex; align-items: center; gap: 11px; }
.ca-hero-card-ico {
  display: flex; flex: none; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 999px;
  background: var(--ca-hero-tile); border: 1px solid var(--ca-hero-tile-border);
  color: var(--ca-hero-text);
}
.ca-hero-snip {
  font-size: 13.5px; line-height: 1.45; color: var(--ca-hero-text);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; text-wrap: pretty;
}
.ca-hero-snip-who { color: var(--ca-hero-label); }
/* Two snippet versions stacked: the later one fades over the first, so the card
   height never changes when the conversation moves on. */
.ca-hero-snip-stack { position: relative; }
.ca-hero-snip-stack > .ca-hero-snip + .ca-hero-snip { position: absolute; inset: 0; opacity: 0; visibility: hidden; }
.ca-hero-sugg-slot { position: relative; }
.ca-hero-sugg {
  position: relative; display: flex; align-items: center; gap: 8px;
  padding: 8px 11px; border-radius: 10px;
  background: var(--ca-hero-tile); border: 1px solid var(--ca-hero-tile-border);
  color: var(--ca-hero-text); font-size: 13px; line-height: 1.4;
}
.ca-hero-sugg-grad::before {
  content: ''; position: absolute; inset: 0; border-radius: 10px; padding: 1px;
  background: linear-gradient(135deg,#93DEFD,#AE95DD 45%,#FCB56C);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none;
}
.ca-hero-sugg-draft { position: absolute; inset: 0; color: var(--ca-hero-label); }
/* Replaces the 203 KB animated GIF spinner with a rotation of the static mark. */
.ca-hero-spin { animation: ca-hero-spin 1400ms linear infinite; }

/* --------------------------------------------------- scene C: outcome ---- */

.ca-hero-out-card {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 14px;
  width: 100%; max-width: 400px; padding: 40px 32px 36px; border-radius: 20px; text-align: center;
}
.ca-hero-out-eyebrow {
  font-size: 12px; font-weight: 600; letter-spacing: 0.09em; text-transform: uppercase;
  color: var(--ca-hero-label);
}
.ca-hero-out-lead { font-size: 17px; font-weight: 500; letter-spacing: -0.01em; color: var(--ca-hero-text); }
.ca-hero-count {
  display: flex; align-items: baseline; justify-content: center;
  font-size: 88px; font-weight: 500; line-height: 1; letter-spacing: -0.045em;
  color: var(--ca-hero-strong); font-variant-numeric: tabular-nums;
}
/* Odometer: a strip of 51 numbers stepped by one CSS animation — no rAF, no
   per-frame text writes. steps() means the count is linear rather than eased. */
.ca-hero-count-window { height: 88px; overflow: hidden; }
.ca-hero-count-strip {
  display: flex; flex-direction: column; align-items: flex-end;
  animation: ca-hero-count 1700ms steps(50, end) both;
}
.ca-hero-count-strip > span { height: 88px; line-height: 88px; }
.ca-hero-out-glow {
  position: absolute; inset: -1px; border-radius: 20px;
  border: 1px solid var(--ca-hero-hl-border); pointer-events: none;
}
.ca-hero-out-bar {
  display: block; width: 64px; height: 3px; border-radius: 3px;
  background: linear-gradient(135deg,#93DEFD,#AE95DD 45%,#FCB56C);
  transform-origin: 50% 50%;
}

/* ------------------------------------------------------------ controls --- */

.ca-hero-tl {
  position: absolute; left: 20px; right: 110px; bottom: 18px; z-index: 8; opacity: 0;
  display: flex; justify-content: center;
  transition: opacity 300ms var(--ca-hero-e);
}
.ca-hero-tl-inner { display: flex; align-items: center; gap: 10px; min-width: 0; max-width: 100%; }
.ca-hero-tl-scenario {
  flex: none; font-size: 14px; font-weight: 600; letter-spacing: 0.02em;
  color: var(--ca-hero-tl-strong); opacity: 0.85; white-space: nowrap; margin-right: 4px;
}
.ca-hero-tl-btn {
  flex: none; width: 34px; height: 34px; padding: 0; border-radius: 999px;
  border: 1px solid var(--ca-hero-tl-border); background: var(--ca-hero-tl-chip);
  backdrop-filter: blur(18px) saturate(160%); -webkit-backdrop-filter: blur(18px) saturate(160%);
  color: var(--ca-hero-tl-strong);
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  transition: filter 180ms ease;
}
.ca-hero-tl-btn:hover { filter: brightness(1.35); }
.ca-hero-tl-btn[data-ca-hero-playing="1"] .ca-hero-ico-play,
.ca-hero-tl-btn[data-ca-hero-playing="0"] .ca-hero-ico-pause { display: none; }
.ca-hero-tl-steps { display: flex; align-items: stretch; gap: 14px; margin-left: 8px; min-width: 0; flex: none; }
.ca-hero-step {
  display: flex; flex-direction: column; align-items: flex-start; gap: 8px;
  flex: none; min-width: 64px; padding: 6px 0 4px;
  border: 0; background: transparent; cursor: pointer; text-align: left;
}
.ca-hero-step-label {
  position: relative; display: flex; align-items: center; gap: 6px;
  font-size: 12px; font-weight: 600; letter-spacing: 0.055em; text-transform: uppercase;
  white-space: nowrap; color: var(--ca-hero-tl-label);
}
.ca-hero-step-label svg { flex: none; }
/* Current-step emphasis is an opacity crossfade of a second, brighter label. */
.ca-hero-step-strong {
  position: absolute; left: 0; top: 0; display: flex; align-items: center; gap: 6px;
  color: var(--ca-hero-tl-strong); opacity: 0;
}
.ca-hero-step-last .ca-hero-step-strong {
  background: linear-gradient(90deg,#6E95F0,#AE95DD,#C98FD6);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.ca-hero-step-track {
  position: relative; display: block; width: 100%; height: 2px; border-radius: 2px;
  overflow: hidden; background: var(--ca-hero-tl-track);
}
.ca-hero-step-fill {
  position: absolute; inset: 0; transform-origin: 0 50%; transform: scaleX(0);
  background: var(--ca-hero-tl-strong);
  animation: ca-hero-fill linear both; animation-delay: 9000s;
}
.ca-hero-step-last .ca-hero-step-fill { background: linear-gradient(90deg,#6E95F0,#AE95DD,#C98FD6); }
.ca-hero-theme-btn {
  position: absolute; right: 20px; bottom: 20px; z-index: 8; opacity: 0;
  display: flex; align-items: center; width: 66px; height: 40px; padding: 3px;
  border-radius: 999px; background: rgba(18,18,24,0.52);
  border: 1px solid rgba(255,255,255,0.14);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  cursor: pointer; box-shadow: 0 8px 22px rgba(8,8,14,0.3);
  transition: opacity 300ms var(--ca-hero-e);
}
.ca-hero-theme-knob {
  display: flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 999px; background: #FFFFFF; color: #24242A;
  transition: transform 300ms var(--ca-hero-e);
}
.ca-hero-panel[data-ca-hero-theme="light"] .ca-hero-theme-knob { transform: translateX(26px); }
.ca-hero-panel[data-ca-hero-theme="light"] .ca-hero-ico-moon { display: none; }
.ca-hero-panel[data-ca-hero-theme="dark"] .ca-hero-ico-sun { display: none; }

@media (max-width: 1240px) { .ca-hero-tl-scenario { display: none; } }
@media (max-width: 860px) {
  .ca-hero-faces { flex: 0 0 200px; }
  .ca-hero-panel { min-height: 0; }
  .ca-hero-tl { left: 12px; right: 90px; }
  .ca-hero-tl-steps { flex: 1 1 auto; gap: 8px; margin-left: 2px; }
  .ca-hero-step { flex: 0 0 22px; min-width: 0; }
  .ca-hero-step[data-ca-hero-cur="1"] { flex: 1 1 auto; }
  .ca-hero-step-label { visibility: hidden; font-size: 11px; overflow: hidden; max-width: 100%; }
  .ca-hero-step[data-ca-hero-cur="1"] .ca-hero-step-label { visibility: visible; }
}
@media (max-width: 600px) {
  .ca-hero-call-pill { transform: scale(0.74); transform-origin: 0 0; left: 10px; top: 10px; }
}

/* ------------------------------------------------------------- the cue --- */
/* Delays are written by the script. The 9000s default keeps every staged
   element in its pre-roll state if the script has not run yet. */

.ca-hero-cue      { animation: ca-hero-in 480ms var(--ca-hero-e) both; animation-delay: 9000s; }
.ca-hero-cue-io   { animation: ca-hero-in 480ms var(--ca-hero-e) both,
                               ca-hero-gone 300ms var(--ca-hero-e) forwards; animation-delay: 9000s, 9000s; }
.ca-hero-cue-f    { animation: ca-hero-fade 300ms var(--ca-hero-e) both; animation-delay: 9000s; }
.ca-hero-cue-fio  { animation: ca-hero-fade 300ms var(--ca-hero-e) both,
                               ca-hero-gone 260ms var(--ca-hero-e) forwards; animation-delay: 9000s, 9000s; }
.ca-hero-cue-oi   { animation: ca-hero-gone 200ms var(--ca-hero-e) both,
                               ca-hero-fade 240ms var(--ca-hero-e) forwards; animation-delay: 9000s, 9000s; }
.ca-hero-cue-o    { animation: ca-hero-gone 200ms var(--ca-hero-e) forwards; animation-delay: 9000s; }
.ca-hero-cue-stream { animation: ca-hero-stream 700ms var(--ca-hero-e) both; animation-delay: 9000s; }
.ca-hero-cue-glow { animation: ca-hero-glow 1400ms var(--ca-hero-e) both,
                               ca-hero-gone 200ms var(--ca-hero-e) forwards; animation-delay: 9000s, 9000s; }
.ca-hero-cue-cursor { animation: ca-hero-cursor 1100ms var(--ca-hero-e) both,
                               ca-hero-gone 200ms var(--ca-hero-e) forwards; animation-delay: 9000s, 9000s; }
.ca-hero-cue-num  { animation: ca-hero-num 620ms var(--ca-hero-e) both; animation-delay: 9000s; }
.ca-hero-cue-bar  { animation: ca-hero-bar 700ms var(--ca-hero-e) both; animation-delay: 9000s; }
.ca-hero-cue-ring { animation: ca-hero-ring 1800ms var(--ca-hero-e) both; animation-delay: 9000s; }

@keyframes ca-hero-in {
  from { opacity: 0; transform: translate3d(0,14px,0) scale(0.965); filter: blur(10px); }
  45%  { opacity: 0.92; filter: blur(2px); }
  to   { opacity: 1; transform: translate3d(0,0,0) scale(1); filter: none; }
}
@keyframes ca-hero-fade { from { opacity: 0; } to { opacity: 1; visibility: visible; } }
@keyframes ca-hero-gone {
  from { opacity: 1; transform: translate3d(0,0,0) scale(1); }
  to   { opacity: 0; transform: translate3d(0,-6px,0) scale(0.99); visibility: hidden; }
}
@keyframes ca-hero-word { from { opacity: 0; transform: translate3d(0,0.25em,0); } to { opacity: 1; transform: none; } }
@keyframes ca-hero-stream {
  from { opacity: 0; clip-path: inset(0 100% 0 0); filter: blur(4px); }
  45%  { opacity: 1; filter: none; }
  to   { opacity: 1; clip-path: inset(0 0 0 0); filter: none; }
}
@keyframes ca-hero-glow {
  0%   { opacity: 0; box-shadow: 0 0 0 rgba(0,0,0,0); }
  35%  { opacity: 1; box-shadow: 0 0 22px var(--ca-hero-glow); }
  100% { opacity: 1; box-shadow: 0 0 0 rgba(0,0,0,0); }
}
@keyframes ca-hero-ring {
  0%   { opacity: 0; box-shadow: 0 0 0 rgba(0,0,0,0); }
  35%  { opacity: 1; box-shadow: 0 0 26px var(--ca-hero-glow); }
  100% { opacity: 1; box-shadow: 0 0 0 rgba(0,0,0,0); }
}
/* Offsets are a share of the cursor's own box, so they survive any fluid width. */
@keyframes ca-hero-cursor {
  0%   { opacity: 0; transform: translate3d(180%,120%,0) scale(1); }
  55%  { opacity: 1; transform: translate3d(0,0,0) scale(1); }
  72%  { opacity: 1; transform: translate3d(0,0,0) scale(0.84); }
  100% { opacity: 1; transform: translate3d(0,0,0) scale(1); }
}
@keyframes ca-hero-caret { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }
@keyframes ca-hero-dot { 0%, 100% { transform: translate3d(0,0,0); opacity: 0.5; } 40% { transform: translate3d(0,-3px,0); opacity: 1; } }
@keyframes ca-hero-ping { 0% { transform: scale(1); opacity: 0.55; } 75%, 100% { transform: scale(2.2); opacity: 0; } }
@keyframes ca-hero-num { from { transform: scale(1.08); filter: blur(8px); opacity: 0.6; } to { transform: none; filter: none; opacity: 1; } }
@keyframes ca-hero-bar { from { transform: scaleX(0); opacity: 0; } to { transform: scaleX(1); opacity: 1; } }
@keyframes ca-hero-fill { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes ca-hero-count { from { transform: translate3d(0,0,0); } to { transform: translate3d(0,-98.0392%,0); } }
@keyframes ca-hero-spin { to { transform: rotate(360deg); } }

/* --------------------------------------------- reduced motion: last act -- */
/* Everything off, rendered on the frame that carries the story: the suggested
   reply is up, highlighted, with the cursor resting on it. */

@media (prefers-reduced-motion: reduce) {
  .ca-hero-bg { transition: none; }
  .ca-hero-theme-knob, .ca-hero-tl, .ca-hero-theme-btn, .ca-hero-cta { transition: none; }
}
.ca-hero[data-ca-hero-static="1"] .ca-hero-cue,
.ca-hero[data-ca-hero-static="1"] .ca-hero-cue-io,
.ca-hero[data-ca-hero-static="1"] .ca-hero-cue-f,
.ca-hero[data-ca-hero-static="1"] .ca-hero-cue-fio,
.ca-hero[data-ca-hero-static="1"] .ca-hero-cue-oi,
.ca-hero[data-ca-hero-static="1"] .ca-hero-cue-o,
.ca-hero[data-ca-hero-static="1"] .ca-hero-cue-stream,
.ca-hero[data-ca-hero-static="1"] .ca-hero-cue-glow,
.ca-hero[data-ca-hero-static="1"] .ca-hero-cue-cursor,
.ca-hero[data-ca-hero-static="1"] .ca-hero-cue-num,
.ca-hero[data-ca-hero-static="1"] .ca-hero-cue-bar,
.ca-hero[data-ca-hero-static="1"] .ca-hero-cue-ring,
.ca-hero[data-ca-hero-static="1"] .ca-hero-w,
.ca-hero[data-ca-hero-static="1"] .ca-hero-caret,
.ca-hero[data-ca-hero-static="1"] .ca-hero-ping,
.ca-hero[data-ca-hero-static="1"] .ca-hero-dots > span,
.ca-hero[data-ca-hero-static="1"] .ca-hero-spin,
.ca-hero[data-ca-hero-static="1"] .ca-hero-step-fill,
.ca-hero[data-ca-hero-static="1"] .ca-hero-count-strip {
  animation: none;
  opacity: 1;
  visibility: visible;
  transform: none;
  filter: none;
}
.ca-hero[data-ca-hero-static="1"] [data-ca-hero-static-off] { display: none; }
.ca-hero[data-ca-hero-static="1"] .ca-hero-step[data-ca-hero-cur="1"] .ca-hero-step-fill { transform: scaleX(0.6); }
.ca-hero[data-ca-hero-static="1"] .ca-hero-count-strip { transform: translate3d(0,-98.0392%,0); }