/* Base styles with optimized transitions */
#expandableCardsDiv {
  transition: height 0.6s cubic-bezier(0.25, 0.1, 0.25, 1);
  /* Smooth easing function */
  will-change: height;
  /* Hint to browser for better performance */
  overflow: hidden;
  /* Keep this to contain the expanding content */
}

/* Content styles with optimized reveal animation */
#content {
  opacity: 0;
  transform: translateY(10px);
  /* Slight initial offset */
  transition: opacity 2s ease-out 0s,
    /* Delay opacity to sync with height */
    transform 2s ease-out 0s;
  /* Add subtle movement */
  pointer-events: none;
  /* Prevent interaction while hidden */
}

/* Expanded state styles */
#expandableCardsDiv.expanded {
  height: calc(68vw + 19vw) !important;
  /* Important to override inline style */
}

#expandableCardsDiv.expanded #content {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
  /* Re-enable interaction when visible */
}


/* Mobile View */

/* Animation classes */
.fade-in {
  animation: fadeIn 1s ease-in-out forwards;
}

.fade-out {
  animation: fadeOut 1s ease-in-out forwards;
}

.slide-bl {
  animation: slideBottomLeft 1s ease-in-out forwards;
}

.slide-tl {
  animation: slideTopLeft 1s ease-in-out forwards;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes fadeOut {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
  }
}

@keyframes slideBottomLeft {
  from {
    transform: translateY(0) translateX(0);
    opacity: 1;
  }

  to {
    transform: translateY(100%) translateX(-100%);
    opacity: 0;
  }
}

@keyframes slideTopLeft {
  from {
    transform: translateY(100%) translateX(100%);
    opacity: 0;
  }

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