/* ==========================================================
   G4 Ghost — Premium Animations & Micro-interactions
   ========================================================== */

/* ===== Page Load Fade-in ===== */
@keyframes pageEnter {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}
.module-content { animation: pageEnter 0.4s ease; }

/* ===== Number Counter Animation ===== */
@keyframes countUp { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
.base-card-value { animation: countUp 0.6s ease; }

/* ===== Shimmer Skeleton Loader ===== */
.skeleton {
    background: linear-gradient(90deg, var(--bg-input) 25%, #27272a 50%, var(--bg-input) 75%);
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
    border-radius: 6px;
}
@keyframes shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

/* ===== Progress Bar ===== */
.progress-bar-track {
    width: 100%; height: 6px; background: var(--bg-input); border-radius: 10px; overflow: hidden;
}
.progress-bar-fill {
    height: 100%; border-radius: 10px;
    background: linear-gradient(90deg, var(--g4-gold), #f5d07a);
    transition: width 1.2s cubic-bezier(0.4,0,0.2,1);
    box-shadow: 0 0 10px rgba(229,180,70,0.4);
}
.progress-bar-fill.success { background: linear-gradient(90deg, #10b981, #34d399); box-shadow: 0 0 10px rgba(16,185,129,0.4); }
.progress-bar-fill.danger  { background: linear-gradient(90deg, #ef4444, #f87171); box-shadow: 0 0 10px rgba(239,68,68,0.4); }
.progress-bar-fill.animated { animation: progressPulse 2s ease infinite; }
@keyframes progressPulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.7; } }

/* ===== Ripple on click ===== */
.btn-ripple { position: relative; overflow: hidden; }
.btn-ripple::after {
    content: ''; position: absolute; top: 50%; left: 50%;
    width: 0; height: 0; background: rgba(255,255,255,0.2);
    border-radius: 50%; transform: translate(-50%,-50%);
    transition: width 0.4s ease, height 0.4s ease, opacity 0.4s ease;
    opacity: 0;
}
.btn-ripple:active::after { width: 200px; height: 200px; opacity: 1; transition: 0s; }

/* ===== Modal Overlay ===== */
.g4-modal-overlay {
    position: fixed; inset: 0; background: rgba(0,0,0,0.8);
    backdrop-filter: blur(8px); z-index: 1000;
    display: flex; align-items: center; justify-content: center;
    opacity: 0; pointer-events: none; transition: opacity 0.3s ease;
}
.g4-modal-overlay.visible { 
    opacity: 1; pointer-events: auto; 
    animation: modalIn 0.25s ease forwards;
}
@keyframes modalIn { to { opacity: 1; } }
.g4-modal {
    background: var(--bg-panel); border: 1px solid var(--border-color);
    border-radius: 16px; padding: 2.5rem; width: 560px; max-width: 95vw;
    transform: scale(0.95); position: relative;
}
.g4-modal-overlay.visible .g4-modal {
    animation: modalScale 0.25s ease forwards;
}

@keyframes modalScale { to { transform: scale(1); } }
.g4-modal-title {
    font-family: 'Outfit'; font-size: 1.3rem; font-weight: 700;
    color: white; margin-bottom: 0.5rem;
}
.g4-modal-subtitle { font-size: 0.85rem; color: var(--text-muted); margin-bottom: 2rem; }
.g4-modal-close {
    position: absolute; top: 1.2rem; right: 1.2rem;
    background: none; border: none; color: var(--text-muted); font-size: 1.2rem;
    cursor: pointer; padding: 4px 8px; border-radius: 4px; transition: 0.2s;
}
.g4-modal-close:hover { background: var(--bg-input); color: white; }
.g4-modal-field { margin-bottom: 1.2rem; }
.g4-modal-field label { font-size: 0.78rem; color: var(--text-muted); font-weight: 600; text-transform: uppercase; display: block; margin-bottom: 6px; }
.g4-modal-field input, .g4-modal-field select, .g4-modal-field textarea {
    width: 100%; background: var(--bg-input); border: 1px solid var(--border-color);
    padding: 0.8rem 1rem; border-radius: 8px; color: white; outline: none; font-size: 0.9rem;
    transition: 0.2s;
}
.g4-modal-field input:focus, .g4-modal-field select:focus, .g4-modal-field textarea:focus {
    border-color: var(--g4-gold);
    box-shadow: 0 0 0 3px rgba(229,180,70,0.15);
}

/* ===== Live Feed (notification stream) ===== */
.live-feed-container {
    position: fixed; top: 1rem; right: 1rem; z-index: 500;
    width: 300px; display: flex; flex-direction: column; gap: 8px;
    pointer-events: none;
}
.live-event {
    background: var(--bg-panel); border: 1px solid var(--border-color);
    border-radius: 10px; padding: 0.8rem 1rem; font-size: 0.78rem;
    color: var(--text-primary); display: flex; gap: 10px; align-items: flex-start;
    animation: slideInRight 0.3s ease, fadeOutRight 0.3s ease 4.7s forwards;
    pointer-events: auto;
}
@keyframes slideInRight { from { opacity: 0; transform: translateX(20px); } to { opacity: 1; transform: translateX(0); } }
@keyframes fadeOutRight { to { opacity: 0; transform: translateX(20px); } }
.live-event-icon { font-size: 0.9rem; flex-shrink: 0; margin-top: 1px; }

/* ===== Node pulse (automations) ===== */
.node-active { animation: nodePulse 2s infinite; }
@keyframes nodePulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(229,180,70,0); }
    50% { box-shadow: 0 0 0 6px rgba(229,180,70,0.15); }
}
.connector-animated { animation: flowArrow 1.5s infinite; color: var(--g4-gold); }
@keyframes flowArrow { 0%, 100% { opacity: 0.3; transform: translateX(-4px); } 50% { opacity: 1; transform: translateX(0); } }

/* ===== Hover card lift ===== */
.card-lift { transition: transform 0.2s ease, box-shadow 0.2s ease; }
.card-lift:hover { transform: translateY(-3px); box-shadow: 0 12px 28px rgba(0,0,0,0.5); }

/* ===== KPI blink (live data) ===== */
.kpi-live::after {
    content: ''; display: inline-block; width: 6px; height: 6px;
    background: #10b981; border-radius: 50%; margin-left: 6px;
    vertical-align: middle; animation: liveBlink 2s infinite;
}
@keyframes liveBlink { 0%, 100% { opacity: 1; } 50% { opacity: 0.2; } }

/* ===== Button loading state ===== */
button.loading { pointer-events: none; opacity: 0.7; }
button.loading i { animation: spin 0.8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ===== Document generation typewriter ===== */
.doc-generating {
    background: var(--bg-input); border: 1px solid rgba(229,180,70,0.3);
    border-radius: 8px; padding: 1.5rem; font-family: 'Courier New', monospace;
    font-size: 0.85rem; color: #a3e635; line-height: 1.6; min-height: 200px;
    position: relative; overflow: hidden;
}
.doc-generating::before {
    content: ''; position: absolute; top: 0; left: 0; right: 0;
    height: 3px; background: linear-gradient(90deg, transparent, var(--g4-gold), transparent);
    animation: scanLine 2s linear infinite;
}
@keyframes scanLine { from { transform: translateX(-100%); } to { transform: translateX(100%); } }

/* ===== Flow execution ===== */
.flow-executing .n8n-node { animation: nodeExecute 0.5s ease forwards; }
@keyframes nodeExecute {
    0% { border-color: var(--border-color); }
    50% { border-color: var(--g4-gold); box-shadow: 0 0 20px rgba(229,180,70,0.2); }
    100% { border-color: var(--success); }
}

/* ===== Status pill pulse ===== */
.status-active {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 0.78rem; font-weight: 600;
}
.status-dot { 
    width: 6px; height: 6px; border-radius: 50%; background: #10b981; 
    animation: statusPulse 2.5s cubic-bezier(0.4, 0, 0.6, 1) infinite; 
    box-shadow: 0 0 10px rgba(16,185,129,0.4);
}
@keyframes statusPulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.3; transform: scale(1.4); } }
@keyframes statusPulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(16,185,129,0.5); } 50% { box-shadow: 0 0 0 4px rgba(16,185,129,0); } }

