/* Parabellum motion layer — loaded after Stitch's Tailwind markup.
   `html` prefixes win over the Tailwind CDN styles injected at runtime. */
:root {
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
}

/* Stitch uses transition-all everywhere; never let it animate layout. */
html .transition-all {
  transition-property: color, background-color, border-color, outline-color, fill, stroke, box-shadow, opacity, filter, transform;
}
html img.transition-all.duration-500 { transition-duration: 300ms; }

/* Press feedback on every button and CTA */
html .pressable {
  transition-property: color, background-color, border-color, box-shadow, transform;
  transition-duration: 160ms;
  transition-timing-function: var(--ease-out);
}
html .pressable:active { transform: scale(0.97); }

/* Scroll reveal: JS adds [data-reveal], then .is-in, then removes both once settled
   so Tailwind's own hover transitions come back untouched. */
[data-reveal] {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 700ms var(--ease-out), transform 700ms var(--ease-out);
  transition-delay: var(--reveal-delay, 0ms);
}
[data-reveal].is-in { opacity: 1; transform: none; }

/* Intake confirmations fade in when the form un-hides them */
html #intake-status:not(.hidden),
html #dispatch-status:not(.hidden),
html #form-feedback:not(.hidden) {
  transition: opacity 300ms var(--ease-out), transform 300ms var(--ease-out);
  @starting-style { opacity: 0; transform: translateY(6px); }
}

/* Header gains a hairline shadow once content scrolls beneath it */
html header { transition: box-shadow 200ms ease; }
html header.is-scrolled { box-shadow: 0 1px 12px rgba(22, 24, 29, 0.06); }

/* Hover zoom only where hover is real */
@media (hover: none) {
  html .hover\:scale-\[1\.02\]:hover { transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  [data-reveal] { transform: none; transition: opacity 300ms ease; }
  html .pressable:active { transform: none; }
  html .animate-ping { animation: none; }
}
