/* ==========================================================
   ORACLE DES ROYAUMES ARCANIQUES
   EFFECTS.CSS
   Thème : Bleu Arcanique - Cristal - Runes
========================================================== */


/* ==========================================================
   PARTICULES MAGIQUES BLEUES
========================================================== */


#particles {

    position:fixed;

    inset:0;

    pointer-events:none;

    z-index:5;

    overflow:hidden;

}



#particles::before {


    content:"";


    position:absolute;


    inset:0;


    background-image:url("assets/effects/particles-blue.png");


    background-repeat:repeat;


    background-size:500px;


    opacity:.45;


    animation:

    particlesMove 35s linear infinite;


}



#particles::after {


    content:"";


    position:absolute;


    inset:0;


    background-image:url("assets/effects/particles-blue.png");


    background-size:300px;


    opacity:.2;


    animation:

    particlesMoveReverse 50s linear infinite;


}



@keyframes particlesMove {


    from {

        transform:
        translateY(0);

    }


    to {

        transform:
        translateY(-500px);

    }

}



@keyframes particlesMoveReverse {


    from {

        transform:
        translateY(-300px);

    }


    to {

        transform:
        translateY(200px);

    }

}





/* ==========================================================
   CERCLE MAGIQUE SOUS LE PAQUET
========================================================== */


.table-glow {


    position:absolute;


    width:450px;

    height:450px;


    left:50%;

    top:50%;


    transform:
    translate(-50%,-50%);


    background-image:

    url("assets/effects/magic-circle.png");


    background-size:contain;


    background-repeat:no-repeat;


    background-position:center;


    opacity:.55;


    filter:

    drop-shadow(
    0 0 30px #4ccfff
    );


    animation:

    magicCircleRotate 60s linear infinite;


}



@keyframes magicCircleRotate {


    from {

        rotate:0deg;

    }


    to {

        rotate:360deg;

    }

}





/* ==========================================================
   BROUILLARD LUNAIRE
========================================================== */


.fog {


    position:fixed;


    width:900px;

    height:400px;


    pointer-events:none;


    z-index:2;


    background:


    radial-gradient(

    ellipse,

    rgba(80,180,255,.18),

    transparent 70%

    );


    filter:

    blur(50px);


}



.fog1 {


    bottom:-120px;


    left:-300px;


    animation:

    fogMove1 30s infinite alternate ease-in-out;


}



.fog2 {


    top:15%;


    right:-350px;


    animation:

    fogMove2 40s infinite alternate ease-in-out;


}



@keyframes fogMove1 {


    from {

        transform:
        translateX(0)
        scale(1);

    }


    to {

        transform:
        translateX(300px)
        scale(1.4);

    }

}



@keyframes fogMove2 {


    from {

        transform:
        translateX(0);

    }


    to {

        transform:
        translateX(-300px);

    }

}





/* ==========================================================
   AURA MAGIQUE DES CARTES
========================================================== */


.magic-glow {


    position:absolute;


    border-radius:50%;


    background:


    radial-gradient(

    circle,

    rgba(90,220,255,.7),

    transparent 70%

    );


    filter:

    blur(35px);


    animation:

    glowPulse 5s infinite;


}



@keyframes glowPulse {


    0%,100% {


        opacity:.4;

        transform:
        scale(.9);

    }


    50% {


        opacity:1;

        transform:
        scale(1.2);

    }

}





/* ==========================================================
   BOUGIES MAGIQUES ARCANES
========================================================== */


.candles {

    position:fixed;

    bottom:25px;

    left:0;

    width:100%;

    height:120px;

    pointer-events:none;

    z-index:30;

}



.candle {


    position:absolute;


    width:30px;


    height:90px;


    background:


    linear-gradient(

    90deg,

    #9fb8e8,

    white,

    #6f83b8

    );


    border-radius:12px;


    box-shadow:


    0 0 25px rgba(80,200,255,.6);


}



.candle.left {

    left:50px;

}



.candle.right {

    right:50px;

}





/* ==========================================================
   HALO DE FLAMME BLEUE
========================================================== */


.candle::before {


    content:"";


    position:absolute;


    top:-55px;


    left:-25px;


    width:80px;


    height:80px;


    background-image:


    url("assets/effects/flame-blue.png");


    background-size:


    contain;


    background-repeat:


    no-repeat;


    background-position:


    center;


    opacity:.45;


    filter:


    blur(5px);


    animation:


    flameAura 1.5s infinite alternate;


}





/* ==========================================================
   VRAIE FLAMME CSS
========================================================== */


.candle::after {


    content:"";


    position:absolute;


    top:-42px;


    left:8px;


    width:15px;


    height:35px;


    background:


    linear-gradient(

    to top,

    #00bfff,

    #8eeaff,

    white

    );


    border-radius:


    50% 50% 45% 45%;


    transform-origin:


    bottom center;


    box-shadow:


    0 0 10px #00d9ff,


    0 0 25px #008cff,


    0 0 45px #0066ff;


    animation:


    blueFlame 1s infinite alternate ease-in-out;


}






@keyframes blueFlame {


    0% {


        transform:


        rotate(-8deg)

        scale(.9,.95);


        opacity:.8;

    }



    50% {


        transform:


        rotate(4deg)

        scale(1.15,1.25);


        opacity:1;

    }



    100% {


        transform:


        rotate(8deg)

        scale(.95,1);


        opacity:.85;

    }

}






@keyframes flameAura {


    0% {


        transform:


        scale(.8);


        opacity:.3;

    }



    50% {


        transform:


        scale(1.15);


        opacity:.65;

    }



    100% {


        transform:


        scale(.9);


        opacity:.4;

    }

}





/* ==========================================================
   APPARITIONS MAGIQUES
========================================================== */


.fade-in {


    animation:

    fadeIn 1s ease forwards;

}



.fade-out {


    animation:

    fadeOut .8s ease forwards;

}



@keyframes fadeIn {


    from {

        opacity:0;

        transform:
        translateY(20px);

    }


    to {

        opacity:1;

        transform:
        translateY(0);

    }

}



@keyframes fadeOut {


    from {

        opacity:1;

    }


    to {

        opacity:0;

    }

}





/* ==========================================================
   APPARITION DE CARTE
========================================================== */


.magicAppear {


    animation:

    magicAppear 1.5s ease;

}



@keyframes magicAppear {


    0% {


        opacity:0;


        filter:
        blur(20px)
        drop-shadow(0 0 50px #4ddfff);


        transform:
        scale(.7);

    }



    100% {


        opacity:1;


        filter:
        blur(0);


        transform:
        scale(1);

    }

}





/* ==========================================================
   BOUTONS & INTERACTIONS
========================================================== */


button,
#deck,
.oracle-card {


    transition:


    transform .4s ease,

    box-shadow .4s ease,

    filter .4s ease;


}



button:hover {


    filter:

    drop-shadow(
    0 0 15px #5adfff
    );


}





/* ==========================================================
   VINETTE SOMBRE
========================================================== */


body::after {


    content:"";


    position:fixed;


    inset:0;


    pointer-events:none;


    z-index:100;


    background:


    radial-gradient(

    circle,

    transparent 40%,


    rgba(0,5,20,.75)

    );


}