/* ============================================
   section-3-info-mempelai.css — Section 04_Info_Mempelai
   Based on Figma frame: 04_Info_Mempelai (393 x 1200)
   Generated from Figma MCP data
   ============================================ */

/* --- Section Wrapper --- */
#section-3-info-mempelai {
  position: relative;
  width: 100%;
  min-height: auto;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  overflow-x: hidden;
  overflow-y: visible;
  touch-action: pan-y;
}

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

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

/* ---- Layer: Bg_3 (x=0, y=0, w=393, h=1200) ---- */
.s3-bg {
  position: absolute;
  left: var(--s3-bg-x);
  top: var(--s3-bg-y);
  width: var(--s3-bg-width);
  height: var(--s3-bg-height);
  opacity: var(--s3-bg-opacity);
  z-index: var(--s3-bg-z);
  transform: rotate(var(--s3-bg-rotate));
  pointer-events: none;
}

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

/* ---- Layer: mepelai_cewk (x=45, y=228, w=303, h=303) ---- */
.s3-mempelai-cewk {
  position: absolute;
  left: var(--s3-mempelai-cewk-x);
  top: var(--s3-mempelai-cewk-y);
  width: var(--s3-mempelai-cewk-width);
  height: var(--s3-mempelai-cewk-height);
  opacity: var(--s3-mempelai-cewk-opacity);
  z-index: var(--s3-mempelai-cewk-z);
  transform: rotate(var(--s3-mempelai-cewk-rotate)) scale(var(--s3-mempelai-cewk-scale, 1));
  transform-origin: center;
  pointer-events: none;
}

.s3-mempelai-cewk img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ---- Layer: mepelai_cowk (x=45, y=690, w=303, h=303) ---- */
.s3-mempelai-cowk {
  position: absolute;
  left: var(--s3-mempelai-cowk-x);
  top: var(--s3-mempelai-cowk-y);
  width: var(--s3-mempelai-cowk-width);
  height: var(--s3-mempelai-cowk-height);
  opacity: var(--s3-mempelai-cowk-opacity);
  z-index: var(--s3-mempelai-cowk-z);
  transform: rotate(var(--s3-mempelai-cowk-rotate)) scale(var(--s3-mempelai-cowk-scale, 1));
  transform-origin: center;
  pointer-events: none;
}

.s3-mempelai-cowk img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ---- Layer: teks_pembuka (x=84, y=113, w=226, h=66) ---- */
/* "Dengan penuh sukacita mengundang Anda..." */
/* Font: Cormorant Garamond 16px, #b69b62, center */
.s3-teks-pembuka {
  position: absolute;
  left: 50%;
  top: var(--s3-teks-pembuka-y);
  width: var(--s3-teks-pembuka-width);
  height: var(--s3-teks-pembuka-height);
  font-family: 'Cormorant Garamond', serif;
  font-size: var(--s3-teks-pembuka-font-size);
  font-weight: var(--s3-teks-pembuka-font-weight);
  font-style: italic;
  color: var(--s3-teks-pembuka-color);
  text-align: center;
  line-height: var(--s3-teks-pembuka-line-height);
  letter-spacing: var(--s3-teks-pembuka-letter-spacing);
  opacity: var(--s3-teks-pembuka-opacity);
  z-index: var(--s3-teks-pembuka-z);
  transform: translateX(-50%) rotate(var(--s3-teks-pembuka-rotate));
  pointer-events: none;
  user-select: none;
  white-space: normal;
}

/* ---- Layer: Umi (x=84, y=57, w=90, h=42) ---- */
/* Font: Dancing Script 36px Bold, #b69b62, center */
.s3-name-umi {
  position: absolute;
  left: var(--s3-name-umi-center-x);
  top: var(--s3-name-umi-y);
  width: var(--s3-name-umi-width);
  height: var(--s3-name-umi-height);
  font-family: 'Dancing Script', cursive;
  font-size: var(--s3-name-umi-font-size);
  font-weight: var(--s3-name-umi-font-weight);
  color: var(--s3-name-umi-color);
  text-align: center;
  line-height: var(--s3-name-umi-line-height);
  letter-spacing: var(--s3-name-umi-letter-spacing);
  opacity: var(--s3-name-umi-opacity);
  z-index: var(--s3-name-umi-z);
  transform: translateX(-50%) rotate(var(--s3-name-umi-rotate));
  pointer-events: none;
  user-select: none;
  white-space: nowrap;
}

