/* ==========================================================
   ORACLE DES ROYAUMES ARCANIQUES
   STYLE GLOBAL
   Dark Fantasy - Version 2
========================================================== */

/* =========================
   VIDEO
========================= */

#backgroundVideo{

    position:fixed;

    inset:0;

    width:100%;
    height:100%;

    object-fit:cover;

    z-index:-3;

    filter:
        brightness(.22)
        contrast(1.15)
        saturate(1.2);

}

/* =========================
   RESET
========================= */

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html,
body{
    width:100%;
    min-height:100%;
}

body{

    overflow-x:hidden;

    min-height:100vh;

    font-family:"Cormorant Garamond",serif;

    color:#edf8ff;

    background:#02050d;

}

main{

    position:relative;

    z-index:5;

}

/* =========================
   OVERLAY
========================= */

body::before{

    content:"";

    position:fixed;

    inset:0;

    pointer-events:none;

    z-index:-2;

    background:

    radial-gradient(

        circle at center,

        rgba(90,200,255,.12),

        transparent 55%

    ),

    radial-gradient(

        circle at top,

        rgba(40,120,255,.10),

        transparent 45%

    ),

    linear-gradient(

        rgba(0,5,15,.35),

        rgba(0,15,35,.65)

    );

}

/* =========================
   VIGNETTAGE
========================= */

body::after{

    content:"";

    position:fixed;

    inset:0;

    pointer-events:none;

    z-index:-1;

    background:

    radial-gradient(

        circle,

        transparent 55%,

        rgba(0,0,0,.60)

    );

}

/* =========================
   HEADER
========================= */

header{

    text-align:center;

    padding-top:45px;

    position:relative;

    z-index:5;

}

h1{

    font-family:"Cinzel",serif;

    font-size:3.3rem;

    letter-spacing:7px;

    color:#9be9ff;

    text-shadow:

        0 0 12px #33cfff,

        0 0 35px rgba(50,200,255,.8),

        0 0 90px rgba(50,200,255,.35);

}

header p{

    margin-top:18px;

    font-size:1.45rem;

    color:#d6f4ff;

    font-style:italic;

    text-shadow:

        0 0 12px rgba(80,220,255,.5);

}

/* =========================
   MENU
========================= */

#menu{

    margin-top:45px;

    display:flex;

    justify-content:center;

    flex-wrap:wrap;

    gap:20px;

    position:relative;

    z-index:5;

}

.oracleButton{

    padding:16px 34px;

    font-family:"Cinzel";

    font-size:17px;

    color:white;

    border:none;

    border-radius:50px;

    cursor:pointer;

    background:

    linear-gradient(

        180deg,

        rgba(15,70,110,.95),

        rgba(2,18,35,.95)

    );

    border:1px solid rgba(120,220,255,.6);

    box-shadow:

        0 0 20px rgba(50,180,255,.35),

        inset 0 0 10px rgba(255,255,255,.05);

    transition:.35s;

}

.oracleButton:hover{

    transform:

        translateY(-4px)

        scale(1.04);

    box-shadow:

        0 0 35px #65dfff,

        0 0 70px rgba(80,220,255,.4);

}

/* =========================
   TABLE
========================= */

#table {

    width:100%;

    height:300px;

    margin:40px auto 0;

    display:flex;

    justify-content:center;

    align-items:center;

    position:relative;

}

/* Cercle magique */

.magicCircle{

    position:absolute;

    width:800px;

    opacity:.45;

    pointer-events:none;

    

    filter:

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

        drop-shadow(0 0 60px rgba(50,200,255,.5));

    animation:

        rotateCircle 140s linear infinite;

}

#animationLayer {

    z-index:20;

}

.magicCircle.fast{

    animation-duration:4s !important;

    filter:

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

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

}

@keyframes rotateCircle{

    from{

        transform:rotate(0deg);

    }

    to{

        transform:rotate(360deg);

    }

}

/* =========================
   PAQUET
========================= */

#deck{

    position:relative;

    z-index:5;

    transform:translateY(70px);

    cursor:pointer;

}

