/* Motion layer — transform/opacity only; disabled via prefers-reduced-motion */

@media (prefers-reduced-motion: reduce) {
  .reveal,
  .reveal-hero,
  .section-banner,
  .use-cases__grid,
  .contact-dock__panel,
  .site-nav--mobile,
  .scroll-top,
  .faq-item__panel,
  .faq-item__icon,
  .portfolio-item img {
    animation: none !important;
    transition: none !important;
    transform: none !important;
  }

  .reveal:not(.is-revealed) {
    opacity: 1 !important;
  }
}

@media (prefers-reduced-motion: no-preference) {
  :root {
    --transition-medium: 350ms cubic-bezier(0.22, 1, 0.36, 1);
    --transition-slow: 550ms cubic-bezier(0.22, 1, 0.36, 1);
  }

  @keyframes reveal-up {
    from {
      opacity: 0;
      transform: translate3d(0, 1.25rem, 0);
    }
    to {
      opacity: 1;
      transform: translate3d(0, 0, 0);
    }
  }

  @keyframes reveal-fade {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }

  .reveal-hero .hero__copy {
    animation: reveal-up var(--transition-slow) both;
  }

  .reveal-hero .hero__media {
    animation: reveal-up var(--transition-slow) 0.12s both;
  }

  .reveal {
    opacity: 0;
    transform: translate3d(0, 1rem, 0);
    transition:
      opacity var(--transition-medium) var(--reveal-delay, 0ms),
      transform var(--transition-medium) var(--reveal-delay, 0ms);
    will-change: opacity, transform;
  }

  .reveal.is-revealed {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }

  .section-banner {
    transition: transform 0.1s linear;
    will-change: transform;
  }

  .portfolio-item img {
    transition: transform var(--transition-medium);
  }

  .portfolio-item:hover img {
    transform: scale3d(1.03, 1.03, 1);
  }

  .feature-card img,
  .service-card img {
    transition: transform var(--transition-medium);
  }

  .feature-card:hover img,
  .service-card:hover img {
    transform: scale3d(1.02, 1.02, 1);
  }

  .use-cases__tab {
    transition:
      background var(--transition-fast),
      color var(--transition-fast),
      box-shadow var(--transition-fast);
  }

  .use-cases__grid {
    transition:
      opacity 0.28s ease,
      transform 0.28s ease;
  }

  .use-cases__grid.is-swapping {
    opacity: 0;
    transform: translate3d(0, 0.5rem, 0);
  }

  .use-cases__thumb {
    animation: reveal-fade 0.35s ease both;
    animation-delay: calc(var(--thumb-i, 0) * 45ms);
  }

  .faq-item__icon {
    display: inline-block;
    transition: transform var(--transition-medium);
  }

  .faq-item__trigger[aria-expanded="true"] .faq-item__icon {
    transform: rotate(45deg);
  }

  .faq-item:not(.is-open) .faq-item__panel {
    visibility: hidden;
  }

  .faq-item.is-open .faq-item__panel {
    visibility: visible;
  }

  .faq-item__panel {
    overflow: hidden;
    max-height: 0;
    opacity: 0;
    transition:
      max-height var(--transition-medium),
      opacity var(--transition-fast),
      padding-bottom var(--transition-medium);
    padding-bottom: 0;
  }

  .faq-item.is-open .faq-item__panel {
    max-height: 16rem;
    opacity: 1;
    padding-bottom: 1rem;
  }

  .site-nav--mobile {
    opacity: 0;
    transition: opacity var(--transition-medium);
  }

  .site-nav--mobile.is-open {
    opacity: 1;
  }

  .site-nav--mobile .site-nav__pill a {
    opacity: 0;
    transform: translate3d(0, 0.5rem, 0);
    transition:
      opacity var(--transition-medium),
      transform var(--transition-medium);
  }

  .site-nav--mobile.is-open .site-nav__pill a {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }

  .site-nav--mobile.is-open .site-nav__pill a:nth-child(1) {
    transition-delay: 0.05s;
  }
  .site-nav--mobile.is-open .site-nav__pill a:nth-child(2) {
    transition-delay: 0.1s;
  }
  .site-nav--mobile.is-open .site-nav__pill a:nth-child(3) {
    transition-delay: 0.15s;
  }
  .site-nav--mobile.is-open .site-nav__pill a:nth-child(4) {
    transition-delay: 0.2s;
  }
  .site-nav--mobile.is-open .site-nav__pill a:nth-child(5) {
    transition-delay: 0.25s;
  }

  .contact-dock__panel {
    transform: translate3d(0, 0.5rem, 0);
    transition:
      opacity var(--transition-medium),
      transform var(--transition-medium),
      visibility var(--transition-medium),
      max-height var(--transition-medium);
  }

  .contact-dock.is-open .contact-dock__panel {
    transform: translate3d(0, 0, 0);
  }

  .scroll-top {
    transform: translate3d(0, 0.5rem, 0) scale(0.92);
    transition:
      opacity var(--transition-fast),
      visibility var(--transition-fast),
      transform var(--transition-medium);
  }

  .scroll-top.is-visible {
    transform: translate3d(0, 0, 0) scale(1);
  }

  .btn {
    transition:
      filter var(--transition-fast),
      box-shadow var(--transition-fast),
      transform var(--transition-fast);
  }

  .btn:active {
    transform: scale(0.98);
  }
}