.js .reveal { opacity: 1; transform: none; }
}

/* ======================================================================
   TEMA: CONFETTI PARTY
   ====================================================================== */

:root {
  --bg: #fff; --surface: #fff; --text: #1e1b4b; --heading: #1e1b4b; --muted: #64748b;
  --accent: #8b5cf6; --line: rgba(30, 27, 75, .12);
  --rainbow: linear-gradient(90deg, #f43f5e, #f59e0b, #10b981, #3b82f6, #8b5cf6);
  --font-head: 'Fredoka', sans-serif; --font-script: 'Fredoka', sans-serif; --font-body: 'Rubik', sans-serif;
  --btn-bg: #1e1b4b; --btn-color: #fff; --btn-radius: 16px; --btn-shadow: 0 6px 0 #f43f5e;
  --input-bg: #fff; --radius: 22px; --radius-sm: 14px; --photo-radius: 28px; --toast-bg: #1e1b4b;
}
h1, h2, h3 { font-weight: 700; }
.sec-title { font-size: clamp(2.4rem, 10vw, 3.4rem); }
.sec-eyebrow, .hero-eyebrow, .cover-label { color: #f43f5e; letter-spacing: .25em; font-weight: 700; }
.person-name, .closing-names, .couple-amp { color: var(--accent); font-weight: 700; }
.rainbow-text { background: var(--rainbow); -webkit-background-clip: text; background-clip: text; color: transparent; }
.cover-names, .hero-names, .closing-title { background: var(--rainbow); -webkit-background-clip: text; background-clip: text; color: transparent; font-weight: 700; }
.btn-ghost { color: var(--text); border-width: 2px; }
.rainbow-bar { display: block; width: 120px; height: 8px; margin: 1rem auto; border-radius: 99px; background: var(--rainbow); }

/* Confetti berjatuhan */
.confetti { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.confetti i { position: absolute; top: -20px; width: 9px; height: 14px; border-radius: 2px; animation: drop linear infinite; }
@keyframes drop { to { transform: translate(var(--dx, 40px), 110vh) rotate(720deg); } }
.balloon { position: absolute; width: 56px; pointer-events: none; animation: float 6s ease-in-out infinite; }
.bl-1 { left: 4%; top: 8%; color: #f43f5e; }
.bl-2 { left: 14%; top: 18%; width: 44px; color: #f59e0b; animation-delay: -2s; }
.bl-3 { right: 5%; top: 6%; color: #3b82f6; animation-delay: -1s; }
.bl-4 { right: 15%; top: 20%; width: 42px; color: #10b981; animation-delay: -3s; }
@keyframes float { 50% { transform: translateY(-16px) rotate(3deg); } }

.cover { background: radial-gradient(circle at 20% 20%, #fef3c7, transparent 40%), radial-gradient(circle at 80% 80%, #ede9fe, transparent 45%), #fff; }
.cover-photo { display: none; }
.cover-inner { z-index: 1; }
.cover-figure { width: min(180px, 50vw); aspect-ratio: 1; border-radius: 28px; transform: rotate(-4deg); border: 6px solid #fff; box-shadow: 0 0 0 3px #1e1b4b, 10px 10px 0 #f59e0b; }
.cover-names { font-size: clamp(3.6rem, 17vw, 5rem); }
.cover-guest { background: #f8fafc; border-radius: 18px; border: 2px dashed var(--line); }
.hero-overlay { background: linear-gradient(180deg, rgba(255, 255, 255, .7), rgba(255, 255, 255, .92) 60%, #fff); }
.hero-names { font-size: clamp(4.4rem, 20vw, 7rem); }
.card-x { border: 2px solid var(--line); overflow: hidden; }
.card-x::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 6px; background: var(--rainbow); }
.event-icon { background: #ede9fe; border: 0; }
.cd-item { border: 2px solid var(--line); }
.countdown .cd-item:nth-child(1) .cd-num { color: #f43f5e; } .countdown .cd-item:nth-child(2) .cd-num { color: #f59e0b; }
.countdown .cd-item:nth-child(3) .cd-num { color: #10b981; } .countdown .cd-item:nth-child(4) .cd-num { color: #3b82f6; }
.person-photo { transform: rotate(3deg); border: 6px solid #fff; box-shadow: 0 0 0 3px #1e1b4b, -10px 10px 0 #10b981; }
.quote-box { background: #fef3c7; border-radius: 22px; padding: 2rem 1.25rem; transform: rotate(-1deg); }
.translation { font-size: 1.15rem; font-weight: 500; }
.g-item { border-radius: 18px; }
.g-item:nth-child(odd) { box-shadow: 6px 6px 0 #f59e0b; } .g-item:nth-child(even) { box-shadow: 6px 6px 0 #8b5cf6; }
.sec-event { background: #f8fafc; }
.gift-bca { --gift-bg: linear-gradient(135deg, #f43f5e, #ec4899 50%, #8b5cf6); --gift-color: #fff; }
.gift-mandiri { --gift-bg: linear-gradient(135deg, #f59e0b, #10b981); --gift-color: #fff; }
.gift-bank { font-family: 'Fredoka', sans-serif; font-style: normal; font-weight: 700; }
.wish-avatar { background: var(--rainbow); }
.closing { background: radial-gradient(circle at 80% 20%, #fef3c7, transparent 40%), radial-gradient(circle at 20% 80%, #ede9fe, transparent 45%), #fff; }
.closing-title { font-size: clamp(3rem, 14vw, 4.5rem); }
.music-btn { box-shadow: 0 4px 0 #f43f5e; }
/* Posisi, warna & timing tiap kepingan confetti (sebelumnya atribut style inline) */
.confetti i.cf-1 { left: 66%; background: #f43f5e; animation-duration: 8.5s; animation-delay: -3.6s; --dx: -14px; border-radius: 50%; width: 9px; height: 9px; }
.confetti i.cf-2 { left: 37%; background: #f59e0b; animation-duration: 7.0s; animation-delay: -8.5s; --dx: 9px; }
.confetti i.cf-3 { left: 84%; background: #10b981; animation-duration: 7.7s; animation-delay: -11.0s; --dx: -29px; }
.confetti i.cf-4 { left: 49%; background: #3b82f6; animation-duration: 10.9s; animation-delay: -5.0s; --dx: 50px; border-radius: 50%; width: 9px; height: 9px; }
.confetti i.cf-5 { left: 64%; background: #8b5cf6; animation-duration: 10.8s; animation-delay: -7.7s; --dx: 27px; }
.confetti i.cf-6 { left: 92%; background: #ec4899; animation-duration: 8.4s; animation-delay: -12.0s; --dx: -53px; }
.confetti i.cf-7 { left: 17%; background: #f43f5e; animation-duration: 10.9s; animation-delay: -10.5s; --dx: -41px; border-radius: 50%; width: 9px; height: 9px; }
.confetti i.cf-8 { left: 90%; background: #f59e0b; animation-duration: 9.2s; animation-delay: -9.6s; --dx: 27px; }
.confetti i.cf-9 { left: 26%; background: #10b981; animation-duration: 8.0s; animation-delay: -1.5s; --dx: 31px; }
.confetti i.cf-10 { left: 81%; background: #3b82f6; animation-duration: 6.4s; animation-delay: -4.9s; --dx: 4px; border-radius: 50%; width: 9px; height: 9px; }
.confetti i.cf-11 { left: 60%; background: #8b5cf6; animation-duration: 9.8s; animation-delay: -7.2s; --dx: 27px; }
.confetti i.cf-12 { left: 52%; background: #ec4899; animation-duration: 10.9s; animation-delay: -11.0s; --dx: -58px; }
.confetti i.cf-13 { left: 55%; background: #f43f5e; animation-duration: 8.2s; animation-delay: -0.6s; --dx: 36px; border-radius: 50%; width: 9px; height: 9px; }
.confetti i.cf-14 { left: 94%; background: #f59e0b; animation-duration: 8.1s; animation-delay: -11.5s; --dx: -13px; }
.confetti i.cf-15 { left: 74%; background: #10b981; animation-duration: 10.6s; animation-delay: -10.4s; --dx: -30px; }
.confetti i.cf-16 { left: 14%; background: #3b82f6; animation-duration: 9.3s; animation-delay: -11.5s; --dx: 7px; border-radius: 50%; width: 9px; height: 9px; }
.confetti i.cf-17 { left: 46%; background: #8b5cf6; animation-duration: 6.3s; animation-delay: -0.8s; --dx: -25px; }
.confetti i.cf-18 { left: 24%; background: #ec4899; animation-duration: 10.5s; animation-delay: -9.9s; --dx: 8px; }
.confetti i.cf-19 { left: 70%; background: #f43f5e; animation-duration: 11.4s; animation-delay: -3.0s; --dx: -21px; border-radius: 50%; width: 9px; height: 9px; }
.confetti i.cf-20 { left: 44%; background: #f59e0b; animation-duration: 7.9s; animation-delay: -4.0s; --dx: 56px; }
.confetti i.cf-21 { left: 73%; background: #10b981; animation-duration: 9.5s; animation-delay: -3.3s; --dx: -59px; }
.confetti i.cf-22 { left: 6%; background: #3b82f6; animation-duration: 10.5s; animation-delay: -4.2s; --dx: -1px; border-radius: 50%; width: 9px; height: 9px; }
.confetti i.cf-23 { left: 95%; background: #8b5cf6; animation-duration: 7.6s; animation-delay: -7.6s; --dx: 33px; }
.confetti i.cf-24 { left: 25%; background: #ec4899; animation-duration: 7.9s; animation-delay: -0.9s; --dx: 31px; }
.confetti i.cf-25 { left: 62%; background: #f43f5e; animation-duration: 6.1s; animation-delay: -6.8s; --dx: 27px; border-radius: 50%; width: 9px; height: 9px; }
.confetti i.cf-26 { left: 17%; background: #f59e0b; animation-duration: 8.4s; animation-delay: -8.8s; --dx: 15px; }