CSS падающая тень траектории Firefox

Question

приведенный ниже код используется для отображения изображения с трехмерной перспективой, рамкой и тенью.

.sh{
        --valorshadow: -20px  30px  10px  rgba(0, 0, 0, 0.3);
        filter:  drop-shadow(var(--valorshadow));

      } 

      .box { 
        --x: 10px; 
        --y: 30px; 
        --o:10px; 
        clip-path:polygon( 0 calc(var(--x) + var(--y)),var(--y) var(--y), 
        calc(100% - var(--y)) var(--y),calc(100% - var(--y)) calc(100% - var(--y)), var(--y) calc(100% - var(--y)),0 calc(100% - var(--x) - var(--y)));
        -webkit-mask:linear-gradient(to right,rgba(0,0,0,0.88) var(--y), #fff 0); 
        mask:linear-gradient(to right,rgba(0,0,0,0.7) var(--y), #fff 0); 
        margin: 30px; 
        transform-origin: left; 
        transform: perspective(1000px) rotateY(35deg); 
        outline: calc(var(--y) + var(--o)) solid rgba(0, 0, 0, 1); 
        outline-offset: calc(-1*(var(--y) + var(--o))); }

<div class="sh">
        <img src="https://c4.wallpaperflare.com/wallpaper/391/773/307/art-artistic-artwork-creative-wallpaper-preview.jpg"  class="box">

    </div>

Фрейм использует clip-path, из-за этого я должен сделать тень с drop-shadow вместо box-shadow. Код в других браузерах:

Код в Firefox:

Все было идеально, пока не увидел в Firefox, нижняя строчка отсутствует. Как исправить?