/* =============================================
   Testimonials Section CSS
   Perfect animations with GPU-accelerated transforms
   ============================================= */

/* CSS Custom Properties for Testimonials */
:root {
    /* Animation timing */
    --testimonial-timing: cubic-bezier(0.34, 1.56, 0.64, 1);
    --testimonial-duration: 500ms;
    --testimonial-fade-duration: 300ms;
    
    /* Avatar sizes */
    --avatar-size-active: 8.125rem;
    --avatar-size-neighbor: 3.75rem;
    --avatar-size-hidden: 2.5rem;
    
    /* Mobile avatar sizes */
    --avatar-size-active-mobile: 5.625rem;
    --avatar-size-neighbor-mobile: 2.5rem;
}

/* =============================================
   Section Container
   ============================================= */
.testimonials-section {
    padding-top: 10rem;
    padding-bottom: 10rem;
    text-align: center;
    margin-top: -2.5rem;
    background-color: var(--color-background);
    overflow: hidden;
}

/* =============================================
   Header
   ============================================= */
.testimonials-header {
    margin-bottom: 3.125rem;
}

.testimonials-label {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 1.25rem;
    font-weight: var(--font-weight-medium);
    color: var(--color-text-main);
    margin-bottom: 0.75rem;
}

.testimonials-label::before {
    content: '';
    display: block;
    width: 1.5rem;
    height: 0.125rem;
    background-color: var(--color-primary);
}

.testimonials-title {
    font-size: clamp(1.75rem, 4vw, 2.5rem);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-main);
    line-height: 1.2;
}

.testimonials-title .highlight {
    color: var(--color-primary);
}

/* =============================================
   Carousel Container
   ============================================= */
.testimonials-carousel-container {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.5rem;
    margin-bottom: 1.875rem;
    position: relative;
    max-width: 62.5rem;
    margin-left: auto;
    margin-right: auto;
}

/* Navigation Buttons */
.carousel-btn {
    width: 3.125rem;
    height: 3.125rem;
    border-radius: 50%;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    flex-shrink: 0;
}

.carousel-btn svg {
    width: 1.5rem;
    height: 1.5rem;
}

.carousel-btn:hover {
    transform: scale(1.1);
}

.carousel-btn:active {
    transform: scale(0.95);
}

.btn-prev {
    background-color: #E6EFDF;
    color: #8FAE89;
}

.btn-prev:hover {
    box-shadow: 0 0.5rem 1.25rem rgba(90, 147, 82, 0.15);
}

.btn-next {
    background-color: var(--color-primary);
    color: #ffffff;
}

.btn-next:hover {
    box-shadow: 0 0.5rem 1.25rem rgba(90, 147, 82, 0.3);
}

/* =============================================
   Avatars Wrapper - Flexbox based layout
   ============================================= */
.avatars-wrapper {
    position: relative;
    width: 60%;
    height: 10rem;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* =============================================
   Avatar Items - Transform-based animations
   ============================================= */
.avatar-item {
    position: absolute;
    width: var(--avatar-size-neighbor);
    height: var(--avatar-size-neighbor);
    border-radius: 50%;
    background-color: #D9D9D9;
    cursor: pointer;
    overflow: hidden;
    border: 0.125rem solid transparent;
    
    /* GPU-accelerated properties */
    transform: scale(1) translateX(0);
    opacity: 0;
    
    /* Smooth spring animation */
    transition: 
        transform var(--testimonial-duration) var(--testimonial-timing),
        opacity var(--testimonial-duration) ease,
        border-color var(--testimonial-duration) ease,
        box-shadow var(--testimonial-duration) ease;
    
    /* Stacking context */
    z-index: 1;
}

.avatar-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

/* Center Position - Active Avatar */
.avatar-item.pos-center {
    transform: scale(2.17) translateX(0);
    opacity: 1;
    z-index: 10;
    border: 0.125rem solid var(--color-primary);
    box-shadow: 0 1rem 2.5rem rgba(0, 0, 0, 0.12);
}

/* Left Position - Neighbor */
.avatar-item.pos-left {
    transform: scale(1) translateX(-7.25rem);
    opacity: 0.6;
    z-index: 5;
}

.avatar-item.pos-left:hover {
    opacity: 0.85;
    transform: scale(1.1) translateX(-7.25rem);
}

/* Right Position - Neighbor */
.avatar-item.pos-right {
    transform: scale(1) translateX(7.25rem);
    opacity: 0.6;
    z-index: 5;
}

.avatar-item.pos-right:hover {
    opacity: 0.85;
    transform: scale(1.1) translateX(7.25rem);
}

/* Far Left Position */
.avatar-item.pos-far-left {
    transform: scale(0.8) translateX(-14.625rem);
    opacity: 0.3;
    z-index: 2;
}

/* Far Right Position */
.avatar-item.pos-far-right {
    transform: scale(0.8) translateX(14.625rem);
    opacity: 0.3;
    z-index: 2;
}

/* Hidden Position */
.avatar-item.pos-hidden {
    transform: scale(0.5) translateX(0);
    opacity: 0;
    z-index: 0;
    pointer-events: none;
}

/* =============================================
   Active User Info - Text transitions
   ============================================= */
.active-user-info {
    margin-bottom: 1.25rem;
}

.user-name,
.user-role {
    transition: 
        opacity var(--testimonial-fade-duration) ease-out,
        transform var(--testimonial-fade-duration) ease-out;
}

.user-name {
    font-size: clamp(1.25rem, 3vw, 1.5rem);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-main);
    margin-bottom: 0.25rem;
}

