.reflow-gradient {
    display: inline-block;
    background: linear-gradient(90deg, #4cc9ff, #ff4ecd);
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
}

.reflow-gradient-animated {
    display: inline-block;

    background-image: repeating-linear-gradient(90deg,
            #4cc9ff 0%,
            #4cc9ff 20%,
            #9b5cff 30%,
            #4cc9ff 40%,
            #4cc9ff 60%);

    background-size: 200% 100%;

    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;

    animation: reflow-drift 8s linear infinite;
}

.card-mod {
    box-shadow:
        -1px -1px 5px rgba(139, 50, 255, 0.3),
        0 0 1px rgba(50, 163, 255, 0.6),
        1px 1px 5px rgba(175, 50, 200, 0.2);
}

@keyframes reflow-drift {
    from {
        background-position: 0 50%;
    }

    to {
        background-position: -100% 50%;
    }
}

.card-blur {
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
}

#horoscopeContainer .nav-link.active {
    border: 1px solid #4cc9ff50 !important;
    box-shadow: 0 0 3px 0.25rem rgba(var(--generic-accent-shadow-rgb), 0.075);
    background: linear-gradient(
        90deg,
        var(--gradient-color-1) 0%,
        var(--gradient-color-2) 80%,
        var(--gradient-color-3) 100%
    ) !important;
    color: var(--body-color) !important;
}

.gradient-text {
    background: linear-gradient(
        to bottom,
        #4cc9ff 33%,
        #9b5cff 66%
    ) !important;
    -webkit-background-clip: text !important;
    color: transparent !important;
    background-clip: text !important;
    opacity: var(--gradient-text-opacity);
    text-fill-color: transparent !important;
    transition: all 0.5s ease;
}

.btn-primary {
    background: linear-gradient(
        to left,
        #39307f11 22%,
        #d465f611 55%
    );
    border: 1px solid #68686850 !important;
    font-size: 16px;
    cursor: pointer;
    transition: all 0.4s ease;
}

.btn-primary:hover {
    background: linear-gradient(
        to left,
        #39307f16 22%,
        #d465f616 78%
    );
    color: #4cc9ff !important;
    box-shadow: 0 0 3px 0.25rem rgba(var(--generic-accent-shadow-rgb), 0.075);
}

.navbar-nav .nav-link::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 2px;
    width: 6px;
    height: 2px;
    background: #39307f;
    transform: translateX(-50%);
    opacity: 0;
    transition:
        width 0.45s ease,
        opacity 0.3s ease;
}

#horoscopeContainer .nav-link:hover {
    background: #4cc9ff10 !important;
    box-shadow: 0 0 3px 0.25rem rgba(var(--generic-accent-shadow-rgb), 0.075);
}

.mobile-menu-items {
    background: linear-gradient(
        90deg,
        rgba(var(--card-specific-gradient-color-3-rgb), 0.25) 0%,
        rgba(var(--card-specific-gradient-color-2-rgb), 0.20) 50%,
        rgba(var(--card-specific-gradient-color-1-rgb), 0.25) 100%
    ) !important;
}

.navbar {
    
    background: linear-gradient(
        90deg,
        rgba(var(--card-specific-gradient-color-3-rgb), 0.25) 0%,
        rgba(var(--card-specific-gradient-color-2-rgb), 0.20) 50%,
        rgba(var(--card-specific-gradient-color-1-rgb), 0.25) 100%
    ) !important;
}


/* glass layer */
.navbar::after {
    content: "";
    position: absolute;
    border-radius: 1.5rem;
    inset: 0;               /* fill entire navbar */
    background: #ffffff02;  /* tint */
    backdrop-filter: blur(7px);
    -webkit-backdrop-filter: blur(7px);

    pointer-events: none;   /* do NOT block clicks */
    z-index: -1;
}


.navbar.no-border-radius-bottom::after {
    content: "";
    position: absolute;
    border-radius: 1.5rem 1.5rem 0 0;
    inset: 0;               /* fill entire navbar */
    background: #ffffff02;  /* tint */
    backdrop-filter: blur(7px);
    -webkit-backdrop-filter: blur(7px);

    pointer-events: none;   /* do NOT block clicks */
    z-index: -1;
}

.bg-glass {
    backdrop-filter: blur(7px);
    -webkit-backdrop-filter: blur(7px);
}