/**
 * Laxy Motions — Premium 3D Parallax CSS Styles
 * Styled specifically to match the elegant, mobile-framed aesthetic.
 */

:root {
  /* ═══════════════════════════════════════════════════
     Laxy Motions — CONFIG CONFIGURATION: OPENING ANIMATION
     Tweak durations, zoom scales, and staggered delays here.
     ═══════════════════════════════════════════════════ */
  --open-bg-scale-initial: 1.02;
  --open-bg-scale-target: 1.45;
  --open-bg-duration: 3.5s;
  --open-bg-easing: cubic-bezier(0.22, 1, 0.36, 1);

  --open-gunungan-duration: 2.2s;
  --open-gunungan-easing: cubic-bezier(0.25, 0.8, 0.25, 1);
  --open-gunungan-y-target: 120vh;

  --open-gunungan-delay-center: 0s;
  --open-gunungan-delay-left: 0.25s;
  --open-gunungan-delay-right: 0.5s;

  /* Gaya Kustom Semak (Diinjeksi dinamis dari data.json) */
  --semak-bottom: -10vh;
  --semak-width: 60%;
  --semak-height: 32vh;
  --semak-height-mobile: 28vh;
  --semak-x-offset: -30%;

  /* Gaya Kustom Cover Image */
  --cover-width: 100%;
  --cover-height: 100%;
  --cover-object-fit: contain;
  --cover-top: 0;
  --cover-bottom: auto;
}
html.stage-active {
  scroll-behavior: auto !important;
}

/* ─── BODY & WRAPPER COLUMN CENTERING ─── */
body {
  background-color: #0e120f !important;
  /* Background luar margin gelap */
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  min-height: 100vh;
}

.app-container {
  width: 100%;
  max-width: 420px;
  /* Frame layout seluler standar premium */
  min-height: 100vh;
  position: relative;
  background-color: var(--color-bg);
  box-shadow: 0 0 60px rgba(0, 0, 0, 0.85);
  overflow-x: hidden;
}

/* ─── OVERRIDE FIXED ELEMENT CONSTRAINTS ─── */
#parallax-stage,
#splash-screen {
  position: fixed !important;
  top: 0 !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  width: 100% !important;
  max-width: 420px !important;
  height: 100vh !important;
  overflow: hidden;
  box-sizing: border-box;
}

/* Audio Toggle constraints */
#audio-toggle {
  position: fixed !important;
  left: 50% !important;
  transform: translateX(150px) !important;
  /* Diletakkan pas di pojok kanan bawah kolom 420px */
  margin-left: 0 !important;
  right: auto !important;
  bottom: 1.5rem !important;
  z-index: 1001 !important;
}

@media (max-width: 420px) {
  #audio-toggle {
    left: auto !important;
    right: 1.5rem !important;
    transform: none !important;
  }
}

/* ─── EQUALIZER & RIPPLE ANIMATION FOR AUDIO TOGGLE ─── */
#audio-toggle.playing::before,
#audio-toggle.playing::after {
  content: '' !important;
  display: block !important;
  position: absolute !important;
  inset: -1px !important;
  border: 1px solid var(--color-accent) !important;
  border-radius: 50% !important;
  pointer-events: none !important;
  z-index: -1 !important;
  animation: audioPulse 1.8s cubic-bezier(0.24, 0, 0.38, 1) infinite !important;
}

#audio-toggle.playing::after {
  animation-delay: 0.9s !important;
}

@keyframes audioPulse {
  0% {
    transform: scale(1);
    opacity: 0.6;
  }
  100% {
    transform: scale(1.6);
    opacity: 0;
  }
}

/* Animasi Equalizer Garis Naik-Turun */
#audio-toggle.playing .bar:nth-child(1) {
  animation: eqBar1 0.8s ease-in-out infinite !important;
}
#audio-toggle.playing .bar:nth-child(2) {
  animation: eqBar2 0.7s ease-in-out infinite !important;
}
#audio-toggle.playing .bar:nth-child(3) {
  animation: eqBar3 0.9s ease-in-out infinite !important;
}
#audio-toggle.playing .bar:nth-child(4) {
  animation: eqBar4 0.6s ease-in-out infinite !important;
}

@keyframes eqBar1 {
  0%, 100% { height: 6px; }
  50% { height: 16px; }
}
@keyframes eqBar2 {
  0%, 100% { height: 16px; }
  50% { height: 8px; }
}
@keyframes eqBar3 {
  0%, 100% { height: 10px; }
  50% { height: 18px; }
}
@keyframes eqBar4 {
  0%, 100% { height: 14px; }
  50% { height: 6px; }
}

/* ─── TRANSPARENT COVER / SPLASH SCREEN ─── */
#splash-screen {
  background: transparent !important;
  /* Dibuat tembus pandang agar visual panggung langsung terlihat */
  z-index: 1000 !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  padding: 5rem 2.2rem 6.5rem 2.2rem !important;
  box-sizing: border-box !important;
  transition: transform 1.2s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.8s !important;
}

