Responsive CSS Motion Path modal

Ci-dessous une démonstration d'une boîte de dialogue avec CSS Path motion :

Le code :

<input name="modal" type="checkbox" id="modal">

<label for="modal">ouvrir</label>


<div class="modal">
<label for="modal" aria-label="fermer fenêtre"><svg height="40" width="40" viewBox="0 0 50 50"><circle cx="25" cy="25" r="22.5" fill="hsla(0, 0%, 0%, 0.8)"/><path fill="none" stroke="#FFF" stroke-width="2" stroke-linecap="round" stroke-miterlimit="10" d="M16 34l9-9 9-9M16 16l9 9 9 9"/></svg></label>
<h2>CSS Motion Paths modal</h2>
<div class="contenu_modal">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nobis deserunt corrupti, ut fugit magni qui quasi nisi amet repellendus non fuga omnis a sed impedit explicabo accusantium nihil doloremque consequuntur.</div>
</div>

	

*,*::before,*::after{box-sizing:border-box}

input[type="checkbox"]{

position: absolute;
left: -100vw

}

input[name="modal"]+label {


display: inline-flex;
padding: 1.5rem 4.5rem;
background-color: #6753ea;
box-shadow: 1px 1px 8px rgba(0, 0, 0, 0.2);
color: white;
font-size: 1.25rem;
text-transform: uppercase;

}

.modal{ 
	
display:grid;
width:90%; 
max-width:400px;
z-index:1;
position:absolute;
top:50%;
left:50%;
transform:translate3d(-50%,-50%,0);
will-change:transform;
opacity:0;
height:0;
visibility:hidden;
offset-distance:100%;      
offset-rotate:0deg;
background-color:white;
border:1px solid #aaa;
box-shadow:0 0 2rem hsla(0,0%,0%,.2);
filter:blur(8px)
	
	}

 
#modal:checked ~ .modal{

height: auto;
transform: none;
offset-distance: 0%;  
offset-rotate: 0deg; 
transition: 1s ease-out;
filter: blur(0);
opacity: 1;
visibility: visible;

	
}
    
.modal{
offset-path: path("M 0,0 S 300,-500 -800,-200");
/*haut gauche*/

}

    
@media (prefers-reduced-motion) {

@supports (offset-rotate: 0deg) {

.modal {
offset-path: none;
    }
	
  }
  }