@import url("./colorpalette.css");

.mission-page {
    background: color-mix(in srgb, var(--primary-color) 5%, var(--white-color));
    overflow-x: hidden;

    .skip-link {
        position: fixed;
        z-index: 1000;
        top: 8px;
        left: 8px;
        padding: 10px 16px;
        border-radius: 10px;
        color: var(--white-color);
        background: var(--black-color);
        transform: translateY(-150%);

        &:focus { transform: translateY(0); }
    }

    .mission-navigation {
        position: absolute;
        inset: 0 0 auto;
        background: transparent;
        box-shadow: none;
    }

    .section-eyebrow {
        margin: 0 0 18px;
        color: var(--secondary-color);
        font-size: .76rem;
        font-weight: 800;
        letter-spacing: .2em;
        text-transform: uppercase;
    }
}

.mission-hero {
    --flight-progress: 0;
    min-height: 190vh;
    padding: 0;
    position: relative;
    display: block;
    color: var(--white-color);
    isolation: isolate;
    background: color-mix(in srgb, var(--primary-color) 70%, var(--black-color));
    perspective: 1100px;

    &::after {
        position: absolute;
        content: "";
        inset: auto 0 0;
        height: 130px;
        z-index: 8;
        background: linear-gradient(transparent, color-mix(in srgb, var(--primary-color) 7%, var(--white-color)));
        pointer-events: none;
    }

    .mission-flight-stage {
        height: 100vh;
        min-height: 680px;
        padding: 175px max(6vw, 24px) 70px;
        position: sticky;
        top: 0;
        display: grid;
        align-items: center;
        overflow: hidden;
        perspective: 1200px;
        background: var(--primary-color);
    }

    .mission-flight-scene {
        position: absolute;
        inset: -7%;
        z-index: 0;
        background-image:
            linear-gradient(90deg, color-mix(in srgb, var(--primary-color) 86%, var(--black-color)) 0%, color-mix(in srgb, var(--primary-color) 40%, transparent) 38%, transparent 70%),
            linear-gradient(0deg, color-mix(in srgb, var(--black-color) 52%, transparent), transparent 55%),
            url("../Assets/mission-eagle-flight.png");
        background-position: center;
        background-size: cover;
        transform: translate3d(calc(var(--flight-progress) * -1.5vw), calc(var(--flight-progress) * -4vh), 0) scale(calc(1.08 + var(--flight-progress) * .28));
        transform-origin: 52% 45%;
        will-change: transform;
    }

    .mission-flight-clouds {
        position: absolute;
        inset: 0;
        z-index: 1;
        overflow: hidden;
        pointer-events: none;

        .flight-cloud {
            width: clamp(260px, 34vw, 620px);
            aspect-ratio: 2.4 / 1;
            position: absolute;
            border-radius: 50%;
            opacity: .72;
            filter: blur(4px);
            background:
                radial-gradient(ellipse at 25% 70%, color-mix(in srgb, var(--white-color) 92%, transparent) 0 25%, transparent 26%),
                radial-gradient(ellipse at 48% 48%, color-mix(in srgb, var(--white-color) 90%, transparent) 0 32%, transparent 33%),
                radial-gradient(ellipse at 72% 68%, color-mix(in srgb, var(--fifth-color) 72%, transparent) 0 27%, transparent 28%);
            will-change: transform, opacity;

            &.flight-cloud--near-left {
                left: -13%;
                bottom: 3%;
                transform: translate3d(calc(var(--flight-progress) * -42vw), calc(var(--flight-progress) * 38vh), 150px) scale(calc(1.25 + var(--flight-progress) * 1.6));
            }

            &.flight-cloud--near-right {
                right: -15%;
                bottom: 10%;
                transform: translate3d(calc(var(--flight-progress) * 45vw), calc(var(--flight-progress) * 35vh), 170px) scale(calc(1.35 + var(--flight-progress) * 1.8));
            }

            &.flight-cloud--mid-left {
                left: 11%;
                top: 18%;
                opacity: .4;
                transform: translate3d(calc(var(--flight-progress) * -24vw), calc(var(--flight-progress) * 11vh), 30px) scale(calc(.65 + var(--flight-progress) * .7));
            }

            &.flight-cloud--mid-right {
                right: 5%;
                top: 28%;
                opacity: .34;
                transform: translate3d(calc(var(--flight-progress) * 26vw), calc(var(--flight-progress) * 9vh), 40px) scale(calc(.7 + var(--flight-progress) * .8));
            }
        }
    }

    .mission-hero__content {
        width: min(700px, 58vw);
        position: relative;
        z-index: 2;
        animation: hero-arrival 900ms cubic-bezier(.2,.8,.2,1);
        transform: translate3d(0, calc(var(--flight-progress) * -10vh), 0);
        opacity: calc(1 - var(--flight-progress) * 1.35);
        will-change: transform, opacity;

        .section-eyebrow {
            color: var(--fifth-color);

            span {
                width: 30px;
                height: 2px;
                margin-right: 10px;
                display: inline-block;
                vertical-align: middle;
                background: currentColor;
            }
        }

        h1 {
            margin: 0;
            font-family: "Archivo Black", sans-serif;
            font-size: clamp(3rem, 6.5vw, 6.5rem);
            line-height: .96;
            letter-spacing: -.055em;
            text-wrap: balance;
            text-shadow: 0 18px 50px color-mix(in srgb, var(--black-color) 32%, transparent);

            em {
                color: var(--fifth-color);
                font-style: normal;
            }
        }

        .mission-hero__summary {
            max-width: 580px;
            margin: 27px 0 32px;
            color: color-mix(in srgb, var(--white-color) 84%, transparent);
            font-size: clamp(1rem, 1.5vw, 1.2rem);
            line-height: 1.75;
        }
    }

    .hero-scroll-link {
        display: inline-flex;
        align-items: center;
        gap: 14px;
        color: var(--white-color);
        font-weight: 700;
        text-decoration: none;

        span {
            width: 42px;
            height: 42px;
            display: grid;
            place-items: center;
            border: 1px solid color-mix(in srgb, var(--white-color) 40%, transparent);
            border-radius: 50%;
            animation: scroll-pulse 1.8s ease-in-out infinite;
        }
    }

    .mission-hero__verse {
        max-width: 430px;
        margin: 0;
        position: absolute;
        right: 5vw;
        bottom: 62px;
        z-index: 2;
        color: color-mix(in srgb, var(--white-color) 82%, transparent);
        font-size: .9rem;
        font-style: italic;
        line-height: 1.7;
        text-align: right;

        strong { color: var(--fifth-color); font-style: normal; }
    }

    .flight-progress {
        position: absolute;
        right: 30px;
        top: 50%;
        z-index: 5;
        display: grid;
        justify-items: center;
        gap: 12px;
        transform: translateY(-50%);

        .flight-progress__label {
            font-size: .62rem;
            font-weight: 800;
            letter-spacing: .2em;
            text-transform: uppercase;
            writing-mode: vertical-rl;
        }

        .flight-progress__track {
            width: 2px;
            height: 110px;
            display: block;
            background: color-mix(in srgb, var(--white-color) 22%, transparent);

            i {
                width: 100%;
                height: calc(var(--flight-progress) * 100%);
                display: block;
                background: var(--fifth-color);
                box-shadow: 0 0 12px var(--fifth-color);
            }
        }
    }

    .mission-hero__depth {
        position: absolute;
        inset: 0;
        z-index: 1;
        pointer-events: none;
        transform-style: preserve-3d;

        .mission-hero__halo {
            width: min(40vw, 570px);
            aspect-ratio: 1;
            position: absolute;
            top: 14%;
            right: 3%;
            border: 1px solid color-mix(in srgb, var(--fifth-color) 35%, transparent);
            border-radius: 50%;
            box-shadow: 0 0 70px color-mix(in srgb, var(--fifth-color) 15%, transparent), inset 0 0 70px color-mix(in srgb, var(--fifth-color) 10%, transparent);
            animation: halo-breathe 5s ease-in-out infinite;
        }

        .mission-hero__flight-line {
            width: 180px;
            height: 1px;
            position: absolute;
            right: 17%;
            background: linear-gradient(90deg, transparent, var(--fifth-color), transparent);
            opacity: 0;
            transform: rotate(-20deg);
            animation: flight-streak 3.8s ease-in-out infinite;

            &.flight-line--one { top: 34%; }
            &.flight-line--two { top: 43%; animation-delay: 1.1s; }
            &.flight-line--three { top: 51%; animation-delay: 2.2s; }
        }

    }
}

