/* Animation keyframes */
@keyframes slideInFromLeft {
  0% {
    opacity: 0;
    transform: translateX(-300px);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes slideInFromRight {
  0% {
    opacity: 0;
    transform: translateX(300px);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

/* Animation classes */
.hidden-left {
  opacity: 0;
  transform: translateX(-300px);
}

.hidden-right {
  opacity: 0;
  transform: translateX(300px);
}

.animate-from-left {
  animation: slideInFromLeft 1.8s cubic-bezier(0.19, 1, 0.22, 1) forwards;
}

.animate-from-right {
  animation: slideInFromRight 1.8s cubic-bezier(0.19, 1, 0.22, 1) forwards;
}

/* Animation delay for images */
.animate-delay {
  animation-delay: 0.2s;
}

/* Direct selectors for specific sections */
/* Dorker Engine section */
#desktops-preview > div:first-child > div {
  opacity: 0;
  transform: translateX(-300px);
  transition: opacity 1.8s cubic-bezier(0.19, 1, 0.22, 1), transform 1.8s cubic-bezier(0.19, 1, 0.22, 1);
}

#desktops-preview > div:first-child > img {
  opacity: 0;
  transform: translateX(300px);
  transition: opacity 1.8s cubic-bezier(0.19, 1, 0.22, 1) 0.2s, transform 1.8s cubic-bezier(0.19, 1, 0.22, 1) 0.2s;
}

/* Beast MODE section - specific selectors (reversed direction) */
#desktops-preview > div:nth-of-type(2) > div {
  opacity: 0 !important;
  transform: translateX(300px) !important;
  transition: opacity 1.8s cubic-bezier(0.19, 1, 0.22, 1), transform 1.8s cubic-bezier(0.19, 1, 0.22, 1) !important;
}

#desktops-preview > div:nth-of-type(2) > img {
  opacity: 0 !important;
  transform: translateX(-300px) !important;
  transition: opacity 1.8s cubic-bezier(0.19, 1, 0.22, 1) 0.2s, transform 1.8s cubic-bezier(0.19, 1, 0.22, 1) 0.2s !important;
}

/* Multithread section - specific selectors (reversed direction) */
#desktops-preview > div:nth-of-type(3) > div {
  opacity: 0 !important;
  transform: translateX(-300px) !important;
  transition: opacity 1.8s cubic-bezier(0.19, 1, 0.22, 1), transform 1.8s cubic-bezier(0.19, 1, 0.22, 1) !important;
}

#desktops-preview > div:nth-of-type(3) > img {
  opacity: 0 !important;
  transform: translateX(300px) !important;
  transition: opacity 1.8s cubic-bezier(0.19, 1, 0.22, 1) 0.2s, transform 1.8s cubic-bezier(0.19, 1, 0.22, 1) 0.2s !important;
}

/* Web Dashboard section - specific selectors */
#desktops-preview > div:nth-of-type(4) > div {
  opacity: 0 !important;
  transform: translateX(300px) !important;
  transition: opacity 1.8s cubic-bezier(0.19, 1, 0.22, 1), transform 1.8s cubic-bezier(0.19, 1, 0.22, 1) !important;
}

#desktops-preview > div:nth-of-type(4) > img {
  opacity: 0 !important;
  transform: translateX(-300px) !important;
  transition: opacity 1.8s cubic-bezier(0.19, 1, 0.22, 1) 0.2s, transform 1.8s cubic-bezier(0.19, 1, 0.22, 1) 0.2s !important;
}

/* Best Tools section - more specific selectors */
#desktops-preview > div:last-of-type > div {
  opacity: 0 !important;
  transform: translateX(-300px) !important;
  transition: opacity 1.8s cubic-bezier(0.19, 1, 0.22, 1), transform 1.8s cubic-bezier(0.19, 1, 0.22, 1) !important;
}

#desktops-preview > div:last-of-type > img {
  opacity: 0 !important;
  transform: translateX(300px) !important;
  transition: opacity 1.8s cubic-bezier(0.19, 1, 0.22, 1) 0.2s, transform 1.8s cubic-bezier(0.19, 1, 0.22, 1) 0.2s !important;
}

/* Animation end state - with higher specificity */
#desktops-preview > div.animated > div,
#desktops-preview > div.animated > img,
#desktops-preview > div:nth-of-type(1).animated > div,
#desktops-preview > div:nth-of-type(1).animated > img,
#desktops-preview > div:nth-of-type(2).animated > div,
#desktops-preview > div:nth-of-type(2).animated > img,
#desktops-preview > div:nth-of-type(3).animated > div,
#desktops-preview > div:nth-of-type(3).animated > img,
#desktops-preview > div:nth-of-type(4).animated > div,
#desktops-preview > div:nth-of-type(4).animated > img,
#desktops-preview > div:last-of-type.animated > div,
#desktops-preview > div:last-of-type.animated > img {
  opacity: 1 !important;
  transform: translateX(0) !important;
  transition: opacity 1.8s cubic-bezier(0.19, 1, 0.22, 1), transform 1.8s cubic-bezier(0.19, 1, 0.22, 1) !important;
}