/* ==========================================================================
   Micro-Curation & Swipe Gesture Animations
   ========================================================================== */

/* Flyout animations when swipe threshold is reached */
.story-card-wrapper.flyout-right .story-card {
  transform: translate3d(120%, 0, 0) rotate(12deg) !important;
  opacity: 0 !important;
  transition: transform 0.2s ease-out, opacity 0.18s ease-out !important;
}

.story-card-wrapper.flyout-left .story-card {
  transform: translate3d(-120%, 0, 0) rotate(-12deg) !important;
  opacity: 0 !important;
  transition: transform 0.2s ease-out, opacity 0.18s ease-out !important;
}

/* Height collapse transition that smoothly slides up remaining cards */
.story-card-wrapper.collapsed {
  height: 0 !important;
  min-height: 0 !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  opacity: 0 !important;
  overflow: hidden !important;
  border: none !important;
  transition: height 0.25s cubic-bezier(0.4, 0, 0.2, 1),
              margin 0.25s cubic-bezier(0.4, 0, 0.2, 1),
              padding 0.25s cubic-bezier(0.4, 0, 0.2, 1),
              opacity 0.2s linear !important;
}

/* Smooth spring-back when swipe cancelled */
.story-card.spring-back {
  transition: transform 0.28s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
  transform: translate3d(0, 0, 0) rotate(0deg) !important;
}

/* Entrance animation for newly appended stories */
@keyframes slideDownCard {
  from {
    opacity: 0;
    transform: translateY(-16px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.story-card-wrapper.slide-in {
  animation: slideDownCard 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* Button reveal & pulse animation */
@keyframes popInButton {
  0% {
    opacity: 0;
    transform: scale(0.85);
  }
  70% {
    transform: scale(1.05);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

.btn-get-latest.visible {
  animation: popInButton 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* Spinning refresh indicator */
@keyframes spin {
  100% {
    transform: rotate(360deg);
  }
}

.icon-spin {
  display: inline-block;
  animation: spin 0.85s linear infinite;
}

/* Reader Modal Animations */
.modal-overlay {
  transition: opacity 0.25s ease;
}

.modal-sheet {
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.modal-overlay.active {
  opacity: 1;
  pointer-events: auto;
}

.modal-overlay.active .modal-sheet {
  transform: translateY(0);
}