/*
 * KabarNikah — layar muat animasi.
 * Urutan: amplop tertutup → tutup amplop terbuka → kartu naik → dua cincin keluar,
 * lalu menyatu → hati putih muncul di atas cincin → detak halus selama memuat.
 * Geometri SVG diukur dari logo asli (koordinat piksel gambar 2000×1116; viewBox = area logo).
 */
.kl-overlay{
  --kl-navy:#1C385F;
  --kl-paper:#FBF7F2;
  --kl-ink:#25211F;
  position:fixed;inset:0;z-index:2147483000;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;
  background:var(--kl-paper);color:var(--kl-ink);
  transition:opacity .45s ease,visibility 0s linear .45s;
  padding:24px env(safe-area-inset-right) calc(24px + env(safe-area-inset-bottom)) env(safe-area-inset-left);
}
.kl-skip .kl-overlay{display:none}
.kl-overlay.kl-out{opacity:0;visibility:hidden}
.kl-overlay.kl-out .kl-stage{transform:scale(1.03);transition:transform .45s ease}
html.kl-busy,html.kl-busy body{overflow:hidden}

.kl-stage{
  position:relative;width:min(58vw,260px);aspect-ratio:663/630;
  animation:kl-in .5s cubic-bezier(.2,.8,.2,1) both;
}
.kl-l{position:absolute;inset:0;width:100%;height:100%;overflow:visible;display:block}
.kl-back{z-index:1}
.kl-letter{z-index:2;animation:kl-letter .6s .95s cubic-bezier(.2,.7,.3,1) both}
.kl-rings{z-index:3;animation:kl-ringsZ 1ms 2.06s both}
.kl-front{z-index:4}
.kl-flap{z-index:6;transform-origin:50% 34.44%;backface-visibility:visible;
  animation:kl-flap .95s .38s cubic-bezier(.55,0,.25,1) both}
.kl-flap path{animation:kl-flapStroke .45s .85s ease-out both}
.kl-top{z-index:7}

.kl-ringL,.kl-ringR,.kl-heart,.kl-spark{transform-box:fill-box}
.kl-ringL{animation:kl-ringL 1.5s 1.15s both}
.kl-ringR{animation:kl-ringR 1.5s 1.15s both}
.kl-heart{transform-origin:50% 50%;
  animation:kl-heart .7s 2.6s cubic-bezier(.3,1.7,.5,1) both,kl-beat 1.7s 3.5s ease-in-out infinite}
.kl-spark{transform-origin:50% 50%;opacity:0;animation:kl-spark .9s 2.68s ease-out both}

.kl-word{font-family:'Cormorant Garamond',Georgia,serif;font-weight:600;font-size:clamp(26px,6.5vw,34px);
  letter-spacing:.01em;line-height:1;color:var(--kl-navy);
  animation:kl-fade .6s 2.35s ease-out both}
.kl-word b{font-weight:700;color:#A8813C}
.kl-status{font:500 13px/1.4 'Plus Jakarta Sans',system-ui,sans-serif;letter-spacing:.04em;color:#5d5650;
  min-height:1.4em;animation:kl-fade .5s .6s ease-out both}
.kl-status::after{content:'';display:inline-block;width:1.2em;text-align:left;animation:kl-dots 1.4s steps(4,end) infinite}

@keyframes kl-in{from{opacity:0;transform:translateY(10px) scale(.92)}to{opacity:1;transform:none}}
@keyframes kl-flap{
  0%{transform:perspective(900px) rotateX(180deg);z-index:6;filter:brightness(1.08)}
  49.9%{z-index:6}
  50%{z-index:0;filter:brightness(.7)}
  100%{transform:perspective(900px) rotateX(0deg);z-index:0;filter:none}
}
@keyframes kl-flapStroke{from{stroke-width:11}to{stroke-width:0}}
@keyframes kl-letter{from{transform:translateY(9%)}to{transform:none}}
@keyframes kl-ringsZ{from{z-index:3}to{z-index:5}}
@keyframes kl-ringL{
  0%{transform:translate(-66px,262px);animation-timing-function:cubic-bezier(.2,.75,.3,1)}
  60%{transform:translate(-66px,-30px);animation-timing-function:cubic-bezier(.5,0,.25,1)}
  100%{transform:translate(0,0)}
}
@keyframes kl-ringR{
  0%{transform:translate(66px,262px);animation-timing-function:cubic-bezier(.2,.75,.3,1)}
  60%{transform:translate(66px,-30px);animation-timing-function:cubic-bezier(.5,0,.25,1)}
  100%{transform:translate(0,0)}
}
@keyframes kl-heart{0%{transform:scale(0);opacity:0}40%{opacity:1}100%{transform:scale(1);opacity:1}}
@keyframes kl-beat{0%,58%,100%{transform:scale(1)}12%{transform:scale(1.13)}26%{transform:scale(1)}38%{transform:scale(1.07)}}
@keyframes kl-spark{0%{opacity:0;transform:translate(0,0) scale(.4)}25%{opacity:1}100%{opacity:0;transform:translate(var(--dx),var(--dy)) scale(1)}}
@keyframes kl-fade{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
@keyframes kl-dots{0%{content:''}25%{content:'.'}50%{content:'..'}75%{content:'...'}}

/* Mode cepat (halaman platform setelah kunjungan pertama): langsung keadaan akhir. */
.kl-fast .kl-stage,.kl-fast .kl-flap,.kl-fast .kl-flap path,.kl-fast .kl-letter,.kl-fast .kl-rings,
.kl-fast .kl-ringL,.kl-fast .kl-ringR,.kl-fast .kl-heart,.kl-fast .kl-spark,.kl-fast .kl-word,.kl-fast .kl-status{
  animation-delay:0s!important;animation-duration:1ms!important}
.kl-fast .kl-heart{animation:kl-heart 1ms both,kl-beat 1.7s .2s ease-in-out infinite!important}

@media (prefers-reduced-motion:reduce){
  .kl-stage,.kl-flap,.kl-flap path,.kl-letter,.kl-rings,.kl-ringL,.kl-ringR,.kl-heart,.kl-spark,.kl-word,.kl-status,.kl-status::after{animation:none!important}
  .kl-flap{transform:none;z-index:0}
  .kl-flap path{stroke-width:0}
  .kl-rings{z-index:5}
  .kl-spark{opacity:0}
  .kl-overlay{transition:opacity .2s linear,visibility 0s linear .2s}
}