:root {
  --motion-out: cubic-bezier(0.23, 1, 0.32, 1);
}

.scroll-progress {
  position: fixed;
  inset: 0 auto auto 0;
  z-index: 100;
  width: 100%;
  height: 3px;
  background: linear-gradient(90deg, #0D6EFD 0%, #0284C7 50%, #E05A47 100%);
  transform: scaleX(0);
  transform-origin: left center;
  pointer-events: none;
}

@media (prefers-reduced-motion: no-preference) {
  .motion-ready .hero-badge,
  .motion-ready .hero-title,
  .motion-ready .hero-subtitle,
  .motion-ready .hero-cta-group,
  .motion-ready .hero-trust,
  .motion-ready .hero-bottom-tag-wrap,
  .motion-ready .impact-card {
    animation: hero-arrive 0.75s both var(--motion-out);
  }

  .motion-ready .hero-title { animation-delay: 0.06s; }
  .motion-ready .hero-subtitle { animation-delay: 0.12s; }
  .motion-ready .hero-cta-group { animation-delay: 0.18s; }
  .motion-ready .hero-trust { animation-delay: 0.24s; }
  .motion-ready .hero-bottom-tag-wrap { animation-delay: 0.3s; }
  .motion-ready .impact-card { animation-delay: 0.15s; }

  .motion-ready .motion-reveal {
    opacity: 0;
    transform: translate3d(0, 24px, 0);
    transition: opacity 0.7s var(--motion-out), transform 0.7s var(--motion-out);
    transition-delay: var(--reveal-delay, 0ms);
  }

  .motion-ready .motion-reveal.motion-visible {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }

  .faq-list details[open] p {
    animation: faq-arrive 0.25s both var(--motion-out);
  }

  /* Emil Kowalski (emil-design-eng): Staggered live chat stream inside AI Demo Card */
  .motion-ready .ai-demo-card .ai-bubble,
  .motion-ready .ai-demo-card .ai-demo-outcome {
    opacity: 0;
    transform: translate3d(0, 10px, 0) scale(0.97);
    transition: opacity 0.45s var(--motion-out), transform 0.45s var(--motion-out);
  }

  .motion-ready .ai-demo-card.motion-visible .ai-bubble,
  .motion-ready .ai-demo-card.motion-visible .ai-demo-outcome {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
  }

  .motion-ready .ai-demo-card.motion-visible .ai-bubble:nth-child(1) { transition-delay: 120ms; }
  .motion-ready .ai-demo-card.motion-visible .ai-bubble:nth-child(2) { transition-delay: 280ms; }
  .motion-ready .ai-demo-card.motion-visible .ai-bubble:nth-child(3) { transition-delay: 440ms; }
  .motion-ready .ai-demo-card.motion-visible .ai-demo-outcome { transition-delay: 620ms; }
}

/* Emil Kowalski (emil-design-eng): Tactile press feedback (scale 0.97 on :active) */
.btn-hero-primary:active,
.btn-hero-secondary:active,
.btn-nav-primary:active,
.btn-nav-whatsapp:active,
.btn-tier-primary:active,
.btn-tier-outline:active,
.btn-ceo-cta:active,
.btn-form-submit:active,
.quiz-next:active,
.impact-banner-btn:active,
.whatsapp-float:active {
  transform: scale(0.97) !important;
  transition-duration: 100ms !important;
}

/* Emil Kowalski (emil-design-eng): Prevent sticky hover lifts on touch devices */
@media (hover: none), (pointer: coarse) {
  .service-tier-card:hover,
  .process-step-card:hover,
  .pillar-item:hover {
    transform: none !important;
  }
}

@keyframes hero-arrive {
  from {
    opacity: 0;
    transform: translate3d(0, 24px, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@keyframes faq-arrive {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.motion-ready .motion-reveal:focus-within {
  opacity: 1;
  transform: none;
  transition-delay: 0ms;
}

@media (prefers-reduced-motion: reduce) {
  .motion-ready .motion-reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}