/* ============================================================
   HERITAGE MOTION & SKELETON SUITE (CLASSIC JAVANESE WEDDING)
   - Tier 1: Hero Elements (.hm-hero, .hm-portrait, .hm-couple-name)
   - Tier 2: Dignified Respect (.hm-respect)
   - Tier 3: Practical Info (.hm-practical)
   - Card Containers: (.hm-card)
   - Gallery Gold Shimmer Skeleton
   ============================================================ */

/* 1. Reset Elementor default invisibility & cancel clashing Elementor keyframe animations */
.hm-hero,
.hm-portrait,
.hm-couple-name,
.hm-respect,
.hm-practical,
.hm-card {
  animation: none !important;
  will-change: opacity, transform, filter;
}

.hm-hero:not(.hm-revealed),
.hm-portrait:not(.hm-revealed),
.hm-couple-name:not(.hm-revealed),
.hm-respect:not(.hm-revealed),
.hm-practical:not(.hm-revealed),
.hm-card:not(.hm-revealed),
.hm-hero.elementor-invisible,
.hm-portrait.elementor-invisible,
.hm-couple-name.elementor-invisible,
.hm-respect.elementor-invisible,
.hm-practical.elementor-invisible,
.hm-card.elementor-invisible {
  visibility: visible !important;
  opacity: 0 !important;
}

/* ============================================================
   TIER 1: HERO SECTION HEADINGS & AKSARA JAWA
   ============================================================ */
.hm-hero {
  opacity: 0;
  transform: translateY(28px);
  filter: blur(6px);
  transition: opacity 1.1s cubic-bezier(0.16, 1, 0.3, 1),
              transform 1.1s cubic-bezier(0.16, 1, 0.3, 1),
              filter 1.1s cubic-bezier(0.16, 1, 0.3, 1) !important;
}
.hm-hero.hm-revealed {
  opacity: 1 !important;
  transform: translateY(0) !important;
  filter: blur(0) !important;
}

/* ============================================================
   TIER 1B: MEMPELAI PORTRAITS (Vani & Afif Frame + Photo)
   ============================================================ */
.hm-portrait {
  opacity: 0;
  transform: translateY(32px) scale(0.92);
  filter: blur(8px);
  transition: opacity 1.25s cubic-bezier(0.16, 1, 0.3, 1),
              transform 1.25s cubic-bezier(0.16, 1, 0.3, 1),
              filter 1.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
}
.hm-portrait.hm-revealed {
  opacity: 1 !important;
  transform: translateY(0) scale(1) !important;
  filter: blur(0) !important;
}

/* ============================================================
   TIER 1C: COUPLE NAMES ("Vani Fitri Sardi, S.M." & "Afif Muttadin Munir, S.Hum.")
   ============================================================ */
.hm-couple-name {
  opacity: 0;
  transform: translateY(24px);
  filter: blur(5px);
  transition: opacity 1.1s cubic-bezier(0.16, 1, 0.3, 1) 0.12s,
              transform 1.1s cubic-bezier(0.16, 1, 0.3, 1) 0.12s,
              filter 1.1s cubic-bezier(0.16, 1, 0.3, 1) 0.12s !important;
}
.hm-couple-name.hm-revealed {
  opacity: 1 !important;
  transform: translateY(0) !important;
  filter: blur(0) !important;
}

/* ============================================================
   TIER 2: DIGNIFIED RESPECT (Orang Tua, Ayat Suci, Quotes, Tanggal/Waktu)
   ============================================================ */
.hm-respect {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1) 0.1s,
              transform 0.9s cubic-bezier(0.16, 1, 0.3, 1) 0.1s !important;
}
.hm-respect.hm-revealed {
  opacity: 1 !important;
  transform: translateY(0) !important;
}

/* ============================================================
   TIER 3: PRACTICAL INFO (Alamat, Tombol Maps, Tombol Instagram)
   ============================================================ */
.hm-practical {
  opacity: 0;
  transform: translateY(14px) scale(0.96);
  transition: opacity 0.8s ease-out 0.15s,
              transform 0.8s ease-out 0.15s !important;
}
.hm-practical.hm-revealed {
  opacity: 1 !important;
  transform: translateY(0) scale(1) !important;
}

/* ============================================================
   CONTAINER CARDS (Kotak Akad, Resepsi, Ngunduh Mantu, RSVP, Rekening)
   ============================================================ */
.hm-card {
  opacity: 0;
  transform: translateY(35px) scale(0.96);
  transition: opacity 1.05s cubic-bezier(0.16, 1, 0.3, 1),
              transform 1.05s cubic-bezier(0.16, 1, 0.3, 1) !important;
}
.hm-card.hm-revealed {
  opacity: 1 !important;
  transform: translateY(0) scale(1) !important;
}

/* Override untuk preferensi OS (mencegah Windows Accessibility mematikan durasi animasi jadi 0s) */
@media (prefers-reduced-motion: reduce) {
  .hm-hero,
  .hm-portrait,
  .hm-couple-name,
  .hm-respect,
  .hm-practical,
  .hm-card {
    transition-duration: 0.85s !important;
    transition-delay: 0s !important;
  }
}

/* ============================================================
   GALLERY LUXURY GOLD SHIMMER SKELETON (ANTI NGE-BLINK)
   ============================================================ */
.elementor-gallery__container .e-gallery-item {
  position: absolute;
  background-color: #1a1614 !important;
  border-radius: 8px !important;
  overflow: hidden !important;
}

/* Semburat kilau emas mengalir */
.elementor-gallery__container .e-gallery-item::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(
    90deg,
    rgba(218, 165, 32, 0) 0%,
    rgba(218, 165, 32, 0.08) 30%,
    rgba(255, 223, 128, 0.24) 50%,
    rgba(218, 165, 32, 0.08) 70%,
    rgba(218, 165, 32, 0) 100%
  );
  background-size: 200% 100%;
  animation: goldShimmer 1.8s infinite linear;
  opacity: 1;
  transition: opacity 0.6s cubic-bezier(0.25, 1, 0.5, 1);
}

/* Halus memudar saat gambar siap */
.elementor-gallery__container .e-gallery-item.loaded::before,
.elementor-gallery__container .e-gallery-item:has(.e-gallery-image-loaded)::before {
  opacity: 0;
  pointer-events: none;
}

/* Gambar fade in anggun */
.elementor-gallery__container .e-gallery-image {
  opacity: 0;
  transition: opacity 0.6s cubic-bezier(0.25, 1, 0.5, 1),
              transform 0.6s cubic-bezier(0.25, 1, 0.5, 1);
}
.elementor-gallery__container .e-gallery-image.e-gallery-image-loaded {
  opacity: 1 !important;
}

@keyframes goldShimmer {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -200% 0;
  }
}