body {
margin: 0;
padding: 0;
}
.loader-wrapper {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
margin: 0;
height: 100vh;
background: oklch(0.18 0 0);
}
.loader-svg {
width: 64px;
height: 64px;
animation: loader-spin 2s linear infinite;
}
.loader-text {
margin-top: 1rem;
font-family: 'Metamorphous', serif;
color: oklch(78.647% 0.12881 84.268);
font-size: 1.125rem;
letter-spacing: 0.12em;
opacity: 0;
transition: opacity 0.15s ease-in;
}
.fonts-loaded .loader-text {
opacity: 1;
}
@keyframes loader-spin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}