/* =========================================================
   SARI NAVBAR — SCROLL STATE
   Transparent + white on hero
   White + black after scroll
   ========================================================= */

.sari-navbar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;

    background: transparent;
    border-bottom: 1px solid transparent;

    transition:
        background-color 350ms ease,
        border-color 350ms ease,
        box-shadow 350ms ease;
}

/* =========================================================
   DEFAULT — HERO
   ========================================================= */

.sari-navbar .sari-navbar-logo {
    filter: none !important;
    opacity: 1;
    transition: filter 350ms ease, opacity 350ms ease;
}

.sari-navbar .sari-nav-link,
.sari-navbar .sari-login {
    color: #f5f3ef !important;
    transition: color 300ms ease;
}

.sari-navbar .sari-search-button,
.sari-navbar .sari-mobile-menu-button {
    color: #f5f3ef !important;
    transition:
        color 300ms ease,
        background-color 300ms ease,
        border-color 300ms ease;
}

.sari-navbar .sari-register {
    color: #f5f3ef !important;
    border-color: rgba(245, 243, 239, 0.35) !important;
    background: transparent !important;

    transition:
        color 300ms ease,
        background-color 300ms ease,
        border-color 300ms ease;
}


/* =========================================================
   HOVER — HERO
   ========================================================= */

.sari-navbar .sari-nav-link:hover,
.sari-navbar .sari-login:hover {
    color: #ffffff !important;
}

.sari-navbar .sari-register:hover {
    color: #111111 !important;
    background: #f5f3ef !important;
    border-color: #f5f3ef !important;
}

.sari-navbar .sari-search-button:hover,
.sari-navbar .sari-mobile-menu-button:hover {
    color: #ffffff !important;
}


/* =========================================================
   SCROLLED STATE
   WHITE NAVBAR + BLACK CONTENT
   ========================================================= */

.sari-navbar.scrolled {
    background: rgba(255, 255, 255, 0.96);

    border-bottom-color: rgba(17, 17, 17, 0.08);

    box-shadow:
        0 8px 30px rgba(0, 0, 0, 0.08);

    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}


/* BLACK LOGO */

.sari-navbar.scrolled .sari-navbar-logo {
    filter: brightness(0) saturate(100%) !important;
    opacity: 1;
}


/* BLACK NAV LINKS */

.sari-navbar.scrolled .sari-nav-link,
.sari-navbar.scrolled .sari-login {
    color: #111111 !important;
}


/* BLACK NAV HOVER */

.sari-navbar.scrolled .sari-nav-link:hover,
.sari-navbar.scrolled .sari-login:hover {
    color: #000000 !important;
}


/* SEARCH */

.sari-navbar.scrolled .sari-search-button,
.sari-navbar.scrolled .sari-mobile-menu-button {
    color: #111111 !important;

    border-color: rgba(17, 17, 17, 0.12) !important;
    background: rgba(17, 17, 17, 0.025) !important;
}


/* SEARCH HOVER */

.sari-navbar.scrolled .sari-search-button:hover,
.sari-navbar.scrolled .sari-mobile-menu-button:hover {
    color: #000000 !important;

    border-color: rgba(17, 17, 17, 0.22) !important;
    background: rgba(17, 17, 17, 0.06) !important;
}


/* REGISTER */

.sari-navbar.scrolled .sari-register {
    color: #111111 !important;

    background: transparent !important;
    border-color: rgba(17, 17, 17, 0.20) !important;
}


/* REGISTER HOVER */

.sari-navbar.scrolled .sari-register:hover {
    color: #ffffff !important;

    background: #111111 !important;
    border-color: #111111 !important;
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 900px) {

    .sari-navbar.scrolled {
        background: rgba(255, 255, 255, 0.97);
    }

    .sari-navbar.scrolled .sari-mobile-menu-button {
        color: #111111 !important;
    }

}
/* =========================================================
   SARI — FORMAL MODERN AUTH BUTTON EFFECTS
   ========================================================= */

.sari-login,
.sari-register {
    position: relative;
    transition:
        color 420ms cubic-bezier(0.22, 1, 0.36, 1),
        background-color 420ms cubic-bezier(0.22, 1, 0.36, 1),
        border-color 420ms cubic-bezier(0.22, 1, 0.36, 1),
        transform 300ms cubic-bezier(0.22, 1, 0.36, 1),
        box-shadow 420ms cubic-bezier(0.22, 1, 0.36, 1);
}


/* =========================================================
   LOGIN
   Minimal luxury underline
   ========================================================= */

.sari-login::after {
    content: "";

    position: absolute;
    left: 0;
    bottom: -4px;

    width: 100%;
    height: 1px;

    background: currentColor;

    transform: scaleX(0);
    transform-origin: right center;

    opacity: 0.65;

    transition:
        transform 450ms cubic-bezier(0.22, 1, 0.36, 1),
        opacity 300ms ease;
}

.sari-login:hover {
    transform: translateY(-1px);
}

.sari-login:hover::after {
    transform: scaleX(1);
    transform-origin: left center;
    opacity: 1;
}


/* =========================================================
   REGISTER
   Elegant lift — no aggressive animation
   ========================================================= */

.sari-register:hover {
    transform: translateY(-2px);

    box-shadow:
        0 8px 24px rgba(0, 0, 0, 0.08);
}


/* =========================================================
   CLICK / PRESS
   Very subtle
   ========================================================= */

.sari-login:active,
.sari-register:active {
    transform: translateY(0) scale(0.985);

    transition-duration: 120ms;
}


/* =========================================================
   REMOVE OLD RIPPLE EFFECT
   ========================================================= */

.sari-login.is-clicking::after,
.sari-register.is-clicking::after {
    animation: none;
}


/* =========================================================
   SCROLLED NAVBAR REGISTER
   ========================================================= */

.sari-navbar.scrolled .sari-register {
    transition:
        color 420ms cubic-bezier(0.22, 1, 0.36, 1),
        background-color 420ms cubic-bezier(0.22, 1, 0.36, 1),
        border-color 420ms cubic-bezier(0.22, 1, 0.36, 1),
        transform 300ms cubic-bezier(0.22, 1, 0.36, 1),
        box-shadow 420ms cubic-bezier(0.22, 1, 0.36, 1);
}

.sari-navbar.scrolled .sari-register:hover {
    color: #ffffff !important;
    background: #111111 !important;
    border-color: #111111 !important;

    transform: translateY(-2px);

    box-shadow:
        0 10px 28px rgba(0, 0, 0, 0.12);
}


/* =========================================================
   ACCESSIBILITY
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    .sari-login,
    .sari-register,
    .sari-login::after {
        transition: none !important;
    }

}