/* Custom scrollbar and utilities */
::-webkit-scrollbar {
    width: 8px;
}
::-webkit-scrollbar-track {
    background: transparent;
}
::-webkit-scrollbar-thumb {
    background: #ccc;
    border-radius: 4px;
}
.dark ::-webkit-scrollbar-thumb {
    background: #444;
}

/* Animations */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.animate-fade-in-up {
    animation: fadeInUp 1s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* плавающий лейбл формы контактов: Tailwind знает только peer-focus и
   peer-placeholder-shown, а состояние "заполнено, но не в фокусе" не описано
   ни одним из них — лейбл падал обратно на текст после blur. :not(:placeholder-shown)
   это состояние ловит */
#contact-form input:not(:placeholder-shown) + label,
#contact-form textarea:not(:placeholder-shown) + label {
    top: -0.875rem;
    font-size: 0.875rem;
}

/* Hide inputs autocomplete background */
input:-webkit-autofill,
input:-webkit-autofill:hover, 
input:-webkit-autofill:focus, 
input:-webkit-autofill:active{
    -webkit-box-shadow: 0 0 0 30px transparent inset !important;
    transition: background-color 5000s ease-in-out 0s;
}

/* Mobile link active states */
.mobile-link {
    position: relative;
    display: inline-block;
}
.mobile-link::after {
    content: '';
    position: absolute;
    bottom: -4px;
    left: 0;
    width: 0;
    height: 2px;
    background-color: currentColor;
    transition: width 0.3s ease;
}
.mobile-link:hover::after {
    width: 100%;
}