/* ============================================
   section-6-galeri-pengantin.css — Section 07_Galeri_Pengantin
   Based on Figma frame: 07_Galeri_Pengantin (393 x 750)
   ============================================ */

/* --- Section Wrapper --- */
#section-6-galeri-pengantin {
  position: relative;
  width: 100%;
  min-height: auto;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  overflow-x: hidden;
  overflow-y: visible;
}

/* --- Scale Box Container --- */
.section-6-scale-box {
  position: relative;
  display: flex;
  justify-content: center;
}

/* --- Mobile Preview Container --- */
.section-6-wrapper {
  position: relative;
  width: var(--s6-width);
  height: var(--s6-height);
  background-color: var(--s6-bg-color);
  overflow: hidden;
  flex-shrink: 0;
  transform-origin: top center;
}

/* ============================================
   ELEMENTS
   ============================================ */

/* Global image reset — override per element as needed */
#section-6-galeri-pengantin img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

/* -----------------------------------------------
   Icon Atas 6
   Figma: x=94, y=45, w=205, h=68
----------------------------------------------- */
.s6-icon-atas {
  position: absolute;
  left: var(--s6-icon-atas-x);
  top: var(--s6-icon-atas-y);
  width: var(--s6-icon-atas-width);
  height: var(--s6-icon-atas-height);
  opacity: var(--s6-icon-atas-opacity);
  z-index: 2;
  pointer-events: none;
}

/* -----------------------------------------------
   Title: Galeri Pengantin
   Figma: x=114, y=105, w=165, h=30 | Glass Antiqua 23px | #a77e44
----------------------------------------------- */
.s6-title {
  position: absolute;
  left: var(--s6-title-x);
  top: var(--s6-title-y);
  width: var(--s6-title-width);
  height: var(--s6-title-height);
  font-family: var(--s6-title-font-family);
  font-size: var(--s6-title-font-size);
  color: var(--s6-title-color);
  line-height: var(--s6-title-line-height);
  letter-spacing: var(--s6-title-letter-spacing);
  opacity: var(--s6-title-opacity);
  z-index: 5;
  text-align: center;
  pointer-events: none;
  white-space: nowrap;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* -----------------------------------------------
   Gambar Utama (foto aktif)
   Figma area: x=93, y=183, w=207, h=207
   z-index LEBIH TINGGI dari frame utama agar tidak tertutup
----------------------------------------------- */
.s6-main-image {
  position: absolute;
  left: var(--s6-main-image-x);
  top: var(--s6-main-image-y);
  width: var(--s6-main-image-width);
  height: var(--s6-main-image-height);
  z-index: 4;
  overflow: hidden;
  filter: drop-shadow(1 10px 20px rgba(0, 0, 0, 0.22));
}

.s6-main-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: opacity 0.3s ease;
}

.s6-main-image img.is-fading {
  opacity: 0;
}

/* -----------------------------------------------
   Frame Utama — border dekoratif di ATAS gambar utama
   Figma: x=72, y=161, w=250, h=250
   z-index = 2 (di bawah gambar, pointer-events: none)
----------------------------------------------- */
.s6-frame-utama {
  position: absolute;
  left: var(--s6-frame-utama-x);
  top: var(--s6-frame-utama-y);
  width: var(--s6-frame-utama-width);
  height: var(--s6-frame-utama-height);
  opacity: var(--s6-frame-utama-opacity);
  z-index: 2;
  pointer-events: none;
}

.s6-frame-utama img {
  object-fit: contain;
}

/* -----------------------------------------------
   Frame Preview — border dekoratif area thumbnail
   Figma: x=67, y=459, w=257, h=92
   z-index = 4, pointer-events: none
----------------------------------------------- */
.s6-frame-preview {
  position: absolute;
  left: var(--s6-frame-preview-x);
  top: var(--s6-frame-preview-y);
  width: var(--s6-frame-preview-width);
  height: var(--s6-frame-preview-height);
  opacity: var(--s6-frame-preview-opacity);
  z-index: 4;
  pointer-events: none;
}

.s6-frame-preview img {
  object-fit: contain;
}

/* -----------------------------------------------
   Preview Track — wrapper 3 slot thumbnail
   Sama posisi dengan Frame_Preview: x=67, y=459, w=257, h=92
   z-index = 5 (di atas frame preview agar bisa diklik)
----------------------------------------------- */
.s6-preview-track {
  position: absolute;
  left: var(--s6-frame-preview-x);
  top: var(--s6-frame-preview-y);
  width: var(--s6-frame-preview-width);
  height: var(--s6-frame-preview-height);
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 28px;
  /* beri ruang agar tidak overlap tombol kiri/kanan */
  box-sizing: border-box;
}