#splash-screen::before {
  content: '' !important;
  display: block !important;
  position: absolute !important;
  inset: 0 !important;
  background: linear-gradient(to bottom, rgba(14, 18, 15, 0.75) 0%, rgba(14, 18, 15, 0.4) 30%, rgba(14, 18, 15, 0) 70%) !important;
  pointer-events: none !important;
  z-index: 1 !important;
}

#splash-screen::after {
  content: '' !important;
  display: block !important;
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  height: 40% !important;
  background: linear-gradient(to top, rgba(14, 18, 15, 0.95) 0%, rgba(14, 18, 15, 0.6) 60%, rgba(14, 18, 15, 0) 100%) !important;
  pointer-events: none !important;
  z-index: 1 !important;
}

/* Splash Sections */
.splash-top {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  position: relative !important;
  z-index: 5 !important;
  margin-top: 1vh;
}

.splash-bottom {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  position: relative !important;
  z-index: 5 !important;
  margin-top: auto;
}

/* Text styles matching forest theme */
.splash-label {
  font-family: var(--font-body);
  font-size: 0.78rem !important;
  font-weight: 500;
  letter-spacing: 0.38em !important;
  text-transform: uppercase;
  color: var(--color-accent-light) !important;
  margin: 0 0 0.4rem 0 !important;
  line-height: 1.2 !important;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

.cover-inisial {
  font-family: var(--font-display) !important;
  font-size: var(--cover-inisial-size) !important;
  font-weight: 400 !important;
  font-style: italic !important;
  color: var(--color-accent-light) !important;
  line-height: 0.9 !important;
  margin: 0 0 0.2rem 0 !important;
  text-shadow: 0 4px 12px rgba(0, 0, 0, 0.7);
}

.splash-separator {
  color: var(--color-accent);
  font-size: 0.75rem;
  margin: 0 0 0.3rem 0 !important;
  line-height: 1 !important;
  opacity: 0.85;
}

.splash-date {
  font-family: var(--font-body);
  font-size: 0.8rem !important;
  font-weight: 500;
  letter-spacing: 0.22em !important;
  text-transform: uppercase;
  color: #ffffff !important;
  margin: 0 !important;
  line-height: 1.2 !important;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

.splash-to {
  font-family: var(--font-body);
  font-size: 0.75rem !important;
  font-weight: 500;
  letter-spacing: 0.28em !important;
  text-transform: uppercase;
  color: var(--color-accent-light) !important;
  margin: 0 0 0.5rem 0 !important;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

.splash-tamu-nama {
  font-family: 'Playfair Display', serif !important;
  font-size: 1.4rem !important;
  font-weight: 400 !important;
  font-style: italic !important;
  color: #ffffff !important;
  margin: 0 0 1.8rem 0 !important;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

.btn-open {
  font-family: var(--font-body);
  font-size: 0.82rem !important;
  font-weight: 600;
  letter-spacing: 0.18em !important;
  text-transform: uppercase;
  padding: 0.9rem 2.8rem !important;
  border: none !important;
  border-radius: 30px !important;
  /* fully rounded pill */
  color: #ffffff !important;
  background: var(--color-accent-dark) !important;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  transition: all 0.3s ease !important;
}

.btn-open:hover {
  background: var(--color-accent) !important;
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.5) !important;
}

/* ─── PARALLAX VISUAL STAGE & LAYERS ─── */
#parallax-stage {
  z-index: 1;
  pointer-events: auto;
  touch-action: none; /* MEMBLOKIR total scroll native browser di Zona A */
  background-color: var(--color-bg-dark);
}

.layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  will-change: transform, opacity;
  transform-style: preserve-3d;
  pointer-events: none;
}

/* Background Forest & Mountain */
.layer--background {
  z-index: 2;
}

.layer--background::before {
  content: '' !important;
  display: block !important;
  position: absolute !important;
  inset: 0 !important;
  background: linear-gradient(to bottom, rgba(14, 18, 15, 0.85) 0%, rgba(14, 18, 15, 0.4) 35%, rgba(14, 18, 15, 0) 65%) !important;
  pointer-events: none !important;
  z-index: 1 !important;
}

.layer--background img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: relative !important;
  z-index: 0 !important;
}

.lottie-birds {
  position: absolute !important;
  top: 12vh !important;
  left: 0 !important;
  right: 0 !important;
  height: 25vh !important;
  z-index: 1 !important;
  pointer-events: none !important;
  opacity: 0.85;
}

/* Mempelai/Couple Layer */
.layer--couple {
  z-index: 5;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  top: auto !important;
  /* Override inset top */
  bottom: 0;
}

.layer--couple img {
  max-height: 72vh;
  width: auto;
  object-fit: contain;
  margin-bottom: 0;
}

/* Cover Image (Jawa Cover) */
.layer--cover-img {
  z-index: 6;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  top: var(--cover-top);
  bottom: var(--cover-bottom);
}

.layer--cover-img img {
  width: var(--cover-width);
  height: var(--cover-height);
  object-fit: var(--cover-object-fit);
  will-change: transform, opacity;
  animation: floatUpDown 6s ease-in-out infinite;
}