/* ===== Sidebar Neural Synapse Background ===== */
@keyframes neuralSynapse {
    0%   { background-position: 0% 50%; opacity: 0.8; }
    50%  { background-position: 100% 50%; opacity: 1; }
    100% { background-position: 0% 50%; opacity: 0.8; }
}
.sidebar-neural-bg {
    background: linear-gradient(-45deg, rgba(229,180,70,0.02), rgba(9,9,11,1), rgba(60,165,250,0.01), rgba(9,9,11,1));
    background-size: 400% 400%;
    animation: neuralSynapse 15s ease infinite;
}

/* ===== Premium Button Pulse ===== */
@keyframes btnGlowPulse {
    0% { box-shadow: 0 0 0 0 rgba(229,180,70,0.4); transform: scale(1); }
    70% { box-shadow: 0 0 0 10px rgba(229,180,70,0); transform: scale(1.05); }
    100% { box-shadow: 0 0 0 0 rgba(229,180,70,0); transform: scale(1); }
}
.btn-pulse-ready {
    animation: btnGlowPulse 2s infinite;
}

/* ===== Refined Modal Scale ===== */
@keyframes modalScale { 
    from { transform: scale(0.92) translateY(10px); opacity: 0; }
    to { transform: scale(1) translateY(0); opacity: 1; } 
}