/* ============================================
   section-4-info-acara.css — Section 05_Info_Acara
   Based on Figma frame: 05_Info_Acara (393 x 643)
   ============================================ */

/* --- Section Wrapper --- */
#section-4-info-acara {
  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-4-scale-box {
  position: relative;
  display: flex;
  justify-content: center;
}

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

/* ---- Layer: Rectangle_bg_1 (x=0, y=86, w=393, h=468) ---- */
/* Latar belakang utama coklat keemasan */
.s4-bg-1 {
  position: absolute;
  left: var(--s4-bg1-x);
  top: var(--s4-bg1-y);
  width: var(--s4-bg1-width);
  height: var(--s4-bg1-height);
  background-color: var(--s4-bg1-color);
  opacity: var(--s4-bg1-opacity);
  border-radius: var(--s4-bg1-border-radius);
  z-index: var(--s4-bg1-z);
  transform: rotate(var(--s4-bg1-rotate));
  pointer-events: none;
}

/* ---- Layer: Rectangle_bg_2 (x=32, y=133, w=330, h=381) ---- */
/* Panel dalam berwarna krem dengan sudut bulat */
.s4-bg-2 {
  position: absolute;
  left: var(--s4-bg2-x);
  top: calc(var(--s4-bg2-y) + var(--s4-content-offset-y));
  width: var(--s4-bg2-width);
  height: var(--s4-bg2-height);
  background-color: var(--s4-bg2-color);
  opacity: var(--s4-bg2-opacity);
  border-radius: var(--s4-bg2-border-radius);
  z-index: var(--s4-bg2-z);
  transform: rotate(var(--s4-bg2-rotate));
  pointer-events: none;
}

/* ---- Layer: icon_4 (x=138, y=140, w=117, h=95) ---- */
.s4-icon {
  position: absolute;
  left: var(--s4-icon-x);
  top: calc(var(--s4-icon-y) + var(--s4-content-offset-y));
  width: var(--s4-icon-width);
  height: var(--s4-icon-height);
  opacity: var(--s4-icon-opacity);
  z-index: var(--s4-icon-z);
  transform: rotate(var(--s4-icon-rotate));
  pointer-events: none;
}

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

/* ---- Layer: teks_weding_event (x=116, y=248, w=162, h=24) ---- */
/* Font: Glass Antiqua 24px, #a77e44, center */
.s4-title {
  position: absolute;
  left: 50%;
  top: calc(var(--s4-title-y) + var(--s4-content-offset-y));
  width: var(--s4-title-width);
  height: var(--s4-title-height);
  font-family: 'Glass Antiqua', serif;
  font-size: var(--s4-title-font-size);
  font-weight: 400;
  color: var(--s4-title-color);
  text-align: center;
  line-height: var(--s4-title-line-height);
  letter-spacing: var(--s4-title-letter-spacing);
  opacity: var(--s4-title-opacity);
  z-index: var(--s4-title-z);
  transform: translateX(-50%) rotate(var(--s4-title-rotate));
  pointer-events: none;
  user-select: none;
  white-space: nowrap;
}

/* ---- Layer: countdown (x=92, y=294, w=205, h=50) ---- */
.s4-countdown {
  position: absolute;
  left: 50%;
  top: calc(var(--s4-countdown-y) + var(--s4-content-offset-y));
  width: var(--s4-countdown-width);
  height: var(--s4-countdown-height);
  z-index: var(--s4-countdown-z);
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  justify-content: space-between;
  pointer-events: none;
  user-select: none;
}

/* Setiap item countdown: Days/Hours/Minutes/Second */
.s4-countdown-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 40px;
}

.s4-countdown-number {
  font-family: 'Glass Antiqua', serif;
  font-size: var(--s4-countdown-number-font-size);
  font-weight: 400;
  color: var(--s4-countdown-number-color);
  line-height: var(--s4-countdown-number-line-height);
  text-align: center;
  min-width: 28px;
}

.s4-countdown-label {
  font-family: 'Glass Antiqua', serif;
  font-size: var(--s4-countdown-label-font-size);
  font-weight: 400;
  color: var(--s4-countdown-label-color);
  text-align: center;
  line-height: 1.2;
}