@keyframes floatUpDown {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-12px);
  }
}
/* Foreground Semak Jati - Simetris Kiri & Kanan */
.layer--semak {
  z-index: 12;
  position: absolute;
  top: auto !important;
  /* Override inset top */
  bottom: var(--semak-bottom);
  width: var(--semak-width);
  height: calc(var(--semak-height) + 6vh);
  display: flex;
  align-items: flex-end;
}

.layer--semak img {
  height: var(--semak-height);
  /* Diturunkan agar tidak menutupi wayang */
  width: auto;
  object-fit: contain;
}

.layer--semak-left {
  left: var(--semak-x-offset) !important;
  right: auto !important;
  justify-content: flex-start;
}

.layer--semak-left img {
  transform: scaleX(-1);
  /* Flip kiri agar simetris */
  transform-origin: center bottom;
}

.layer--semak-right {
  right: var(--semak-x-offset) !important;
  left: auto !important;
  /* Override default left: 0 from .layer */
  justify-content: flex-end;
}

.layer--semak-right img {
  transform: scaleX(1);
  /* Normal */
  transform-origin: center bottom;
}

/* Swipe Hint */
.swipe-hint {
  position: absolute;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  transform: none !important;
  height: 22vh !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-end !important;
  padding: 0 2rem 2.2rem 2rem !important;
  z-index: 15;
  color: #ffffff !important;
  opacity: 0;
  font-family: var(--font-body);
  font-size: 0.64rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.15em !important;
  text-transform: uppercase;
  background: linear-gradient(to top, rgba(14, 18, 15, 0.85) 0%, rgba(14, 18, 15, 0.45) 50%, rgba(14, 18, 15, 0) 100%) !important;
  text-shadow: 0 2px 5px rgba(0, 0, 0, 0.8) !important;
  text-align: center !important;
  transition: opacity 0.5s ease;
  pointer-events: none;
}

.swipe-hint__arrow-wrap {
  margin-bottom: 0.4rem;
  animation: floatArrow 1.6s ease-in-out infinite;
}

.swipe-hint__arrow {
  display: block;
  width: 10px;
  height: 10px;
  border-left: 2px solid var(--color-accent-light) !important;
  border-top: 2px solid var(--color-accent-light) !important;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.6)) !important;
}

@keyframes floatArrow {
  0% {
    transform: translateY(0) rotate(225deg);
    opacity: 0.3;
  }

  50% {
    transform: translateY(8px) rotate(225deg);
    opacity: 1;
  }

  100% {
    transform: translateY(0) rotate(225deg);
    opacity: 0.3;
  }
}

/* ─── FLOATING INFORMATION CARDS ─── */
.info-card {
  background: rgba(250, 248, 245, 0.96) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  border: 1px solid rgba(184, 149, 106, 0.35) !important;
  border-radius: 16px;
  padding: 1.6rem;
  max-width: 320px;
  width: 88%;
  text-align: center;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.15) !important;
  pointer-events: auto;
  touch-action: none !important;
}

/* Quote/Verse Layer */
.layer--verse {
  z-index: 13; /* Di atas semak (12) */
}

/* Info Cards Layers (Bawa ke depan semak agar clickable) */
.layer--info-groom,
.layer--info-bride,
.layer--info-events,
.layer--info-countdown {
  z-index: 14; /* Di atas semak (12) */
}

.verse {
  background-color: transparent;
  background-image: url('../images/awan-img.png'), radial-gradient(circle, rgba(250, 248, 245, 0.94) 0%, rgba(250, 248, 245, 0.88) 55%, rgba(250, 248, 245, 0) 75%) !important;
  background-size: 100% 100%, 100% 100% !important;
  background-position: center, center !important;
  background-repeat: no-repeat, no-repeat !important;
  
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border: none;
  border-radius: 0;
  box-shadow: none;
  
  /* Bikin wadah awan tinggi tebal memenuhi 1 layar penuh (100vh) */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100vh !important;
  min-height: 100vh !important;
  
  /* Lebar meluap 124% melewati batas layar HP (Bleeding Edge) */
  width: 124%;
  max-width: 124%;
  
  /* Padding horizontal ekstra besar agar teks aman terkunci di dalam layar */
  padding: 3rem 2.8rem !important; 
  
  text-align: center;
  margin: 0;
  pointer-events: auto;
  touch-action: none !important;
}

.verse__hashtag {
  display: block;
  font-family: var(--font-display);
  font-size: 1.2rem;
  color: var(--color-accent-dark);
  margin-bottom: 0.6rem;
  font-weight: 700;
}

.verse__text {
  font-family: var(--font-body);
  font-size: 0.88rem !important;
  font-style: italic;
  color: var(--color-text);
  line-height: 1.65;
}

/* Groom & Bride Floating Info Layers (Selalu di Tengah & di Atas Semak) */
.layer--info-groom,
.layer--info-bride {
  z-index: 13; /* Di atas semak (12) agar tombol sosmed tidak tertutup daun semak */
  width: 100% !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  padding: 0 2rem !important;
  justify-content: center !important;
  align-items: flex-end !important;
  top: auto !important;
  bottom: 16vh !important;
  height: auto !important;
}

