/* Swup Page Transitions - Enhanced Slide Transitions
-------------------------------------------------- */

/* 1. Main Content Area (#swup) Animation - Slide + Fade */
main#swup {
  transition: all 0.4s cubic-bezier(0.4, 0.0, 0.2, 1);
  transform: translateY(0);
  opacity: 1;
}

html.is-animating main#swup {
  opacity: 0;
  transform: translateY(20px);
}

/* Alternative slide-up transition */
.transition-slide {
  transition: all 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  transform: translateY(0);
  opacity: 1;
}

html.is-animating .transition-slide {
  opacity: 0;
  transform: translateY(30px);
}

/* Smooth slide transition */
.transition-smooth {
  transition: all 0.6s cubic-bezier(0.19, 1, 0.22, 1);
  transform: translateY(0) scale(1);
  opacity: 1;
}

html.is-animating .transition-smooth {
  opacity: 0;
  transform: translateY(40px) scale(0.98);
}


/* 2. Persistent Hero (.hero) Component Animation */
/* Note: The featured image is animated via GSAP in JS */

/* Terminal card subtle animation during page transitions */
.hero .navigation-card {
  transition: opacity 0.3s ease-out, transform 0.3s ease-out;
  transform: translateY(0);
  opacity: 1;
}

.hero .featured-image-container {
  transition: opacity 0.3s ease-out, transform 0.3s ease-out;
  transform: translateY(0);
  opacity: 1;
}

/* Subtle animation out for both terminal and image */
.hero.is-swapping .navigation-card {
  opacity: 0.6;
  transform: translateY(-10px);
}

.hero.is-swapping .featured-image-container {
  opacity: 0.3;
  transform: translateY(-15px);
}

/* Ensure card footer returns to full opacity after swapping */
.hero:not(.is-swapping) .card-footer {
  opacity: 1 !important;
}

/* Smooth Progress Bar */
.swup-progress-bar {
  height: 2px;
  background: linear-gradient(90deg, 
    transparent 0%, 
    var(--color-workhorse-yellow) 20%, 
    var(--color-text-link) 50%, 
    var(--color-workhorse-yellow) 80%, 
    transparent 100%);
  background-size: 200% 100%;
  box-shadow: 0 0 6px rgba(255, 204, 0, 0.3);
  animation: smooth-progress 2.5s cubic-bezier(0.4, 0, 0.2, 1) infinite;
  border-radius: 0 1px 1px 0;
  transition: all 0.3s ease-out;
}

@keyframes smooth-progress {
  0% { 
    background-position: -200% 0; 
    opacity: 0.6;
  }
  50% { 
    opacity: 0.9; 
  }
  100% { 
    background-position: 200% 0; 
    opacity: 0.6;
  }
}