/* =========================================================
   PERSONAL PORTFOLIO
   ANIMATIONS.CSS
   ---------------------------------------------------------
   سیستم انیمیشن و Micro-interactionهای سایت
   ========================================================= */


/* =========================================================
   1. ANIMATION VARIABLES
   ========================================================= */

:root {
    --animation-duration-fast: 300ms;
    --animation-duration-normal: 600ms;
    --animation-duration-slow: 900ms;

    --animation-ease:
        cubic-bezier(0.22, 1, 0.36, 1);
}


/* =========================================================
   2. PAGE LOAD
   ---------------------------------------------------------
   انیمیشن اولیه‌ی ورود صفحه
   ========================================================= */

.page-load {
    animation:
        pageLoad
        800ms
        var(--animation-ease)
        both;
}


@keyframes pageLoad {

    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}


/* =========================================================
   3. FADE IN
   ========================================================= */

.animate-fade-in {
    animation:
        fadeIn
        var(--animation-duration-normal)
        var(--animation-ease)
        both;
}


@keyframes fadeIn {

    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}


/* =========================================================
   4. FADE UP
   ---------------------------------------------------------
   ورود عنصر از پایین به بالا
   ========================================================= */

.animate-fade-up {
    animation:
        fadeUp
        var(--animation-duration-normal)
        var(--animation-ease)
        both;
}


@keyframes fadeUp {

    from {
        opacity: 0;

        transform:
            translateY(30px);
    }

    to {
        opacity: 1;

        transform:
            translateY(0);
    }
}


/* =========================================================
   5. FADE DOWN
   ========================================================= */

.animate-fade-down {
    animation:
        fadeDown
        var(--animation-duration-normal)
        var(--animation-ease)
        both;
}


@keyframes fadeDown {

    from {
        opacity: 0;

        transform:
            translateY(-25px);
    }

    to {
        opacity: 1;

        transform:
            translateY(0);
    }
}


/* =========================================================
   6. FADE LEFT
   ========================================================= */

.animate-fade-left {
    animation:
        fadeLeft
        var(--animation-duration-normal)
        var(--animation-ease)
        both;
}


@keyframes fadeLeft {

    from {
        opacity: 0;

        transform:
            translateX(-35px);
    }

    to {
        opacity: 1;

        transform:
            translateX(0);
    }
}


/* =========================================================
   7. FADE RIGHT
   ========================================================= */

.animate-fade-right {
    animation:
        fadeRight
        var(--animation-duration-normal)
        var(--animation-ease)
        both;
}


@keyframes fadeRight {

    from {
        opacity: 0;

        transform:
            translateX(35px);
    }

    to {
        opacity: 1;

        transform:
            translateX(0);
    }
}


/* =========================================================
   8. SCALE IN
   ========================================================= */

.animate-scale-in {
    animation:
        scaleIn
        var(--animation-duration-normal)
        var(--animation-ease)
        both;
}


@keyframes scaleIn {

    from {
        opacity: 0;

        transform:
            scale(0.92);
    }

    to {
        opacity: 1;

        transform:
            scale(1);
    }
}


/* =========================================================
   9. REVEAL ON SCROLL
   ---------------------------------------------------------
   این کلاس توسط JavaScript فعال می‌شود.
   ========================================================= */

.reveal {
    opacity: 0;

    transform:
        translateY(35px);

    transition:
        opacity 800ms var(--animation-ease),
        transform 800ms var(--animation-ease);
}


.reveal.is-visible {
    opacity: 1;

    transform:
        translateY(0);
}


/* =========================================================
   10. REVEAL FROM LEFT
   ========================================================= */

.reveal-left {
    opacity: 0;

    transform:
        translateX(-45px);

    transition:
        opacity 800ms var(--animation-ease),
        transform 800ms var(--animation-ease);
}


.reveal-left.is-visible {
    opacity: 1;

    transform:
        translateX(0);
}


/* =========================================================
   11. REVEAL FROM RIGHT
   ========================================================= */

