/* ==========================================================================
   ANIMASI PORTOFOLIO - NAYLA AZZAHRA R
   File stylesheet khusus animasi sederhana dan halus (Modul CSS Animation)
   ========================================================================== */

/* 1. ANIMASI PERPINDAHAN SLIDE (FADE & SLIDE HALUS) */
@keyframes slideFadeIn {
    0% {
        opacity: 0;
        transform: translateY(10px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Terapkan animasi saat slide aktif */
.slide-item.active {
    display: block;
    animation: slideFadeIn 0.35s ease-out forwards;
}

/* 2. ANIMASI INTERAKSI TOMBOL (HOVER & TRANSISI) */
.btn-primary, 
.btn-outline, 
.btn-dark, 
.btn-slide {
    transition: background-color 0.2s ease, transform 0.15s ease, border-color 0.2s ease;
}

.btn-primary:hover, 
.btn-outline:hover, 
.btn-dark:hover,
.btn-slide:hover:not(:disabled) {
    transform: translateY(-2px);
}

.btn-primary:active, 
.btn-outline:active, 
.btn-dark:active,
.btn-slide:active:not(:disabled) {
    transform: translateY(0);
}

/* 3. ANIMASI KARTU KONTEN SAAT KURSOR MENGARAH */
.card-box, 
.roadmap-card, 
.project-card, 
.org-card, 
.contact-card-item,
.skill-item {
    transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.card-box:hover, 
.roadmap-card:hover, 
.org-card:hover, 
.contact-card-item:hover,
.skill-item:hover {
    border-color: #0ea5e9;
    box-shadow: 0 4px 12px rgba(14, 165, 233, 0.14);
}

/* 4. ANIMASI FOTO PROFIL (EFEK BERCAHAYA / GLOWING PULSE) & GALERI */
@keyframes photoGlowPulse {
    0% {
        box-shadow: 0 0 10px rgba(14, 165, 233, 0.45), 0 0 20px rgba(56, 189, 248, 0.25);
        border-color: #0284c7;
    }
    50% {
        box-shadow: 0 0 22px rgba(14, 165, 233, 0.85), 0 0 35px rgba(56, 189, 248, 0.55), 0 0 50px rgba(2, 132, 199, 0.35);
        border-color: #38bdf8;
    }
    100% {
        box-shadow: 0 0 10px rgba(14, 165, 233, 0.45), 0 0 20px rgba(56, 189, 248, 0.25);
        border-color: #0284c7;
    }
}

.profile-photo {
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
    animation: photoGlowPulse 2.8s ease-in-out infinite;
}

.profile-photo:hover {
    transform: scale(1.03);
    box-shadow: 0 0 26px rgba(14, 165, 233, 0.95), 0 0 45px rgba(56, 189, 248, 0.75);
    border-color: #38bdf8;
}

.hobby-photo-img {
    transition: transform 0.25s ease;
}

.hobby-photo-img:hover {
    transform: scale(1.03);
}

/* 5. ANIMASI MENU NAVIGASI */
#menu li a {
    transition: background-color 0.2s ease, color 0.2s ease;
}

.slide-dot {
    transition: background-color 0.2s ease, width 0.2s ease;
}