/* ========================================
   SHAPE DIVIDERS - Professional Transitions
   Perfect color matching for each section
   ======================================== */

/* Base Shape Divider Styles */
.shape-divider {
    position: absolute;
    left: 0;
    width: 100%;
    overflow: hidden;
    line-height: 0;
    z-index: 1;
    display: none; /* Hide all shape dividers */
}

.shape-divider svg {
    position: relative;
    display: block;
    width: calc(100% + 1.3px);
    height: 80px;
}

/* Top Dividers */
.shape-divider-top {
    top: 0;
    transform: rotate(0deg);
    display: none; /* Hide all top dividers */
}

/* Bottom Dividers */
.shape-divider-bottom {
    bottom: 0;
    transform: rotate(180deg);
    display: none; /* Hide all bottom dividers */
}

/* ========================================
   HERO SECTION DIVIDER
   Hero (Yellow gradient) → Features (Light cream)
   ======================================== */
.hero-section {
    position: relative;
    padding-bottom: 4rem !important;
}

.hero-section .shape-divider-bottom .shape-fill {
    fill: #FFD54F; /* Matches hero section yellow gradient end */
}

/* Wave Pattern 1 - Smooth Curves */
.hero-wave-pattern {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    overflow: hidden;
    line-height: 0;
}

.hero-wave-pattern svg {
    position: relative;
    display: block;
    width: calc(100% + 1.3px);
    height: 100px;
}

/* ========================================
   FEATURES SECTION DIVIDER
   Features (Light cream) → Categories (White)
   ======================================== */
.features-section {
    position: relative;
    padding-bottom: 4rem !important;
}

.features-section .shape-divider-bottom {
    display: none; /* Hide features divider */
}

.features-section .shape-divider-bottom .shape-fill {
    fill: #e0e7ff; /* Matches features section gradient end */
}

/* ========================================
   CATEGORIES SECTION DIVIDER
   Categories (White) → Notes (Light gray)
   ======================================== */
.categories-section {
    position: relative;
    padding-bottom: 4rem !important;
}

.categories-section .shape-divider-bottom {
    display: none; /* Hide categories divider */
}

.categories-section .shape-divider-bottom .shape-fill {
    fill: #ffffff; /* Matches categories section background */
}

/* Diagonal Wave Pattern */
.diagonal-wave svg {
    height: 90px;
}

/* ========================================
   NOTES SECTION DIVIDER
   Notes (Light gray) → Quiz (Yellow gradient)
   ======================================== */
.notes-section {
    position: relative;
    padding-bottom: 4rem !important;
}

.notes-section .shape-divider-bottom .shape-fill {
    fill: #f8fafc; /* Matches notes section light gray background */
}

/* ========================================
   QUIZ CHALLENGE SECTION DIVIDERS
   Quiz (Yellow) → Community (Purple gradient)
   ======================================== */
.quiz-challenge-section {
    position: relative;
    padding-top: 4rem !important;
    padding-bottom: 4rem !important;
}

.quiz-challenge-section .shape-divider-bottom .shape-fill {
    fill: #fde68a; /* Matches quiz section yellow gradient end */
}

/* ========================================
   COMMUNITY SECTION DIVIDER
   Community (Purple) → Testimonials (Light gray)
   ======================================== */
.community-section {
    position: relative;
    padding-bottom: 4rem !important;
}

.community-section .shape-divider-bottom .shape-fill {
    fill: #764ba2; /* Matches community section purple gradient end */
}

/* ========================================
   TESTIMONIALS SECTION DIVIDER
   Testimonials (Light gray) → Leaderboard (White container)
   ======================================== */
.testimonials-section {
    position: relative;
    padding-bottom: 4rem !important;
}

.testimonials-section .shape-divider-bottom .shape-fill {
    fill: #f8fafc; /* Matches testimonials section background */
}

/* ========================================
   DIFFERENT WAVE PATTERNS
   ======================================== */

/* Pattern 1: Smooth Wave */
.wave-smooth path {
    d: path("M0,64L48,69.3C96,75,192,85,288,80C384,75,480,53,576,48C672,43,768,53,864,58.7C960,64,1056,64,1152,58.7C1248,53,1344,43,1392,37.3L1440,32L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z");
}

/* Pattern 2: Layered Waves */
.wave-layered {
    height: 100px;
}

.wave-layered svg {
    height: 100px;
}

/* Pattern 3: Curved */
.wave-curved svg {
    height: 85px;
}

/* Pattern 4: Tilt */
.wave-tilt svg {
    height: 70px;
}

/* Pattern 5: Triangle */
.wave-triangle svg {
    height: 80px;
}

/* Pattern 6: Split */
.wave-split svg {
    height: 90px;
}

/* ========================================
   RESPONSIVE ADJUSTMENTS
   ======================================== */
@media (max-width: 992px) {
    .shape-divider svg {
        height: 60px;
    }
    
    .hero-wave-pattern svg {
        height: 70px;
    }
    
    .wave-layered svg {
        height: 70px;
    }
}

@media (max-width: 768px) {
    .shape-divider svg {
        height: 50px;
    }
    
    .hero-wave-pattern svg {
        height: 60px;
    }
    
    .wave-layered svg,
    .wave-curved svg,
    .wave-split svg {
        height: 50px;
    }
    
    .wave-tilt svg,
    .wave-triangle svg {
        height: 40px;
    }
    
    /* Reduce section padding on mobile */
    .hero-section,
    .features-section,
    .categories-section,
    .notes-section,
    .quiz-challenge-section,
    .community-section,
    .testimonials-section {
        padding-bottom: 4rem !important;
    }
}

@media (max-width: 480px) {
    .shape-divider svg {
        height: 40px;
    }
    
    .hero-wave-pattern svg {
        height: 50px;
    }
    
    .wave-layered svg {
        height: 40px;
    }
}

/* ========================================
   DARK MODE SHAPE DIVIDERS
   ======================================== */
[data-theme="dark"] .hero-section .shape-divider-bottom .shape-fill {
    fill: #334155; /* Dark hero gradient end */
}

[data-theme="dark"] .features-section .shape-divider-bottom .shape-fill {
    fill: #334155; /* Dark features gradient end */
}

[data-theme="dark"] .categories-section .shape-divider-bottom .shape-fill {
    fill: #0f172a; /* Dark categories background */
}

[data-theme="dark"] .notes-section .shape-divider-bottom .shape-fill {
    fill: #1e293b; /* Dark notes background */
}

[data-theme="dark"] .quiz-challenge-section .shape-divider-bottom .shape-fill {
    fill: #fde68a; /* Quiz yellow gradient end */
}

[data-theme="dark"] .community-section .shape-divider-bottom .shape-fill {
    fill: #764ba2; /* Community purple gradient (same in dark) */
}

[data-theme="dark"] .testimonials-section .shape-divider-bottom .shape-fill {
    fill: #0f172a; /* Dark testimonials background */
}

/* ========================================
   ANIMATION EFFECTS (Optional)
   ======================================== */
.shape-divider.animated svg {
    animation: wave-animation 10s linear infinite;
}

@keyframes wave-animation {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-50%);
    }
}

/* Subtle shadow for depth */
.shape-divider svg {
    filter: drop-shadow(0 -2px 4px rgba(0, 0, 0, 0.05));
}

[data-theme="dark"] .shape-divider svg {
    filter: drop-shadow(0 -2px 6px rgba(0, 0, 0, 0.3));
}