/* CLEAR + SMOOTH HERO TRANSITION — loaded LAST.
   Photo and PNG logos remain untouched. Only a wide green alpha-mask is used. */

@media (min-width:761px){
  html body main#top .ref-hero-left{
    background:#032f27!important;
  }

  /* Keep the photo itself clean and unfiltered. */
  html body main#top .ref-hero-visual{
    left:42%!important;
    background-color:#061a24!important;
    background-image:url("assets/conference-main.jpg")!important;
    background-size:cover!important;
    background-position:center center!important;
    background-repeat:no-repeat!important;
  }

  /* One wide soft green mask over the seam. This is intentionally obvious,
     but the alpha fade is continuous so there are no visible bands. */
  html body main#top .ref-hero-blend{
    display:block!important;
    position:absolute!important;
    z-index:4!important;
    top:-3%!important;
    bottom:-3%!important;
    left:40%!important;
    width:31%!important;
    height:auto!important;
    pointer-events:none!important;
    background:#032f27!important;
    opacity:1!important;
    filter:blur(14px)!important;
    transform:translateX(-8px) scaleX(1.05)!important;
    transform-origin:left center!important;
    -webkit-mask-image:linear-gradient(90deg,
      #000 0%,
      #000 20%,
      rgba(0,0,0,.96) 30%,
      rgba(0,0,0,.82) 43%,
      rgba(0,0,0,.60) 56%,
      rgba(0,0,0,.36) 69%,
      rgba(0,0,0,.16) 82%,
      rgba(0,0,0,.05) 92%,
      transparent 100%)!important;
    mask-image:linear-gradient(90deg,
      #000 0%,
      #000 20%,
      rgba(0,0,0,.96) 30%,
      rgba(0,0,0,.82) 43%,
      rgba(0,0,0,.60) 56%,
      rgba(0,0,0,.36) 69%,
      rgba(0,0,0,.16) 82%,
      rgba(0,0,0,.05) 92%,
      transparent 100%)!important;
  }
}

@media (max-width:760px){
  /* On phones, use a vertical transition over the top of the photo. */
  html body main#top .ref-hero-visual{
    position:relative!important;
    background-color:#061a24!important;
    background-image:
      linear-gradient(180deg,
        #032f27 0%,
        rgba(3,47,39,.98) 10%,
        rgba(3,47,39,.88) 22%,
        rgba(3,47,39,.68) 36%,
        rgba(3,47,39,.42) 50%,
        rgba(3,47,39,.20) 64%,
        rgba(3,47,39,.07) 76%,
        rgba(3,47,39,0) 88%),
      url("assets/conference-main.jpg")!important;
    background-size:100% 100%,cover!important;
    background-position:center top,center center!important;
    background-repeat:no-repeat,no-repeat!important;
  }

  /* No second overlay on mobile: the photo background already contains
     the single smooth vertical fade above. */
  html body main#top .ref-hero-blend{
    display:none!important;
  }
}