#projects {
    padding: 6rem 2rem;
    background: var(--primary-color);
    isolation: isolate;
    position: relative;
    z-index: 9999;
}

.projects-inner {
    max-width: 1100px;
    margin: 0 auto;
    color: #eaeaea;
}

.projects-title {
    font-family: 'BBH Sans Bartle', sans-serif;
    font-size: 2rem;
    margin: 0 0 0.25rem 0;
    color: #f8f8f8;
}

.projects-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 18px;
}

.projects-controls {
    display: flex;
    align-items: center;
    gap: 12px;
}

.projects-showcase {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-auto-rows: 220px;
    gap: 18px;
    align-items: stretch;
}

.project-card {
    position: relative;
    overflow: hidden;
    border-radius: 14px;
    box-shadow: 0 6px 24px rgba(0,0,0,0.45);
    background: rgba(10,10,10,0.45);
    display: flex;
    align-items: flex-end;
    transition: transform 420ms cubic-bezier(.2,.9,.2,1), box-shadow 300ms ease, opacity 380ms ease;
    backdrop-filter: blur(4px) saturate(1.05);
    opacity: 1;
}

/* Enter state: start slightly lower and faded, then remove class to animate in */
.project-enter {
    opacity: 0;
    transform: translateY(18px) scale(0.995);
}

/* Exit state: quickly fade and lift up */
.project-exit {
    opacity: 0;
    transform: translateY(-22px) scale(0.98) rotate(-0.6deg);
    pointer-events: none;
}

.project-bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center center;
    opacity: 0.7;
    filter: grayscale(20%) contrast(0.95) brightness(0.9);
    transition: opacity 300ms ease, transform 600ms cubic-bezier(.2,.9,.2,1);
}

.project-card:hover .project-bg {
    opacity: 0.85;
    transform: scale(1.04) translateY(-3px);
}

.project-meta {
    position: relative;
    z-index: 2;
    padding: 20px 22px;
    color: #fff;
    width: 100%;
    background: linear-gradient(180deg, rgba(0,0,0,0.05), rgba(0,0,0,0.25));
}

.project-title {
    margin: 0 0 6px 0;
    font-family: 'BBH Sans Bartle', sans-serif;
    font-size: 1.15rem;
    letter-spacing: 0.06em;
    color: #fff;
}

.project-desc {
    margin: 0;
    font-size: 0.85rem;
    color: rgba(245,245,245,0.84);
    max-height: 3.6rem;
    overflow: hidden;
    text-overflow: ellipsis;
    font-family: 'Funnel Sans', sans-serif;
}

.project-link {
    font-family: 'BBH Sans Bartle', sans-serif;
    display: inline-block;
    margin-top: 10px;
    text-decoration: none;
    color: #111;
    background: #f8f8f8;
    padding: 6px 10px;
    border-radius: 9px;
    font-weight: 600;
    font-size: 0.8rem;
}

.project-card--hero {
    grid-column: 1 / -1;
    grid-row: span 2;
    min-height: 420px;
}

.project-card--tall {
    grid-row: span 2;
    min-height: 420px;
}

.project-card--small {
    min-height: 200px;
}

.projects-footer {
    margin-top: 20px;
    display: flex;
    gap: 12px;
    align-items: center;
}

.projects-more {
    color: rgba(250,250,250,0.95);
    text-decoration: none;
    border-bottom: 1px dashed rgba(255,255,255,0.08);
    padding-bottom: 2px;
    font-family: 'BBH Sans Bartle', sans-serif;
}

/* Prettier pill button for shuffle */
.projects-refresh {
    -webkit-appearance: none;
    appearance: none;
    border: none;
    background: linear-gradient(135deg, rgba(255,255,255,0.95), rgba(245,245,245,0.9));
    color: #0b0b0b;
    padding: 10px 16px;
    border-radius: 999px;
    font-weight: 700;
    letter-spacing: 0.02em;
    box-shadow: 0 6px 18px rgba(15,15,15,0.18), inset 0 -2px 0 rgba(0,0,0,0.04);
    cursor: pointer;
    transition: transform 220ms cubic-bezier(.2,.9,.2,1), box-shadow 220ms ease, filter 200ms ease;
}

.projects-refresh:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 26px rgba(15,15,15,0.22), inset 0 -2px 0 rgba(0,0,0,0.03);
    filter: saturate(1.03) brightness(1.01);
}

.projects-refresh:active {
    transform: translateY(0px) scale(0.995);
}

.projects-refresh:focus {
    outline: 3px solid rgba(90,160,255,0.18);
    outline-offset: 4px;
}

@media (max-width: 860px) {
    .projects-showcase {
        grid-template-columns: 1fr;
        grid-auto-rows: auto;
    }

    .project-card--hero, .project-card--tall, .project-card--small {
        grid-row: auto;
        min-height: 260px;
    }

    #projects {
        padding: 3.5rem 1rem;
    }
}