/**
 * Planet Cell - Estilos Customizados
 * Identidade visual: Vermelho #CC0000, Preto, Branco
 */

/* === Variáveis CSS === */
:root {
  --primary-color: #CC0000;
  --primary-dark: #990000;
  --primary-light: #FF1A1A;
  --secondary-color: #212529;
  --light-bg: #f8f9fa;
  --white: #ffffff;
  --gray-100: #f8f9fa;
  --gray-200: #e9ecef;
  --gray-500: #6c757d;
  --gray-800: #343a40;
}

/* === Base === */
body {
  font-family: 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}

/* === Animações Customizadas === */
@keyframes floatImage {

  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-15px);
  }
}

.slider-image {
  animation: floatImage 4s ease-in-out infinite;
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.animate-fade-in {
  animation: fadeInUp 0.6s ease forwards;
}

/* Utilitários Legados (Se necessário) */
.text-primary {
  color: var(--primary-color) !important;
}

.bg-primary {
  background-color: var(--primary-color) !important;
}


.bg-primary-gradient {
  background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-dark) 100%);
}

/* === Efeito de Destaque (Focus Effect) === */
.product-grid:has(.product-card:hover) .product-card {
  transform: scale(0.96);
  opacity: 0.6;
  filter: blur(1px) grayscale(20%);
}

.product-grid .product-card:hover {
  transform: scale(1.05) !important;
  opacity: 1 !important;
  filter: blur(0) grayscale(0%) !important;
  z-index: 10;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2) !important;
}