/*
  Motion layer.
  Defines the animation contracts used across HomeDoci: wow/fadeInUp,
  SplitText headings, reveal image masks, parallax targets, button fills
  and image shimmer.
*/

.motion-active {
  scroll-behavior: smooth;
}

.motion-active .site-header {
  transition:
    transform 0.3s ease-in-out,
    background 0.3s ease-in-out,
    box-shadow 0.3s ease-in-out,
    border-color 0.3s ease-in-out;
}

.motion-active .site-nav a,
.motion-active .site-nav a::after,
.motion-active .nav-toggle span {
  transition: all 0.3s ease-in-out;
}

.motion-active .button,
.motion-active .header-cta,
.motion-active .service-card,
.motion-active .project-card,
.motion-active .feature-grid article,
.motion-active .blog-grid article,
.motion-active .price-card,
.motion-active .testimonial-grid figure {
  transition: all 0.4s ease-in-out;
}

.motion-active .accordion details {
  transition:
    height 0.42s cubic-bezier(0.22, 1, 0.36, 1),
    background 0.4s ease-in-out,
    border-color 0.4s ease-in-out,
    box-shadow 0.4s ease-in-out;
}

.motion-active .accordion summary::after,
.motion-active .accordion details p {
  transition:
    transform 0.36s cubic-bezier(0.22, 1, 0.36, 1),
    opacity 0.28s ease-in-out,
    background 0.28s ease-in-out,
    border-color 0.28s ease-in-out,
    color 0.28s ease-in-out;
}

.motion-active .comparison {
  transition: box-shadow 0.4s ease-in-out;
}

.motion-active .comparison,
.motion-active .comparison img,
.motion-active .comparison__before,
.motion-active .comparison__handle {
  transform: none;
}

.motion-active .comparison__handle {
  transform: translateX(-50%);
}

.motion-active .service-card *,
.motion-active .price-card *,
.motion-active .contact-list a,
.motion-active .project-card img,
.motion-active .blog-grid img {
  transition: all 0.5s ease-in-out;
}

.motion-active .button::before,
.motion-active .header-cta::before,
.motion-active .button::after,
.motion-active .header-cta::after {
  transition: all 0.4s ease-in-out;
}

.motion-active .image-anime {
  position: relative;
  overflow: hidden;
}

.motion-active .image-anime::after {
  content: "";
  position: absolute;
  width: 200%;
  height: 0%;
  left: 50%;
  top: 50%;
  background-color: rgba(255, 255, 255, 0.3);
  transform: translate(-50%, -50%) rotate(-45deg);
  z-index: 3;
  pointer-events: none;
}

.motion-active .image-anime:hover::after {
  height: 250%;
  transition: all 600ms linear;
  background-color: transparent;
}

.motion-active .reveal {
  visibility: hidden;
  overflow: hidden;
}

.motion-active .reveal img {
  transform-origin: left;
}

.motion-active .text-anime-style-3 {
  perspective: 400px;
}

.motion-active .wow {
  visibility: hidden;
}

.motion-active .wow.animated {
  visibility: visible;
}

.motion-active .hero__metrics dt.counter {
  display: inline-block;
}

.motion-active .site-header.hide,
.motion-active .site-header.is-hidden {
  transform: translateX(-50%) translateY(-150%);
}

.motion-active .site-header.active,
.motion-active .site-header.is-scrolled {
  transform: translateX(-50%);
}

.motion-active .project-card:hover,
.motion-active .feature-grid article:hover,
.motion-active .blog-grid article:hover,
.motion-active .service-card:hover {
  transform: translateY(-10px);
}

.motion-reduced .wow,
.motion-reduced .reveal {
  visibility: visible;
}

@media (prefers-reduced-motion: reduce) {
  .motion-active .wow,
  .motion-active .reveal {
    visibility: visible;
  }
}