@font-face {
    font-family: 'Samarkan';
    src: url('/SamarkanNormalFont.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

.kala-font {
    font-family: 'Samarkan', sans-serif;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.animate-fadeIn {
    animation: fadeIn 0.3s ease-out;
}

/* Minimal and clean scrollbar styling */
* {
    scrollbar-width: thin;
    scrollbar-color: rgba(156, 163, 175, 0.5) transparent;
}

/* Webkit browsers (Chrome, Safari, Edge) */
*::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

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

*::-webkit-scrollbar-thumb {
    background-color: rgba(156, 163, 175, 0.5);
    border-radius: 3px;
    transition: background-color 0.2s ease;
}

*::-webkit-scrollbar-thumb:hover {
    background-color: rgba(156, 163, 175, 0.7);
}

/* Theme transition class - smooth transitions for theme switching */
html.theme-transition *,
html.theme-transition *::before,
html.theme-transition *::after {
    transition-property: background-color, border-color, color, fill, stroke, opacity, box-shadow;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 300ms;
}

/* Exclude elements that shouldn't transition */
html.theme-transition img,
html.theme-transition svg,
html.theme-transition video,
html.theme-transition canvas,
html.theme-transition iframe {
    transition: none;
}

/* Faster transitions for interactive elements */
html.theme-transition button,
html.theme-transition a,
html.theme-transition input,
html.theme-transition textarea,
html.theme-transition select {
    transition-duration: 200ms;
}