/* =========================================================
   HORIZON BEE AFRICA
   GLOBAL LOADING ANIMATION
   ========================================================= */

/* =========================================================
   GLOBAL PAGE LOADER
   ========================================================= */

#hba-loader {
    position: fixed;
    inset: 0;
    z-index: 999999;

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

    background: rgba(0, 0, 0, 0.48);

    opacity: 1;
    visibility: hidden;

    transition:
        opacity 0.28s ease,
        visibility 0.28s ease;

    pointer-events: none;
}

#hba-loader.hba-loader-active {
    opacity: 1;
    visibility: visible;
    pointer-events: all;
}



/* First opening of a page: a solid background, so the
   half-drawn page never shows through behind the logo */
#hba-loader.hba-loader-first {
    background: #2c1f02;
}

/* =========================================================
   HIDDEN GLOBAL LOADER
   ========================================================= */

#hba-loader.hba-loader-hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

/* =========================================================
   LOADER CENTER
   ========================================================= */

.hba-loader-center {
    position: relative;

    width: 110px;
    height: 110px;

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

/* =========================================================
   HORIZON BEE LOGO
   ========================================================= */

.hba-loader-logo {
    position: relative;

    width: 58px;
    height: 58px;

    object-fit: contain;

    z-index: 5;

    filter:
        brightness(0.62)
        saturate(0.9)
        contrast(1.12);

    animation:
        hbaBeePulse 0.48s ease-in-out infinite alternate;
}

/* Fast zoom in and out */

@keyframes hbaBeePulse {

    0% {
        transform: scale(0.82);
    }

    100% {
        transform: scale(1.12);
    }
}

/* =========================================================
   RIPPLE WAVES
   ========================================================= */

.hba-ripple {
    position: absolute;

    left: 50%;
    top: 50%;

    width: 58px;
    height: 58px;

    border: 1px solid rgba(255, 255, 255, 0.32);

    border-radius: 50%;

    transform:
        translate(-50%, -50%)
        scale(0.45);

    opacity: 0;

    pointer-events: none;

    animation:
        hbaRipple 1.55s linear infinite;
}

/* Staggered waves */

.hba-ripple:nth-child(2) {
    animation-delay: 0.52s;
}

.hba-ripple:nth-child(3) {
    animation-delay: 1.04s;
}

.hba-ripple:nth-child(4) {
    animation-delay: 1.56s;
}

@keyframes hbaRipple {

    0% {
        transform:
            translate(-50%, -50%)
            scale(0.42);

        opacity: 0;
    }

    12% {
        opacity: 0.45;
    }

    100% {
        transform:
            translate(-50%, -50%)
            scale(2.25);

        opacity: 0;
    }
}

/* =========================================================
   INNER RIPPLE WAVES
   ========================================================= */

.hba-loader-center::before,
.hba-loader-center::after {

    content: "";

    position: absolute;

    left: 50%;
    top: 50%;

    width: 46px;
    height: 46px;

    border-radius: 50%;

    border: 1px solid rgba(255, 255, 255, 0.18);

    transform:
        translate(-50%, -50%);

    pointer-events: none;
}

.hba-loader-center::before {
    animation:
        hbaInnerWave 0.9s ease-out infinite;
}

.hba-loader-center::after {
    animation:
        hbaInnerWave 0.9s ease-out 0.45s infinite;
}

@keyframes hbaInnerWave {

    0% {
        transform:
            translate(-50%, -50%)
            scale(0.8);

        opacity: 0.45;
    }

    100% {
        transform:
            translate(-50%, -50%)
            scale(1.8);

        opacity: 0;
    }
}

/* =========================================================
   LOADING TEXT
   ========================================================= */

.hba-loader-text {
    position: absolute;

    top: calc(50% + 82px);

    left: 50%;

    transform:
        translateX(-50%);

    color: rgba(255, 255, 255, 0.82);

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

    font-size: 12px;

    letter-spacing: 2px;

    text-transform: uppercase;

    white-space: nowrap;

    opacity: 0.8;
}

/* =========================================================
   SECTION LOADER
   ========================================================= */

.hba-section-loader {
    position: absolute;

    inset: 0;

    z-index: 100;

    display: flex;

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

    background: rgba(0, 0, 0, 0.28);

    opacity: 1;

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

.hba-section-loader.hba-loader-hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 600px) {

    .hba-loader-center {
        width: 95px;
        height: 95px;
    }

    .hba-loader-logo {
        width: 52px;
        height: 52px;
    }

    .hba-loader-text {
        top: calc(50% + 72px);

        font-size: 10px;

        letter-spacing: 1.7px;
    }
}

/* =========================================================
   ACCESSIBILITY
   ========================================================= */

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

    .hba-loader-logo,
    .hba-ripple,
    .hba-loader-center::before,
    .hba-loader-center::after {
        animation: none;
    }

    .hba-ripple {
        opacity: 0.12;

        transform:
            translate(-50%, -50%)
            scale(1);
    }
}