/* Otimizações adicionais para performance de animações */

/* Reduzir o impacto de animações em dispositivos com preferência por movimento reduzido */
@media (prefers-reduced-motion: reduce) {
  .preloader,
  .circuit-loader,
  .fade-in,
  .highlight-card,
  .particle,
  .typing-effect {
    animation: none !important;
    transition: none !important;
    transform: none !important;
  }
  
  .preloader {
    display: none !important;
  }
}

/* Otimizações para renderização */
.hardware-accelerated {
  transform: translateZ(0);
  backface-visibility: hidden;
  perspective: 1000px;
  will-change: transform, opacity;
}

/* Limitar animações em dispositivos móveis */
@media (max-width: 768px) {
  .particles-container {
    display: none; /* Desativar partículas em dispositivos móveis para melhor performance */
  }
  
  .tech-grid {
    background-size: 30px 30px; /* Grid maior em dispositivos móveis para melhor performance */
  }
  
  .circuit-loader {
    transform: scale(0.8); /* Reduzir tamanho do loader em dispositivos móveis */
  }
}

/* Otimizar animações para dispositivos de baixa potência */
@media (max-width: 480px) {
  .highlight-card::before {
    display: none; /* Remover efeito de brilho em dispositivos muito pequenos */
  }
  
  .fade-in {
    transition: opacity 0.5s ease, transform 0.5s ease; /* Transições mais rápidas em dispositivos pequenos */
  }
}

/* Classes para lazy-loading de animações */
.animation-delay-100 { animation-delay: 0.1s !important; }
.animation-delay-200 { animation-delay: 0.2s !important; }
.animation-delay-300 { animation-delay: 0.3s !important; }
.animation-delay-400 { animation-delay: 0.4s !important; }
.animation-delay-500 { animation-delay: 0.5s !important; }

/* Otimizar animações para diferentes navegadores */
@supports (-webkit-overflow-scrolling: touch) {
  /* Otimizações específicas para iOS */
  .preloader,
  .circuit-loader,
  .fade-in,
  .highlight-card {
    -webkit-transform: translate3d(0, 0, 0);
  }
}

/* Melhorar performance de sombras */
.optimized-shadow {
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
  transition: box-shadow 0.3s ease;
}

.optimized-shadow:hover {
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}