/* === Estilos para imagen responsive === */

.lemon-responsive-image-wrapper {
  position: relative;
  display: block;
  width: 100%;
  box-sizing: border-box;
  overflow: hidden;
}

.lemon-responsive-image {
  position: relative;
  width: 100%;
  overflow: hidden;
  transform-origin: center center;
}

/* Por defecto, imagen normal sin position absolute */
.lemon-responsive-image img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
  transform-origin: center center;
}

/* Solo cuando se usa aspect ratio responsive, aplicar position absolute */
.lemon-responsive-image.has-aspect-ratio::before {
  content: "";
  display: block;
  width: 100%;
}

.lemon-responsive-image.has-aspect-ratio img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* === MARGIN EXPAND EFFECT CON TRANSFORM === */

/* Asegurar que el contenedor permita el scaling */
.lemon-responsive-image-wrapper[data-scroll-effect="margin_expand"] {
  overflow: hidden !important;
}

.lemon-responsive-image-wrapper[data-scroll-effect="margin_expand"] .lemon-responsive-image {
  width: 100% !important;
  transform-origin: center center !important;
  will-change: transform !important;
}

.lemon-responsive-image-wrapper[data-scroll-effect="margin_expand"] .lemon-responsive-image img {
  width: 100% !important;
  height: auto !important;
  display: block !important;
  transform-origin: center center !important;
  will-change: transform !important;
}

/* === ANIMACIONES BÁSICAS === */

/* Estados iniciales para animaciones básicas */
.lemon-image-animated {
  opacity: 0;
  transform: translateY(30px);
  transition: all 0.6s ease-out;
}

.lemon-image-animated.animation-triggered {
  opacity: 1;
  transform: translateY(0);
}

/* Animaciones específicas */
.lemon-fadeIn {
  transform: none;
}

.lemon-fadeIn.animation-triggered {
  opacity: 1;
}

.lemon-fadeInUp {
  transform: translateY(30px);
}

.lemon-fadeInUp.animation-triggered {
  transform: translateY(0);
}

.lemon-fadeInLeft {
  transform: translateX(-30px);
}

.lemon-fadeInLeft.animation-triggered {
  transform: translateX(0);
}

.lemon-fadeInRight {
  transform: translateX(30px);
}

.lemon-fadeInRight.animation-triggered {
  transform: translateX(0);
}

.lemon-slideInLeft {
  transform: translateX(-50px);
}

.lemon-slideInLeft.animation-triggered {
  transform: translateX(0);
}

.lemon-slideInRight {
  transform: translateX(50px);
}

.lemon-slideInRight.animation-triggered {
  transform: translateX(0);
}

.lemon-slideInUp {
  transform: translateY(50px);
}

.lemon-slideInUp.animation-triggered {
  transform: translateY(0);
}