/* SEO Performance Optimizations */

/* Critical above-the-fold optimizations */
.container { 
  max-width: 1200px; 
  margin: 0 auto; 
  padding: 0 20px; 
}

/* Performance-focused loading states */
.lazy-load {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.lazy-load.loaded {
  opacity: 1;
  transform: translateY(0);
}

/* Optimized font loading */
@font-display swap;

/* Reduce layout shift with aspect ratios */
.aspect-ratio-16-9 {
  aspect-ratio: 16 / 9;
}

.aspect-ratio-1-1 {
  aspect-ratio: 1 / 1;
}

/* Skip to main content for accessibility */
.skip-link {
  position: absolute;
  top: -40px;
  left: 6px;
  background: #6366f1;
  color: white;
  padding: 8px 12px;
  text-decoration: none;
  border-radius: 4px;
  z-index: 100000;
  font-weight: 500;
  font-size: 14px;
  opacity: 0;
  transform: translateY(-10px);
  transition: all 0.3s ease;
}

.skip-link:focus {
  top: 6px;
  opacity: 1;
  transform: translateY(0);
}

/* Optimized animations for performance */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* Focus management for keyboard navigation */
.focus-visible {
  outline: 2px solid var(--primary-color);
  outline-offset: 2px;
}

/* Improved heading hierarchy */
h1 { font-size: 2.5rem; line-height: 1.2; margin-bottom: 1rem; }
h2 { font-size: 2rem; line-height: 1.3; margin-bottom: 0.875rem; }
h3 { font-size: 1.75rem; line-height: 1.4; margin-bottom: 0.75rem; }
h4 { font-size: 1.5rem; line-height: 1.4; margin-bottom: 0.625rem; }
h5 { font-size: 1.25rem; line-height: 1.5; margin-bottom: 0.5rem; }
h6 { font-size: 1rem; line-height: 1.5; margin-bottom: 0.5rem; }

/* Ensure proper contrast ratios */
.high-contrast {
  color: #ffffff;
  background-color: #000000;
}

/* Loading performance indicators */
.performance-indicator {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background: var(--primary-color);
  transform: scaleX(0);
  transform-origin: left;
  z-index: 100000;
  transition: transform 0.3s ease;
}

.performance-indicator.loading {
  animation: loadingProgress 2s ease-in-out infinite;
}

@keyframes loadingProgress {
  0% { transform: scaleX(0); }
  50% { transform: scaleX(0.6); }
  100% { transform: scaleX(1); }
}