:root{
  --cream: #F4F0EE;
  --cream-deep: #EEEAE6;
  --maroon: #441427;
  --maroon-soft: #6b2c42;
  --surround: #F6F4F0;
  --gold: #B8863B;
  --olive: #6b7259;
  --line: rgba(68,20,39,0.25);

  --font-display: 'Alex Brush', cursive;
  --font-serif: 'Ibarra Real Nova', serif;
  --font-italic: 'EB Garamond', serif;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--surround);
  color:var(--maroon);
  font-family:var(--font-serif);
  -webkit-font-smoothing:antialiased;
}
body.no-scroll{ overflow:hidden; height:100%; }

/* ============ OPENING COVER ============ */
.cover{
  position:fixed;
  inset:0;
  z-index:1000;
}
.cover-half{
  position:absolute;
  top:0;
  width:50%;
  height:100%;
  background-color:var(--cream);
  background-image:url('assets/bg_texture.jpg');
  background-size:auto 100%;
  transition:transform 0.9s cubic-bezier(0.76,0,0.24,1);
}
.cover-half--left{ left:0; background-position:left top; }
.cover-half--right{ right:0; background-position:right top; }
.cover-content{
  position:absolute;
  inset:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  gap:10px;
  transition:opacity 0.4s ease;
  padding:24px;
}
.cover-eyebrow{ letter-spacing:0.3em; font-size:0.8rem; color:#481d16; margin:0 0 32px; }
.cover-monogram{
  font-family:var(--font-display);
  font-size:2.6rem;
  color:#481d16;
  margin:8px 0 32px;
}
.cover-monogram .amp{ color:var(--gold); margin:0 8px; }
.cover-date{ font-size:0.85rem; letter-spacing:0.1em; color:#481d16; opacity:0.8; margin:0 0 28px; }
.cover-seal{
  position:relative;
  width:150px;
  height:150px;
  border:none;
  background:none;
  padding:0;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  animation:seal-breathe 3.2s ease-in-out infinite;
}
@keyframes seal-breathe{
  0%, 100%{ transform:scale(1); }
  50%{ transform:scale(1.035); }
}

/* countdown digit tick */
@keyframes digit-tick{
  0%{ opacity:0.35; transform:translateY(-4px); }
  100%{ opacity:1; transform:translateY(0); }
}
.cd-num.is-ticking{ animation:digit-tick 0.35s ease-out; }
.cover-seal-img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:contain;
  filter:drop-shadow(0 10px 18px rgba(0,0,0,0.3));
  transition:transform 0.2s ease;
}
.cover-seal:hover .cover-seal-img{ transform:scale(1.05) rotate(-2deg); }
.cover-seal-initials{
  position:relative;
  z-index:1;
  font-family:var(--font-display);
  font-size:2.1rem;
  line-height:1;
  color:#FDF8F0;
  text-shadow:
    0 1px 1px rgba(30,10,5,0.55),
    0 -0.5px 0.5px rgba(255,230,200,0.4);
  opacity:1;
}
.cover-seal-hint{
  margin-top:18px;
  letter-spacing:0.25em;
  font-size:0.75rem;
  font-weight:600;
  color:#481d16;
}
.cover-seal:focus-visible{ outline:2px solid var(--gold); outline-offset:6px; border-radius:50%; }

.cover.is-opening .cover-half--left{ transform:translateX(-100%); }
.cover.is-opening .cover-half--right{ transform:translateX(100%); }
.cover.is-opening .cover-content{ opacity:0; pointer-events:none; }
.cover.is-hidden{ display:none; }

.hero{
  opacity:0;
  transform:scale(0.99) translateY(6px);
  transition:opacity 1.8s cubic-bezier(0.22,0.61,0.36,1), transform 1.8s cubic-bezier(0.22,0.61,0.36,1);
}
.hero.is-revealed{ opacity:1; transform:scale(1) translateY(0); }

/* ============ SCROLL REVEAL ============ */
.reveal{
  opacity:0;
  transform:translateY(24px);
  transition:opacity 0.9s ease, transform 0.9s ease;
}
.reveal.is-visible{ opacity:1; transform:translateY(0); }

/* fade-only variant — no transform, so it never creates a stacking context
   (keeps the invite/countdown floral overlap working correctly) */
.reveal-fade{
  opacity:0;
  transition:opacity 1.1s ease;
}
.reveal-fade.is-visible{ opacity:1; }

.card{
  max-width:480px;
  margin:0 auto;
  background:var(--cream);
  position:relative;
  overflow:hidden;
  box-shadow:0 30px 80px -30px rgba(0,0,0,0.5);
}
.music-toggle{
  position:fixed;
  bottom:20px;
  right:20px;
  width:44px;
  height:44px;
  border-radius:50%;
  background:#481d16;
  color:var(--cream);
  border:none;
  cursor:pointer;
  z-index:500;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:1.1rem;
  box-shadow:0 4px 14px rgba(0,0,0,0.3);
  animation:music-spin 6s linear infinite;
  animation-play-state:paused;
}
.music-toggle.is-playing{ animation-play-state:running; }
@keyframes music-spin{ from{ transform:rotate(0deg); } to{ transform:rotate(360deg); } }
.music-toggle:focus-visible{ outline:2px solid var(--gold); outline-offset:2px; }
@media (min-width:520px){
  body{ padding:40px 16px; }
  .card{ border-radius:4px; }
}

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
}

