* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  background: #d8d1cb;
  overflow-x: hidden;
}


/* State Awal (Sebelum Animasi) */
.gift-anim-title, 
.gift-anim-left, 
.gift-anim-right {
  opacity: 0;
  transition: all 1s ease-out; /* Transisi dasar */
}

.gift-anim-left {
  transform: translateX(-50px);
}

.gift-anim-right {
  transform: translateX(50px);
}

.gift-anim-title {
  transform: translateY(30px);
}

/* State Saat Aktif (Triggered by JS) */
.gift-active .gift-anim-title,
.gift-active .gift-anim-left,
.gift-active .gift-anim-right {
  opacity: 1 !important;
  transform: translate(0, 0) !important;
}

/* Tambahkan delay agar lebih cinematic */
.gift-active .gift-anim-left { transition-delay: 0.3s; }
.gift-active .gift-anim-right { transition-delay: 0.5s; }

.gift-block {
  /* ... kode Anda yang lain ... */
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  transform: translateZ(0); /* Force Hardware Acceleration */
}

/* ===== NAVBAR BASE ===== */
.wedding-navbar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 9999;
  display: none;
  background: rgba(0,0,0,0.45);
  backdrop-filter: blur(6px);
  font-family: "Times New Roman", serif;
}

/* INNER */
.nav-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 20px;
}

.nav-brand {
  font-size: 13px;
  letter-spacing: 2px;
  color: #fff;
  text-transform: uppercase;
  opacity: 0.85;
}

/* ===== HAMBURGER ===== */
.nav-toggle {
  width: 24px;
  cursor: pointer;
  display: none;
}

.nav-toggle span {
  display: block;
  height: 2px;
  background: #fff;
  margin: 5px 0;
  transition: 0.3s;
}

/* ===== MENU ===== */
.nav-menu {
  list-style: none;
  margin: 0;
  padding: 0;
  text-align: center;
  background: rgba(0,0,0,0.6);
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.5s ease;
}

.nav-menu li {
  padding: 14px 0;
}

.nav-menu a {
  color: #fff;
  text-decoration: none;
  font-size: 13px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  opacity: 0.85;
  transition: opacity 0.3s ease;
}

.nav-menu a:hover {
  opacity: 1;
}

/* OPEN STATE */
.wedding-navbar.open .nav-menu {
  max-height: 500px;
}

/* ===== DESKTOP ===== */
@media (min-width: 769px) {
  .nav-toggle {
    display: none;
  }

  .nav-menu {
    max-height: none;
    display: flex;
    justify-content: center;
    gap: 26px;
    background: transparent;
    padding-bottom: 12px;
  }

  .nav-menu li {
    padding: 0;
  }
}

/* ===== MOBILE ===== */
@media (max-width: 768px) {
  .nav-toggle {
    display: block;
  }
}


/* ===== SECTION AWALAN OK===== */
/* ===== SECTION ===== */
.wedding-section {
  min-height: 100vh;
  background: url("../../images/emerald/paralaxbg1darkgreen.png") center/cover no-repeat;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 60px 20px;
  overflow: hidden;
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}

/* DESKTOP ONLY */
@media (min-width: 1024px) {
  .wedding-section {
    background-attachment: fixed;
  }
}

/* ===== WRAPPER ===== */
.invitation-wrapper {
  width: 860px;
  background: url("../../images/emerald/backgroundpertamadarkgreen.webp") center/cover no-repeat;
  border-radius: 480px 480px 0 0;
  box-shadow: 20px 20px 40px rgba(0,0,0,0.15);
  overflow: hidden;
  position: relative;
  margin-bottom: 0 !important;
  overflow: hidden;
}

/* ===== IMAGE ATAS ===== */
.hero-image {
  height: 720px;          
  overflow: hidden;
}

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

/* ===== ORNAMEN ===== */
.ornament-mawar {
  position: absolute;
  top: 620px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
}

.ornament-mawar img {
  width: 1020px;
}




/* ===== CONTENT ===== */
.invitation-content {
  padding: 120px 40px 80px;
  text-align: center;
  color: #ffffff;
  position: relative;
  z-index: 1;
}

/* ===== TEXT ===== */
.small-title {
  font-size: 20px;
  letter-spacing: 3px;
  margin-bottom: 10px;
  margin-top: 20px;
}

.main-names {
  font-family: 'Luxurious Script', cursive;
  font-size: 140px;
  margin-bottom: 20px;
  font-weight: 10;
  line-height:100px;
  margin-top: 40px;
}

.main-groom-bride {
  font-family: 'Luxurious Script', cursive;
  font-size: 100px;
  margin-bottom: 40px;
  font-weight: 10;
  line-height:80px;
  margin-top: 40px;
}

/* TANGGAL */
.DATE-AWALAN {
  font-family: 'Playfair Script', 'Great Vibes', cursive;
  font-size: 102px;
  margin: 25px 0 10px;
  color: #ffffff;
}

/* TEKS ITALIC */
.guest-note {
  font-size: 14px;
  color: #ffffff;
  margin-bottom: 40px;
}

/* BUNGA */
.flower {
  position: absolute;
  width: 220px;
  opacity: 0.9;
  pointer-events: none;
}

.flower-left {
  left: -45px;
  top: 400px;
}

.flower-right {
  right: -40px;
  bottom: 80px;
  transform: scaleX(-1);
}

.invite-text {
  font-size: 25px;
  margin-bottom: 20px;
  text-transform: uppercase;
  margin-top: 170px;
  letter-spacing: 3px;
}

.closing-text-header {
  font-size: 15px;
  text-transform: uppercase;
  margin-top: 40px;
  letter-spacing: 3px;
}

.person-name {
  font-size: 36px;
  margin-bottom: 10px;
  color: #131f1f;
}

.parents {
  font-size: 20px;
  line-height: 1.4;
  margin-bottom: 40px;
  color: #131f1f;
}

.ampersand {
  font-size: 28px;
  margin: 10px 0 20px;
  color: #131f1f;
}




