:root {
--pt-curtain-in: 1.2s;
--pt-curtain-out: 1.6s;
--pt-ease-in: cubic-bezier(0.4, 0, 0.2, 1);
--pt-ease-out: cubic-bezier(0.4, 0, 0.2, 1);
--pt-fade-duration: 1s;
} .page-loader {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 99999;
pointer-events: none;
overflow: hidden; opacity: 1;
visibility: visible;
} .page-loader__curtain {
position: absolute;
bottom: 0;
left: 0;
right: 0;
width: 100%;
height: 100vh;
background: linear-gradient(0deg, #212121 0%, #171717 100%);
will-change: height;
} .page-loader--full .page-loader__curtain {
height: 100vh;
} .page-loader__content {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 2;
opacity: 1;
pointer-events: none;
}
.page-loader__logo {
width: 200px;
height: auto;
animation: logo-pulse 2.5s ease-in-out infinite;
}
.page-loader__logo svg {
width: 100%;
height: auto;
filter: drop-shadow(0 4px 20px rgba(254, 180, 43, 0.3));
}
@keyframes logo-pulse {
0%, 100% {
opacity: 0.9;
transform: scale(1);
}
50% {
opacity: 1;
transform: scale(1.03);
}
} .page-loader--hiding .page-loader__curtain {
animation: curtain-shrink-down var(--pt-curtain-out) var(--pt-ease-out) forwards;
}
@keyframes curtain-shrink-down {
0% {
height: 100vh;
max-height: 100vh;
}
100% {
height: 0;
max-height: 0;
}
} .page-loader--hiding .page-loader__content {
animation: logo-fade-with-curtain var(--pt-curtain-out) var(--pt-ease-out) forwards;
}
@keyframes logo-fade-with-curtain {
0% {
opacity: 1;
transform: translate(-50%, -50%) scale(1);
}
30% {
opacity: 0;
transform: translate(-50%, -50%) scale(0.95);
}
100% {
opacity: 0;
transform: translate(-50%, 100vh) scale(0.8);
}
} .page-loader--hidden {
opacity: 0;
transition: opacity 0.5s ease;
} .page-transition-exit {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 99998;
pointer-events: none;
overflow: hidden;
}
.page-transition-exit__curtain {
position: absolute;
bottom: 0;
left: 0;
right: 0;
width: 100%;
height: 0;
background: linear-gradient(0deg, #212121 0%, #171717 100%);
transition: height var(--pt-curtain-in) var(--pt-ease-in);
will-change: height;
}
.page-transition-exit--active .page-transition-exit__curtain {
height: 100vh;
} .page-transition-exit__content {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 2;
opacity: 0;
transition: opacity 0.4s ease-in 0.3s, transform var(--pt-curtain-in) var(--pt-ease-in);
pointer-events: none;
}
.page-transition-exit--active .page-transition-exit__content {
opacity: 1;
}
.page-transition-exit__logo {
width: 200px;
height: auto;
animation: logo-pulse 2.5s ease-in-out infinite;
}
.page-transition-exit__logo svg {
width: 100%;
height: auto;
filter: drop-shadow(0 4px 20px rgba(254, 180, 43, 0.3));
}   body.pt-fade-enter {
animation: pt-fade-in 1s cubic-bezier(0.2, 0, 0, 1) both;
}
@keyframes pt-fade-in {
from {
opacity: 0.5;
}
to {
opacity: 1;
}
} body.pt-fade-exit {
animation: pt-fade-out 0.3s cubic-bezier(0.4, 0, 1, 1) both;
}
@keyframes pt-fade-out {
from {
opacity: 1;
}
to {
opacity: 0;
}
} @media (prefers-reduced-motion: reduce) {
.page-transition-exit__curtain {
transition-duration: 0.6s;
}
.page-loader__logo,
.page-transition-exit__logo {
animation: none;
opacity: 1;
}
.page-loader--hiding .page-loader__curtain {
animation-duration: 0.6s;
}
.page-loader--hiding .page-loader__content {
animation-duration: 0.6s;
}
body,
body.pt-fade-enter,
body.pt-fade-exit {
animation: none !important;
}
} html.page-loading {
overflow: hidden;
}
html.page-loading body {
overflow: hidden;
} body {
opacity: 1;
visibility: visible;
}