.detail-label{ letter-spacing:0.2em; font-size:0.78rem; font-weight:600; }

.rule{ border:none; border-top:1px solid var(--line); margin:28px auto; width:70%; }
.rule--wide{ width:90%; }
.rule--soft{ width:50%; opacity:0.6; margin:20px auto; }
.rule--divider{ width:200px; position:relative; }

/* ============ HERO ============ */
.hero{
  position:relative;
  overflow:hidden;
}
.hero-canva-img{
  display:none;
  width:100%;
  height:auto;
}
.hero-canva-img.is-active{ display:block; }
.hero-inner{
  position:relative;
  z-index:2;
  max-width:640px;
  text-align:center;
}
.bismillah{
  font-family:'Aref Ruqaa', serif;
  font-weight:700;
  font-size:2.1rem;
  color:var(--maroon);
  margin-bottom:6px;
  direction:rtl;
}
.eyebrow{
  font-family:var(--font-serif);
  letter-spacing:0.35em;
  font-size:0.85rem;
  color:var(--maroon-soft);
  margin:0 0 32px;
}
.names-block{ position:relative; padding:20px 0; display:flex; justify-content:center; }
.couple-names-img{
  max-width:min(90vw, 620px);
  width:100%;
  height:auto;
  display:none;
}
.couple-names-img.is-active{ display:block; }
.venue-line{
  letter-spacing:0.12em;
  font-size:0.85rem;
  font-weight:600;
  margin-top:36px;
}
.tagline{
  font-family:var(--font-italic);
  font-style:italic;
  color:var(--maroon-soft);
  font-size:1.05rem;
  line-height:1.7;
  margin:28px 0 40px;
}
.date-row{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:24px;
}
.date-side{
  font-size:0.8rem;
  letter-spacing:0.2em;
  font-weight:600;
}
.date-center{
  display:flex;
  flex-direction:column;
  align-items:center;
  padding:0 24px;
  border-left:1px solid var(--line);
  border-right:1px solid var(--line);
}
.date-month{ font-size:0.75rem; letter-spacing:0.2em; }
.date-day{ font-family:var(--font-serif); font-size:2.8rem; line-height:1; margin:2px 0; }
.date-year{ font-size:0.75rem; letter-spacing:0.2em; }

