/**
 * Air Particles Component - Osona 2024
 * Estils responsivos per l'animació de partícules de qualitat de l'aire
 */

/* === BASE CANVAS STYLES === */
.air-particles-canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 20; /* Per sobre del hero-container i logo */
  pointer-events: auto;
  opacity: 0;
  transition: opacity var(--transition-slow, 0.5s ease-out);
}

/* Activar canvas quan està carregat */
.air-particles-canvas.loaded {
  opacity: 1;
}

/* === FALLBACK PER ACCESSIBILITAT === */
.particles-fallback {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

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

/* Mobile (< 768px) */
@media (max-width: 767px) {
  .air-particles-canvas {
    /* Menor qualitat per millorar rendiment */
    image-rendering: pixelated;
    image-rendering: -moz-crisp-edges;
    image-rendering: crisp-edges;
    will-change: transform;
  }
  
  /* Ocultar en orientació landscape si és molt petit */
  @media (orientation: landscape) and (max-height: 400px) {
    .air-particles-canvas {
      opacity: 0.3 !important;
    }
  }
}

/* Tablet (768px - 1023px) */
@media (min-width: 768px) and (max-width: 1023px) {
  .air-particles-canvas {
    image-rendering: auto;
    image-rendering: -webkit-optimize-contrast;
  }
}

/* Desktop (>= 1024px) */
@media (min-width: 1024px) {
  .air-particles-canvas {
    image-rendering: auto;
    image-rendering: smooth;
    image-rendering: high-quality;
  }
}

/* === HIGH DPI DISPLAYS === */
@media (-webkit-min-device-pixel-ratio: 2), 
       (min-resolution: 192dpi), 
       (min-resolution: 2dppx) {
  .air-particles-canvas {
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
  }
}

/* Retina displays de alta qualitat */
@media (-webkit-min-device-pixel-ratio: 3), 
       (min-resolution: 288dpi) {
  .air-particles-canvas {
    image-rendering: -webkit-optimize-contrast;
  }
}

/* === ORIENTATION HANDLING === */
@media (orientation: portrait) {
  .air-particles-canvas {
    /* Optimitzacions específiques per portrait */
  }
}

@media (orientation: landscape) {
  .air-particles-canvas {
    /* Optimitzacions específiques per landscape */
  }
  
  /* En mòbils landscape amb poca altura, reduir impacte visual */
  @media (max-height: 500px) and (max-width: 1023px) {
    .air-particles-canvas {
      opacity: 0.5;
    }
  }
}

/* === PERFORMANCE OPTIMIZATIONS === */

/* Conexions lentes */
@media (prefers-reduced-data: reduce) {
  .air-particles-canvas {
    display: none;
  }
}

/* Dispositius amb bateria baixa */
@media (battery: low) {
  .air-particles-canvas {
    opacity: 0.3;
  }
}

/* === ACCESSIBILITY === */

/* Moviment reduït - ocultar completament */
@media (prefers-reduced-motion: reduce) {
  .air-particles-canvas {
    display: none !important;
  }
  
  .particles-fallback {
    position: static;
    width: auto;
    height: auto;
    left: auto;
    padding: var(--spacing-4, 1rem);
    background: var(--color-background-light, #f8f9fa);
    border-radius: var(--border-radius-base, 0.25rem);
    margin: var(--spacing-4, 1rem) 0;
  }
}

/* Contrast alt */
@media (prefers-contrast: high) {
  .air-particles-canvas {
    filter: contrast(1.5) brightness(0.8);
  }
}

/* Mode fosc del sistema */
@media (prefers-color-scheme: dark) {
  .air-particles-canvas {
    filter: invert(0.1) brightness(0.9);
  }
}

/* === PERFORMANCE STATES === */

/* Quan el sistema detecta rendiment baix */
.air-particles-canvas.low-performance {
  opacity: 0.6;
  filter: blur(0.5px);
}

/* Quan està en mode estalvi */
.air-particles-canvas.battery-saver {
  opacity: 0.4;
  animation-play-state: paused;
}

/* === HOVER INTERACTIONS === */

/* Només en dispositius amb hover precís */
@media (hover: hover) and (pointer: fine) {
  .air-particles-canvas {
    pointer-events: auto;
    cursor: grab; /* Cursor que indica que pots interactuar amb partícules */
    transition: opacity 0.2s ease;
  }
  
  .air-particles-canvas:hover {
    opacity: 0.9; /* Lleugera indicació visual d'interactivitat */
  }
  
  .air-particles-canvas:active {
    cursor: grabbing; /* Cursor quan s'està interactuant */
    opacity: 0.8;
  }
}

/* Touch devices */
@media (hover: none) and (pointer: coarse) {
  .air-particles-canvas {
    pointer-events: auto;
    touch-action: manipulation;
  }
}

/* === LOADING STATES === */

/* Mentre es carrega */
.air-particles-canvas.loading {
  background: linear-gradient(
    45deg,
    transparent 30%,
    rgba(0, 0, 0, 0.01) 50%,
    transparent 70%
  );
  background-size: 200% 200%;
  animation: loading-shimmer 2s ease-in-out infinite;
}

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

/* === DEBUG MODE === */
.debug .air-particles-canvas {
  border: 2px dashed #ff0000;
  background: rgba(255, 0, 0, 0.05);
}

.debug .air-particles-canvas::before {
  content: 'DEBUG: Air Particles Canvas';
  position: absolute;
  top: 10px;
  left: 10px;
  background: #ff0000;
  color: white;
  padding: 4px 8px;
  font-size: 12px;
  font-family: monospace;
  z-index: 1000;
  pointer-events: none;
}

/* === PRINT STYLES === */
@media print {
  .air-particles-canvas {
    display: none !important;
  }
  
  .particles-fallback {
    position: static;
    width: auto;
    height: auto;
    left: auto;
  }
  
  .particles-fallback::after {
    content: ' [Animació de partícules desactivada per impressió]';
    font-style: italic;
    color: #666;
  }
}

/* === VIEWPORT SPECIFIC === */

/* Pantalles molt petites */
@media (max-width: 320px) {
  .air-particles-canvas {
    opacity: 0.7;
  }
}

/* Pantalles molt grans */
@media (min-width: 1920px) {
  .air-particles-canvas {
    /* Potser podem permetre més partícules */
  }
}

/* Pantalles ultrawide */
@media (min-aspect-ratio: 21/9) {
  .air-particles-canvas {
    /* Optimitzacions per pantalles ultrawide */
  }
}

/* === FOCUS MANAGEMENT === */

/* Quan el canvas té focus (per accessibilitat) */
.air-particles-canvas:focus-visible {
  outline: 2px solid var(--color-primary, #007cba);
  outline-offset: -2px;
}

/* === TRANSITION STATES === */

/* Quan canvia d'orientació */
.air-particles-canvas.orientation-changing {
  opacity: 0.5;
  transition: opacity 0.3s ease-out;
}

/* Quan es redimensiona */
.air-particles-canvas.resizing {
  opacity: 0.8;
  transition: opacity 0.2s ease-out;
}

/* === ERROR STATES === */

/* Quan hi ha errors de canvas */
.air-particles-canvas.error {
  display: none;
}

/* Fallback per errors */
.air-particles-error {
  position: fixed;
  bottom: 20px;
  right: 20px;
  background: rgba(255, 0, 0, 0.8);
  color: white;
  padding: 8px 12px;
  border-radius: 4px;
  font-size: 12px;
  z-index: 9999;
  pointer-events: none;
}

/* === CUSTOM PROPERTIES SUPPORT === */
.air-particles-canvas {
  --particles-opacity: 1;
  --particles-scale: 1;
  
  opacity: var(--particles-opacity);
  transform: scale(var(--particles-scale));
}

/* === DARK MODE INTEGRATION === */
[data-theme="dark"] .air-particles-canvas {
  filter: invert(0.05) brightness(0.95);
}

/* === REDUCED DATA MODE === */
.reduced-data .air-particles-canvas {
  display: none;
}

/* Missatge informatiu per reduced data */
.reduced-data .particles-info {
  display: block;
  padding: var(--spacing-4, 1rem);
  background: var(--color-background-light, #f8f9fa);
  border-radius: var(--border-radius-base, 0.25rem);
  text-align: center;
  font-size: 0.9rem;
  color: var(--color-text-light, #666);
}

.particles-info {
  display: none;
}