/* Events Floating Card */
.layer--info-events {
  z-index: 13; /* Di atas semak (12) */
}

.info-card--events {
  background-color: rgba(250, 248, 245, 0.90) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100vh !important;
  min-height: 100vh !important;
  max-height: 100vh !important;
  overflow-y: auto;
  
  /* Lebar disesuaikan ke 100% agar pas di layar mobile dan tidak terpotong */
  width: 100% !important;
  max-width: 100% !important;
  
  /* Padding horizontal disesuaikan agar memberi ruang di sisi kiri & kanan */
  padding: 3rem 1.2rem !important; 
  margin: 0;
  pointer-events: auto;
}

.events-wrap {
  width: 100%;
  max-width: 360px;
  display: flex;
  flex-direction: column;
  justify-content: center; /* Memusatkan semua block secara vertikal */
  gap: 3.5vh; /* Renggang dinamis diperlebar untuk visual timeline */
  position: relative;
}

.event-block {
  width: 100% !important; /* Diubah ke 100% agar teks tidak terlalu mepet horizontal */
  display: flex;
  flex-direction: column;
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  text-shadow: none !important;
  transition: transform 0.3s ease;
  position: relative;
}

/* ─── EVENT 1 (AKAD NIKAH - RATA KIRI) TIMELINE ORNAMEN ─── */
.event-block--left {
  text-align: left !important;
  align-items: flex-start !important;
  align-self: flex-start;
  margin-right: auto;
  padding: 1.5rem 0 1.5rem 1.8rem !important; /* Memberi ruang di kiri untuk garis & dot */
}

/* Garis vertikal di tepi kiri */
.info-card--events .event-block--left::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 1px;
  background: linear-gradient(to bottom,
    transparent,
    var(--color-accent) 20px,
    var(--color-accent) calc(100% - 20px),
    transparent
  );
  opacity: 0.55;
  z-index: 1;
}

/* Dot emas di tepi kiri */
.info-card--events .event-block--left::after {
  content: '';
  display: block;
  position: absolute;
  left: 0;
  top: 2.2rem;
  width: 12px;
  height: 12px;
  background: #faf8f5; /* Warna gading padat overlay */
  border: 2px solid var(--color-accent);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  z-index: 3;
}

/* ─── EVENT 2 (RESEPSI - RATA KANAN) TIMELINE ORNAMEN ─── */
.event-block--right {
  text-align: right !important;
  align-items: flex-end !important;
  align-self: flex-end;
  margin-left: auto;
  padding: 1.5rem 1.8rem 1.5rem 0 !important; /* Memberi ruang di kanan untuk garis & dot */
}

/* Garis vertikal di tepi kanan */
.info-card--events .event-block--right::before {
  content: '';
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: 1px;
  background: linear-gradient(to bottom,
    transparent,
    var(--color-accent) 20px,
    var(--color-accent) calc(100% - 20px),
    transparent
  );
  opacity: 0.55;
  z-index: 1;
}

/* Dot emas di tepi kanan */
.info-card--events .event-block--right::after {
  content: '';
  display: block;
  position: absolute;
  right: 0;
  top: 2.2rem;
  width: 12px;
  height: 12px;
  background: #faf8f5;
  border: 2px solid var(--color-accent);
  border-radius: 50%;
  transform: translate(50%, -50%); /* Geser setengah dot ke kanan */
  z-index: 3;
}

.event-block:hover {
  transform: translateY(-2px);
}

.event-block--center {
  text-align: center !important;
  align-items: center !important;
  align-self: center;
  margin-left: auto;
  margin-right: auto;
  margin-top: 0.4rem;
}

/* Judul Acara: Estetik Latin Playfair italic */
.event-block__title {
  font-family: var(--font-display) !important;
  font-size: 1.75rem !important;
  font-weight: 400 !important;
  font-style: italic !important;
  color: var(--color-accent-dark) !important;
  margin-bottom: 0.2rem !important;
  line-height: 1.25 !important;
  text-shadow: 0 1px 1px rgba(255, 255, 255, 0.8) !important;
}

/* Teks Info Streaming */
.event-block__info {
  font-family: var(--font-body) !important;
  font-size: 0.88rem !important;
  color: var(--color-text-light) !important;
  line-height: 1.45 !important;
  margin-bottom: 0.5rem !important;
  max-width: 280px;
}

/* Tanggal & Waktu */
.event-block__date {
  font-family: var(--font-body) !important;
  font-size: 0.95rem !important;
  font-weight: 700 !important;
  color: var(--color-text) !important;
  margin-bottom: 0.1rem !important;
  line-height: 1.3 !important;
}

.event-block__time {
  font-family: var(--font-body) !important;
  font-size: 0.92rem !important;
  color: var(--color-text) !important;
  margin-bottom: 0.25rem !important;
}

/* Lokasi Venue */
.event-block__venue {
  font-family: var(--font-body) !important;
  font-weight: 700 !important;
  color: var(--color-text) !important;
  font-size: 0.92rem !important;
  margin-bottom: 0.1rem !important;
}

