/* Performance Optimizations */
/* GPU compositing & animation improvements for Crafto theme */

/* ============================================================
   1. Promote key animated elements to compositor layers.
      NOTE: will-change is expensive — only apply to elements
      that are actively animating. The theme CSS already declares
      will-change on many selectors; avoid duplicating those.
   ============================================================ */

/* Crafto anime.js system — only during animation */
[data-anime]:not(.anime-complete),
[data-fancy-text]:not(.anime-complete) {
  will-change: transform, opacity;
}
[data-anime].anime-complete,
[data-fancy-text].anime-complete {
  will-change: auto;
}

/* Swiper slides — theme already handles via .swiper-slide transition */

/* Crafto infinite animations — theme already sets will-change */

/* Video icon sonar pulse — theme already animates */

/* Marquee / scroll animations — theme already sets will-change */

/* Map marker — minimal, keep */
.arrow_box span {
  will-change: transform, opacity;
}

/* Shadow animation — theme already sets will-change */

/* Bootstrap spinners — only when visible */
.spinner-border,
.spinner-grow {
  will-change: transform;
}

/* Swiper preloader — theme already handles */

/* Modal / offcanvas — theme already handles */

/* Atropos 3D tilt — theme already handles */

/* Progress bars */
.progress-bar {
  will-change: width;
  contain: layout style;
}

/* Button hover — theme already handles */

/* Crafto show/hide — theme already handles */

/* ============================================================
   2. Respect reduced motion preferences
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ============================================================
   3. Layout containment & image loading
   ============================================================ */
img[loading="lazy"] {
  min-height: 1px;
  background-color: rgba(0, 0, 0, 0.05);
}

/* Contain layout utility classes */
.contain-layout {
  contain: layout;
}
.contain-paint {
  contain: paint;
}
.contain-strict {
  contain: strict;
}