/* =========================================================
   IDEYFINDHOUSE — GLOBAL INNER PAGE PRELOADER
   Lightweight • Responsive • Scalable
   ========================================================= */

:root {
    --ifh-primary: #0b7a4b;
    --ifh-primary-dark: #075b38;
    --ifh-accent: #f5b400;
    --ifh-bg: #ffffff;
    --ifh-text: #17231d;
}


/* ---------------------------------------------------------
   PRELOADER CONTAINER
   --------------------------------------------------------- */

.ifh-preloader {
    position: fixed;
    inset: 0;
    z-index: 2147483647;

    display: flex;
    align-items: center;
    justify-content: center;

    width: 100%;
    height: 100dvh;

    background:
        radial-gradient(
            circle at 50% 42%,
            rgba(11, 122, 75, 0.055),
            transparent 38%
        ),
        var(--ifh-bg);

    opacity: 1;
    visibility: visible;

    transition:
        opacity 0.45s ease,
        visibility 0.45s ease;
}


/* Hidden state */

.ifh-preloader.ifh-loaded {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}


/* ---------------------------------------------------------
   MAIN LOADER
   --------------------------------------------------------- */

.ifh-loader {
    position: relative;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    width: min(90vw, 360px);

    text-align: center;

    animation: ifh-loader-enter 0.55s ease both;
}


/* ---------------------------------------------------------
   LOGO
   --------------------------------------------------------- */

.ifh-logo {
    display: flex;
    flex-direction: column;
    align-items: center;

    line-height: 1;

    margin-bottom: 26px;

    user-select: none;
}

.ifh-logo-main {
    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-size: clamp(22px, 6vw, 30px);
    font-weight: 900;
    letter-spacing: 1.5px;

    color: var(--ifh-primary);
}

.ifh-logo-sub {
    margin-top: 5px;

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-size: clamp(11px, 3vw, 14px);
    font-weight: 800;

    letter-spacing: 5px;

    color: var(--ifh-text);
}


/* ---------------------------------------------------------
   HOUSE + SEARCH ANIMATION
   --------------------------------------------------------- */

.ifh-loader-animation {
    position: relative;

    width: 82px;
    height: 72px;

    margin-bottom: 25px;
}


/* House */

.ifh-house {
    position: absolute;

    left: 50%;
    bottom: 7px;

    width: 42px;
    height: 34px;

    transform:
        translateX(-50%)
        scale(1);

    border: 3px solid var(--ifh-primary);
    border-top: 0;

    border-radius: 3px;

    animation: ifh-house-pulse 1.8s ease-in-out infinite;
}


/* Roof */

.ifh-house::before {
    content: "";

    position: absolute;

    left: 50%;
    top: -23px;

    width: 31px;
    height: 31px;

    transform:
        translateX(-50%)
        rotate(45deg);

    border-left: 3px solid var(--ifh-primary);
    border-top: 3px solid var(--ifh-primary);

    background: var(--ifh-bg);

    border-radius: 3px 0 0 0;
}


/* Door */

.ifh-house::after {
    content: "";

    position: absolute;

    left: 50%;
    bottom: 0;

    width: 11px;
    height: 19px;

    transform: translateX(-50%);

    background: var(--ifh-primary);

    border-radius: 3px 3px 0 0;
}


/* Search circle */

.ifh-search {
    position: absolute;

    right: 2px;
    top: 7px;

    width: 23px;
    height: 23px;

    border: 4px solid var(--ifh-accent);
    border-radius: 50%;

    background: var(--ifh-bg);

    animation: ifh-search-move 1.8s ease-in-out infinite;
}


/* Search handle */

.ifh-search::after {
    content: "";

    position: absolute;

    right: -10px;
    bottom: -7px;

    width: 12px;
    height: 4px;

    border-radius: 5px;

    background: var(--ifh-accent);

    transform: rotate(45deg);
}


/* ---------------------------------------------------------
   LOADING TEXT
   --------------------------------------------------------- */

.ifh-loading-text {
    display: flex;
    align-items: center;

    min-height: 24px;

    color: #6b756f;

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-size: 13px;
    font-weight: 500;

    letter-spacing: 0.25px;
}


/* Animated dots */

.ifh-loading-text i {
    width: 4px;
    height: 4px;

    margin-left: 4px;

    border-radius: 50%;

    background: var(--ifh-primary);

    animation: ifh-dot 1.3s infinite ease-in-out;
}

.ifh-loading-text i:nth-of-type(1) {
    animation-delay: 0s;
}

.ifh-loading-text i:nth-of-type(2) {
    animation-delay: 0.15s;
}

.ifh-loading-text i:nth-of-type(3) {
    animation-delay: 0.30s;
}


/* ---------------------------------------------------------
   ANIMATIONS
   --------------------------------------------------------- */

@keyframes ifh-loader-enter {

    from {
        opacity: 0;
        transform: translateY(10px) scale(0.97);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}


@keyframes ifh-house-pulse {

    0%,
    100% {
        transform:
            translateX(-50%)
            scale(1);
    }

    50% {
        transform:
            translateX(-50%)
            scale(1.045);
    }
}


@keyframes ifh-search-move {

    0%,
    100% {
        transform:
            translate(0, 0)
            rotate(0deg);
    }

    50% {
        transform:
            translate(-7px, 5px)
            rotate(-8deg);
    }
}


@keyframes ifh-dot {

    0%,
    60%,
    100% {
        opacity: 0.25;
        transform: translateY(0);
    }

    30% {
        opacity: 1;
        transform: translateY(-3px);
    }
}


/* ---------------------------------------------------------
   MOBILE
   --------------------------------------------------------- */

@media (max-width: 480px) {

    .ifh-loader {
        width: 92vw;
    }

    .ifh-logo {
        margin-bottom: 24px;
    }

    .ifh-loader-animation {
        transform: scale(0.92);
        margin-bottom: 21px;
    }

}


/* ---------------------------------------------------------
   REDUCED MOTION
   --------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {

    .ifh-loader,
    .ifh-house,
    .ifh-search,
    .ifh-loading-text i {
        animation: none !important;
    }

    .ifh-preloader {
        transition: none;
    }

}