/* Motion layer inspired by cezar.run: CSS-first, no libraries, disabled for reduced motion. */
h1 > .hl { display: block; overflow: hidden; color: inherit; padding-bottom: .1em; margin-bottom: -.1em; }
h1 > .hl > span { display: block; }
h1 > .hl-accent { color: var(--lime); }

@media (prefers-reduced-motion: no-preference) {
  /* Hero: lines slide up from a mask, then copy and visual follow. */
  h1 > .hl > span { animation: line-up .9s cubic-bezier(.2, .7, .1, 1) both; }
  h1 > .hl:nth-child(2) > span { animation-delay: .08s; }
  h1 > .hl:nth-child(3) > span { animation-delay: .16s; }
  .hero .eyebrow { animation: rise-in .7s ease-out both; }
  .hero-description { animation: rise-in .8s .3s ease-out both; }
  .hero-actions { animation: rise-in .8s .4s ease-out both; }
  .hero-visual { animation: fade-in 1.2s .25s ease-out both; }

  /* Terminal cursor in the wordmarks. */
  .terminal-cursor { animation: blink 1.15s steps(1) 4; }

  /* Scroll reveal: JS adds .reveal only to elements below the fold, so nothing flashes. */
  .reveal { opacity: 0; transform: translateY(22px); transition: opacity .85s ease-out, transform .85s cubic-bezier(.2, .7, .1, 1); }
  .reveal.is-in { opacity: 1; transform: none; }

  /* Typed YAML: each line is revealed left to right in character steps. */
  .is-typing .code-line { clip-path: inset(0 100% 0 0); }
  .is-typed .code-line { animation: type calc(var(--n) * 14ms) steps(var(--n), end) var(--d) both; }
  .code-caret { display: inline-block; width: .55em; height: 1.1em; margin-left: 2px; vertical-align: -.2em; background: var(--lime); opacity: 0; }
  .is-typed .code-caret { animation: fade-in 0s var(--d) both, blink 1.15s steps(1) var(--d) 4; }

  /* Tools ticker. */
  .ticker { flex: 1; min-width: 0; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
  .stack-row > .ticker { display: block; }
  .ticker-track { display: flex; width: max-content; animation: ticker 48s linear infinite; }
  .ticker:hover .ticker-track, .ticker:focus-within .ticker-track { animation-play-state: paused; }
  .ticker-set { display: flex; gap: 56px; padding-right: 56px; }
  .ticker-set > span { white-space: nowrap; }

  /* Workflow packets in the AI diagram. */
  .workflow-diagram { position: relative; }
  .wf-packet { position: absolute; left: 0; top: 0; width: 7px; height: 7px; margin: -3.5px 0 0 -3.5px; border-radius: 50%; background: var(--purple); box-shadow: 0 0 10px #cc6ee7aa; pointer-events: none; z-index: 2; }
  .workflow-inputs > span, .agent-node, .workflow-output { transition: border-color .3s, box-shadow .3s, color .3s; }
  .workflow-inputs > span.is-sending { border-color: #93649e; color: #eef0f4; }
  .agent-node.is-hit { border-color: var(--purple); box-shadow: 0 0 0 1px #cc6ee755, 0 0 42px #cc6ee733; }
  .workflow-output.is-hit { border-color: #ac64c0; color: #eef0f4; }
}

/* On phones the tools are a static, scannable list: no hover to pause there. */
@media (max-width: 650px) {
  .stack-row > .ticker { margin-top: 18px; -webkit-mask-image: none; mask-image: none; }
  .ticker-track { animation: none; width: auto; }
  .ticker-set { flex-wrap: wrap; gap: 14px 24px; padding-right: 0; }
  .ticker-set[aria-hidden] { display: none; }
}

@keyframes line-up { from { transform: translateY(110%); } to { transform: none; } }
@keyframes rise-in { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes blink { 50% { opacity: 0; } }
@keyframes type { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes ticker { to { transform: translateX(-50%); } }