.header-greeting-message {
    color: #fffbe0;
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 1.22em;
    font-style: italic;
    font-weight: 500;
    letter-spacing: 0.01em;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.85);
    margin: 0.1em 0 0.1em 0.2em;
    padding: 0 0.3em;
    border-radius: 6px;
    background: transparent;
    display: inline-block;
    box-shadow: 0 1px 4px rgba(0,0,0,0.12);
    transition: background 0.3s, color 0.3s;
}

.header-greeting-submessage {
    display: block;
    margin-top: 5px;
}

@supports ((-webkit-background-clip: text) or (background-clip: text)) {
    .header-greeting-message {
        background-image: linear-gradient(
            120deg,
            #009246 0%,
            #009246 28%,
            #f7f7f2 45%,
            #f7f7f2 55%,
            #ce2b37 72%,
            #ce2b37 100%
        );
        background-size: 220% 100%;
        background-position: 0% 50%;
        background-repeat: repeat;
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
        text-shadow: none;
        animation: greeting-flag-wave 5.5s ease-in-out infinite;
    }

    .header-greeting-submessage {
        background-image: linear-gradient(
            120deg,
            #ce2b37 0%,
            #ce2b37 28%,
            #f7f7f2 45%,
            #f7f7f2 55%,
            #009246 72%,
            #009246 100%
        );
        background-position: 100% 50%;
        animation: greeting-flag-wave-reverse 5.5s ease-in-out infinite;
    }
}

@keyframes greeting-flag-wave {
    0% {
        background-position: 0% 50%;
    }

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

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

@keyframes greeting-flag-wave-reverse {
    0% {
        background-position: 100% 50%;
    }

    50% {
        background-position: 0% 50%;
    }

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

:lang(zh) .header-greeting-message,
:lang(ko) .header-greeting-message {
    font-family: 'Roboto', Arial, sans-serif;
    font-style: normal;
}

body.music-mode .header-greeting-message {
    display: none !important;
}

body.home-mode .header-greeting-message {
    display: block;
}