/* ==========================================
   ORACLE DES ROYAUMES ARCANIQUES
   CARTES - FLIP 3D CORRIGE
========================================== */


/* ==========================================
   ZONE DE TIRAGE
========================================== */


#spread {

    width:100%;

    height:0;

    overflow:visible;

    display:flex;

    justify-content:center;

    align-items:center;

    flex-wrap:wrap;

    gap:35px;

    margin:0 auto;

    position:relative;

    top:-220px;

    z-index:20;

}




/* ==========================================
   CARTE
========================================== */


.drawn-card {


    width:220px;

    height:340px;


    perspective:1200px;


    cursor:pointer;


    position:relative;


}




.card-inner {


    width:100%;

    height:100%;


    position:relative;


    transform-style:preserve-3d;


    transition:

    transform 1s cubic-bezier(.2,.8,.2,1);


}






/* ==========================================
   ROTATION
========================================== */


.drawn-card.flip .card-inner {


    transform:rotateY(180deg);


}






/* ==========================================
   FACES
========================================== */


.card-front,
.card-back {


    position:absolute;


    inset:0;


    width:100%;

    height:100%;


    border-radius:20px;


    overflow:hidden;


    backface-visibility:hidden;


    -webkit-backface-visibility:hidden;


    pointer-events:none;



    box-shadow:


    0 0 25px rgba(80,200,255,.5),


    inset 0 0 25px rgba(255,255,255,.15);


}







/* ==========================================
   DOS
========================================== */


.card-back {


    transform:rotateY(0deg);


    background:


    radial-gradient(

        circle,

        #163b63,

        #020713

    );


}



.card-back img {


    width:100%;

    height:100%;


    object-fit:cover;


}






/* ==========================================
   FACE
========================================== */


.card-front {


    transform:rotateY(180deg);


}




.card-front img {


    width:100%;

    height:100%;


    object-fit:cover;


}







/* ==========================================
   HOVER CORRIGÉ
========================================== */


/* Carte non retournée */

.drawn-card.flip:hover .card-inner {

    transform:
    translateY(-15px)
    scale(1.05)
    rotateY(180deg);

}


/* Carte retournée */

.drawn-card.flip:hover .card-inner {

    transform:
    rotateY(180deg)
    translateY(-15px)
    scale(1.05);

}


.drawn-card:hover {

    filter:
    drop-shadow(0 0 30px #65dfff);

}


.card-inner {
    transform-style:preserve-3d;
    will-change:transform;
}

.drawn-card{

transform-style:preserve-3d;

}



/* ==========================================
   CARTE INVERSEE
========================================== */


.drawn-card.reversed .card-front img {


    transform:rotate(180deg);


}




.drawn-card.reversed::after {


    content:"☾";


    position:absolute;


    top:-15px;

    right:-15px;


    width:42px;

    height:42px;


    border-radius:50%;


    display:flex;

    align-items:center;

    justify-content:center;


    color:white;


    font-size:22px;



    background:


    radial-gradient(

    circle,

    #cceaff,

    #145080

    );


    box-shadow:


    0 0 25px #65dfff;



    z-index:5;


}







/* ==========================================
   CARTE DETAILLEE
========================================== */


#cardImage {


    width:300px;


    display:flex;


    justify-content:center;


    align-items:center;


}





.big-card {


    width:280px;


    border-radius:20px;


    box-shadow:


    0 0 45px rgba(100,220,255,.8);



    animation:


    cardAppear .8s ease;


}





.big-card.reverse {

    animation:

    cardAppearReverse .8s ease;

}

@keyframes cardAppearReverse {

from{

opacity:0;

transform:
scale(.5)
rotateY(90deg)
rotate(180deg);

}

to{

opacity:1;

transform:
scale(1)
rotateY(0)
rotate(180deg);

}

}






@keyframes cardAppear {


from {


opacity:0;


transform:


scale(.5)

rotateY(90deg);


}



to {


opacity:1;


transform:


scale(1)

rotateY(0);


}


}








