/**
 * Performance Overrides CSS
 * 
 * Otimizações CSS aplicadas condicionalmente baseado no tier de performance.
 * Aplique a classe data-performance-tier no body/html.
 */

/* ========================================
   LOW-SPEC OPTIMIZATIONS
   ======================================== */

/* Remove backdrop-blur em low-spec (muito custoso) */
[data-performance-tier="low"] .backdrop-blur-sm,
[data-performance-tier="low"] .backdrop-blur,
[data-performance-tier="low"] .backdrop-blur-md,
[data-performance-tier="low"] .backdrop-blur-lg,
[data-performance-tier="low"] .backdrop-blur-xl {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  background-color: rgba(0, 0, 0, 0.85) !important;
}

/* Simplifica shadows em low-spec */
[data-performance-tier="low"] .shadow-sm {
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) !important;
}

[data-performance-tier="low"] .shadow,
[data-performance-tier="low"] .shadow-md {
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
}

[data-performance-tier="low"] .shadow-lg,
[data-performance-tier="low"] .shadow-xl,
[data-performance-tier="low"] .shadow-2xl {
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15) !important;
}

/* Remove gradientes complexos em low-spec */
[data-performance-tier="low"] .bg-gradient-to-r,
[data-performance-tier="low"] .bg-gradient-to-l,
[data-performance-tier="low"] .bg-gradient-to-t,
[data-performance-tier="low"] .bg-gradient-to-b,
[data-performance-tier="low"] .bg-gradient-to-br,
[data-performance-tier="low"] .bg-gradient-to-bl {
  background-image: none !important;
}

/* Desabilita animações complexas em low-spec */
[data-performance-tier="low"] .animate-pulse {
  animation: none !important;
  opacity: 0.7 !important;
}

[data-performance-tier="low"] .animate-spin {
  animation: spin 1.5s linear infinite !important; /* Mais lento */
}

[data-performance-tier="low"] .animate-bounce {
  animation: none !important;
}

/* Remove blur de skeleton em low-spec */
[data-performance-tier="low"] .animate-pulse {
  animation: none !important;
  background-color: rgb(229, 231, 235) !important;
}

/* ========================================
   MID-SPEC OPTIMIZATIONS
   ======================================== */

/* Reduz intensidade de blur em mid-spec */
[data-performance-tier="mid"] .backdrop-blur-lg,
[data-performance-tier="mid"] .backdrop-blur-xl {
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
}

/* ========================================
   HIGH-SPEC OPTIMIZATIONS
   ======================================== */

/* GPU Acceleration para elementos animados (apenas high-spec) */
[data-performance-tier="high"] .hover\:scale-105:hover,
[data-performance-tier="high"] .hover\:scale-110:hover,
[data-performance-tier="high"] .active\:scale-95:active,
[data-performance-tier="high"] .group-hover\:scale-110 {
  transform: translateZ(0);
  will-change: transform;
}

/* Will-change apenas durante hover em high-spec */
[data-performance-tier="high"] .transition-transform:hover,
[data-performance-tier="high"] .transition-all:hover {
  will-change: transform, opacity;
}

/* Remove will-change após animação */
[data-performance-tier="high"] .transition-transform,
[data-performance-tier="high"] .transition-all {
  will-change: auto;
}

/* ========================================
   GLOBAL OPTIMIZATIONS (ALL TIERS)
   ======================================== */

/* Otimiza scroll performance */
.custom-scrollbar {
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
}

/* Hide scrollbar utility */
.no-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.no-scrollbar::-webkit-scrollbar {
  display: none;
}

/* Smooth Carousel Optimizations */
.smooth-carousel {
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  scroll-behavior: auto; /* Auto para permitir controle JS */
  touch-action: pan-x;
  will-change: scroll-position;
}

/* Otimiza cards dentro do carrossel */
.smooth-carousel > * {
  flex-shrink: 0;
  transform: translateZ(0);
  backface-visibility: hidden;
}

/* Touch optimizations para mobile */
@media (hover: none) and (pointer: coarse) {
  .smooth-carousel {
    scroll-snap-type: x proximity;
  }
  
  .smooth-carousel > * {
    scroll-snap-align: start;
  }
}

/* Força GPU acceleration apenas em elementos que realmente animam */
.gpu-accelerated {
  transform: translateZ(0);
  backface-visibility: hidden;
  perspective: 1000px;
}

/* Otimiza rendering de imagens */
img {
  image-rendering: -webkit-optimize-contrast;
  image-rendering: crisp-edges;
}

/* Previne layout shift durante carregamento */
.aspect-ratio-box {
  position: relative;
  width: 100%;
}

.aspect-ratio-box::before {
  content: '';
  display: block;
  padding-bottom: var(--aspect-ratio, 100%);
}

.aspect-ratio-box > * {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* ========================================
   ANIMATION PERFORMANCE
   ======================================== */

/* Otimiza animações para usar apenas transform e opacity */
@keyframes optimized-fade-in {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes optimized-slide-in {
  from {
    transform: translateX(-20px);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

/* Shimmer animation for install prompt and loaders */
@keyframes shimmer {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(100%);
  }
}

/* Reduz motion para usuários com preferência */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ========================================
   MOBILE OPTIMIZATIONS
   ======================================== */

@media (max-width: 768px) {
  /* Reduz complexidade de shadows em mobile */
  .shadow-lg,
  .shadow-xl,
  .shadow-2xl {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
  }

  /* Simplifica blur em mobile */
  .backdrop-blur-lg,
  .backdrop-blur-xl {
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
  }
}

/* ========================================
   PRINT OPTIMIZATIONS
   ======================================== */

@media print {
  .backdrop-blur-sm,
  .backdrop-blur,
  .backdrop-blur-md,
  .backdrop-blur-lg,
  .backdrop-blur-xl {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  .shadow-sm,
  .shadow,
  .shadow-md,
  .shadow-lg,
  .shadow-xl,
  .shadow-2xl {
    box-shadow: none !important;
  }
}