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

#loader{
    position:fixed;
    inset:0;
    background:#ffffff;
    display:flex;
    justify-content:center;
    align-items:center;
    z-index:999999;
    transition:opacity .8s ease;
}

.loader-content{
    position:relative;
    width:320px;
    height:320px;
    display:flex;
    justify-content:center;
    align-items:center;
}

/* =========================
   CÍRCULO
========================= */

.ring{
    position:absolute;
    width:260px;
    height:260px;
    transform:rotate(-90deg);
}

.ring circle{
    fill:none;
    stroke:#d4af37;
    stroke-width:3;
    stroke-linecap:round;

    stroke-dasharray:690;
    stroke-dashoffset:690;
}

/* =========================
   ABELHA
========================= */

.bee{

    position:absolute;

    width:90px;

    z-index:5;

    animation:
        floatBee 2.5s ease-in-out infinite,
        beeTilt 3s ease-in-out infinite;

    transform-origin:center;

    transition:.5s;

}

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

.loader-logo{

    position:absolute;

    width:180px;

    bottom:-65px;

    opacity:0;

    transform:translateY(20px) scale(.95);

    transition:1s;

}

/* =========================
   GLOW
========================= */

.glow{

    position:absolute;

    width:160px;
    height:160px;

    border-radius:50%;

    background:radial-gradient(circle,
    rgba(212,175,55,.20),
    transparent 70%);

    opacity:0;

}

/* =========================
   SITE
========================= */

#site{

    opacity:0;

    transition:1s;

}

/* =========================
   ANIMAÇÕES
========================= */

@keyframes floatBee{

0%{

transform:translateY(0px);

}

50%{

transform:translateY(-7px);

}

100%{

transform:translateY(0px);

}

}

@keyframes glow{

0%{

opacity:0;

transform:scale(.5);

}

50%{

opacity:1;

}

100%{

opacity:0;

transform:scale(1.6);

}

}
@keyframes beeTilt{

0%{

transform:
translateY(0px)
rotate(0deg)
scale(1);

}

25%{

transform:
translateY(-4px)
rotate(-3deg)
scale(1.02);

}

50%{

transform:
translateY(-7px)
rotate(0deg)
scale(1.04);

}

75%{

transform:
translateY(-4px)
rotate(3deg)
scale(1.02);

}

100%{

transform:
translateY(0px)
rotate(0deg)
scale(1);

}

}