/* Alamat Detail */
.event-block__address {
  font-family: var(--font-body) !important;
  font-size: 0.78rem !important;
  color: var(--color-text) !important; /* Teks lebih gelap untuk kontras maksimal */
  font-weight: 500 !important;
  line-height: 1.4 !important;
  max-width: 260px;
}

.event-block--right .event-block__address {
  margin-left: auto; /* Agar rapi di kanan */
}

/* Kumpulan Tombol Tindakan */
.event-block__actions {
  margin-top: 0.6rem !important;
  display: flex !important;
  gap: 0.5rem !important;
  width: auto !important;
}

/* Tombol Cokelat Elegan Kapsul (seperti referensi) */
.event-block .btn-para-action {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.4rem !important;
  font-family: var(--font-body) !important;
  font-size: 0.8rem !important;
  font-weight: 600 !important;
  color: #ffffff !important;
  background-color: var(--color-accent-dark) !important; /* Cokelat hangat premium */
  border: none !important;
  border-radius: 20px !important;
  padding: 0.4rem 1.2rem !important;
  text-decoration: none !important;
  box-shadow: 0 4px 10px rgba(142, 111, 71, 0.2) !important;
  transition: all 0.3s ease !important;
  text-shadow: none !important;
}

.event-block .btn-para-action:hover {
  background-color: var(--color-accent) !important; /* Emas cokelat */
  transform: translateY(-1px) !important;
  box-shadow: 0 6px 14px rgba(142, 111, 71, 0.35) !important;
  color: #ffffff !important;
}

.event-block .btn-para-action .icon {
  width: 13px !important;
  height: 13px !important;
  color: #ffffff !important;
}

/* Countdown Floating Card */
.layer--info-countdown {
  z-index: 13; /* Di atas semak (12) */
}

.countdown__intro {
  font-size: 0.8rem;
  color: var(--color-text) !important;
  margin-bottom: 0.2rem;
}

.countdown__title {
  font-family: var(--font-display);
  font-size: 1.4rem;
  color: var(--color-accent-dark);
  margin-bottom: 1.1rem;
  font-weight: 500;
}

.countdown__grid {
  display: flex;
  justify-content: center;
  gap: 0.6rem;
}

.countdown__unit {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: rgba(184, 149, 106, 0.08);
  border: 1px solid rgba(184, 149, 106, 0.2);
  border-radius: 8px;
  min-width: 54px;
  padding: 0.4rem 0;
}

.countdown__value {
  font-family: var(--font-display);
  font-size: 1.4rem;
  font-weight: bold;
  color: var(--color-accent-dark);
}

.countdown__label {
  font-size: 0.6rem;
  color: var(--color-text) !important;
  font-weight: 500;
  text-transform: uppercase;
}

/* ─── COUNTDOWN LIVE STREAMING SECTION ─── */
.countdown-streaming-wrap {
  width: 100%;
}

.countdown-streaming {
  margin-top: 1.2rem;
  padding-top: 1.2rem;
  border-top: 1px solid rgba(184, 149, 106, 0.18);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.countdown-streaming__info {
  font-family: var(--font-body) !important;
  font-size: 0.85rem !important;
  color: var(--color-text) !important;
  line-height: 1.45 !important;
  margin-bottom: 0.8rem !important;
  max-width: 280px;
}

.countdown-streaming .btn-para-action {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.4rem !important;
  font-family: var(--font-body) !important;
  font-size: 0.8rem !important;
  font-weight: 600 !important;
  color: #ffffff !important;
  background-color: var(--color-accent-dark) !important; /* Cokelat hangat */
  border: none !important;
  border-radius: 20px !important;
  padding: 0.45rem 1.3rem !important;
  text-decoration: none !important;
  box-shadow: 0 4px 10px rgba(142, 111, 71, 0.2) !important;
  transition: all 0.3s ease !important;
  text-shadow: none !important;
}

.countdown-streaming .btn-para-action:hover {
  background-color: var(--color-accent) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 6px 14px rgba(142, 111, 71, 0.35) !important;
  color: #ffffff !important;
}

.countdown-streaming .btn-para-action .icon {
  width: 13px !important;
  height: 13px !important;
  color: #ffffff !important;
}

/* ─── SCROLL OVERLAY TRACK ─── */
#scroll-overlay {
  position: relative;
  z-index: 2;
  width: 100%;
  pointer-events: none;                   /* Biarkan click pass-through ke stage */
}

.scroll-gap {
  height: 100vh;
  pointer-events: none;
  touch-action: none;
  background-color: rgba(0, 0, 0, 0); /* Transparansi nyata agar browser merender layer hit-test */
}

/* Immersive standard scrollable container */
#post-immersive {
  background: var(--color-bg);
  position: relative;
  z-index: 3;
  box-shadow: 0 -20px 40px rgba(0, 0, 0, 0.15);
  border-radius: 20px 20px 0 0;
  padding-top: 0;
  overflow: hidden;
  pointer-events: auto;                   /* Aktifkan kembali interaksi click di Zona B */
}

/* Hide sections already displayed in Zona A (Parallax Stage) */
#cover-section,
#pembuka-section,
#mempelai-section,
#countdown-section,
#acara-section,
#live-section {
  display: none !important;
}