/* ---- Layer: & (x=163, y=57, w=60, h=42) ---- */
/* Font: Dancing Script 32px Bold, #b69b62, center */
.s3-ampersand {
  position: absolute;
  left: var(--s3-ampersand-center-x);
  top: var(--s3-ampersand-y);
  width: var(--s3-ampersand-width);
  height: var(--s3-ampersand-height);
  font-family: 'Dancing Script', cursive;
  font-size: var(--s3-ampersand-font-size);
  font-weight: var(--s3-ampersand-font-weight);
  color: var(--s3-ampersand-color);
  text-align: center;
  line-height: var(--s3-ampersand-line-height);
  letter-spacing: var(--s3-ampersand-letter-spacing);
  opacity: var(--s3-ampersand-opacity);
  z-index: var(--s3-ampersand-z);
  transform: translateX(-50%) rotate(var(--s3-ampersand-rotate));
  pointer-events: none;
  user-select: none;
}

/* ---- Layer: Ilham (x=214, y=57, w=96, h=42) ---- */
/* Font: Dancing Script 36px Bold, #b69b62, center */
.s3-name-ilham {
  position: absolute;
  left: var(--s3-name-ilham-center-x);
  top: var(--s3-name-ilham-y);
  width: var(--s3-name-ilham-width);
  height: var(--s3-name-ilham-height);
  font-family: 'Dancing Script', cursive;
  font-size: var(--s3-name-ilham-font-size);
  font-weight: var(--s3-name-ilham-font-weight);
  color: var(--s3-name-ilham-color);
  text-align: center;
  line-height: var(--s3-name-ilham-line-height);
  letter-spacing: var(--s3-name-ilham-letter-spacing);
  opacity: var(--s3-name-ilham-opacity);
  z-index: var(--s3-name-ilham-z);
  transform: translateX(-50%) rotate(var(--s3-name-ilham-rotate));
  pointer-events: none;
  user-select: none;
  white-space: nowrap;
}

/* ---- Layer: teks_Umi_Nurul_Fajriyanti (x=116, y=525, w=162, h=24) ---- */
/* Font: Glass Antiqua 20px, #b69b62, center */
.s3-fullname-cewk {
  position: absolute;
  left: var(--s3-fullname-cewk-center-x);
  top: var(--s3-fullname-cewk-y);
  width: var(--s3-fullname-cewk-width);
  height: var(--s3-fullname-cewk-height);
  font-family: 'Glass Antiqua', serif;
  font-size: var(--s3-fullname-cewk-font-size);
  font-weight: var(--s3-fullname-cewk-font-weight);
  color: var(--s3-fullname-cewk-color);
  text-align: center;
  line-height: var(--s3-fullname-cewk-line-height);
  letter-spacing: var(--s3-fullname-cewk-letter-spacing);
  opacity: var(--s3-fullname-cewk-opacity);
  z-index: var(--s3-fullname-cewk-z);
  transform: translateX(-50%) rotate(var(--s3-fullname-cewk-rotate));
  pointer-events: none;
  user-select: none;
  white-space: nowrap;
}

/* ---- Layer: teks_info_cewk (x=82, y=549, w=230, h=41) ---- */
/* Font: Cormorant Garamond 16px, #b69b62, center */
.s3-info-cewk {
  position: absolute;
  left: 50%;
  top: var(--s3-info-cewk-y);
  width: var(--s3-info-cewk-width);
  height: var(--s3-info-cewk-height);
  font-family: 'Cormorant Garamond', serif;
  font-size: var(--s3-info-cewk-font-size);
  font-weight: var(--s3-info-cewk-font-weight);
  color: var(--s3-info-cewk-color);
  text-align: center;
  line-height: var(--s3-info-cewk-line-height);
  letter-spacing: var(--s3-info-cewk-letter-spacing);
  opacity: var(--s3-info-cewk-opacity);
  z-index: var(--s3-info-cewk-z);
  transform: translateX(-50%) rotate(var(--s3-info-cewk-rotate));
  pointer-events: none;
  user-select: none;
  white-space: normal;
}

