/* Motion layer. Everything is gated on html.js and disabled by prefers-reduced-motion. */
@media (prefers-reduced-motion: no-preference) {
  /* Hero headline: word by word + violet highlight sweep on italic words */
  .js h1.hero-h .w { display: inline-block; opacity: 0; transform: translateY(0.5em); }
  .js h1.hero-h.in .w { opacity: 1; transform: none; transition: opacity .7s var(--ease), transform .7s var(--ease); transition-delay: calc(var(--i) * 70ms); }
  .js h1.hero-h em .w, .js h1.hero-h em.w {
    background: linear-gradient(100deg, transparent 0 40%, var(--violet-glow) 50%, transparent 60% 100%) no-repeat;
    background-size: 250% 100%; background-position: 120% 0; border-radius: 6px;
  }
  .js h1.hero-h.in em .w { animation: sweep 1.4s var(--ease-in-out) both; animation-delay: calc(var(--i) * 70ms + 700ms); }
  @keyframes sweep { to { background-position: -20% 0; } }

  /* Scroll reveals */
  .js .reveal { opacity: 0; transform: translateY(24px); }
  .js .reveal.in { opacity: 1; transform: none; transition: opacity .7s var(--ease), transform .7s var(--ease); transition-delay: calc(var(--i, 0) * 90ms); }
  .js .reveal.in.card-ready:hover, .js .fw.reveal.in:hover, .js .work-item.reveal.in:hover { transition-delay: 0s; }

  /* Comparison: vendors strike through, Protectify ticks in */
  .vs-col.them li span:last-child { background: linear-gradient(currentColor, currentColor) no-repeat 0 55% / 0 1px; transition: background-size .8s var(--ease); transition-delay: calc(var(--k, 0) * 220ms + 400ms); }
  .vs-grid.in .vs-col.them li span:last-child { background-size: 100% 1px; }
  .vs-grid.in .vs-col.them li { opacity: .75; }
  .js .vs-col.us li .mk { transform: scale(0); }
  .js .vs-grid.in .vs-col.us li .mk { transform: scale(1); transition: transform .5s cubic-bezier(.34,1.56,.64,1); transition-delay: calc(var(--k, 0) * 220ms + 500ms); }

  /* Timeline */
  .js .timeline:not(.in)::before { transform: scaleX(0); }
  @media (max-width: 860px) { .js .timeline:not(.in)::before { transform: scaleY(0); } }
  .js .timeline:not(.in) .step .dot { transform: scale(0); }
  .js .timeline.in .step .dot { transition: transform .4s cubic-bezier(.34,1.56,.64,1); transition-delay: calc(var(--i) * 400ms); }

  /* Audit chat */
  .js .audit-mock .row { opacity: 0; transform: translateY(10px); }
  .js .audit-mock .row.shown { opacity: 1; transform: none; transition: opacity .4s, transform .4s var(--ease); }
  .audit-mock .typing { display: none; gap: 4px; padding: 12px 16px; border-radius: 12px; background: var(--aubergine); border: 1px solid var(--line); width: max-content; }
  .audit-mock .typing.on { display: inline-flex; }
  .audit-mock .typing i { width: 6px; height: 6px; border-radius: 50%; background: var(--fg-muted); animation: blink 1s infinite; }
  .audit-mock .typing i:nth-child(2) { animation-delay: .15s; } .audit-mock .typing i:nth-child(3) { animation-delay: .3s; }
  @keyframes blink { 0%, 80%, 100% { opacity: .25; } 40% { opacity: 1; } }

  .cta { transition: transform .25s var(--ease), box-shadow .25s var(--ease); }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .orbit .chip, .faq-answer, .timeline::before { transition: none; }
  .audit-mock .typing { display: none !important; }
}
.audit-mock .typing { display: none; }