.testimonial-cards-fan {
    perspective: 2000px;
}

.testimonial-card {
    position: absolute;
    left: 50%;
    top: 50%;
    transition: all 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
    will-change: transform, opacity, box-shadow;
    transform-origin: center center;
}

/* === FAN STATE (DEFAULT) === */

/* Main Card (1) - Focal Point */
.card-1 {
    z-index: 60;
    transform: translate(-50%, -50%) scale(1);
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
    filter: brightness(1.1);
}

/* Inner Pair (2 & 3) */
.card-2 {
    z-index: 50;
    transform: translate(-50%, -50%) translate(-160px, 10px) rotate(-8deg) scale(0.95);
    opacity: 0.9;
}

.card-3 {
    z-index: 50;
    transform: translate(-50%, -50%) translate(160px, 10px) rotate(8deg) scale(0.95);
    opacity: 0.9;
}

/* Outer Pair (4 & 5) */
.card-4 {
    z-index: 40;
    transform: translate(-50%, -50%) translate(-300px, 40px) rotate(-16deg) scale(0.9);
    opacity: 0.8;
}

.card-5 {
    z-index: 40;
    transform: translate(-50%, -50%) translate(300px, 40px) rotate(16deg) scale(0.9);
    opacity: 0.8;
}

/* Back Card (6) - Depth Anchor */
.card-6 {
    z-index: 30;
    transform: translate(-50%, -50%) translateY(-20px) scale(0.88);
    opacity: 0.6;
    filter: brightness(0.7);
}

/* === GRID STATE (HOVER) === */

.group:hover .testimonial-card {
    z-index: 50;
    opacity: 1;
    filter: brightness(1);
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

/* Row 1 */
.group:hover .card-2 {
    transform: translate(-50%, -50%) translate(-105%, -55%) rotate(0deg) scale(1);
}

.group:hover .card-1 {
    transform: translate(-50%, -50%) translate(0%, -55%) rotate(0deg) scale(1);
}

.group:hover .card-3 {
    transform: translate(-50%, -50%) translate(105%, -55%) rotate(0deg) scale(1);
}

/* Row 2 */
.group:hover .card-4 {
    transform: translate(-50%, -50%) translate(-105%, 55%) rotate(0deg) scale(1);
}

.group:hover .card-6 {
    transform: translate(-50%, -50%) translate(0%, 55%) rotate(0deg) scale(1);
}

.group:hover .card-5 {
    transform: translate(-50%, -50%) translate(105%, 55%) rotate(0deg) scale(1);
}

/* Mobile Layout Override */
@media (max-width: 1024px) {
    .testimonial-cards-fan {
        height: auto !important;
        display: flex;
        flex-direction: column;
        padding: 4rem 1rem;
        gap: 1.5rem;
    }

    .testimonial-card {
        position: relative !important;
        left: auto !important;
        top: auto !important;
        transform: none !important;
        width: 100% !important;
        max-width: 28rem !important;
        opacity: 1 !important;
    }

    .group:hover .testimonial-card {
        transform: none !important;
    }
}