/* ==========================================
   3D LOGO CUBE — replaces the flat fa-cube icon
   with a real 3D cube that "solves" on hover
========================================== */

.cube-3d-wrap{
    width:58px;
    height:58px;
    display:flex;
    align-items:center;
    justify-content:center;
    perspective:300px;
    flex-shrink:0;
    cursor:pointer;
}

.cube-3d{
    position:relative;
    width:26px;
    height:26px;
    transform-style:preserve-3d;
    transform:rotateX(-20deg) rotateY(35deg);
    transition:transform .15s ease;
}

.cube-face{
    position:absolute;
    width:26px;
    height:26px;
    background:rgba(255,255,255,.92);
    border:1.5px solid rgba(120,20,20,.5);
    box-shadow:inset 0 0 6px rgba(0,0,0,.15);
}

.cube-face.face-front{  transform:translateZ(13px); }
.cube-face.face-back{   transform:translateZ(-13px) rotateY(180deg); }
.cube-face.face-right{  transform:rotateY(90deg) translateZ(13px); }
.cube-face.face-left{   transform:rotateY(-90deg) translateZ(13px); }
.cube-face.face-top{    transform:rotateX(90deg) translateZ(13px); }
.cube-face.face-bottom{ transform:rotateX(-90deg) translateZ(13px); background:var(--primary-dark); }

/* Give each face a subtle red-tinted "sticker" grid look */
.cube-face::before{
    content:'';
    position:absolute;
    inset:2px;
    background:
        linear-gradient(rgba(120,20,20,.35) 1px, transparent 1px) 0 0 / 100% 33.33%,
        linear-gradient(90deg, rgba(120,20,20,.35) 1px, transparent 1px) 0 0 / 33.33% 100%;
}

.cube-face.face-front::before{ background-color:var(--primary); }
.cube-face.face-back::before{ background-color:var(--primary-dark); }
.cube-face.face-right::before{ background-color:#fff; }
.cube-face.face-left::before{ background-color:#ffb3b3; }
.cube-face.face-top::before{ background-color:#fff8f8; }

/* ==========================================
   SOLVING ANIMATION — scrambles then settles
   back to resting orientation, ~2s total
========================================== */

@keyframes cubeSolve{
    0%   { transform:rotateX(-20deg)  rotateY(35deg); }
    12%  { transform:rotateX(140deg) rotateY(210deg); }
    24%  { transform:rotateX(-260deg) rotateY(90deg); }
    36%  { transform:rotateX(190deg) rotateY(-140deg); }
    48%  { transform:rotateX(-90deg) rotateY(320deg); }
    60%  { transform:rotateX(240deg) rotateY(60deg); }
    72%  { transform:rotateX(-40deg) rotateY(400deg); }
    84%  { transform:rotateX(20deg)  rotateY(70deg); }
    100% { transform:rotateX(-20deg) rotateY(35deg); }
}

.cube-3d.solving{
    animation:cubeSolve 2s cubic-bezier(.36,.07,.19,.97) 1;
}

@media (prefers-reduced-motion: reduce){
    .cube-3d.solving{ animation:none; }
}