:root {
  --bg: #f7f7f7;
  --ink: #5b44a6;
  --purple: #6a4fb0;
  --purple-light: #ebe5f6;
  --grey: #7a7290;
  --script: 'Great Vibes', cursive;
  --sans: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

/* Watercolour paper texture cut from the card itself, tiled behind every section */
body {
  margin: 0;
  background: var(--bg) url('img/paper.webp');
  color: var(--ink);
  font-family: var(--sans);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
}

/* Florals keep their paper background, multiply lets it melt into the page texture */
.deco, .deco-bottom, .divider, .fly { mix-blend-mode: multiply; pointer-events: none; }

/* Small letter-spaced caps, same voice as "MAJLIS BERTAUT KASEH" on the card */
.eyebrow {
  font-size: 0.72rem; letter-spacing: 0.28em; text-transform: uppercase;
  color: var(--purple); margin: 0 0 1rem;
}

/* Music player bar, sitting static at the bottom of the hero */
.yt-hidden { position: fixed; bottom: -100px; left: -100px; width: 2px; height: 2px; opacity: 0.01; pointer-events: none; }
.player {
  position: relative;
  width: 100%; max-width: 300px; margin: 1.8rem auto 0;
  display: flex; align-items: center; gap: 0.7rem;
  background: rgba(255, 255, 255, 0.7); color: var(--ink); border-radius: 10px;
  border: 1px solid var(--purple-light);
  padding: 0.6rem 0.8rem; box-shadow: 0 4px 14px rgba(106, 79, 176, 0.12);
}
.player-art { width: 42px; height: 42px; border-radius: 4px; object-fit: cover; flex-shrink: 0; }
.player-info { flex: 1; min-width: 0; text-align: left; }
.player-title { margin: 0; font-size: 0.8rem; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.player-artist { margin: 0.1rem 0 0; font-size: 0.72rem; color: var(--grey); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.player-toggle {
  flex-shrink: 0; width: 34px; height: 34px; border-radius: 50%; border: none;
  background: var(--purple); color: #fff; display: flex; align-items: center; justify-content: center;
  cursor: pointer;
}
.player-toggle svg { width: 18px; height: 18px; fill: currentColor; }
.player-progress { position: absolute; left: 0.8rem; right: 0.8rem; bottom: 3px; height: 2px; background: rgba(106, 79, 176, 0.2); border-radius: 2px; overflow: hidden; }
.player-progress-fill { height: 100%; width: 0%; background: var(--purple); }

/* Butterflies from the card drifting across the background */
.flutter { position: fixed; inset: 0; overflow: hidden; pointer-events: none; z-index: 5; }
.fly {
  position: absolute; left: 0; height: auto;
  animation-name: fly; animation-timing-function: linear; animation-iteration-count: infinite;
}
.f1 { top: 18%; width: 30px; opacity: 0.6;  animation-duration: 24s; animation-delay: 1s; }
.f2 { top: 52%; width: 22px; opacity: 0.45; animation-duration: 30s; animation-delay: 9s; }
.f3 { top: 80%; width: 26px; opacity: 0.55; animation-duration: 27s; animation-delay: 16s; }

@keyframes fly {
  0%   { transform: translate(-10vw, 0) rotate(-6deg); }
  25%  { transform: translate(25vw, -30px) rotate(4deg); }
  50%  { transform: translate(55vw, 10px) rotate(-4deg); }
  75%  { transform: translate(85vw, -24px) rotate(6deg); }
  100% { transform: translate(115vw, 0) rotate(-6deg); }
}

/* Preloader */
#preloader {
  position: fixed; inset: 0; z-index: 20;
  display: flex; align-items: center; justify-content: center;
  background: var(--bg) url('img/paper.webp');
  transition: opacity 0.8s ease;
}
#preloader.hide { opacity: 0; pointer-events: none; }
.preloader-text { text-align: center; color: var(--purple); }
.preloader-names { font-family: var(--script); font-size: 2.6rem; margin: 0 0 0.6rem; }
.preloader-loading { font-size: 0.7rem; letter-spacing: 0.25em; text-transform: uppercase; }
.open-btn {
  margin-top: 2rem; padding: 0.8rem 2.2rem; border: none; border-radius: 999px;
  background: var(--purple); color: #fff; cursor: pointer;
  font-family: var(--sans); font-size: 0.75rem; letter-spacing: 0.22em; text-transform: uppercase;
  box-shadow: 0 6px 18px rgba(106, 79, 176, 0.25);
}
.dots span { animation: dot-fade 1.4s infinite; opacity: 0; }
.dots span:nth-child(2) { animation-delay: 0.2s; }
.dots span:nth-child(3) { animation-delay: 0.4s; }
@keyframes dot-fade { 0%, 100% { opacity: 0; } 50% { opacity: 1; } }

.reveal { opacity: 0; }

#content { max-width: 480px; margin: 0 auto; }

section { padding: 3rem 1.5rem 3.5rem; text-align: center; position: relative; overflow: hidden; }

.hero { padding: 0 1.5rem 2.5rem; }
.cover { display: block; width: calc(100% + 3rem); margin: 0 -1.5rem 2rem; height: auto; }

/* Corner florals, positioned like the card's top garland and side sprigs */
.deco { position: absolute; z-index: 0; opacity: 0.9; }
.deco-top { top: 0; right: -10%; width: 90%; }
.deco-right { top: 1.5rem; right: 0; width: 20%; }
.deco-left { top: 0.5rem; left: 0; width: 22%; }
section > *:not(.deco) { position: relative; z-index: 1; }
.greeting { padding-top: 11rem; }

.divider { display: block; width: 46px; margin: 2.5rem auto 0; }

.countdown { display: flex; justify-content: center; gap: 1.6rem; }
.cd-unit { display: flex; flex-direction: column; align-items: center; }
.cd-unit span { font-size: 1.9rem; font-weight: 300; color: var(--ink); }
.cd-unit small { color: var(--grey); font-size: 0.6rem; letter-spacing: 0.2em; text-transform: uppercase; }

.greeting p { line-height: 1.9; margin: 0.4rem 0; font-size: 0.9rem; color: var(--grey); }
.greeting .salam { color: var(--ink); font-weight: 500; }
.greeting .parents { margin: 1.4rem 0; font-size: 0.85rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink); line-height: 1.9; }
.full-names {
  font-size: 1.15rem; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase;
  line-height: 1.6; margin: 1.8rem 0 0;
}
.full-names .dan { display: block; font-family: var(--script); font-size: 2.4rem; font-weight: 400; letter-spacing: 0; text-transform: none; line-height: 1.3; }
.greeting .parents .amp { font-family: var(--script); font-size: 1.8rem; text-transform: none; letter-spacing: 0; line-height: 1.6; }
.verse { margin: 0 0 2rem; padding: 0 0.5rem; }
.greeting .verse p { font-style: italic; font-size: 0.85rem; line-height: 1.8; }
.verse cite { display: block; margin-top: 0.4rem; font-style: normal; font-size: 0.65rem; letter-spacing: 0.25em; text-transform: uppercase; color: var(--purple); }
.greeting .doa { margin-top: 1.8rem; font-size: 0.85rem; font-style: italic; }

h3 { font-family: var(--script); font-weight: 400; font-size: 3rem; line-height: 1.1; margin: 0 0 1.5rem; color: var(--purple); }

.date-block {
  display: flex; align-items: center; justify-content: center; gap: 1.2rem;
  margin-bottom: 2rem; text-transform: uppercase; letter-spacing: 0.2em; font-size: 0.75rem;
}
.date-block span { border-top: 1px solid var(--purple); border-bottom: 1px solid var(--purple); padding: 0.4rem 0; min-width: 80px; }
.date-block strong { font-size: 2.8rem; font-weight: 300; letter-spacing: 0; }

.cards { display: flex; flex-direction: column; gap: 1.4rem; }
.card small { display: block; font-size: 0.65rem; letter-spacing: 0.25em; text-transform: uppercase; color: var(--purple); }
.card p { margin: 0.3rem 0 0; color: var(--grey); font-size: 0.9rem; }

.map iframe { border-radius: 4px; border: 1px solid var(--purple-light) !important; }
.map-btn, .wa-btn {
  display: inline-block; margin: 1rem 0.3rem 0; padding: 0.7rem 1.6rem;
  background: var(--purple); color: #fff; text-decoration: none;
  border-radius: 999px; font-size: 0.72rem; letter-spacing: 0.18em; text-transform: uppercase;
}
.contacts .wa-btn { display: block; margin: 0.7rem auto; max-width: 300px; letter-spacing: 0.08em; }

.rsvp > p { color: var(--grey); font-size: 0.9rem; }
.rsvp-form { display: flex; flex-direction: column; gap: 1.2rem; text-align: left; margin-top: 1.5rem; }
.rsvp-form label { display: flex; flex-direction: column; gap: 0.4rem; font-size: 0.65rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--purple); }
.rsvp-form input[type="text"],
.rsvp-form select {
  font-family: var(--sans); font-size: 0.95rem; color: var(--ink);
  padding: 0.65rem 0.8rem; border: 1px solid var(--purple-light); border-radius: 6px;
  background: rgba(255, 255, 255, 0.8);
}
.rsvp-form fieldset { border: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.5rem; }
.rsvp-form legend { font-size: 0.65rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--purple); padding: 0; margin-bottom: 0.4rem; }
.rsvp-form .radio-pill {
  flex-direction: row; align-items: center; gap: 0.6rem;
  padding: 0.65rem 0.9rem; border: 1px solid var(--purple-light); border-radius: 999px;
  background: rgba(255, 255, 255, 0.8);
  font-size: 0.85rem; letter-spacing: 0; text-transform: none; color: var(--ink); cursor: pointer;
}
.radio-pill input { accent-color: var(--purple); }
.radio-pill:has(input:checked) { background: var(--purple-light); border-color: var(--purple); }
.rsvp-submit {
  align-self: center; margin-top: 0.5rem; padding: 0.75rem 2rem;
  background: var(--purple); color: #fff; border: none; border-radius: 999px;
  font-family: var(--sans); font-size: 0.72rem; letter-spacing: 0.18em; text-transform: uppercase; cursor: pointer;
}
.rsvp-submit:disabled { opacity: 0.6; cursor: wait; }
.rsvp .rsvp-thanks { font-family: var(--script); font-size: 2.4rem; line-height: 1.3; color: var(--purple); margin-top: 1.5rem; }

footer { position: relative; padding: 3rem 0 0; text-align: center; overflow: hidden; }
.footer-names { font-family: var(--script); font-size: 2.5rem; color: var(--purple); margin: 0 0 -1rem; position: relative; z-index: 1; }
.deco-bottom { display: block; width: 100%; height: auto; }