/* --- css/animations.css --- */

/* ========================================= */
/* === 1. BASIS KEYFRAMES ================== */
/* ========================================= */

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

@keyframes flash-menu { 
    0% { background: transparent; } 
    50% { background: var(--accent); } 
    100% { background: transparent; } 
}

@keyframes move-stripes { 
    0% { background-position: 0 0; } 
    100% { background-position: 30px 0; } 
}

@keyframes idle-breathe {
    0% { box-shadow: 0 10px 30px rgba(0,0,0,0.5); transform: scale(1); }
    50% { box-shadow: 0 10px 50px var(--accent-glow); transform: scale(1.02); }
    100% { box-shadow: 0 10px 30px rgba(0,0,0,0.5); transform: scale(1); }
}

@keyframes idle-pulse-btn {
    0% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.4); }
    70% { box-shadow: 0 0 0 10px rgba(255, 255, 255, 0); }
    100% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0); }
}

@keyframes fade-up { 
    0% { opacity: 0; transform: translateY(10px); } 
    100% { opacity: 1; transform: translateY(0); } 
}

/* ========================================= */
/* === 2. HELPER CLASSES =================== */
/* ========================================= */

.fade-in-anim { animation: fadeInUp 0.6s ease forwards; }

.fade-out {
    opacity: 0; 
    transform: translateY(-10px);
    transition: opacity 0.3s, transform 0.3s;
}

.visible { 
    opacity: 1 !important; 
    transform: translateY(0) !important; 
    transition: all 0.8s ease; 
}

/* Voor tabs wisselen in skills */
.skill-tree-content.active { 
    display: block; 
    animation: fade-up 0.4s ease forwards; 
}

/* Interactieve Strepen (Wordt gebruikt door JS Randomizer en Hover) */
.game-xp-fill.animating {
    background-image: linear-gradient(
        45deg, rgba(255, 255, 255, 0.25) 25%, transparent 25%, transparent 50%, 
        rgba(255, 255, 255, 0.25) 50%, rgba(255, 255, 255, 0.25) 75%, transparent 75%, transparent
    );
    background-size: 30px 30px; 
    animation: move-stripes 1s linear infinite;
    filter: brightness(1.2); 
    box-shadow: 0 0 15px var(--accent-glow);
}

/* ========================================= */
/* === 3. IDLE STATE (AFK GEDRAG) ========== */
/* ========================================= */

/* Profielfoto gaat ademen */
body.is-idle .profile-wrapper {
    animation: idle-breathe 4s ease-in-out infinite;
}

/* ALLEEN de tab knoppen pulseren nog specifiek bij Idle.
   De CV knop doet dit nu altijd (zie profile.css) */
body.is-idle .game-tab-btn.active {
    animation: idle-pulse-btn 2s infinite;
}

/* ========================================= */
/* === 4. SCROLL TOAST & NAVIGATIE ========= */
/* ========================================= */

.scroll-toast {
    position: fixed; bottom: 30px; left: 50%;
    transform: translate(-50%, 50px);
    background-color: var(--accent); color: white; padding: 12px 24px;
    border-radius: 50px; font-weight: 600; font-size: 0.9rem;
    box-shadow: 0 5px 15px rgba(0,0,0,0.4); opacity: 0; pointer-events: none; z-index: 9999;
    transition: opacity 0.4s ease, transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.3s ease;
    border: none; font-family: inherit;
}

/* Zichtbaar = ook echt een knop (gebruikers drukken erop, dus dat mag ook) */
.scroll-toast.visible {
    opacity: 1; transform: translate(-50%, 0) !important;
    pointer-events: auto; cursor: pointer;
}
.scroll-toast.visible:hover {
    transform: translate(-50%, -3px) !important;
    box-shadow: 0 8px 20px rgba(0,0,0,0.6);
}

.nav-link.flashing { 
    animation: flash-menu 1s infinite; border-radius: 8px; 
}