/* ==========================================================
   SammyVibes Portfolio
   animations.css
   ========================================================== */

/* ---------- Fade ---------- */

@keyframes fadeIn{
    from{
        opacity:0;
    }
    to{
        opacity:1;
    }
}

@keyframes fadeUp{
    from{
        opacity:0;
        transform:translateY(40px);
    }

    to{
        opacity:1;
        transform:translateY(0);
    }
}

@keyframes fadeDown{
    from{
        opacity:0;
        transform:translateY(-40px);
    }

    to{
        opacity:1;
        transform:translateY(0);
    }
}

@keyframes fadeLeft{
    from{
        opacity:0;
        transform:translateX(-40px);
    }

    to{
        opacity:1;
        transform:translateX(0);
    }
}

@keyframes fadeRight{
    from{
        opacity:0;
        transform:translateX(40px);
    }

    to{
        opacity:1;
        transform:translateX(0);
    }
}


/* ---------- Scale ---------- */

@keyframes zoomIn{

    from{

        opacity:0;

        transform:scale(.92);

    }

    to{

        opacity:1;

        transform:scale(1);

    }

}


/* ---------- Floating ---------- */

@keyframes floating{

    0%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-10px);

    }

    100%{

        transform:translateY(0);

    }

}


/* ---------- Glow ---------- */

@keyframes glow{

    0%{

        box-shadow:0 0 0 rgba(252,66,123,0);

    }

    50%{

        box-shadow:0 0 25px rgba(252,66,123,.45);

    }

    100%{

        box-shadow:0 0 0 rgba(252,66,123,0);

    }

}


/* ---------- Rotation ---------- */

@keyframes rotate{

    from{

        transform:rotate(0deg);

    }

    to{

        transform:rotate(360deg);

    }

}


/* ==========================================================
   Utility Classes
   ========================================================== */

.fade-in{

    animation:fadeIn .8s ease forwards;

}

.fade-up{

    animation:fadeUp .8s cubic-bezier(.22,.61,.36,1) forwards;

}

.fade-down{

    animation:fadeDown .8s cubic-bezier(.22,.61,.36,1) forwards;

}

.fade-left{

    animation:fadeLeft .8s cubic-bezier(.22,.61,.36,1) forwards;

}

.fade-right{

    animation:fadeRight .8s cubic-bezier(.22,.61,.36,1) forwards;

}

.zoom-in{

    animation:zoomIn .6s ease forwards;

}

.floating{

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

}

.glow{

    animation:glow 3s infinite;

}

.rotate{

    animation:rotate 12s linear infinite;

}


/* ==========================================================
   Hover Effects
   ========================================================== */

.hover-lift{

    transition:
        transform .35s ease,
        box-shadow .35s ease;

}

.hover-lift:hover{

    transform:translateY(-8px);

    box-shadow:0 18px 45px rgba(0,0,0,.28);

}

.hover-scale{

    transition:transform .35s ease;

}

.hover-scale:hover{

    transform:scale(1.04);

}

.hover-rotate{

    transition:transform .4s ease;

}

.hover-rotate:hover{

    transform:rotate(-2deg) scale(1.02);

}

.hover-bright{

    transition:filter .3s ease;

}

.hover-bright:hover{

    filter:brightness(1.08);

}


/* ==========================================================
   Reveal on Scroll
   ========================================================== */

.reveal{

    opacity:0;

    transform:translateY(40px);

    transition:
        opacity .8s ease,
        transform .8s ease;

}

.reveal.active{

    opacity:1;

    transform:none;

}


/* ==========================================================
   Reduced Motion
   ========================================================== */

@media (prefers-reduced-motion: reduce){

    *{

        animation:none !important;

        transition:none !important;

        scroll-behavior:auto !important;

    }

}