@media (prefers-reduced-motion: no-preference) {
 .salon-intro {
  animation: studio-intro-slide 1050ms cubic-bezier(.2,.7,.25,1) both;
 }

 .studio-awaiting-motion {
  translate: 0 26px;
  scale: .96;
 }

 @keyframes studio-intro-slide {
  from { translate: -28px 0; }
  to { translate: 0 0; }
 }

 @media (min-width: 651px) {
  .salon-photo {
   animation: studio-photo-glide 1350ms cubic-bezier(.2,.7,.25,1) 90ms both;
  }
 }

 @keyframes studio-photo-glide {
  from { translate: 52px 0; scale: .94; }
  to { translate: 0 0; scale: 1; }
 }

 @media (max-width: 650px) {
  .salon-intro {
   animation-name: studio-intro-slide-mobile;
  }

  @keyframes studio-intro-slide-mobile {
   from { translate: -14px 0; }
   to { translate: 0 0; }
  }
 }

 @media (hover: hover) and (pointer: fine) {
  .salon-photo > img,
  .salon-photo .photo-signature {
   transition: scale 650ms ease, translate 650ms ease;
  }

  .salon-photo:hover > img { scale: 1.018; }
  .salon-photo:hover .photo-signature { translate: 0 -9px; }

  .service,
  .gallery-grid > a {
   transition: translate 340ms ease, box-shadow 340ms ease, border-color 340ms ease, background-color 340ms ease;
  }

  .service:hover,
  .service:focus-within,
  .gallery-grid > a:hover,
  .gallery-grid > a:focus-visible {
   translate: 0 -5px;
   box-shadow: 0 9px 22px #6737461a;
  }
 }
}