/* ============ INVITE SECTION (back of card, one continuous flow) ============ */
.invite{
  position:relative;
  font-family:'Ibarra Real Nova', serif;
  background-image:url('assets/bg_texture.jpg');
  background-size:100% auto;
  background-repeat:repeat-y;
  background-position:top;
}
.invite-corner{
  position:absolute;
  width:190px;
  height:auto;
  z-index:0;
  pointer-events:none;
}
.invite-corner--tl{ top:0; left:0; width:150px; }
.invite-corner--br{ bottom:-55px; right:0; width:230px; z-index:2; }
.invite-content{
  position:relative;
  z-index:1;
  padding:60px 32px 70px;
  text-align:center;
}
.invite .rule{ border-color:var(--line); width:100%; margin:28px 0; }
.greeting{ letter-spacing:0.1em; font-size:0.95rem; margin-bottom:0; font-weight:600; }
.parents{ font-size:1.2rem; font-weight:700; letter-spacing:0.04em; margin:20px 0; }
.amp-small{ font-family:'Ibarra Real Nova', serif; color:var(--maroon); font-size:1.2rem; font-weight:600; font-style:italic; }
.formal-copy{ font-size:1rem; line-height:1.9; color:var(--maroon); }
.formal-copy strong{ font-weight:600; display:block; margin:6px 0; color:var(--maroon); }
.script-name{
  font-family:'Ibarra Real Nova', serif;
  font-weight:600;
  font-style:italic;
  font-size:1.8rem;
  color:var(--maroon);
  margin:10px 0;
}
.pilihan{ font-size:0.95rem; color:var(--maroon); font-style:italic; }

.date-row--invite{ margin:28px 0; }
.date-row--invite .date-month{ font-size:0.7rem; }
.date-row--invite .date-year{ font-size:0.95rem; letter-spacing:0.1em; font-weight:700; }

.details-grid{ display:flex; justify-content:center; align-items:stretch; gap:0; margin:0 0 24px; }
.detail{ display:flex; flex-direction:column; gap:10px; }
.detail:first-child{ border-right:1px solid rgba(72,29,22,0.25); padding-right:40px; }
.detail:last-child{ padding-left:40px; }
.detail-value{ font-style:italic; color:var(--maroon); }
.venue-name{ letter-spacing:0.06em; font-size:1.05rem; margin:14px 0 6px; }
.venue-address{ font-style:italic; font-size:0.9rem; color:var(--maroon); margin:0 0 24px; }

.map-buttons{ display:flex; flex-direction:column; gap:12px; max-width:320px; margin:0 auto; }
.map-btn{
  display:block;
  background:#441427;
  color:var(--cream);
  text-decoration:none;
  padding:14px;
  letter-spacing:0.15em;
  font-size:0.85rem;
  font-weight:600;
  border-radius:6px;
  transition:transform .15s ease;
}
.map-btn:hover{ transform:translateY(-2px); }
.map-btn:focus-visible{ outline:2px solid var(--gold); outline-offset:2px; }
.contact-lines{ font-style:italic; font-size:0.95rem; line-height:1.9; color:var(--maroon); }

/* ============ COUNTDOWN ============ */
.countdown-section{
  position:relative;
  background-color:var(--cream);
  background-image:url('assets/bg_texture.jpg');
  background-size:100% auto;
  background-repeat:repeat;
  color:#481d16;
  text-align:center;
  padding:48px 24px 56px;
}
.divider-diamond{
  position:relative;
  display:flex;
  align-items:center;
  width:100%;
  max-width:420px;
  height:24px;
  margin:0 auto;
}
.divider-diamond::before, .divider-diamond::after{
  content:"";
  flex:1;
  height:1px;
  background:rgba(72,29,22,0.3);
}
.divider-diamond::before{ margin-right:16px; }
.divider-diamond::after{ margin-left:16px; }
.divider-ornament{
  color:#481d16;
  flex-shrink:0;
}

