.house-loader {
    --loader-size: 42px;
    --line-width: 20px;
    --line-height: 2px;
    --line-color: #ffffff;
    --duration: 2.8s;
    position: relative;
    width: var(--loader-size);
    height: var(--loader-size);
}

.house-loader__line {
    position: absolute;
    left: 10px;
    width: var(--line-width);
    height: var(--line-height);
    border-radius: 999px;
    background: var(--line-color);
    transform-origin: 50% 50%;
    will-change: transform, opacity;
}

.house-loader__line:nth-child(1) {
    top: 13px;
}

.house-loader__line:nth-child(2) {
    top: 20px;
}

.house-loader__line:nth-child(3) {
    top: 27px;
}

.house-loader__line:nth-child(1) {
    animation: house-loader-line-1 var(--duration) linear infinite;
}

.house-loader__line:nth-child(2) {
    animation: house-loader-line-2 var(--duration) linear infinite;
}

.house-loader__line:nth-child(3) {
    animation: house-loader-line-3 var(--duration) linear infinite;
}

@keyframes house-loader-line-1 {
    0% {
        transform: translate(-6px, -5px) rotate(-320deg);
    }
    8% {
        transform: translate(-1px, -8px) rotate(-360deg);
    }
    16% {
        transform: translate(6px, -3px) rotate(-400deg);
    }
    24% {
        transform: translate(7px, 4px) rotate(-440deg);
    }
    32% {
        transform: translate(2px, 8px) rotate(-480deg);
    }
    40% {
        transform: translate(-5px, 6px) rotate(-520deg);
    }
    48% {
        transform: translate(-8px, -1px) rotate(-560deg);
    }
    56% {
        transform: translate(-3px, -7px) rotate(-600deg);
    }
    64% {
        transform: translate(3px, -8px) rotate(-640deg);
    }
    72%,
    82% {
        transform: translate(0, 11px) rotate(-720deg);
    }
    90% {
        transform: translate(-4px, 5px) rotate(-800deg);
    }
    100% {
        transform: translate(-6px, -5px) rotate(-1040deg);
    }
}

@keyframes house-loader-line-2 {
    0% {
        transform: translate(5px, -4px) rotate(-396deg);
    }
    8% {
        transform: translate(8px, 2px) rotate(-436deg);
    }
    16% {
        transform: translate(2px, 8px) rotate(-476deg);
    }
    24% {
        transform: translate(-6px, 5px) rotate(-516deg);
    }
    32% {
        transform: translate(-8px, -2px) rotate(-556deg);
    }
    40% {
        transform: translate(-2px, -8px) rotate(-596deg);
    }
    48% {
        transform: translate(5px, -6px) rotate(-636deg);
    }
    56% {
        transform: translate(8px, 1px) rotate(-676deg);
    }
    64% {
        transform: translate(2px, 5px) rotate(-716deg);
    }
    72%,
    82% {
        transform: translate(-3px, -1px) rotate(-780deg);
    }
    90% {
        transform: translate(3px, 2px) rotate(-900deg);
    }
    100% {
        transform: translate(5px, -4px) rotate(-1116deg);
    }
}

@keyframes house-loader-line-3 {
    0% {
        transform: translate(-2px, 6px) rotate(-340deg);
    }
    8% {
        transform: translate(-8px, 2px) rotate(-380deg);
    }
    16% {
        transform: translate(-7px, -5px) rotate(-420deg);
    }
    24% {
        transform: translate(-1px, -8px) rotate(-460deg);
    }
    32% {
        transform: translate(6px, -6px) rotate(-500deg);
    }
    40% {
        transform: translate(8px, 0) rotate(-540deg);
    }
    48% {
        transform: translate(4px, 7px) rotate(-580deg);
    }
    56% {
        transform: translate(-3px, 8px) rotate(-620deg);
    }
    64% {
        transform: translate(-7px, 3px) rotate(-640deg);
    }
    72%,
    82% {
        transform: translate(3px, -8px) rotate(-660deg);
    }
    90% {
        transform: translate(0, -4px) rotate(-860deg);
    }
    100% {
        transform: translate(-2px, 6px) rotate(-1060deg);
    }
}

@media (prefers-reduced-motion: reduce) {
    .house-loader__line {
        animation: house-loader-reduced 1.4s ease-in-out infinite;
    }

    .house-loader__line:nth-child(2) {
        animation-delay: 0.15s;
    }

    .house-loader__line:nth-child(3) {
        animation-delay: 0.3s;
    }

    @keyframes house-loader-reduced {
        0%,
        100% {
            opacity: 0.45;
            transform: translate(0, 0) rotate(0deg);
        }
        50% {
            opacity: 1;
            transform: translate(0, 1px) rotate(0deg);
        }
    }
}