// Shared Keyframes
@keyframes slideInFromBottom {
  0% {
    opacity: 0;
    transform: translateY(30px) scale(0.95);
  }
  60% {
    opacity: 1;
    transform: translateY(-5px) scale(1.02);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes fadeOutCollapse {
  0% {
    opacity: 1;
    transform: scale(1);
    max-height: 1000px;
    margin-bottom: 16px;
  }
  40% {
    opacity: 0;
    transform: scale(0.95);
    max-height: 1000px;
    margin-bottom: 16px;
  }
  100% {
    opacity: 0;
    transform: scale(0.9);
    max-height: 0;
    margin-bottom: 0;
    padding-top: 0;
    padding-bottom: 0;
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

// Reusable Mixins
@mixin item-enter-active {
  animation: slideInFromBottom 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@mixin item-leave-active {
  overflow: hidden;
  animation: fadeOutCollapse 0.5s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

@mixin item-move {
  transition: all 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

@mixin newest-item-highlight {
  background: linear-gradient(135deg, hsl(var(--primary-hue), 15%, 99%) 0%, hsl(var(--secondary-hue), 15%, 99%) 100%);
  border: 2px solid hsl(var(--primary-hue), var(--primary-saturation), var(--primary-light));
}

// Form Animation Classes

// Apply highlight to newest items in different contexts
.mixed-object-item.newest-item,
.each-object-card.newest-item {
  @include newest-item-highlight;
}

// Array Item Transitions (used in ArrayOfArrayObject.vue, ArrayItem.vue)
.array-item-enter-active {
  @include item-enter-active;
}

.array-item-leave-active {
  @include item-leave-active;
}

.array-item-move {
  @include item-move;
}

// Object Item Transitions (used in TheObject.vue)
.object-item-enter-active {
  @include item-enter-active;
}

.object-item-leave-active {
  @include item-leave-active;
}

.object-item-move {
  @include item-move;
}