/* ===========================================
   PAGE TRANSITION STYLES
   View Transitions API Configuration
   Native browser-based page transitions
   =========================================== */

/* Enable View Transitions for same-origin navigation */
@view-transition {
    navigation: auto;
}

/* ===========================================
   DEFAULT PAGE TRANSITIONS
   =========================================== */

/* Base transition timing - visible and smooth */
::view-transition-old(root),
::view-transition-new(root) {
    animation-duration: 0.4s;
    animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    mix-blend-mode: normal;
}

/* Exit animation - fade out with upward motion */
::view-transition-old(root) {
    animation-name: page-fade-out;
}

/* Enter animation - fade in with downward settle */
::view-transition-new(root) {
    animation-name: page-fade-in;
}

@keyframes page-fade-out {
    from {
        opacity: 1;
        transform: translateY(0);
    }
    to {
        opacity: 0;
        transform: translateY(-20px);
    }
}

@keyframes page-fade-in {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ===========================================
   NAVIGATION STATE STYLES
   Visual feedback during transitions
   =========================================== */

/* Body class added during navigation */
body.navigating {
    cursor: progress;
}

body.navigating a {
    pointer-events: none;
}

/* Subtle pulse on clicked link */
a.transition-active {
    opacity: 0.7;
    transition: opacity 0.15s ease;
}

/* ===========================================
   JS FALLBACK - PAGE ENTER/EXIT CLASSES
   Applied by transitions.js for manual fallback
   =========================================== */

/* Starting state for incoming page - invisible */
body.page-entering {
    opacity: 0;
    transform: translateY(20px);
}

/* Animate in */
body.page-visible {
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1),
                transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Exit animation */
body.page-exiting {
    opacity: 0;
    transform: translateY(-20px);
    transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1),
                transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ===========================================
   SCROLL PROGRESS BAR
   =========================================== */

.scroll-progress {
    view-transition-name: scroll-progress;
}

::view-transition-old(scroll-progress),
::view-transition-new(scroll-progress) {
    animation: none;
    mix-blend-mode: normal;
}

/* ===========================================
   ACCESSIBILITY - REDUCED MOTION
   =========================================== */

@media (prefers-reduced-motion: reduce) {
    @view-transition {
        navigation: auto;
    }

    ::view-transition-old(root),
    ::view-transition-new(root),
    ::view-transition-old(scroll-progress),
    ::view-transition-new(scroll-progress) {
        animation-duration: 0.001ms !important;
    }

    body.page-entering,
    body.page-visible,
    body.page-exiting {
        transition-duration: 0.001ms !important;
    }
}

/* ===========================================
   FALLBACK STYLES
   For browsers without View Transitions API
   =========================================== */

/* CSS-based fallback animations */
@supports not (view-transition-name: none) {
    /* Basic entrance animation on page load */
    body:not(.page-entering):not(.page-visible):not(.page-exiting) {
        animation: fallback-page-enter 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    }

    @keyframes fallback-page-enter {
        from {
            opacity: 0;
            transform: translateY(20px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }
}