/* Estado inicial para slide-up */
.slide-up:not(.editMode .slide-up) {
  opacity: 0;
  transform: translateY(20%);
  transition-property: opacity, transform;
  transition-timing-function: ease-out;
  will-change: transform, opacity;
}

/* Cuando entra en el viewport */
.slide-up,
.fade-only {
  min-height: 100px; /* Asegura espacio físico antes de cargar */
}

.slide-up.visible {
  opacity: 1 !important;
  transform: translateY(0) !important;
}

/* Duraciones */
.duration-500  { transition-duration: 500ms; }
.duration-800  { transition-duration: 800ms; }
.duration-1000 { transition-duration: 1000ms; }
.duration-1500 { transition-duration: 1500ms; }

/* Delays */
.delay-0   { transition-delay: 0ms; }
.delay-100 { transition-delay: 100ms; }
.delay-200 { transition-delay: 200ms; }
.delay-300 { transition-delay: 300ms; }
.delay-500 { transition-delay: 500ms; }


.fade-in:not(.editMode .fade-in) {
  opacity: 0;
  transition-property: opacity;
  transition-timing-function: ease-out;
  will-change: opacity;
}

/* Cuando entra en el viewport */
.fade-in.visible {
  opacity: 1 !important;
}

/* Duraciones (igual que en .slide-up) */
.duration-500  { transition-duration: 500ms; }
.duration-800  { transition-duration: 800ms; }
.duration-1000 { transition-duration: 1000ms; }
.duration-1500 { transition-duration: 1500ms; }

/* Delays (igual que en .slide-up) */
.delay-0   { transition-delay: 0ms; }
.delay-100 { transition-delay: 100ms; }
.delay-200 { transition-delay: 200ms; }
.delay-300 { transition-delay: 300ms; }
.delay-500 { transition-delay: 500ms; }

.fade-only:not(.editMode .fade-only) {
  opacity: 0;
  transition-property: opacity;
  transition-timing-function: ease-out;
  will-change: opacity;
}

/* Cuando entra en viewport */
.fade-only.visible {
  opacity: 1 !important;
}