/* ==========================================================================
   09 · Galeri ("Potret")
   Referensi: assets/image-reference/9.00 Galeri.png (frame 412 × 917)
   Carousel tak berujung — posisi & skala tiap foto diatur gallery.js lewat
   transform. Foto tengah 2:3 (273 × 409px di frame 412); foto samping 66,5%,
   rata bawah, berjarak 8px.
   ========================================================================== */

.gallery {
  --gallery-gutter: clamp(1rem, 5.83vw, 1.5rem); /* 24px di frame 412 */

  height: var(--frame-h);
  display: flex;
  flex-direction: column;
  padding: 0 var(--gallery-gutter) 2.5rem;
}

/* --- Intro ---------------------------------------------------------------- */

.gallery__title {
  margin-top: 2.6rem;
  font-size: clamp(5rem, 29.08vw, 7.4875rem); /* 119.8px di frame 412 */
  font-weight: 200;
  line-height: 1;
}

.gallery__desc {
  margin-top: clamp(2rem, 13.3svh, 7.63rem); /* 122px di frame 917 */
  font-size: 0.875rem; /* 14px */
  line-height: 1.4286; /* 20px */
}

/* --- Carousel ------------------------------------------------------------- */

.gallery__carousel {
  position: relative;
  flex: 1 1 0;
  min-height: 10rem;
  margin: 1.5rem calc(-1 * var(--gallery-gutter)) 0;
  /* Ukuran foto dihitung dari ukuran area ini (cqw / cqh) */
  container-type: size;
  /* Geser vertikal tetap untuk scroll halaman; geser horizontal untuk carousel */
  touch-action: pan-y;
  user-select: none;
  -webkit-user-select: none;
}

.gallery__track {
  position: relative;
  height: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
}

.gallery__slide {
  /* Tinggi foto tengah: 409px di frame 412 (99,3% lebar), mengecil di layar pendek */
  --slide-h: min(99.3cqw, 100cqh);
  position: absolute;
  bottom: 0;
  left: 50%;
  width: calc(var(--slide-h) * 2 / 3);
  height: var(--slide-h);
  margin-left: calc(var(--slide-h) / -3);
  transform-origin: 50% 100%;
  will-change: transform;
}

.gallery__photo {
  display: block;
  width: 100%;
  height: 100%;
  overflow: hidden;
  cursor: zoom-in;
}

.gallery__slide:not(.is-current) .gallery__photo {
  cursor: pointer;
}

.gallery__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
  -webkit-user-drag: none;
}

/* --- Animasi masuk / keluar ----------------------------------------------- */
/* Foto tengah naik, foto samping masuk dari tepinya. Mode lihat foto memakai
   state "keluar" yang sama untuk judul, deskripsi, dan foto samping. */

.gallery__photo {
  opacity: 0;
  transform: translateY(1.5rem);
  transition:
    opacity var(--dur-exit) var(--ease-snap),
    transform var(--dur-exit) var(--ease-snap);
}

.gallery__slide[data-side="left"] .gallery__photo {
  transform: translateX(-3rem);
}

.gallery__slide[data-side="right"] .gallery__photo {
  transform: translateX(3rem);
}

.gallery.is-active .gallery__photo {
  opacity: 1;
  transform: none;
  transition-duration: var(--dur-enter);
  transition-delay: 900ms;
}

.gallery.is-active .gallery__slide.is-current .gallery__photo {
  transition-delay: 700ms;
}

/* Mode lihat foto: judul & deskripsi turun-hilang, foto samping keluar ke tepi */
.gallery.is-viewing [data-hide-on-view] .split__char,
.gallery.is-viewing [data-hide-on-view] .split__line {
  opacity: 0;
  transform: translateY(0.6em);
  transition-duration: var(--dur-exit);
  transition-delay: 0ms;
}

.gallery.is-viewing .gallery__slide:not(.is-current) .gallery__photo {
  opacity: 0;
  transition-duration: var(--dur-exit);
  transition-delay: 0ms;
}

.gallery.is-viewing .gallery__slide[data-side="left"] .gallery__photo {
  transform: translateX(-3rem);
}

.gallery.is-viewing .gallery__slide[data-side="right"] .gallery__photo {
  transform: translateX(3rem);
}

/* Foto tengah "pindah" ke viewer selama mode lihat (sampai animasi tutup selesai) */
.gallery__slide.is-lifted {
  visibility: hidden;
}

/* --- Viewer (mode lihat foto) --------------------------------------------- */

.gallery__viewer {
  position: absolute;
  inset: 0;
  z-index: 5;
}

.gallery__viewer-frame {
  position: absolute;
  /* Tidak memotong: foto yang di-zoom boleh membesar melewati bingkainya
     (crop 2:3 → foto utuh saat membuka tetap dari object-fit di <img>). */
  overflow: visible;
  touch-action: none;
  cursor: grab;
}

.gallery__viewer-frame:active {
  cursor: grabbing;
}

.gallery__viewer-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform-origin: 0 0;
  will-change: transform;
  user-select: none;
  -webkit-user-drag: none;
}

.gallery__close {
  position: absolute;
  top: calc(1rem + env(safe-area-inset-top, 0rem));
  right: 1rem;
  display: grid;
  place-items: center;
  width: 3.25rem;
  height: 3.25rem;
  background: var(--color-accent);
  color: var(--color-ink-strong);
  border: var(--border);
  box-shadow: var(--shadow-hard-sm);
  opacity: 0;
  transform: scale(0.6) rotate(-12deg);
  transition:
    opacity var(--dur-exit) var(--ease-snap),
    transform var(--dur-exit) var(--ease-snap),
    box-shadow var(--dur-fast) var(--ease-snap);
}

.gallery__viewer.is-open .gallery__close {
  opacity: 1;
  transform: none;
  transition-duration: var(--dur-base);
  transition-timing-function: var(--ease-overshoot);
  transition-delay: 250ms;
}

.gallery__viewer.is-open .gallery__close:active {
  transform: translate(var(--border-w), var(--border-w));
  box-shadow: 0 0 0 var(--color-ink-strong);
  transition-delay: 0ms;
}

.gallery__close .icon {
  font-size: 1.75rem;
}

@media (prefers-reduced-motion: reduce) {
  .gallery__photo,
  .gallery__close {
    transition-duration: 1ms !important;
    transition-delay: 0ms !important;
  }
}