/* =====================================================
   Animations
   ===================================================== */

:root{
    --animation-duration: .9s;
    --animation-ease: cubic-bezier(.22,.61,.36,1);
}

/* =====================================================
   Initial State
   ===================================================== */

header,
.main--head,
.main--content,
.main--contact,
footer {

    opacity:0;
    transform:translateY(20px);

    animation:fadeUp var(--animation-duration)
              var(--animation-ease)
              forwards;

}

/* =====================================================
   Animation Timing
   ===================================================== */

header {
    animation-delay:.15s;
}

.main--head{
    animation-delay:.45s;
}

.main--content{
    animation-delay:.8s;
}

.main--contact{
    animation-delay:1.15s;
}

footer {
    animation-delay:1.45s;
}

/* =====================================================
   Logo
   ===================================================== */

.logo{

    animation: logoFade 1.3s cubic-bezier(.22,.61,.36,1) forwards;

    animation-delay:
        .15s,
        2.2s;

    transform-origin:center;

}

/* =====================================================
   Contact Links
   ===================================================== */

.main--contact-list--link{

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

}

.main--contact-list--link:hover {

    transform:translateY(-2px);

}

.main--contact-list--link-icon{

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

}

.main--contact-list--link:hover
.main--contact-list--link-icon{

    transform:scale(1.08);

}

/* =====================================================
   Headings
   ===================================================== */

h1,
h2{

    animation:fadeText 1.2s ease both;

}

.subtitle,
.description{

    animation:fadeText 1.4s ease both;

}

/* =====================================================
   Optional Divider
   ===================================================== */

.divider {

    width:0;
    height:1px;

    margin:28px auto;

    background:#C7AE76;

    animation:growDivider .9s ease forwards;
    animation-delay:1s;

}

/* =====================================================
   Background
   ===================================================== */

// body:before{

//     content:"";

//     position:fixed;
//     inset:0;

//     background:
//         radial-gradient(circle at top,#ffffff55,transparent 60%),
//         linear-gradient(180deg,#FAF6EF,#F5EFE6);

//     z-index:-1;

//     opacity:0;

//     animation:backgroundFade1 2s ease forwards;

// }

body::before{

    content:"";

    position:fixed;
    inset:0;

    background:
        radial-gradient(circle at top,#ffffff55,transparent 60%),
        linear-gradient(180deg,#FAF6EF,#F5EFE6);

    z-index:-1;

    transform:scale(1.03);

    opacity:0;

    animation:backgroundReveal 2.2s cubic-bezier(.22,.61,.36,1) forwards;

}


/* =====================================================
   Keyframes
   ===================================================== */

@keyframes fadeUp{

    from{

        opacity:0;
        transform:translateY(20px);

    }

    to{

        opacity:1;
        transform:translateY(0);

    }

}

@keyframes fadeText{

    from{

        opacity:0;

    }

    to{

        opacity:1;

    }

}

@keyframes logoFade{

    from{

        opacity:0;

        transform:
            scale(.94);

        filter:blur(3px);

    }

    to{

        opacity:1;

        transform:
            scale(1);

        filter:blur(0);

    }

}

@keyframes growDivider {

    to{

        width:90px;

    }

}

@keyframes backgroundFade{

    from{

        filter:brightness(.97);

    }

    to{

        filter:brightness(1);

    }

}

@keyframes backgroundFade1 {

    to{
        opacity:1;
    }

}

@keyframes backgroundReveal{

    from{

        opacity:0;

        transform:scale(1.03);

    }

    to{

        opacity:1;

        transform:scale(1);

    }

}

/* =====================================================
   Accessibility
   ===================================================== */

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

    *,
    *::before,
    *::after {

        animation:none !important;
        transition:none !important;

        opacity:1 !important;
        transform:none !important;

    }

}