/* =========================================================================
   SECTION TRANSITIONS — Gradient Mesh Dividers & Ambient Drift
   Matches GradientScaffold + AppBackground dual-glow pattern from Flutter app.
   ========================================================================= */

/* ── Gradient Mesh Divider (hero → synergy, features → trust) ──────── */

.section-divider {
    position: relative;
    height: clamp(80px, 12vh, 140px);
    overflow: hidden;
    pointer-events: none;
}

.section-divider::before,
.section-divider::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
}

/* Light-to-light gradient transition */
.section-divider--warm::before {
    background: linear-gradient(
        180deg,
        var(--clr-bg-light) 0%,
        #FFF5ED 40%,
        #FEF0E5 60%,
        var(--clr-bg-light) 100%
    );
    opacity: 0.8;
}

.section-divider--warm::after {
    background:
        radial-gradient(ellipse at 20% 50%, rgba(244, 123, 37, 0.08) 0%, transparent 60%),
        radial-gradient(ellipse at 80% 50%, rgba(45, 212, 191, 0.06) 0%, transparent 60%);
    animation: breatheSlow 8s ease-in-out infinite;
}

/* Light-to-dark gradient transition */
.section-divider--dark::before {
    background: linear-gradient(
        180deg,
        var(--clr-bg-light) 0%,
        #E8DDD0 20%,
        #1a1208 60%,
        var(--clr-bg-dark) 100%
    );
}

.section-divider--dark::after {
    background:
        radial-gradient(ellipse at 30% 80%, rgba(245, 158, 11, 0.12) 0%, transparent 50%),
        radial-gradient(ellipse at 70% 30%, rgba(225, 29, 72, 0.08) 0%, transparent 50%);
    animation: breatheSlow 10s ease-in-out infinite;
}

/* Dark-to-light gradient transition */
.section-divider--dawn::before {
    background: linear-gradient(
        180deg,
        var(--clr-bg-dark) 0%,
        #1a1208 30%,
        #D4C4B0 70%,
        var(--clr-bg-light) 100%
    );
}

.section-divider--dawn::after {
    background:
        radial-gradient(ellipse at 50% 40%, rgba(244, 123, 37, 0.10) 0%, transparent 50%),
        radial-gradient(ellipse at 60% 80%, rgba(167, 139, 250, 0.06) 0%, transparent 50%);
    animation: breatheSlow 12s ease-in-out infinite;
}

/* ── Floating Ambient Glows (mirrors AppBackground dual glow orbs) ──── */

.ambient-glow {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    z-index: 0;
    filter: blur(80px);
}

.ambient-glow--1 {
    width: clamp(200px, 40vw, 500px);
    height: clamp(200px, 40vw, 500px);
    background: radial-gradient(circle, rgba(245, 158, 11, 0.10) 0%, transparent 70%);
    top: -10%;
    right: -10%;
    animation: floatDrift 20s ease-in-out infinite;
}

.ambient-glow--2 {
    width: clamp(180px, 35vw, 450px);
    height: clamp(180px, 35vw, 450px);
    background: radial-gradient(circle, rgba(225, 29, 72, 0.08) 0%, transparent 70%);
    bottom: -10%;
    left: -10%;
    animation: floatDrift 25s ease-in-out infinite reverse;
}

/* Trust section glows (dark background — matches DarkTheme glow colors) */
.ambient-glow--trust-1 {
    width: clamp(250px, 45vw, 550px);
    height: clamp(250px, 45vw, 550px);
    background: radial-gradient(circle, rgba(245, 158, 11, 0.15) 0%, transparent 70%);
    top: 5%;
    left: -5%;
    animation: floatDrift 18s ease-in-out infinite;
}

.ambient-glow--trust-2 {
    width: clamp(200px, 40vw, 500px);
    height: clamp(200px, 40vw, 500px);
    background: radial-gradient(circle, rgba(225, 29, 72, 0.12) 0%, transparent 70%);
    bottom: 10%;
    right: -8%;
    animation: floatDrift 22s ease-in-out infinite reverse;
}