#deckImage{

    width:230px;

    border-radius:20px;

    border:2px solid rgba(130,230,255,.8);

    box-shadow:

        0 0 30px rgba(80,220,255,.6),

        0 0 80px rgba(40,150,255,.5);

    transition:.5s;

}

#deck:hover #deckImage{

    transform:

        translateY(-15px)

        rotate(-4deg)

        scale(1.03);

}

/* ==========================================================
   CRISTAUX SUSPENDUS
========================================================== */

.crystals{

    position:fixed;

    inset:0;

    pointer-events:none;

    z-index:1;

}


.crystal{

    position:absolute;

    top:-60px;

    width:170px;

    display:flex;

    flex-direction:column;

    align-items:center;

    animation:crystalFloat 6s ease-in-out infinite;

    z-index:1;

}


.crystal.left{

    left:80px;

}


.crystal.right{

    right:80px;

    animation-delay:3s;

}


/* =========================
   CHAINE SUSPENDUE
========================= */

.crystal::before{

    content:"";

    position:absolute;

    top:0;

    width:8px;

    height:260px;


    background:

    repeating-linear-gradient(

        to bottom,

        transparent 0px,

        transparent 8px,

        rgba(220,240,255,.9) 8px,

        rgba(220,240,255,.9) 12px

    );


    border-left:

        2px solid rgba(180,220,255,.8);


    border-right:

        2px solid rgba(180,220,255,.8);


    filter:

        drop-shadow(0 0 8px #8eefff);


    z-index:0;

}


/* =========================
   ANNEAU DANS LE CRISTAL
========================= */

.crystal::after{

    content:"";

    width:24px;

    height:24px;


    border-radius:50%;


    border:

        3px solid #bde8ff;


    position:absolute;


    top:250px;


    left:50%;


    transform:translateX(-50%);


    box-shadow:

        0 0 15px #8eefff;


    z-index:0;

}



/* =========================
   CRISTAL
========================= */

.crystal img{

    width:110px;

    margin-top:250px;


    position:relative;


    z-index:2;


    filter:


        drop-shadow(0 0 15px #8eefff)

        drop-shadow(0 0 45px rgba(80,220,255,.55));

}



/* =========================
   FLOTTEMENT
========================= */

@keyframes crystalFloat{

    0%{

        transform:

            rotate(-2deg)

            translateY(0px);

    }


    50%{

        transform:

            rotate(2deg)

            translateY(10px);

    }


    100%{

        transform:

            rotate(-2deg)

            translateY(0px);

    }

}


/* ==========================================================
   TABLE MAGIQUE
========================================================== */

#table{

    position:relative;

    display:flex;

    justify-content:center;

    align-items:center;

    height:330px;

    margin-top:25px;

}

/* Halo lumineux */

.table-glow{

    position:absolute;

    width:520px;

    height:520px;

    border-radius:50%;

    background:

        radial-gradient(

            circle,

            rgba(80,220,255,.22),

            rgba(80,220,255,.08),

            transparent 70%

        );

    filter:blur(25px);

    animation:tablePulse 5s ease-in-out infinite;

}

@keyframes tablePulse{

    0%{

        transform:scale(.95);

        opacity:.45;

    }

    50%{

        transform:scale(1.05);

        opacity:.8;

    }

    100%{

        transform:scale(.95);

        opacity:.45;

    }

}


/* Cercle magique */

.magicCircle{

    position:absolute;

    width:1000px;

    opacity:.25;
    top:-250px;

    animation:

        rotateCircle 150s linear infinite;

}

@keyframes rotateCircleReverse{

    from{

        transform:rotate(360deg);

    }

    to{

        transform:rotate(0deg);

    }

}


/* ==========================================================
   PAQUET
========================================================== */

#deck{

    position:relative;

    z-index:10;

    transform:translateY(60px);

}

#deckImage{

    transition:

        transform .5s,

        box-shadow .5s;

}

#deck:hover #deckImage{

    transform:

        translateY(-12px)

        rotate(-4deg)

        scale(1.04);

    box-shadow:

        0 0 45px #72dfff,

        0 0 90px rgba(80,220,255,.45);

}


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

