/* =========================================================
   Animasi undangan — dikendalikan oleh motion.js lewat atribut <html>:
     .anim             gerak masuk aktif (level light & full)
     .anim-ambient     efek berulang aktif (level full)
     [data-reveal-style] gaya muncul saat scroll: fade-up | zoom | slide | curtain | pop | float
     [data-names]      gaya nama: rise | shimmer | letters | blur | bounce
     [data-orn]        gerak ornamen: draw | sway | bloom | fade | twinkle
   Tanpa kelas .anim semua konten tampil statis.
   ========================================================= */

/* ---------------- Ornamen sudut tambahan ---------------- */
.cover__orn--tr { top: 0; right: 0; width: 130px; transform: scaleX(-1); }
.cover__orn--bl { bottom: 0; left: 0; width: 130px; transform: scaleY(-1); }
.cover__orn svg, .sec-orn svg { display: block; width: 100%; height: auto; overflow: visible; }

.sec { isolation: isolate; }
.sec-orn { position: absolute; z-index: -1; width: 118px; color: var(--accent); opacity: .32; pointer-events: none; }
.sec-orn--tl { top: 0; left: 0; }
.sec-orn--tr { top: 0; right: 0; transform: scaleX(-1); }
.sec-orn--bl { bottom: 0; left: 0; transform: scaleY(-1); }
.sec-orn--br { bottom: 0; right: 0; transform: rotate(180deg); }

/* ---------------- Sampul: urutan masuk ---------------- */
.anim .cover__content > * { animation: cv-in 1s cubic-bezier(.2, .7, .2, 1) both; }
.anim .cover__content > :nth-child(1) { animation-delay: .15s; }
.anim .cover__content > :nth-child(2) { animation-delay: .3s; }
.anim .cover__content > :nth-child(3) { animation-delay: .45s; }
.anim .cover__content > :nth-child(4) { animation-delay: .6s; }
.anim .cover__content > :nth-child(5) { animation-delay: .75s; }
.anim .cover__content > :nth-child(6) { animation-delay: .9s; }
.anim .cover__content > .confetti-layer { animation: fade-in 1.2s ease both; }
@keyframes cv-in { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }

/* Tombol buka berdenyut */
.anim.anim-ambient .cover__content > .btn-open { animation: cv-in 1s cubic-bezier(.2, .7, .2, 1) .9s both, btn-pulse 2.6s ease-out 2.2s infinite; }
@keyframes btn-pulse {
  0% { box-shadow: 0 10px 30px -10px rgba(0, 0, 0, .5), 0 0 0 0 rgba(255, 255, 255, .55); }
  70%, 100% { box-shadow: 0 10px 30px -10px rgba(0, 0, 0, .5), 0 0 0 16px rgba(255, 255, 255, 0); }
}

/* Foto sampul perlahan membesar (Ken Burns) */
.anim-ambient .cover__half::before { animation: ken-burns 24s ease-in-out infinite alternate; }
@keyframes ken-burns { from { transform: scale(1); } to { transform: scale(1.12); } }

/* Isi undangan baru bergerak setelah sampul dibuka */
body.locked .main * { animation-play-state: paused !important; }
.anim-paused * { animation-play-state: paused !important; }

/* Foto utama melayang pelan */
.anim-ambient .hero > .hero__photo { animation: rise .9s ease .3s both, photo-float 7s ease-in-out 1.4s infinite alternate; }
@keyframes photo-float { from { transform: translateY(0); } to { transform: translateY(-8px); } }

/* ---------------- Gaya nama ---------------- */
/* blur — muncul dari kabur */
.anim[data-names="blur"] .cover__content > .cover__names { animation: nm-blur 1.6s ease .3s both; }
.anim[data-names="blur"] .hero > .hero__names { animation: nm-blur 1.6s ease .2s both; }
@keyframes nm-blur { from { opacity: 0; filter: blur(14px); letter-spacing: .12em; } to { opacity: 1; filter: blur(0); } }

/* bounce — membal ceria */
.anim[data-names="bounce"] .cover__content > .cover__names { animation: nm-pop 1s cubic-bezier(.34, 1.56, .64, 1) .3s both; }
.anim[data-names="bounce"] .hero > .hero__names { animation: nm-pop 1s cubic-bezier(.34, 1.56, .64, 1) .2s both; }
@keyframes nm-pop { from { opacity: 0; transform: scale(.4) rotate(-6deg); } to { opacity: 1; transform: none; } }

/* letters — huruf demi huruf */
.anim[data-names="letters"] .ch { display: inline-block; animation: ch-in .8s cubic-bezier(.2, .7, .2, 1) both; animation-delay: calc(.4s + var(--i) * 55ms); }
@keyframes ch-in { from { opacity: 0; transform: translateY(.45em) rotate(6deg); filter: blur(3px); } to { opacity: 1; transform: none; filter: none; } }

