/* ── Shared animation optimizations for all templates ── */

/* GPU-accelerate common animated elements */
[class*="-reveal"],
[class*="-animate"],
[class*="-hero"],
[class*="-svc"]:hover,
[class*="-card"]:hover,
[class*="-pkg"]:hover,
[class*="-res"]:hover,
[class*="-test-card"]:hover,
[class*="-rate"]:hover,
[class*="-btn"],
[class*="-back-to-top"] {
  will-change: transform, opacity;
}

/* Page enter animation — only for main content, not header/footer */
main {
  animation: pageEnter .3s ease-out;
}
@keyframes pageEnter {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Optimize scroll-triggered animations */
[class*="-reveal"].visible,
[class*="-animate"].visible,
[class*="-reveal"].ec-visible,
.reveal.visible {
  will-change: auto;
}

/* Smooth image loading */
img {
  transition: opacity .3s ease;
}
img[loading="lazy"] {
  opacity: 0;
}
img[loading="lazy"].loaded,
img[loading="lazy"][complete] {
  opacity: 1;
}

/* Reduce motion preference */
@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;
  }
  body { animation: none !important; }
  img[loading="lazy"] { opacity: 1; }
}