<style>
/* ==========================================================
   DIAMONDS HATTON GARDEN
   PREMIUM PRELOADER
========================================================== */

:root{

    --loader-bg:#000;
    --loader-color:#fff;
    --text-secondary:#bdbdbd;

}

#dhg-loader{

    position:fixed;
    inset:0;

    width:100%;
    height:100vh;

    background:#000;
    display:flex;
    justify-content:center;
    align-items:center;

    z-index:999999999;

    overflow:hidden;

    transition:
    opacity .8s ease,
    visibility .8s ease;
opacity:1;
    visibility:visible;

}

#dhg-loader.hide{

    opacity:0;
    visibility:hidden;

}

/* ========================= */

.loader-content{

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

}

/* ========================= */

.diamond-3d{

    perspective:1200px;

}

/* ========================= */

.diamond-container{

    position:relative;

    width:130px;
    height:130px;

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

}

/* ========================= */

#diamond-svg{

    width:100%;
    height:100%;

    color:white;

    overflow:visible;

    transform-style:preserve-3d;

    animation:

    rotateDiamond 5s ease-in-out forwards

    animation-delay:1.8s;

}

/* ========================= */

#diamond-path{

    stroke:white;

    fill:none;

    stroke-width:1.6;

    stroke-dasharray:260;

    stroke-dashoffset:260;

    filter:

    drop-shadow(0 0 0px white);

    animation:
drawDiamond 5.5s cubic-bezier(.25,.8,.25,1) forwards,
glowDiamond 2.5s ease-in-out infinite;

animation-delay:
0s,
2.5s;

}

/* ========================= */

.brand{

    margin-top:35px;

    text-align:center;

}

.brand .brand-img{

    margin:0;

    color:white;

    font-family:'Cinzel',serif;

    font-weight:500;

    font-size:34px;

    letter-spacing:9px;

    opacity:0;

    transform:translateY(20px);

    animation:textReveal .8s forwards;

    animation-delay:2.4s;

}



/* ========================= */
/* Shine */

.diamond-shine{

    position:absolute;

    width:18px;
    height:180px;

    left:-120px;

    transform:rotate(25deg);

    background:

    linear-gradient(

        90deg,

        transparent,

        rgba(255,255,255,.9),

        transparent

    );

    opacity:0;

    animation:

    shineSweep 1.1s ease forwards;

    animation-delay:3.4s;

}

/* ========================= */
/* Sparkles */

.sparkle{

    position:absolute;

    width:6px;
    height:6px;

    border-radius:50%;

    background:white;

    box-shadow:

    0 0 10px white,

    0 0 18px white;

    opacity:0;

}

.sparkle:before,

.sparkle:after{

    content:"";

    position:absolute;

    background:white;

}

.sparkle:before{

    width:1px;
    height:14px;

    left:50%;
    top:-4px;

    transform:translateX(-50%);

}

.sparkle:after{

    width:14px;
    height:1px;

    left:-4px;
    top:50%;

    transform:translateY(-50%);

}

.sparkle-1{

    top:12px;
    right:8px;

    animation:sparkle 1s ease forwards;

    animation-delay:2.9s;

}

.sparkle-2{

    left:12px;
    bottom:18px;

    animation:sparkle 1s ease forwards;

    animation-delay:3.3s;

}

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

@keyframes drawDiamond{

    from{

        stroke-dashoffset:260;

    }

    to{

        stroke-dashoffset:0;

    }

}

@keyframes glowDiamond{

    0%{

        filter:drop-shadow(0 0 0px white);

    }

    50%{

        filter:drop-shadow(0 0 12px rgba(255,255,255,.45));

    }

    100%{

        filter:drop-shadow(0 0 0px white);

    }

}





@keyframes sparkle{

    0%{

        opacity:0;
        transform:scale(0);

    }

    50%{

        opacity:1;
        transform:scale(1.5);

    }

    100%{

        opacity:0;
        transform:scale(0);

    }

}

@keyframes textReveal{

    to{

        opacity:1;
        transform:translateY(0);

    }

}

/* ========================= */

@media(max-width:768px){

    .diamond-container{

        width:90px;
        height:90px;

    }

    .brand h2{

        font-size:22px;
        letter-spacing:5px;

    }

    .brand p{

        font-size:10px;
        letter-spacing:5px;

    }

}
</style>
