/* Shine effect container */
.shiny-brand {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

/* Text shine (right to left) */
.shiny-text {
    position: relative;
    font-weight: 900;
    color: #fff; /* fallback */
    background: linear-gradient(90deg, #fff 30%, #ffe600 50%, #fff 70%);
    background-size: 200% 100%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: shineRightToLeft 2s linear infinite;

}

.navbar-brand small {
    background: linear-gradient(90deg, #fff 30%, #ffe600 50%, #fff 70%);
    background-size: 200% 100%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: shineRightToLeft 2s linear infinite;
    display: inline-block;
}

/* Logo shine (left to right) */
.shiny-logo {
    position: relative;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    overflow: hidden;
}

.shiny-logo::after {
    content: '';
    position: absolute;
    top: 0;
    left: -75%;
    width: 50%;
    height: 100%;
    background: linear-gradient(
        120deg,
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, 0.6) 50%,
        rgba(255, 255, 255, 0) 100%
    );
    transform: skewX(-20deg);
    animation: shineLeftToRight 2s infinite;
}

/* Sparkle SVGs */
.shiny-brand svg {
    position: absolute;
    width: 20px;
    height: 20px;
    top: 0;
    left: 0;
    opacity: 0.8;
    animation: sparkle 1s infinite;
}

/* Animations */
@keyframes sparkle {
    0%, 100% { transform: scale(0); opacity: 0; }
    50% { transform: scale(1); opacity: 1; }
}

/* Right-to-left shine for text */
@keyframes shineRightToLeft {
    0% { background-position: 100% 0; } /* Start from the right */
    100% { background-position: -100% 0; } /* End at the left */
}

/* Left-to-right shine for logo */
@keyframes shineLeftToRight {
    0% { left: -75%; } /* Start from the left */
    100% { left: 125%; } /* End at the right */
}