/* --- 1. Base Container & forced Spacing --- */
.carousel-section-wrapper {
    position: relative;
    width: 100%;
    background: #111827; 
    border-radius: 0 !important; 
    overflow: hidden; 
    isolation: isolate; 
}

.dynamic-coverflow {
    width: 100%;
    padding-top: 120px !important; 
    padding-bottom: 120px !important; 
    position: relative;
    z-index: 10; 
}

.dynamic-coverflow .swiper-wrapper {
    transition-timing-function: linear !important;
}

/* --- 2. Breathing Heart Overlay --- */
.breathing-heart-overlay {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    z-index: 5; 
    pointer-events: none; 
    overflow: hidden;
}

/* --- Breathing Instructions (Fixed Position) --- */
.breathing-instructions {
    position: absolute;
    width: 100%;
    top: 60px; 
    transform: translateY(-50%);
    text-align: center;
}

.breathing-instructions h3 {
    margin: 0;
    color: #ffffff; 
    font-size: 1.8rem;
    font-weight: 500;
    letter-spacing: 1px;
    text-shadow: 0 4px 8px rgba(0,0,0,0.8); 
}

/* --- 3. Gather & Form Heart Network Outline --- */
.particle-container {
    position: absolute;
    /* Hearts origin point (center point of the complex cardioid math) */
    top: 50%; left: 50%; 
    width: 0; height: 0; 
}

.tiny-heart {
    position: absolute;
    top: 0; left: 0;
    width: var(--size);
    height: var(--size);
    margin-top: calc(var(--size) / -2);
    margin-left: calc(var(--size) / -2);
    
    /* V2.1 Clip Path */
    clip-path: path('M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z');
    
    /* Refined visibility for high count */
    background: rgba(255, 255, 255, 0.6); /* Slightly less opaque due to overlapping */
    /* Softer glow to prevent blending into a cloud; helps outline visibility */
    filter: blur(1.5px) drop-shadow(0 0 5px rgba(255, 255, 255, 0.9));
    
    will-change: transform, opacity;
    /* 10s loop synchronized with the JS text */
    animation: breathHeartOutline 10s ease-in-out infinite; 
    /* Delay applied by JS timer or randomized by PHP—we apply PHP here for smoother arrival */
    animation-delay: var(--drift-delay) !important;
}

/* SYNCHRONIZED OUTLINE ANIMATION */
@keyframes breathHeartOutline {
    /* 0%: Start pulled in tight to the center, slightly faded */
    0%   { transform: translate(0, 0) scale(0.2); opacity: 0; }
    
    /* 10%: Fading in as they start to spread */
    10%  { opacity: 1; }
    
    /* 40%: Fully spread out based on cardioid math, forming the outline (End of Inhale) */
    40%  { transform: translate(var(--spread-x), var(--spread-y)) scale(1); opacity: 1; }
    
    /* 90%: Stay visible as they pull back to center */
    90%  { opacity: 1; }
    
    /* 100%: Pulled back into the center completely, faded out (End of Exhale) */
    100% { transform: translate(0, 0) scale(0.2); opacity: 0; }
}

/* --- 4. The Slide & Aspect Ratio --- */
.dynamic-coverflow .swiper-slide {
    width: 300px; 
    height: 400px; 
    border-radius: 0 !important; 
    transition-timing-function: linear !important; 
}

/* --- 5. The "Pop Up" Hover Effect --- */
.card-hover-wrapper {
    width: 100%; height: 100%; position: relative; opacity: 0.6; 
    transition: transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1), box-shadow 0.4s ease, opacity 0.4s ease;
    will-change: transform, box-shadow, opacity;
}

.dynamic-coverflow .swiper-slide-active .card-hover-wrapper { opacity: 1; }

.dynamic-coverflow .swiper-slide-active:hover .card-hover-wrapper {
    transform: scale(1.08) translateY(-15px);
    box-shadow: 0 30px 60px rgba(0,0,0,0.8);
    z-index: 100;
}

/* --- 6. Card Image Formatting --- */
.coverflow-card {
    display: block; width: 100%; height: 100%; position: relative; background: #111; 
}

.coverflow-card img {
    width: 100%; height: 100%; object-fit: cover; display: block;
}

/* --- 7. Modern Glassmorphism Nameplate --- */
.coverflow-card .card-info {
    position: absolute; bottom: 0; left: 0; width: 100%; padding: 20px 15px;
    background: rgba(0, 0, 0, 0.5); 
    backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
    border-top: 1px solid rgba(255, 255, 255, 0.15);
    text-align: center;
    transform: translateY(100%); 
    transition: transform 0.4s ease;
    will-change: transform;
}

.dynamic-coverflow .swiper-slide-active .card-info { transform: translateY(0); }
.coverflow-card .card-info h3 { margin: 0; color: #ffffff; font-size: 1.2rem; font-weight: 600; text-shadow: 0 2px 4px rgba(0,0,0,0.8); }