/* =============================================================================
   View Transitions API Support
   Modern page transition animations using the View Transitions API
   https://developer.chrome.com/docs/web-platform/view-transitions/
   ============================================================================= */

/* Opt-in to View Transitions for same-document navigations */
@supports (view-transition-name: none) {
    @view-transition {
        navigation: auto;
    }
}

/* Root view transitions */
::view-transition-old(root) {
    animation: view-fade-out 0.3s ease-out forwards;
}

::view-transition-new(root) {
    animation: view-fade-in 0.3s ease-in forwards;
}

/* Custom keyframes for smooth transitions */
@keyframes view-fade-out {
    from {
        opacity: 1;
        transform: scale(1);
    }
    to {
        opacity: 0;
        transform: scale(0.98);
    }
}

@keyframes view-fade-in {
    from {
        opacity: 0;
        transform: scale(1.02);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* Cross-fade animation (alternative) */
@keyframes view-crossfade-out {
    from { opacity: 1; }
    to { opacity: 0; }
}

@keyframes view-crossfade-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* Slide transitions - use via view-transition-name classes */
@keyframes view-slide-to-left {
    from {
        opacity: 1;
        transform: translateX(0);
    }
    to {
        opacity: 0;
        transform: translateX(-30px);
    }
}

@keyframes view-slide-from-right {
    from {
        opacity: 0;
        transform: translateX(30px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes view-slide-to-right {
    from {
        opacity: 1;
        transform: translateX(0);
    }
    to {
        opacity: 0;
        transform: translateX(30px);
    }
}

@keyframes view-slide-from-left {
    from {
        opacity: 0;
        transform: translateX(-30px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Scale and fade - for modals/overlays */
@keyframes view-scale-up {
    from {
        opacity: 0;
        transform: scale(0.9);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes view-scale-down {
    from {
        opacity: 1;
        transform: scale(1);
    }
    to {
        opacity: 0;
        transform: scale(0.9);
    }
}

/* =============================================================================
   Named View Transition Groups
   Apply view-transition-name to elements for custom transitions
   ============================================================================= */

/* Main content area */
.vt-main-content {
    view-transition-name: main-content;
}

::view-transition-old(main-content) {
    animation: view-slide-to-left 0.25s ease-out forwards;
}

::view-transition-new(main-content) {
    animation: view-slide-from-right 0.25s ease-out forwards;
}

/* Page header */
.vt-header {
    view-transition-name: page-header;
}

::view-transition-old(page-header) {
    animation: view-crossfade-out 0.2s ease-out forwards;
}

::view-transition-new(page-header) {
    animation: view-crossfade-in 0.2s ease-in forwards;
}

/* Cards - individual card transitions */
.vt-card {
    view-transition-name: card;
}

::view-transition-old(card) {
    animation: view-scale-down 0.2s ease-out forwards;
}

::view-transition-new(card) {
    animation: view-scale-up 0.2s ease-in forwards;
}

/* Modal transitions */
.vt-modal {
    view-transition-name: modal;
}

::view-transition-old(modal) {
    animation: view-scale-down 0.2s ease-out forwards;
}

::view-transition-new(modal) {
    animation: view-scale-up 0.25s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

/* Sidebar navigation */
.vt-sidebar {
    view-transition-name: sidebar;
}

::view-transition-old(sidebar),
::view-transition-new(sidebar) {
    animation: none;
    /* Keep sidebar static during transitions */
}

/* Search results */
.vt-search-results {
    view-transition-name: search-results;
}

::view-transition-old(search-results) {
    animation: view-fade-out 0.15s ease-out forwards;
}

::view-transition-new(search-results) {
    animation: view-fade-in 0.2s ease-in 0.1s forwards;
}

/* =============================================================================
   HTMX View Transitions Integration
   Smooth transitions for HTMX-powered partial updates
   ============================================================================= */

/* HTMX swap animations */
.htmx-swapping {
    opacity: 0;
    transition: opacity 0.15s ease-out;
}

.htmx-settling {
    opacity: 1;
    transition: opacity 0.2s ease-in;
}

/* HTMX added/removed class transitions */
.htmx-added {
    animation: view-fade-in 0.3s ease-out forwards;
}

/* =============================================================================
   Reduced Motion Support
   Respect user preferences for 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),
    ::view-transition-old(page-header),
    ::view-transition-new(page-header),
    ::view-transition-old(card),
    ::view-transition-new(card),
    ::view-transition-old(modal),
    ::view-transition-new(modal),
    ::view-transition-old(search-results),
    ::view-transition-new(search-results) {
        animation-duration: 0.01ms !important;
    }
    
    .htmx-swapping,
    .htmx-settling,
    .htmx-added {
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
    }
}

/* =============================================================================
   Fallback for browsers without View Transitions support
   ============================================================================= */

@supports not (view-transition-name: none) {
    /* Simple fade fallback for non-supporting browsers */
    .vt-main-content,
    .vt-header,
    .vt-card,
    .vt-modal,
    .vt-search-results {
        transition: opacity 0.2s ease-out;
    }
    
    body.page-transitioning .vt-main-content {
        opacity: 0;
    }
}