.reveal-right {
    opacity: 0;

    transform:
        translateX(45px);

    transition:
        opacity 800ms var(--animation-ease),
        transform 800ms var(--animation-ease);
}


.reveal-right.is-visible {
    opacity: 1;

    transform:
        translateX(0);
}


/* =========================================================
   12. REVEAL SCALE
   ========================================================= */

.reveal-scale {
    opacity: 0;

    transform:
        scale(0.92);

    transition:
        opacity 800ms var(--animation-ease),
        transform 800ms var(--animation-ease);
}


.reveal-scale.is-visible {
    opacity: 1;

    transform:
        scale(1);
}


/* =========================================================
   13. STAGGER SYSTEM
   ---------------------------------------------------------
   عناصر یک لیست با کمی فاصله از یکدیگر ظاهر می‌شوند.
   ========================================================= */

.stagger-item {
    opacity: 0;

    transform:
        translateY(25px);

    transition:
        opacity 700ms var(--animation-ease),
        transform 700ms var(--animation-ease);
}


.stagger-item.is-visible {
    opacity: 1;

    transform:
        translateY(0);
}


.stagger-item:nth-child(1) {
    transition-delay: 50ms;
}


.stagger-item:nth-child(2) {
    transition-delay: 100ms;
}


.stagger-item:nth-child(3) {
    transition-delay: 150ms;
}


.stagger-item:nth-child(4) {
    transition-delay: 200ms;
}


.stagger-item:nth-child(5) {
    transition-delay: 250ms;
}


.stagger-item:nth-child(6) {
    transition-delay: 300ms;
}


.stagger-item:nth-child(7) {
    transition-delay: 350ms;
}


.stagger-item:nth-child(8) {
    transition-delay: 400ms;
}


/* =========================================================
   14. FLOAT
   ---------------------------------------------------------
   حرکت بسیار نرم بالا و پایین
   ========================================================= */

.animate-float {
    animation:
        float
        5s
        ease-in-out
        infinite;
}


@keyframes float {

    0%,
    100% {
        transform:
            translateY(0);
    }

    50% {
        transform:
            translateY(-8px);
    }
}


/* =========================================================
   15. PULSE
   ========================================================= */

.animate-pulse {
    animation:
        pulse
        2s
        ease-in-out
        infinite;
}


@keyframes pulse {

    0%,
    100% {
        opacity:
            1;
    }

    50% {
        opacity:
            0.55;
    }
}


/* =========================================================
   16. GLOW PULSE
   ========================================================= */

.animate-glow {
    animation:
        glowPulse
        3s
        ease-in-out
        infinite;
}


@keyframes glowPulse {

    0%,
    100% {
        box-shadow:
            0 0 0
            rgba(37, 99, 235, 0);
    }

    50% {
        box-shadow:
            0 0 30px
            rgba(37, 99, 235, 0.20);
    }
}


/* =========================================================
   17. HOVER TILT
   ---------------------------------------------------------
   برای عناصر خاص در صورت نیاز
   ========================================================= */

.hover-tilt {
    transition:
        transform
        500ms
        var(--animation-ease);
}


.hover-tilt:hover {
    transform:
        perspective(800px)
        rotateX(2deg)
        rotateY(-2deg)
        translateY(-4px);
}


/* =========================================================
   18. HOVER SCALE
   ========================================================= */

.hover-scale {
    transition:
        transform
        var(--transition-normal);
}


.hover-scale:hover {
    transform:
        scale(1.03);
}


/* =========================================================
   19. HOVER GLOW
   ========================================================= */

.hover-glow {
    transition:
        box-shadow
        var(--transition-normal);
}


.hover-glow:hover {
    box-shadow:
        0 0 35px
        var(--color-primary-soft);
}


/* =========================================================
   20. SHIMMER
   ---------------------------------------------------------
   افکت عبور نور روی عناصر خاص
   ========================================================= */

.shimmer {
    position:
        relative;

    overflow:
        hidden;
}


