/* Motion is an enhancement; these rules never hide content or change layout. */
.studio-motion :is(.button, .bs-cta, .bs-arrow, .photo-tabs button, .photo-enlarge) {
  transition-duration:.26s;
  transition-timing-function:cubic-bezier(.2,.7,.2,1);
}
.studio-motion :is(.button, .bs-cta, .bs-detail-link, .directions) > [aria-hidden="true"],
.studio-motion .bs-arrow svg,
.studio-motion .header-brands i,
.studio-motion .mobile-brands i,
.studio-motion .hero-visual figcaption a > span {
  display:inline-block;
  transition:transform .3s cubic-bezier(.2,.7,.2,1);
}
.studio-motion .bs-tab-image {
  transition:transform .4s cubic-bezier(.2,.7,.2,1);
}
.studio-motion .photo-tabs button {
  transition:background .25s, color .25s, border-color .25s;
}
.studio-motion .photo-enlarge {
  transition:transform .25s, background .25s;
}
.studio-motion .estimate {
  border-radius:5px;
}
.featured-photo img.studio-photo-transition {
  position:absolute;
  inset:0;
  margin:auto;
  width:100%;
  height:100%;
  max-height:470px;
  object-fit:contain;
  pointer-events:none;
  z-index:1;
}
.featured-photo .photo-enlarge {z-index:2}

@media (hover:hover) and (pointer:fine) {
  .studio-motion :is(.button, .bs-cta-primary):hover > [aria-hidden="true"] {transform:translateX(4px)}
  .studio-motion .hero-aside .button:hover > [aria-hidden="true"] {transform:translateY(3px)}
  .studio-motion :is(.bs-cta-secondary, .bs-detail-link, .directions):hover > [aria-hidden="true"],
  .studio-motion .header-brands a:hover i {transform:translate(2px,-2px)}
  .studio-motion .bs-arrow[data-bs-step="-1"]:hover svg {transform:translateX(-3px)}
  .studio-motion .bs-arrow[data-bs-step="1"]:hover svg {transform:translateX(3px)}
  .studio-motion .bs-model-tab:hover .bs-tab-image {transform:translateY(-3px)}
  .studio-motion .featured-photo:hover .photo-enlarge {transform:scale(1.08)}
  .studio-motion .hero-visual figcaption a:hover > span {transform:translateY(3px)}
}
.studio-motion :is(.button, .bs-cta-primary):focus-visible > [aria-hidden="true"] {transform:translateX(3px)}
.studio-motion :is(.bs-cta-secondary, .bs-detail-link, .directions):focus-visible > [aria-hidden="true"] {transform:translate(2px,-2px)}
.studio-motion .hero-aside .button:focus-visible > [aria-hidden="true"] {transform:translateY(3px)}
.studio-motion :is(.button, .bs-cta-primary, .bs-arrow):active {transform:translateY(1px)}

@media (prefers-reduced-motion:reduce), (prefers-reduced-data:reduce) {
  .studio-motion *, .studio-motion *::before, .studio-motion *::after {
    transition:none!important;
    animation:none!important;
  }
  .studio-motion :is(.button, .bs-cta, .bs-arrow, .bs-tab-image, .photo-enlarge),
  .studio-motion :is(.button, .bs-cta, .bs-detail-link, .directions) > [aria-hidden="true"],
  .studio-motion .bs-arrow svg {transform:none!important}
}