/* Fulgent Post Atelier — Phase 5.25
   Cinematic image fades + subtle image motion + softened inquiry surface.
   This file intentionally does not alter section copy, layout structure,
   WOX timing, testimonial rotation, or the approved home kinetic sequence. */

/* --------------------------------------------------------------------------
   1. START A PROJECT — keep the fixed brand mark away from modal typography.
   The logo returns automatically when the inquiry closes because Phase 5
   already toggles body.fpa-inquiry-open.
   -------------------------------------------------------------------------- */
.logo {
    transition: opacity 280ms ease, visibility 280ms ease;
}

body.fpa-inquiry-open .logo {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

/* START A PROJECT — keep the inquiry surface clean and pure white.
   The WOX open/close motion remains untouched. */
.fpa-inquiry-modal {
    background: #fff !important;
    box-shadow: none !important;
}

.fpa-inquiry-modal::before {
    content: none !important;
    display: none !important;
}

.fpa-inquiry-modal .fpa-inquiry-shell {
    position: relative;
    z-index: 1;
}

/* --------------------------------------------------------------------------
   2. ABOUT — contact-inspired fade into the dark copy column.
   -------------------------------------------------------------------------- */
#section1 .about-bg-wrapper {
    overflow: hidden;
    isolation: isolate;
    background: #050505;
}

#section1 .about-bg-wrapper::after {
    content: "";
    position: absolute;
    z-index: 2;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(90deg,
            rgba(5,5,5,0) 50%,
            rgba(5,5,5,.18) 66%,
            rgba(5,5,5,.62) 84%,
            #050505 100%),
        linear-gradient(180deg,
            rgba(0,0,0,.10) 0%,
            rgba(0,0,0,0) 40%,
            rgba(0,0,0,.16) 100%);
}

#section1 .about-bg {
    transform: scale(1.065) translate3d(-1.2%, 0, 0);
    transform-origin: center center;
    transition: transform 11s cubic-bezier(.18,.72,.22,1);
    will-change: transform;
}

#section1.active .about-bg {
    transform: scale(1.01) translate3d(0, 0, 0);
}

/* --------------------------------------------------------------------------
   3. CLIENT NOTES — make the still dissolve into the quote side just like the
   contact image, with a restrained cinematic push rather than a busy effect.
   -------------------------------------------------------------------------- */
.fpa-client-notes-image {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    background-image: none !important;
    background-color: #050505;
}

.fpa-client-notes-image::before {
    content: "";
    position: absolute;
    z-index: 0;
    inset: -4%;
    background: url('../img/client-notes/client-notes-bg.jpg') center center / cover no-repeat;
    transform: scale(1.07) translate3d(-1.4%, 0, 0);
    transform-origin: center center;
    transition: transform 11s cubic-bezier(.18,.72,.22,1);
    will-change: transform;
}

#section-client-notes.active .fpa-client-notes-image::before {
    transform: scale(1.015) translate3d(0, 0, 0);
}

.fpa-client-notes-image::after {
    content: "";
    position: absolute;
    z-index: 1;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(90deg,
            rgba(5,5,5,.05) 0%,
            rgba(5,5,5,.06) 44%,
            rgba(5,5,5,.30) 65%,
            rgba(5,5,5,.76) 84%,
            #050505 100%),
        linear-gradient(180deg,
            rgba(0,0,0,.13) 0%,
            rgba(0,0,0,0) 42%,
            rgba(0,0,0,.18) 100%);
}

/* --------------------------------------------------------------------------
   4. CONTACT — retain the approved gradient and give its image the same subtle
   motion language so About / Client Notes / Contact now feel related.
   -------------------------------------------------------------------------- */
#section5.fpa-contact.fpa-studio-footer::before {
    transform: scale(1.065) translate3d(1.5%, 0, 0);
    transform-origin: right center;
    transition: transform 11s cubic-bezier(.18,.72,.22,1), opacity 700ms ease;
    will-change: transform;
}

#section5.fpa-contact.fpa-studio-footer.active::before {
    transform: scale(1.01) translate3d(0, 0, 0);
}

/* Mobile keeps the gradient and image, but uses gentler motion. */
@media (max-width: 900px) {
    #section1 .about-bg-wrapper::after {
        background:
            linear-gradient(180deg,
                rgba(5,5,5,.03) 45%,
                rgba(5,5,5,.52) 78%,
                #050505 100%);
    }

    .fpa-client-notes-image::after {
        background:
            linear-gradient(180deg,
                rgba(5,5,5,.02) 35%,
                rgba(5,5,5,.48) 76%,
                #050505 100%);
    }

    .fpa-inquiry-modal {
        background: #fff !important;
        box-shadow: none !important;
    }

    .fpa-inquiry-modal::before {
        content: none !important;
        display: none !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    .logo,
    #section1 .about-bg,
    .fpa-client-notes-image::before,
    #section5.fpa-contact.fpa-studio-footer::before {
        transition: none !important;
    }

    #section1 .about-bg,
    #section1.active .about-bg,
    .fpa-client-notes-image::before,
    #section-client-notes.active .fpa-client-notes-image::before,
    #section5.fpa-contact.fpa-studio-footer::before,
    #section5.fpa-contact.fpa-studio-footer.active::before {
        transform: none !important;
    }
}