/* ---- Layer: teks_Instagram_cewk (x=144, y=590, w=105, h=25) ---- */
/* Font: Cormorant Garamond 20px, #b69b62, center */
.s3-instagram-cewk {
  position: absolute;
  left: 50%;
  top: var(--s3-instagram-cewk-y);
  width: var(--s3-instagram-cewk-width);
  height: var(--s3-instagram-cewk-height);
  font-family: 'Cormorant Garamond', serif;
  font-size: var(--s3-instagram-cewk-font-size);
  font-weight: var(--s3-instagram-cewk-font-weight);
  color: var(--s3-instagram-cewk-color);
  text-align: center;
  line-height: var(--s3-instagram-cewk-line-height);
  letter-spacing: var(--s3-instagram-cewk-letter-spacing);
  opacity: var(--s3-instagram-cewk-opacity);
  z-index: var(--s3-instagram-cewk-z);
  transform: translateX(-50%) rotate(var(--s3-instagram-cewk-rotate));
  pointer-events: none;
  user-select: none;
}

/* ---- Layer: teks_Ilham_Budi_Subesti (x=122, y=988, w=149, h=20) ---- */
/* Font: Glass Antiqua 20px, #b69b62, center */
.s3-fullname-cowk {
  position: absolute;
  left: var(--s3-fullname-cowk-center-x);
  top: var(--s3-fullname-cowk-y);
  width: var(--s3-fullname-cowk-width);
  height: var(--s3-fullname-cowk-height);
  font-family: 'Glass Antiqua', serif;
  font-size: var(--s3-fullname-cowk-font-size);
  font-weight: var(--s3-fullname-cowk-font-weight);
  color: var(--s3-fullname-cowk-color);
  text-align: center;
  line-height: var(--s3-fullname-cowk-line-height);
  letter-spacing: var(--s3-fullname-cowk-letter-spacing);
  opacity: var(--s3-fullname-cowk-opacity);
  z-index: var(--s3-fullname-cowk-z);
  transform: translateX(-50%) rotate(var(--s3-fullname-cowk-rotate));
  pointer-events: none;
  user-select: none;
  white-space: nowrap;
}

/* ---- Layer: teks_info_cowok (x=82, y=1014, w=230, h=41) ---- */
/* Font: Cormorant Garamond 16px, #b69b62, center */
.s3-info-cowok {
  position: absolute;
  left: 50%;
  top: var(--s3-info-cowok-y);
  width: var(--s3-info-cowok-width);
  height: var(--s3-info-cowok-height);
  font-family: 'Cormorant Garamond', serif;
  font-size: var(--s3-info-cowok-font-size);
  font-weight: var(--s3-info-cowok-font-weight);
  color: var(--s3-info-cowok-color);
  text-align: center;
  line-height: var(--s3-info-cowok-line-height);
  letter-spacing: var(--s3-info-cowok-letter-spacing);
  opacity: var(--s3-info-cowok-opacity);
  z-index: var(--s3-info-cowok-z);
  transform: translateX(-50%) rotate(var(--s3-info-cowok-rotate));
  pointer-events: none;
  user-select: none;
  white-space: normal;
}

/* ---- Layer: teks_Instagram_cowo (x=144, y=1056, w=105, h=25) ---- */
/* Font: Cormorant Garamond 20px, #b69b62, center */
.s3-instagram-cowo {
  position: absolute;
  left: 50%;
  top: var(--s3-instagram-cowo-y);
  width: var(--s3-instagram-cowo-width);
  height: var(--s3-instagram-cowo-height);
  font-family: 'Cormorant Garamond', serif;
  font-size: var(--s3-instagram-cowo-font-size);
  font-weight: var(--s3-instagram-cowo-font-weight);
  color: var(--s3-instagram-cowo-color);
  text-align: center;
  line-height: var(--s3-instagram-cowo-line-height);
  letter-spacing: var(--s3-instagram-cowo-letter-spacing);
  opacity: var(--s3-instagram-cowo-opacity);
  z-index: var(--s3-instagram-cowo-z);
  transform: translateX(-50%) rotate(var(--s3-instagram-cowo-rotate));
  pointer-events: none;
  user-select: none;
}

/* =============================================
   ENTRANCE ANIMATION (SECTION 3)
   ============================================= */

