:root { 
  --fade-duration: 300ms; /* Más rápido para menos loading visible */
  --slide-transition-duration: 250ms; /* Transiciones de slide más rápidas */
}

/* FUNDIDO A NEGRO CON MOVIMIENTO HACIA ARRIBA - Carrusel */
#carousel { 
  position: relative; 
  overflow: hidden;
}

#carousel .slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transform: translateY(0px);
  transition: opacity var(--slide-transition-duration) ease, transform var(--slide-transition-duration) ease;
  pointer-events: none;
  will-change: opacity, transform;
}

#carousel .slide.active {
  opacity: 1;
  transform: translateY(0px);
  pointer-events: auto;
}

/* Transición saliente: fundido a negro + movimiento hacia arriba */
#carousel .slide.exiting {
  opacity: 0;
  transform: translateY(-20px);
  filter: brightness(0.3); /* fundido a negro */
  transition: opacity var(--slide-transition-duration) ease, 
              transform var(--slide-transition-duration) ease, 
              filter var(--slide-transition-duration) ease;
}

/* Transición entrante: desde abajo con fundido desde negro */
#carousel .slide.entering {
  opacity: 0;
  transform: translateY(20px);
  filter: brightness(0.3);
  animation: slideEnterFromBlack var(--slide-transition-duration) ease forwards;
}

@keyframes slideEnterFromBlack {
  0% {
    opacity: 0;
    transform: translateY(20px);
    filter: brightness(0.3);
  }
  100% {
    opacity: 1;
    transform: translateY(0px);
    filter: brightness(1);
  }
}

/* TRANSICIONES DE CAMBIO DE IDIOMA - Fundido a negro con movimiento */
.language-transition {
  transition: opacity var(--fade-duration) ease, 
              transform var(--fade-duration) ease, 
              filter var(--fade-duration) ease;
  will-change: opacity, transform, filter;
}

.language-transition.changing {
  opacity: 0.3;
  transform: translateY(-10px);
  filter: brightness(0.4);
}

/* TRANSICIONES PARA DATOS DINÁMICOS - Fundido a negro con movimiento */
.data-content {
  transition: opacity var(--fade-duration) ease, 
              transform var(--fade-duration) ease, 
              filter var(--fade-duration) ease;
  will-change: opacity, transform, filter;
}

.data-content.updating {
  opacity: 0.2;
  transform: translateY(-8px);
  filter: brightness(0.3);
}

/* Aplicar transiciones a elementos de texto que cambian */
.parking-name, .parking-spaces, .weather-info, .ica-data, .time-display {
  transition: opacity var(--fade-duration) ease, 
              transform var(--fade-duration) ease, 
              filter var(--fade-duration) ease;
  will-change: opacity, transform, filter;
}

/* Transiciones para imágenes dinámicas */
img[data-img], img[data-img-es], img[data-img-eu] {
  opacity: 1;
  transform: translateY(0px);
  filter: brightness(1);
  transition: opacity var(--fade-duration) ease, 
              transform var(--fade-duration) ease, 
              filter var(--fade-duration) ease;
  will-change: opacity, transform, filter;
}

img[data-img].changing, 
img[data-img-es].changing, 
img[data-img-eu].changing {
  opacity: 0.2;
  transform: translateY(-12px);
  filter: brightness(0.3);
}

/* Animación suave para elementos que entran */
@keyframes contentFadeIn {
  0% {
    opacity: 0.3;
    transform: translateY(15px);
    filter: brightness(0.4);
  }
  100% {
    opacity: 1;
    transform: translateY(0px);
    filter: brightness(1);
  }
}

.content-entering {
  animation: contentFadeIn var(--fade-duration) ease forwards;
}

/* Respeta la preferencia del usuario */
@media (prefers-reduced-motion: reduce) {
  #carousel .slide,
  .language-transition,
  .data-content,
  .parking-name, .parking-spaces, .weather-info, .ica-data, .time-display,
  img[data-img], img[data-img-es], img[data-img-eu] { 
    transition: none; 
    animation: none;
    transform: none;
    filter: none;
  }
}