body {
    background-color: #0f172a; /* Slate-900 */
    background-image: 
        radial-gradient(circle at top right, rgba(30,41,59,0.5), transparent 600px),
        radial-gradient(circle at bottom left, #1e293b, #0f172a 800px);
    background-attachment: fixed;
    color: #f1f5f9;
}

.project-card {
    /* Significantly larger Landscape base size */
    width: 220px;
    height: 154px;
    top: 50%;
    left: 50%;
    margin-top: -77px;
    margin-left: -110px;
    transform-origin: center center;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.5), 0 8px 10px -6px rgba(0, 0, 0, 0.5);
}

/* Individual Pastel Color Backgrounds for each card */
.project-card[data-index="1"] { background-color: #ffb3ba; } /* Pastel Pink */
.project-card[data-index="2"] { background-color: #ffdfba; } /* Pastel Orange */
.project-card[data-index="3"] { background-color: #ffffba; } /* Pastel Yellow */
.project-card[data-index="4"] { background-color: #baffc9; } /* Pastel Green */
.project-card[data-index="5"] { background-color: #bae1ff; } /* Pastel Blue */
.project-card[data-index="6"] { background-color: #e2cbff; } /* Pastel Purple */

/* Blend thumbnail into the pastel background */
.project-card img {
    opacity: 0.35;
    mix-blend-mode: multiply;
    transition: all 0.4s ease;
    /* Optional: Slight grayscale helps maintain strong pastel identity */
    filter: grayscale(40%); 
}

@media (min-width: 768px) {
    .project-card {
        width: 320px;
        height: 224px;
        margin-top: -112px;
        margin-left: -160px;
    }
}

/* Vertical Arc Fan Shape `)` with extra spacing for larger Landscape Cards */
.project-card[data-index="1"] { transform: translate(-30px, -140px) rotate(-15deg); z-index: 10; }
.project-card[data-index="2"] { transform: translate(5px, -80px) rotate(-9deg); z-index: 20; }
.project-card[data-index="3"] { transform: translate(25px, -20px) rotate(-3deg); z-index: 30; }
.project-card[data-index="4"] { transform: translate(25px, 20px) rotate(3deg); z-index: 40; }
.project-card[data-index="5"] { transform: translate(5px, 80px) rotate(9deg); z-index: 50; }
.project-card[data-index="6"] { transform: translate(-30px, 140px) rotate(15deg); z-index: 60; }

@media (min-width: 768px) {
    /* Much larger Y offsets on desktop since cards are larger */
    .project-card[data-index="1"] { transform: translate(-50px, -200px) rotate(-18deg); }
    .project-card[data-index="2"] { transform: translate(10px, -110px) rotate(-10deg); }
    .project-card[data-index="3"] { transform: translate(40px, -30px) rotate(-3deg); }
    .project-card[data-index="4"] { transform: translate(40px, 30px) rotate(3deg); }
    .project-card[data-index="5"] { transform: translate(10px, 110px) rotate(10deg); }
    .project-card[data-index="6"] { transform: translate(-50px, 200px) rotate(18deg); }
}

/* Group hover behaviour */
#portfolio-stack:hover .project-card {
    opacity: 0.4;
    filter: blur(2px);
}

/* Specific Card Hover */
#portfolio-stack .project-card:hover {
    opacity: 1;
    filter: none;
    z-index: 100 !important;
    /* Move it further right so it doesn't get covered when scaling huge cards */
    transform: translate(60px, 0px) scale(1.1) rotate(0deg) !important;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5), 0 0 0 2px rgba(234, 179, 8, 0.8);
}

/* Restore the image brightness and color on hovered card */
#portfolio-stack .project-card:hover img {
    opacity: 1;
    mix-blend-mode: normal;
    filter: grayscale(0%) brightness(1.1) contrast(1.1);
    box-shadow: inset 0 0 20px rgba(0,0,0,0.5);
}