/* ======================================================
   FPlayT Tools
   Animations
====================================================== */

/* Fade In */

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

/* Fade Up */

@keyframes fadeUp {

    from {

        opacity: 0;

        transform: translateY(20px);

    }

    to {

        opacity: 1;

        transform: translateY(0);

    }

}

/* Fade Down */

@keyframes fadeDown {

    from {

        opacity: 0;

        transform: translateY(-20px);

    }

    to {

        opacity: 1;

        transform: translateY(0);

    }

}

/* Zoom */

@keyframes zoomIn {

    from {

        opacity: 0;

        transform: scale(.92);

    }

    to {

        opacity: 1;

        transform: scale(1);

    }

}

/* Slide Left */

@keyframes slideLeft {

    from {

        opacity: 0;

        transform: translateX(-35px);

    }

    to {

        opacity: 1;

        transform: translateX(0);

    }

}

/* Slide Right */

@keyframes slideRight {

    from {

        opacity: 0;

        transform: translateX(35px);

    }

    to {

        opacity: 1;

        transform: translateX(0);

    }

}

/* Toast */

@keyframes toastIn {

    from {

        opacity: 0;

        transform: translateX(100%);

    }

    to {

        opacity: 1;

        transform: translateX(0);

    }

}

@keyframes toastOut {

    from {

        opacity: 1;

        transform: translateX(0);

    }

    to {

        opacity: 0;

        transform: translateX(100%);

    }

}

/* Pulse */

@keyframes pulse {

    0% {

        transform: scale(1);

    }

    50% {

        transform: scale(1.06);

    }

    100% {

        transform: scale(1);

    }

}

/* Floating */

@keyframes floating {

    0% {

        transform: translateY(0);

    }

    50% {

        transform: translateY(-6px);

    }

    100% {

        transform: translateY(0);

    }

}

/* Rotate */

@keyframes rotate {

    from {

        transform: rotate(0deg);

    }

    to {

        transform: rotate(360deg);

    }

}

/* Glow */

@keyframes glow {

    0% {

        box-shadow:
            0 0 0 rgba(var(--accent-rgb),0);

    }

    50% {

        box-shadow:
            0 0 25px rgba(var(--accent-rgb),.35);

    }

    100% {

        box-shadow:
            0 0 0 rgba(var(--accent-rgb),0);

    }

}

/* ======================================================
   Animation Classes
====================================================== */

.fade-in {

    animation:
        fadeIn .35s ease;

}

.fade-up {

    animation:
        fadeUp .4s ease;

}

.fade-down {

    animation:
        fadeDown .4s ease;

}

.zoom-in {

    animation:
        zoomIn .3s ease;

}

.slide-left {

    animation:
        slideLeft .4s ease;

}

.slide-right {

    animation:
        slideRight .4s ease;

}

.pulse {

    animation:
        pulse 1.6s infinite;

}

.floating {

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

}

.glow {

    animation:
        glow 2.5s infinite;

}

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

.hover-lift {

    transition:
        transform .2s,
        box-shadow .2s;

}

.hover-lift:hover {

    transform:
        translateY(-5px);

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

}

.hover-scale {

    transition:
        transform .2s;

}

.hover-scale:hover {

    transform:
        scale(1.04);

}

.hover-rotate {

    transition:
        transform .2s;

}

.hover-rotate:hover {

    transform:
        rotate(-2deg);

}

/* ======================================================
   Ripple Effect
====================================================== */

.ripple {

    position: relative;

    overflow: hidden;

}

.ripple::after {

    content: "";

    position: absolute;

    inset: 0;

    background:
        radial-gradient(circle,
        rgba(255,255,255,.25) 10%,
        transparent 11%);

    transform: scale(0);

    opacity: 0;

}

.ripple:active::after {

    animation:
        ripple .45s ease;

}

@keyframes ripple {

    from {

        transform: scale(0);

        opacity: .8;

    }

    to {

        transform: scale(8);

        opacity: 0;

    }

}

/* ======================================================
   Scrollbar
====================================================== */

::-webkit-scrollbar {

    width: 9px;

    height: 9px;

}

::-webkit-scrollbar-track {

    background:
        var(--scroll-track);

}

::-webkit-scrollbar-thumb {

    background:
        var(--scroll-thumb);

    border-radius: 20px;

}

::-webkit-scrollbar-thumb:hover {

    background:
        var(--scroll-hover);

}

/* Firefox */

*{

    scrollbar-width: thin;

    scrollbar-color:
        var(--scroll-thumb)
        var(--scroll-track);

}
/* Toast-urile erau anterior introduse accidental într-un fișier JavaScript. */
.toast-container { width: min(390px, calc(100vw - 32px)); display: flex; flex-direction: column; gap: 11px; pointer-events: none; }
.toast { display: grid; grid-template-columns: 38px minmax(0, 1fr) 28px; align-items: center; gap: 11px; padding: 13px; border: 1px solid rgba(255,255,255,.08); border-left: 4px solid var(--blue); border-radius: 13px; background: rgba(18,26,35,.98); box-shadow: 0 20px 50px rgba(0,0,0,.32); opacity: 0; pointer-events: auto; transform: translateX(110%); transition: opacity .28s ease, transform .28s ease; }
.toast-visible { opacity: 1; transform: translateX(0); }
.toast-removing { opacity: 0; transform: translateX(110%); }
.toast-success { border-left-color: var(--green); } .toast-error { border-left-color: var(--red); } .toast-warning { border-left-color: var(--orange); }
.toast-icon { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 11px; background: rgba(33,150,243,.1); color: var(--blue); font-weight: 900; }
.toast-content { min-width: 0; display: grid; gap: 4px; } .toast-title { color: var(--text); font-size: 12px; } .toast-message { color: #8f9dac; font-size: 11px; }
.toast-close { border: 0; background: transparent; color: #728196; font-size: 18px; }