/**
 * About Page - Sky & Cloud Background
 * Matching the reference design for "Qui sommes-nous" section
 */

/* Sky background wrapper for the About page header */
.about-sky-section {
    position: relative;
    overflow: hidden;
    padding: 0;
    margin: 0;
    background: linear-gradient(180deg,
            #4a9fd8 0%,
            #7bb8e3 25%,
            #a8d5f0 50%,
            #d4ebf7 75%,
            #e8f4fa 100%);
}

/* Cloud overlay - first layer (top clouds) */
.about-sky-section::before {
    content: "";
    position: absolute;
    top: -10%;
    left: -10%;
    width: 120%;
    height: 60%;
    background:
        radial-gradient(ellipse 800px 300px at 20% 40%, rgba(255, 255, 255, 0.7) 0%, transparent 50%),
        radial-gradient(ellipse 600px 250px at 60% 30%, rgba(255, 255, 255, 0.6) 0%, transparent 50%),
        radial-gradient(ellipse 700px 280px at 85% 45%, rgba(255, 255, 255, 0.65) 0%, transparent 50%);
    animation: drift-clouds-top 40s ease-in-out infinite;
    pointer-events: none;
    z-index: 1;
}

/* Cloud overlay - second layer (bottom clouds) */
.about-sky-section::after {
    content: "";
    position: absolute;
    bottom: -5%;
    left: -5%;
    width: 110%;
    height: 50%;
    background:
        radial-gradient(ellipse 900px 350px at 15% 60%, rgba(255, 255, 255, 0.5) 0%, transparent 50%),
        radial-gradient(ellipse 750px 300px at 50% 70%, rgba(255, 255, 255, 0.55) 0%, transparent 50%),
        radial-gradient(ellipse 650px 280px at 80% 65%, rgba(255, 255, 255, 0.6) 0%, transparent 50%);
    animation: drift-clouds-bottom 50s ease-in-out infinite;
    pointer-events: none;
    z-index: 1;
}

/* Gentle cloud drift animation - top layer */
@keyframes drift-clouds-top {

    0%,
    100% {
        transform: translate(0, 0);
        opacity: 0.7;
    }

    50% {
        transform: translate(2%, -1%);
        opacity: 0.85;
    }
}

/* Gentle cloud drift animation - bottom layer */
@keyframes drift-clouds-bottom {

    0%,
    100% {
        transform: translate(0, 0);
        opacity: 0.5;
    }

    50% {
        transform: translate(-2%, 1%);
        opacity: 0.65;
    }
}

/* Ensure page header content stays on top */
.about-sky-section .page-header {
    position: relative;
    z-index: 2;
    padding: 3rem 0;
}

/* Adjust text color for better contrast on sky background */
.about-sky-section .page-header h1 {
    color: #1e3a5f;
    text-shadow: 0 2px 4px rgba(255, 255, 255, 0.3);
}

.about-sky-section .page-header p {
    color: #2c5282;
    text-shadow: 0 1px 2px rgba(255, 255, 255, 0.2);
}

/* Wave divider at bottom of sky section */
.about-sky-section .wave-divider {
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 100%;
    height: 80px;
    z-index: 3;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 80' preserveAspectRatio='none'%3E%3Cpath fill='%23ffffff' d='M0,40 C240,70 480,20 720,40 C960,60 1200,10 1440,30 L1440,80 L0,80 Z'/%3E%3C/svg%3E") no-repeat bottom center;
    background-size: 100% 100%;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .about-sky-section .page-header {
        padding: 2rem 0;
    }

    .about-sky-section .wave-divider {
        height: 50px;
    }
}