/* Explain: Base reset, typography defaults, and custom scroll/animation effects. - */
* {
    box-sizing: border-box;
}

html {
    background: var(--background-color);
}

body {
    overflow-x: hidden;
}

/* Blur to Focus Effect - Softened for light theme */
.focus-on-scroll {
    filter: blur(8px);
    opacity: 0;
    transform: translateY(20px);
    transition: filter 1.2s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 1.2s ease-out, transform 1.2s ease-out;
}
.focus-on-scroll.in-focus {
    filter: blur(0);
    opacity: 1;
    transform: translateY(0);
}

/* Horizontal Scrollbar Hiding */
.hide-scrollbar::-webkit-scrollbar {
    display: none;
}
.hide-scrollbar {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

/* Custom Scrollbar for Galleries */
.custom-scrollbar::-webkit-scrollbar {
    width: 8px;
}
.custom-scrollbar::-webkit-scrollbar-track {
    background: #111111;
}
.custom-scrollbar::-webkit-scrollbar-thumb {
    background: #555555;
    border-radius: 4px;
}
.custom-scrollbar::-webkit-scrollbar-thumb:hover {
    background: #777777;
}
.custom-scrollbar {
    scrollbar-width: thin;
    scrollbar-color: #555555 #111111;
}