/* ===== RESPONSIVE ===== */
@media (max-width: 600px) {


.hero-image {
  height: 520px;          
  overflow: hidden;
}

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

.invitation-wrapper {
    width: 100%;
    border-radius: 220px 220px 0 0;
  }

.ornament-mawar {
  position: absolute;
  top: 380px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
}

.ornament-mawar img {
  width: 720px;
}

.small-title {
  font-size: 20px;
  letter-spacing: 3px;
  margin-bottom: 30px;
  margin-top: 50px;
}

.invite-text {
  font-size: 20px;
  text-transform: uppercase;
  margin-top: 40px;
  letter-spacing: 3px;
}

  .main-names {
    font-size: 76px;
  }

  .invitation-content {
    padding: 100px 25px 60px;
  }

.person-name {
  font-size: 26px;
  margin-bottom: 10px;
}

.parents {
  font-size: 16px;
  line-height: 1.4;
  margin-bottom: 10px;
}


.DATE-AWALAN {
    font-size: 52px;
  }

  .flower {
    width: 160px;
  }
}

.flower-left {
  left: -45px;
  top: 400px;
}

.flower-right {
  right: -69px;
  bottom: 80px;
  transform: scaleX(-1);
}

/* ICON INSTAGRAM (FA) */
.instagram-fa {
  display: inline-block;
  margin-bottom: 12px;
  font-size: 18px;
  color: #0b1717;
  transition: 0.3s ease;
}

.instagram-fa:hover {
  color: #1f6f6f;
  transform: translateY(-2px);
}

/* HASHTAG */
.hashtag-instagram {
  display: inline-block;
  margin-top: 16px;
  font-size: 16px;
  letter-spacing: 1.2px;
  color: #0b1717;
  text-decoration: none;
  transition: 0.3s ease;
}

.hashtag-instagram:hover {
  color: #1f6f6f;
}

/* RESPONSIVE */
@media (max-width: 768px) {
  .portrait-frame {
    width: 140px;
    height: 180px;
  }
}


/* ===== REMOVE FRAME – CLEAN PNG LOOK ===== */
.portrait-frame {
  width: auto;
  height: auto;
  margin: 0 auto 16px;
  border: none;
  border-radius: 0;
  box-shadow: none;
  overflow: visible;
  background: none;
}

/* ===== CENTER COUPLE IMAGE (PNG CLEAN) ===== */
.portrait-frame {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 auto 18px;
  width: 100%;
  border: none;
  box-shadow: none;
  background: none;
}

/* IMAGE CENTER */
.portrait-frame img {
  display: block;
  margin: 0 auto;
  width: 220px;
  max-width: 100%;
  height: auto;
}

/* RESPONSIVE */
@media (max-width: 768px) {
  .portrait-frame img {
    width: 180px;
  }
}

@media (max-width: 480px) {
  .portrait-frame img {
    width: 160px;
  }
}


/* ===== COUNTDOWN SECTION ===== */
.countdown-section {
  width: 100%;
  padding: 50px 20px;
  background: url("../../images/emerald/backgroundcountdownsectiondarkgreen.webp") center/cover no-repeat;
  text-align: center;
  position: relative;
}

/* ===== GOLD GRADIENT OUTLINE (TOP & BOTTOM) ===== */
.countdown-section::before,
.countdown-section::after {
  content: "";
  position: absolute;
  left: 0;
  width: 100%;
  height: 4px; /* tebal garis */
  background: linear-gradient(
    90deg,
    #8c6b1f,
    #d4af37,
    #fff1a8,
    #d4af37,
    #8c6b1f
  );
}

.countdown-section::before {
  top: 0;
}

.countdown-section::after {
  bottom: 0;
}

/* ===== TITLE ===== */
.countdown-title {
  font-size: 20px;
  letter-spacing: 2px;
  margin-bottom: 30px;
  color: #dbd5ca;
  text-transform: uppercase;
}

/* ===== COUNTDOWN WRAP ===== */
.countdown-container {
  display: flex;
  justify-content: center;
  gap: 30px;
  flex-wrap: wrap;
}

/* ===== COUNT BOX ===== */
.countdown-box {
  width: 120px;
  height: 140px;
  background: #dbd5ca;
  border-radius: 12px;
  box-shadow: 0 10px 25px rgba(0,0,0,0.15);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

/* NUMBER */
.count-number {
  font-size: 32px;
  font-weight: 500;
  margin-bottom: 10px;
  color: #152121;
}

/* LABEL */
.count-label {
  font-size: 13px;
  letter-spacing: 2px;
  color: #152121;
}

@media (max-width: 600px) {
  .countdown-title {
    font-size: 16px;
    margin-bottom: 30px;
  }

  .countdown-container {
    gap: 10px;
  }

  .countdown-box {
    width: 75px;
    height: 110px;
  }

  .count-number {
    font-size: 22px;
  }

  .count-label {
    font-size: 10px;
  }
}

/* ===== DETAIL SECTION ===== */
.detail-section {
  background: url("../../images/emerald/paralaxbg2darkgreen.png") center/cover no-repeat;
  padding: 0 20px 100px;
}

/* DESKTOP ONLY */
@media (min-width: 1024px) {
  .detail-section {
    background-attachment: fixed;
  }
}


.detail-wrapper {
  width: 860px;
  margin: 0 auto;
  background: url("../../images/emerald/bgwrapperdarkgreendetail.webp") center/cover no-repeat;
  padding-right: 20px;
  padding-left: 20px;
  padding-bottom: 100px;
  padding-top: 10px;
  text-align: center;
  border-radius: 0px 0px 480px 480px;
}

.event-block {
  position: relative;
  /* tetap nempel kiri-kanan wrapper */
  margin-left: -20px;
  margin-right: -20px;
  margin-top: -10px;
  /* tinggi background */
  min-height: 1000px;
  /* padding konten */
  padding: 80px 10px 120px;

  background-size: cover;
  background-position: center;

  /* pastikan konten di atas */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
}

.block-reception {
  position: relative;
  /* tetap nempel kiri-kanan wrapper */
  margin-left: -20px;
  margin-right: -20px;
  margin-top: -60px;
  /* tinggi background */
  min-height: 1300px;
  /* padding konten */
  padding: 80px 10px 120px;
  background-size: cover;
  background-position: center;

  /* pastikan konten di atas */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
}

.holy-matrimony {
  background: url("../../images/emerald/backgroundholymatrimonydarkgreen.png") center/cover no-repeat;
}

.reception {
  background: url("../../images/emerald/backgroundreceptiondarkgreen.png") center/cover no-repeat;
}

@media (max-width: 480px) {
  .reception {
    background-size: 160% auto;   /* efek zoom-out */
    background-position: center/cover no-repeat;}

  .block-reception {
    min-height: 1200px;
  }
}

.event-time {
  font-size: 14px;
  letter-spacing: 1px;
  color: #4d4d4d;
  margin-bottom: 15px;
}

/* ===== TITLES ===== */
.section-title {
  font-size: 90px;
  color: #4d4d4d;
  font-weight: 100;
  font-family: 'Luxurious Script', cursive;
  letter-spacing: 2px;
}

@media (max-width: 480px) {
  .section-title {
  font-size: 60px;
  font-weight: 100;
  font-family: 'Luxurious Script', cursive;
}
}

.section-titlex {
  font-size: 70px;
  color: #ffffff;
  margin-bottom: 20px;
  font-family: 'Luxurious Script', cursive;
  font-weight: 100;
}



.location-name {
  font-size: 25px;
  margin-bottom: 5px;
  color: #4d4d4d;
  font-family: 'Times New Roman', Times, serif;
  font-weight: 100;
}

@media (max-width: 768px) {
  .location-name {
  font-size: 21px;
  }
}

.location-address {
  font-size: 14px;
  line-height: 1.8;
  margin-bottom: 5px;
  color: #4d4d4d;
}

.location-btn {
  display: inline-block;
  padding: 16px 42px;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.5px;
  text-decoration: none;
  color: #ffffff;

  /* SHAPE */
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.15);

  /* GRADIENT */
  background: linear-gradient(
    180deg,
    #2f6f55 0%,
    #1f4f3c 100%
  );

  /* DEPTH & GLOW */
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.25),
    inset 0 -1px 0 rgba(0, 0, 0, 0.35),
    0 8px 18px rgba(0, 0, 0, 0.35);

  transition: all 0.3s ease;
}