.calling-section {
    width: min(1180px, calc(100% - 40px));
    margin: 0 auto 110px;
    position: relative;
    z-index: 5;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;

    .calling-card {
        min-height: 440px;
        padding: clamp(32px, 5vw, 64px);
        position: relative;
        border-radius: 28px;
        background: var(--white-color);
        box-shadow: 0 26px 65px color-mix(in srgb, var(--primary-color) 13%, transparent);
        overflow: hidden;
        transition: transform 300ms ease, box-shadow 300ms ease;

        &:hover {
            transform: translateY(-8px) rotateX(2deg);
            box-shadow: 0 36px 80px color-mix(in srgb, var(--primary-color) 20%, transparent);
        }

        &::before {
            position: absolute;
            content: "";
            width: 180px;
            height: 180px;
            right: -80px;
            bottom: -80px;
            border-radius: 50%;
            background: color-mix(in srgb, var(--fifth-color) 45%, transparent);
        }

        .calling-card__number {
            position: absolute;
            right: 28px;
            top: 12px;
            color: color-mix(in srgb, var(--primary-color) 7%, transparent);
            font-family: "Archivo Black", sans-serif;
            font-size: 7rem;
            line-height: 1;
        }

        .calling-card__icon {
            width: 66px;
            height: 66px;
            margin-bottom: 38px;
            display: grid;
            place-items: center;
            border-radius: 20px;
            color: var(--white-color);
            background: linear-gradient(145deg, var(--primary-color), var(--fourth-color));
            transform: rotate(-5deg);
            box-shadow: 0 16px 30px color-mix(in srgb, var(--primary-color) 24%, transparent);

            svg { width: 36px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
        }

        h2 {
            margin: 0 0 22px;
            color: color-mix(in srgb, var(--primary-color) 60%, var(--black-color));
            font-family: "Archivo Black", sans-serif;
            font-size: clamp(1.7rem, 3vw, 2.65rem);
            line-height: 1.12;
            letter-spacing: -.035em;
        }

        > p:not(.section-eyebrow) { color: color-mix(in srgb, var(--black-color) 68%, transparent); line-height: 1.8; }

        &.calling-card--mission {
            color: var(--white-color);
            background: linear-gradient(145deg, var(--primary-color), color-mix(in srgb, var(--primary-color) 64%, var(--fourth-color)));

            h2 { color: var(--white-color); }
            > p:not(.section-eyebrow) { color: color-mix(in srgb, var(--white-color) 80%, transparent); }
            .calling-card__icon { color: var(--primary-color); background: var(--fifth-color); }
            .calling-card__number { color: color-mix(in srgb, var(--white-color) 9%, transparent); }
        }
    }
}

.commitments-section {
    width: min(1180px, calc(100% - 40px));
    margin: 0 auto;
    padding: 0 0 120px;

    .commitments-section__heading {
        max-width: 640px;
        margin-bottom: 48px;

        h2 { margin: 0; color: color-mix(in srgb, var(--primary-color) 55%, var(--black-color)); font: clamp(2.3rem, 5vw, 4.4rem)/1 "Archivo Black", sans-serif; letter-spacing: -.05em; }
        > p:last-child { color: color-mix(in srgb, var(--black-color) 55%, transparent); font-size: 1.08rem; }
    }

    .commitment-grid {
        margin: 0;
        padding: 0;
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 16px;
        list-style: none;
        counter-reset: commitment;

        .commitment-item {
            min-height: 230px;
            padding: 28px;
            position: relative;
            border: 1px solid color-mix(in srgb, var(--primary-color) 12%, transparent);
            border-radius: 22px;
            background: color-mix(in srgb, var(--white-color) 86%, transparent);
            box-shadow: inset 0 1px 0 var(--white-color);
            overflow: hidden;
            transition: transform 250ms ease, border-color 250ms ease;

            &:hover { transform: translateY(-6px); border-color: var(--secondary-color); }
            &:last-child { grid-column: 2 / 3; }

            > span { color: var(--secondary-color); font-size: .72rem; font-weight: 800; letter-spacing: .18em; }
            h3 { margin: 45px 0 10px; color: var(--primary-color); font: 1.35rem "Archivo Black", sans-serif; }
            p { margin: 0; color: color-mix(in srgb, var(--black-color) 62%, transparent); line-height: 1.65; }

            &::after {
                position: absolute;
                content: "";
                width: 70px;
                height: 70px;
                top: -35px;
                right: -35px;
                border-radius: 50%;
                background: var(--fifth-color);
                opacity: .7;
            }
        }
    }
}

.scripture-section {
    padding: 110px max(5vw, 24px);
    display: grid;
    grid-template-columns: .8fr 1.2fr;
    gap: clamp(50px, 8vw, 120px);
    color: var(--white-color);
    background:
        radial-gradient(circle at 8% 50%, color-mix(in srgb, var(--fourth-color) 38%, transparent), transparent 34%),
        color-mix(in srgb, var(--primary-color) 52%, var(--black-color));

    .scripture-section__intro {
        align-self: center;

        h2 { margin: 0; font: clamp(2.5rem, 5vw, 4.5rem)/1 "Archivo Black", sans-serif; letter-spacing: -.05em; }
        .scripture-section__wing { width: 180px; margin-top: 40px; fill: none; stroke: var(--fifth-color); stroke-width: 2; stroke-linecap: round; opacity: .7; animation: wing-drift 3.5s ease-in-out infinite; }
    }

    .scripture-stack {
        display: grid;
        gap: 20px;

        .scripture-card {
            margin: 0;
            padding: clamp(32px, 5vw, 54px);
            position: relative;
            border: 1px solid color-mix(in srgb, var(--white-color) 14%, transparent);
            border-radius: 26px;
            background: color-mix(in srgb, var(--white-color) 8%, transparent);
            box-shadow: 0 24px 50px color-mix(in srgb, var(--black-color) 25%, transparent);
            backdrop-filter: blur(12px);

            .scripture-card__mark { position: absolute; top: 10px; right: 28px; color: var(--fifth-color); font: 6rem Georgia, serif; opacity: .32; }
            p { margin: 0 0 25px; font-family: Georgia, serif; font-size: clamp(1.2rem, 2.1vw, 1.75rem); line-height: 1.55; }
            cite { color: var(--fifth-color); font-style: normal; font-weight: 800; letter-spacing: .08em; }

            &.scripture-card--accent { margin-left: 12%; background: linear-gradient(135deg, color-mix(in srgb, var(--secondary-color) 78%, transparent), color-mix(in srgb, var(--fourth-color) 48%, transparent)); }
        }
    }
}

.ministry-pledge {
    width: min(1050px, calc(100% - 40px));
    margin: 110px auto;
    padding: clamp(50px, 8vw, 100px);
    position: relative;
    border-radius: 34px;
    text-align: center;
    background: var(--white-color);
    box-shadow: 0 30px 80px color-mix(in srgb, var(--primary-color) 14%, transparent);
    overflow: hidden;

    .ministry-pledge__glow { position: absolute; width: 300px; height: 300px; top: -220px; left: calc(50% - 150px); border-radius: 50%; background: var(--fifth-color); box-shadow: 0 0 100px 55px color-mix(in srgb, var(--fifth-color) 38%, transparent); }
    h2 { max-width: 780px; margin: 0 auto 24px; color: var(--primary-color); font: clamp(2.2rem, 4.7vw, 4.3rem)/1.04 "Archivo Black", sans-serif; letter-spacing: -.05em; }
    > p:not(.section-eyebrow) { max-width: 760px; margin: 0 auto; color: color-mix(in srgb, var(--black-color) 62%, transparent); font-size: 1.1rem; line-height: 1.8; }
    blockquote { margin: 24px 0 0; color: color-mix(in srgb, var(--primary-color) 62%, var(--black-color)); font-family: Georgia, serif; font-size: clamp(1.15rem, 2vw, 1.45rem); font-style: italic; line-height: 1.6; }
    cite { color: var(--secondary-color); font-family: "DM Sans", sans-serif; font-size: .8em; font-style: normal; font-weight: 800; }

    .ministry-pledge__divider {
        margin: 34px auto;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 16px;

        span { width: 80px; height: 1px; background: color-mix(in srgb, var(--primary-color) 20%, transparent); }
        svg { width: 28px; fill: none; stroke: var(--secondary-color); stroke-width: 2.5; stroke-linecap: round; }
    }
}

@keyframes hero-arrival { from { opacity: 0; transform: translate3d(-35px, 20px, -80px); } to { opacity: 1; transform: translate3d(0, 0, 0); } }
@keyframes halo-breathe { 50% { transform: scale(1.07) rotate(5deg); opacity: .65; } }
@keyframes flight-streak { 0%, 55% { opacity: 0; transform: translate3d(130px, 55px, 100px) rotate(-20deg) scaleX(.3); } 75% { opacity: .8; } 100% { opacity: 0; transform: translate3d(-170px, -55px, 0) rotate(-20deg) scaleX(1.2); } }
@keyframes scroll-pulse { 50% { transform: translateY(7px); background: color-mix(in srgb, var(--white-color) 10%, transparent); } }
@keyframes wing-drift { 50% { transform: translate3d(8px, -6px, 0) rotate(-2deg); } }

@media (max-width: 900px) {
    .mission-page .mission-navigation { position: absolute; }
    .mission-hero { min-height: 175vh; }
    .mission-hero .mission-flight-stage { min-height: 650px; padding-top: 150px; }
    .mission-hero .mission-flight-scene { background-position: 58% center; }
    .mission-hero .mission-hero__content { width: min(680px, 85vw); }
    .mission-hero .mission-hero__verse { display: none; }
    .calling-section { grid-template-columns: 1fr; }
    .commitments-section .commitment-grid { grid-template-columns: 1fr 1fr; }
    .commitments-section .commitment-grid .commitment-item:last-child { grid-column: auto; }
    .scripture-section { grid-template-columns: 1fr; }
}

@media (max-width: 600px) {
    .mission-hero {
        min-height: 165vh;
    }
    .mission-hero .mission-flight-stage { min-height: 620px; padding: 140px 18px 50px; }
    .mission-hero .mission-flight-scene { inset: -4%; background-position: 53% center; }
    .mission-hero .mission-hero__content { width: 100%; }
    .mission-hero .flight-progress { right: 12px; }
    .calling-section { width: min(100% - 24px, 1180px); }
    .calling-section .calling-card { min-height: 0; padding: 32px 26px; }
    .commitments-section { width: min(100% - 28px, 1180px); }
    .commitments-section .commitment-grid { grid-template-columns: 1fr; }
    .scripture-section .scripture-stack .scripture-card--accent { margin-left: 0; }
    .ministry-pledge { width: min(100% - 24px, 1050px); padding: 54px 24px; }
}

@media (prefers-reduced-motion: reduce) {
    .mission-page *, .mission-page *::before, .mission-page *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}