/* ============================================
   section-2-pembuka.css — Section 03_Pembuka
   Based on Figma frame: 03_Pembuka (393 x 557)
   Updated from Figma MCP data
   ============================================ */

/* --- Section Wrapper --- */
#section-2-pembuka {
  position: relative;
  width: 100%;
  min-height: auto;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  background-color: var(--s2-bg-color);
  overflow-x: hidden;
  overflow-y: visible;
  touch-action: pan-y;
}

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

/* --- Mobile Preview Container (393 x 557) — mengikuti frame Figma terbaru --- */
.section-2-wrapper {
  position: relative;
  width: var(--s2-width);
  height: var(--s2-height);
  background-color: var(--s2-bg-color);
  overflow: hidden;
  flex-shrink: 0;
  transform-origin: top center;
}

/* ---- Layer: Bg_2 (x=27, y=200, w=339, h=495) ---- */
.s2-bg {
  position: absolute;
  left: var(--s2-bg-x);
  top: var(--s2-bg-y);
  width: var(--s2-bg-width);
  height: var(--s2-bg-height);
  opacity: 1;
  animation: none !important;
  z-index: var(--s2-bg-z);
  transform: rotate(var(--s2-bg-rotate));
  pointer-events: none;
}

.s2-bg img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

/* ---- Layer: pengantin_2 (x=72, y=393, w=248, h=251) ---- */
.s2-pengantin {
  position: absolute;
  left: var(--s2-pengantin-x);
  top: var(--s2-pengantin-y);
  width: var(--s2-pengantin-width);
  height: var(--s2-pengantin-height);
  opacity: var(--s2-pengantin-opacity);
  z-index: var(--s2-pengantin-z);
  --local-rotate: var(--s2-pengantin-rotate, 0deg);
  transform: rotate(var(--local-rotate));
  pointer-events: none;
}

.s2-pengantin img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

/* ---- Layer: icon_atas_2 (x=149, y=216, w=85, h=70) ---- */
.s2-icon-atas {
  position: absolute;
  left: var(--s2-icon-atas-x);
  top: var(--s2-icon-atas-y);
  width: var(--s2-icon-atas-width);
  height: var(--s2-icon-atas-height);
  opacity: var(--s2-icon-atas-opacity);
  z-index: var(--s2-icon-atas-z);
  --local-rotate: var(--s2-icon-atas-rotate, 0deg);
  transform: rotate(var(--local-rotate));
  pointer-events: none;
  object-fit: contain;
}

/* ---- Layer: icon_tengah_2 (x=157, y=293, w=78, h=14) ---- */
.s2-icon-tengah {
  position: absolute;
  left: var(--s2-icon-tengah-x);
  top: var(--s2-icon-tengah-y);
  width: var(--s2-icon-tengah-width);
  height: var(--s2-icon-tengah-height);
  opacity: var(--s2-icon-tengah-opacity);
  z-index: var(--s2-icon-tengah-z);
  --local-rotate: var(--s2-icon-tengah-rotate, 0deg);
  transform: rotate(var(--local-rotate));
  pointer-events: none;
  object-fit: contain;
}

/* ---- Layer: element_kiri_2 (x=28, y=216, w=75, h=154) ---- */
.s2-element-kiri {
  position: absolute;
  left: var(--s2-element-kiri-x);
  top: var(--s2-element-kiri-y);
  width: var(--s2-element-kiri-width);
  height: var(--s2-element-kiri-height);
  opacity: var(--s2-element-kiri-opacity);
  z-index: var(--s2-element-kiri-z);
  --local-rotate: var(--s2-element-kiri-rotate, 0deg);
  transform: rotate(var(--local-rotate));
  pointer-events: none;
  object-fit: contain;
}

/* ---- Layer: element_kanan_2 (x=290, y=511, w=98, h=140) ---- */
.s2-element-kanan {
  position: absolute;
  left: var(--s2-element-kanan-x);
  top: var(--s2-element-kanan-y);
  width: var(--s2-element-kanan-width);
  height: var(--s2-element-kanan-height);
  opacity: var(--s2-element-kanan-opacity);
  z-index: var(--s2-element-kanan-z);
  --local-rotate: var(--s2-element-kanan-rotate, 0deg);
  transform: rotate(var(--local-rotate));
  pointer-events: none;
  object-fit: contain;
}

/* ---- Layer: teks_pembuka (x=84, y=310, w=226, h=51) ---- */
/* "Dan segala sesuatu Kami ciptakan berpasang-pasangan..." */
/* Font: Cormorant Garamond 13px, #ffffff, center */
.s2-teks-pembuka {
  position: absolute;
  left: var(--s2-teks-pembuka-x);
  top: var(--s2-teks-pembuka-y);
  width: var(--s2-teks-pembuka-width);
  height: var(--s2-teks-pembuka-height);
  font-family: 'Cormorant Garamond', serif;
  font-size: var(--s2-teks-pembuka-font-size);
  font-weight: 400;
  font-style: italic;
  color: var(--s2-teks-pembuka-color);
  text-align: center;
  line-height: var(--s2-teks-pembuka-line-height);
  letter-spacing: var(--s2-teks-pembuka-letter-spacing);
  opacity: var(--s2-teks-pembuka-opacity);
  z-index: var(--s2-teks-pembuka-z);
  --local-rotate: var(--s2-teks-pembuka-rotate, 0deg);
  transform: rotate(var(--local-rotate));
  pointer-events: none;
  user-select: none;
}