.location-btn:hover {
  background: linear-gradient(
    180deg,
    #3a8c6c 0%,
    #25604a 100%
  );

  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.35),
    inset 0 -1px 0 rgba(0, 0, 0, 0.4),
    0 10px 26px rgba(47, 111, 85, 0.6);

  transform: translateY(-1px);
}

/* ===== DRESS CODE ===== */

/* ===== ORNAMEN MAWAR DRESS CODE ===== */
.ornament-mawar-dresscode {
  position: absolute;
  top: -120px;                 /* naik ke atas section */
  left: 50%;
  transform: translateX(-50%);
  z-index: 4;
  width: 100%;
  display: flex;
  justify-content: center;
  pointer-events: none;
}

.ornament-mawar-dresscode img {
  width: 120%;
  max-width: 1020px;           /* TETAP GEDE */
  height: auto;
}

@media (max-width: 480px) {
  .ornament-mawar-dresscode {
    top: -100px;               /* disesuaikan mobile */
  }
  .ornament-mawar-dresscode img {
    max-width: 120vw;           /* adaptif layar */
  }
  .event-block-dresscode {
    padding-top: 180px;        /* beri ruang ornamen */
  }
}

.dress-code-block {
  background: url("../../images/emerald/backgrounddresscodedarkgreen.png") center/cover no-repeat;
  min-height: 900px;
  padding-top: 0px;
  padding-left: 20px;
  padding-right: 20px;
  padding-bottom: 100px;
  text-align: center;
  justify-content: center;
}

/* Container untuk lingkaran agar berjejer ke samping */
.color-row {
  display: flex;
  justify-content: center; /* Rata tengah horizontal */
  gap: 15px;              /* Jarak antar lingkaran */
  margin-bottom: 15px;    /* Jarak ke tulisan di bawahnya */
}

.circle {
  width: 50px;           
  height: 50px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.2); 
}

