/* Every movement on the page lives here, and only runs when the visitor allows motion. */

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }

  .btn:hover { transform: translateY(-1px); }

  /* The header (js/main.js) shrinks and grows back smoothly */
  .site-header,
  .site-header-pill,
  .site-header .brand,
  .site-header .brand img,
  .site-nav a,
  .site-header-cta,
  .theme-toggle,
  .menu-toggle { transition: all 0.3s var(--ease); }

  /* The phone menu's drawer slides in from the right, and back out, as the page dims behind it */
  .site-nav { transition: transform 0.3s var(--ease), visibility 0.3s; }
  .menu-backdrop { transition: opacity 0.3s var(--ease), visibility 0.3s; }

  /* The hero and section titles: the ink-to-violet gradient slides left to right, over and over */
  .hero h1,
  .section h2 {
    background-image: var(--gradient-heading-flow);
    background-size: 200% 100%;
    animation: heading-flow 5.33s linear infinite;
  }

  @keyframes heading-flow {
    from { background-position: 100% 0; }
    to { background-position: 0 0; }
  }

  /* .reveal fades in on first view. Hidden only when JS runs (.js on <html>),
     so the page still shows everything without it. */
  .js .reveal {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity var(--dur-slow) var(--ease), transform var(--dur-slow) var(--ease);
  }

  .js .reveal.is-visible {
    opacity: 1;
    transform: none;
  }

  /* Bots demo (js/main.js): messages slide in, the caret blinks, "thinking…" pulses */
  .bot-demo-msg { animation: bot-msg-in 0.3s var(--ease); }
  .bot-demo-caret { animation: bot-caret 1s steps(1) infinite; }
  .bot-demo-thinking { animation: bot-pulse 0.8s ease-in-out infinite alternate; }

  @keyframes bot-msg-in {
    from { opacity: 0; transform: translateY(8px); }
  }

  @keyframes bot-caret {
    50% { opacity: 0; }
  }

  @keyframes bot-pulse {
    to { opacity: 0.4; }
  }

  /* Hero and MCP demos (js/hero-demo.js, js/mcp-demo.js): each step fades in as it appears, the terminal pops up */
  .hd-step.is-on,
  .mc-demo [data-at].is-on { animation: hd-in 0.3s var(--ease); }
  .hd-term.is-on { animation: hd-pop 0.25s var(--ease); }

  @keyframes hd-in {
    from { opacity: 0; transform: translateY(6px); }
  }

  @keyframes hd-pop {
    from { opacity: 0; transform: scale(0.96); }
  }

  /* Hero demo: the prompt's caret blinks */
  .hd-caret { animation: bot-caret 1s steps(1) infinite; }

  /* Pricing page: the plan's ring glows brighter and softer, like a light that hums */
  .pr-card::before { animation: pr-glow 2.4s ease-in-out infinite alternate; }

  @keyframes pr-glow {
    to {
      box-shadow:
        0 0 2.5rem rgb(139 92 246 / 0.95),
        inset 0 0 1.5rem rgb(139 92 246 / 0.7);
    }
  }

  /* Pricing page's prose (js/pricing.js), timed as on huly.io/pricing: each word fades between faint
     and lit in half a second. An icon's margin slides open over 0.8s, then it fades in after 0.2s while
     its picture grows from nothing; folding away, it closes faster. --pr-ease is Huly's curve:
     quick, then a long settle */
  .pr-prose { --pr-ease: cubic-bezier(0.42, 0, 0.09, 1); }

  .pr-w { transition: opacity 0.5s var(--ease); }

  .pr-chip.pr-w { transition: margin-right 0.8s var(--pr-ease), opacity 0.2s 0.2s; }
  .pr-chip.pr-w > * { transition: scale 0.7s var(--pr-ease) 0.1s; }

  .pr-chip.pr-w:not(.is-lit) { transition: margin-right 0.5s var(--pr-ease), opacity 0.15s; }
  .pr-chip.pr-w:not(.is-lit) > * { transition: scale 0.5s var(--pr-ease); }

  /* The logo in the always-lit opening sentence grows in once the page loads, as Huly's does */
  .pr-chip-logo > img { animation: pr-pop 0.7s var(--pr-ease) 0.1s backwards; }

  @keyframes pr-pop {
    from { scale: 0; }
  }
}