/* ============================================
   Base Swup Transition Configuration
   ============================================ */

/* Set transition duration for all animations */
:root {
    --swup-transition-duration: 1.2s; /* Update this value (e.g. 0.3s, 1s) */
    --swup-slide-distance: 100px;
    --swup-zoom-scale: 0.95;
}

/* ============================================
   0. INITIAL LOAD ANIMATIONS
   Ensure animations run on first page load
   ============================================ */

#swup {
    opacity: 0;
    animation: fadeIn var(--swup-transition-duration) ease-in-out forwards;
}

.slide-left,
.slide-left-enter {
    opacity: 0;
    transform: translateX(calc(-1 * var(--swup-slide-distance)));
    animation: slideLeftIn var(--swup-transition-duration) ease-in-out forwards;
}

.slide-right,
.slide-right-enter {
    opacity: 0;
    transform: translateX(var(--swup-slide-distance));
    animation: slideRightIn var(--swup-transition-duration) ease-in-out forwards;
}

/* Prevent content jump during transitions */
html.is-changing .transition-fade {
    transition: opacity var(--swup-transition-duration) ease-in-out;
}

/* ============================================
   1. DEFAULT FADE TRANSITION
   Container-level page fade
   ============================================ */

/* Leaving page - Fade out */
html.is-animating.is-leaving #swup {
    opacity: 1;
    animation: fadeOut var(--swup-transition-duration) ease-in-out forwards;
}

/* Entering page - Fade in */
html.is-animating.is-rendering #swup {
    opacity: 0;
    animation: fadeIn var(--swup-transition-duration) ease-in-out forwards;
}

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

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

/* ============================================
   2. SLIDE LEFT WITH FADE TRANSITION
   Leaving: Slide right to left + fade out
   Entering: Slide left to right + fade in
   ============================================ */

/* Leaving page - Slide out right to left and fade out */
html.is-animating.is-leaving .slide-left,
html.is-animating.is-leaving .slide-left-leave {
    opacity: 1;
    transform: translateX(0);
    animation: slideLeftOut var(--swup-transition-duration) ease-in-out forwards;
}

/* Entering page - Slide in left to right and fade in */
html.is-animating.is-rendering .slide-left,
html.is-animating.is-rendering .slide-left-enter {
    opacity: 0;
    transform: translateX(calc(-1 * var(--swup-slide-distance)));
    animation: slideLeftIn var(--swup-transition-duration) ease-in-out forwards;
}

@keyframes slideLeftOut {
    from {
        opacity: 1;
        transform: translateX(0);
    }
    to {
        opacity: 0;
        transform: translateX(calc(-1 * var(--swup-slide-distance)));
    }
}

@keyframes slideLeftIn {
    from {
        opacity: 0;
        transform: translateX(calc(-1 * var(--swup-slide-distance)));
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* ============================================
   3. SLIDE RIGHT WITH FADE TRANSITION
   Leaving: Slide left to right + fade out
   Entering: Slide right to left + fade in
   ============================================ */

/* Leaving page - Slide out left to right and fade out */
html.is-animating.is-leaving .slide-right,
html.is-animating.is-leaving .slide-right-enter
 {
    opacity: 1;
    transform: translateX(0);
    animation: slideRightOut var(--swup-transition-duration) ease-in-out forwards;
}

/* Entering page - Slide in right to left and fade in */
html.is-animating.is-rendering .slide-right,
html.is-animating.is-rendering .slide-right-enter {
    opacity: 0;
    transform: translateX(var(--swup-slide-distance));
    animation: slideRightIn var(--swup-transition-duration) ease-in-out forwards;
}

@keyframes slideRightOut {
    from {
        opacity: 1;
        transform: translateX(0);
    }
    to {
        opacity: 0;
        transform: translateX(var(--swup-slide-distance));
    }
}

@keyframes slideRightIn {
    from {
        opacity: 0;
        transform: translateX(var(--swup-slide-distance));
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* ============================================
   Performance Optimizations
   ============================================ */

/* Use GPU acceleration for smoother animations */
#swup,
.slide-left, .slide-left-enter, .slide-left-leave,
.slide-right, .slide-right-enter, .slide-right-leave {
    will-change: transform, opacity;
    backface-visibility: hidden;
    -webkit-font-smoothing: antialiased;
}

/* Reset will-change after animations complete to save resources */
html:not(.is-animating) #swup,
html:not(.is-animating) .slide-left, html:not(.is-animating) .slide-left-enter, html:not(.is-animating) .slide-left-leave,
html:not(.is-animating) .slide-right, html:not(.is-animating) .slide-right-enter, html:not(.is-animating) .slide-right-leave {
    will-change: auto;
}

/* ============================================
   Responsive Adjustments
   ============================================ */

/* Reduce slide distance on smaller screens */
@media (max-width: 768px) {
    :root {
        --swup-slide-distance: 50px;
    }
}

/* Optional: Reduce motion for users who prefer it */
@media (prefers-reduced-motion: reduce) {
    :root {
        --swup-transition-duration: 0.01s;
        --swup-slide-distance: 0px;
    }
    
    html.is-animating.is-leaving #swup,
    html.is-animating.is-leaving .slide-left, html.is-animating.is-leaving .slide-left-leave,
    html.is-animating.is-leaving .slide-right, html.is-animating.is-leaving .slide-right-leave {
        animation: none;
        opacity: 0;
    }
    
    html.is-animating.is-rendering #swup,
    html.is-animating.is-rendering .slide-left, html.is-animating.is-rendering .slide-left-enter,
    html.is-animating.is-rendering .slide-right, html.is-animating.is-rendering .slide-right-enter {
        animation: none;
        opacity: 1;
    }
}

/* ============================================
   4. SELECTIVE ZOOM TRANSITION
   Apply class "zoom-in" to specific elements
   Leaving: Scale down + fade out
   Entering: Scale up + fade in
   ============================================ */

/* Leaving page - Zoom out and fade out */
html.is-animating.is-leaving .zoom-in {
    opacity: 1;
    transform: scale(1);
    animation: zoomOut var(--swup-transition-duration) ease-in-out forwards;
}

/* Entering page - Zoom in and fade in */
html.is-animating.is-rendering .zoom-in {
    opacity: 0;
    transform: scale(var(--swup-zoom-scale));
    animation: zoomIn var(--swup-transition-duration) ease-in-out forwards;
}

@keyframes zoomOut {
    from {
        opacity: 1;
        transform: scale(1);
    }
    to {
        opacity: 0;
        transform: scale(var(--swup-zoom-scale));
    }
}

@keyframes zoomIn {
    from {
        opacity: 0;
        transform: scale(var(--swup-zoom-scale));
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}