/**
 * Performance Optimization CSS
 * Smooth image loading, reduced motion, and optimizations
 */

/* ============================================
   IMAGE LAZY LOADING TRANSITIONS
   ============================================ */
img {
  opacity: 1;
  transition: opacity 0.3s ease-in-out;
}

img[data-src],
img:not(.loaded):not([src*="maps.google"]):not([src*="googleapis"]):not(.gm-style img) {
  opacity: 0;
}

/* Ensure Google Maps tiles are always visible */
.gm-style img,
#map img {
  opacity: 1 !important;
}

img.loaded {
  opacity: 1;
}

/* Placeholder blur effect for images */
.img-placeholder {
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
}

@keyframes shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

/* ============================================
   REDUCE MOTION FOR ACCESSIBILITY
   ============================================ */
@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;
  }
}

.reduce-motion *,
.reduce-motion *::before,
.reduce-motion *::after {
  animation-duration: 0.01ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: 0.01ms !important;
}

/* ============================================
   FONT LOADING OPTIMIZATION
   ============================================ */
html:not(.fonts-loaded) body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
}

html.fonts-loaded body {
  font-family: 'Open Sans', sans-serif;
}

/* ============================================
   CONTENT VISIBILITY FOR OFF-SCREEN CONTENT
   ============================================ */
.lazy-section {
  content-visibility: auto;
  contain-intrinsic-size: 0 500px;
}

/* Footer - usually off-screen */
footer {
  content-visibility: auto;
  contain-intrinsic-size: 0 400px;
}

/* ============================================
   GPU ACCELERATION FOR ANIMATIONS
   ============================================ */
.fade-in,
.slide-up,
.slide-down,
.scale-in,
[data-aos] {
  will-change: transform, opacity;
}

/* Remove will-change after animation */
.fade-in.animated,
.slide-up.animated,
.slide-down.animated,
.scale-in.animated,
[data-aos].aos-animate {
  will-change: auto;
}

/* ============================================
   OPTIMIZE SCROLL PERFORMANCE
   ============================================ */
.scroll-container {
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

/* ============================================
   CRITICAL CSS - Above the fold
   ============================================ */
.hero-section,
.header,
#header {
  contain: layout style;
}

/* ============================================
   OPTIMIZE BACKGROUND IMAGES
   ============================================ */
[data-bg] {
  background-color: #f5f5f5;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* ============================================
   PRELOADER OPTIMIZATION
   ============================================ */
#preloader {
  contain: strict;
}

/* Hide preloader smoothly */
#preloader.fade-out {
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

/* ============================================
   OPTIMIZE SWIPER/SLIDER PERFORMANCE
   ============================================ */
.swiper-slide {
  backface-visibility: hidden;
  transform: translateZ(0);
}

.swiper-wrapper {
  transform-style: preserve-3d;
}

/* ============================================
   LOADING STATES
   ============================================ */
.skeleton {
  background: linear-gradient(90deg, #f0f0f0 25%, #e8e8e8 50%, #f0f0f0 75%);
  background-size: 400% 100%;
  animation: skeleton-loading 1.4s ease infinite;
}

@keyframes skeleton-loading {
  0% { background-position: 100% 50%; }
  100% { background-position: 0 50%; }
}

/* ============================================
   INTERSECTION OBSERVER ANIMATIONS
   ============================================ */
.observe-fade {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.observe-fade.in-view {
  opacity: 1;
  transform: translateY(0);
}

/* ============================================
   PRINT STYLES - Remove unnecessary elements
   ============================================ */
@media print {
  .header,
  .footer,
  .scroll-top,
  #preloader,
  .mobile-nav-toggle,
  video,
  iframe {
    display: none !important;
  }

  * {
    background: transparent !important;
    color: #000 !important;
    box-shadow: none !important;
    text-shadow: none !important;
  }
}