/* Extracted from home.html */

.modal-overlay {
        animation: fadeIn 0.3s ease;
    }

    .modal-content {
        animation: slideUp 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
    }

    @keyframes fadeIn {
        from {
            opacity: 0;
        }

        to {
            opacity: 1;
        }
    }

    @keyframes slideUp {
        from {
            transform: translateY(40px);
            opacity: 0;
        }

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

    .gallery-indicator {
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.4);
    }

    .gallery-indicator.active {
        background: #fff;
        width: 24px;
        border-radius: 4px;
    }

    /* Portfolio Grid Item Animations */
    .wrisda-grid-item {
        position: relative;
        border-radius: 24px;
        overflow: hidden;
        transition: transform 0.6s cubic-bezier(0.165, 0.84, 0.44, 1), opacity 0.6s ease;
        opacity: 0;
        transform: translateY(40px);
        transform-style: preserve-3d;
    }

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

    .wrisda-grid-item.reveal {
        opacity: 1 !important;
        transform: translateY(0) !important;
        animation: revealCard 0.8s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
        will-change: transform, opacity;
    }

    .wrisda-grid-item:hover {
        transform: translateY(-10px) scale(1.02) !important;
        box-shadow: 0 30px 60px -15px rgba(30, 58, 138, 0.3) !important;
        z-index: 10;
        transition: transform 0.3s cubic-bezier(0.23, 1, 0.32, 1), box-shadow 0.3s ease;
    }

    .wrisda-grid-item img {
        transition: transform 0.8s cubic-bezier(0.165, 0.84, 0.44, 1);
        transform: translateZ(20px);
    }

    .wrisda-grid-item:hover img {
        transform: scale(1.1) translateZ(40px);
    }

    .wrisda-grid-item-content {
        transform: translateZ(50px);
    }

    .wrisda-grid-item:hover .read-more-btn {
        background: #3b82f6 !important;
        transform: translateZ(70px) scale(1.05);
        box-shadow: 0 10px 20px rgba(59, 130, 246, 0.4) !important;
    }

    /* ── Projects Marquee ── */
    .marquee-section {
        overflow: hidden;
        padding: 2rem 0;
        position: relative;
        width: 100%;
    }
    
    .marquee-section::before,
    .marquee-section::after {
        content: '';
        position: absolute;
        top: 0; bottom: 0;
        width: 150px;
        z-index: 2;
        pointer-events: none;
    }
    .marquee-section::before { left: 0; background: linear-gradient(to right, #dbeafe, transparent); }
    .marquee-section::after  { right: 0; background: linear-gradient(to left,  #dbeafe, transparent); }

    .marquee-track {
        display: flex;
        gap: 2rem;
        width: max-content;
        animation: scroll-left 35s linear infinite;
        padding: 1rem 0;
    }
    
    .marquee-track:hover {
        animation-play-state: paused;
    }

    @keyframes scroll-left {
        0%   { transform: translateX(0); }
        100% { transform: translateX(-50%); }
    }

    /* Adjust project card for marquee */
    .wrisda-grid-item {
        width: 380px;
        flex-shrink: 0;
        opacity: 1 !important; /* Always visible in marquee */
        transform: none !important; /* Let animation handle movement */
    }