.hero {
  will-change: transform;
  contain: layout style paint;
}

.header {
  will-change: transform;
  contain: layout style paint;
}


@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}


.gpu-accelerated {
  transform: translateZ(0);
  backface-visibility: hidden;
  perspective: 1000px;
}


img {
  image-rendering: -webkit-optimize-contrast;
  image-rendering: crisp-edges;
}


@font-face {
  font-display: swap;
}


.smooth-scroll {
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
}


.optimize-rendering {
  contain: layout style paint;
  content-visibility: auto;
}