/* ==========================
   DELFE LANDING PREMIUM
   STYLE FANTASY FIX
========================== */


*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family:"Segoe UI",sans-serif;
}


html,
body{

    width:100%;
    height:100%;

}



body{

    overflow:hidden;

    color:white;

    display:flex;

    justify-content:center;

    align-items:center;

    background:#080014;

    position:relative;

}



/* ==========================
   FOND
========================== */


.background{

    position:fixed;

    inset:0;

    background:

    linear-gradient(
        rgba(0,0,0,.35),
        rgba(0,0,0,.75)
    ),

    url("assets/background.jpg");

    background-size:cover;

    background-position:center;

    z-index:0;

    pointer-events:none;

}



.fog{

    position:fixed;

    inset:-50%;

    background:

    radial-gradient(
        circle,
        rgba(255,255,255,.15),
        transparent 60%
    );

    animation:fog 20s infinite linear;

    z-index:1;

    pointer-events:none;

}



@keyframes fog{

from{
    transform:rotate(0deg) scale(1);
}

to{
    transform:rotate(360deg) scale(1.2);
}

}



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


header{

position:absolute;

top:40px;

width:100%;

text-align:center;

z-index:10;

}



header h1{

font-size:45px;


background:

linear-gradient(
90deg,
#fff,
#ffd166,
#90e0ef
);


-webkit-background-clip:text;

color:transparent;


text-shadow:
0 0 30px white;

}



header p{

margin-top:10px;

font-size:22px;

}



/* ==========================
   PORTAIL
========================== */


.portal{

display:flex;

align-items:center;

justify-content:center;

gap:100px;

position:relative;

z-index:20;

}



/* ==========================
   PORTES
========================== */


.door-frame{

position:relative;

width:280px;

height:520px;

perspective:1200px;

}



.door{

height:100%;

width:100%;

border-radius:

150px 150px 20px 20px;


overflow:hidden;


box-shadow:

0 0 40px black;


transition:.8s;


transform-style:preserve-3d;

cursor:pointer;

position:relative;

z-index:5;

}



.door img{

width:100%;

height:100%;

object-fit:cover;

}



/* ouverture */


.left-door.opened{

transform:rotateY(-75deg) scale(1.05);

box-shadow:

0 0 80px gold;

}


.right-door.opened{

transform:rotateY(75deg) scale(1.05);

box-shadow:

0 0 80px cyan;

}





/* ==========================
   CONTENU
========================== */


.inside{

position:absolute;

top:50%;

left:50%;


transform:

translate(-50%,-50%);


text-align:center;


opacity:0;


transition:.7s;


background:

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


padding:25px;


border-radius:25px;


width:240px;


z-index:10;


}



.door-frame:hover .inside{

opacity:1;

}



.inside h2{

font-size:28px;

margin-bottom:15px;

}



.inside a{


display:inline-block;

margin-top:20px;

padding:12px 25px;


border-radius:30px;


text-decoration:none;


color:white;


background:

linear-gradient(
90deg,
#ff9de2,
#9d4edd
);


box-shadow:

0 0 20px #ff8cff;


position:relative;

z-index:50;

cursor:pointer;

}



/* ==========================
   FEE
========================== */


.fairy{

position:relative;

width:180px;

animation:

floating 4s infinite alternate;

z-index:30;

}



.fairy img{

width:150px;

}



@keyframes floating{


from{

transform:translateY(-30px);

}


to{

transform:translateY(30px);

}


}




.sparkle{

position:absolute;


top:50%;

left:50%;


width:250px;

height:250px;


transform:

translate(-50%,-50%);


border-radius:50%;


background:

radial-gradient(
circle,
rgba(255,255,255,.4),
transparent 70%
);


animation:pulse 2s infinite;


z-index:-1;

}



@keyframes pulse{


50%{

transform:

translate(-50%,-50%)
scale(1.3);

}

}



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


.spark{

position:absolute;


width:8px;

height:8px;


background:white;


border-radius:50%;


box-shadow:

0 0 20px white;


animation:

rise 6s infinite;


z-index:3;

pointer-events:none;

}



@keyframes rise{


from{

transform:

translateY(100vh);

opacity:0;

}


50%{

opacity:1;

}


to{

transform:

translateY(-100vh);

opacity:0;

}

}




/* ==========================
   FOOTER
========================== */


footer{

position:absolute;


bottom:25px;


width:100%;


text-align:center;


opacity:.8;


z-index:10;

}



/* ==========================
   ETAT OUVERT
========================== */


.opened.left-door{

transform:

rotateY(-75deg)
scale(1.05);

}


.opened.right-door{

transform:

rotateY(75deg)
scale(1.05);

}


.opened{

filter:

brightness(1.5);

}




/* bouton */


.portal-btn{

position:relative;

z-index:999;

display:inline-block;

cursor:pointer;

pointer-events:auto;

}




/* bloque les fonds */


.fog,
.background,
#particles{

pointer-events:none;

}



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


@media(max-width:900px){


body{

overflow:auto;

}



.portal{


flex-direction:column;

gap:40px;

margin-top:130px;

}



.door-frame{


width:220px;

height:400px;

}



.fairy{

order:-1;

}



header h1{

font-size:30px;

}


}

.fairy{

animation:
floating 4s ease-in-out infinite alternate,
glow 3s infinite;

}


@keyframes glow{

50%{

filter:
drop-shadow(0 0 50px #fff);

}

}

.door-frame:first-child::before{

content:"";

position:absolute;

width:350px;
height:350px;

top:50%;
left:50%;

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

background:
radial-gradient(
circle,
rgba(120,255,120,.35),
transparent 70%
);

filter:blur(30px);

z-index:-1;

}



.door-frame:last-child::before{

content:"";

position:absolute;

width:350px;
height:350px;

top:50%;
left:50%;

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

background:
radial-gradient(
circle,
rgba(0,220,255,.35),
transparent 70%
);

filter:blur(30px);

z-index:-1;

}