
/* AvenSci Publishing — final hero blend correction
   Scope intentionally limited to the hero background only. */

.fm-hero{
    background:
      linear-gradient(
        90deg,
        #fbfdff 0%,
        #f2f8fd 27%,
        #e3f0fa 46%,
        #c7e0f5 67%,
        #a8d0ef 84%,
        #8dbce4 100%
      ) !important;
}

/* Keep the existing image size and position, but visually blend its edges. */
.fm-hero::after{
    right:0 !important;
    width:61% !important;
    top:10px !important;
    bottom:0 !important;
    background-position:center bottom !important;
    background-size:contain !important;

    /* Edge blending so the artwork no longer looks like a rectangular block. */
    -webkit-mask-image:
      linear-gradient(to right, transparent 0%, #000 8%, #000 100%),
      linear-gradient(to bottom, #000 0%, #000 88%, transparent 100%);
    -webkit-mask-composite: source-in;
    mask-image:
      linear-gradient(to right, transparent 0%, #000 8%, #000 100%),
      linear-gradient(to bottom, #000 0%, #000 88%, transparent 100%);
    mask-composite: intersect;
}

/* Extend the right-side blue naturally to the full edge of the band. */
.fm-hero::before{
    background:
      linear-gradient(
        90deg,
        rgba(255,255,255,.98) 0%,
        rgba(255,255,255,.94) 28%,
        rgba(255,255,255,.79) 39%,
        rgba(255,255,255,.46) 49%,
        rgba(255,255,255,.15) 60%,
        rgba(255,255,255,.02) 74%,
        rgba(255,255,255,0) 100%
      ) !important;
}

/* Darker lower-right blue under the DNA/book, continuous with the band. */
.fm-hero .fm-hero__inner::after{
    content:"";
    position:absolute;
    left:44%;
    right:0;
    bottom:0;
    height:42%;
    background:
      linear-gradient(
        180deg,
        rgba(45,111,173,0) 0%,
        rgba(31,91,151,.06) 45%,
        rgba(15,69,124,.15) 78%,
        rgba(10,57,108,.20) 100%
      );
    z-index:-1;
    pointer-events:none;
}

/* Remove any visual seam at the extreme right edge. */
.fm-hero{
    box-shadow: inset -180px 0 180px -160px rgba(82,153,211,.18);
}

@media(max-width:760px){
    .fm-hero::after{
        width:100% !important;
        right:0 !important;
        top:150px !important;
        opacity:.44 !important;
        -webkit-mask-image:linear-gradient(to bottom,#000 0%,#000 86%,transparent 100%);
        mask-image:linear-gradient(to bottom,#000 0%,#000 86%,transparent 100%);
    }
    .fm-hero .fm-hero__inner::after{
        left:0;
        height:30%;
    }
}
