/* Custom styles overriding or complementing Tailwind CSS */

/* Custom Animations for Screenshot Stack */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(40px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.fade-in-up {
  animation: fadeInUp 1s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  opacity: 0;
}

.delay-1 {
  animation-delay: 0.2s;
}

.delay-2 {
  animation-delay: 0.4s;
}

.delay-3 {
  animation-delay: 0.6s;
}

/* 
  Perspective for the stack container to give a slight 3D depth to transforms 
*/
.perspective-1000 {
  perspective: 1000px;
}

/* 
  Allows smooth z-index transitions 
*/
.screenshot-card {
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1),
    z-index 0s 0s,
    box-shadow 0.6s cubic-bezier(0.16, 1, 0.3, 1),
    opacity 0.6s ease;
}

.screenshot-card:hover {
  /* When hovering, immediately pop to front */
  transition-delay: 0s, 0s, 0s, 0s;
  z-index: 50 !important;
}

/* Keep peers lower when siblings are hovered */
.screenshot-card:hover~.screenshot-card,
.group\/stack:hover .screenshot-card:not(:hover) {
  z-index: 10 !important;
}