/* ==================================================
   LEMON THINK ANIMATIONS - CSS v1.60
   ================================================== */

/* ==================================================
   REVEAL CONTAINERS
   ================================================== */

.reveal-text,
.reveal-word {
  overflow: hidden;
  display: block;
  margin-bottom: 0;
}

.reveal-word {
  display: inline-block;
  vertical-align: top;
  margin-right: 0.3em;
}

.reveal-text span,
.reveal-word span {
  display: inline-block;
  line-height: inherit;
  padding-bottom: 0.1em;
}

/* Para elementos no-texto (imágenes, videos) */
.reveal-text.reveal-non-text {
  overflow: visible;
  display: block;
}

.reveal-text.reveal-non-text span {
  display: block;
  width: 100%;
}

/* ==================================================
   ESTADOS INICIALES - Antes de activarse
   ================================================== */

/* Fade Up - Estado inicial */
.reveal-text.lemon-fade-up:not(.active) span,
.reveal-word.lemon-fade-up:not(.active) span {
  transform: translateY(30px);
  opacity: 0;
}

.reveal-text.lemon-fade-up span,
.reveal-word.lemon-fade-up span {
  transition: transform var(--lemon-duration, 0.6s) ease, opacity var(--lemon-duration, 0.6s) ease;
}

/* Reveal Up - Estado inicial */
.reveal-text.lemon-reveal-up:not(.active) span,
.reveal-word.lemon-reveal-up:not(.active) span {
  transform: translateY(100%);
}

.reveal-text.lemon-reveal-up span,
.reveal-word.lemon-reveal-up span {
  transition: transform var(--lemon-duration, 0.8s) cubic-bezier(0.77, 0, 0.175, 1);
}

/* Reveal Down - Estado inicial */
.reveal-text.lemon-reveal-down:not(.active) span,
.reveal-word.lemon-reveal-down:not(.active) span {
  transform: translateY(-100%);
}

.reveal-text.lemon-reveal-down span,
.reveal-word.lemon-reveal-down span {
  transition: transform var(--lemon-duration, 0.8s) cubic-bezier(0.77, 0, 0.175, 1);
}

/* Fade Reveal Up (Combinación) - Estado inicial */
.reveal-text.lemon-fade-reveal-up:not(.active) span,
.reveal-word.lemon-fade-reveal-up:not(.active) span {
  transform: translateY(50%); /* Menos movimiento para que se note más el fade */
  opacity: 0;
}

.reveal-text.lemon-fade-reveal-up span,
.reveal-word.lemon-fade-reveal-up span {
  transition: transform var(--lemon-duration, 0.8s) cubic-bezier(0.77, 0, 0.175, 1), 
              opacity var(--lemon-duration, 0.8s) ease; /* Fade a la misma velocidad que reveal */
}

/* Fade Reveal Down (Combinación) - Estado inicial */
.reveal-text.lemon-fade-reveal-down:not(.active) span,
.reveal-word.lemon-fade-reveal-down:not(.active) span {
  transform: translateY(-50%); /* Menos movimiento para que se note más el fade */
  opacity: 0;
}

.reveal-text.lemon-fade-reveal-down span,
.reveal-word.lemon-fade-reveal-down span {
  transition: transform var(--lemon-duration, 0.8s) cubic-bezier(0.77, 0, 0.175, 1), 
              opacity var(--lemon-duration, 0.8s) ease; /* Fade a la misma velocidad que reveal */
}
}

/* ==================================================
   ESTADO ACTIVO - Animación completa
   ================================================== */

.reveal-text.active span,
.reveal-word.active span {
  transform: translateY(0) !important;
  opacity: 1 !important;
}

/* ==================================================
   SCROLL EFFECTS (efectos de scroll por letra)
   ================================================== */

.scroll-degrade .word {
  display: inline-block;
  white-space: nowrap;
}

.scroll-degrade .char {
  display: inline-block;
  opacity: 0;
  filter: none;
  transition: opacity 0.3s linear, filter 0.3s linear;
  will-change: opacity, filter;
}

/* Efecto block-fade: bloque completo con opacidad */
.scroll-degrade.block-fade-element {
  opacity: 0;
  transition: opacity 0.5s ease-out;
  will-change: opacity;
}