#spread{

    width:95%;

    max-width:1300px;

    height:300px;

    margin:40px auto 0;

    display:flex;

    justify-content:center;

    align-items:center;

    gap:5px;

    flex-wrap:wrap;

    position:relative;

    z-index:20;

}


/* Halo derrière les cartes */

#spread::before{

    content:"";

    position:absolute;

    width:700px;

    height:350px;

    border-radius:50%;

    background:

        radial-gradient(

            circle,

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

            transparent 70%

        );

    filter:blur(35px);

    z-index:-1;

}


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

.fog{

    position:fixed;

    pointer-events:none;

    z-index:-8;

    filter:blur(80px);

}

.fog1{

    width:900px;

    height:400px;

    left:-200px;

    bottom:0;

    background:

        radial-gradient(

            ellipse,

            rgba(120,220,255,.08),

            transparent 70%

        );

    animation:fogMove1 40s linear infinite;

}

.fog2{

    width:800px;

    height:350px;

    right:-150px;

    top:180px;

    background:

        radial-gradient(

            ellipse,

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

            transparent 70%

        );

    animation:fogMove2 50s linear infinite;

}

@keyframes fogMove1{

    0%{

        transform:translateX(0);

    }

    50%{

        transform:translateX(120px);

    }

    100%{

        transform:translateX(0);

    }

}

@keyframes fogMove2{

    0%{

        transform:translateX(0);

    }

    50%{

        transform:translateX(-120px);

    }

    100%{

        transform:translateX(0);

    }

}

/* ==========================================================
   LECTURE DE LA CARTE
========================================================== */

#reading{

    width:92%;
    max-width:1250px;

    margin:150px auto 80px;

    display:none;

    align-items:flex-start;

    justify-content:center;

    gap:55px;

    padding:40px;

    border-radius:28px;

    background:

        linear-gradient(
            180deg,
            rgba(5,20,40,.92),
            rgba(2,10,25,.96)
        );

    border:1px solid rgba(120,220,255,.30);

    backdrop-filter:blur(18px);

    box-shadow:

        0 0 70px rgba(60,180,255,.18),

        inset 0 0 40px rgba(255,255,255,.03);

    animation:readingAppear .8s ease;

}

@keyframes readingAppear{

    from{

        opacity:0;

        transform:
            translateY(40px);

    }

    to{

        opacity:1;

        transform:
            translateY(0);

    }

}


/* ==========================================================
   IMAGE
========================================================== */

#cardImage{

    min-width:320px;

    display:flex;

    justify-content:center;

    align-items:center;

}

.big-card{

    width:300px;

    border-radius:22px;

    box-shadow:

        0 0 35px rgba(90,220,255,.45),

        0 0 80px rgba(40,150,255,.35);

    transition:.35s;

}

.big-card:hover{

    transform:

        scale(1.03);

}

.big-card.reverse{

    transform:rotate(180deg);

}


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

#cardInfos{

    flex:1;

}

#cardInfos h2{

    font-family:"Cinzel",serif;

    color:#9feeff;

    font-size:2.2rem;

    margin-bottom:10px;

    text-shadow:

        0 0 15px rgba(80,220,255,.6);

}

#cardInfos h3{

    color:#68dfff;

    margin-bottom:20px;

}

#cardInfos h4{

    margin-top:25px;

    margin-bottom:10px;

    font-family:"Cinzel";

    color:#ffd77a;

    letter-spacing:1px;

}

#cardInfos p{

    line-height:1.8;

    color:#e6f8ff;

}


/* ==========================================================
   MOTS CLES
========================================================== */

.keywords{

    display:flex;

    flex-wrap:wrap;

    gap:10px;

    margin:20px 0;

}

.keywords span{

    padding:8px 18px;

    border-radius:30px;

    background:

        linear-gradient(

            135deg,

            #1d6fa1,

            #092236

        );

    border:1px solid rgba(120,220,255,.35);

    box-shadow:

        0 0 12px rgba(80,220,255,.20);

}


/* ==========================================================
   MODAL
========================================================== */

#cardModal{

    position:fixed;

    inset:0;

    display:none;

    justify-content:center;

    align-items:center;

    background:rgba(0,0,0,.85);

    backdrop-filter:blur(10px);

    z-index:9999;

}

