.cube-hint{

position:absolute;

left:7%;
bottom:-40%;

transform:translateX(-50%);

display:flex;
align-items:center;
gap:14px;

padding:14px 22px;

border-radius:50px;

background:rgba(15,15,15,.72);

backdrop-filter:blur(14px);

border:1px solid rgba(232,198,106,.18);

color:#DDD;

font-size:15px;

font-weight:500;

letter-spacing:.3px;

box-shadow:

0 0 25px rgba(232,198,106,.08);

z-index:100;

pointer-events:none;

opacity:1;

transition:

opacity .5s ease,

transform .5s ease;

animation:hintFloat 3s ease-in-out infinite;

}

.cube-hint.hide{

opacity:0;

transform:translateX(-50%) translateY(20px);

}

.cube-hint svg{

width:22px;

height:22px;

stroke:#E8C66A;

}

@keyframes hintFloat{

0%,100%{

transform:translateX(-50%) translateY(0);

}

50%{

transform:translateX(-50%) translateY(-6px);

}

}
    
.site-header{
display:none;
}

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

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

html,
body{

width:100%;
min-height:100vh;

overflow-x:hidden;
overflow-y:auto;

background:
radial-gradient(
circle at center,
#161616 0%,
#090909 60%,
#040404 100%
);

font-family:Inter,sans-serif;

overscroll-behavior-y:auto;

}

/*==============================
SCENE
==============================*/

.scene{

position:relative;

width:100vw;
height:101vh;

display:flex;

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

perspective:2200px;

overflow:hidden;

}

/*==============================
HALO SOUS LE CUBE
==============================*/

.shadow-glow{

position:absolute;

width:520px;
height:130px;

border-radius:50%;

background:

radial-gradient(

ellipse,

rgba(232,198,106,.08),

rgba(0,0,0,.45) 45%,

transparent 75%

);

filter:blur(45px);

transform:translateY(175px);

pointer-events:none;

z-index:0;

}

/*==============================
CUBE
==============================*/

#cube{

position:relative;

width:250px;
height:250px;

transform:
translateY(-40px)
rotateX(-20deg)
rotateY(25deg);

transform-style:preserve-3d;

cursor:grab;

user-select:none;
-webkit-user-select:none;

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

}

@keyframes floating{

0%{

transform:

rotateX(-20deg)

rotateY(25deg)

translateY(0);

}

50%{

transform:

rotateX(-20deg)

rotateY(25deg)

translateY(-15px);

}

100%{

transform:

rotateX(-20deg)

rotateY(25deg)

translateY(0);

}

} 

#cube:active{

cursor:grabbing;

}

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

.face{

--mouse-x:50%;
--mouse-y:50%;

position:absolute;
-webkit-user-drag:none;

user-drag:none;
width:250px;
height:250px;
pointer-events:auto;
display:flex;
justify-content:center;
align-items:center;

cursor:pointer;

overflow:hidden;

border-radius:30px;

background:

radial-gradient(
circle at var(--mouse-x) var(--mouse-y),
rgba(232,198,106,.14),
transparent 35%
),

linear-gradient(
160deg,
#2B2B2B 0%,
#1A1A1A 18%,
#0B0B0B 55%,
#252525 100%
);

border:

1px solid rgba(232,198,106,.65);

outline:

1px solid rgba(255,235,170,.10);

outline-offset:-3px;

background-clip:padding-box;

backdrop-filter:blur(20px);

box-shadow:

inset 0 1px 1px rgba(255,255,255,.08),

inset 0 -18px 28px rgba(0,0,0,.45);

transition:

transform .35s,

box-shadow .35s,

border-color .35s,

background .35s;

text-decoration: none!important;

}

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

.content{

width:100%;
height:100%;

display:flex;

flex-direction:column;

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

gap:18px;
pointer-events:none;
position:relative;

z-index:2;

}

/*==============================
REFLET
==============================*/

.face::before{

content:"";

position:absolute;
pointer-events:none;
top:-30%;
left:-100%;

width:60%;
height:200%;

background:

linear-gradient(

90deg,

transparent,

rgba(255,255,255,.02),

rgba(232,198,106,.22),

rgba(255,255,255,.02),

transparent

);

transform:rotate(22deg);

transition:left .8s ease;

opacity:.6;

}

.face:hover::before{

left:150%;

}

/*==============================
DOUBLE CONTOUR
==============================*/

.face::after{

content:"";

position:absolute;

inset:8px;
pointer-events:none;
border-radius:22px;

border:

1px solid rgba(232,198,106,.35);

box-shadow:

0 0 8px rgba(232,198,106,.10),

inset 0 0 8px rgba(232,198,106,.08);

pointer-events:none;

}

.face .content::before{

content:"";

position:absolute;

inset:18px;

border-radius:16px;

border:

1px solid rgba(255,240,190,.08);

pointer-events:none;

}

/*==============================
HOVER
==============================*/

.face:hover{

border-color:#FFD978;

outline-color:

rgba(255,240,170,.25);

box-shadow:

0 0 10px rgba(232,198,106,.25),

0 0 30px rgba(232,198,106,.12),

inset 0 1px 2px rgba(255,255,255,.08),

inset 0 -20px 30px rgba(0,0,0,.45);

}

/*==============================
ICONES
==============================*/

.cube-icon{

width:58px;
height:58px;

stroke:#E8C66A;

stroke-width:1.8;

fill:none;

transition:.35s;

filter:

drop-shadow(0 0 6px rgba(232,198,106,.30));

}

.face:hover .cube-icon{

stroke:#FFF5D0;

transform:

translateY(-6px)

scale(1.15)

rotate(-4deg);

filter:

drop-shadow(0 0 18px rgba(232,198,106,.75));

}

/*==============================
TEXTE
==============================*/

.face span{

font-size:18px;

font-weight:700;

letter-spacing:2px;

color:#E8C66A;

transition:.35s;

text-align:center;

text-shadow:

0 0 8px rgba(232,198,106,.18);

}

.face:hover span{

color:white;

letter-spacing:3px;

}

/*==============================
POSITION DES FACES
==============================*/

.front{

transform:translateZ(125px);

}

.back{

transform:

rotateY(180deg)

translateZ(125px);

}

.right{

transform:

rotateY(90deg)

translateZ(125px);

}

.left{

transform:

rotateY(-90deg)

translateZ(125px);

}

.top{

transform:

rotateX(90deg)

translateZ(125px);

}

.bottom{

transform:

rotateX(-90deg)

translateZ(125px);

}


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

@media(max-width:768px){

#cube{

width:130px;
height:130px;

}

.face{

width:130px;
height:130px;

border-radius:18px;

}

.content{

gap:10px;

}

.cube-icon{

width:34px;
height:34px;

}

.face span{

font-size:12px;

}

.front{transform:translateZ(65px);}
.back{transform:rotateY(180deg) translateZ(65px);}
.right{transform:rotateY(90deg) translateZ(65px);}
.left{transform:rotateY(-90deg) translateZ(65px);}
.top{transform:rotateX(90deg) translateZ(65px);}
.bottom{transform:rotateX(-90deg) translateZ(65px);}

}

@media (max-width:768px){

    .cube-hint{

        width:90%;

        left:22%;

        bottom:-35%;
        
        color: white;

        transform:translateX(-50%);

        font-size:13px;

        text-align:center;

        line-height:1.4;

        padding:0;

        background:none;

        border:none;

        box-shadow:none;

        backdrop-filter:none;

    }

    .cube-hint svg{

        display:none;

    }

}