/* VisionCine - Optimized Animations */

/* Keyframe Animations */
@keyframes fadeIn {
    from { 
        opacity: 0; 
        transform: translateY(10px); 
    }
    to { 
        opacity: 1; 
        transform: translateY(0); 
    }
}

@keyframes slideInUp {
    from { 
        opacity: 0; 
        transform: translateY(30px); 
    }
    to { 
        opacity: 1; 
        transform: translateY(0); 
    }
}

@keyframes slideInDown {
    from { 
        opacity: 0; 
        transform: translateY(-30px); 
    }
    to { 
        opacity: 1; 
        transform: translateY(0); 
    }
}

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

@keyframes pulse {
    0%, 100% { 
        opacity: 1; 
    }
    50% { 
        opacity: 0.7; 
    }
}

@keyframes shimmer {
    0% {
        background-position: -200px 0;
    }
    100% {
        background-position: calc(200px + 100%) 0;
    }
}

@keyframes bounce {
    0%, 20%, 53%, 80%, 100% {
        transform: translate3d(0, 0, 0);
    }
    40%, 43% {
        transform: translate3d(0, -8px, 0);
    }
    70% {
        transform: translate3d(0, -4px, 0);
    }
    90% {
        transform: translate3d(0, -2px, 0);
    }
}

/* Animation Classes */
.animate-fade-in {
    animation: fadeIn 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.animate-slide-up {
    animation: slideInUp 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.animate-slide-down {
    animation: slideInDown 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.animate-scale-in {
    animation: scaleIn 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.animate-pulse {
    animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

.animate-bounce {
    animation: bounce 1s infinite;
}

/* Staggered animations */
.stagger-children > * {
    animation: fadeIn 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    animation-fill-mode: both;
}

.stagger-children > *:nth-child(1) { animation-delay: 0.05s; }
.stagger-children > *:nth-child(2) { animation-delay: 0.1s; }
.stagger-children > *:nth-child(3) { animation-delay: 0.15s; }
.stagger-children > *:nth-child(4) { animation-delay: 0.2s; }
.stagger-children > *:nth-child(5) { animation-delay: 0.25s; }
.stagger-children > *:nth-child(6) { animation-delay: 0.3s; }
.stagger-children > *:nth-child(7) { animation-delay: 0.35s; }
.stagger-children > *:nth-child(8) { animation-delay: 0.4s; }
.stagger-children > *:nth-child(9) { animation-delay: 0.45s; }
.stagger-children > *:nth-child(10) { animation-delay: 0.5s; }

/* Loading skeleton */
.skeleton {
    background: linear-gradient(90deg, #1a1a1a 25%, #2a2a2a 50%, #1a1a1a 75%);
    background-size: 200px 100%;
    animation: shimmer 1.5s infinite;
}

.skeleton-text {
    height: 12px;
    border-radius: 6px;
    margin-bottom: 8px;
}

.skeleton-text.large {
    height: 16px;
}

.skeleton-text.small {
    height: 10px;
    width: 60%;
}

.skeleton-poster {
    width: 100%;
    aspect-ratio: 2/3;
    border-radius: 8px;
}

/* Hover animations */
.hover-lift {
    transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.hover-lift:hover {
    transform: translateY(-4px);
}

.hover-scale {
    transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.hover-scale:hover {
    transform: scale(1.05);
}

.hover-glow {
    transition: box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.hover-glow:hover {
    box-shadow: 0 0 20px rgba(229, 9, 20, 0.3);
}

/* Focus animations */
.focus-ring {
    transition: box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.focus-ring:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(229, 9, 20, 0.3);
}

/* Loading states */
.loading-fade {
    opacity: 0.6;
    pointer-events: none;
    transition: opacity 0.2s ease;
}

.loading-blur {
    filter: blur(2px);
    pointer-events: none;
    transition: filter 0.2s ease;
}

/* Page transitions */
.page-enter {
    opacity: 0;
    transform: translateX(20px);
}

.page-enter-active {
    opacity: 1;
    transform: translateX(0);
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.page-exit {
    opacity: 1;
    transform: translateX(0);
}

.page-exit-active {
    opacity: 0;
    transform: translateX(-20px);
    transition: opacity 0.3s ease, transform 0.3s ease;
}

/* Modal animations */
.modal-enter {
    opacity: 0;
    transform: scale(0.95);
}

.modal-enter-active {
    opacity: 1;
    transform: scale(1);
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.modal-exit {
    opacity: 1;
    transform: scale(1);
}

.modal-exit-active {
    opacity: 0;
    transform: scale(0.95);
    transition: opacity 0.2s ease, transform 0.2s ease;
}

/* Backdrop animations */
.backdrop-enter {
    opacity: 0;
}

.backdrop-enter-active {
    opacity: 1;
    transition: opacity 0.2s ease;
}

.backdrop-exit {
    opacity: 1;
}

.backdrop-exit-active {
    opacity: 0;
    transition: opacity 0.2s ease;
}

/* Performance optimizations */
.will-change-transform {
    will-change: transform;
}

.will-change-opacity {
    will-change: opacity;
}

.will-change-auto {
    will-change: auto;
}

/* GPU acceleration helpers */
.gpu-accelerated {
    transform: translateZ(0);
    backface-visibility: hidden;
    perspective: 1000px;
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
    .animate-fade-in,
    .animate-slide-up,
    .animate-slide-down,
    .animate-scale-in,
    .animate-pulse,
    .animate-bounce,
    .stagger-children > *,
    .skeleton,
    .hover-lift:hover,
    .hover-scale:hover,
    .page-enter-active,
    .page-exit-active,
    .modal-enter-active,
    .modal-exit-active,
    .backdrop-enter-active,
    .backdrop-exit-active {
        animation: none !important;
        transition: none !important;
        transform: none !important;
    }
    
    .loading-fade,
    .loading-blur {
        transition: none !important;
    }
}