/* ==========================================
   PANNEAU INFORMATIONS
========================================== */


#cardInfos {


    max-width:500px;


    padding:30px;


    background:


    rgba(2,15,35,.92);



    border:


    1px solid rgba(100,220,255,.45);



    border-radius:25px;



    backdrop-filter:blur(12px);



    box-shadow:


    0 0 40px rgba(50,180,255,.25);



}






#cardInfos h2 {


    font-family:"Cinzel",serif;


    text-align:center;


    color:#8de8ff;


    font-size:32px;


}




#cardInfos h3 {


    text-align:center;


    color:#65dfff;


}







.keywords {


    display:flex;


    justify-content:center;


    flex-wrap:wrap;


    gap:10px;


    margin:20px;


}




.keywords span {


    padding:8px 15px;


    border-radius:20px;



    background:


    linear-gradient(

        135deg,

        #126a9b,

        #032033

    );



    color:white;


}






#cardInfos h4 {


    font-family:"Cinzel";


    color:#ffd56a;


    margin-top:20px;


}





#cardInfos p {


    color:#e8f6ff;


    line-height:1.7;


}






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


@media(max-width:900px){


.drawn-card {


    width:160px;


    height:250px;


}



.big-card {


    width:220px;


}



}

/* ==========================================
   INVOCATION MAGIQUE DES CARTES
========================================== */


/* Couche de vol */

#animationLayer{

    position:fixed;

    inset:0;

    pointer-events:none;

    z-index:500;

}




/* Carte en déplacement */

.drawn-card.flying{

    z-index:600;

}




/* Traînée lumineuse */

.card-trail{

    position:absolute;

    inset:-40px;

    border-radius:30px;


    background:

    radial-gradient(

        circle,

        rgba(100,230,255,.9),

        transparent 65%

    );


    filter:

    blur(20px);


    opacity:0;


    pointer-events:none;


}



.drawn-card.flying .card-trail{


    animation:

    trailGlow 1.2s ease-out forwards;


}





@keyframes trailGlow{


0%{

    opacity:0;

    transform:scale(.5);

}


30%{

    opacity:1;

    transform:scale(1.3);

}


100%{

    opacity:0;

    transform:scale(.8);

}


}





/* Vol de la carte */


@keyframes cardFly{


0%{


    opacity:0;


    transform:

    scale(.5)

    rotateY(0deg)

    rotateZ(-20deg);



}



20%{


    opacity:1;


}



50%{


    transform:

    scale(1.1)

    rotateY(180deg)

    rotateZ(10deg);



}



80%{


    transform:

    scale(1)

    rotateY(340deg)

    rotateZ(-5deg);



}



100%{


    opacity:1;


    transform:

    scale(1)

    rotateY(360deg)

    rotateZ(0deg);



}



}

/* ==========================================
   ANIMATION CARTES MAGIQUES
========================================== */


#animationLayer {

    position:fixed;

    inset:0;

    pointer-events:none;

    z-index:500;

}





.flying-card {

    width:220px;

    height:340px;

    perspective:1200px;

}





/* Traînée lumineuse */

.card-trail {

    position:absolute;

    inset:-80px;

    border-radius:50%;

    background:

    radial-gradient(

        circle,

        rgba(101,223,255,.8),

        transparent 70%

    );


    filter:blur(25px);

    opacity:0;

    animation:
    trailPulse 1.2s infinite;


}





.flying .card-trail {


    opacity:1;


}





@keyframes trailPulse {


    0%{

        transform:scale(.5);

        opacity:.2;

    }


    50%{

        transform:scale(1.2);

        opacity:1;

    }


    100%{

        transform:scale(.5);

        opacity:.2;

    }


}






/* Effet pendant le vol */


.flying {


    filter:

    drop-shadow(0 0 25px #65dfff)

    drop-shadow(0 0 80px #65dfff);


}