/* V118 — eliminate the real edge of portrait artwork.
   A portrait background only occupies the right part of its element, so the
   mask is anchored to that side instead of being calculated across the whole
   hero.  A softly masked backdrop-filter bridge removes any remaining edge. */

.home-showcase-feather,
.release-cinematic-feather {
  display: none;
  position: absolute !important;
  z-index: 1 !important;
  pointer-events: none;
  background: rgba(4, 11, 21, .055);
  -webkit-backdrop-filter: blur(20px) saturate(.94);
  backdrop-filter: blur(20px) saturate(.94);
  -webkit-mask-image: linear-gradient(90deg,
    transparent 0%,
    rgba(0, 0, 0, .22) 10%,
    #000 27%,
    #000 73%,
    rgba(0, 0, 0, .22) 90%,
    transparent 100%);
  mask-image: linear-gradient(90deg,
    transparent 0%,
    rgba(0, 0, 0, .22) 10%,
    #000 27%,
    #000 73%,
    rgba(0, 0, 0, .22) 90%,
    transparent 100%);
}

.home-showcase-slide.is-poster-fallback .home-showcase-feather {
  display: block;
  inset: -4% auto -4% 43%;
  width: 38%;
}

.release-cinematic-hero.is-poster-fallback .release-cinematic-feather {
  display: block;
  inset: -4% auto -4% 34%;
  width: 42%;
}

.home-showcase-slide.is-poster-fallback .home-showcase-artwork,
.release-cinematic-hero.is-poster-fallback .release-cinematic-artwork {
  -webkit-mask-position: right center;
  mask-position: right center;
  -webkit-mask-size: 78% 100%;
  mask-size: 78% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-image: linear-gradient(90deg,
    transparent 0%,
    transparent 43%,
    rgba(0, 0, 0, .055) 51%,
    rgba(0, 0, 0, .2) 61%,
    rgba(0, 0, 0, .5) 72%,
    rgba(0, 0, 0, .82) 83%,
    #000 94%,
    #000 100%);
  mask-image: linear-gradient(90deg,
    transparent 0%,
    transparent 43%,
    rgba(0, 0, 0, .055) 51%,
    rgba(0, 0, 0, .2) 61%,
    rgba(0, 0, 0, .5) 72%,
    rgba(0, 0, 0, .82) 83%,
    #000 94%,
    #000 100%);
}

.home-showcase-slide.is-poster-fallback .home-showcase-artwork {
  filter: blur(1.15px) saturate(1.04) contrast(1.035);
  opacity: .68;
}

.release-cinematic-hero.is-poster-fallback .release-cinematic-artwork {
  filter: blur(1.15px) saturate(1.04) contrast(1.035);
  opacity: .55;
}

@media (max-width: 980px) and (min-width: 681px) {
  .home-showcase-slide.is-poster-fallback .home-showcase-feather {
    left: 35%;
    width: 46%;
  }

  .release-cinematic-hero.is-poster-fallback .release-cinematic-feather {
    left: 28%;
    width: 50%;
  }
}

@media (max-width: 680px) {
  .home-showcase-feather,
  .release-cinematic-feather {
    -webkit-backdrop-filter: blur(13px) saturate(.95);
    backdrop-filter: blur(13px) saturate(.95);
  }

  .home-showcase-slide.is-poster-fallback .home-showcase-feather {
    inset: -2% auto auto 18%;
    width: 64%;
    height: 64%;
  }

  .release-cinematic-hero.is-poster-fallback .release-cinematic-feather {
    inset: 0 auto auto 14%;
    width: 68%;
    height: 310px;
  }

  .home-showcase-slide.is-poster-fallback .home-showcase-artwork,
  .release-cinematic-hero.is-poster-fallback .release-cinematic-artwork {
    -webkit-mask-size: 92% 100%;
    mask-size: 92% 100%;
    -webkit-mask-image: linear-gradient(90deg,
      transparent 0%,
      transparent 24%,
      rgba(0, 0, 0, .12) 38%,
      rgba(0, 0, 0, .48) 55%,
      rgba(0, 0, 0, .84) 72%,
      #000 88%,
      #000 100%);
    mask-image: linear-gradient(90deg,
      transparent 0%,
      transparent 24%,
      rgba(0, 0, 0, .12) 38%,
      rgba(0, 0, 0, .48) 55%,
      rgba(0, 0, 0, .84) 72%,
      #000 88%,
      #000 100%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .home-showcase-feather,
  .release-cinematic-feather {
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
  }
}