/* Definisi Warna Holy Matrimony */
.color-1 { background-color: #ffffff; }
.color-2 { background-color: #eae6dc; }
.color-3 { background-color: #1f3d2b; }


/* Mobile scaling agar tidak terlalu besar di HP */
@media (max-width: 480px) {
  .circle {
    width: 40px;
    height: 40px;
  }
  .color-row {
    gap: 10px;
  }
}



/* Mobile scaling */
@media (max-width: 480px) {
  .custom-dress {
    gap: 56px;
  }
}

.dress-desc {
  font-size: 16px;
  line-height: 1.2;
  margin-bottom: 40px;
  color: #ffffff;
}

.dress-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.dress-item p {
  margin-top: 12px;
  font-size: 14px;
  line-height: 1.4;
  color: #ffffff;
  margin-bottom: 50px;
}

.dress-item span {
  font-size: 12px;
  opacity: 0.7;
}

/* Mobile */
@media (max-width: 480px) {
  .dress-grid {
    gap: 24px;
  }

  .dress-item p {
    font-size: 13px;
  }

}

.event-block-dresscode {
  position: relative;
  /* tetap nempel kiri-kanan wrapper */
  margin-left: -20px;
  margin-right: -20px;
  margin-top: -310px;
  /* tinggi background */
  min-height: 600px;
  /* padding konten */
  padding-top: 250px;
  background-size: cover;
  background-position: center;
  /* pastikan konten di atas */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
}

@media (max-width: 480px) {
  .dress-code-block {
    min-height: 300px;
    padding-left: 10px;
    padding-right: 10px;
    padding-bottom: 90px;
    padding-top: 125px;
    margin-top: -310px;
  }
}




/* ===== OUR MOMENTS (NEW STYLE) ===== */
.om-section {
  margin-top: -10px;
  padding: 5px 20px 40px;
  text-align: center;
}

@media (max-width: 480px) {
  .om-section {
    margin-top: -70px;
  }
}

.om-sub {
  font-size: 12px;
  color: #0f1c1b;
  font-family: 'Times New Roman', Times, serif;
}

.om-title {
  font-size: 72px;
  margin: 8px 0 10px;
  color: #0f1c1b;
  letter-spacing: 1px;
  font-family: 'Luxurious Script', cursive;
  font-weight: 100;
}

/* GRID ELEGANT */
.om-grid {
  max-width: 920px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}

/* IMAGE */
.om-item {
  width: 100%;
  height: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  border-radius: 12px;
  cursor: pointer;
  transition: transform 0.6s ease, filter 0.6s ease;
}

/* hover elegan */
.om-item:hover {
  transform: scale(1.04);
  filter: brightness(0.85);
}

/* variasi tinggi */
.om-item:nth-child(3n) {
  aspect-ratio: 3 / 5;
}

.om-item:nth-child(4n) {
  aspect-ratio: 4 / 3;
}

/* ===== POPUP SLIDER ===== */
.om-popup {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.92);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}

.om-popup img {
  max-width: 88%;
  max-height: 88%;
  object-fit: contain;
  animation: fadeZoom 0.4s ease;
}

@keyframes fadeZoom {
  from {
    opacity: 0;
    transform: scale(0.95);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

.om-close {
  position: absolute;
  top: 28px;
  right: 32px;
  font-size: 36px;
  color: white;
  cursor: pointer;
  opacity: 0.7;
}

.om-close:hover {
  opacity: 1;
}

.om-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  font-size: 40px;
  color: white;
  cursor: pointer;
  opacity: 0.6;
  user-select: none;
}

.om-nav:hover {
  opacity: 1;
}

.om-prev { left: 24px; }
.om-next { right: 24px; }

/* ===== MOBILE ===== */
@media (max-width: 768px) {
  .om-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
  }

  .om-title {
    font-size: 46px;
  }

  .om-popup img {
    max-width: 95%;
    max-height: 95%;
  }

  .om-nav {
    font-size: 32px;
  }
}

/* ===== OUR MOMENTS + WEDDING GIFT BACKGROUND ===== */
.gift-wrapper-bg {
  position: relative;
  /* TEMBUS padding detail-wrapper */
  margin-left: -20px;
  margin-right: -20px;
  background: url("../../images/emerald/backgroundbawahdarkgreen.png") center/cover no-repeat;
  padding: 10px 20px 140px; /* balik ke nilai normal */
  overflow: hidden;
}


/* ===== WEDDING GIFT (ELEGANT STYLE) ===== */
.wedding-gift-section {
  padding: 120px 20px;
  text-align: center;
  font-family: 'Playfair Display', serif;
}

/* ===== TITLE ===== */
.gift-title {
  font-size: 64px;
  letter-spacing: 3px;
  margin-bottom: 20px;
  color: #ffffff;
  font-family: 'Luxurious Script', cursive;
  font-weight: 100;
}

/* ===== WRAPPER ===== */
.gift-wrapper {
  display: flex;
  flex-direction: column;
  gap: 70px;
  max-width: 900px;
  margin: auto;
}

/* ===== CARD ===== */
.gift-block {
  background: url("../../images/emerald/bgwrapperdarkgreendetail.webp") center/cover no-repeat;
  padding: 45px 40px;
  max-width: 520px;
  margin: auto;
  border-radius: 18px;
  box-shadow: 0 18px 45px rgba(0,0,0,0.05);
  position: relative;
}


/* ===== SUBTITLE ===== */
.gift-subtitle {
  font-size: 18px;
  letter-spacing: 1px;
  margin-bottom: 22px;
  color: #0f1c1b;
  text-transform: uppercase;
}

/* ===== TEXT ===== */
.gift-text {
  font-size: 14px;
  line-height: 1.9;
  color: #0f1c1b;
  margin-bottom: 28px;
}

/* ===== BANK INFO ===== */
.bank-info {
  margin-top: 25px;
  color: #0f1c1b;
}

.bank-logo {
  width: 80px;
  margin-bottom: 16px;
  opacity: 0.9;
}

.rekening {
  font-size: 15px;
  letter-spacing: 2px;
  font-weight: 500;
  margin-bottom: 6px;
  color: #0f1c1b;
}

.nama-rekening {
  font-size: 13px;
  margin-bottom: 22px;
  color: #0f1c1b;
}

/* ===== COPY BUTTON ===== */

.copyBtn {
  display: inline-block;
  padding: 16px 42px;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.5px;
  text-decoration: none;
  color: #ffffff;
  /* SHAPE */
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  /* GRADIENT */
  background: linear-gradient(
    180deg,
    #2f6f55 0%,
    #1f4f3c 100%
  );
  /* DEPTH & GLOW */
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.25),
    inset 0 -1px 0 rgba(0, 0, 0, 0.35),
    0 8px 18px rgba(0, 0, 0, 0.35);
  transition: all 0.3s ease;
}

.copyBtn:hover {
  background: linear-gradient(
    180deg,
    #3a8c6c 0%,
    #25604a 100%
  );
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.35),
    inset 0 -1px 0 rgba(0, 0, 0, 0.4),
    0 10px 26px rgba(47, 111, 85, 0.6);
  transform: translateY(-1px);
}

/* ===== DELIVERY LINK ===== */
.gift-link {
  display: inline-block;
  margin-top: 12px;
  font-size: 13px;
  letter-spacing: 1px;
  text-decoration: none;
  position: relative;
  padding-bottom: 4px;

  /* COLOR MATCH */
  color: #114430;
  transition: color 0.3s ease;
}

.gift-link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;

  /* GRADIENT UNDERLINE */
  background: linear-gradient(
    90deg,
    #2f6f55 0%,
    #1f4f3c 100%
  );

  transform: scaleX(0.4);
  transform-origin: center;
  transition: transform 0.3s ease, background 0.3s ease;
}

.gift-link:hover {
  color: #114430;
}

.gift-link:hover::after {
  transform: scaleX(1);
  background: linear-gradient(
    90deg,
    #3a8c6c 0%,
    #25604a 100%
  );
}

/* ===== MOBILE ===== */
@media (max-width: 768px) {
  .gift-title {
    font-size: 56px;
  }

  .gift-block {
    padding: 35px 25px;
  }
}


/* ===== RSVP & WISH ===== */
/* ===== RSVP & WISH ===== */
.rsvp-section,
.wish-section {
  margin-top: 10px;
  text-align: center;
  color: rgba(255,255,255,0.9);
}

.section-title {
  color: #ffffff;
}

.rsvp-subtitle,
.wish-subtitle {
  font-size: 13px;
  line-height: 1.8;
  margin-bottom: 40px;
  color: white;
}

/* FORM */
.rsvp-form,
.wish-form {
  max-width: 520px;
  margin: 0 auto;
  font-family: 'Times New Roman', Times, serif;
  color: white;
}