.modalContent{

    width:90%;

    max-width:1000px;

    position:relative;

    display:flex;

    gap:40px;

    padding:35px;

    border-radius:30px;

    background:

        linear-gradient(

            180deg,

            rgba(5,20,40,.96),

            rgba(0,8,20,.96)

        );

    border:1px solid rgba(120,220,255,.25);

}

#closeModal{

    position:absolute;

    top:20px;

    right:20px;

    width:45px;

    height:45px;

    border-radius:50%;

    border:none;

    background:#0b2338;

    color:#8cecff;

    cursor:pointer;

    transition:.3s;

}

#closeModal:hover{

    transform:rotate(90deg);

    box-shadow:

        0 0 20px #65dfff;

}


/* ==========================================================
   AUDIO
========================================================== */

#audioControl{

    position:fixed;

    right:25px;

    bottom:25px;

    display:flex;

    align-items:center;

    gap:15px;

    padding:15px 20px;

    border-radius:30px;

    background:

        rgba(3,12,28,.88);

    border:1px solid rgba(120,220,255,.25);

    backdrop-filter:blur(10px);

    z-index:500;

}

#musicToggle{

    background:none;

    border:none;

    color:white;

    font-size:24px;

    cursor:pointer;

}

#musicVolume{

    width:130px;

}


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

#loading{

    position:fixed;

    inset:0;

    display:none;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    gap:20px;

    background:rgba(0,5,15,.35);

    backdrop-filter:blur(3px);

    z-index:99999;

    font-family:"Cinzel", serif;

    color:#9eefff;

    font-size:18px;

    letter-spacing:2px;

    text-shadow:
        0 0 10px #65dfff;

    pointer-events:none;

}

#loading.active{

    display:flex;

}

.spinner{

    width:60px;

    height:60px;

    border-radius:50%;

    border:4px solid rgba(120,220,255,.25);

    border-top-color:#8cecff;

    animation:spin 1s linear infinite;

    box-shadow:
        0 0 25px rgba(80,220,255,.45);

}

@keyframes spin{

    from{

        transform:rotate(0);

    }

    to{

        transform:rotate(360deg);

    }

}


/* ==========================================================
   RESPONSIVE
========================================================== */

@media(max-width:1000px){

    #reading{

        flex-direction:column;

        align-items:center;

        text-align:center;

    }

    #cardImage{

        min-width:0;

    }

}

@media(max-width:700px){

/* ==========================================================
   TITRE ORACLE - ALMENDRA SC
========================================================== */

header h1{

    font-family: "Almendra SC", serif !important;

    font-size: 3.5rem !important;

    font-weight:400;

    letter-spacing:6px;

    color:#9be9ff;

    text-shadow:

        0 0 15px #33cfff,

        0 0 40px rgba(50,200,255,.8),

        0 0 90px rgba(50,200,255,.5);

}

header p{

    font-family:"Cormorant Garamond",serif;

    margin-top:18px;

    font-size:1.5rem;

    font-style:italic;

    color:#d6f4ff;

    text-shadow:

        0 0 12px rgba(80,220,255,.5);

}

    .oracleButton{

        width:90%;

    }

    #deckImage{

        width:170px;

    }

    .big-card{

        width:220px;

    }

    #reading{

        padding:25px;

    }

}

/* ==========================================
   PAQUET MAGIQUE
========================================== */

#deck{

    position:relative;

    z-index:20;

    transition:transform .3s;

}

#deck.shuffling{

    animation:deckShuffle .45s ease-in-out infinite;

}

@keyframes deckShuffle{

    0%{

        transform:
            translateY(70px)
            rotate(0deg);

    }

    20%{

        transform:
            translateY(68px)
            rotate(-3deg);

    }

    40%{

        transform:
            translateY(72px)
            rotate(3deg);

    }

    60%{

        transform:
            translateY(69px)
            rotate(-2deg);

    }

    80%{

        transform:
            translateY(71px)
            rotate(2deg);

    }

    100%{

        transform:
            translateY(70px)
            rotate(0deg);

    }

}

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

