/* Welcome-page motion: staggered headline, flowing curves, scroll reveals. All of it switches off
   for visitors who ask their system for reduced motion. */
@media all {
  .hero { position: relative; overflow: hidden; isolation: isolate; }
  .hero-copy, .live-demo { position: relative; z-index: 1; }

  /* Headline: each line rises out of a mask, then a light sweep passes across the second line. */
  .hero h1 .hero-link { overflow: hidden; vertical-align: top; padding-bottom: .14em; margin-bottom: -.14em; }
  .hero h1 .hero-line { display: inline-block; animation: heroRise .9s cubic-bezier(.2,.8,.2,1) both; }
  .hero h1 .hero-link-alt .hero-line { animation-delay: .18s; }
  .hero h1 .hero-link-alt .hero-line { animation: heroRise .9s cubic-bezier(.2,.8,.2,1) .18s both, heroGlow 4.5s ease-in-out 1.4s infinite; }
  .hero .eyebrow { animation: heroFade .8s ease both; }
  .hero-description { animation: heroUp .9s cubic-bezier(.2,.8,.2,1) .35s both; }
  .hero-actions { animation: heroUp .9s cubic-bezier(.2,.8,.2,1) .5s both; }
  .hero-caption { animation: heroUp .9s cubic-bezier(.2,.8,.2,1) .65s both; }
  .hero-note { animation: heroUp .9s cubic-bezier(.2,.8,.2,1) .8s both; }

  /* Primary button: a soft pulse that invites the first click. */
  .hero-actions .button.primary { animation: heroPulse 2.8s ease-out 1.8s infinite; }

  /* The preview card floats in, then breathes slowly. */
  .live-demo { animation: demoIn 1s cubic-bezier(.2,.8,.2,1) .25s both, demoFloat 7s ease-in-out 1.4s infinite; }
  #demoCanvas { transition: filter .4s ease; }
  .sample-badge { animation: heroFade 1s ease .9s both; }

  /* Flowing log curves behind the text. */
  .hero-flow { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; opacity: .5; }
  .hero-flow path { fill: none; stroke-linecap: round; stroke-dasharray: 14 22; animation: flowDash 28s linear infinite; }
  .hero-flow path:nth-child(1) { stroke: #9d6bff; stroke-width: 2; opacity: .55; }
  .hero-flow path:nth-child(2) { stroke: #d6adff; stroke-width: 1.5; opacity: .4; animation-duration: 40s; animation-direction: reverse; }
  .hero-flow path:nth-child(3) { stroke: #7b3fd0; stroke-width: 2.5; opacity: .35; animation-duration: 52s; }
  .hero-flow .depth-line { stroke: #ffffff; stroke-width: 1; opacity: .08; stroke-dasharray: 2 10; animation: none; }

  /* Sections ease in as they scroll into view (the class is only added when scripts run). */
  .motion-on [data-reveal] { opacity: 0; transform: translateY(28px); transition: opacity .8s ease, transform .8s cubic-bezier(.2,.8,.2,1); transition-delay: var(--reveal-delay, 0s); }
  .motion-on [data-reveal].is-in { opacity: 1; transform: none; }
  .motion-on .feature-grid article, .motion-on .price-card, .motion-on .tool-lists article { transition-property: opacity, transform, box-shadow; }

  @keyframes heroRise { from { transform: translateY(105%); opacity: 0; } to { transform: none; opacity: 1; } }
  @keyframes heroUp { from { transform: translateY(18px); opacity: 0; } to { transform: none; opacity: 1; } }
  @keyframes heroFade { from { opacity: 0; } to { opacity: 1; } }
  @keyframes heroGlow { 0%, 100% { filter: brightness(1); text-shadow: 0 0 0 rgba(214,173,255,0); } 50% { filter: brightness(1.18); text-shadow: 0 0 26px rgba(177,129,225,.55); } }
  @keyframes heroPulse { 0% { box-shadow: 0 0 0 0 rgba(157,107,255,.55); } 70%, 100% { box-shadow: 0 0 0 16px rgba(157,107,255,0); } }
  @keyframes demoIn { from { opacity: 0; transform: translateY(34px) scale(.97); } to { opacity: 1; transform: none; } }
  @keyframes demoFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
  @keyframes flowDash { to { stroke-dashoffset: -720; } }
}