/* INPUT & SELECT */
.rsvp-input-name,
.rsvp-input-guest,
.wish-input-name,
.wish-input-text {
  width: 100%;
  border: none;
  border-bottom: 1px solid rgba(255,255,255,0.35);
  background: transparent;
  padding: 12px 6px;
  font-size: 13px;
  margin-bottom: 30px;
  outline: none;
  color: #ffffff;
  font-family: 'Times New Roman', Times, serif;
}

/* placeholder color */
.rsvp-input-name::placeholder,
.wish-input-name::placeholder,
.wish-input-text::placeholder {
  color: white;
}

/* select option (dropdown) */
.rsvp-input-guest option {
  background: #1a1a1a;
  color: #ffffff;
}

/* TEXTAREA */
.wish-input-text {
  resize: none;
  min-height: 90px;
}

/* BUTTON */
.rsvp-btn-send,
.wish-btn-send {
  background: transparent;
  border: 1px solid rgba(255,255,255,0.5);
  padding: 10px 28px;
  font-size: 12px;
  cursor: pointer;
  transition: all 0.3s ease;
  color: #ffffff;
  font-family: 'Times New Roman', Times, serif;
  text-transform: uppercase;
}

.rsvp-btn-send:hover,
.wish-btn-send:hover {
  background: rgba(255,255,255,0.12);
}

/* ===== WISH LIST ===== */
.wish-list {
  margin-top: 40px;
  max-height: calc(5 * 70px + 4 * 30px);
  overflow-y: auto;
  padding: 10px 15px;
  text-align: left;
  border-radius: 8px;
  background: rgba(255,255,255,0.05);
}

/* scrollbar */
.wish-list::-webkit-scrollbar {
  width: 6px;
}
.wish-list::-webkit-scrollbar-thumb {
  background-color: rgba(255,255,255,0.3);
  border-radius: 3px;
}

/* ITEM */
.wish-list .wish-item {
  margin-bottom: 15px;
  font-size: 13px;
  line-height: 1.7;
  opacity: 0.9;
  color: #ffffff;
  word-break: break-word;
  padding: 10px 0;
  border-bottom: 1px solid rgba(255,255,255,0.15);
}

.wish-list .wish-item:last-child {
  border-bottom: none;
}

/* RSVP FEEDBACK */
.rsvp-feedback {
  margin-top: 20px;
  font-size: 12px;
  color: rgba(255,255,255,0.75);
}

/* MOBILE */
@media (max-width: 600px) {
  .rsvp-section,
  .wish-section {
    margin-top: 80px;
  }
}


/* ===== CLOSING SECTION ===== */
.closing-section {
  margin-top: 80px;
  padding-bottom: 60px;
  text-align: center;
}

.closing-text {
  font-size: 46px;
  margin-bottom: 20px;
  color: #4d4d4d;
  text-transform: uppercase;
}

.closing-text span {
  display: block;
  font-size: 13px;
  font-style: normal;
  opacity: 0.7;
  margin-bottom: 20px;

}

/* LOGO */
.closing-logo img {
  width: 60px;
  opacity: 0.6;
  transition: all 0.3s ease;
  margin-top: 20px;
}


/* MOBILE */
@media (max-width: 600px) {
  .closing-section {
    margin-top: 90px;
  }

  .closing-text {
    font-size: 15px;
  }

  .closing-logo img {
    width: 100px;
  }
}

@media (max-width: 768px) {
  .detail-wrapper,
  .invitation-wrapper {
    width: 100%;
    max-width: 100%;
    overflow: hidden;
  }

  .event-info,
  .dress-grid {
    flex-wrap: wrap;
  }
}


.hidden {
  display: none;
}

/* ===== GATES ===== */
#gates{
  position:relative;
  height:100vh;
  min-height:680px;
  background-size:cover;
  background-position:center;
  display:flex;
  align-items:center;
  justify-content:center;
}

#gates::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(
    180deg,
    rgba(0, 0, 0, 0.418) 10%,
    rgba(2, 2, 2, 0.377) 80%
  );
}


.gates-inner{
  position:relative;
  z-index:2;
  text-align:center;
  max-width:980px;
}


.invite-card{
  width:100%;
  max-width:520px;          
  background: url("") center/cover no-repeat;
  border-radius:32px;
  overflow:hidden;
  box-shadow:0 24px 48px rgba(0,0,0,0.25);
  margin:0 auto;
}

.card-header{
  padding:36px 40px 28px;
  text-align:center;
}
.top-label{
  font-size:18px;
  margin-bottom:16px;
  color: #ffffff;
  font-family: 'Times New Roman', Times, serif;
}

.title{
  font-size:66px;
  margin-top: 4px;
  margin-bottom: 20px;
  color: #ffffff;
  font-family: 'Luxurious Script', cursive;
  font-weight: 100;
  line-height: 50px;
}

.date{
  font-size:18px;
  margin-bottom:16px;
  color: #ffffff;
  font-family: 'Times New Roman', Times, serif;
}

/* IMAGE */
.card-image img{
  width:100%;
  height:380px;
  object-fit:cover;
  display:block;
}

/* CONTENT BAWAH */
.card-content{
  padding:4px 40px 40px;
  text-align:center;
}

.dear{
  font-size:20px;
  margin-bottom:8px;
  color: #ffffff;
  font-family: 'Times New Roman', Times, serif;
}

.subtitle{
  font-size:14px;
  margin-bottom:30px;
  color: #ffffff;
  font-style: italic;
}

/* BUTTON */
.open-btn{
   display: inline-block;
  padding: 16px 72px;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.5px;
  text-decoration: none;
  color: #ffffff;
  /* SHAPE */
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  /* GRADIENT */
  background: linear-gradient(
    180deg,
    #2f6f55 0%,
    #1f4f3c 100%
  );
  /* DEPTH & GLOW */
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.25),
    inset 0 -1px 0 rgba(0, 0, 0, 0.35),
    0 8px 18px rgba(0, 0, 0, 0.35);
  transition: all 0.3s ease;
}

.open-btn {
  background: linear-gradient(
    180deg,
    #3a8c6c 0%,
    #25604a 100%
  );
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.35),
    inset 0 -1px 0 rgba(0, 0, 0, 0.4),
    0 10px 26px rgba(47, 111, 85, 0.6);
  transform: translateY(-1px);
}

