:root {
    --animate-scroll: scroll 35s linear infinite;
    --animate-float: float 12s ease-in-out infinite;
    --animate-float-slow: float 18s ease-in-out infinite;
    --animate-float-soft: float-soft 2.5s ease-in-out infinite;
}

@keyframes scroll {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

@keyframes float {
    0% { transform: translateY(0px); }
    50% { transform: translateY(-18px); }
    100% { transform: translateY(0px); }
}

@keyframes float-slow {
    0% { transform: translateY(0px); }
    50% { transform: translateY(-35px); }
    100% { transform: translateY(0px); }
}

@keyframes float-soft {
    0% { transform: translateY(0px) scale(1); }
    50% { transform: translateY(-6px) scale(1.02); }
    100% { transform: translateY(0px) scale(1); }
}

.animate-scroll {
    animation: scroll 35s linear infinite;
}

.animate-scroll:hover {
    animation-play-state: paused;
}

.animate-float {
    animation: float 10s ease-in-out infinite;
    will-change: transform;
}

.animate-float-slow {
    animation: float-slow 16s ease-in-out infinite;
    will-change: transform;
}

.animate-float-soft {
    animation: float-soft 2.5s ease-in-out infinite;
    will-change: transform;
}

@media (max-width: 768px) {
    .animate-float,
    .animate-float-slow,
    .animate-float-soft {
        display: none !important;
    }
}

#scrollTopBtn {
    cursor: pointer;
    animation: float-soft 2.5s ease-in-out infinite;
}

#scrollTopBtn svg,
a svg {
    display: block;
}

#scroll-progress {
    position: fixed;
    top: 0;
    left: 0;
    width: 0;
    height: 3px;
    background: linear-gradient(90deg, #6366f1, #8b5cf6);
    z-index: 9999;
    transition: width 0.1s ease-out;
}

html {
    scrollbar-width: none;
}

html::-webkit-scrollbar {
    display: none;
}

::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #6366f1, #8b5cf6);
    border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, #4f46e5, #7c3aed);
}

html.theme-ready {
    visibility: visible;
}

html {
    visibility: hidden;
}