/* ─── OPENING TRANSITION STYLES ─── */
#parallax-stage.is-opening .layer--background {
  transition: transform var(--open-bg-duration) var(--open-bg-easing);
}

#parallax-stage.is-opening .layer--cover-img {
  transition: transform var(--open-gunungan-duration) var(--open-gunungan-easing), opacity var(--open-gunungan-duration) var(--open-gunungan-easing);
}

#parallax-stage.stage-opened .layer--cover-img {
  transform: translate3d(0, var(--open-gunungan-y-target), 0) !important;
  opacity: 0 !important;
}

/* ─── STAGE HEADER (Teks Parallax Panggung) ─── */
.layer--stage-header {
  z-index: 8;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding-top: calc(5rem + 1vh);
  width: 100%;
  pointer-events: none;
}

.stage-header-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.stage-header__label {
  font-family: var(--font-body);
  font-size: 0.78rem !important;
  font-weight: 500;
  letter-spacing: 0.38em !important;
  text-transform: uppercase;
  color: var(--color-accent-light) !important;
  margin: 0 0 0.8rem 0 !important;
  line-height: 1.2 !important;
  text-shadow: 0 2px 4px rgba(0,0,0,0.85), 0 4px 12px rgba(0,0,0,0.95) !important;
}

.stage-header__names {
  font-family: 'Playfair Display', serif !important;
  font-size: 2.8rem !important;
  font-weight: 400 !important;
  font-style: italic !important;
  color: #ffffff !important;
  line-height: 1.2 !important;
  margin: 0 0 0.6rem 0 !important;
  text-shadow: 0 2px 8px rgba(0,0,0,0.85), 0 4px 20px rgba(0,0,0,0.95) !important;
}

.stage-header__separator {
  color: var(--color-accent);
  font-size: 0.75rem;
  margin: 0 0 0.6rem 0 !important;
  line-height: 1 !important;
  opacity: 0.85;
  text-shadow: 0 2px 4px rgba(0,0,0,0.85) !important;
}

.stage-header__date {
  font-family: var(--font-body);
  font-size: 0.8rem !important;
  font-weight: 500;
  letter-spacing: 0.22em !important;
  text-transform: uppercase;
  color: #ffffff !important;
  margin: 0 !important;
  line-height: 1.2 !important;
  text-shadow: 0 2px 4px rgba(0,0,0,0.85), 0 4px 12px rgba(0,0,0,0.95) !important;
}

/* ─── STAGGERED ENTRANCE ANIMATION ─── */
.stage-header-content > * {
  opacity: 0;
  transform: translateY(-40px);
  transition: opacity 1s cubic-bezier(0.34, 1.56, 0.64, 1), transform 1s cubic-bezier(0.34, 1.56, 0.64, 1);
  will-change: transform, opacity;
}

.layer--stage-header.animate-in .stage-header__label {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.5s;
}

.layer--stage-header.animate-in .stage-header__names {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.7s;
}

.layer--stage-header.animate-in .stage-header__separator {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.9s;
}

.layer--stage-header.animate-in .stage-header__date {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 1.0s;
}

#parallax-stage.is-opening .layer--verse {
  transition: opacity 1.8s cubic-bezier(0.4, 0, 0.2, 1) 1.0s, transform 1.8s cubic-bezier(0.4, 0, 0.2, 1) 1.0s !important;
}

/* ─── CINEMATIC EXIT SPLASH SCREEN ─── */
#splash-screen.splash-exit {
  pointer-events: none !important;
}

#splash-screen.splash-exit .splash-top {
  transform: translateY(-120px) !important;
  opacity: 0 !important;
  transition: transform 1s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.8s !important;
}

#splash-screen.splash-exit .splash-bottom {
  transform: translateY(120px) !important;
  opacity: 0 !important;
  transition: transform 1s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.8s !important;
}

#splash-screen.splash-exit::before {
  opacity: 0 !important;
  transition: opacity 1.2s ease !important;
}

#splash-screen.splash-exit::after {
  opacity: 0 !important;
  transition: opacity 1.2s ease !important;
}

/* Sembunyikan tombol audio selama splash screen aktif (belum dibuka) */
#splash-screen:not(.splash-exit) ~ #audio-toggle {
  opacity: 0 !important;
  pointer-events: none !important;
  visibility: hidden !important;
}

/* ─── MEMPELAI GRADIENT OVERLAY ─── */
.layer--mempelai-gradient {
  z-index: 9;
  position: absolute !important;
  inset: auto 0 0 0 !important;
  height: 58vh !important;
  background: linear-gradient(to top, rgba(250, 248, 245, 1) 0%, rgba(250, 248, 245, 0.95) 35%, rgba(250, 248, 245, 0) 100%) !important;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.5s ease;
  will-change: opacity;
}

/* ─── MEMPELAI INFO LAYOUT (Organic Melayang Tanpa Box Kaku) ─── */
.layer--info-groom .info-card,
.layer--info-bride .info-card {
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  max-width: 360px !important;
  width: 100% !important;
}

