/* Core Web Vitals Optimization */

/* Largest Contentful Paint (LCP) Optimization */
img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* Modern browsers support these properties */
@supports (loading: lazy) {
  img {
    loading: lazy;
  }
}

@supports (decoding: async) {
  img {
    decoding: async;
  }
}

/* Preload critical images */
.hero-image {
  aspect-ratio: 16/9;
  background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
}

/* First Input Delay (FID) Optimization */
button, a, input, select, textarea {
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

/* Cumulative Layout Shift (CLS) Optimization */
* {
  box-sizing: border-box;
}

/* Reserve space for dynamic content */
.tool-container,
.hero-content,
.article-content {
  contain: layout;
}

/* Prevent layout shifts for images */
.image-placeholder {
  aspect-ratio: 16/9;
  background: #f1f5f9;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 200px;
}

/* Font display optimization */
@font-face {
  font-family: 'Outfit';
  font-display: swap;
  src: url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800&display=swap');
}

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

/* Performance optimizations */
.will-change-transform {
  will-change: transform;
}

.gpu-accelerated {
  transform: translateZ(0);
  backface-visibility: hidden;
}

/* Reduce paint complexity */
.complex-animation {
  contain: paint;
}

/* Optimize for mobile */
@media (max-width: 768px) {
  .container {
    padding: 0 1rem;
  }
  
  .hero-stats {
    gap: 1rem;
  }
  
  .features-grid,
  .tools-grid {
    grid-template-columns: 1fr;
  }
}

/* Loading states */
.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; }
}

/* Smooth scrolling with performance */
html {
  scroll-behavior: smooth;
  scroll-padding-top: 80px;
}

/* Reduce motion for users who prefer it */
@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;
  }
}

/* Critical rendering path optimization */
.critical-css {
  contain: layout style paint;
}

.non-critical {
  contain: layout;
}

/* Network-aware loading */
@media (prefers-reduced-data: reduce) {
  img,
  video,
  iframe {
    display: none;
  }
  
  .hero-image,
  .tool-image {
    background: #f8fafc;
    min-height: 200px;
  }
}

/* Memory optimization */
.virtual-scroll {
  contain: strict;
}

/* Prevent content reflow */
.preserve-space {
  min-height: 1px;
}

/* Optimize text rendering */
body {
  text-rendering: optimizeSpeed;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Button optimization for FID */
.btn {
  contain: layout style;
  transform: translateZ(0);
  backface-visibility: hidden;
}

/* Form optimization */
input, textarea, select {
  contain: layout style;
  font-family: inherit;
}

/* Table optimization */
table {
  contain: layout;
}

/* Code block optimization */
pre, code {
  contain: layout style paint;
  font-family: 'JetBrains Mono', monospace;
}

/* Animation performance */
.animate-on-scroll {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.animate-on-scroll.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Hero section optimization */
.hero {
  contain: layout style paint;
  min-height: 60vh;
}

/* Tool interface optimization */
.tool-interface {
  contain: layout style;
}

/* Results section optimization */
.tool-results {
  contain: layout style paint;
}

/* Notification optimization */
.notification {
  contain: layout style paint;
  position: fixed;
  z-index: 1000;
  transform: translateZ(0);
}