*{box-sizing:border-box} :root{--cream:#fbf9f5;--paper:#fffefa;--maroon:#70283c;--maroon-dark:#451523;--gold:#b6a071;--ink:#292525;--muted:#726c69}
html{scroll-behavior:smooth}body{margin:0;background:var(--paper);color:var(--ink);font-family:Poppins,Arial,sans-serif;font-size:14px;line-height:1.75}
h1,h2,h3{font-family:"Cormorant Garamond",Georgia,serif;font-weight:400}h2{font-size:clamp(2.8rem,7vw,4.6rem);line-height:1.02;margin:6px 0 22px}h2 i,h1 i{color:var(--maroon);font-weight:400}.eyebrow{font-size:.68rem;letter-spacing:.25em;color:var(--gold);margin:0 0 12px}.intro{max-width:660px;margin:0 auto 34px;color:var(--muted);text-align:center}
.hidden{display:none!important}.cover{min-height:100svh;position:relative;display:flex;justify-content:center;text-align:center;padding:12px 18px 34px;overflow:hidden;background:var(--cream)}.cover-pattern,.patterned:before{position:absolute;inset:0;pointer-events:none;opacity:.42;background-image:radial-gradient(circle at 50% 50%,transparent 0 29px,#e8e2da 30px 31px,transparent 32px),repeating-conic-gradient(from 45deg at 50% 50%,transparent 0 20deg,#eee9e2 21deg 23deg,transparent 24deg 45deg);background-size:150px 150px}.cover-inner{position:relative;z-index:1;width:min(100%,620px);padding-top:0}.cover-portrait-frame{width:min(72vw,350px);height:min(98vw,440px);margin:0 auto;overflow:hidden;border:3px solid var(--gold);border-radius:48% 48% 10px 10px;background:#eee8df;box-shadow:0 7px 20px #2b1b1718}.cover-portrait{width:100%;height:100%;object-fit:cover;display:block}.flower-ornament{position:relative;z-index:2;color:var(--gold);font-size:clamp(2rem,6vw,3.6rem);letter-spacing:-.2em;margin:-34px auto 10px;text-shadow:0 2px 0 white}.cover h1{font-size:clamp(3.8rem,12vw,6.8rem);line-height:.92;margin:18px 0 12px}.cover-date{letter-spacing:.25em;font-size:.78rem;font-weight:500;margin:18px 0}.cover-divider{height:1px;width:60px;background:var(--gold);margin:20px auto}.to-label{margin:20px 0 0;color:var(--muted);font-size:.8rem}.cover-inner h2{font-size:1.9rem;margin:0 0 16px}.dark-button,.light-button{border:0;background:#171616;color:white;padding:13px 23px;font:500 .84rem Poppins,Arial,sans-serif;text-decoration:none;display:inline-flex;justify-content:center;align-items:center;cursor:pointer;transition:transform .25s,background .25s}.dark-button:hover{background:var(--maroon);transform:translateY(-2px)}.small-note{font-size:.66rem;color:var(--muted);margin-top:15px}
.section{position:relative;text-align:center;padding:78px 22px}.patterned{isolation:isolate}.patterned:before{content:"";z-index:-1}.countdown-section h2{font-style:italic}.countdown{display:flex;justify-content:center;gap:clamp(14px,4vw,45px);margin:25px auto 35px}.countdown div{display:flex;flex-direction:column;line-height:1.1;min-width:65px}.countdown strong{font:400 clamp(2rem,5vw,3rem) "Cormorant Garamond",Georgia,serif}.countdown span{font:400 clamp(.9rem,2.5vw,1.35rem) "Cormorant Garamond",Georgia,serif}.wide-photo{display:block;width:min(100%,760px);height:clamp(340px,75vw,600px);object-fit:cover;border-radius:24px;margin:0 auto;box-shadow:0 12px 30px #211b1926}
.couple-section{background:#fff;padding-top:90px}.couple-grid{max-width:940px;margin:38px auto 0;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:30px}.person-image-wrap{position:relative;width:min(100%,340px);height:460px;margin:auto;border-radius:0 0 34px 34px;overflow:hidden;box-shadow:0 8px 25px #261c1b1c;background:#e7dfd6}.person-image-wrap img{width:100%;height:100%;object-fit:cover}.photo-name{position:absolute;bottom:-18px;left:0;right:0;color:white;font:italic clamp(3.4rem,8vw,5.5rem) "Cormorant Garamond",serif;text-shadow:0 3px 12px #000;transform:rotate(-5deg)}.person h3{font-size:2.8rem;margin:22px 0 0;color:var(--maroon)}.person p{margin:3px 0;color:var(--muted)}.person .full-name{font:2rem/1.05 "Cormorant Garamond",serif;color:var(--ink);margin:6px 0 20px}.parents{max-width:280px;margin:0 auto!important}.instagram{display:block;background:#171616;color:white;text-decoration:none;padding:12px;margin:25px auto 0;max-width:310px;font-weight:600}.couple-amp{font:italic 4rem "Cormorant Garamond",serif;color:var(--gold)}
.verse-section{position:relative;text-align:center;padding:60px 18px 45px;background-color:var(--cream)}.verse-section .arabic{font-size:2rem;color:var(--maroon);margin:15px auto}.verse{max-width:900px;margin:15px auto;font-size:clamp(1rem,3vw,1.35rem);line-height:1.55}.verse-section h3{font:bold italic 1.5rem Poppins,Arial,sans-serif;color:#555}.mini-gallery{display:flex;gap:16px;justify-content:center;overflow:hidden;margin:32px auto 0;max-width:950px}.mini-gallery img{width:30%;height:190px;object-fit:cover}
.event-section{background:#fff}.event-card{position:relative;isolation:isolate;min-height:590px;max-width:760px;margin:25px auto 35px;display:grid;place-items:center;padding:45px 20px;overflow:hidden;border:1px solid #e0d6c8}.event-background,.event-overlay{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}.event-overlay{z-index:-1;background:#fffdf0c9}.event-content{max-width:520px}.event-symbol{font-size:2.8rem;color:var(--gold)}.event-content h3{font-size:3.1rem;margin:5px}.event-content p{font-size:1rem}.event-location{font-weight:600;line-height:1.45}.light-button{background:#171616;border:2px solid white;margin-top:10px}
.story-section{display:grid;grid-template-columns:1fr 1fr;background:var(--cream)}.story-image{min-height:600px}.story-image img{width:100%;height:100%;object-fit:cover;display:block}.story-text{padding:65px clamp(25px,5vw,75px);align-self:center}.story-item{display:grid;grid-template-columns:38px 1fr;gap:15px;text-align:left;margin:24px 0}.story-item>span{font:2rem "Cormorant Garamond",serif;color:var(--gold)}.story-item h3{font-size:1.8rem;margin:0}.story-item p{font-size:.83rem;color:var(--muted);margin:3px 0}
.gallery-section{background:var(--cream)}
.gallery-section.reveal {
  opacity: 1;
  transform: none;
}

.gallery-grid {
  max-width: 700px;
  margin: 35px auto 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.gallery-grid img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 9 / 16;
  object-fit: cover;
  object-position: center;
  border-radius: 8px;
}

gift-section{background:#fff}.gift-card{max-width:390px;margin:30px auto 0;padding:32px 20px;border:1px solid #d9c7a5;background:#fffdf8;box-shadow:0 10px 30px #271b1610}.bank-logo{font-size:2.2rem;color:#075eae;font-weight:600;font-style:italic}.bank-caption{font-size:.62rem;letter-spacing:.15em;color:var(--muted)}.account-number{font-size:1.15rem;font-weight:600;color:var(--maroon);margin:18px 0 0}.account-name{color:var(--muted);font-size:.85rem}.status{font-size:.8rem;color:var(--maroon);min-height:1.3em}
#rsvpForm{max-width:560px;margin:30px auto;text-align:left;display:grid;gap:8px}#rsvpForm label{font-size:.8rem;color:var(--maroon);margin-top:8px}#rsvpForm input,#rsvpForm select,#rsvpForm textarea{width:100%;padding:13px;border:1px solid #d8cec0;background:#fffdf9;font:inherit;color:var(--ink)}#rsvpForm .dark-button{margin-top:12px}.wishes{max-width:560px;margin:auto;text-align:left}.wish{padding:15px 0;border-bottom:1px solid #e5dcd0}.wish strong{color:var(--maroon)}.wish p{margin:4px 0}.fine-print{max-width:560px;margin:22px auto;color:var(--muted);font-size:.7rem}
.thankyou-section{text-align:center;padding:70px 22px;background:var(--cream)}.thankyou-image{display:block;width:min(100%,470px);height:420px;object-fit:cover;margin:0 auto 35px;border:6px solid white;box-shadow:0 8px 24px #2519151a}.thankyou-section h2{font-size:clamp(3.7rem,10vw,6.5rem);margin:0}.thankyou-section>p:not(.eyebrow):not(.cover-date){max-width:600px;margin:15px auto;color:var(--muted)}footer{text-align:center;padding:22px;background:var(--maroon-dark);color:var(--cream);font-size:.72rem;letter-spacing:.08em}footer span{color:#e4c18a}

/* TRANSISI UTAMA SELURUH HALAMAN */
.reveal {
  opacity: 1;
  visibility: visible;
  transform: none;
}

.reveal.visible {
  animation: sectionElegant 0.7s ease-out both;
}

@keyframes sectionElegant {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ANIMASI PEMBUKAAN */
.cover-inner {
  animation: coverElegant 1s ease-out both;
}

@keyframes coverElegant {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@media(max-width:700px){.cover-portrait-frame{width:min(78vw,340px);height:min(108vw,430px)}.section{padding:62px 17px}.couple-grid{grid-template-columns:1fr;gap:25px}.couple-amp{line-height:.5}.person-image-wrap{height:430px;width:min(88%,350px)}.story-section{grid-template-columns:1fr}.story-image{min-height:350px;height:350px}.story-text{padding:50px 25px}.event-card{min-height:560px}.mini-gallery img{height:135px}.gallery-grid{gap:8px}.thankyou-image{height:350px}.countdown div{min-width:52px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{transition-duration:.01ms!important;animation-duration:.01ms!important}}

/* =====================================
   ANIMASI GALERI ELEGAN
   PUTRI & ANDIKA
===================================== */

/* Animasi lembut untuk judul galeri */
.gallery-section .eyebrow,
.gallery-section h2,
.gallery-section .intro {
  animation: galleryTextIn 0.9s ease-out both;
}

.gallery-section h2 {
  animation-delay: 0.15s;
}

.gallery-section .intro {
  animation-delay: 0.3s;
}

@keyframes galleryTextIn {
  from {
    opacity: 0.5;
    transform: translateY(18px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Foto tetap terlihat sebelum animasi dimulai */
.gallery-grid img {
  opacity: 1 !important;
  visibility: visible !important;
  animation: none;
}

/* Animasi foto satu per satu */
.gallery-section.visible .gallery-grid img {
  animation: galleryPhotoIn 0.9s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.gallery-section.visible .gallery-grid img:nth-child(2) {
  animation-delay: 0.12s;
}

.gallery-section.visible .gallery-grid img:nth-child(3) {
  animation-delay: 0.24s;
}

.gallery-section.visible .gallery-grid img:nth-child(4) {
  animation-delay: 0.36s;
}

.gallery-section.visible .gallery-grid img:nth-child(5) {
  animation-delay: 0.48s;
}

.gallery-section.visible .gallery-grid img:nth-child(6) {
  animation-delay: 0.60s;
}

@keyframes galleryPhotoIn {
  from {
    transform: translateY(25px) scale(0.97);
    filter: blur(2px);
  }

  to {
    transform: translateY(0) scale(1);
    filter: blur(0);
  }
}

/* Efek hover ketika foto disentuh mouse */
@media (hover: hover) {
  .gallery-grid img:hover {
    transform: scale(1.025);
    transition: transform 0.35s ease, box-shadow 0.35s ease;
    box-shadow: 0 14px 30px rgba(69, 21, 35, 0.18);
  }
}

/* Pengguna yang mengurangi animasi tetap melihat foto */
@media (prefers-reduced-motion: reduce) {
  .gallery-section .eyebrow,
  .gallery-section h2,
  .gallery-section .intro,
  .gallery-section.visible .gallery-grid img {
    animation: none !important;
    transform: none !important;
    filter: none !important;
  }
}

/* ==========================================
   GALERI: ANIMASI SETIAP 2 FOTO SAAT SCROLL
========================================== */

/* Foto tetap terlihat jika JavaScript belum berjalan */
.gallery-grid img {
  opacity: 1;
  visibility: visible;
}

/* Animasi aktif hanya pada foto yang ditandai JavaScript */
.gallery-grid img.gallery-animate {
  animation: galleryPairReveal 0.85s
    cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes galleryPairReveal {
  from {
    opacity: 0;
    transform: translateY(35px) scale(0.96);
    filter: blur(3px);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .gallery-grid img.gallery-animate {
    animation: none !important;
  }
}

/* Nama mempelai bertumpuk ke bawah */
.couple-name {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  line-height: 1.2;
}

.couple-name .ampersand {
  display: block;
  margin: 2px 0;
  font-size: 0.7em;
  color: var(--gold);
}

/* =========================================
   TRANSISI ELEGAN SELURUH UNDANGAN
   PUTRI & ANDIKA
========================================= */

:root {
  --wedding-motion: cubic-bezier(0.22, 1, 0.36, 1);
}

/* Bagian halaman: animasi saat mulai terlihat */
#invitation .reveal.visible {
  animation: weddingSectionIn 0.85s var(--wedding-motion) both;
}

@keyframes weddingSectionIn {
  from {
    opacity: 0.55;
    transform: translateY(28px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Judul dan teks muncul dengan lembut */
#invitation .reveal.visible .eyebrow,
#invitation .reveal.visible h2,
#invitation .reveal.visible .intro {
  animation: weddingTextIn 0.75s var(--wedding-motion) both;
}

#invitation .reveal.visible h2 {
  animation-delay: 0.12s;
}

#invitation .reveal.visible .intro {
  animation-delay: 0.22s;
}

@keyframes weddingTextIn {
  from {
    opacity: 0.5;
    transform: translateY(16px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Foto mempelai dan foto lain muncul dengan lembut */
#invitation .reveal.visible img:not(.gallery-grid img) {
  animation: weddingImageIn 0.9s var(--wedding-motion) both;
}

@keyframes weddingImageIn {
  from {
    opacity: 0.65;
    transform: translateY(18px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* Kartu informasi muncul bergantian */
#invitation .reveal.visible .info-card,
#invitation .reveal.visible .event-card,
#invitation .reveal.visible .gift-card,
#invitation .reveal.visible .bank-card,
#invitation .reveal.visible .countdown-item {
  animation: weddingCardIn 0.8s var(--wedding-motion) both;
}

#invitation .reveal.visible .info-card:nth-child(2),
#invitation .reveal.visible .event-card:nth-child(2),
#invitation .reveal.visible .gift-card:nth-child(2),
#invitation .reveal.visible .countdown-item:nth-child(2) {
  animation-delay: 0.12s;
}

#invitation .reveal.visible .info-card:nth-child(3),
#invitation .reveal.visible .event-card:nth-child(3),
#invitation .reveal.visible .countdown-item:nth-child(3) {
  animation-delay: 0.24s;
}

#invitation .reveal.visible .countdown-item:nth-child(4) {
  animation-delay: 0.36s;
}

@keyframes weddingCardIn {
  from {
    opacity: 0.6;
    transform: translateY(22px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Form RSVP dan ucapan */
#invitation .reveal.visible form,
#invitation .reveal.visible #wishesList,
#invitation .reveal.visible .wishes-list {
  animation: weddingCardIn 0.85s var(--wedding-motion) both;
}

/* Hover lembut pada kartu */
@media (hover: hover) {
  #invitation .info-card,
  #invitation .event-card,
  #invitation .gift-card,
  #invitation .bank-card {
    transition:
      box-shadow 0.35s ease,
      border-color 0.35s ease;
  }

  #invitation .info-card:hover,
  #invitation .event-card:hover,
  #invitation .gift-card:hover,
  #invitation .bank-card:hover {
    border-color: rgba(182, 160, 113, 0.7);
    box-shadow: 0 14px 32px rgba(69, 21, 35, 0.1);
  }
}

/* Animasi tidak mengganggu pengguna yang mengurangi gerakan */
@media (prefers-reduced-motion: reduce) {
  #invitation .reveal.visible,
  #invitation .reveal.visible .eyebrow,
  #invitation .reveal.visible h2,
  #invitation .reveal.visible .intro,
  #invitation .reveal.visible img,
  #invitation .reveal.visible .info-card,
  #invitation .reveal.visible .event-card,
  #invitation .reveal.visible .gift-card,
  #invitation .reveal.visible .bank-card,
  #invitation .reveal.visible .countdown-item,
  #invitation .reveal.visible form,
  #invitation .reveal.visible #wishesList,
  #invitation .reveal.visible .wishes-list {
    animation: none !important;
  }
}

/* ======================================
   TRANSISI SELURUH UNDANGAN
====================================== */

#invitation .reveal.visible {
  animation: weddingReveal 0.85s
    cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes weddingReveal {
  from {
    opacity: 0.55;
    transform: translateY(28px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Judul dan teks */
#invitation .reveal.visible .eyebrow,
#invitation .reveal.visible h2,
#invitation .reveal.visible .intro {
  animation: weddingTextReveal 0.7s ease-out both;
}

#invitation .reveal.visible h2 {
  animation-delay: 0.12s;
}

#invitation .reveal.visible .intro {
  animation-delay: 0.2s;
}

@keyframes weddingTextReveal {
  from {
    opacity: 0.6;
    transform: translateY(15px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Foto galeri tetap terlihat dan muncul dua sekaligus */
#invitation .gallery-grid img {
  opacity: 1 !important;
  visibility: visible !important;
}

#invitation .gallery-section.visible .gallery-grid img {
  animation: galleryPairMotion 0.8s
    cubic-bezier(0.22, 1, 0.36, 1) both;
}

#invitation .gallery-section.visible .gallery-grid img:nth-child(4n + 3),
#invitation .gallery-section.visible .gallery-grid img:nth-child(4n + 4) {
  animation-delay: 0.15s;
}

@keyframes galleryPairMotion {
  from {
    transform: translateY(24px) scale(0.97);
    filter: blur(2px);
  }
  to {
    transform: translateY(0) scale(1);
    filter: blur(0);
  }
}

/* Bagian pembuka dan penutup */
.cover-inner,
.thankyou-section {
  animation: weddingReveal 1s ease-out both;
}

/* Hormati pengaturan pengurangan animasi */
@media (prefers-reduced-motion: reduce) {
  #invitation .reveal.visible,
  #invitation .reveal.visible .eyebrow,
  #invitation .reveal.visible h2,
  #invitation .reveal.visible .intro,
  #invitation .gallery-section.visible .gallery-grid img,
  .cover-inner,
  .thankyou-section {
    animation: none !important;
    transform: none !important;
    filter: none !important;
  }
}

/* LOVE STORY: TEKS RATA KANAN DAN KIRI */
.story-item p {
  text-align: justify;
  text-justify: inter-word;
  line-height: 1.8;
}