/* Performance optimizations for low-end devices */
:root {
  --animation-duration: 0.3s;
  --transition-duration: 0.2s;
}

/* Low-end device optimizations */
.low-end-device {
  /* Reduce animation complexity */
  --animation-duration: 0.2s;
  --transition-duration: 0.15s;
}

.low-end-device * {
  /* Optimize rendering */
  will-change: auto !important;
  transform: translateZ(0);
}

.low-end-device img {
  /* Optimize image rendering */
  image-rendering: optimizeSpeed;
  image-rendering: -webkit-optimize-contrast;
}

.low-end-device video {
  /* Reduce video quality on low-end devices */
  object-fit: cover;
  transform: translateZ(0);
}

/* Reduce motion for users who prefer it */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* Optimize for slow connections */
@media (prefers-reduced-data: reduce) {
  /* Hide non-essential images */
  .decorative-image {
    display: none;
  }
  
  /* Reduce background images */
  .hero-background {
    background-image: none !important;
    background-color: var(--primary-color);
  }
}

/* Critical loading states */
.loading-skeleton {
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: loading 1.5s infinite;
}

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

/* Optimize font loading */
.font-loading {
  font-display: swap;
  font-family: system-ui, -apple-system, sans-serif;
}

/* Lazy loading optimization */
img[loading="lazy"] {
  opacity: 0;
  transition: opacity 0.3s;
}

img[loading="lazy"].loaded {
  opacity: 1;
}

/* PWA mode optimizations */
.pwa-mode {
  /* Remove unnecessary margins for app-like experience */
  padding-top: 0 !important;
}

.pwa-mode .navbar {
  /* Optimize navbar for PWA */
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

/* Memory optimization */
.low-end-device .complex-animation {
  /* Simplify complex animations */
  animation: simple-fade var(--animation-duration) ease-in-out;
}

@keyframes simple-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* Network-aware optimizations */
@media (max-width: 768px) and (max-resolution: 150dpi) {
  /* Optimize for low-resolution mobile devices */
  .high-res-image {
    display: none;
  }
  
  .low-res-fallback {
    display: block;
  }
}