/* shimmer — kilau emas melintas */
.anim-ambient[data-names="shimmer"] .cover__content > .cover__names,
.anim-ambient[data-names="shimmer"] .hero > .hero__names,
.anim-ambient[data-names="shimmer"] .aside__names {
  background: linear-gradient(105deg, var(--shim-base) 38%, var(--shim-hi) 50%, var(--shim-base) 62%) 0 0 / 300% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.anim-ambient[data-names="shimmer"] .cover__content > .cover__names { --shim-base: #e9d29a; --shim-hi: #fffbea; animation: cv-in 1s ease .3s both, shimmer 5s linear 1.4s infinite; }
.anim-ambient[data-names="shimmer"] .hero > .hero__names { --shim-base: #c9a45c; --shim-hi: #fff3cf; animation: rise .9s ease .2s both, shimmer 5s linear 1.4s infinite; }
.anim-ambient[data-names="shimmer"] .aside__names { --shim-base: #e9d29a; --shim-hi: #fffbea; animation: shimmer 6s linear infinite; }
@keyframes shimmer { from { background-position: 100% 0; } to { background-position: -50% 0; } }

/* ---------------- Ornamen ---------------- */
/* draw — garis tergambar */
.anim[data-orn="draw"] :is(.cover__orn, .sec-orn) [pathLength] {
  stroke-dasharray: 1; stroke-dashoffset: 1;
  animation: draw 2.6s cubic-bezier(.6, .1, .3, 1) forwards; animation-delay: calc(.2s + var(--k, 0) * 70ms);
}
@keyframes draw { to { stroke-dashoffset: 0; } }
.anim-ambient[data-orn="draw"] :is(.cover__orn, .sec-orn) svg { animation: orn-glow 4.5s ease-in-out 3s infinite; }
@keyframes orn-glow { 0%, 100% { opacity: 1; } 50% { opacity: .55; } }

/* sway — tumbuh dari sudut lalu bergoyang tertiup angin */
.anim[data-orn="sway"] :is(.cover__orn, .sec-orn) svg { transform-origin: 0 0; animation: orn-grow 1.8s cubic-bezier(.2, .7, .2, 1) .2s both; }
.anim-ambient[data-orn="sway"] :is(.cover__orn, .sec-orn) svg { animation: orn-grow 1.8s cubic-bezier(.2, .7, .2, 1) .2s both, orn-sway 5.5s ease-in-out 2s infinite alternate; }
.anim-ambient[data-orn="sway"] :is(.cover__orn--tr, .cover__orn--bl, .sec-orn--tr) svg { animation-duration: 1.8s, 6.5s; }
@keyframes orn-grow { from { opacity: 0; transform: scale(.3) rotate(-14deg); } to { opacity: 1; transform: none; } }
@keyframes orn-sway { from { transform: rotate(0deg); } to { transform: rotate(4deg) skewX(-2deg); } }

/* bloom — bunga mekar lalu bernapas */
.anim[data-orn="bloom"] :is(.cover__orn, .sec-orn) svg { transform-origin: 18% 18%; animation: orn-bloom 1.9s cubic-bezier(.34, 1.4, .64, 1) .2s both; }
.anim-ambient[data-orn="bloom"] :is(.cover__orn, .sec-orn) svg { animation: orn-bloom 1.9s cubic-bezier(.34, 1.4, .64, 1) .2s both, orn-breathe 4.5s ease-in-out 2.2s infinite alternate; }
@keyframes orn-bloom { from { opacity: 0; transform: scale(0) rotate(-35deg); } to { opacity: 1; transform: none; } }
@keyframes orn-breathe { from { transform: scale(1) rotate(0); } to { transform: scale(1.05) rotate(2deg); } }

/* fade — muncul anggun */
.anim[data-orn="fade"] :is(.cover__orn, .sec-orn) svg { animation: orn-fade 2s ease .2s both; }
.anim-ambient[data-orn="fade"] :is(.cover__orn, .sec-orn) svg { animation: orn-fade 2s ease .2s both, orn-glow 6s ease-in-out 2.5s infinite; }
@keyframes orn-fade { from { opacity: 0; transform: scale(.85); } to { opacity: 1; transform: none; } }

/* twinkle — bintang berkelip */
.anim[data-orn="twinkle"] :is(.cover__orn, .sec-orn) svg { animation: orn-fade 1.4s ease .2s both; }
.anim-ambient[data-orn="twinkle"] :is(.cover__orn, .sec-orn) svg > * { animation: twinkle 2.4s ease-in-out infinite; }
.anim-ambient[data-orn="twinkle"] :is(.cover__orn, .sec-orn) svg > :nth-child(2) { animation-delay: .6s; }
.anim-ambient[data-orn="twinkle"] :is(.cover__orn, .sec-orn) svg > :nth-child(3) { animation-delay: 1.2s; }
.anim-ambient[data-orn="twinkle"] :is(.cover__orn, .sec-orn) svg > :nth-child(4) { animation-delay: 1.8s; }
@keyframes twinkle { 0%, 100% { opacity: 1; } 50% { opacity: .2; } }

/* ---------------- Efek khusus sampul ---------------- */
.fx-cover { position: absolute; inset: 0; z-index: 1; pointer-events: none; overflow: hidden; color: var(--cover-ink); transition: opacity .5s ease; }
.cover.is-open .fx-cover { opacity: 0; }

/* Bingkai garis (Royal Gold, Minimal Mono) */
.fx-frame { position: absolute; inset: 16px; width: calc(100% - 32px); height: calc(100% - 32px); }
.fx-frame rect { fill: none; stroke: currentColor; stroke-width: 1; vector-effect: non-scaling-stroke; opacity: .55; }
[data-theme="royal-gold"] .fx-frame rect { stroke: #c9a45c; opacity: .8; }
.anim .fx-frame rect { stroke-dasharray: 1; stroke-dashoffset: 1; animation: draw 3s cubic-bezier(.6, .1, .3, 1) .3s forwards; }
.anim .fx-frame rect + rect { animation-delay: .7s; }

/* Ombak (Ocean Breeze) */
.fx-waves { position: absolute; left: 0; right: 0; bottom: 0; height: 120px; }
.fx-wave { position: absolute; bottom: 0; left: 0; width: 200%; height: 100%; fill: #fff; }
.fx-wave--1 { opacity: .1; height: 120px; }
.fx-wave--2 { opacity: .16; height: 90px; }
.fx-wave--3 { opacity: .24; height: 60px; }
.anim-ambient .fx-wave { animation: wave 14s linear infinite; }
.anim-ambient .fx-wave--2 { animation-duration: 10s; animation-direction: reverse; }
.anim-ambient .fx-wave--3 { animation-duration: 7s; }
@keyframes wave { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* Awan (Pastel Dream) */
.fx-cloud { position: absolute; width: 140px; fill: #fff; opacity: .5; }
.fx-cloud--1 { top: 9%; left: -10%; }
.fx-cloud--2 { top: 22%; left: 60%; width: 100px; opacity: .35; }
.fx-cloud--3 { bottom: 16%; left: 20%; width: 120px; opacity: .3; }
.anim-ambient .fx-cloud { animation: cloud 38s linear infinite; }
.anim-ambient .fx-cloud--2 { animation-duration: 52s; animation-delay: -20s; }
.anim-ambient .fx-cloud--3 { animation-duration: 46s; animation-delay: -34s; }
@keyframes cloud { from { transform: translateX(-30vw); } to { transform: translateX(110vw); } }

/* Mandala kawung berputar (Batik Heritage) */
.fx-mandala { position: absolute; left: 50%; top: 50%; width: min(130vw, 620px); height: auto; margin: 0; transform: translate(-50%, -50%); color: #d4a64a; opacity: .14; }
.fx-mandala ellipse, .fx-mandala circle { fill: none; stroke: currentColor; stroke-width: 1.2; }
.anim .fx-mandala { animation: mandala-in 2.4s ease both; }
.anim-ambient .fx-mandala { animation: mandala-in 2.4s ease both, mandala-spin 90s linear infinite; }
@keyframes mandala-in { from { opacity: 0; transform: translate(-50%, -50%) scale(.7) rotate(-30deg); } }
@keyframes mandala-spin { to { transform: translate(-50%, -50%) rotate(360deg); } }

/* Balon (Confetti Party) */
.fx-balloon { position: absolute; bottom: -120px; width: 46px; height: auto; }
.fx-balloon path { stroke: rgba(255, 255, 255, .6); }
.fx-balloon--1 { left: 8%; fill: #ff4f73; }
.fx-balloon--2 { left: 30%; fill: #ffc23d; width: 38px; }
.fx-balloon--3 { left: 68%; fill: #22c38e; width: 42px; }
.fx-balloon--4 { left: 86%; fill: #3a86ff; }
.anim-ambient .fx-balloon { animation: balloon 13s ease-in infinite; }
.anim-ambient .fx-balloon--2 { animation-duration: 16s; animation-delay: -6s; }
.anim-ambient .fx-balloon--3 { animation-duration: 12s; animation-delay: -9s; }
.anim-ambient .fx-balloon--4 { animation-duration: 15s; animation-delay: -3s; }
@keyframes balloon {
  0% { transform: translate(0, 0) rotate(-4deg); }
  50% { transform: translate(18px, -60vh) rotate(5deg); }
  100% { transform: translate(-10px, -125vh) rotate(-3deg); }
}

/* ---------------- Partikel latar ---------------- */
.fx-particles { position: fixed; inset: 0; z-index: 55; pointer-events: none; overflow: hidden; }
.pt { position: absolute; top: 0; left: var(--x); width: var(--size); height: var(--size); opacity: var(--o, .8); will-change: transform; animation: pt-fall var(--dur) linear var(--delay) infinite; }
.pt > b { display: block; width: 100%; height: 100%; will-change: transform; animation: pt-sway calc(var(--dur) / 3) ease-in-out var(--delay) infinite alternate; }
.pt svg { display: block; width: 100%; height: 100%; }
.pt--rise { animation-name: pt-rise; }
.pt--drift { animation-name: pt-drift; }
.pt--drift > b { border-radius: 50%; background: currentColor; box-shadow: 0 0 8px 2px currentColor; animation-name: pt-twinkle; animation-duration: 3s; }
.pt--confetti > b { animation-name: pt-flip; animation-duration: calc(var(--dur) / 5); }
.pt--jasmine svg { filter: drop-shadow(0 1px 1.5px rgba(122, 34, 34, .45)); }
.pt--bubble { opacity: calc(var(--o) * .8); }
.pt-confetti { display: block; width: 60%; height: 100%; margin: 0 auto; border-radius: 2px; background: currentColor; }
@keyframes pt-fall { from { transform: translate3d(0, -12vh, 0); } to { transform: translate3d(0, 112vh, 0); } }
@keyframes pt-rise { from { transform: translate3d(0, 112vh, 0); } to { transform: translate3d(0, -12vh, 0); } }
@keyframes pt-drift { from { transform: translate3d(0, 104vh, 0); } to { transform: translate3d(var(--sway), -6vh, 0); } }
@keyframes pt-sway { from { transform: translateX(calc(var(--sway) * -1)) rotate(calc(var(--spin) * -1)); } to { transform: translateX(var(--sway)) rotate(var(--spin)); } }
@keyframes pt-twinkle { 0%, 100% { opacity: .25; transform: scale(.6); } 50% { opacity: 1; transform: scale(1); } }
@keyframes pt-flip { from { transform: translateX(calc(var(--sway) * -1)) rotate3d(1, .4, .2, 0deg); } to { transform: translateX(var(--sway)) rotate3d(1, .4, .2, 540deg); } }

/* Ledakan saat dibuka */
.fx-burst { position: fixed; z-index: 60; width: 0; height: 0; pointer-events: none; }
.fx-burst i { position: absolute; left: calc(var(--size) / -2); top: calc(var(--size) / -2); width: var(--size); height: var(--size); animation: burst 1.6s cubic-bezier(.1, .8, .3, 1) both; }
.fx-burst svg { display: block; width: 100%; height: 100%; }
.fx-burst .pt-confetti { width: 60%; }
@keyframes burst {
  0% { opacity: 1; transform: translate(0, 0) rotate(0) scale(.4); }
  70% { opacity: 1; }
  100% { opacity: 0; transform: translate(var(--tx), calc(var(--ty) + 140px)) rotate(var(--rot)) scale(1); }
}

/* ---------------- Muncul saat di-scroll ---------------- */
.anim [data-reveal] {
  opacity: 0;
  transition: opacity .8s ease, transform .95s cubic-bezier(.2, .7, .2, 1), filter .8s ease;
  transition-delay: calc(var(--i, 0) * 90ms);
}
.anim[data-reveal-style="fade-up"] [data-reveal] { transform: translateY(34px); }
.anim[data-reveal-style="zoom"] [data-reveal] { transform: scale(.9); }
.anim[data-reveal-style="slide"] [data-reveal] { transform: translateX(-38px); }
/* curtain: terbuka dari atas seperti tirai (tanpa clip-path agar tetap terdeteksi IntersectionObserver) */
.anim[data-reveal-style="curtain"] [data-reveal] { transform: perspective(700px) rotateX(-24deg) translateY(18px); transform-origin: 50% 0; }
.anim[data-reveal-style="pop"] [data-reveal] { transform: scale(.7) rotate(-3deg); transition-timing-function: ease, cubic-bezier(.34, 1.56, .64, 1), ease; }
.anim[data-reveal-style="float"] [data-reveal] { transform: translateY(42px); filter: blur(6px); }
.anim [data-reveal].in { opacity: 1; transform: none; filter: none; }

/* Hitung mundur berdetak */
.anim .countdown b.tick { animation: tick .5s cubic-bezier(.34, 1.56, .64, 1); }
@keyframes tick { from { transform: scale(1.22); opacity: .6; } to { transform: none; opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
  .fx-particles, .fx-burst { display: none; }
}

/* Ornamen sudut di hero tidak ikut animasi "rise" milik .hero > * (agar transform cerminnya tetap) */
.hero > .sec-orn { animation: none; }