.shimmer::after {
    content: "";

    position:
        absolute;

    top: 0;
    left: -120%;

    width: 60%;
    height: 100%;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255, 255, 255, 0.20),
            transparent
        );

    transform:
        skewX(-20deg);

    transition:
        left 700ms ease;

    pointer-events:
        none;
}


.shimmer:hover::after {
    left:
        150%;
}


/* =========================================================
   21. TEXT REVEAL
   ---------------------------------------------------------
   برای نمایش نرم تیترها
   ========================================================= */

.text-reveal {
    overflow:
        hidden;
}


.text-reveal > span {
    display:
        inline-block;

    opacity:
        0;

    transform:
        translateY(100%);

    transition:
        opacity 700ms var(--animation-ease),
        transform 700ms var(--animation-ease);
}


.text-reveal.is-visible > span {
    opacity:
        1;

    transform:
        translateY(0);
}


/* =========================================================
   22. UNDERLINE ANIMATION
   ========================================================= */

.animated-underline {
    position:
        relative;
}


.animated-underline::after {
    content: "";

    position:
        absolute;

    left: 0;
    bottom: -4px;

    width: 100%;
    height: 2px;

    background:
        linear-gradient(
            90deg,
            var(--color-primary),
            var(--color-accent)
        );

    transform:
        scaleX(0);

    transform-origin:
        left center;

    transition:
        transform
        400ms
        var(--animation-ease);
}


.animated-underline:hover::after {
    transform:
        scaleX(1);
}


html[dir="rtl"] .animated-underline::after {
    transform-origin:
        right center;
}


/* =========================================================
   23. CURSOR GLOW
   ---------------------------------------------------------
   این کلاس بعداً می‌تواند توسط JavaScript برای ساخت
   نور بسیار ظریف دنبال‌کننده‌ی موس استفاده شود.
   ========================================================= */

.cursor-glow {
    position:
        fixed;

    width:
        300px;

    height:
        300px;

    border-radius:
        50%;

    background:
        var(--color-primary);

    filter:
        blur(100px);

    opacity:
        0.04;

    pointer-events:
        none;

    z-index:
        var(--z-background);

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


/* =========================================================
   24. HERO ENTRANCE DELAYS
   ---------------------------------------------------------
   ورود مرحله‌ای عناصر Hero
   ========================================================= */

.hero .animate-fade-up:nth-child(1) {
    animation-delay:
        100ms;
}


.hero .animate-fade-up:nth-child(2) {
    animation-delay:
        200ms;
}


.hero .animate-fade-up:nth-child(3) {
    animation-delay:
        300ms;
}


.hero .animate-fade-up:nth-child(4) {
    animation-delay:
        400ms;
}


.hero .animate-fade-up:nth-child(5) {
    animation-delay:
        500ms;
}


/* =========================================================
   25. RTL ANIMATION SUPPORT
   ========================================================= */

html[dir="rtl"] .reveal-left {
    transform:
        translateX(45px);
}


html[dir="rtl"] .reveal-left.is-visible {
    transform:
        translateX(0);
}


html[dir="rtl"] .reveal-right {
    transform:
        translateX(-45px);
}


html[dir="rtl"] .reveal-right.is-visible {
    transform:
        translateX(0);
}


/* =========================================================
   26. REDUCED MOTION
   ---------------------------------------------------------
   رعایت تنظیمات دسترسی‌پذیری کاربر
   ========================================================= */

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

    *,
    *::before,
    *::after {
        scroll-behavior:
            auto !important;
    }


    .animate-fade-in,
    .animate-fade-up,
    .animate-fade-down,
    .animate-fade-left,
    .animate-fade-right,
    .animate-scale-in,
    .animate-float,
    .animate-pulse,
    .animate-glow,
    .page-load {
        animation:
            none;
    }


    .reveal,
    .reveal-left,
    .reveal-right,
    .reveal-scale,
    .stagger-item {
        opacity:
            1;

        transform:
            none;

        transition:
            none;
    }
}