/* Pemisah titik dua antara item (Dinonaktifkan karena tidak dipakai lagi)
.s4-countdown-sep {
  font-family: 'Glass Antiqua', serif;
  font-size: var(--s4-countdown-number-font-size);
  color: var(--s4-countdown-number-color);
  line-height: var(--s4-countdown-number-line-height);
  padding-bottom: 14px;
  align-self: flex-start;
}
*/

/* ---- Layer: Rectangle_Tasyakuran (x=49, y=372, w=135, h=111) ---- */
.s4-card-tasykuran {
  position: absolute;
  left: var(--s4-card-tasyk-x);
  top: calc(var(--s4-card-tasyk-y) + var(--s4-content-offset-y));
  width: var(--s4-card-tasyk-width);
  height: var(--s4-card-tasyk-height);
  background-color: var(--s4-card-tasyk-color);
  opacity: var(--s4-card-tasyk-opacity);
  border-radius: var(--s4-card-tasyk-border-radius);
  z-index: var(--s4-card-tasyk-z);
  transform: rotate(var(--s4-card-tasyk-rotate));
}

/* ---- Layer: Rectangle_resepsi (x=210, y=372, w=135, h=111) ---- */
.s4-card-resepsi {
  position: absolute;
  left: var(--s4-card-resepsi-x);
  top: calc(var(--s4-card-resepsi-y) + var(--s4-content-offset-y));
  width: var(--s4-card-resepsi-width);
  height: var(--s4-card-resepsi-height);
  background-color: var(--s4-card-resepsi-color);
  opacity: var(--s4-card-resepsi-opacity);
  border-radius: var(--s4-card-resepsi-border-radius);
  z-index: var(--s4-card-resepsi-z);
  transform: rotate(var(--s4-card-resepsi-rotate));
}

/* ---- Layer: teks_Tasykuran group (x=52, y=379, w=131, h=90) ---- */
/* Container teks di atas card Tasyakuran */
.s4-card-tasykuran-content {
  position: absolute;
  left: var(--s4-card-tasyk-x);
  top: calc(var(--s4-card-tasyk-y) + var(--s4-content-offset-y));
  width: var(--s4-card-tasyk-width);
  height: var(--s4-card-tasyk-height);
  z-index: var(--s4-tasyk-z);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  pointer-events: none;
}

.s4-tasykuran-title {
  font-family: 'Glass Antiqua', serif;
  font-size: var(--s4-tasyk-title-font-size);
  font-weight: 400;
  color: var(--s4-tasyk-title-color);
  text-align: center;
  line-height: 1.3;
  letter-spacing: 0em;
  white-space: nowrap;
  pointer-events: none;
  user-select: none;
}

.s4-tasykuran-day,
.s4-tasykuran-date,
.s4-tasykuran-location {
  font-family: 'Glass Antiqua', serif;
  font-size: var(--s4-tasyk-info-font-size);
  font-weight: 400;
  color: var(--s4-tasyk-info-color);
  text-align: center;
  line-height: 1.3;
  letter-spacing: 0em;
  white-space: nowrap;
  pointer-events: none;
  user-select: none;
}

.s4-tasykuran-button {
  font-family: 'Glass Antiqua', serif;
  font-size: var(--s4-tasyk-info-font-size);
  font-weight: 400;
  color: var(--s4-tasyk-info-color);
  text-align: center;
  line-height: 1.3;
  letter-spacing: 0em;
  text-decoration: underline;
  cursor: pointer;
  pointer-events: auto;
  user-select: none;
}

.s4-tasykuran-button:hover {
  opacity: 0.8;
}

/* ---- Layer: teks_Resepsi group (x=212, y=378, w=131, h=90) ---- */
.s4-card-resepsi-content {
  position: absolute;
  left: var(--s4-card-resepsi-x);
  top: calc(var(--s4-card-resepsi-y) + var(--s4-content-offset-y));
  width: var(--s4-card-resepsi-width);
  height: var(--s4-card-resepsi-height);
  z-index: var(--s4-resepsi-z);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  pointer-events: none;
}

.s4-resepsi-title {
  font-family: 'Glass Antiqua', serif;
  font-size: var(--s4-resepsi-title-font-size);
  font-weight: 400;
  color: var(--s4-resepsi-title-color);
  text-align: center;
  line-height: 1.3;
  letter-spacing: 0em;
  white-space: nowrap;
  pointer-events: none;
  user-select: none;
}