.countdown-section .detail-label{ margin:20px 0 4px; color:#481d16; }
.countdown{ display:flex; align-items:baseline; justify-content:center; gap:16px; flex-wrap:wrap; margin:28px 0 8px; }
.cd-block{ display:flex; flex-direction:column; align-items:center; min-width:64px; gap:8px; }
.cd-num{
  font-family:'Ibarra Real Nova', serif;
  font-weight:400;
  font-size:2.8rem;
  line-height:1;
  color:#481d16;
}
.cd-label{ font-size:0.68rem; letter-spacing:0.2em; color:#481d16; }
.cd-dot{ color:#481d16; font-size:1rem; align-self:center; }
.script-tagline{
  font-family:var(--font-display);
  font-size:1.5rem;
  color:#481d16;
  margin:20px 0 28px;
}

/* ============ ATUR CARA ============ */
.atur-cara{
  position:relative;
  background-image:url('assets/bg_texture.jpg');
  background-size:100% auto;
  background-repeat:repeat-y;
  background-position:top;
  padding:64px 32px 70px;
  text-align:center;
  color:#481d16;
}
.atur-cara .detail-label{ color:#481d16; }
.atur-title{
  font-family:var(--font-display);
  font-size:2.2rem;
  color:#481d16;
  margin:6px 0 4px;
}
.atur-cara .divider-diamond{ margin:18px auto 40px; }
.atur-cara .divider-diamond::before,
.atur-cara .divider-diamond::after{ background:rgba(72,29,22,0.3); }
.atur-cara .divider-ornament{ color:#481d16; }

.timeline{
  max-width:340px;
  margin:0 auto;
  text-align:left;
  position:relative;
}
.timeline::before{
  content:"";
  position:absolute;
  left:6px;
  top:8px;
  bottom:8px;
  width:1px;
  background:rgba(72,29,22,0.25);
}
.timeline-item{
  position:relative;
  display:flex;
  align-items:baseline;
  gap:18px;
  padding:16px 0;
  padding-left:28px;
}
.timeline-item--last{ padding-bottom:0; }
.timeline-dot{
  position:absolute;
  left:0;
  top:50%;
  transform:translateY(-50%);
  width:13px;
  height:13px;
  border-radius:50%;
  background:var(--cream);
  border:1px solid #481d16;
}
.timeline-time{
  font-family:'Ibarra Real Nova', serif;
  font-style:italic;
  font-size:1.15rem;
  min-width:52px;
}
.timeline-label{
  font-size:0.78rem;
  letter-spacing:0.12em;
  font-weight:600;
}

/* ============ RSVP ============ */
.rsvp-section{
  position:relative;
  background-image:url('assets/bg_texture.jpg');
  background-size:100% auto;
  background-repeat:repeat-y;
  background-position:top;
  padding:70px 24px 80px;
  text-align:center;
  color:#481d16;
  overflow:hidden;
}
.rsvp-sprig{
  position:absolute;
  top:14px;
  right:14px;
  width:55px;
  height:auto;
  opacity:0.55;
  pointer-events:none;
  z-index:0;
}
.rsvp-title{ font-family:var(--font-display); font-size:2.6rem; margin:6px 0 20px; color:#481d16; }
.rsvp-copy{ max-width:420px; margin:0 auto 16px; color:#481d16; }
.rsvp-deadline{ letter-spacing:0.15em; font-size:0.8rem; font-weight:700; margin-bottom:32px; color:#481d16; }

.rsvp-form{
  max-width:420px;
  margin:0 auto;
  text-align:left;
  border:1px solid rgba(72,29,22,0.25);
  border-radius:6px;
  padding:32px 26px;
  display:flex;
  flex-direction:column;
  gap:6px;
}
.field-label{ letter-spacing:0.15em; font-size:0.72rem; font-weight:700; margin-top:16px; color:#481d16; }
.field-input{
  background:rgba(72,29,22,0.03);
  border:1px solid rgba(72,29,22,0.3);
  color:#481d16;
  border-radius:6px;
  padding:12px 14px;
  font-family:var(--font-serif);
  font-size:1rem;
}
.field-input::placeholder{ color:rgba(72,29,22,0.5); font-family:var(--font-italic); font-style:italic; }
.field-input:focus-visible{ outline:2px solid #481d16; outline-offset:1px; }
select.field-input{ appearance:none; }
textarea.field-input{ resize:vertical; }

.attendance-toggle{ display:flex; border:1px solid rgba(72,29,22,0.3); border-radius:999px; overflow:hidden; margin-top:6px; }
.attend-btn{
  flex:1;
  padding:12px;
  border:none;
  background:transparent;
  color:#481d16;
  font-family:var(--font-serif);
  letter-spacing:0.1em;
  font-size:0.85rem;
  font-weight:600;
  cursor:pointer;
}
.attend-btn.is-active{ background:#481d16; color:var(--cream); border-radius:999px; }
.attend-btn:focus-visible{ outline:2px solid #481d16; }

.submit-btn{
  margin-top:24px;
  background:#481d16;
  color:var(--cream);
  border:none;
  border-radius:6px;
  padding:14px;
  font-family:var(--font-serif);
  letter-spacing:0.15em;
  font-weight:700;
  font-size:0.9rem;
  cursor:pointer;
  transition:transform .15s ease;
}
.submit-btn:hover{ transform:translateY(-2px); }
.submit-btn:disabled{ opacity:0.6; cursor:progress; transform:none; }
.form-status{ text-align:center; font-size:0.85rem; min-height:1.2em; color:#481d16; }

.wishes-board{
  max-width:420px;
  margin:40px auto 0;
  border:1px solid rgba(72,29,22,0.25);
  border-radius:6px;
  padding:28px 26px;
}
.wishes-stats{ display:flex; justify-content:center; gap:40px; margin:20px 0; }
.stat{ display:flex; flex-direction:column; align-items:center; }
.stat-num{ font-family:var(--font-serif); font-size:2rem; color:#481d16; }
.stat-label{ font-size:0.65rem; letter-spacing:0.15em; margin-top:4px; color:#481d16; }
.wishes-note{ font-size:0.85rem; color:#481d16; }
.wishes-cta{ font-family:var(--font-italic); font-style:italic; color:#481d16; }

/* ============ FOOTER ============ */
.footer{
  position:relative;
  background-image:url('assets/bg_texture.jpg');
  background-size:100% auto;
  background-repeat:repeat-y;
  background-position:top;
  color:#481d16;
  text-align:center;
  padding:36px 0 0;
}
.footer-flower-bottom{
  display:block;
  width:100%;
  height:auto;
  margin-top:16px;
  opacity:0.95;
}
.footer .rule--divider{ border-color:rgba(72,29,22,0.3); }
.footer .rule--divider,
.footer-names,
.footer-date,
.footer-thanks{ padding:0 24px; }
.footer-names{ font-family:var(--font-display); font-size:2.2rem; margin:10px 0 6px; color:#481d16; }
.footer-names .amp{ margin:0 12px; color:var(--gold); }
.footer-date{ letter-spacing:0.15em; font-size:0.8rem; margin-bottom:6px; color:#481d16; }
.footer-thanks{ font-family:var(--font-italic); font-style:italic; color:#481d16; }
.footer-bottom-sprig{
  display:block;
  width:44px;
  height:auto;
  margin:24px auto 0;
  opacity:0.65;
  transform:rotate(8deg);
}

.section-sprig{
  position:absolute;
  width:80px;
  height:auto;
  z-index:0;
  pointer-events:none;
  opacity:0.85;
}
.section-sprig--tr{ top:-60px; right:0; width:150px; transform:scaleX(-1); z-index:2; }
.section-sprig--bl{ bottom:-10px; left:-8px; }
.section-sprig--top{ top:-30px; left:50%; transform:translateX(-50%); width:42px; opacity:0.65; }

.atur-cara .detail-label,
.atur-cara .atur-title,
.atur-cara .divider-diamond,
.atur-cara .timeline{ position:relative; z-index:1; }

.rsvp-section > *:not(.section-sprig){ position:relative; z-index:1; }
.footer > *:not(.section-sprig){ position:relative; z-index:1; }

/* ============ RESPONSIVE ============ */
@media (max-width:640px){
  .invite-corner--tl{ width:105px; }
  .invite-corner--br{ width:150px; bottom:-32px; }
  .hero-floral--right{ max-width:28%; opacity:0.85; }
  .details-grid{ gap:32px; }
  .wishes-stats{ gap:20px; }
}