.page-transition-wrapper {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100vh;
z-index: 99999;
pointer-events: none; } .page-transition-wrapper.is-active {
pointer-events: all;
} .page-transition-curtain {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #5E3C32; background: linear-gradient(90deg, #5E3C32 0%, #7a5347 75%, #5E3C32 100%); transform: translateX(0%); transition: transform 0.6s cubic-bezier(0.77, 0, 0.175, 1);
} .page-transition-logo {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 2;  opacity: 1;
transition: opacity 0.4s ease-in-out;
img {
width: 200px;
height: auto;  }
} .loader-dots {
display: flex;
justify-content: center;
align-items: center;
gap: 8px;
}
.loader-dots span {
width: 8px;
height: 8px;
background-color: #fff;
border-radius: 50%;
display: inline-block;
animation: dots-bounce 1.4s infinite ease-in-out both;
}
.loader-dots span:nth-child(1) {
animation-delay: -0.32s;
}
.loader-dots span:nth-child(2) {
animation-delay: -0.16s;
}
@keyframes dots-bounce {
0%, 80%, 100% { 
transform: scale(0);
opacity: 0;
}
40% { 
transform: scale(1);
opacity: 1;
}
}  .page-transition-curtain.is-revealed {
transform: translateX(-100%);
} .page-transition-curtain.is-hidden-right {
transform: translateX(100%);
transition: none !important;
}   .page-transition-logo.is-hidden {
opacity: 0; }