.user-role {
    font-size: clamp(0.875rem, 2vw, 1rem);
    font-weight: var(--font-weight-regular);
    color: var(--color-text-secondary);
}

/* Text Fade Out State */
.user-name.fade-out,
.user-role.fade-out {
    opacity: 0;
    transform: translateY(-0.5rem);
}

/* Text Fade In State (default is visible) */
.user-name.fade-in,
.user-role.fade-in {
    opacity: 1;
    transform: translateY(0);
}

/* =============================================
   Star Rating
   ============================================= */
.star-rating {
    display: flex;
    justify-content: center;
    gap: 0.375rem;
    margin-bottom: 2.5rem;
}

.star-rating svg {
    width: 1.5rem;
    height: 1.5rem;
    fill: #FFC107;
    transition: transform 0.2s ease;
}

.star-rating svg:hover {
    transform: scale(1.15);
}

/* =============================================
   Quote Block
   ============================================= */
.testimonial-quote-block {
    position: relative;
    max-width: 43.75rem;
    margin: 0 auto;
    padding: 0 2.5rem;
}

.quote-icon-bg {
    position: absolute;
    top: -2.5rem;
    left: 0;
    width: 8.75rem;
    height: auto;
    opacity: 0.08;
    z-index: 0;
    pointer-events: none;
}

.quote-text {
    position: relative;
    z-index: 1;
    font-size: clamp(1rem, 2.5vw, 1.5rem);
    font-weight: var(--font-weight-regular);
    color: var(--color-text-main);
    opacity: 0.8;
    line-height: 1.7;
    
    /* Fade animation */
    transition: 
        opacity var(--testimonial-fade-duration) ease-out,
        transform var(--testimonial-fade-duration) ease-out;
}

/* Quote Fade Out State */
.quote-text.fade-out {
    opacity: 0;
    transform: translateY(-0.625rem);
}

/* Quote Fade In State */
.quote-text.fade-in {
    opacity: 0.8;
    transform: translateY(0);
}

/* =============================================
   Responsive Design
   ============================================= */
@media (max-width: 900px) {
    .testimonials-section {
        padding-top: 5rem;
        padding-bottom: 5rem;
        margin-top: -5.625rem;
    }
    
    .testimonials-header {
        margin-bottom: 2rem;
    }
    
    .testimonials-label {
        font-size: 1rem;
    }
    
    .testimonials-carousel-container {
        gap: 1rem;
    }
    
    .carousel-btn {
        width: 2.75rem;
        height: 2.75rem;
    }
    
    .carousel-btn svg {
        width: 1.25rem;
        height: 1.25rem;
    }
    
    .avatars-wrapper {
        width: 100%;
        height: 7rem;
    }
    
    /* Adjusted mobile transforms */
    .avatar-item {
        width: var(--avatar-size-neighbor-mobile);
        height: var(--avatar-size-neighbor-mobile);
    }
    
    .avatar-item.pos-center {
        transform: scale(2.25) translateX(0);
    }
    
    .avatar-item.pos-left {
        transform: scale(1) translateX(-6rem);
    }
    
    .avatar-item.pos-left:hover {
        transform: scale(1.1) translateX(-6rem);
    }
    
    .avatar-item.pos-right {
        transform: scale(1) translateX(6rem);
    }
    
    .avatar-item.pos-right:hover {
        transform: scale(1.1) translateX(6rem);
    }
    
    
    
    .star-rating {
        margin-bottom: 1.5rem;
    }
    
    .star-rating svg {
        width: 1.25rem;
        height: 1.25rem;
    }
    
    .testimonial-quote-block {
        padding: 0 1rem;
    }
    
    .quote-icon-bg {
        width: 5rem;
        top: -1.5rem;
        left: 0.5rem;
    }
}

/* Small mobile */
@media (max-width: 480px) {
    .testimonials-section {
        padding-top: 3.75rem;
        padding-bottom: 3.75rem;
    }

    .avatar-item.pos-far-left,
    .avatar-item.pos-far-right {
        display: none;
    }
    
    .avatars-wrapper {
        width: 100%;
        height: 6rem;
    }
    
    .avatar-item.pos-left {
        transform: scale(1.7) translateX(-2.5rem);
    }
    
    .avatar-item.pos-right {
        transform: scale(1.7) translateX(2.5rem);
    }
    
    .carousel-btn {
        width: 2.5rem;
        height: 2.5rem;
    }
}