/* -----------------------------------------------
   Thumbnail — 3 slot: prev, active, next
   Default size: 61x61 (mengikuti Figma Gambar_2/3_Preview)
----------------------------------------------- */
.s6-thumbnail {
  flex-shrink: 0;
  width: 61px;
  height: 61px;
  border: none;
  padding: 0;
  background: transparent;
  overflow: hidden;
  cursor: pointer;
  transition: transform 0.35s ease, box-shadow 0.35s ease, width 0.35s ease, height 0.35s ease;
  border-radius: 4px;
  position: relative;
}

.s6-thumbnail img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  pointer-events: none;
}

/* Thumbnail aktif — lebih besar (mengikuti Figma Gambar_1_Preview: 73x72) */
.s6-thumbnail.is-active {
  width: 73px;
  height: 72px;
  transform: scale(1.08);
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.25);
  z-index: 6;
}

/* -----------------------------------------------
   Tombol Kiri
   Figma: x=89, y=493, w=22, h=22
   z-index = 6 (di atas preview track)
----------------------------------------------- */
.s6-button-left {
  position: absolute;
  left: var(--s6-button-left-x);
  top: var(--s6-button-left-y);
  width: var(--s6-button-left-width);
  height: var(--s6-button-left-height);
  opacity: var(--s6-button-left-opacity);
  z-index: 6;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.s6-button-left img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  transform: scaleX(-1);
  /* flip horizontal untuk tombol kiri */
}

.s6-button-left:hover {
  opacity: 0.7;
  transform: scale(1.1) !important;
}

/* -----------------------------------------------
   Tombol Kanan
   Figma: x=305, y=493, w=21, h=22
   z-index = 6
----------------------------------------------- */
.s6-button-right {
  position: absolute;
  left: var(--s6-button-right-x);
  top: var(--s6-button-right-y);
  width: var(--s6-button-right-width);
  height: var(--s6-button-right-height);
  opacity: var(--s6-button-right-opacity);
  z-index: 6;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.s6-button-right img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.s6-button-right:hover {
  opacity: 0.7;
  transform: scale(1.1) !important;
}

/* -----------------------------------------------
   Icon Bawah 6
   Figma: x=102, y=577, w=190, h=16
----------------------------------------------- */
.s6-icon-bawah {
  position: absolute;
  left: var(--s6-icon-bawah-x);
  top: var(--s6-icon-bawah-y);
  width: var(--s6-icon-bawah-width);
  height: var(--s6-icon-bawah-height);
  opacity: var(--s6-icon-bawah-opacity);
  z-index: 2;
  pointer-events: none;
}

/* =============================================
   ENTRANCE ANIMATIONS — Section 6 Raise Up
   ============================================= */

@keyframes s6RaiseUp {
  0% {
    opacity: 0;
    visibility: visible;
    transform: translateY(var(--s6-reveal-distance));
  }

  1% {
    visibility: visible;
  }

  100% {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }
}

/* State awal sebelum animasi (sembunyikan elemen sebelum animasinya berjalan) */
.s6-icon-atas,
.s6-title,
.s6-button-left,
.s6-button-right,
.s6-icon-bawah {
  opacity: 0;
  visibility: hidden;
}

/* Animasi hanya berjalan saat section sudah visible (kelas .is-visible ditambahkan oleh JS) */
#section-6-galeri-pengantin.is-visible .s6-icon-atas {
  animation: s6RaiseUp var(--s6-reveal-duration) var(--s6-reveal-easing) var(--s6-icon-atas-anim-delay) forwards;
}

#section-6-galeri-pengantin.is-visible .s6-title {
  animation: s6RaiseUp var(--s6-reveal-duration) var(--s6-reveal-easing) var(--s6-title-anim-delay) forwards;
}

#section-6-galeri-pengantin.is-visible .s6-button-left {
  animation: s6RaiseUp var(--s6-reveal-duration) var(--s6-reveal-easing) var(--s6-button-left-anim-delay) forwards;
}

#section-6-galeri-pengantin.is-visible .s6-button-right {
  animation: s6RaiseUp var(--s6-reveal-duration) var(--s6-reveal-easing) var(--s6-button-right-anim-delay) forwards;
}

#section-6-galeri-pengantin.is-visible .s6-icon-bawah {
  animation: s6RaiseUp var(--s6-reveal-duration) var(--s6-reveal-easing) var(--s6-icon-bawah-anim-delay) forwards;
}

/* --- Reduced Motion Support --- */
@media (prefers-reduced-motion: reduce) {

  #section-6-galeri-pengantin *,
  .section-6-galeri-pengantin * {
    animation: none !important;
    transition: none !important;
    opacity: 1 !important;
    visibility: visible !important;
  }

  #section-6-galeri-pengantin .s6-icon-atas,
  #section-6-galeri-pengantin .s6-title,
  #section-6-galeri-pengantin .s6-button-left,
  #section-6-galeri-pengantin .s6-button-right,
  #section-6-galeri-pengantin .s6-icon-bawah {
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
  }
}