#particles{

    position:fixed;

    inset:0;

    pointer-events:none;

    overflow:hidden;

    z-index:-2;

}


.magicParticle{

    position:absolute;

    top:-20px;

    width:6px;

    height:6px;

    border-radius:50%;

    background:#bdf5ff;

    box-shadow:

        0 0 8px #8eefff,

        0 0 20px #33cfff,

        0 0 40px rgba(80,220,255,.8);


    animation:

        particleFall linear infinite;

}


@keyframes particleFall{


    0%{

        transform:

            translateY(-20px)

            translateX(0)

            scale(.8);

        opacity:0;

    }


    10%{

        opacity:1;

    }


    50%{

        transform:

            translateY(50vh)

            translateX(30px)

            scale(1);

    }


    100%{

        transform:

            translateY(110vh)

            translateX(-40px)

            scale(.5);

        opacity:0;

    }

}

/* ==========================================
   EVENTAIL DE CARTES
========================================== */


#fanDeck{

    position:fixed;

    left:50%;
    top:50%;

    width:0;
    height:0;

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

    pointer-events:auto;

    z-index:300;

}



.fan-card{

    width:140px;
    height:220px;

    position:absolute;

    cursor:pointer;

    transform-origin:center bottom;

transition:
transform .8s cubic-bezier(.2,.8,.2,1),
filter .3s ease,
opacity .5s ease;

    will-change:transform;

}



.fan-card img{

    width:100%;
    height:100%;

    object-fit:cover;

    border-radius:18px;

    box-shadow:
    0 0 25px rgba(100,220,255,.6);

}



.fan-card:hover{

    z-index:400;

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

    margin-top:-40px;

}

.fan-card.selected{

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

}

/* ==========================================
   COUPE DU PAQUET
========================================== */

#deck.cutting{

    animation:
    deckCut 1.2s ease forwards;

}

@keyframes deckCut{

    0%{

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

    }

    25%{

        transform:
        rotate(-6deg)
        translateX(-25px);

    }

    50%{

        transform:
        rotate(6deg)
        translateX(25px);

    }

    75%{

        transform:
        rotate(-4deg)
        scale(.96);

    }

    100%{

        transform:
        rotate(0deg)
        scale(.85);

        opacity:0;

    }

}

/* ==========================================
   MESSAGE DU RITUEL
========================================== */

#ritualMessage{

    display:none;

    width:100%;

    margin-top:25px;

    font-family:"Cinzel",serif;

    font-size:24px;

    letter-spacing:2px;

    color:#9be9ff;

    text-align:center;

    text-shadow:

        0 0 15px #33cfff,

        0 0 40px rgba(80,220,255,.8);

    position:relative;

    z-index:50;

    animation:
    messageFade 1s ease;

}


@keyframes messageFade{

    from{

        opacity:0;

        transform:
        translateY(-20px);

    }


    to{

        opacity:1;

        transform:
        translateY(0);

    }

}


#askAstrael{

    display:none;

}

#astraelModal{

    display:none;

    position:fixed;

    inset:0;

    background:rgba(0,0,0,.75);

    z-index:1000;

    justify-content:center;

    align-items:center;

}


.astraelBox{

    width:600px;

    background:#111827;

    border:2px solid #9be9ff;

    border-radius:20px;

    padding:30px;

    text-align:center;

    box-shadow:
    0 0 40px #33cfff;

}


#astraelQuestion{

    width:90%;

    height:120px;

    margin:20px;

    background:#050914;

    color:white;

    border:1px solid #9be9ff;

    padding:15px;

    font-family:"Cinzel",serif;

}


#astraelReading{

    display:none;

    margin:40px auto;

    max-width:900px;

    padding:25px;

    background:
    rgba(20,10,40,0.8);

    border:1px solid rgba(180,120,255,0.5);

    border-radius:20px;

    color:white;

    text-align:center;

    box-shadow:
    0 0 30px rgba(150,80,255,0.4);

}


#astraelReading h2{

    font-family:serif;

    color:#d8b4ff;

}


#astraelText{

    line-height:1.7;

    font-size:18px;

}