/**
 * View Transitions CSS
 * 
 * Defines animations for the View Transitions API.
 * Provides smooth cross-fade and slide effects.
 */

/* Enable view transitions */
@view-transition {
    navigation: auto;
}

/* Default transition: cross-fade */
::view-transition-old(root),
::view-transition-new(root) {
    animation-duration: 0.3s;
    animation-timing-function: ease-in-out;
}

/* Customize old view (outgoing) */
::view-transition-old(root) {
    animation-name: fade-out;
}

/* Customize new view (incoming) */
::view-transition-new(root) {
    animation-name: fade-in;
}

/* Fade out animation */
@keyframes fade-out {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
    }
}

/* Fade in animation */
@keyframes fade-in {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

/* Card-to-detail transition (for blog posts and projects) */
.blog-entry,
.card {
    view-transition-name: auto;
}

/* Smooth transition for main content */
main {
    view-transition-name: main-content;
}

::view-transition-old(main-content),
::view-transition-new(main-content) {
    animation-duration: 0.4s;
}

/* Slide up animation for new content */
::view-transition-new(main-content) {
    animation-name: slide-up-fade-in;
}

@keyframes slide-up-fade-in {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Respect prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {

    ::view-transition-old(root),
    ::view-transition-new(root),
    ::view-transition-old(main-content),
    ::view-transition-new(main-content) {
        animation: none !important;
    }
}