/* ---- Layer: teks_pembuka_2 (x=147, y=365, w=100, h=26) ---- */
/* "QS. Az-Zariyat 49" */
/* Font: Cormorant Garamond 11px, #ffffff, center */
.s2-teks-pembuka-2 {
  position: absolute;
  left: var(--s2-teks-pembuka-2-x);
  top: var(--s2-teks-pembuka-2-y);
  width: var(--s2-teks-pembuka-2-width);
  height: var(--s2-teks-pembuka-2-height);
  font-family: 'Cormorant Garamond', serif;
  font-size: var(--s2-teks-pembuka-2-font-size);
  font-weight: 400;
  color: var(--s2-teks-pembuka-2-color);
  text-align: center;
  line-height: var(--s2-teks-pembuka-2-line-height);
  letter-spacing: var(--s2-teks-pembuka-2-letter-spacing);
  opacity: var(--s2-teks-pembuka-2-opacity);
  z-index: var(--s2-teks-pembuka-2-z);
  --local-rotate: var(--s2-teks-pembuka-2-rotate, 0deg);
  transform: rotate(var(--local-rotate));
  pointer-events: none;
  user-select: none;
}


/* =============================================
   ENTRANCE ANIMATIONS — Section 2 Fade Up
   ============================================= */

@keyframes s2SlideFromLeft {
  0% {
    opacity: 0;
    visibility: visible;
    transform: translateX(-48px) rotate(var(--local-rotate, 0deg));
  }

  1% {
    visibility: visible;
  }

  100% {
    opacity: 1;
    visibility: visible;
    transform: translateX(0) rotate(var(--local-rotate, 0deg));
  }
}

@keyframes s2SlideFromRight {
  0% {
    opacity: 0;
    visibility: visible;
    transform: translateX(48px) rotate(var(--local-rotate, 0deg));
  }

  1% {
    visibility: visible;
  }

  100% {
    opacity: 1;
    visibility: visible;
    transform: translateX(0) rotate(var(--local-rotate, 0deg));
  }
}

@keyframes s2FadeUp {
  0% {
    opacity: 0;
    visibility: visible;
    transform: translateY(24px) rotate(var(--local-rotate, 0deg));
  }

  1% {
    visibility: visible;
  }

  100% {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) rotate(var(--local-rotate, 0deg));
  }
}

/* --- Animasi masuk: semua elemen section 2 --- */
/* Animasi hanya berjalan saat section sudah visible (kelas .is-visible ditambahkan oleh JS) */

#section-2-pembuka.is-visible .s2-element-kiri {
  animation: s2SlideFromLeft 1.4s cubic-bezier(0.22, 1, 0.36, 1) 0.1s forwards;
}

#section-2-pembuka.is-visible .s2-element-kanan {
  animation: s2SlideFromRight 1.4s cubic-bezier(0.22, 1, 0.36, 1) 0.35s forwards;
}

#section-2-pembuka.is-visible .s2-pengantin {
  animation: s2FadeUp 1.4s cubic-bezier(0.22, 1, 0.36, 1) 0.6s forwards;
}

#section-2-pembuka.is-visible .s2-teks-pembuka-2 {
  animation: s2FadeUp 1.4s cubic-bezier(0.22, 1, 0.36, 1) 0.85s forwards;
}

#section-2-pembuka.is-visible .s2-teks-pembuka {
  animation: s2FadeUp 1.4s cubic-bezier(0.22, 1, 0.36, 1) 1.1s forwards;
}

#section-2-pembuka.is-visible .s2-icon-tengah {
  animation: s2FadeUp 1.4s cubic-bezier(0.22, 1, 0.36, 1) 1.35s forwards;
}

#section-2-pembuka.is-visible .s2-icon-atas {
  animation: s2FadeUp 1.4s cubic-bezier(0.22, 1, 0.36, 1) 1.6s forwards;
}

/* State awal sebelum animasi (sembunyikan elemen sebelum animasinya berjalan) */
.s2-element-kiri,
.s2-element-kanan,
.s2-pengantin,
.s2-teks-pembuka-2,
.s2-teks-pembuka,
.s2-icon-tengah,
.s2-icon-atas {
  opacity: 0;
  visibility: hidden;
}

/* =============================================
   RESPONSIVE SCALING
   ============================================= */

/* --- Reduced Motion Support --- */
@media (prefers-reduced-motion: reduce) {
  #section-2-pembuka *,
  .section-2-pembuka * {
    animation: none !important;
    transition: none !important;
    opacity: 1 !important;
    visibility: visible !important;
  }
}