/* ==========================================================================
   Fixed Background Portrait (Bottom-Left)
   - Stays fixed to the bottom-left of the viewport
   - Fades in slowly when scrolled past top
   - Fades out smoothly when reaching the bottom
   - Soft opacity and edge masking so it blends into the dark background (#010A10)
   - Pointer-events: none ensures zero interference with clicks/selection
   ========================================================================== */

.fixed-bg-portrait {
    position: fixed;
    left: 0;
    bottom: 0;
    z-index: 0;
    pointer-events: none;
    user-select: none;
    -webkit-user-select: none;
    width: clamp(260px, 28vw, 420px);
    max-height: 80vh;
    line-height: 0;

    /* Initially hidden at page top or bottom */
    opacity: 0;
    visibility: hidden;
    transform: translateY(18px);

    /* Slow, gentle fade animation */
    transition: opacity 0.85s cubic-bezier(0.25, 1, 0.5, 1),
                transform 0.85s cubic-bezier(0.25, 1, 0.5, 1),
                visibility 0.85s cubic-bezier(0.25, 1, 0.5, 1);
    will-change: transform, opacity, visibility;
}

/* Active / Scrolled State (Slow gentle fade-in) */
.fixed-bg-portrait.is-visible {
    opacity: 0.08;
    visibility: visible;
    transform: translateY(0);
}

.fixed-bg-portrait-img {
    width: 100%;
    height: auto;
    max-height: 80vh;
    object-fit: contain;
    object-position: left bottom;
    display: block;
    pointer-events: none;
    -webkit-user-drag: none;
    user-drag: none;

    /* Seamless edge fade into dark page background */
    -webkit-mask-image: linear-gradient(to top, rgba(0, 0, 0, 1) 75%, rgba(0, 0, 0, 0) 100%),
                        linear-gradient(to right, rgba(0, 0, 0, 1) 68%, rgba(0, 0, 0, 0) 100%);
    -webkit-mask-composite: source-in;
    mask-image: linear-gradient(to top, rgba(0, 0, 0, 1) 75%, rgba(0, 0, 0, 0) 100%),
                linear-gradient(to right, rgba(0, 0, 0, 1) 68%, rgba(0, 0, 0, 0) 100%);
    mask-composite: intersect;
}

/* Tablet adjustments */
@media only screen and (max-width: 991px) {
    .fixed-bg-portrait {
        width: clamp(200px, 32vw, 300px);
        max-height: 65vh;
    }
    .fixed-bg-portrait.is-visible {
        opacity: 0.06;
    }
}

/* Mobile screen adjustments */
@media only screen and (max-width: 575px) {
    .fixed-bg-portrait {
        width: 180px;
        max-height: 50vh;
    }
    .fixed-bg-portrait.is-visible {
        opacity: 0.05;
    }
}