/* MOBILE */
@media (max-width:480px){
  .invite-card{
    max-width:360px;
    border-radius:26px;
  }

  .card-header,
  .card-content{
    padding:26px 24px;
  }

  .title{
    font-size:42px;
  }

  .card-image img{
    height:340px;
  }
}


/* SECTION PERTAMA */
#vinylControl {
  position: fixed;
  bottom: 20px;
  left: 20px;
  width: 60px;
  height: 60px;
  cursor: pointer;
  z-index: 1000;
  transition: transform 0.3s ease-in-out;
}

/* Animasi vinyl muter */
#vinylControl.playing {
  animation: spin 4s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* Responsif Mobile */
@media (max-width: 768px) {
  #vinylControl {
    width: 50px;
    height: 50px;
    bottom: 15px;
    left: 15px;
  }
}

/* ===============================
   OUR STORY SECTION
================================ */
.os-image-box,
.os-description,
.os-timeline,
.os-closing {
  font-family: "Times New Roman", Times, serif;
  color: #333;
  text-align: center;
}

/* IMAGE */
.os-image-box img {
  width: 100%;
  max-width: 520px;
  margin: 20px auto 40px;
  display: block;
}

/* TITLE & DESCRIPTION */
.os-title {
  font-size: 36px;
  font-weight: bold;
  margin-bottom: 16px;
  text-transform: uppercase;
  color: #4d4d4d;
}

.os-text {
  font-size: 15px;
  line-height: 1.8;
  max-width: 620px;
  margin: 0 auto 10px;
  color: #4d4d4d;
}

/* ===============================
   TIMELINE CENTER
================================ */
.os-timeline {
  position: relative;
  max-width: 760px;
  margin: 0 auto 70px;
  padding: 20px 0;
}

/* CENTER LINE */
.os-line {
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 1px;
  background: #bdbcbc;
  transform: translateX(-50%);
}

/* EVENT */
.os-event {
  position: relative;
  width: 50%;
  padding: 10px 40px;
  box-sizing: border-box;
}

/* LEFT EVENTS */
.os-event:nth-child(even) {
  left: 0;
  text-align: right;
}

/* RIGHT EVENTS */
.os-event:nth-child(odd) {
  left: 50%;
  text-align: left;
}

/* DOT */
.os-dot {
  position: absolute;
  top: 18px;
  width: 12px;
  height: 12px;
  background: #4d4d4d;
  border-radius: 50%;
  z-index: 2;
}

/* DOT POSITION */
.os-event:nth-child(even) .os-dot {
  right: -6px;
}

.os-event:nth-child(odd) .os-dot {
  left: -6px;
}

/* CONTENT */
.os-content h4 {
  margin: 0;
  font-size: 18px;
  font-weight: normal;
}

.os-content p {
  margin-top: 6px;
  font-size: 14px;
  color: #555;
}

/* ===============================
   CLOSING TEXT
================================ */
.os-closing p {
  max-width: 520px;
  margin: 0 auto;
  font-size: 14px;
  font-style: italic;
  line-height: 1.7;
  color: #555;
}

/* ===============================
   RESPONSIVE MOBILE
================================ */
@media (max-width: 680px) {

  .os-title {
    font-size: 30px;
  }

  .os-text {
    font-size: 14px;
  }

  /* Timeline jadi satu kolom */
  .os-line {
    left: 20px;
  }

  .os-event,
  .os-event:nth-child(even),
  .os-event:nth-child(odd) {
    width: 100%;
    left: 0;
    padding: 10px 20px 10px 50px;
    text-align: left;
  }

  .os-dot,
  .os-event:nth-child(even) .os-dot,
  .os-event:nth-child(odd) .os-dot {
    left: 14px;
    right: auto;
  }
}

/* ===============================
   SCROLL REVEAL ANIMATION
================================ */

/* state awal */
.reveal,
.reveal-stagger > * {
  opacity: 0;
  transform: translateY(28px);
  transition:
    opacity 0.9s ease,
    transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}

/* saat aktif */
.reveal.active,
.reveal-stagger.active > * {
  opacity: 1;
  transform: translateY(0);
}

/* delay bertahap */
.reveal-stagger.active > *:nth-child(1) { transition-delay: 0.1s; }
.reveal-stagger.active > *:nth-child(2) { transition-delay: 0.25s; }
.reveal-stagger.active > *:nth-child(3) { transition-delay: 0.4s; }
.reveal-stagger.active > *:nth-child(4) { transition-delay: 0.55s; }

/* optional: smooth feeling */
@media (prefers-reduced-motion: reduce) {
  .reveal,
  .reveal-stagger > * {
    transition: none;
    opacity: 1;
    transform: none;
  }
}


/* ===============================
   COUNTDOWN SCROLL ANIMATION
================================ */

.cd-reveal {
  opacity: 0;
  transition:
    transform 0.85s cubic-bezier(0.22, 1, 0.36, 1),
    opacity 0.85s ease;
}

/* arah awal */
.cd-reveal.from-top {
  transform: translateY(-35px);
}

.cd-reveal.from-bottom {
  transform: translateY(35px);
}

/* aktif */
.cd-reveal.active {
  opacity: 1;
  transform: translateY(0);
}

/* delay gantian */
.cd-reveal:nth-child(1) { transition-delay: 0.15s; }
.cd-reveal:nth-child(2) { transition-delay: 0.35s; }
.cd-reveal:nth-child(3) { transition-delay: 0.55s; }
.cd-reveal:nth-child(4) { transition-delay: 0.75s; }

/* Judul */
.cd-title {
  opacity: 0;
  transform: translateY(25px);
  transition:
    transform 0.8s cubic-bezier(0.22, 1, 0.36, 1),
    opacity 0.8s ease;
  transition-delay: 1s;
}

