.bairro-motion-target {
  --motion-index: 0;
  --motion-distance-current: var(--motion-distance-desktop);
  --motion-clip-distance-current: var(--motion-clip-distance-desktop);
  transition-duration: var(--motion-duration);
  transition-timing-function: var(--motion-ease);
  transition-delay: var(--motion-delay, 0ms);
  transition-property: opacity, transform, clip-path;
  will-change: opacity, transform, clip-path;
}

.bairro-motion-target:not(.is-visible) {
  opacity: 0;
  transform: translate3d(0, var(--motion-distance-current), 0);
}

.bairro-motion-target.is-visible {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

.bairro-motion-target.bairro-motion-clip:not(.is-visible) {
  clip-path: inset(10% 0 10% 0);
  transform: translate3d(0, var(--motion-clip-distance-current), 0) scale(.992);
}

.bairro-motion-target.bairro-motion-clip.is-visible {
  clip-path: inset(0 0 0 0);
  transform: translate3d(0, 0, 0) scale(1);
}

.bairro-motion-target.is-settled { will-change: auto; }

.bairro-motion--hero .hero__frame--base {
  animation: bairro-hero-drift-base var(--motion-hero-drift-duration) var(--motion-ease) infinite alternate;
}

.bairro-motion--hero .hero__frame--overlay {
  animation: hero-crossfade var(--motion-hero-duration) ease-in-out infinite alternate,
    bairro-hero-drift var(--motion-hero-drift-duration) var(--motion-ease) infinite alternate;
}

@keyframes bairro-hero-drift-base {
  from { transform: scale(1); }
  to { transform: scale(var(--motion-hero-scale)); }
}

@keyframes bairro-hero-drift {
  from { transform: scale(var(--motion-hero-scale)); }
  to { transform: scale(1); }
}

.bairro-motion--about.bairro-motion--parallax .about__image img {
  transform: translate3d(0, var(--motion-parallax-y, 0), 0) scale(1.035);
  will-change: transform;
}

.bairro-motion--about.bairro-motion--parallax .about__image { overflow: hidden; }

.bairro-motion--cta.bairro-motion--parallax .cta__background {
  transform: translate3d(0, var(--motion-parallax-y, 0), 0) scale(1.04);
  will-change: transform;
}

.bairro-motion--footer .footer__cat {
  animation: bairro-footer-float 4.8s var(--motion-ease) infinite;
  will-change: transform;
}

@keyframes bairro-footer-float {
  0%, 100% { transform: translate3d(-50%, 0, 0) rotate(-1deg); }
  50% { transform: translate3d(-50%, var(--motion-footer-float-negative), 0) rotate(1deg); }
}

@media (max-width: 800px) {
  .bairro-motion-target {
    --motion-distance-current: var(--motion-distance-mobile);
    --motion-clip-distance-current: var(--motion-clip-distance-mobile);
  }

  .bairro-motion--mobile-off .bairro-motion-target {
    opacity: 1 !important;
    clip-path: none !important;
    transform: none !important;
    transition: none !important;
  }

  .bairro-motion--mobile-off .hero__frame,
  .bairro-motion--mobile-off .footer__cat { animation: none !important; }

  .bairro-motion--mobile-off .about__image img { transform: none !important; }
}

@media (prefers-reduced-motion: reduce) {
  .bairro-motion-target {
    opacity: 1 !important;
    clip-path: none !important;
    transform: none !important;
    transition: none !important;
  }

  .bairro-motion .hero__frame,
  .bairro-motion .footer__cat { animation: none !important; }

  .bairro-motion .about__image img { transform: none !important; }
  .bairro-motion .cta__background { transform: none !important; }
}

@media print {
  .bairro-motion-target {
    opacity: 1 !important;
    clip-path: none !important;
    transform: none !important;
    transition: none !important;
  }

  .bairro-motion .hero__frame,
  .bairro-motion .footer__cat {
    animation: none !important;
  }

  .bairro-motion .about__image img {
    transform: none !important;
  }

  .bairro-motion .cta__background {
    transform: none !important;
  }
}