/* ===== PUZZLE MATCH ANIMATION ===== */
.puzzle-section {
    padding: 6rem 1rem;
    background: linear-gradient(to bottom, #f8fafc, #e2e8f0);
    text-align: center;
    overflow: hidden;
    position: relative;
    border-top: 1px solid #cbd5e1;
    border-bottom: 1px solid #cbd5e1;
}

.puzzle-container {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0; /* Gap managed by animation */
    height: 250px;
    position: relative;
    margin-bottom: 2rem;
}

.puzzle-piece {
    width: 140px;
    height: 140px;
    background: white;
    filter: drop-shadow(0 10px 15px rgba(0,0,0,0.1));
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 3rem;
    color: #4F46E5;
    position: relative;
    z-index: 2;
}

/* User Piece (Left with "male" connector) */
/* Using SVG mask or clip-path for puzzle shape */
/* Simplified Visual Representation for CSS-only */
.piece-user {
    clip-path: polygon(0% 0%, 100% 0%, 100% 35%, 115% 35%, 115% 65%, 100% 65%, 100% 100%, 0% 100%);
    background: linear-gradient(135deg, #4F46E5, #4338ca);
    color: white;
    margin-right: -14px; /* Offset for the connector */
    animation: puzzle-left 3s infinite ease-in-out;
}

/* Offer Piece (Right with "female" connector) */
.piece-match {
    clip-path: polygon(15% 0%, 100% 0%, 100% 100%, 15% 100%, 15% 65%, 0% 65%, 0% 35%, 15% 35%);
    background: linear-gradient(135deg, #10B981, #059669);
    color: white;
    animation: puzzle-right 3s infinite ease-in-out;
}

.puzzle-icon {
    z-index: 5;
    /* fix icon rotation or placement if needed */
}

.puzzle-text {
    font-size: 1.5rem;
    color: #1e293b;
    font-weight: 700;
    margin-top: 1rem;
    font-family: 'Inter', sans-serif;
}
.puzzle-subtext {
    color: #64748B;
    max-width: 600px;
    margin: 0.5rem auto;
}

@keyframes puzzle-left {
    0%, 10% { transform: translateX(-40px); }
    50%, 100% { transform: translateX(0); }
}

@keyframes puzzle-right {
    0%, 10% { transform: translateX(40px); }
    50%, 100% { transform: translateX(0); }
}

/* Spark/Glow Effect when they meet */
.puzzle-spark {
    position: absolute;
    width: 80px;
    height: 80px;
    background: radial-gradient(circle, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 70%);
    opacity: 0;
    animation: spark-flash 3s infinite ease-in-out;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%) scale(0);
    z-index: 10;
    pointer-events: none;
}

@keyframes spark-flash {
    0%, 45% { opacity: 0; transform: translate(-50%, -50%) scale(0); }
    50% { opacity: 1; transform: translate(-50%, -50%) scale(1.5); }
    100% { opacity: 0; transform: translate(-50%, -50%) scale(2); }
}

/* Responsive */
@media (max-width: 600px) {
    .puzzle-piece { width: 100px; height: 100px; font-size: 2rem; }
    .puzzle-container { height: 180px; }
}