.cd-title.active {
  opacity: 1;
  transform: translateY(0);
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  .cd-reveal,
  .cd-title {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ===============================
   HOLY MATRIMONY – CINEMATIC
================================ */

.reveal-matrimony * {
  opacity: 0;
}

/* Title */
.mat-title {
  transform: translateY(25px);
  filter: blur(6px);
  transition: 
    transform 0.9s cubic-bezier(0.22, 1, 0.36, 1),
    opacity 0.9s ease,
    filter 0.9s ease;
}

/* Place */
.mat-place {
  transform: translateX(-30px);
  transition:
    transform 0.8s cubic-bezier(0.22, 1, 0.36, 1),
    opacity 0.8s ease;
}

/* Address */
.mat-address {
  letter-spacing: 0.25em;
  transition:
    letter-spacing 0.8s ease,
    opacity 0.8s ease;
}

/* Time */
.mat-time {
  transform: translateY(20px);
  transition:
    transform 0.8s cubic-bezier(0.22, 1, 0.36, 1),
    opacity 0.8s ease;
}

/* Button */
.mat-btn {
  position: relative;
  overflow: hidden;
  transform: translateY(30px);
  transition:
    transform 0.8s cubic-bezier(0.22, 1, 0.36, 1),
    opacity 0.8s ease;
}

/* sheen effect */
.mat-btn::after {
  content: "";
  position: absolute;
  top: 0;
  left: -120%;
  width: 120%;
  height: 100%;
  background: linear-gradient(
    120deg,
    transparent,
    rgba(255,255,255,0.35),
    transparent
  );
}

/* ACTIVE STATE */
.reveal-matrimony.active .mat-title {
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
  transition-delay: 0.1s;
}

.reveal-matrimony.active .mat-place {
  opacity: 1;
  transform: translateX(0);
  transition-delay: 0.35s;
}

.reveal-matrimony.active .mat-address {
  opacity: 1;
  letter-spacing: 0.08em;
  transition-delay: 0.55s;
}

.reveal-matrimony.active .mat-time {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.75s;
}

.reveal-matrimony.active .mat-btn {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 1s;
}

/* sheen runs once */
.reveal-matrimony.active .mat-btn::after {
  animation: sheen 1.4s ease forwards;
  animation-delay: 1.15s;
}

@keyframes sheen {
  to { left: 120%; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .reveal-matrimony *,
  .mat-btn::after {
    animation: none;
    transition: none;
    opacity: 1;
    transform: none;
    filter: none;
  }
}

/* ===============================
   WEDDING RECEPTION – CINEMATIC
================================ */

.reveal-reception * {
  opacity: 0;
}

/* Title */
.rec-title {
  transform: translateY(30px);
  transition:
    transform 0.9s cubic-bezier(0.22, 1, 0.36, 1),
    opacity 0.9s ease;
}

/* Place – clip reveal */
.rec-place {
  clip-path: inset(0 100% 0 0);
  transition:
    clip-path 1s cubic-bezier(0.22, 1, 0.36, 1),
    opacity 0.6s ease;
}

/* Address – gentle scale */
.rec-address {
  transform: scale(0.96);
  transition:
    transform 0.8s ease,
    opacity 0.8s ease;
}

/* Time */
.rec-time {
  transform: translateY(20px);
  transition:
    transform 0.7s cubic-bezier(0.22, 1, 0.36, 1),
    opacity 0.7s ease;
}

/* Button */
.rec-btn {
  position: relative;
  transform: translateY(25px);
  transition:
    transform 0.8s cubic-bezier(0.22, 1, 0.36, 1),
    opacity 0.8s ease;
}

/* underline draw */
.rec-btn::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -6px;
  width: 0;
  height: 1px;
  background: currentColor;
  transform: translateX(-50%);
  transition: width 0.8s ease;
}

/* ACTIVE */
.reveal-reception.active .rec-title {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.1s;
}

.reveal-reception.active .rec-place {
  opacity: 1;
  clip-path: inset(0 0 0 0);
  transition-delay: 0.35s;
}

.reveal-reception.active .rec-address {
  opacity: 1;
  transform: scale(1);
  transition-delay: 0.6s;
}

.reveal-reception.active .rec-time {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.8s;
}

.reveal-reception.active .rec-btn {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 1s;
}

.reveal-reception.active .rec-btn::after {
  width: 70%;
  transition-delay: 1.1s;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .reveal-reception *,
  .rec-btn::after {
    transition: none;
    opacity: 1;
    transform: none;
    clip-path: none;
  }
}
/* ===============================
   DRESS CODE – CINEMATIC CLEAN
   (NO CLASS CHANGE)
================================ */

#dresscode h2,
#dresscode p,
#dresscode .dress-item {
  opacity: 0;
}

/* TITLE */
#dresscode h2 {
  transform: translateY(25px);
  transition:
    transform 0.9s cubic-bezier(0.22, 1, 0.36, 1),
    opacity 0.9s ease;
}

/* DESCRIPTION */
#dresscode .dress-desc {
  transform: translateY(20px);
  transition:
    transform 0.8s cubic-bezier(0.22, 1, 0.36, 1),
    opacity 0.8s ease;
}

/* DRESS ITEMS */
#dresscode .dress-item:first-child {
  transform: translateY(35px);
  transition:
    transform 0.9s cubic-bezier(0.22, 1, 0.36, 1),
    opacity 0.9s ease;
}

#dresscode .dress-item:last-child {
  transform: translateY(-35px);
  transition:
    transform 0.9s cubic-bezier(0.22, 1, 0.36, 1),
    opacity 0.9s ease;
}

/* COLOR STACK MICRO EFFECT */
#dresscode .color-stack {
  transform: scale(0.9);
  transition: transform 0.8s ease;
}

/* ACTIVE STATE */
#dresscode.dc-active h2 {
  opacity: 1;
  transform: translateY(0);
}

#dresscode.dc-active .dress-desc {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.25s;
}

#dresscode.dc-active .dress-item:first-child {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.5s;
}

#dresscode.dc-active .dress-item:last-child {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.75s;
}

#dresscode.dc-active .color-stack {
  transform: scale(1);
  transition-delay: 0.9s;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  #dresscode * {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* ===============================
   OUR MOMENTS – CINEMATIC
================================ */

.om-cinematic {
  overflow: hidden;
}

/* TEXT */
.om-anim-text {
  opacity: 0;
  transform: translateY(25px);
  transition:
    opacity 0.9s ease,
    transform 0.9s cubic-bezier(0.22, 1, 0.36, 1),
    letter-spacing 0.9s ease;
}

.om-sub.om-anim-text {
  letter-spacing: 0.25em;
}

.om-cinematic.om-active .om-sub {
  opacity: 1;
  transform: translateY(0);
  letter-spacing: 0.35em;
}

.om-cinematic.om-active .om-title {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.25s;
}

