/*
 * bitmaster branding for RomM
 * Rainbow colors and animations from bitmaster.network
 */

/* Orbitron is the font used on the original website. */
@import url("https://fonts.googleapis.com/css2?family=Orbitron:wght@900&display=swap");

/* Hide the original RomM icon and wordmark. */
.bitmaster-brand-link > :not(.bitmaster-wordmark) {
    display: none !important;
}

/* Keep the branding neatly positioned in the navigation. */
.bitmaster-brand-link {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 0 !important;
    text-decoration: none !important;
    overflow: visible !important;
}

/* Custom bitmaster wordmark. */
.bitmaster-wordmark {
    display: inline-block;
    position: relative;
    flex-shrink: 0;

    font-family: 'Orbitron', sans-serif;
    font-size: clamp(16px, 1.8vw, 24px);
    font-weight: 900;
    line-height: 1.25;
    letter-spacing: -1px;

    cursor: pointer;
    transform-origin: center;

    background: linear-gradient(
        90deg,
        #ff004c,
        #ff7b00,
        #ffee00,
        #39ff14,
        #00ffff,
        #0077ff,
        #a000ff,
        #ff00cc,
        #ff004c
    );

    background-size: 400% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;

    animation:
        rainbowFlow 15s linear infinite,
        rainbowGlow 8s ease-in-out infinite alternate,
        brandSurge 4s linear 2.7s infinite;
}

/* Smooth cinematic zoom once every four seconds. */
@keyframes brandSurge {
    0%, 8.163265%, 100% {
        transform: scale(1);
        animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
    }

    2.267574% {
        transform: scale(1.08);
        animation-timing-function: cubic-bezier(0.4, 0, 0.6, 1);
    }
}

/* Continuous animated rainbow. */
@keyframes rainbowFlow {
    0% {
        background-position: 0% 50%;
    }

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

/* Animated multicolor glow. */
@keyframes rainbowGlow {
    0% {
        filter: drop-shadow(0 0 3px rgba(255, 0, 76, 0.35));
    }

    33% {
        filter: drop-shadow(0 0 9px rgba(0, 255, 255, 0.65));
    }

    66% {
        filter: drop-shadow(0 0 9px rgba(160, 0, 255, 0.65));
    }

    100% {
        filter: drop-shadow(0 0 12px rgba(255, 0, 204, 0.7));
    }
}

/* Stronger glow on hover. */
@media (hover: hover) {
    .bitmaster-brand-link:hover .bitmaster-wordmark {
        filter:
            saturate(1.8)
            brightness(1.2)
            drop-shadow(0 0 4px rgba(83, 244, 255, .47))
            drop-shadow(0 0 11px rgba(255, 77, 206, .33))
            drop-shadow(0 0 22px rgba(146, 112, 255, .25)) !important;
    }
}

/* Accessibility. */
@media (prefers-reduced-motion: reduce) {
    .bitmaster-wordmark {
        animation: none !important;
    }
}