/* ==========================================
   Ashraf Interiors - Premium Animations
   ========================================== */

.fade-up{
    opacity:0;
    transform:translateY(40px);
    transition:all .8s ease;
}
.fade-up.show{
    opacity:1;
    transform:translateY(0);
}

.fade-left{
    opacity:0;
    transform:translateX(-60px);
    transition:all .8s ease;
}
.fade-left.show{
    opacity:1;
    transform:translateX(0);
}

.fade-right{
    opacity:0;
    transform:translateX(60px);
    transition:all .8s ease;
}
.fade-right.show{
    opacity:1;
    transform:translateX(0);
}

.zoom-in{
    opacity:0;
    transform:scale(.9);
    transition:all .8s ease;
}
.zoom-in.show{
    opacity:1;
    transform:scale(1);
}

.float{
    animation:floating 5s ease-in-out infinite;
}

@keyframes floating{
    0%,100%{transform:translateY(0);}
    50%{transform:translateY(-12px);}
}

.card-hover{
    transition:transform .4s ease, box-shadow .4s ease;
}
.card-hover:hover{
    transform:translateY(-12px);
    box-shadow:0 25px 60px rgba(0,0,0,.15);
}

.image-hover{
    overflow:hidden;
    border-radius:18px;
}
.image-hover img{
    transition:transform .8s ease;
}
.image-hover:hover img{
    transform:scale(1.08);
}

.btn{
    position:relative;
    overflow:hidden;
}
.btn::before{
    content:"";
    position:absolute;
    top:0;
    left:-120%;
    width:60%;
    height:100%;
    background:linear-gradient(
        90deg,
        transparent,
        rgba(255,255,255,.45),
        transparent
    );
    transform:skewX(-25deg);
}
.btn:hover::before{
    animation:shine .8s ease;
}

@keyframes shine{
    to{
        left:160%;
    }
}

.gold-glow:hover{
    box-shadow:0 0 35px rgba(184,135,70,.45);
}

.rotate-hover{
    transition:transform .4s ease;
}
.rotate-hover:hover{
    transform:rotate(2deg) scale(1.02);
}

.parallax{
    will-change:transform;
}

.reveal-mask{
    overflow:hidden;
}
.reveal-mask>*{
    animation:revealUp 1s ease both;
}

@keyframes revealUp{
    from{
        opacity:0;
        transform:translateY(100%);
    }
    to{
        opacity:1;
        transform:translateY(0);
    }
}

.social-icon{
    transition:all .35s ease;
}
.social-icon:hover{
    color:var(--gold);
    transform:translateY(-6px);
}
