/* ========================================
   PAGE BACKGROUND GRADIENTS
   Subtle flowing gradients for various page sections
   ======================================== */

/* About Page Sections */
.about-hero,
.about-mission,
.about-vision,
.about-values,
.about-privacy,
.about-team,
.about-donation,
.about-cta {
    position: relative;
    overflow: hidden;
}

/* About Hero - Right side gradient (similar to hero) */
.about-hero::before {
    content: '';
    position: absolute;
    top: -40%;
    right: -10%;
    width: 50%;
    height: 132%;
    background: radial-gradient(circle, rgba(0, 178, 138, 0.10) 0%, rgba(0, 168, 255, 0.06) 40%, transparent 70%);
    transform: rotate(20deg);
    pointer-events: none;
    z-index: 0;
}

/* About Mission - Left side gradient */
.about-mission::after {
    content: '';
    position: absolute;
    bottom: -20%;
    left: -10%;
    width: 42%;
    height: 105%;
    background: radial-gradient(circle, rgba(106, 90, 255, 0.08) 0%, transparent 65%);
    transform: rotate(-18deg);
    pointer-events: none;
    z-index: 0;
}

/* About Vision - Right side gradient */
.about-vision::before {
    content: '';
    position: absolute;
    top: -15%;
    right: -6%;
    width: 39%;
    height: 94%;
    background: radial-gradient(circle, rgba(34, 197, 94, 0.08) 0%, transparent 68%);
    transform: rotate(12deg);
    pointer-events: none;
    z-index: 0;
}

/* About Values - Left side gradient */
.about-values::after {
    content: '';
    position: absolute;
    top: -30%;
    left: -8%;
    width: 44%;
    height: 110%;
    background: radial-gradient(circle, rgba(255, 170, 0, 0.06) 0%, transparent 65%);
    transform: rotate(-22deg);
    pointer-events: none;
    z-index: 0;
}

/* About Privacy - Right side gradient */
.about-privacy::before {
    content: '';
    position: absolute;
    bottom: -25%;
    right: -9%;
    width: 40%;
    height: 105%;
    background: radial-gradient(circle, rgba(255, 107, 107, 0.06) 0%, transparent 70%);
    transform: rotate(16deg);
    pointer-events: none;
    z-index: 0;
}

/* About Team - Left side gradient */
.about-team::after {
    content: '';
    position: absolute;
    top: -20%;
    left: -6%;
    width: 36%;
    height: 99%;
    background: radial-gradient(circle, rgba(147, 51, 234, 0.06) 0%, transparent 68%);
    transform: rotate(-14deg);
    pointer-events: none;
    z-index: 0;
}

/* About Donation - Right side gradient */
.about-donation::before {
    content: '';
    position: absolute;
    top: -35%;
    right: -8%;
    width: 44%;
    height: 116%;
    background: radial-gradient(circle, rgba(0, 168, 255, 0.08) 0%, transparent 75%);
    transform: rotate(18deg);
    pointer-events: none;
    z-index: 0;
}

/* About CTA - Left side mixed gradient */
.about-cta::after {
    content: '';
    position: absolute;
    bottom: -30%;
    left: -7%;
    width: 42%;
    height: 110%;
    background: radial-gradient(circle, rgba(0, 178, 138, 0.06) 0%, rgba(34, 197, 94, 0.04) 50%, transparent 75%);
    transform: rotate(-20deg);
    pointer-events: none;
    z-index: 0;
}

/* Persona Archive Sections */
.personas-hero,
.personas-content {
    position: relative;
    overflow: hidden;
}

/* Personas Hero - Right side gradient */
.personas-hero::before {
    content: '';
    position: absolute;
    top: -30%;
    right: -8%;
    width: 44%;
    height: 110%;
    background: radial-gradient(circle, rgba(106, 90, 255, 0.09) 0%, rgba(147, 51, 234, 0.06) 40%, transparent 70%);
    transform: rotate(15deg);
    pointer-events: none;
    z-index: 0;
}

/* Personas Content - Left side subtle gradient */
.personas-content::after {
    content: '';
    position: absolute;
    top: 20%;
    left: -6%;
    width: 33%;
    height: 55%;
    background: radial-gradient(circle, rgba(0, 178, 138, 0.05) 0%, transparent 65%);
    transform: rotate(-12deg);
    pointer-events: none;
    z-index: 0;
}

/* Persona Cards - Subtle hover gradient */
.persona-card-enhanced::before,
.persona-card::before {
    content: '';
    position: absolute;
    top: -100%;
    right: -100%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle at 50% 50%, rgba(0, 168, 255, 0.05) 0%, transparent 50%);
    opacity: 0;
    transition: opacity 0.5s ease;
    pointer-events: none;
    z-index: 0;
}

