/* ==========================================================
   CALCINO SAFE THREE-COIN LOADER
   ========================================================== */

#calcinoLoader{
    position:fixed;
    inset:0;

    z-index:999999;

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

    background:
        rgba(8, 13, 17, .82);

    backdrop-filter:
        blur(8px);

    -webkit-backdrop-filter:
        blur(8px);

    opacity:0;
    visibility:hidden;

    /*
      CRITICAL:
      Loader can NEVER block clicks or scrolling.
    */
    pointer-events:none !important;

    transition:
        opacity .28s ease,
        visibility .28s ease;
}


#calcinoLoader.calcino-loader-visible{
    opacity:1;
    visibility:visible;
}


.calcino-loader-content{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;

    gap:22px;

    transform:
        translateY(-8px);
}


/* ==========================================================
   COINS
   ========================================================== */

.calcino-loader-coins{
    position:relative;

    width:132px;
    height:72px;
}


.calcino-loader-coin{
    position:absolute;

    top:9px;

    width:52px;
    height:52px;

    border-radius:50%;

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

    font-family:
        Tahoma,
        Arial,
        sans-serif;

    font-size:22px;
    font-weight:900;

    color:#241b08;

    background:
        radial-gradient(
            circle at 34% 28%,
            #fff1a5 0%,
            #f7d25f 20%,
            #d6a523 54%,
            #a8730e 78%,
            #704707 100%
        );

    border:
        2px solid
        rgba(255, 220, 104, .88);

    box-shadow:
        0 8px 23px
        rgba(0,0,0,.34),
        inset 0 2px 5px
        rgba(255,255,255,.48),
        inset 0 -4px 8px
        rgba(91,54,0,.30);

    animation:
        calcinoCoinFloat
        1.25s
        ease-in-out
        infinite;
}


.calcino-loader-coin::after{
    content:"";

    position:absolute;

    inset:5px;

    border-radius:50%;

    border:
        1px solid
        rgba(100,62,0,.30);
}


.calcino-loader-coin-one{
    right:72px;

    animation-delay:
        0s;
}


.calcino-loader-coin-two{
    right:39px;

    top:2px;

    z-index:3;

    width:58px;
    height:58px;

    animation-delay:
        .14s;
}


.calcino-loader-coin-three{
    right:4px;

    animation-delay:
        .28s;
}


@keyframes calcinoCoinFloat{

    0%,
    100%{
        transform:
            translateY(0)
            rotateY(0deg);
    }

    50%{
        transform:
            translateY(-11px)
            rotateY(18deg);
    }
}


/* ==========================================================
   TEXT
   ========================================================== */

.calcino-loader-brand{
    color:#f4f7f9;

    font-size:19px;
    font-weight:900;

    letter-spacing:.1px;
}


.calcino-loader-caption{
    margin-top:-14px;

    color:#aebac3;

    font-size:11px;
    font-weight:500;
}


/* ==========================================================
   SMALL DOTS
   ========================================================== */

.calcino-loader-dots{
    display:flex;

    gap:6px;

    margin-top:-8px;
}


.calcino-loader-dot{
    width:5px;
    height:5px;

    border-radius:50%;

    background:#d9a62e;

    opacity:.35;

    animation:
        calcinoLoaderDot
        1.1s
        ease-in-out
        infinite;
}


.calcino-loader-dot:nth-child(2){
    animation-delay:.15s;
}


.calcino-loader-dot:nth-child(3){
    animation-delay:.30s;
}


@keyframes calcinoLoaderDot{

    0%,
    100%{
        opacity:.25;
        transform:scale(.85);
    }

    50%{
        opacity:1;
        transform:scale(1.25);
    }
}


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

@media(max-width:650px){

    #calcinoLoader{
        backdrop-filter:
            blur(6px);

        -webkit-backdrop-filter:
            blur(6px);
    }


    .calcino-loader-coins{
        width:120px;
        height:66px;
    }


    .calcino-loader-coin{
        width:47px;
        height:47px;

        font-size:19px;
    }


    .calcino-loader-coin-one{
        right:66px;
    }


    .calcino-loader-coin-two{
        right:35px;

        width:53px;
        height:53px;
    }


    .calcino-loader-brand{
        font-size:17px;
    }


    .calcino-loader-caption{
        font-size:10px;
    }
}


/*
  Accessibility:
  disable motion where user requests reduced motion.
*/

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

    .calcino-loader-coin,
    .calcino-loader-dot{
        animation:none !important;
    }
}