/*
Wavy Divider - SVG wave transitions between sections
Creates smooth, animated waves with morphing paths
*/

/* ========== WAVY DIVIDER CONTAINER ========== */
.wavy-divider-container {
    position: relative;
    width: 100%;
    overflow: visible; /* Allow snacks to extend beyond divider */
    line-height: 0; /* Remove extra space below SVG */
    z-index: 5; /* Ensure divider container is above sections */
}

/* Top wavy (wavy on top edge) */
.wavy-top {
    height: 180px;
    margin-bottom: -2px; /* Prevent gap */
}

/* Bottom wavy (wavy on bottom edge) */
.wavy-bottom {
    height: 180px;
    margin-top: -2px; /* Prevent gap */
}

/* ========== SVG STYLES ========== */
.wavy-svg {
    display: block;
    width: 100%;
    height: 100%;
}

/* ========== SECTION-SPECIFIC FILLS ========== */
/* The wave path fill color is set based on which section it's dividing */
/* Set fill colors based on adjacent sections */

/* Hero to Features (cream to green) */
.hero-section + .wavy-divider-container .wavy-path {
    fill: var(--secondary); /* Green for features section */
}

/* Features to Courses (green to cream) */
.features-section + .wavy-divider-container .wavy-path {
    fill: var(--secondary); /* Green continuing from features */
}

/* Courses to Pricing (cream to blue) */
.courses-section + .wavy-divider-container .wavy-path {
    fill: var(--primary); /* Blue for pricing section */
}

/* Pricing to CTA (blue to cream) */
.pricing-section + .wavy-divider-container .wavy-path {
    fill: var(--primary); /* Blue continuing from pricing */
}

/* Green wavy divider modifier */
.wavy-green .wavy-path {
    fill: var(--secondary) !important; /* Vibrant Green for CTA section */
}

/* ========== DIVIDER SNACKS ========== */
/* Snacks positioned on wavy dividers with floating animations */

/* Centered animations that preserve the translate(-50%, -50%) positioning */
@keyframes float-centered {
    0%, 100% {
        transform: translate(-50%, -50%) translateY(0px) rotate(0deg);
    }
    50% {
        transform: translate(-50%, -50%) translateY(-20px) rotate(2deg);
    }
}

@keyframes float-reverse-centered {
    0%, 100% {
        transform: translate(-50%, -50%) translateY(-10px) rotate(0deg);
    }
    50% {
        transform: translate(-50%, -50%) translateY(10px) rotate(-2deg);
    }
}

@keyframes wave-centered {
    0%, 100% {
        transform: translate(-50%, -50%) translateX(0px) translateY(0px);
    }
    25% {
        transform: translate(-50%, -50%) translateX(10px) translateY(-10px);
    }
    50% {
        transform: translate(-50%, -50%) translateX(0px) translateY(0px);
    }
    75% {
        transform: translate(-50%, -50%) translateX(-10px) translateY(10px);
    }
}

@keyframes wobble-centered {
    0%, 100% {
        transform: translate(-50%, -50%) translateY(0) scaleY(1);
    }
    25% {
        transform: translate(-50%, -50%) translateY(-2%) scaleY(1.02);
    }
    50% {
        transform: translate(-50%, -50%) translateY(1%) scaleY(0.98);
    }
    75% {
        transform: translate(-50%, -50%) translateY(-1%) scaleY(1.01);
    }
}
.divider-snack {
    position: absolute;
    width: 150px; /* 50% bigger than before */
    height: auto;
    opacity: 1; /* Visible by default */
    pointer-events: none;
    z-index: 10; /* Above the wave */
}

/* Individual positioning for each snack - all centered */
.divider-snack-1 {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    animation: float-centered 6s ease-in-out infinite;
    z-index: 15; /* Higher than divider container */
}

.divider-snack-2 {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    animation: wave-centered 7s ease-in-out infinite;
    animation-delay: 1s;
    z-index: 15; /* Higher than divider container */
}

.divider-snack-3 {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    animation: float-reverse-centered 8s ease-in-out infinite;
    animation-delay: 2s;
    z-index: 15; /* Higher than divider container */
}

.divider-snack-4 {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    animation: wobble-centered 6s ease-in-out infinite;
    animation-delay: 0.5s;
    z-index: 15; /* Higher than divider container */
}

.divider-snack-5 {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    animation: float-centered 7s ease-in-out infinite;
    animation-delay: 1.5s;
    z-index: 15; /* Higher than divider container */
}

/* ========== MOBILE RESPONSIVE ========== */
@media (max-width: 768px) {
    .wavy-top,
    .wavy-bottom {
        height: 140px; /* Slightly shorter on mobile */
    }
    
    /* Show snacks on mobile only */
    .divider-snack {
        opacity: 1; /* Visible on mobile */
    }
}