.persona-card-enhanced:hover::before,
.persona-card:hover::before {
    opacity: 1;
}

/* Ensure content stays above gradients */
.about-hero > .container,
.about-mission > .container,
.about-vision > .container,
.about-values > .container,
.about-privacy > .container,
.about-team > .container,
.about-donation > .container,
.about-cta > .container,
.personas-hero > .container,
.personas-content > .container {
    position: relative;
    z-index: 1;
}

/* Subtle animations for some gradients */
@keyframes gradientPulse {
    0% {
        transform: rotate(var(--rotation)) translateX(0) scale(1);
        opacity: 1;
    }
    25% {
        transform: rotate(var(--rotation)) translateX(-2%) scale(1.04);
        opacity: 0.92;
    }
    50% {
        transform: rotate(var(--rotation)) translateX(-3%) scale(1.06);
        opacity: 0.88;
    }
    75% {
        transform: rotate(var(--rotation)) translateX(-2%) scale(1.04);
        opacity: 0.92;
    }
    100% {
        transform: rotate(var(--rotation)) translateX(0) scale(1);
        opacity: 1;
    }
}

/* Apply subtle animation to selected gradients */
.about-hero::before {
    --rotation: 20deg;
    animation: gradientPulse 35s ease-in-out infinite;
}

.about-mission::after {
    --rotation: -18deg;
    animation: gradientPulse 32s ease-in-out infinite;
    animation-delay: 4s;
}

.about-vision::before {
    --rotation: 12deg;
    animation: gradientPulse 30s ease-in-out infinite;
    animation-delay: 8s;
}

.about-values::after {
    --rotation: -22deg;
    animation: gradientPulse 33s ease-in-out infinite;
    animation-delay: 12s;
}

.about-privacy::before {
    --rotation: 16deg;
    animation: gradientPulse 31s ease-in-out infinite;
    animation-delay: 16s;
}

.about-team::after {
    --rotation: -14deg;
    animation: gradientPulse 34s ease-in-out infinite;
    animation-delay: 20s;
}

.about-donation::before {
    --rotation: 18deg;
    animation: gradientPulse 36s ease-in-out infinite;
    animation-delay: 24s;
}

.about-cta::after {
    --rotation: -20deg;
    animation: gradientPulse 32s ease-in-out infinite;
    animation-delay: 28s;
}

.personas-hero::before {
    --rotation: 15deg;
    animation: gradientPulse 30s ease-in-out infinite;
    animation-delay: 5s;
}

.personas-content::after {
    --rotation: -12deg;
    animation: gradientPulse 28s ease-in-out infinite;
    animation-delay: 10s;
}

/* Mobile adjustments */
@media (max-width: 768px) {
    .about-hero::before,
    .about-mission::after,
    .about-vision::before,
    .about-values::after,
    .about-privacy::before,
    .about-team::after,
    .about-donation::before,
    .about-cta::after,
    .personas-hero::before,
    .personas-content::after {
        opacity: 0.6;
        width: 70%;
    }
}

/* Dark mode adjustments */
@media (prefers-color-scheme: dark) {
    .about-hero::before {
        background: radial-gradient(circle at 20% 50%, rgba(0, 178, 138, 0.14) 0%, rgba(0, 168, 255, 0.10) 40%, transparent 70%);
    }
    
    .about-mission::after {
        background: radial-gradient(ellipse at 80% 40%, rgba(106, 90, 255, 0.12) 0%, transparent 65%);
    }
    
    .about-vision::before {
        background: radial-gradient(circle at 30% 60%, rgba(34, 197, 94, 0.12) 0%, transparent 68%);
    }
    
    .about-values::after {
        background: radial-gradient(ellipse at 70% 30%, rgba(255, 170, 0, 0.10) 0%, transparent 65%);
    }
    
    .about-privacy::before {
        background: radial-gradient(circle at 25% 70%, rgba(255, 107, 107, 0.10) 0%, transparent 70%);
    }
    
    .about-team::after {
        background: radial-gradient(ellipse at 75% 45%, rgba(147, 51, 234, 0.10) 0%, transparent 68%);
    }
    
    .about-donation::before {
        background: radial-gradient(circle at 35% 55%, rgba(0, 168, 255, 0.12) 0%, transparent 75%);
    }
    
    .personas-hero::before {
        background: radial-gradient(circle at 30% 50%, rgba(106, 90, 255, 0.13) 0%, rgba(147, 51, 234, 0.10) 40%, transparent 70%);
    }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    .about-hero::before,
    .about-mission::after,
    .about-vision::before,
    .about-values::after,
    .about-privacy::before,
    .about-team::after,
    .about-donation::before,
    .about-cta::after,
    .personas-hero::before,
    .personas-content::after,
    .persona-card-enhanced::before,
    .persona-card::before {
        display: none;
    }
}