/* Animations CSS for Queen16 website */

/* Only apply fading to elements explicitly animated */
.fade-in-element {
  opacity: 0;
  transition: opacity 0.8s ease;
}

.fade-in-element.visible {
  opacity: 1;
}

/* Animation-only transforms handled through separate classes */
.slide-up {
  transform: translateY(30px);
  transition: transform 0.8s ease;
}

.slide-up.visible {
  transform: translateY(0);
}

/* Different transition delays for sequential animations */
.delay-100 { transition-delay: 0.1s; }
.delay-200 { transition-delay: 0.2s; }
.delay-300 { transition-delay: 0.3s; }
.delay-400 { transition-delay: 0.4s; }
.delay-500 { transition-delay: 0.5s; }

/* Different transition speeds */
.transition-slow { transition-duration: 1.2s; }
.transition-fast { transition-duration: 0.5s; }

/* Product cards - animation container */
.product-animation-container {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.8s ease, transform 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);
  height: 450px;
  width: 300px;
}

.product-animation-container.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Ensure product cards inside animation containers maintain their dimensions */
.product-animation-container .one,
.product-animation-container .two,
.product-animation-container .three,
.product-animation-container .four {
  height: 450px;
  width: 300px;
}

/* Category animation styles - fixed to work with original styling */
.category-animation {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.8s ease, transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.category-animation.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .slide-up, .product-animation-container, .category-animation {
    transform: translateY(20px); /* Smaller translation on mobile */
  }
}