src/components/head/page-head-style.webc

@@ -16,7 +16,7 @@
     min-height: 100dvh;
   }
 
-  body[inert] {
+  body.scroll-lock {
     overflow: hidden;
   }
 

src/components/popup-modal.webc

@@ -5,10 +5,12 @@
 
   const open = () => {
     dialog.showModal();
+    document.body.classList.toggle('scroll-lock');
     document.body.inert = true;
   };
 
   const close = (result) => {
+    document.body.classList.toggle('scroll-lock');
     document.body.inert = false;
     storeProxy.setItem('isHorny', result);
     if (result && storeProxy.getItem('isInHornyJail') !== 'true') {
@@ -56,12 +58,9 @@
     --clr-no: oklch(40% 0.2 40deg);
   }
 
-  :host[open] {
-    opacity: 1;
-    transform: scale(1);
-  }
-
   :host {
+    display: none;
+
     background: linear-gradient(
       to bottom right,
       var(--clr-box-gradient-start) 0%,
@@ -74,54 +73,67 @@
     margin: auto;
     border: none;
     border-radius: 1.5em;
-    padding: 0;
-
-    overflow: auto;
+    padding: 1rem;
 
+    overflow: hidden;
     z-index: 1;
 
     opacity: 0;
-    transform: scale(0);
 
-    transition: all 0.5s var(--timing-func) allow-discrete;
+    transition: all 0.75s ease-in-out allow-discrete;
+    animation: fade-in 0.5s;
+    animation-timing-function: var(--timing-func);
+    transition: all 0.5s;
+    transition-timing-function: var(--timing-func);
   }
 
-  @starting-style {
-    :host[open] {
-      opacity: 0;
-      transform: scale(0);
-    }
+  :host::before {
+    content: '';
+    position: absolute;
+    inset: var(--border-thin);
+    background-color: var(--clr-box-background);
+    border-radius: inherit;
+    z-index: -1;
+  }
+
+  :host[open] {
+    opacity: 1;
+    display: block;
   }
 
   :host::backdrop {
     backdrop-filter: blur(0rem);
-    background-color: oklch(from black l c h / 0);
+    background-color: oklch(from black l c h / 0.5);
 
-    transition: all 0.5s ease allow-discrete;
+    opacity: 0;
+
+    transition: all 0.75s ease-in-out allow-discrete;
+    animation: backdrop-fade-in 0.5s;
   }
 
   :host[open]::backdrop {
     backdrop-filter: blur(1rem);
-    background-color: oklch(from black l c h / 0.5);
-  }
-
-  @starting-style {
-    :host[open]::backdrop {
-      backdrop-filter: blur(0rem);
-      background-color: oklch(from black l c h / 0);
-    }
+    opacity: 1;
   }
 
   :host .content {
+    display: flex;
+    flex-flow: column nowrap;
+    justify-content: center;
     text-align: center;
-    background: var(--clr-box-background);
+    gap: 1.5rem;
+  }
 
-    margin: var(--border-thin);
-    border-radius: inherit;
-    padding: 1em;
+  :host .content > * {
+    flex: 1 1 auto;
+  }
+
+  :host .heading {
+    margin: 1.875rem 0 0 0;
   }
 
   :host .message {
+    flex: 1 1 100%;
     text-wrap: balance;
   }
 
@@ -140,4 +152,38 @@
     --gradient-base: var(--clr-no);
     --clr-text: var(--theme-c-primary-100);
   }
+
+  @starting-style {
+    :host {
+      display: none;
+      opacity: 0;
+    }
+
+    :host::backdrop {
+      backdrop-filter: blur(0rem);
+      opacity: 0;
+    }
+  }
+
+  @keyframes fade-in {
+    from {
+      opacity: 0;
+      scale: 0;
+    }
+    to {
+      opacity: 1;
+      scale: 1;
+    }
+  }
+
+  @keyframes backdrop-fade-in {
+    from {
+      backdrop-filter: blur(0rem);
+      opacity: 0;
+    }
+    to {
+      backdrop-filter: blur(1rem);
+      opacity: 1;
+    }
+  }
 </style>