/*==================================================
    MIRLO FILMS
    FOOTER
==================================================*/

/*==================================================
    FOOTER
==================================================*/

.footer{

    padding:140px 0 70px;

    background:var(--color-white);

    border-top:1px solid rgba(0,0,0,.06);

}

.footer .container{

    max-width:1100px;

    margin:0 auto;

}

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

.footer-brand{

    display:flex;

    flex-direction:column;

    align-items:center;

    text-align:center;

}

.footer-logo{

    display:inline-flex;

    width:190px;

}

.footer-logo img{

    display:block;

    width:100%;

    height:auto;

}

.footer-description{

    margin-top:38px;

    font-family:var(--font-body);

    font-size:.82rem;

    font-weight:600;

    letter-spacing:.35em;

    text-transform:uppercase;

    color:var(--color-gold);

}

.footer-text{

    max-width:520px;

    margin-top:36px;

    font-family:var(--font-body);

    font-size:1.05rem;

    line-height:2;

    color:var(--color-text);

}

/*==================================================
    NAVIGATION
==================================================*/

.footer-nav{

    display:flex;

    justify-content:center;

    align-items:center;

    flex-wrap:wrap;

    gap:36px;

    margin:60px 0 50px;

}

.footer-nav a{

    position:relative;

    font-family:var(--font-body);

    font-size:.82rem;

    font-weight:600;

    letter-spacing:.28em;

    text-transform:uppercase;

    color:var(--color-light);

    transition:
        color .35s ease;

}

.footer-nav a:hover{

    color:var(--color-gold);

}

.footer-nav a::after{

    content:"";

    position:absolute;

    left:50%;

    bottom:-8px;

    width:0;

    height:1px;

    background:var(--color-gold);

    transform:translateX(-50%);

    transition:width .35s ease;

}

.footer-nav a:hover::after{

    width:100%;

}

/*==================================================
    SOCIAL
==================================================*/

.footer-social{

    display:flex;

    justify-content:center;

    align-items:center;

    gap:34px;

    margin-bottom:45px;

}

.footer-social a{

    position:relative;

    font-family:var(--font-body);

    font-size:.82rem;

    font-weight:500;

    letter-spacing:.18em;

    text-transform:uppercase;

    color:var(--color-light);

    transition:
        color .35s ease,
        transform .35s ease;

}

.footer-social a:hover{

    color:var(--color-gold);

    transform:translateY(-2px);

}

.footer-social a::after{

    content:"";

    position:absolute;

    left:50%;

    bottom:-8px;

    width:0;

    height:1px;

    background:var(--color-gold);

    transform:translateX(-50%);

    transition:width .35s ease;

}

.footer-social a:hover::after{

    width:100%;

}

/*==================================================
    BOTTOM
==================================================*/

.footer-bottom{

    padding-top:40px;

    border-top:1px solid rgba(0,0,0,.08);

    text-align:center;

}

.footer-bottom p{

    font-family:var(--font-body);

    font-size:.82rem;

    letter-spacing:.14em;

    text-transform:uppercase;

    color:var(--color-light);

}

/*==================================================
    RESPONSIVE
==================================================*/

@media (max-width:768px){

    .footer{

        padding:90px 0 50px;

    }

    .footer-logo{

        width:150px;

    }

    .footer-description{

        margin-top:28px;

        font-size:.75rem;

        letter-spacing:.28em;

    }

    .footer-text{

        max-width:92%;

        margin-top:20px;

        font-size:1rem;

        line-height:1.8;

    }

    .footer-nav{

        flex-direction:column;

        gap:24px;

        margin:60px 0 50px;

    }

    .footer-social{

        flex-direction:column;

        gap:20px;

        margin-bottom:40px;

    }

    .footer-bottom{

        padding-top:28px;

    }

    .footer-bottom p{

        font-size:.75rem;

        letter-spacing:.12em;

        line-height:1.8;

    }

}

/*==================================================
    FOOTER REVEAL
==================================================*/

.footer-brand,
.footer-nav,
.footer-social,
.footer-bottom{

    opacity:0;

    transform:translateY(20px);

    animation:footerReveal .8s ease forwards;

}

.footer-nav{

    animation-delay:.15s;

}

.footer-social{

    animation-delay:.3s;

}

.footer-bottom{

    animation-delay:.45s;

}

@keyframes footerReveal{

    to{

        opacity:1;

        transform:none;

    }

}

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

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

    .footer-brand,
    .footer-nav,
    .footer-social,
    .footer-bottom{

        opacity:1;

        transform:none;

        animation:none;

    }

}