/* =========================================================
   STYLE.CSS
   Semua CSS tambahan (di luar utility class Tailwind) 
   untuk website Portfolio Ghevyra Nur Fadilah ada di sini.
   Tailwind CSS tetap dipakai lewat CDN di index.html,
   jadi file ini hanya berisi efek-efek khusus:
   - Kartu kaca (glassmorphism)
   - Bentuk melayang (floating shape)
   - Animasi muncul saat scroll (reveal)
   - Grid gambar gaya "masonry" di section Gallery
   - Titik penanda menu aktif di navbar
   ========================================================= */

/* ---------- KARTU KACA (GLASSMORPHISM) ---------- */
/* Dipakai pada badge "Available for Projects" di Hero Section */
.glass-card {
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.4);
    box-shadow: 0px 12px 32px rgba(232, 143, 169, 0.08);
}

/* ---------- BENTUK MELAYANG DI BACKGROUND HERO ---------- */
.floating-shape {
    animation: float 20s infinite linear;
}

@keyframes float {
    0% { transform: translate(0, 0) rotate(0deg); }
    33% { transform: translate(100px, 50px) rotate(120deg); }
    66% { transform: translate(-50px, 100px) rotate(240deg); }
    100% { transform: translate(0, 0) rotate(360deg); }
}

/* ---------- ANIMASI MUNCUL SAAT DI-SCROLL ---------- */
/* Elemen dengan class "reveal" akan tersembunyi dulu, */
/* lalu muncul perlahan (fade + naik) saat terlihat di layar. */
/* Class "active" ditambahkan otomatis lewat script.js */
.reveal {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.8s ease-out;
}

.reveal.active {
    opacity: 1;
    transform: translateY(0);
}

/* ---------- GRID GAMBAR GAYA MASONRY (SECTION GALLERY) ---------- */
.masonry-grid {
    columns: 1;
    gap: 1.5rem;
}
@media (min-width: 768px) {
    .masonry-grid { columns: 2; }
}

/* ---------- TITIK PENANDA MENU AKTIF DI NAVBAR ---------- */
.nav-active::after {
    content: '';
    position: absolute;
    bottom: -8px;
    left: 50%;
    transform: translateX(-50%);
    width: 4px;
    height: 4px;
    background-color: #785462;
    border-radius: 9999px;
}