/* Ajustes finos para performance e interatividade */
/* Melhora transições e remove gargalos de render */

/* Smooth scroll mais otimizado */
html {
  scroll-behavior: smooth;
  scroll-padding-top: 1px;
  scroll-padding-bottom: 1px;
}

/* Prevenir layout shift durante animações */
.will-change-transform {
  will-change: transform;
}

/* Melhora performance de animações */
.gpu-accelerated {
  transform: translateZ(0);
  backface-visibility: hidden;
}

/* Loading states mais fluidos */
.loading-fade-in {
  opacity: 0;
  animation: fadeIn 0.4s ease-out forwards;
}

@keyframes fadeIn {
  to { opacity: 1; }
}

/* Hover states mais responsivos */
.hover-lift:hover {
  transform: translateY(-2px);
  transition: all 0.2s ease;
}

/* Melhora performance de imagens */
img {
  image-rendering: -webkit-optimize-contrast;
  image-rendering: optimize-contrast;
}

/* Focus states melhorados */
.focus-visible:focus {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

/* Reduzir repaints */
.reduced-motion {
  contain: layout style paint;
}

/* Scroll indicators suaves */
.scroll-smooth {
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

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

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

/* Interacções otimizadas */
.pointer-events-auto {
  pointer-events: auto;
}

/* Transições mais performáticas */
.transition-fast {
  transition: all 0.15s ease;
}

.transition-smooth {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Performance para dispositivos móveis */
@media (max-width: 768px) {
  .mobile-optimized {
    will-change: transform;
    backface-visibility: hidden;
  }
  
  img {
    transform: translateZ(0);
    backface-hidden;
  }
}

/* Prevenir jank */
.no-jank {
  contain: layout;
}

/* Componentes de imagem otimizados */
.image-wrapper {
  position: relative;
  overflow: hidden;
}

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

/* Estados de loading */
.loading-state {
  opacity: 0.7;
  transition: opacity 0.2s ease;
}

.loaded-state {
  opacity: 1;
}

/* Animações suaves */
.animate-in {
  animation: slideInUp 0.5s ease-out;
}

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

/* Performance tips */
.preload-critical {
  contain: content;
}

.lazy-load {
  content-visibility: auto;
}

/* Remove layout shift */
.preserve-space {
  min-height: 100vh;
}