/* ------------------------------------ *\
  #5. TRANSITIONS AND ANIMATIONS
\* ------------------------------------ */

/* SWUP Page Transitions */
.transition-fade {
    transition: 0.4s;
    opacity: 1;
}

html.is-animating .transition-fade {
    opacity: 0;
}

/* Slide Transitions */
.slide-in,
.slide-out {
    transition: transform 0.3s ease-out;
}

.slide-in.is-active,
.slide-out.is-active {
    transform: translateY(0);
}

/* Progress bars */
.swup-progress-bar {
    height: 2px;
    background-color: var(--color-text-link);
}

/* Scroll Animations */
.animate-on-scroll {
    opacity: 0;
    transform: translateY(20px);
}

.animate-on-scroll.is-visible {
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

/* ===== PREVENT INITIAL FLASH OF UNSTYLED CONTENT ===== */
/* Hide elements that will be animated before JavaScript loads */
html:not(.js-loaded) .post-meta-info,
html:not(.js-loaded) article.content,
html:not(.js-loaded) .gallery-container,
html:not(.js-loaded) .gallery-masonry,
html:not(.js-loaded) .gallery-item,
html:not(.js-loaded) .card:not(.navigation-card),
html:not(.js-loaded) .post-card,
html:not(.js-loaded) .project-card,
html:not(.js-loaded) .terminal-component:not(.hero .terminal-component) {
    opacity: 0;
    transform: translateY(20px);
}

/* Progressive enhancement - show content immediately if no JavaScript */
.no-js .post-meta-info,
.no-js article.content,
.no-js .gallery-container,
.no-js .gallery-masonry,
.no-js .gallery-item,
.no-js .card,
.no-js .post-card,
.no-js .project-card,
.no-js .terminal-component {
    opacity: 1 !important;
    transform: none !important;
}

/* Show content once JS is loaded and ready */
.js-loaded .post-meta-info,
.js-loaded article.content,
.js-loaded .gallery-container,
.js-loaded .gallery-masonry,
.js-loaded .gallery-item,
.js-loaded .card,
.js-loaded .post-card,
.js-loaded .project-card,
.js-loaded .terminal-component {
    transition: opacity 0.3s ease, transform 0.3s ease;
}

/* Parallax images */
.parallax-image {
    will-change: transform;
}

/* Custom Animations */
@keyframes pulse {
    from { opacity: 0.3; }
    to { opacity: 0.6; }
}

@keyframes fillChange {
    0% { fill: #000000; }
    50% { fill: #666666; }
    100% { fill: #ffffff; }
}

/* ===== PROGRESSIVE BORDER LOADING ANIMATION ===== */
/* Reusable progressive border effect for loading states */
.progressive-border {
  position: relative;
  overflow: hidden;
}

/* Simple and reliable border animation approach */
.progressive-border::before {
  content: '';
  position: absolute;
  top: -2px;
  left: -2px;
  right: -2px;
  bottom: -2px;
  border: 2px solid var(--color-workhorse-yellow);
  border-radius: inherit;
  pointer-events: none;
  z-index: 1;
  opacity: 0;
  transform: scale(0.95);
  transition: opacity 0.3s ease, transform 0.3s ease;
}

/* Show border when loading starts with scale animation */
.progressive-border.is-loading::before {
  opacity: 0.8;
  transform: scale(1);
  animation: progressive-border-glow 1.8s ease-in-out infinite;
}

/* Fast trace variant for page transitions */
.progressive-border.fast-trace.is-loading::before {
  animation: progressive-border-glow-fast 1.5s ease-in-out infinite;
}

/* Simple glow animation */
@keyframes progressive-border-glow {
  0%, 100% {
    opacity: 0.3;
    box-shadow: 0 0 5px var(--color-workhorse-yellow);
  }
  50% {
    opacity: 0.8;
    box-shadow: 0 0 20px var(--color-workhorse-yellow), 0 0 30px rgba(var(--color-workhorse-yellow-rgb), 0.3);
  }
}

@keyframes progressive-border-glow-fast {
  0%, 100% {
    opacity: 0.4;
    box-shadow: 0 0 8px var(--color-workhorse-yellow);
  }
  50% {
    opacity: 0.9;
    box-shadow: 0 0 25px var(--color-workhorse-yellow), 0 0 35px rgba(var(--color-workhorse-yellow-rgb), 0.4);
  }
}

/* Content inside progressive border starts hidden and coordinates with js-loaded timing */
.progressive-border.is-loading .progressive-border-content {
  opacity: 0;
  transform: scale(0.96) translateY(8px);
  transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1), 
              transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Show content when border animation completes - coordinates with other page animations */
.progressive-border.border-complete .progressive-border-content {
  opacity: 1;
  transform: scale(1) translateY(0);
  transition-delay: 0.1s; /* Small delay for smooth transition after border completes */
}

/* Coordinate with js-loaded class for initial page load */
.js-loaded .progressive-border.border-complete .progressive-border-content {
  transition-delay: 0s; /* No delay on initial load since js-loaded already handles timing */
}

/* Pulse effect when border is complete - subtle to not interfere with other animations */
.progressive-border.border-complete::before {
  animation: progressive-border-pulse 3s ease-in-out infinite;
}

@keyframes progressive-border-pulse {
  0%, 100% {
    opacity: 0.6;
  }
  50% {
    opacity: 0.3;
  }
}

/* Hero media box integration - coordinates with existing hero animations */
.hero-media-box.progressive-border {
  border: 2px solid transparent;
}

.hero-media-box.progressive-border.is-loading {
  background: rgba(255, 255, 255, 0.02);
}

/* Coordinate with ScrollTrigger animations */
.progressive-border.gsap-animated.border-complete .progressive-border-content {
  opacity: 1;
  transform: scale(1) translateY(0);
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
  .progressive-border::before {
    animation: none !important;
    opacity: 0.5 !important;
  }
  
  .progressive-border.is-loading::before {
    opacity: 0.5 !important;
    background: rgba(var(--color-workhorse-yellow-rgb), 0.5) !important;
  }
  
  .progressive-border.is-loading .progressive-border-content {
    opacity: 1 !important;
    transform: none !important;
  }
}

/* OLD TERMINAL ANIMATIONS MOVED TO style.css - DO NOT DUPLICATE HERE */