/* ========== UNFOLDING ========== */
@keyframes unfolding-in {
  0% {
    transform: scaleX(0.01) scaleY(0);
    opacity: 0;
  }
  60% {
    transform: scaleX(1) scaleY(0.01);
    opacity: 1;
  }
  100% {
    transform: scaleX(1) scaleY(1);
    opacity: 1;
  }
}

@keyframes unfolding-out {
  0% {
    transform: scaleX(1) scaleY(1);
    opacity: 1;
  }
  40% {
    transform: scaleX(1) scaleY(0.01);
    opacity: 1;
  }
  100% {
    transform: scaleX(0.01) scaleY(0);
    opacity: 0;
  }
}

.unfolding-enter-active {
  animation: unfolding-in 0.3s ease-in-out forwards;
  transform-origin: center center;
}

.unfolding-leave-active {
  animation: unfolding-out 0.3s ease-in-out forwards;
  transform-origin: center center;
}

/* ========== REVEALING ========== */
.revealing-enter-active,
.revealing-leave-active {
  transition: all 0.4s ease;
}

.revealing-enter-from {
  transform: scale(0.8) translateY(-20px);
  opacity: 0;
}

.revealing-leave-to {
  transform: scale(0.8) translateY(20px);
  opacity: 0;
}

/* ========== UNCOVERING ========== */
.uncovering-enter-active,
.uncovering-leave-active {
  transition: all 0.4s ease;
}

.uncovering-enter-from {
  transform: translateY(100px);
  opacity: 0;
}

.uncovering-leave-to {
  transform: translateY(100px);
  opacity: 0;
}

/* ========== BLOW UP ========== */
.blowup-enter-active,
.blowup-leave-active {
  transition: all 0.35s ease-in-out;
}

.blowup-enter-from {
  transform: scale(0.5);
  opacity: 0;
}

.blowup-leave-to {
  transform: scale(1.5);
  opacity: 0;
}

/* ========== MEEP MEEP (RoadRunner) ========== */
.meepmeep-move {
  transition: transform 0.2s ease;
}

.meepmeep-enter-active,
.meepmeep-leave-active {
  transition: all 0.35s cubic-bezier(0.77, 0, 0.175, 1);
}

.meepmeep-enter-from {
  transform: translateX(-100%);
  opacity: 0;
}

.meepmeep-leave-to {
  transform: translateX(100%);
  opacity: 0;
}

/* ========== SKETCH ========== */
.sketch-enter-active,
.sketch-leave-active {
  transition: all 0.45s ease;
}

.sketch-enter-from {
  transform: scale(0.7) rotate(-10deg);
  opacity: 0;
}

.sketch-leave-to {
  transform: scale(0.7) rotate(10deg);
  opacity: 0;
}

/* ========== BOND ========== */
.bond-enter-active,
.bond-leave-active {
  transition: all 0.4s ease-in-out;
}

.bond-enter-from {
  transform: scale(0.2) translateY(100%);
  border-radius: 50%;
  opacity: 0;
}

.bond-enter-to {
  transform: scale(1) translateY(0);
  border-radius: 0;
  opacity: 1;
}

.bond-leave-to {
  transform: scale(0.2) translateY(-100%);
  border-radius: 50%;
  opacity: 0;
}

/* ========== FADE ========== */
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.3s ease;
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}

/* ========== SLIDE FROM BOTTOM ========== */
.slide-bottom-enter-active,
.slide-bottom-leave-active {
  transition: transform 0.3s ease, opacity 0.3s ease;
}

.slide-bottom-enter-from,
.slide-bottom-leave-to {
  transform: translateY(100%);
  opacity: 0;
}

/* ========== SLIDE FROM TOP ========== */
.slide-top-enter-active,
.slide-top-leave-active {
  transition: transform 0.3s ease, opacity 0.3s ease;
}

.slide-top-enter-from,
.slide-top-leave-to {
  transform: translateY(-100%);
  opacity: 0;
}

/* ========== SLIDE FROM LEFT ========== */
.slide-left-enter-active,
.slide-left-leave-active {
  transition: transform 0.3s ease, opacity 0.3s ease;
}

.slide-left-enter-from,
.slide-left-leave-to {
  transform: translateX(-100%);
  opacity: 0;
}

/* ========== SLIDE FROM RIGHT ========== */
.slide-right-enter-active,
.slide-right-leave-active {
  transition: transform 0.3s ease, opacity 0.3s ease;
}

.slide-right-enter-from,
.slide-right-leave-to {
  transform: translateX(100%);
  opacity: 0;
}

/* ========== ZOOM ========== */
.zoom-enter-active,
.zoom-leave-active {
  transition: transform 0.3s ease, opacity 0.3s ease;
}

.zoom-enter-from,
.zoom-leave-to {
  transform: scale(0.8);
  opacity: 0;
}

/* ========== ZOOM ORIGIN ========== */
.zoom-origin-enter-active,
.zoom-origin-leave-active {
  transition: all 0.3s ease;
}

.zoom-origin-enter-from,
.zoom-origin-leave-to {
  transform: scale(0.8);
  opacity: 0;
}

/* ========== BLUR + FADE ========== */
.blur-enter-active,
.blur-leave-active {
  transition: all 0.3s ease;
}

.blur-enter-from,
.blur-leave-to {
  opacity: 0;
  filter: blur(10px);
}

/* ========== GRADIENT FLUX SHIFT ========== */
@keyframes gradient-flux-shift {
  0% {
    background-position: 0 50%;
  }
  25% {
    background-position: 50% 100%;
  }
  50% {
    background-position: 100% 50%;
  }
  75% {
    background-position: 50% 0;
  }
  100% {
    background-position: 0 50%;
  }
}

/* ========== GRADIENT AURA FLOW ========== */
@keyframes gradient-aura-flow {
  0% {
    background-position: 0 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0 50%;
  }
}

/* ========== GRADIENT WAVE FLOW ========== */
@keyframes gradient-wave-flow {
  0% {
    background-position: 0 50%;
  }
  25% {
    background-position: 50% 100%;
  }
  50% {
    background-position: 100% 50%;
  }
  75% {
    background-position: 50% 0;
  }
  100% {
    background-position: 0 50%;
  }
}

/* ========== GRADIENT BREATHE FLOW ========== */
@keyframes gradient-breathe-flow {
  0% {
    background-position: 30% 50%;
  }
  50% {
    background-position: 70% 50%;
  }
  100% {
    background-position: 30% 50%;
  }
}

/* ========== SHUTTLE ========== */
@keyframes shuttle {
  15% {
    left: 0;
  }
  45% {
    left: calc(100% - 20px);
  }
  65% {
    left: calc(100% - 20px);
  }
  95% {
    left: 0;
  }
}