/* ==========================================================
   iPC Account Desktop UI
   File: resources/assets/css/animations.css
   ========================================================== */

/* ==========================================================
   GLOBAL TRANSITIONS
   ========================================================== */

:root{
    --transition-fast: 0.15s ease;
    --transition: 0.25s ease;
    --transition-slow: 0.4s ease;
}

/* ==========================================================
   TRANSITION HELPERS
   ========================================================== */

.transition{
    transition: all var(--transition);
}

.transition-fast{
    transition: all var(--transition-fast);
}

.transition-slow{
    transition: all var(--transition-slow);
}

/* ==========================================================
   FADE ANIMATIONS
   ========================================================== */

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

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

.fade-in{
    animation:fadeIn .35s ease forwards;
}

.fade-out{
    animation:fadeOut .35s ease forwards;
}

/* ==========================================================
   SLIDE ANIMATIONS
   ========================================================== */

@keyframes slideUp{

    from{
        opacity:0;
        transform:translateY(24px);
    }

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

}

@keyframes slideDown{

    from{
        opacity:0;
        transform:translateY(-24px);
    }

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

}

@keyframes slideLeft{

    from{
        opacity:0;
        transform:translateX(24px);
    }

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

}

@keyframes slideRight{

    from{
        opacity:0;
        transform:translateX(-24px);
    }

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

}

.slide-up{
    animation:slideUp .35s ease forwards;
}

.slide-down{
    animation:slideDown .35s ease forwards;
}

.slide-left{
    animation:slideLeft .35s ease forwards;
}

.slide-right{
    animation:slideRight .35s ease forwards;
}

/* ==========================================================
   SCALE
   ========================================================== */

@keyframes scaleIn{

    from{
        opacity:0;
        transform:scale(.96);
    }

    to{
        opacity:1;
        transform:scale(1);
    }

}

.scale-in{
    animation:scaleIn .28s ease forwards;
}

/* ==========================================================
   PAGE LOAD
   ========================================================== */

@keyframes pageEnter{

    from{
        opacity:0;
        transform:translateY(10px);
    }

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

}

.page-enter{
    animation:pageEnter .4s ease;
}

/* ==========================================================
   GLOW PULSE
   ========================================================== */

@keyframes glowPulse{

    0%{
        box-shadow:0 0 0 rgba(96,165,250,0);
    }

    50%{
        box-shadow:0 0 16px rgba(96,165,250,.25);
    }

    100%{
        box-shadow:0 0 0 rgba(96,165,250,0);
    }

}

.glow-pulse{
    animation:glowPulse 2s infinite;
}

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

.hover-lift{

    transition:
        transform var(--transition),
        box-shadow var(--transition);

}

.hover-lift:hover{

    transform:translateY(-2px);

    box-shadow:0 8px 24px rgba(0,0,0,.28);

}

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

.hover-glow{

    transition:
        border-color var(--transition),
        box-shadow var(--transition);

}

.hover-glow:hover{

    border-color:var(--primary);

    box-shadow:0 0 16px rgba(96,165,250,.18);

}

/* ==========================================================
   BUTTON PRESS
   ========================================================== */

.button-press:active{

    transform:scale(.98);

}

/* ==========================================================
   SPINNER
   ========================================================== */

@keyframes spin{

    from{
        transform:rotate(0deg);
    }

    to{
        transform:rotate(360deg);
    }

}

.spin{

    animation:spin 1s linear infinite;

}

/* ==========================================================
   FLOAT
   ========================================================== */

@keyframes floating{

    0%{
        transform:translateY(0);
    }

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

    100%{
        transform:translateY(0);
    }

}

.float{

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

}

/* ==========================================================
   BLINK
   ========================================================== */

@keyframes blink{

    50%{
        opacity:.45;
    }

}

.blink{

    animation:blink 1.4s infinite;

}

/* ==========================================================
   DELAY HELPERS
   ========================================================== */

.delay-1{
    animation-delay:.1s;
}

.delay-2{
    animation-delay:.2s;
}

.delay-3{
    animation-delay:.3s;
}

.delay-4{
    animation-delay:.4s;
}

/* ==========================================================
   DURATION HELPERS
   ========================================================== */

.duration-fast{
    animation-duration:.2s;
}

.duration-normal{
    animation-duration:.35s;
}

.duration-slow{
    animation-duration:.6s;
}