.info-card__short {
  font-family: 'Playfair Display', serif !important;
  font-size: 2.2rem !important;
  font-weight: 400 !important;
  font-style: italic !important;
  color: var(--color-accent-dark) !important;
  margin-bottom: 0.2rem !important;
  text-shadow: 0 1px 2px rgba(255, 255, 255, 0.8);
}

.info-card__full {
  font-family: var(--font-body) !important;
  font-size: 1.15rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.1em !important;
  color: var(--color-text) !important;
  margin-bottom: 0.4rem !important;
}

.info-card__relation {
  font-family: var(--font-body) !important;
  font-size: 0.95rem !important;
  font-style: italic !important;
  color: var(--color-text) !important;
  opacity: 0.8;
  margin-bottom: 0.15rem !important;
}

.info-card__parents {
  font-family: var(--font-body) !important;
  font-size: 1.05rem !important;
  font-weight: 600 !important;
  color: var(--color-text) !important;
}

/* ─── TOMBOL SOSMED KAPSUL PARALLAX ─── */
.sosmed-links-para {
  display: flex;
  gap: 0.6rem;
  justify-content: center;
  margin-top: 0.8rem;
  width: 100%;
}

.btn-sosmed-para {
  display: inline-flex;
  align-items: center;
  justify-content: center !important;
  width: 38px !important;
  height: 38px !important;
  color: var(--color-text) !important;
  text-decoration: none;
  border: 1px solid rgba(61, 53, 48, 0.15) !important;
  border-radius: 50% !important;          /* Bentuk lingkaran premium */
  padding: 0 !important;
  background: #ffffff !important;          /* Latar belakang putih solid agar tidak tembus daun semak */
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1) !important; /* Drop shadow halus agar pop-out di atas daun */
  transition: all 0.3s ease;
  text-shadow: none !important;
  flex-shrink: 0 !important;
}

.btn-sosmed-para:hover {
  border-color: var(--color-accent) !important;
  color: #ffffff !important;
  background: var(--color-accent) !important; /* Mengubah background jadi gold saat dihover */
  box-shadow: 0 6px 15px rgba(184, 149, 106, 0.3) !important;
  transform: translateY(-2px);
}

.btn-sosmed-para .icon {
  width: 18px !important;                 /* Icon sedikit lebih besar & jelas */
  height: 18px !important;
  color: currentColor;
}

/* ─── RESPONSIVE LAYOUT CONSTRAINTS ─── */
@media (max-width: 420px) {

  /* Info Groom & Bride default sudah di-center di atas semak jati */
  .layer--info-groom,
  .layer--info-bride {
    bottom: 9vh !important; /* Di HP diturunkan sedikit agar tidak terlalu menutupi dada pengantin */
  }

  .info-card {
    padding: 1.1rem;
    max-width: 300px;
  }

  .info-card__short {
    font-size: 2rem !important; /* Biarkan tetap Playfair besar melayang indah */
  }

  .info-card__full {
    font-size: 1.1rem !important;
  }

  .info-card__relation {
    font-size: 0.88rem !important;
  }

  .info-card__parents {
    font-size: 0.92rem !important;
  }

  /* Ukuran panggung visual di hp */
  .layer--couple img {
    max-height: 72vh !important; /* Zoom close-up ekstra di HP */
  }



  .layer--semak img {
    height: var(--semak-height-mobile);
  }

  /* Ikon Sosmed Parallax Mobile */
  .sosmed-links-para {
    gap: 0.45rem !important;
  }
  .btn-sosmed-para {
    width: 32px !important;
    height: 32px !important;
  }
  .btn-sosmed-para .icon {
    width: 15px !important;
    height: 15px !important;
  }

  /* Overrides untuk merapatkan Countdown & Event 3 agar tidak terpotong di HP */
  .layer--info-countdown {
    gap: 1vh !important;
  }
  .info-card--countdown {
    padding: 0.8rem 1rem !important;
  }
  .info-card--countdown .countdown__intro {
    font-size: 0.75rem !important;
    margin-bottom: 0.1rem !important;
  }
  .info-card--countdown .countdown__title {
    font-size: 1.2rem !important;
    margin-bottom: 0.5rem !important;
  }
  .info-card--countdown .countdown__grid {
    gap: 0.4rem !important;
  }
  .info-card--countdown .countdown__unit {
    min-width: 48px !important;
    padding: 0.2rem 0 !important;
  }
  .info-card--countdown .countdown__value {
    font-size: 1.2rem !important;
  }
  .info-card--countdown .countdown__label {
    font-size: 0.55rem !important;
  }
  .info-card--countdown .countdown-streaming {
    margin-top: 0.5rem !important;
    padding-top: 0.5rem !important;
  }
  .info-card--countdown .countdown-streaming__info {
    font-size: 0.76rem !important;
    line-height: 1.35 !important;
    margin-bottom: 0.4rem !important;
    max-width: 250px !important;
  }
  .info-card--countdown .btn-para-action,
  .event-block--countdown3 .btn-para-action {
    padding: 0.35rem 1rem !important;
    font-size: 0.75rem !important;
  }

  .event-block--countdown3 {
    padding: 0.8rem 1.2rem !important;
  }
  .event-block--countdown3 .event-block__title {
    font-size: 1.15rem !important;
    margin-bottom: 0.3rem !important;
  }
  .event-block--countdown3 .event-block__date,
  .event-block--countdown3 .event-block__time,
  .event-block--countdown3 .event-block__venue {
    margin-bottom: 4px !important;
    gap: 2px !important;
  }
  .event-block--countdown3 .event-block__venue svg,
  .event-block--countdown3 .event-block__date svg,
  .event-block--countdown3 .event-block__time svg {
    width: 14px !important;
    height: 14px !important;
  }
  .event-block--countdown3 .event-block__address {
    font-size: 0.72rem !important;
    line-height: 1.3 !important;
    max-width: 250px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
  .event-block--countdown3 .event-block__actions {
    margin-top: 0.4rem !important;
    justify-content: center !important;
  }
}

/* ─── DYNAMIC CSS SCROLL SNAP & STORIES PROGRESS BAR (v1.1.0) ─── */
/* Progress Bar Immersive (Instagram Story Style) */
.stage-progress {
  position: absolute;
  top: 1.5rem;
  left: 50%;
  transform: translateX(-50%);
  width: 90%;
  max-width: 380px;
  display: flex;
  gap: 6px;
  z-index: 16; /* Di atas segalanya */
  opacity: 0;
  transition: opacity 0.5s ease;
  pointer-events: none;
}

#parallax-stage.stage-opened .stage-progress {
  opacity: 1;
}