.s4-resepsi-day,
.s4-resepsi-date,
.s4-resepsi-location {
  font-family: 'Glass Antiqua', serif;
  font-size: var(--s4-resepsi-info-font-size);
  font-weight: 400;
  color: var(--s4-resepsi-info-color);
  text-align: center;
  line-height: 1.3;
  letter-spacing: 0em;
  white-space: nowrap;
  pointer-events: none;
  user-select: none;
}

.s4-resepsi-button {
  font-family: 'Glass Antiqua', serif;
  font-size: var(--s4-resepsi-info-font-size);
  font-weight: 400;
  color: var(--s4-resepsi-info-color);
  text-align: center;
  line-height: 1.3;
  letter-spacing: 0em;
  text-decoration: underline;
  cursor: pointer;
  pointer-events: auto;
  user-select: none;
}

.s4-resepsi-button:hover {
  opacity: 0.8;
}

/* ---- Embed Maps di bawah detail acara ---- */
.s4-map {
  position: absolute;
  left: var(--s4-map-x);
  width: var(--s4-map-width);
  height: var(--s4-map-height);
  z-index: var(--s4-map-z);
  overflow: hidden;
  border: 2px solid rgba(197, 164, 110, 0.72);
  border-radius: 18px;
  background: #fdf4e9;
  box-shadow: 0 8px 18px rgba(73, 0, 0, 0.14);
}

.s4-map-tasykuran {
  top: calc(var(--s4-map-tasyk-y) + var(--s4-content-offset-y));
}

.s4-map iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

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

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

  1% {
    visibility: visible;
  }

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

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

  1% {
    visibility: visible;
  }

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

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

  1% {
    visibility: visible;
  }

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

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

  1% {
    visibility: visible;
  }

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

#section-4-info-acara .s4-bg-1 {
  opacity: var(--s4-bg1-opacity) !important;
  visibility: visible;
  animation: none !important;
}

#section-4-info-acara .s4-bg-2 {
  opacity: var(--s4-bg2-opacity);
  visibility: visible;
  animation: none !important;
}

#section-4-info-acara .s4-icon,
#section-4-info-acara .s4-title,
#section-4-info-acara .s4-countdown,
#section-4-info-acara .s4-card-tasykuran,
#section-4-info-acara .s4-card-resepsi,
#section-4-info-acara .s4-card-tasykuran-content,
#section-4-info-acara .s4-card-resepsi-content,
#section-4-info-acara .s4-map {
  opacity: 0;
  visibility: hidden;
}

#section-4-info-acara.is-visible .s4-icon {
  animation: s4DropDown 1.4s cubic-bezier(0.22, 1, 0.36, 1) 0.1s forwards;
}

#section-4-info-acara.is-visible .s4-title {
  animation: s4RaiseUp 1.4s cubic-bezier(0.22, 1, 0.36, 1) 0.3s forwards;
}

#section-4-info-acara.is-visible .s4-countdown {
  animation: s4RaiseUp 1.4s cubic-bezier(0.22, 1, 0.36, 1) 0.5s forwards;
}

#section-4-info-acara.is-visible .s4-card-tasykuran {
  animation: s4PanFromLeft 1.4s cubic-bezier(0.22, 1, 0.36, 1) 0.75s forwards;
}

#section-4-info-acara.is-visible .s4-card-tasykuran-content {
  animation: s4RaiseUp 1.4s cubic-bezier(0.22, 1, 0.36, 1) 0.95s forwards;
}

#section-4-info-acara.is-visible .s4-card-resepsi {
  animation: s4PanFromRight 1.4s cubic-bezier(0.22, 1, 0.36, 1) 1.1s forwards;
}

#section-4-info-acara.is-visible .s4-card-resepsi-content {
  animation: s4RaiseUp 1.4s cubic-bezier(0.22, 1, 0.36, 1) 1.3s forwards;
}

#section-4-info-acara.is-visible .s4-map-tasykuran {
  animation: s4RaiseUp 1.2s cubic-bezier(0.22, 1, 0.36, 1) 1.45s forwards;
}

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

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