@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,200..800&family=Manrope:wght@200..800&display=swap');

* {
    scroll-behavior: smooth;
}

body {
    font-family: 'Manrope', sans-serif;
    color: #313131;
}

/* h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: 'Bricolage Grotesque', sans-serif;
} */

.navlink {
    position: relative;
}

.navlink::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -4px;
    width: 0;
    height: 2px;
    background: #b5483a;
    transition: width .25s ease;
}

.navlink:hover::after,
.navlink:focus-visible::after,
.navlink.active::after {
    width: 100%;
}

#navbar {
    transition: box-shadow .3s ease, background-color .3s ease;
}

#navbar.scrolled {
    box-shadow: 0 4px 24px -8px rgba(49, 49, 49, 0.12);
}

/* mobile drawer */
#mobileMenu {
    transition: transform .35s cubic-bezier(.4, 0, .2, 1);
    transform: translateX(100%);
}

#mobileMenu.open {
    transform: translateX(0);
}

#overlay {
    transition: opacity .3s ease;
}



/* Admin */
.card-lift {
    transition: transform .22s ease, box-shadow .22s ease;
}

.card-lift:hover {
    transform: translateY(-3px);
    box-shadow: 0 14px 28px -10px rgba(49, 49, 49, .14);
}

.tab-panel {
    display: none;
}

.tab-panel.active {
    display: block;
}

.navlink-admin.active {
    background: #FCE9EF;
    color: #b5483a;
}

.navlink-admin.active svg {
    color: #b5483a;
}

.work-card[data-hidden="true"] {
    display: none;
}

.chip.active {
    background: #313131;
    color: #fff;
    border-color: #313131;
}

#sidebar {
    transition: transform .25s ease;
}

@media (max-width: 1023px) {
    #sidebar {
        transform: translateX(-100%);
    }

    #sidebar.open {
        transform: translateX(0);
    }
}

@keyframes rhythmPulse {

    0%,
    100% {
        transform: scaleY(.45);
    }

    50% {
        transform: scaleY(1);
    }
}

.rhythm-bar {
    animation: rhythmPulse 1.1s ease-in-out infinite;
    transform-origin: bottom;
}

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

::-webkit-scrollbar-thumb {
    background: #F4C9D6;
    border-radius: 999px;
}

:focus-visible {
    outline: 2px solid #b5483a;
    outline-offset: 2px;
    border-radius: 4px;
}



/* Notyf Toast Notifications */
.notyf__toast {
    font-size: small;
    border-radius: 10px;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.25);
}

/* Success */
.notyf__toast--success {
    background: #16a34a;
    /* green */
    color: #fff;
}

/* Error */
.notyf__toast--error {
    background: #dc2626;
    /* red */
    color: #fff;
}

/* Progress bar */
.notyf__ripple {
    opacity: 0.2;
}