/* ============================================
   CHIRPBAR — FRONT END STYLES
   ============================================ */

.chirpbar {
    position: relative;
    overflow: hidden;
    min-height: 40px;
}

/* --------------------------------------------
   MESSAGE LAYOUT
   -------------------------------------------- */

.chirpbar-message {
    position: absolute;
    width: 100%;
    left: 0;
    top: 0;
    opacity: 0;
    padding: 8px 16px;
    text-align: center;
}

.chirpbar-message.is-active {
    position: relative;
    opacity: 1;
}

.chirpbar-message::before {
    content: "";
    position: absolute;
    inset: 0;
    background-color: var(--chirp-bg, #222222);
    z-index: 0;
    opacity: 1;
    transform: translateY(0);
}

.chirpbar-message-inner {
    position: relative;
    z-index: 1;
    color: var(--chirp-text, #ffffff);
    transition:
        opacity 0.6s ease,
        transform 0.6s ease,
        filter 0.6s ease;
    will-change: opacity, transform, filter;
}

.chirpbar-message.is-exiting {
    position: absolute;
}

.chirpbar-message a {
    text-decoration: none;
}

/* ============================================
   BACKGROUND ANIMATIONS
   ============================================ */

/* None */
.chirpbar[data-background="none"] .chirpbar-message::before {
    transition: none !important;
    opacity: 1 !important;
    transform: none !important;
}
.chirpbar[data-background="none"] .chirpbar-message.is-exiting::before {
    opacity: 1 !important;
    transform: none !important;
}

/* Fade */
.chirpbar[data-background="fade"] .chirpbar-message::before {
    opacity: 0;
    transition: opacity 1s ease-out;
}
.chirpbar[data-background="fade"] .chirpbar-message.is-active::before {
    opacity: 1;
}
.chirpbar[data-background="fade"] .chirpbar-message.is-exiting::before {
    opacity: 0;
}

/* Slide Up */
.chirpbar[data-background="slide-up"] .chirpbar-message::before {
    transform: translateY(40px);
    transition: transform 1s cubic-bezier(0.16, 1, 0.3, 1);
}
.chirpbar[data-background="slide-up"] .chirpbar-message.is-active::before {
    transform: translateY(0);
}
.chirpbar[data-background="slide-up"] .chirpbar-message.is-exiting::before {
    transform: translateY(-40px);
}

/* ============================================
   TEXT ANIMATIONS
   ============================================ */

/* None */
.chirpbar[data-transition="none"] .chirpbar-message-inner {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    transition: none !important;
}
.chirpbar[data-transition="none"]
    .chirpbar-message.is-exiting
    .chirpbar-message-inner {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
}

/* Slide Up */
.chirpbar[data-transition="slide-up"] .chirpbar-message-inner {
    transform: translateY(20px);
    opacity: 0;
}
.chirpbar[data-transition="slide-up"]
    .chirpbar-message.is-active
    .chirpbar-message-inner {
    opacity: 1;
    transform: translateY(0);
}
.chirpbar[data-transition="slide-up"]
    .chirpbar-message.is-exiting
    .chirpbar-message-inner {
    opacity: 0;
    transform: translateY(-20px);
}

/* Slide Down */
.chirpbar[data-transition="slide-down"] .chirpbar-message-inner {
    transform: translateY(-20px);
    opacity: 0;
}
.chirpbar[data-transition="slide-down"]
    .chirpbar-message.is-active
    .chirpbar-message-inner {
    opacity: 1;
    transform: translateY(0);
}
.chirpbar[data-transition="slide-down"]
    .chirpbar-message.is-exiting
    .chirpbar-message-inner {
    opacity: 0;
    transform: translateY(20px);
}

/* Slide Left */
.chirpbar[data-transition="slide-left"] .chirpbar-message-inner {
    transform: translateX(20px);
    opacity: 0;
}
.chirpbar[data-transition="slide-left"]
    .chirpbar-message.is-active
    .chirpbar-message-inner {
    opacity: 1;
    transform: translateX(0);
}
.chirpbar[data-transition="slide-left"]
    .chirpbar-message.is-exiting
    .chirpbar-message-inner {
    opacity: 0;
    transform: translateX(-20px);
}

/* Slide Right */
.chirpbar[data-transition="slide-right"] .chirpbar-message-inner {
    transform: translateX(-20px);
    opacity: 0;
}
.chirpbar[data-transition="slide-right"]
    .chirpbar-message.is-active
    .chirpbar-message-inner {
    opacity: 1;
    transform: translateX(0);
}
.chirpbar[data-transition="slide-right"]
    .chirpbar-message.is-exiting
    .chirpbar-message-inner {
    opacity: 0;
    transform: translateX(20px);
}

/* Crossfade */
.chirpbar[data-transition="crossfade"] .chirpbar-message-inner {
    transform: scale(0.995);
    opacity: 0;
}
.chirpbar[data-transition="crossfade"]
    .chirpbar-message.is-active
    .chirpbar-message-inner {
    opacity: 1;
    transform: scale(1);
}
.chirpbar[data-transition="crossfade"]
    .chirpbar-message.is-exiting
    .chirpbar-message-inner {
    opacity: 0;
    transform: scale(0.995);
}

/* Slide + Fade (Up) */
.chirpbar[data-transition="slide-fade-up"] .chirpbar-message-inner {
    transform: translateY(20px);
    opacity: 0;
}
.chirpbar[data-transition="slide-fade-up"]
    .chirpbar-message.is-active
    .chirpbar-message-inner {
    opacity: 1;
    transform: translateY(0);
}
.chirpbar[data-transition="slide-fade-up"]
    .chirpbar-message.is-exiting
    .chirpbar-message-inner {
    opacity: 0;
    transform: translateY(-20px);
}

/* Slide + Fade (Left) */
.chirpbar[data-transition="slide-fade-left"] .chirpbar-message-inner {
    transform: translateX(20px);
    opacity: 0;
}
.chirpbar[data-transition="slide-fade-left"]
    .chirpbar-message.is-active
    .chirpbar-message-inner {
    opacity: 1;
    transform: translateX(0);
}
.chirpbar[data-transition="slide-fade-left"]
    .chirpbar-message.is-exiting
    .chirpbar-message-inner {
    opacity: 0;
    transform: translateX(-20px);
}

/* Scale Up */
.chirpbar[data-transition="scale-up"] .chirpbar-message-inner {
    transform: scale(0.97);
    opacity: 0;
}
.chirpbar[data-transition="scale-up"]
    .chirpbar-message.is-active
    .chirpbar-message-inner {
    opacity: 1;
    transform: scale(1);
}
.chirpbar[data-transition="scale-up"]
    .chirpbar-message.is-exiting
    .chirpbar-message-inner {
    opacity: 0;
    transform: scale(0.97);
}

/* Blur In */
.chirpbar[data-transition="blur-in"] .chirpbar-message-inner {
    filter: blur(4px);
    opacity: 0;
}
.chirpbar[data-transition="blur-in"]
    .chirpbar-message.is-active
    .chirpbar-message-inner {
    opacity: 1;
    filter: blur(0);
}
.chirpbar[data-transition="blur-in"]
    .chirpbar-message.is-exiting
    .chirpbar-message-inner {
    opacity: 0;
    filter: blur(4px);
}