/* ============================================
   P.A.M. Command Center v2.1 — Animations
   Theme: Premium Purple Glassmorphism
   ============================================ */

/* --- Orb Spin (conic gradient rotation) --- */
@keyframes orb-spin {
    to { transform: rotate(360deg); }
}

/* --- Orb Breathe (idle state) --- */
@keyframes orb-breath {
    0%, 100% { transform: rotate(0deg) scale(1); }
    50% { transform: rotate(180deg) scale(1.04); }
}

/* --- Loading Bar --- */
@keyframes load-fill {
    0% { width: 0; }
    100% { width: 100%; }
}

/* --- Messages --- */
@keyframes msg-in {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* --- Typing Indicator --- */
@keyframes typing {
    0%, 60%, 100% { opacity: 0.3; transform: translateY(0); }
    30% { opacity: 1; transform: translateY(-4px); }
}

/* --- Subtle Background Ambience --- */
body::before {
    content: '';
    position: fixed; inset: 0; z-index: -1;
    opacity: 0.5;
    background-image:
        radial-gradient(circle at 15% 85%, rgba(139, 92, 246, 0.06) 0%, transparent 50%),
        radial-gradient(circle at 85% 15%, rgba(236, 72, 153, 0.04) 0%, transparent 50%),
        radial-gradient(circle at 50% 50%, rgba(6, 182, 212, 0.02) 0%, transparent 40%);
    pointer-events: none;
}

body.mode-unfiltered::before {
    background-image:
        radial-gradient(circle at 15% 85%, rgba(236, 72, 153, 0.06) 0%, transparent 50%),
        radial-gradient(circle at 85% 15%, rgba(139, 92, 246, 0.04) 0%, transparent 50%),
        radial-gradient(circle at 50% 50%, rgba(6, 182, 212, 0.02) 0%, transparent 40%);
}

/* --- Vignette --- */
.app-main::before {
    content: '';
    position: fixed; inset: 0;
    background: radial-gradient(ellipse at center, transparent 50%, rgba(5, 2, 18, 0.55) 100%);
    pointer-events: none;
    z-index: 99;
}

/* --- Fade Transitions --- */
.fade-in { animation: fadeIn 0.4s ease forwards; }
.fade-out { animation: fadeOut 0.3s ease forwards; }

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}
@keyframes fadeOut {
    from { opacity: 1; }
    to { opacity: 0; }
}

/* --- Slide transitions --- */
.slide-up { animation: slideUp 0.35s ease forwards; }

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

/* --- Card hover effects --- */
.dash-card {
    transition: border-color 0.3s, box-shadow 0.3s, transform 0.3s;
}
.dash-card:hover { transform: translateY(-2px); }

/* --- Button interactions --- */
.topbar-btn, .input-btn, .btn-icon {
    position: relative;
    overflow: hidden;
}
.topbar-btn:active, .input-btn:active, .btn-icon:active {
    transform: scale(0.92);
}

/* --- Loading screen fade out --- */
.loading-screen.done {
    animation: fadeOut 0.5s ease forwards;
    pointer-events: none;
}

/* --- Orb speaking state --- */
@keyframes orb-speaking {
    0%, 100% { transform: scale(1); filter: brightness(1); }
    25% { transform: scale(1.06); filter: brightness(1.2); }
    50% { transform: scale(0.97); filter: brightness(1.1); }
    75% { transform: scale(1.04); filter: brightness(1.15); }
}

.orb-speaking .loading-orb,
.orb-speaking .welcome-orb {
    animation: orb-speaking 0.8s ease-in-out infinite;
}

/* --- Status indicators --- */
@keyframes blink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.3; }
}
.status-live { animation: blink 2s ease-in-out infinite; }

/* --- Camera LED --- */
.camera-active #btnCamera {
    color: var(--error);
    animation: blink 1s ease-in-out infinite;
}

/* --- Conversation item hover --- */
.conv-item { transition: all 0.2s ease; }

/* --- Mode flash animation --- */
@keyframes mode-flash-anim {
    0% { opacity: 0; }
    40% { opacity: 1; }
    100% { opacity: 0; }
}
.mode-flash.active {
    animation: mode-flash-anim 0.5s ease forwards;
}

/* --- Glass card subtle shimmer --- */
@keyframes glass-shimmer {
    0% { background-position: -200% center; }
    100% { background-position: 200% center; }
}

/* --- Responsive: reduce motion --- */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
    }
}