@media (prefers-reduced-motion: no-preference) {
  @keyframes fade-up {
    from {
      opacity: 0;
      transform: translate3d(0, var(--reveal-offset), 0);
    }

    to {
      opacity: 1;
      transform: translate3d(0, 0, 0);
    }
  }

  @keyframes fade-in {
    from {
      opacity: 0;
    }

    to {
      opacity: 1;
    }
  }

  @keyframes slide-down {
    from {
      opacity: 0;
      transform: translate3d(0, -12px, 0);
    }

    to {
      opacity: 1;
      transform: translate3d(0, 0, 0);
    }
  }

  @keyframes float-gentle {
    0%,
    100% {
      box-shadow: 0 8px 32px rgba(var(--color-brand-rgb), 0.45);
    }

    50% {
      box-shadow: 0 12px 40px rgba(var(--color-brand-rgb), 0.58);
    }
  }

  @keyframes call-ring-expand {
    0% {
      transform: scale(1);
      opacity: 0.75;
    }

    100% {
      transform: scale(1.5);
      opacity: 0;
    }
  }

  @keyframes call-phone-ring {
    0%,
    45%,
    100% {
      transform: rotate(0deg);
    }

    5% {
      transform: rotate(-14deg);
    }

    10% {
      transform: rotate(14deg);
    }

    15% {
      transform: rotate(-12deg);
    }

    20% {
      transform: rotate(12deg);
    }

    25% {
      transform: rotate(-8deg);
    }

    30% {
      transform: rotate(8deg);
    }

    35% {
      transform: rotate(0deg);
    }
  }

  @keyframes call-enter {
    from {
      opacity: 0;
      transform: translate3d(0, 20px, 0) scale(0.92);
    }

    to {
      opacity: 1;
      transform: translate3d(0, 0, 0) scale(1);
    }
  }

  @keyframes ring-pulse {
    0%,
    100% {
      box-shadow: var(--shadow-brand);
    }

    50% {
      box-shadow: 0 8px 32px rgba(var(--color-brand-rgb), 0.42);
    }
  }

  .header {
    animation: slide-down 0.55s var(--ease-out) both;
  }

  .hero__badge {
    animation: fade-up 0.7s var(--ease-out) 0.1s both;
  }

  .hero__title {
    animation: fade-up 0.75s var(--ease-out) 0.22s both;
  }

  .hero__text {
    animation: fade-up 0.75s var(--ease-out) 0.34s both;
  }

  .hero__actions {
    animation: fade-up 0.75s var(--ease-out) 0.46s both;
  }

  .page-hero__inner > .section-label {
    animation: fade-up 0.65s var(--ease-out) 0.08s both;
  }

  .page-hero__inner > .section-title {
    animation: fade-up 0.7s var(--ease-out) 0.18s both;
  }

  .page-hero__inner > .page-hero__text {
    animation: fade-up 0.7s var(--ease-out) 0.3s both;
  }

  .reveal-ready .reveal {
    opacity: 0;
    transform: translate3d(0, var(--reveal-offset), 0);
    transition:
      opacity var(--reveal-duration) var(--ease-out),
      transform var(--reveal-duration) var(--ease-out);
    transition-delay: var(--reveal-delay, 0ms);
    will-change: opacity, transform;
  }

  .reveal-ready .reveal--left {
    transform: translate3d(calc(var(--reveal-offset) * -1), 0, 0);
  }

  .reveal-ready .reveal--scale {
    transform: scale(0.96);
  }

  .reveal-ready .reveal.is-visible {
    opacity: 1;
    transform: translate3d(0, 0, 0);
    will-change: auto;
  }

  .reveal-ready .reveal.is-visible.feature-card:hover,
  .reveal-ready .reveal.is-visible.service-card:hover {
    transform: translate3d(0, -4px, 0);
  }

  .service-card:hover .service-card__ring {
    animation: ring-pulse 1.6s var(--ease-in-out) infinite;
  }

  .floating-call {
    animation:
      call-enter 0.65s var(--ease-out) 0.8s both,
      float-gentle 3s var(--ease-in-out) 2s infinite;
  }

  .floating-call::before {
    animation: call-ring-expand 2.6s var(--ease-out) 1.4s infinite;
  }

  .floating-call::after {
    animation: call-ring-expand 2.6s var(--ease-out) 2.7s infinite;
  }

  .floating-call svg {
    animation: call-phone-ring 3.5s ease-in-out 2.2s infinite;
  }

  .floating-call:hover::before,
  .floating-call:hover::after,
  .floating-call:focus-visible::before,
  .floating-call:focus-visible::after {
    animation-play-state: paused;
    opacity: 0;
  }

  .floating-call:hover svg,
  .floating-call:focus-visible svg {
    animation-play-state: paused;
    transform: rotate(0deg);
  }

  .mobile-menu.is-open .mobile-menu__phone {
    animation: fade-up 0.45s var(--ease-out) 0.08s both;
  }

  .mobile-menu.is-open .mobile-menu__links li:nth-child(1) .mobile-menu__link {
    animation: fade-up 0.45s var(--ease-out) 0.12s both;
  }

  .mobile-menu.is-open .mobile-menu__links li:nth-child(2) .mobile-menu__link {
    animation: fade-up 0.45s var(--ease-out) 0.18s both;
  }

  .mobile-menu.is-open .mobile-menu__links li:nth-child(3) .mobile-menu__link {
    animation: fade-up 0.45s var(--ease-out) 0.24s both;
  }

  .mobile-menu.is-open .mobile-menu__links li:nth-child(4) .mobile-menu__link {
    animation: fade-up 0.45s var(--ease-out) 0.3s both;
  }

  .mobile-menu.is-open .mobile-menu__cta {
    animation: fade-up 0.45s var(--ease-out) 0.36s both;
  }

  .mobile-menu.is-open .mobile-menu__socials {
    animation: fade-in 0.4s var(--ease-out) 0.42s both;
  }
}

@supports (-webkit-touch-callout: none) {
  @media (prefers-reduced-motion: no-preference) {
    .reveal-ready .reveal {
      -webkit-backface-visibility: hidden;
      backface-visibility: hidden;
    }
  }
}