.stage-progress__segment {
  flex: 1;
  height: 3px;
  background: rgba(255, 255, 255, 0.35);
  border-radius: 2px;
  overflow: hidden;
}

.stage-progress__fill {
  height: 100%;
  width: 0%;
  background: var(--color-accent-light); /* Champagne Gold */
  border-radius: 2px;
  will-change: width;
}

/* DYNAMIC CSS SCROLL SNAP — Dihapus (Fase 1 fix v1.0.0).
   CSS scroll-snap tidak lagi digunakan. Navigasi antar section ditangani
   sepenuhnya oleh smoothScrollTo() di parallax-engine.js.
   Dihapus karena konflik dengan JS animation menyebabkan "transisi ganda /
   lompat balik" di Android Chrome (Bug B). */

/* Kartu & Quote melayang dapat diklik */
.info-card,
.verse {
  cursor: pointer;
}

/* ─── OUTRO COUPLE LAYER (vProg 4.0 → 5.0+) ─── */
.layer--outro-couple {
  z-index: 13;                            /* Di atas semak (z-index 12) */
  position: absolute !important;
  inset: auto 0 0 0 !important;          /* Anker ke bawah, lebar penuh */
  height: 85vh !important;
  display: flex !important;
  align-items: flex-end !important;       /* Foto rata bawah */
  justify-content: center !important;     /* Foto rata tengah horizontal */
  opacity: 0;
  pointer-events: none;
  will-change: transform, opacity;
  transform-origin: bottom center;        /* Zoom tumbuh dari bawah tengah */
}

.layer--outro-couple img {
  width: 100%;
  max-width: 420px;
  height: auto;
  object-fit: contain;
  object-position: bottom center;
  display: block;
}

/* ─── OUTRO SCROLL HINT (vProg 4.0 -> 5.0) ─── */
.outro-scroll-hint {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 32vh;
  background: linear-gradient(to top, rgba(14, 18, 15, 0.95) 0%, rgba(14, 18, 15, 0.7) 45%, rgba(14, 18, 15, 0) 100%) !important;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  padding-bottom: 2.2rem;
  z-index: 15;
  pointer-events: none;
}

.outro-scroll-hint__text {
  font-family: var(--font-body);
  font-size: 0.82rem;
  font-weight: 500;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--color-accent-light);
  opacity: 0.85;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.6);
  margin-bottom: 0.4rem;
}

.outro-scroll-hint__arrow {
  color: var(--color-accent-light);
  font-size: 1.1rem;
  opacity: 0.85;
  animation: hintBounce 1.6s infinite ease-in-out;
}

@keyframes hintBounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(6px); }
}

/* ─── COUNTDOWN EVENT 3 STYLING ─── */
.layer--info-countdown {
  flex-direction: column !important;
  justify-content: center !important;
  gap: 1.8vh !important;
}

.countdown-event3-wrap {
  width: 100%;
  display: flex;
  justify-content: center;
  pointer-events: auto;
  margin-top: 0.2rem;
}

.event-block--countdown3 {
  max-width: 320px !important;
  width: 88% !important;
  text-align: center !important;
  align-items: center !important;
  align-self: center !important;
  margin-left: auto !important;
  margin-right: auto !important;
  
  /* Samakan persis dengan .info-card (Countdown Box) */
  background: rgba(250, 248, 245, 0.96) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  border: 1px solid rgba(184, 149, 106, 0.35) !important;
  border-radius: 16px !important;
  padding: 1.6rem !important;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.15) !important;
}

@media (max-width: 420px) {
  .event-block--countdown3 {
    max-width: 300px !important;
    padding: 1.2rem !important;
  }
}