/* ===================================
   Performance Optimizations
   =================================== */

/* CSS Containment for Better Rendering */
.categories-bento-grid {
  contain: layout style paint;
}

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

.filter-pills-wrapper {
  contain: layout style;
}

/* Lazy Loading Preparation */
.lazy-load {
  opacity: 0;
  transition: opacity 0.3s ease;
}

.lazy-load.loaded {
  opacity: 1;
}

.lazy-load.loading {
  background: var(--resources-bg-warm-secondary);
  position: relative;
  overflow: hidden;
}

.lazy-load.loading::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.4) 50%,
    transparent 100%
  );
  animation: shimmer 2s infinite;
}

/* Intersection Observer Classes */
.in-viewport {
  animation: fadeInUp 0.6s ease-out forwards;
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Optimized Animations */
@media (prefers-reduced-motion: no-preference) {
  .category-card {
    transform: translateZ(0); /* Hardware acceleration */
    backface-visibility: hidden;
  }
}

/* Image Optimization Classes */
.responsive-image {
  width: 100%;
  height: auto;
  object-fit: cover;
}

.responsive-image::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--resources-bg-warm-secondary);
  z-index: -1;
}

/* Critical CSS Hints */
.above-the-fold {
  contain: layout style paint;
}

.below-the-fold {
  content-visibility: auto;
  contain-intrinsic-size: 0 500px;
}

/* Font Loading: Fraunces & DM Sans are loaded via <link> in HTML.
   Do NOT use @font-face with Google Fonts CSS URLs - src must point to
   actual font files (.woff2), not stylesheets. */

/* Optimized Scroll Performance */
.smooth-scroll {
  scroll-behavior: smooth;
  scroll-padding-top: 100px;
}

/* Reduced Paint Operations */
.optimized-hover {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.optimized-hover:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
}

/* Memory Management */
.cleanup-on-unload {
  will-change: auto;
}

/* Performance Monitoring */
.performance-indicator {
  position: fixed;
  top: 10px;
  right: 10px;
  background: var(--resources-coral);
  color: white;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 12px;
  font-family: monospace;
  z-index: 9999;
  opacity: 0.8;
}

/* Network-Aware Loading */
.slow-network .lazy-load {
  animation: none;
  opacity: 1;
}

.slow-network .loading-shimmer::before {
  animation: none;
}

/* Battery-Aware Animations */
@media (prefers-reduced-motion: reduce), (prefers-reduced-data: reduce) {
  .category-card,
  .filter-pill,
  .floating-orb,
  .morphing-blob {
    animation: none;
    transition: none;
  }
  
  .loading-shimmer::before {
    animation: none;
  }
}

/* Optimized Background Effects */
.performance-bg {
  background: var(--resources-bg-warm);
  background-image: none;
}

@media (min-width: 768px) and (prefers-reduced-motion: no-preference) {
  .performance-bg {
    background-image: 
      radial-gradient(circle at 20% 20%, var(--resources-coral) 0%, transparent 50%),
      radial-gradient(circle at 80% 80%, var(--resources-amber) 0%, transparent 50%),
      radial-gradient(circle at 40% 60%, var(--resources-mint) 0%, transparent 50%);
    background-size: 600px 600px, 500px 500px, 400px 400px;
    background-position: -100px -100px, 100px 100px, 0px 0px;
    background-attachment: fixed;
    opacity: 0.05;
  }
}

/* Efficient Grid Rendering */
.optimized-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  gap: var(--youth-spacing-lg);
  contain: layout;
}

/* Smart Image Loading */
.smart-image {
  background: var(--resources-bg-warm-secondary);
  position: relative;
  overflow: hidden;
}

.smart-image img {
  opacity: 0;
  transition: opacity 0.3s ease;
}

.smart-image.loaded img {
  opacity: 1;
}

.smart-image.loading::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    var(--resources-bg-warm-secondary) 25%,
    var(--resources-coral-light) 50%,
    var(--resources-bg-warm-secondary) 75%
  );
  background-size: 200% 100%;
  animation: skeletonLoading 1.5s infinite;
}

/* Optimized Filter Performance */
.filter-pills-wrapper {
  transform: translateZ(0);
  backface-visibility: hidden;
}

.filter-pill {
  will-change: transform, background-color;
}

/* Efficient State Management */
.performance-optimized {
  contain: strict;
}

/* Resource Hints */
.preload-critical {
  display: none;
}

.preload-important {
  display: none;
}

/* Memory-Efficient Animations */
.memory-friendly {
  animation: memoryFriendlyFade 0.3s ease;
}

@keyframes memoryFriendlyFade {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* Optimized Transitions */
.fast-transition {
  transition: all 0.15s ease;
}

.medium-transition {
  transition: all 0.3s ease;
}

.slow-transition {
  transition: all 0.6s ease;
}

/* Performance Debugging */
.debug-performance * {
  outline: 1px solid rgba(255, 0, 0, 0.1);
}

.debug-performance .category-card {
  background: rgba(255, 255, 0, 0.1);
}

.debug-performance .filter-pill {
  background: rgba(0, 255, 0, 0.1);
}

/* Responsive Performance */
@media (max-width: 768px) {
  .category-card {
    will-change: auto;
  }
  
  .floating-orb,
  .morphing-blob {
    display: none;
  }
  
  .performance-bg {
    background-image: none;
  }
}

/* High DPI Optimization */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  .category-card {
    border-width: 0.5px;
  }
  
  .filter-pill {
    border-width: 0.5px;
  }
}

/* CPU-Aware Rendering */
@media (prefers-reduced-motion: reduce) {
  .category-card,
  .filter-pill,
  .btn-browse-all {
    will-change: auto;
  }
}

/* Network-Aware Features */
@media (prefers-reduced-data: reduce) {
  .loading-shimmer::before,
  .skeleton,
  .performance-bg {
    display: none;
  }
  
  .category-card {
    background: var(--resources-bg-warm);
  }
}

/* Efficient Scrolling */
.scroll-snap {
  scroll-snap-type: y mandatory;
}

.scroll-snap > * {
  scroll-snap-align: start;
}

/* Optimized Focus Management */
.focus-optimized {
  outline: none;
}

.focus-optimized:focus-visible {
  outline: 2px solid var(--resources-coral);
  outline-offset: 2px;
}