@keyframes s3RaiseUp {
  0% {
    opacity: 0;
    visibility: visible;
    margin-top: 48px;
  }

  1% {
    visibility: visible;
  }

  100% {
    opacity: 1;
    visibility: visible;
    margin-top: 0;
  }
}

@keyframes s3PanFromLeft {
  0% {
    opacity: 0;
    visibility: visible;
    margin-left: -64px;
  }

  1% {
    visibility: visible;
  }

  100% {
    opacity: 1;
    visibility: visible;
    margin-left: 0;
  }
}

@keyframes s3PanFromRight {
  0% {
    opacity: 0;
    visibility: visible;
    margin-left: 64px;
  }

  1% {
    visibility: visible;
  }

  100% {
    opacity: 1;
    visibility: visible;
    margin-left: 0;
  }
}

#section-3-info-mempelai .s3-bg {
  opacity: var(--s3-bg-opacity);
  visibility: visible;
  animation: none !important;
}

#section-3-info-mempelai .s3-teks-pembuka,
#section-3-info-mempelai .s3-name-umi,
#section-3-info-mempelai .s3-ampersand,
#section-3-info-mempelai .s3-name-ilham,
#section-3-info-mempelai .s3-fullname-cewk,
#section-3-info-mempelai .s3-info-cewk,
#section-3-info-mempelai .s3-instagram-cewk,
#section-3-info-mempelai .s3-fullname-cowk,
#section-3-info-mempelai .s3-info-cowok,
#section-3-info-mempelai .s3-instagram-cowo,
#section-3-info-mempelai .s3-mempelai-cewk,
#section-3-info-mempelai .s3-mempelai-cowk {
  opacity: 0;
  visibility: hidden;
}

#section-3-info-mempelai.is-visible .s3-teks-pembuka {
  animation: s3RaiseUp 1.4s cubic-bezier(0.22, 1, 0.36, 1) 0.1s forwards;
}

#section-3-info-mempelai.is-visible .s3-name-umi {
  animation: s3RaiseUp 1.4s cubic-bezier(0.22, 1, 0.36, 1) 0.25s forwards;
}

#section-3-info-mempelai.is-visible .s3-ampersand {
  animation: s3RaiseUp 1.4s cubic-bezier(0.22, 1, 0.36, 1) 0.35s forwards;
}

#section-3-info-mempelai.is-visible .s3-name-ilham {
  animation: s3RaiseUp 1.4s cubic-bezier(0.22, 1, 0.36, 1) 0.45s forwards;
}

#section-3-info-mempelai.is-visible .s3-mempelai-cewk {
  animation: s3PanFromLeft 1.4s cubic-bezier(0.22, 1, 0.36, 1) 0.65s forwards;
}

#section-3-info-mempelai.is-visible .s3-fullname-cewk {
  animation: s3RaiseUp 1.4s cubic-bezier(0.22, 1, 0.36, 1) 0.85s forwards;
}

#section-3-info-mempelai.is-visible .s3-info-cewk {
  animation: s3RaiseUp 1.4s cubic-bezier(0.22, 1, 0.36, 1) 1.0s forwards;
}

#section-3-info-mempelai.is-visible .s3-instagram-cewk {
  animation: s3RaiseUp 1.4s cubic-bezier(0.22, 1, 0.36, 1) 1.15s forwards;
}

#section-3-info-mempelai.is-visible .s3-mempelai-cowk {
  animation: s3PanFromRight 1.4s cubic-bezier(0.22, 1, 0.36, 1) 1.35s forwards;
}

#section-3-info-mempelai.is-visible .s3-fullname-cowk {
  animation: s3RaiseUp 1.4s cubic-bezier(0.22, 1, 0.36, 1) 1.55s forwards;
}

#section-3-info-mempelai.is-visible .s3-info-cowok {
  animation: s3RaiseUp 1.4s cubic-bezier(0.22, 1, 0.36, 1) 1.7s forwards;
}

#section-3-info-mempelai.is-visible .s3-instagram-cowo {
  animation: s3RaiseUp 1.4s cubic-bezier(0.22, 1, 0.36, 1) 1.85s forwards;
}

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

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

  #section-3-info-mempelai .s3-bg {
    opacity: var(--s3-bg-opacity) !important;
  }
}