/* KissBooK Phase 4 — Micro-Animations & Themes */

/* -------------------
   #2 MICRO-ANIMATIONS 
------------------- */

/* Smooth page load */
.kb-page-transition {
    animation: kb-fade-slide-up 0.5s ease-out forwards;
}

@keyframes kb-fade-slide-up {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Hover Lift Effect */
.kb-hover-lift {
    transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.25s ease;
}
.kb-hover-lift:hover {
    transform: translateY(-5px) scale(1.02);
    box-shadow: 0 12px 24px rgba(0,0,0,0.15);
}

/* Liquid Button Effect */
.kb-btn-liquid {
    position: relative;
    overflow: hidden;
    transition: all 0.3s;
}
.kb-btn-liquid::after {
    content: '';
    position: absolute;
    top: 50%; left: 50%;
    width: 300%; height: 300%;
    background: rgba(255,255,255,0.1);
    transform: translate(-50%, -50%) scale(0);
    border-radius: 50%;
    transition: transform 0.5s ease-out;
}
.kb-btn-liquid:hover::after {
    transform: translate(-50%, -50%) scale(1);
}

/* -------------------
   #8 THEMES VISUELS 
------------------- */
:root {
    --kb-theme-accent: #4f46e5;
    --kb-theme-gradient: linear-gradient(135deg, #4f46e5, #ec4899);
}

body.kb-theme-neon {
    --kb-theme-accent: #00ffcc;
    --kb-theme-gradient: linear-gradient(135deg, #00ffcc, #ff00ff);
}

body.kb-theme-nature {
    --kb-theme-accent: #10b981;
    --kb-theme-gradient: linear-gradient(135deg, #10b981, #f59e0b);
}

body.kb-theme-sunset {
    --kb-theme-accent: #f43f5e;
    --kb-theme-gradient: linear-gradient(135deg, #f43f5e, #fbbf24);
}

/* Apply theme variables to generic elements */
.kb-themed-btn {
    background: var(--kb-theme-gradient);
    color: white;
    border: none;
}
.kb-themed-text {
    color: var(--kb-theme-accent);
}

/* -------------------
   #11 CARTE DE VISITE 
------------------- */
.kb-vcard-modal {
    position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;
    background: rgba(15, 23, 42, 0.6);
    backdrop-filter: blur(5px);
    display: none; align-items: center; justify-content: center;
    z-index: var(--kb-z-max); opacity: 0; transition: opacity 0.3s;
}
.kb-vcard-modal.kb-vcard-show {
    display: flex; opacity: 1;
}
.kb-vcard-content {
    background: #fff; border-radius: 16px; padding: 24px;
    width: 90%; max-width: 320px; text-align: center;
    box-shadow: 0 20px 50px rgba(0,0,0,0.3);
    transform: scale(0.9); transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    position: relative; overflow: hidden;
}
body.kb-dark-mode .kb-vcard-content { background: #1e293b; color: #f8fafc; }
.kb-vcard-modal.kb-vcard-show .kb-vcard-content { transform: scale(1); }

.kb-vcard-close {
    position: absolute; top: 10px; right: 15px; font-size: 24px; cursor: pointer; color: #94a3b8;
}
.kb-vcard-avatar {
    width: 100px; height: 100px; border-radius: 50%; margin: 0 auto 15px;
    border: 3px solid var(--kb-theme-accent); object-fit: cover;
}
.kb-vcard-name { font-size: 20px; font-weight: 800; margin-bottom: 5px; }
.kb-vcard-meta { font-size: 13px; color: #64748b; margin-bottom: 15px; }
.kb-vcard-actions { display: flex; gap: 10px; justify-content: center; }
.kb-vcard-btn {
    flex: 1; padding: 10px; border-radius: 8px; font-weight: 600; cursor: pointer;
    background: #f1f5f9; color: #334155; border: 1px solid #e2e8f0; transition: all 0.2s;
}
body.kb-dark-mode .kb-vcard-btn { background: #0f172a; color: #e2e8f0; border-color: #334155; }
.kb-vcard-btn.primary { background: var(--kb-theme-accent); color: #fff; border: none; }