/* ==========================================================================
   Project Showcase Animations
   Smooth, Creative Transitions Without Disappearing Effects
   ========================================================================== */

/* Project Card Hover Effects */
@keyframes cardLift {
    from {
        transform: translateY(0) perspective(1000px) rotateX(0);
        box-shadow: var(--shadow-md);
    }
    to {
        transform: translateY(-8px) perspective(1000px) rotateX(2deg);
        box-shadow: 
            0 20px 40px rgba(0, 0, 0, 0.1),
            0 0 0 1px rgba(26, 115, 232, 0.1);
    }
}

.project-card:hover {
    animation: cardLift 0.3s ease forwards;
}

@keyframes thumbIconFloat {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-10px);
    }
}

.project-card:hover .placeholder-icon {
    animation: thumbIconFloat 1s ease-in-out infinite;
}

/* List Item Hover */
@keyframes listItemSlide {
    from {
        transform: translateX(0);
    }
    to {
        transform: translateX(8px);
    }
}

.list-item:hover {
    animation: listItemSlide 0.3s ease forwards;
}

/* Tab Animations */
@keyframes tabPulse {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.05);
    }
}

.nav-tab.active {
    animation: tabPulse 0.3s ease;
}

/* View Button Transition */
@keyframes viewButtonGlow {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(26, 115, 232, 0);
    }
    50% {
        box-shadow: 0 0 0 4px rgba(26, 115, 232, 0.2);
    }
}

.view-btn.active {
    animation: viewButtonGlow 2s ease-in-out infinite;
}

/* Stats Banner Animation */
@keyframes statsFloat {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-5px);
    }
}

.stats-banner {
    animation: statsFloat 4s ease-in-out infinite;
}

/* Modal Entrance */
@keyframes modalSidebarSlide {
    from {
        transform: translateX(-100%);
        opacity: 0.5;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes modalMainSlide {
    from {
        transform: translateX(100%);
        opacity: 0.5;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

.project-modal.active .modal-sidebar {
    animation: modalSidebarSlide 0.5s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}

.project-modal.active .modal-main {
    animation: modalMainSlide 0.5s cubic-bezier(0.2, 0.8, 0.2, 1) 0.1s forwards;
}

/* Section Title Animation */
@keyframes sectionTitlePop {
    from {
        transform: translateX(-10px);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

.section-title {
    animation: sectionTitlePop 0.5s ease forwards;
    opacity: 0;
}

.content-section:nth-child(1) .section-title { animation-delay: 0.1s; }
.content-section:nth-child(2) .section-title { animation-delay: 0.2s; }
.content-section:nth-child(3) .section-title { animation-delay: 0.3s; }
.content-section:nth-child(4) .section-title { animation-delay: 0.4s; }
.content-section:nth-child(5) .section-title { animation-delay: 0.5s; }
.content-section:nth-child(6) .section-title { animation-delay: 0.6s; }
.content-section:nth-child(7) .section-title { animation-delay: 0.7s; }

/* Content Fade In */
@keyframes contentFadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.section-content,
.visualization-placeholder,
.results-grid,
.learnings-list {
    animation: contentFadeIn 0.6s ease forwards;
    opacity: 0;
}

.content-section:nth-child(1) .section-content { animation-delay: 0.2s; }
.content-section:nth-child(2) .section-content { animation-delay: 0.3s; }
.content-section:nth-child(3) .section-content { animation-delay: 0.4s; }
.content-section:nth-child(4) .visualization-placeholder { animation-delay: 0.5s; }
.content-section:nth-child(5) .results-grid { animation-delay: 0.6s; }
.content-section:nth-child(6) .learnings-list { animation-delay: 0.7s; }
.content-section:nth-child(7) .section-content { animation-delay: 0.8s; }

/* Visualization Bar Animation */
@keyframes barGrow {
    from {
        height: 0%;
    }
    to {
        height: var(--target-height);
    }
}

.viz-bar {
    animation: barGrow 0.8s ease-out forwards;
    animation-delay: calc(var(--i, 0) * 0.1s);
}

/* Result Card Hover */
@keyframes resultCardPop {
    0%, 100% {
        transform: translateY(0) scale(1);
    }
    50% {
        transform: translateY(-4px) scale(1.05);
    }
}

.result-card:hover {
    animation: resultCardPop 0.3s ease;
}

/* Learning Item Animation */
@keyframes learningItemReveal {
    from {
        opacity: 0;
        transform: translateX(-20px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.learning-item {
    animation: learningItemReveal 0.5s ease forwards;
    opacity: 0;
}

.learning-item:nth-child(1) { animation-delay: 0.1s; }
.learning-item:nth-child(2) { animation-delay: 0.2s; }
.learning-item:nth-child(3) { animation-delay: 0.3s; }
.learning-item:nth-child(4) { animation-delay: 0.4s; }

/* Link Button Hover */
@keyframes linkButtonSlide {
    from {
        transform: translateX(0);
    }
    to {
        transform: translateX(4px);
    }
}

.link-btn:hover {
    animation: linkButtonSlide 0.3s ease forwards;
}

/* Background Animations */
@keyprojects particlesFloat {
    0%, 100% {
        transform: translateY(0) rotate(0);
    }
    25% {
        transform: translateY(-20px) rotate(90deg);
    }
    50% {
        transform: translateY(0) rotate(180deg);
    }
    75% {
        transform: translateY(20px) rotate(270deg);
    }
}

.projects-bg-particles::before {
    content: '✦';
    position: absolute;
    font-size: 24px;
    color: var(--color-primary-600);
    opacity: 0.1;
    animation: particlesFloat 20s linear infinite;
}

.projects-bg-particles::after {
    content: '◆';
    position: absolute;
    font-size: 20px;
    color: var(--color-green);
    opacity: 0.1;
    animation: particlesFloat 25s linear infinite reverse;
}

/* Category Color Transitions */
.project-card[data-category="ml"]::before {
    background: var(--color-primary-600);
}

.project-card[data-category="analytics"]::before {
    background: var(--color-green);
}

.project-card[data-category="engineering"]::before {
    background: var(--color-purple);
}

/* Smooth View Transition */
@keyprojects gridToList {
    from {
        grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
    }
    to {
        grid-template-columns: 1fr;
    }
}

.projects-grid:not(.active) {
    animation: gridToList 0.3s ease reverse;
}

.projects-grid.active {
    animation: gridToList 0.3s ease;
}

/* Success Toast Animation */
@keyprojects toastSlideIn {
    from {
        transform: translateY(100%);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

.success-toast {
    animation: toastSlideIn 0.3s ease forwards;
}

/* Scroll Animation for Project Cards */
@keyprojects cardReveal {
    from {
        opacity: 0;
        transform: translateY(60px) scale(0.9);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.project-card.revealed {
    animation: cardReveal 0.6s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}

.list-item.revealed {
    animation: cardReveal 0.6s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}

/* Responsive Adjustments for Animations */
@media (max-width: 768px) {
    @keyprojects mobileCardLift {
        from {
            transform: translateY(0);
        }
        to {
            transform: translateY(-4px);
        }
    }
    
    .project-card:hover {
        animation: mobileCardLift 0.3s ease forwards;
    }
    
    @keyprojects mobileListItemSlide {
        from {
            transform: translateX(0);
        }
        to {
            transform: translateX(4px);
        }
    }
    
    .list-item:hover {
        animation: mobileListItemSlide 0.3s ease forwards;
    }
}