html {
    #epfpreload {
        opacity: 0;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 0.5rem;
        z-index: -1;
        background-color:#ffffff;
        transition: all 1s ease-in 0.4s;

        [data-preloader-title] {
            font-size: clamp(1.5rem,5vw,2.5rem);
            font-family: Verdana, sans-serif;
            font-weight: 900;
        }
        [data-preloader-waitingtext] {
            font-size: 12px;
            font-family: arial;
        }
    }
    &[data-epfpreloader-state="loading"] {
        body > :not(#epfpreload) {
            opacity: 0;
            order: 2;
            z-index:-1;
        }
        #epfpreload {
            order: 1;
            transition: all 1s ease-in 0s;
            opacity: 1;
            z-index: 999919;
        }
    }
} 


/* Enable View Transitions */
@view-transition {
  navigation: auto;
}

::view-transition-image-pair(root) {
  background-color:#efefef;
}

::view-transition-group(root) {
  animation-duration: 1s;
}

&::view-transition-old(root) {
  animation-name: old-out;
}

&::view-transition-new(root) {
  animation-name: new-in;
  animation-delay: 1s;
}

@keyframes old-out {
0% {

    -webkit-filter: blur(0);
            filter: blur(0);
    opacity: 1;
  }
  100% {

    -webkit-filter: blur(40px);
            filter: blur(40px);
    opacity: 0;
  }
}

@keyframes new-in {
 0% {

    -webkit-filter: blur(40px);
            filter: blur(40px);
    opacity: 0;
  }
  100% {

    -webkit-filter: blur(0);
            filter: blur(0);
    opacity: 1;
  }
}