#preloader {
 position: fixed;
 inset: 0;
 background-color: #f8f9fa;
 z-index: 9999;
 display: flex;
 align-items: center;
 justify-content: center;
 transition: opacity 0.5s ease-in-out;
 opacity: 1;
}

#preloader.fade-out {
 opacity: 0;
 pointer-events: none;
}

.preloader-container {
 display: flex;
 flex-direction: column;
 align-items: center;
 justify-content: center;
}

.house-loader {
 position: relative;
 width: 80px;
 height: 80px;
}

.walls {
 position: absolute;
 bottom: 0;
 left: 50%;
 transform: translateX(-50%);
 width: 70px;
 height: 0;
 background-color: #e0e7ff;
 animation: build-walls 0.6s cubic-bezier(0.68, -0.55, 0.27, 1.55) forwards;
}

.roof {
 position: absolute;
 top: 0;
 left: 50%;
 transform: translateX(-50%);
 width: 0;
 height: 0;
 border-left: 40px solid transparent;
 border-right: 40px solid transparent;
 border-bottom: 30px solid #c7d2fe;
 opacity: 0;
 animation: place-roof 0.4s ease-out 0.6s forwards;
}

.loading-text {
 margin-top: 15px;
 font-size: 1.1rem;
 font-weight: 500;
 color: #4338ca;
 opacity: 0;
 animation: fade-in-text 0.5s ease 0.8s forwards;
}

@keyframes build-walls {
 from {
 height: 0;
 }
 to {
 height: 50px;
 }
}

@keyframes place-roof {
 from {
 opacity: 0;
 transform: translate(-50%, -10px);
 }
 to {
 opacity: 1;
 transform: translate(-50%, 0);
 }
}

@keyframes fade-in-text {
 from {
 opacity: 0;
 }
 to {
 opacity: 1;
 }
}