/* GRID ITEMS */
.om-anim-item {
  opacity: 0;
  transform: translateY(40px) scale(0.96);
  transition:
    opacity 0.9s ease,
    transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
}

/* ACTIVE GRID */
.om-cinematic.om-active .om-anim-item {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* STAGGER EFFECT */
.om-cinematic.om-active .om-anim-item:nth-child(1) { transition-delay: 0.4s; }
.om-cinematic.om-active .om-anim-item:nth-child(2) { transition-delay: 0.55s; }
.om-cinematic.om-active .om-anim-item:nth-child(3) { transition-delay: 0.7s; }
.om-cinematic.om-active .om-anim-item:nth-child(4) { transition-delay: 0.85s; }
.om-cinematic.om-active .om-anim-item:nth-child(5) { transition-delay: 1s; }
.om-cinematic.om-active .om-anim-item:nth-child(6) { transition-delay: 1.15s; }

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .om-anim-text,
  .om-anim-item {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}


/* ===============================
   WEDDING GIFT – CINEMATIC
================================ */

.gift-cinematic {
  overflow: hidden;
}

/* TITLE */
.gift-anim-title {
  opacity: 0;
  transform: translateY(30px);
  letter-spacing: 0.15em;
  transition:
    opacity 1s ease,
    transform 1s cubic-bezier(0.22, 1, 0.36, 1),
    letter-spacing 1s ease;
}

.gift-cinematic.gift-active .gift-anim-title {
  opacity: 1;
  transform: translateY(0);
  letter-spacing: 0.25em;
}

/* BLOCK BASE */
.gift-block {
  will-change: transform, opacity;
}

/* LEFT BLOCK */
.gift-anim-left {
  opacity: 0;
  transform: translateX(-60px) scale(0.97);
  transition:
    opacity 1.1s ease,
    transform 1.1s cubic-bezier(0.22, 1, 0.36, 1);
}

/* RIGHT BLOCK */
.gift-anim-right {
  opacity: 0;
  transform: translateX(60px) scale(0.97);
  transition:
    opacity 1.1s ease,
    transform 1.1s cubic-bezier(0.22, 1, 0.36, 1);
}

/* ACTIVE STATE */
.gift-cinematic.gift-active .gift-anim-left {
  opacity: 1;
  transform: translateX(0) scale(1);
  transition-delay: 0.35s;
}

.gift-cinematic.gift-active .gift-anim-right {
  opacity: 1;
  transform: translateX(0) scale(1);
  transition-delay: 0.55s;
}

/* BANK INFO – MICRO REVEAL */
.bank-info,
.gift-link {
  opacity: 0;
  transform: translateY(20px);
  transition:
    opacity 0.9s ease,
    transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}

.gift-cinematic.gift-active .bank-info {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.8s;
}

.gift-cinematic.gift-active .gift-link {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 1s;
}

/* REDUCED MOTION */
@media (prefers-reduced-motion: reduce) {
  .gift-cinematic *,
  .gift-anim-title {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* ===============================
   RSVP & WISH – CINEMATIC FORM
================================ */

.rsvp-cinematic,
.wish-cinematic {
  overflow: hidden;
}

/* ===== TITLE ===== */
.rsvp-cinematic .section-title,
.wish-cinematic .section-title {
  opacity: 0;
  transform: translateY(30px);
  transition:
    opacity 1s ease,
    transform 1s cubic-bezier(0.22, 1, 0.36, 1);
}

/* ===== SUBTITLE ===== */
.rsvp-cinematic .rsvp-subtitle,
.wish-cinematic .wish-subtitle {
  opacity: 0;
  transform: translateY(25px);
  transition:
    opacity 0.9s ease,
    transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}

/* ===== FORM ELEMENT BASE ===== */
.rsvp-form input,
.rsvp-form select,
.rsvp-btn-send,
.wish-form input,
.wish-form textarea,
.wish-btn-send {
  opacity: 0;
  transform: translateY(20px);
  transition:
    opacity 0.8s ease,
    transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}

/* ===== ACTIVE STATES ===== */
.rsvp-cinematic.rsvp-active .section-title,
.wish-cinematic.wish-active .section-title {
  opacity: 1;
  transform: translateY(0);
}

.rsvp-cinematic.rsvp-active .rsvp-subtitle,
.wish-cinematic.wish-active .wish-subtitle {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.2s;
}

/* RSVP SEQUENCE */
.rsvp-cinematic.rsvp-active .rsvp-input-name {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.4s;
}

.rsvp-cinematic.rsvp-active .rsvp-input-guest {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.55s;
}

.rsvp-cinematic.rsvp-active .rsvp-btn-send {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.7s;
}

/* WISH SEQUENCE */
.wish-cinematic.wish-active .wish-input-name {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.4s;
}

.wish-cinematic.wish-active .wish-input-text {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.55s;
}

.wish-cinematic.wish-active .wish-btn-send {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.75s;
}

/* ===== BUTTON MICRO CINEMATIC ===== */
.rsvp-btn-send,
.wish-btn-send {
  will-change: transform;
}

.rsvp-btn-send:hover,
.wish-btn-send:hover {
  transform: translateY(-2px);
}

/* REDUCED MOTION */
@media (prefers-reduced-motion: reduce) {
  .rsvp-cinematic *,
  .wish-cinematic * {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* ================= PRELOADER ================= */
#preloader {
  position: fixed;
  inset: 0;
  background: #ffffff;
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.8s ease, visibility 0.8s ease;
}

.loader-content {
  width: 200px; /* Lebar area loading */
  text-align: center;
}

/* Logo Favicon */
.loader-logo {
  width: 40px;
  height: auto;
  margin-bottom: 20px;
  animation: fadeIn 0.8s ease;
}

/* Progress Bar Container */
.progress-container {
  width: 100%;
  height: 2px; /* Tipis biar elegan */
  background: #f0f0f0;
  border-radius: 10px;
  overflow: hidden;
  margin-bottom: 12px;
}

/* Progress Bar Inner */
.progress-bar {
  width: 0%; /* Start dari 0 */
  height: 100%;
  background: #1a1a1a; /* Warna bar gelap premium */
  transition: width 0.4s ease; /* Transisi pas nambah % */
}

.loading-text {
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: #888888;
}

#preloader.hide {
  opacity: 0;
  visibility: hidden;
}