/* ==========================================================================
   CoreSync Private — Animations
   All CSS transitions and keyframes
   ========================================================================== */

/* ---------------------------------------------------------------------------
   Loading dots animation (concierge typing indicator)
   --------------------------------------------------------------------------- */

@keyframes loadingDot {
    0%, 80%, 100% {
        opacity: 0.3;
        transform: scale(0.8);
    }
    40% {
        opacity: 1;
        transform: scale(1);
    }
}

.chat-loading__dot:nth-child(1) {
    animation: loadingDot 1.4s ease-in-out infinite;
    animation-delay: 0s;
}

.chat-loading__dot:nth-child(2) {
    animation: loadingDot 1.4s ease-in-out infinite;
    animation-delay: 0.2s;
}

.chat-loading__dot:nth-child(3) {
    animation: loadingDot 1.4s ease-in-out infinite;
    animation-delay: 0.4s;
}

/* ---------------------------------------------------------------------------
   Chat message enter animation
   --------------------------------------------------------------------------- */

@keyframes messageEnter {
    from {
        opacity: 0;
        transform: translateY(12px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.chat-msg {
    animation: messageEnter var(--duration-normal) var(--ease-smooth) both;
}

/* ---------------------------------------------------------------------------
   Placeholder background animation
   --------------------------------------------------------------------------- */

@keyframes gradientShift {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

.room-background--placeholder {
    animation: gradientShift 30s ease infinite;
}

/* ---------------------------------------------------------------------------
   Scroll text reveal
   --------------------------------------------------------------------------- */

.room-scroll__text {
    transition: opacity var(--duration-slow) var(--ease-smooth),
                transform var(--duration-slow) var(--ease-smooth);
}

/* ---------------------------------------------------------------------------
   Panel slide transitions
   --------------------------------------------------------------------------- */

.explore-panel,
.concierge-panel {
    transition: transform var(--duration-normal) var(--ease-smooth);
}

/* ---------------------------------------------------------------------------
   Fade-in utility
   --------------------------------------------------------------------------- */

.fade-in {
    opacity: 0;
    animation: fadeIn var(--duration-normal) var(--ease-smooth) forwards;
}

@keyframes fadeIn {
    to {
        opacity: 1;
    }
}

/* ---------------------------------------------------------------------------
   Subtle pulse for interactive elements
   --------------------------------------------------------------------------- */

@keyframes subtlePulse {
    0%, 100% {
        opacity: 0.7;
    }
    50% {
        opacity: 0.9;
    }
}