/*
 * ============================================================
 * DAREF V2.1 LOGIN BRAND
 * Logo-area visual enhancement only.
 *
 * Scope:
 * - Logo frame
 * - Logo positioning
 * - Logo animation
 * - Alignment of existing DAREF COMPANY LIMITED eyebrow
 *
 * No login form/layout/functionality changes.
 * ============================================================
 */


:root {
    --lb21-blue: #173b62;
    --lb21-red: #7f1724;
    --lb21-white: #ffffff;
    --lb21-soft-blue: #edf4fa;
}


/* ============================================================
   BRAND HOLDER
   ============================================================ */

.lb21-brand {
    position: relative;

    width: 100%;

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

    margin:
        0 auto
        14px;

    padding: 0;

    text-align: center;
}


/* ============================================================
   CIRCULAR LOGO FRAME
   ============================================================ */

.lb21-logo-frame {
    position: relative;

    width: 120px;
    height: 120px;

    flex:
        0 0
        120px;

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

    margin:
        0 auto;

    border-radius: 50%;

    /*
     * White-to-soft-blue blend:
     * enough contrast against the existing blue login area,
     * while remaining consistent with the Daref logo colours.
     */
    background:
        linear-gradient(
            145deg,
            #ffffff 0%,
            #ffffff 48%,
            #edf4fa 100%
        );

    border:
        3px solid
        rgba(
            255,
            255,
            255,
            .82
        );

    box-shadow:
        0 14px 32px
        rgba(
            0,
            0,
            0,
            .20
        ),

        0 0 0 6px
        rgba(
            255,
            255,
            255,
            .10
        ),

        inset 0 0 0 1px
        rgba(
            23,
            59,
            98,
            .08
        );

    overflow: hidden;

    isolation: isolate;
}


/* ============================================================
   INNER BRAND RING
   ============================================================ */

.lb21-logo-ring {
    position: absolute;

    inset: 7px;

    border-radius: 50%;

    border:
        1px solid
        rgba(
            127,
            23,
            36,
            .18
        );

    box-shadow:
        inset 0 0 12px
        rgba(
            23,
            59,
            98,
            .05
        );

    pointer-events: none;

    z-index: 1;
}


/* ============================================================
   LOGO
   ============================================================ */

.lb21-logo {
    position: relative;

    z-index: 2;

    display: block;

    width: 82px;
    height: 82px;

    max-width: 72%;
    max-height: 72%;

    object-fit: contain;

    margin: 0;

    transform-origin:
        center center;

    /*
     * Medium in-and-out movement.
     *
     * No rotation.
     * Gentle scale + vertical movement only.
     */
    animation:
        lb21LogoMovement
        3.2s
        ease-in-out
        infinite;

    will-change:
        transform;

    filter:
        drop-shadow(
            0 2px 2px
            rgba(
                0,
                0,
                0,
                .08
            )
        );
}


/* ============================================================
   MEDIUM IN / OUT ANIMATION
   ============================================================ */

@keyframes lb21LogoMovement {

    0% {
        transform:
            translateY(3px)
            scale(.96);
    }

    25% {
        transform:
            translateY(-2px)
            scale(1.01);
    }

    50% {
        transform:
            translateY(-5px)
            scale(1.055);
    }

    75% {
        transform:
            translateY(-2px)
            scale(1.01);
    }

    100% {
        transform:
            translateY(3px)
            scale(.96);
    }

}


/* ============================================================
   EXISTING COMPANY NAME ALIGNMENT
   ============================================================ */

/*
 * DAREF COMPANY LIMITED already exists directly underneath
 * this component in auth/login.html.
 *
 * We only centre that existing eyebrow text.
 */
.auth-brand > .eyebrow.lb21-company-name {
    width: 100%;

    display: block;

    margin:
        0 auto
        18px !important;

    padding: 0;

    text-align:
        center !important;
}


/* ============================================================
   LEGACY PLACEHOLDER PROTECTION
   ============================================================ */

.auth-brand-mark,
.login-brand-mark,
.auth-logo-placeholder,
.login-logo-placeholder,
.login-monogram,
.auth-monogram {
    display: none !important;
}


/* ============================================================
   REDUCED MOTION ACCESSIBILITY
   ============================================================ */

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

    .lb21-logo {
        animation: none;
    }

}


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

@media (
    max-width: 520px
) {

    .lb21-brand {
        margin-bottom: 12px;
    }


    .lb21-logo-frame {
        width: 104px;
        height: 104px;

        flex-basis: 104px;
    }


    .lb21-logo {
        width: 70px;
        height: 70px;
    }


    .lb21-logo-ring {
        inset: 6px;
    }

}


@media (
    max-width: 360px
) {

    .lb21-logo-frame {
        width: 94px;
        height: 94px;

        flex-basis: 94px;
    }


    .lb21-logo {
        width: 64px;
        height: 64px;
    }

}