/* Short, gentle motion that leaves the original device angles intact. */
@keyframes copy-arrive {
  from { opacity: 0; translate: 0 14px; }
  to { opacity: 1; translate: 0 0; }
}
@keyframes device-arrive {
  0% { opacity: 0; translate: 0 30px; }
  65% { opacity: 1; translate: 0 -5px; }
  100% { opacity: 1; translate: 0 0; }
}
@keyframes icon-settle {
  0% { rotate: -9deg; }
  65% { rotate: 3deg; }
  100% { rotate: 0deg; }
}

@media (prefers-reduced-motion: no-preference) {
  .js-motion .hero-copy > * {
    animation: copy-arrive .7s cubic-bezier(.2,.7,.2,1) backwards;
  }
  .js-motion .hero-copy h1 { animation-delay: 70ms; }
  .js-motion .hero-lead { animation-delay: 140ms; }
  .js-motion .hero-description { animation-delay: 210ms; }
  .js-motion .hero-actions { animation-delay: 280ms; }
  .js-motion .hero-footnote { animation-delay: 350ms; }
  .js-motion:not(.motion-reduced) .hero-laptop {
    animation: device-arrive 1.3s cubic-bezier(.2,.7,.2,1) 140ms backwards;
  }
  .js-motion:not(.motion-reduced) .hero-phone {
    animation: device-arrive 1.6s cubic-bezier(.2,.7,.2,1) 280ms backwards;
  }
  .js-motion .reveal {
    transform: translateY(22px);
    transition: opacity .7s cubic-bezier(.2,.7,.2,1) var(--reveal-delay, 0ms),
                transform .7s cubic-bezier(.2,.7,.2,1) var(--reveal-delay, 0ms);
  }
  .js-motion .reveal.visible { transform: none; }
  .examples-grid > .reveal:nth-child(2),
  .packages-grid > .reveal:nth-child(2) { --reveal-delay: 120ms; }
  .process-grid > .reveal:nth-child(2) { --reveal-delay: 100ms; }
  .process-grid > .reveal:nth-child(3) { --reveal-delay: 200ms; }
  .process-grid > .reveal:nth-child(4) { --reveal-delay: 300ms; }
  .js-motion:not(.motion-reduced) .process-grid .visible .process-icon {
    animation: icon-settle .7s ease-out var(--reveal-delay, 0ms) backwards;
  }
  .js-motion:not(.motion-reduced) .request-details:not([hidden]) .request-layout {
    animation: copy-arrive .4s ease-out;
  }
  .button > span, .mini-services img, .round-arrow {
    transition: translate .25s ease, rotate .3s ease, background .25s ease, color .25s ease;
  }
  .package { transition: box-shadow .3s ease, border-color .3s ease; }
  .js-motion .hero-copy > .intro-complete { animation: none; }
}

@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .js-motion:not(.motion-reduced) .button:hover > span,
  .js-motion:not(.motion-reduced) .button:focus-visible > span { translate: 3px -3px; }
  .js-motion:not(.motion-reduced) .example-card:hover .mini-services img,
  .js-motion:not(.motion-reduced) .example-card:focus-visible .mini-services img { translate: 0 -3px; }
  .example-card .mini-services > span:nth-child(2) img { transition-delay: 45ms; }
  .example-card .mini-services > span:nth-child(3) img { transition-delay: 90ms; }
  .js-motion:not(.motion-reduced) .example-card:hover .round-arrow { rotate: 8deg; }
  .package:hover, .package:focus-within { border-color: #91a17b; box-shadow: 0 12px 28px #183c2e0d; }
}

/* On narrow screens, items enter separately as they reach the viewport. */
@media (max-width: 680px) {
  .examples-grid > .reveal:nth-child(n),
  .packages-grid > .reveal:nth-child(n),
  .process-grid > .reveal:nth-child(n) { --reveal-delay: 0ms; }
}

/* Focus reveals content immediately; reduced-motion is also enforced in styles.css. */
.js-motion .reveal:focus-within {
  opacity: 1;
  transform: none;
  transition: none;
}
.motion-reduced .reveal { opacity: 1; transform: none; }