/**
 * View Transitions Plugin CSS
 * Defines transition animations for different types
 */

/* CSS Custom Properties */
:root {
    --vtp-duration: 500ms;
    --vtp-easing: ease-in-out;
}

/* Base view transition styles */
::view-transition-old(root),
::view-transition-new(root) {
    animation-duration: var(--vtp-duration);
    animation-timing-function: var(--vtp-easing);
}

/* Fade Transition */
.vtp-fade ::view-transition-old(root) {
    animation-name: vtp-fade-out;
}

.vtp-fade ::view-transition-new(root) {
    animation-name: vtp-fade-in;
}

@keyframes vtp-fade-out {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
    }
}

@keyframes vtp-fade-in {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

/* Slide Left Transition */
.vtp-slide-left ::view-transition-old(root) {
    animation-name: vtp-slide-out-left;
}

.vtp-slide-left ::view-transition-new(root) {
    animation-name: vtp-slide-in-left;
}

@keyframes vtp-slide-out-left {
    from {
        transform: translateX(0);
    }
    to {
        transform: translateX(-100%);
    }
}

@keyframes vtp-slide-in-left {
    from {
        transform: translateX(100%);
    }
    to {
        transform: translateX(0);
    }
}

/* Slide Right Transition */
.vtp-slide-right ::view-transition-old(root) {
    animation-name: vtp-slide-out-right;
}

.vtp-slide-right ::view-transition-new(root) {
    animation-name: vtp-slide-in-right;
}

@keyframes vtp-slide-out-right {
    from {
        transform: translateX(0);
    }
    to {
        transform: translateX(100%);
    }
}

@keyframes vtp-slide-in-right {
    from {
        transform: translateX(-100%);
    }
    to {
        transform: translateX(0);
    }
}

/* Zoom Transition */
.vtp-zoom ::view-transition-old(root) {
    animation-name: vtp-zoom-out;
}

.vtp-zoom ::view-transition-new(root) {
    animation-name: vtp-zoom-in;
}

@keyframes vtp-zoom-out {
    from {
        transform: scale(1);
        opacity: 1;
    }
    to {
        transform: scale(0.8);
        opacity: 0;
    }
}

@keyframes vtp-zoom-in {
    from {
        transform: scale(1.2);
        opacity: 0;
    }
    to {
        transform: scale(1);
        opacity: 1;
    }
}

/* Shortcode and Block Specific Transitions */
[data-vtp-transition] {
    view-transition-name: vtp-element;
}

/* Element-specific transitions */
::view-transition-old(vtp-element),
::view-transition-new(vtp-element) {
    animation-duration: var(--vtp-duration);
    animation-timing-function: var(--vtp-easing);
}

/* Fade for elements */
[data-vtp-transition="fade"] ::view-transition-old(vtp-element) {
    animation-name: vtp-fade-out;
}

[data-vtp-transition="fade"] ::view-transition-new(vtp-element) {
    animation-name: vtp-fade-in;
}

/* Slide left for elements */
[data-vtp-transition="slide-left"] ::view-transition-old(vtp-element) {
    animation-name: vtp-slide-out-left;
}

[data-vtp-transition="slide-left"] ::view-transition-new(vtp-element) {
    animation-name: vtp-slide-in-left;
}

/* Slide right for elements */
[data-vtp-transition="slide-right"] ::view-transition-old(vtp-element) {
    animation-name: vtp-slide-out-right;
}

[data-vtp-transition="slide-right"] ::view-transition-new(vtp-element) {
    animation-name: vtp-slide-in-right;
}

/* Zoom for elements */
[data-vtp-transition="zoom"] ::view-transition-old(vtp-element) {
    animation-name: vtp-zoom-out;
}

[data-vtp-transition="zoom"] ::view-transition-new(vtp-element) {
    animation-name: vtp-zoom-in;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    :root {
        --vtp-duration: 300ms;
    }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
    ::view-transition-old(root),
    ::view-transition-new(root),
    ::view-transition-old(vtp-element),
    ::view-transition-new(vtp-element) {
        animation-duration: 0.1s;
    }
}

/* Loading state */
.vtp-loading {
    cursor: wait;
}

.vtp-loading * {
    pointer-events: none;
}

/* Fallback for browsers without View Transitions API */
@supports not (view-transition-name: none) {
    .vtp-fade,
    .vtp-slide-left,
    .vtp-slide-right,
    .vtp-zoom {
        transition: opacity var(--vtp-duration) var(--vtp-easing);
    }
    
    .vtp-transitioning {
        opacity: 0.5;
    }
}