/* src/css/galeri.css */

/* Mendaftarkan properti agar bisa dianimasikan */
@property --p {
  syntax: '<number>';
  initial-value: 0;
  inherits: true;
}

@property --v {
  syntax: '<number>';
  initial-value: 0;
  inherits: true;
}

/* Style untuk Section Utama Galeri */
#galeri {
    display: flex;
    flex-direction: column;
    align-items: center;
    background-image: url('../assets/images/sample/bg-galeri.avif');
    background-size: cover;
    background-position: center;
    position: relative;
    padding: 2rem 1rem 8rem 1rem; /* Padding atas dikurangi */
    margin: 4rem 0;
    border-radius: 20px;
    box-shadow: 0 10px 30px var(--shadow-color);
}

.galeri-header {
    text-align: center;
    margin-bottom: 3rem; /* Jarak antara teks header dan galeri foto */
    margin-top: 6rem;
}

/* Wadah utama untuk galeri tumpukan foto */
.image-stack-gallery {
  --p: var(--k, 0);
  --abs-p: abs(var(--k, 0) - var(--p, 0));
  --end: clamp(0, var(--abs-p) - 1, 1);
  --dir: calc((1 - 2 * var(--end)) * sign(var(--k, 0) - var(--p, 0)));
  --v: var(--k, 0);
  --abs-v: abs(var(--v, 0) - var(--p, 0));
  --prg: calc(var(--abs-v) / (1 - var(--end) + var(--end) * (var(--n, 1) - 1)));

  display: grid;
  place-items: center;
  transition: --p 0s 0.8s, --v 0.8s;
  touch-action: pan-y;
  min-height: 350px; /* Memberi ruang agar tidak lompat saat loading */
}

/* Setiap kartu gambar di dalam tumpukan */
.image-stack-gallery article {
  --abs-top: abs(var(--k, 0) - var(--i, 0));
  --not-top: min(1, var(--abs-top));
  --fwd: calc(0.5 * (1 + var(--dir, 0)));
  --val-mov: ((1 - var(--fwd)) * var(--p, 0) + var(--fwd) * var(--k, 0) - var(--i, 0));
  --abs-mov: abs(var(--val-mov));
  --not-mov: min(1, var(--abs-mov));
  --mov: calc(1 - var(--not-mov));
  
  grid-area: 1 / 1;
  z-index: mod(calc(var(--n, 0) - 1 + var(--i, 0) - var(--k, 0)), var(--n, 0));
  transition: z-index 0.8s ease-out; /* Transisi z-index yang mulus */
}

/* Styling untuk tag gambar */
.image-stack-gallery img {
  --sin: sin(var(--prg, 0) * 0.5turn);
  
  grid-area: 1 / 1;
  width: clamp(280px, 70vw, 350px);
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 0.75em;
  box-shadow: 0 4px 15px rgba(0,0,0,0.2);
  
  /* ▼▼▼ UBAH BARIS INI ▼▼▼ */
  translate: calc(var(--dir, -1) * 150% * var(--mov) * sqrt(var(--sin)));
  rotate: calc((1 - var(--sin)) * var(--a));
}

/* Wadah untuk kontrol di bawah galeri (counter & teks) */
.gallery-controls {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem; /* Jarak antara counter dan teks petunjuk */
    margin-top: 1.5rem; /* Jarak dari galeri di atasnya */
}

/* Counter (misal: "1 / 10") */
.gallery-counter {
    color: var(--color-text-light-muted);
    font-size: 0.9rem;
    font-family: 'Poppins', sans-serif;
}

/* Wadah untuk border teks petunjuk */
.hint-wrapper {
    border: 3px solid var(--main-text-color);
    padding: 0.5rem 1rem;
    border-radius: 2rem;
}

/* Teks petunjuk (yang berkedip) */
.hint-wrapper span {
    font-size: 0.8rem;
    color: var(--color-text-light-muted);
    font-family: 'Poppins', sans-serif;
    animation: blink-animation 2s infinite ease-in-out;
}

/* Animasi untuk efek kedip perlahan */
@keyframes blink-animation {
    0%, 100% { opacity: 0.4; }
    50% { opacity: 1; }
}

/* STYLE UNTUK POPUP GAMBAR */
.gallery-popup {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.85);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1050;
    cursor: pointer;
    animation: fadeIn 0.3s ease;
    -webkit-tap-highlight-color: transparent;
}

.gallery-popup.closing {
    animation: fadeOut 0.3s ease forwards;
}

.gallery-popup img {
    max-width: 90%;
    max-height: 90%;
    object-fit: contain;
    border-radius: 0.5em;
    box-shadow: 0 0 40px rgba(255, 255, 255, 0.15);
    user-select: none;
}

.gallery-popup:focus,
.gallery-popup img:focus {
    outline: none;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes fadeOut {
    from { opacity: 1; }
    to { opacity: 0; }
}

.see-all-photos-btn {
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: all 0.5s ease;
    margin-top: 1rem;
    padding: 0.5rem 1rem;
    border: 1px solid var(--main-text-color);
    background: transparent;
    color: var(--main-text-color);
    border-radius: 20px;
    cursor: pointer;
}
.see-all-photos-btn.visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
} /* Kurung kurawal tambahan sudah dihapus dari sini */

/* Style untuk Ornamen Galeri */
.gallery-ornament-bottom {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: auto;
    z-index: 1;
}

/* Ornamen Atas (BARU) */
.gallery-ornament-top {
    position: absolute;
    top: 0;
    left: 0; /* Ubah ke 0 */
    width: 100%; /* Ubah menjadi 100% */
    height: auto;
    z-index: 1;
    /* Hapus 'transform' dari sini */
}

.gallery-modal-overlay.visible {
    display: flex;
}