/* Smooth scrolling */
html {
    scroll-behavior: smooth;
}

/* Navigation transition */
header {
    transition: all 0.3s ease;
}

/* Modal animation */
#portfolioModal {
    opacity: 0;
    transition: opacity 0.3s ease;
}

#portfolioModal.show {
    opacity: 1;
}

/* Progress bar animation */
.progress-bar {
    transition: width 1s ease-in-out;
}

/* Button hover effects */
.btn-primary {
    transition: all 0.3s ease;
}

.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(79, 70, 229, 0.3);
}

/* Form input focus effects */
.input-field:focus {
    box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.2);
}

/* Back to top button */
#backToTop.visible {
    opacity: 1;
    visibility: visible;
}

/* CSS BARU UNTUK ISOTOPE */

/* Transisi untuk item Isotope */
.portfolio-item {
    transition: opacity 0.4s ease;
}

/* Kelas ini akan ditambahkan oleh script kita saat grid siap */
#portfolio-grid.is-loaded {
    opacity: 1 !important;
    transition: opacity 0.5s ease;
}