@props(['wedding', 'guestName' => null])

<style>
    /* =====================================================================
       GERBANG UNDANGAN — dua daun pintu yang berayun terbuka (engsel 3D)
       ---------------------------------------------------------------------
       Ditulis mandiri & murni pakai `transform` + `opacity` (tanpa animasi
       `filter: blur()` yang berat di HP), supaya buttery-smooth di semua
       perangkat dan TIDAK bergantung pada transitions.js/app.css. Kalau
       transitions.js lama Anda masih memuat efek serupa, silakan dihapus
       agar tidak dobel.
    ===================================================================== */
    #cover {
        perspective: 1700px;
    }
    #cover.gate-open  { pointer-events: none; }
    #cover.gate-hidden{ visibility: hidden; }

    .gate-panel {
        position: absolute; top: 0; bottom: 0; left: auto; right: auto; width: 50%; overflow: hidden;
        background: linear-gradient(160deg, #2a060f 0%, #4a0f1c 45%, #3f0a13 100%);
        transition: transform 1.35s cubic-bezier(.65,0,.35,1),
                    opacity   .7s ease .75s;
        backface-visibility: hidden;
        will-change: transform;
    }
    .gate-panel--left  { left: 0;   transform-origin: left center; }
    .gate-panel--right { left: 50%; transform-origin: right center; }
    #cover.gate-open .gate-panel--left  { transform: rotateY(-108deg); opacity: 0; }
    #cover.gate-open .gate-panel--right { transform: rotateY(108deg);  opacity: 0; }

    /* Sedikit "dorongan" jelly sesaat sebelum terbuka penuh — biar berasa lentur & hidup */
    #cover.cover-closing .gate-panel { transition: transform .45s cubic-bezier(.34,1.56,.64,1); }
    #cover.cover-closing .gate-panel--left  { transform: rotateY(-4deg); }
    #cover.cover-closing .gate-panel--right { transform: rotateY(4deg); }

    /* ---------- Sambungan/engsel gerbang di tengah — garis emas berkilau ---------- */
    .gate-seam {
        position: absolute; top: 6%; bottom: 6%; width: 3px; z-index: 4;
        background: linear-gradient(180deg, transparent, rgba(217,179,106,.9) 15%, rgba(217,179,106,.9) 85%, transparent);
        box-shadow: 0 0 14px rgba(217,179,106,.55);
    }
    .gate-seam--left  { right: 0; }
    .gate-seam--right { left: 0; }
    .gate-hinge {
        position: absolute; width: 7px; height: 7px; border-radius: 999px; z-index: 4;
        background: #F3E1B5; box-shadow: 0 0 10px rgba(243,225,181,.85);
        animation: hingeGlow 2.6s ease-in-out infinite;
    }
    @keyframes hingeGlow { 0%,100% { opacity:.45; transform:scale(.85); } 50% { opacity:1; transform:scale(1.15); } }

    /* ---------- Cahaya yang menyembur dari celah gerbang saat mulai terbuka ---------- */
    .gate-seam-glow {
        position: absolute; top: 0; bottom: 0; left: 50%; width: 8px; z-index: 6;
        transform: translateX(-50%) scaleX(0); transform-origin: center;
        background: linear-gradient(90deg, transparent, rgba(255,246,220,.98), transparent);
        opacity: 0; pointer-events: none;
    }
    #cover.gate-open .gate-seam-glow { animation: seamFlash 1.35s cubic-bezier(.4,0,.2,1) forwards; }
    @keyframes seamFlash {
        0%   { opacity: 0;  transform: translateX(-50%) scaleX(0); }
        10%  { opacity: 1;  }
        55%  { opacity: .85; transform: translateX(-50%) scaleX(160); }
        100% { opacity: 0;  transform: translateX(-50%) scaleX(240); }
    }

    /* ---------- Gembok hati kawaii di tengah gerbang — "pop" terbuka saat disentuh ---------- */
    .gate-lock {
        position: absolute; top: 50%; left: 50%; z-index: 17;
        transform: translate(-50%,-50%) scale(1); font-size: 30px;
        filter: drop-shadow(0 3px 8px rgba(0,0,0,.4));
        animation: lockIdle 2.2s ease-in-out infinite;
    }
    @keyframes lockIdle { 0%,100% { transform: translate(-50%,-50%) scale(1) rotate(-4deg); } 50% { transform: translate(-50%,-50%) scale(1.08) rotate(4deg); } }
    #cover.cover-closing .gate-lock { animation: lockPop .55s cubic-bezier(.34,1.56,.64,1) forwards; }
    @keyframes lockPop {
        0%   { transform: translate(-50%,-50%) scale(1) rotate(0deg);   opacity: 1; }
        45%  { transform: translate(-50%,-50%) scale(1.55) rotate(-16deg); opacity: 1; }
        100% { transform: translate(-50%,-50%) scale(0) rotate(20deg);  opacity: 0; }
    }

    /* ---------- Cincin kilau kecil dari titik tombol, sentuhan tambahan saat gerbang mulai bergerak ---------- */
    .portal-ring {
        position: absolute; top: 50%; left: 50%; z-index: 8; pointer-events: none;
        width: 10px; height: 10px; border-radius: 999px;
        transform: translate(-50%, -50%) scale(0);
        border: 2px solid rgba(253,224,171,.95); opacity: 0;
    }
    #cover.cover-closing .portal-ring { animation: portalRingPulse 1.1s cubic-bezier(.4,0,.2,1) forwards; }
    @keyframes portalRingPulse {
        0%   { transform: translate(-50%,-50%) scale(0);  opacity: 0; box-shadow: 0 0 0 0 rgba(253,164,175,0); }
        12%  { opacity: 1; }
        70%  { transform: translate(-50%,-50%) scale(42); opacity: .5; box-shadow: 0 0 60px 18px rgba(253,164,175,.3); }
        100% { transform: translate(-50%,-50%) scale(58); opacity: 0;  box-shadow: 0 0 80px 26px rgba(253,164,175,0); }
    }

    /* ---------- Sepasang burung cinta kawaii terbang berlawanan arah saat gerbang terbuka ---------- */
    .lovebird-fly {
        position: absolute; top: 50%; left: 50%; z-index: 16; pointer-events: none;
        font-size: 22px; opacity: 0; transform: translate(-50%,-50%) scale(.4);
        filter: drop-shadow(0 2px 4px rgba(0,0,0,.35));
    }
    #cover.cover-closing .lovebird-fly--left  { animation: flyLeft .95s cubic-bezier(.22,1,.36,1) forwards; }
    #cover.cover-closing .lovebird-fly--right { animation: flyRight .95s cubic-bezier(.22,1,.36,1) forwards; }
    @keyframes flyLeft {
        0%   { opacity: 0; transform: translate(-50%,-50%) scale(.3) rotate(0deg); }
        18%  { opacity: 1; }
        100% { opacity: 0; transform: translate(-260%,-190%) scale(1.15) rotate(-20deg); }
    }
    @keyframes flyRight {
        0%   { opacity: 0; transform: translate(-50%,-50%) scale(.3) rotate(0deg); }
        18%  { opacity: 1; }
        100% { opacity: 0; transform: translate(160%,-190%) scale(1.15) rotate(20deg); }
    }

    /* ---------- Kupu-kupu kecil kawaii tambahan, murni dekoratif & lucu ---------- */
    .cute-butterfly { position: absolute; z-index: 6; font-size: 15px; opacity: .8; animation: butterflyFlutter 3.4s ease-in-out infinite; pointer-events: none; }
    @keyframes butterflyFlutter {
        0%,100% { transform: translate(0,0) rotate(-6deg) scaleX(1); }
        25%      { transform: translate(6px,-10px) rotate(8deg) scaleX(.85); }
        50%      { transform: translate(-3px,-4px) rotate(-4deg) scaleX(1); }
        75%      { transform: translate(4px,-14px) rotate(10deg) scaleX(.9); }
    }

    /* ---------- Konten teks (nama, tombol, dsb) — TIDAK ikut terbelah, cukup memudar naik dulu ---------- */
    .cover-inner-fade { transition: opacity .55s ease, transform .55s cubic-bezier(.22,1,.36,1); }
    #cover.cover-closing .cover-inner-fade { opacity: 0; transform: translateY(-18px) scale(.97); }

    /* ---------- Ajakan lembut di bawah tombol, bergoyang pelan ---------- */
    .cover-hint { display: inline-block; animation: hintWiggle 2.6s ease-in-out infinite; }
    @keyframes hintWiggle { 0%,100% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(-2px) rotate(-1.5deg); } }

    /* ---------- Aurora bergerak pelan ---------- */
    .aurora-bg {
        position: absolute; inset: -25%; z-index: 0; pointer-events: none;
        background:
            radial-gradient(38% 30% at 22% 18%, rgba(244,63,94,.4), transparent 70%),
            radial-gradient(30% 26% at 80% 12%, rgba(217,179,106,.32), transparent 70%),
            radial-gradient(42% 34% at 50% 95%, rgba(190,18,60,.4), transparent 70%);
        animation: auroraDrift 14s ease-in-out infinite alternate;
    }
    @keyframes auroraDrift {
        0%   { transform: translate3d(0,0,0) scale(1);     opacity: .7; }
        50%  { transform: translate3d(2%,-3%,0) scale(1.09); opacity: 1; }
        100% { transform: translate3d(-3%,2%,0) scale(1.03); opacity: .85; }
    }

    /* ---------- Lapisan gradasi yang bergeser perlahan ---------- */
    .cover-shift {
        position: absolute; inset: 0; z-index: 0; pointer-events: none; mix-blend-mode: overlay; opacity: .55;
        background: linear-gradient(120deg, rgba(217,179,106,.18), rgba(244,63,94,.14), rgba(217,179,106,.18));
        background-size: 220% 220%;
        animation: shiftGradient 9s ease-in-out infinite;
    }
    @keyframes shiftGradient { 0%,100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }

    /* ---------- Cahaya lembut mengikuti kursor ---------- */
    .cursor-glow {
        position: absolute; inset: 0; z-index: 3; pointer-events: none;
        background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 30%), rgba(253,164,175,.16), transparent 65%);
    }
    .cover-vignette {
        position: absolute; inset: 0; z-index: 1; pointer-events: none;
        background: radial-gradient(ellipse at center, transparent 42%, rgba(10,0,4,.6) 100%);
    }

    /* ---------- Bingkai sudut + titik berdenyut (kini per-panel, sisi luar saja) ---------- */
    .cover-frame-half { position: absolute; inset: 14px; z-index: 5; pointer-events: none; }
    .cover-frame-half span { position: absolute; width: 30px; height: 30px; }
    .gate-panel--left  .cover-frame-half span:nth-child(1) { top:0; left:0; border-top:1px solid rgba(217,179,106,.45); border-left:1px solid rgba(217,179,106,.45); }
    .gate-panel--left  .cover-frame-half span:nth-child(2) { bottom:0; left:0; border-bottom:1px solid rgba(217,179,106,.45); border-left:1px solid rgba(217,179,106,.45); }
    .gate-panel--right .cover-frame-half span:nth-child(1) { top:0; right:0; border-top:1px solid rgba(217,179,106,.45); border-right:1px solid rgba(217,179,106,.45); }
    .gate-panel--right .cover-frame-half span:nth-child(2) { bottom:0; right:0; border-bottom:1px solid rgba(217,179,106,.45); border-right:1px solid rgba(217,179,106,.45); }
    .cover-frame-half span::after {
        content: ''; position: absolute; width: 4px; height: 4px; border-radius: 999px; background: #D9B36C;
        box-shadow: 0 0 6px rgba(217,179,106,.85); opacity: .6; animation: framePulse 4s ease-in-out infinite;
    }
    .gate-panel--left  .cover-frame-half span:nth-child(1)::after { top:-2px; left:-2px; }
    .gate-panel--left  .cover-frame-half span:nth-child(2)::after { bottom:-2px; left:-2px; animation-delay:2s; }
    .gate-panel--right .cover-frame-half span:nth-child(1)::after { top:-2px; right:-2px; animation-delay:1s; }
    .gate-panel--right .cover-frame-half span:nth-child(2)::after { bottom:-2px; right:-2px; animation-delay:3s; }
    @keyframes framePulse { 0%,100% { opacity:.35; transform:scale(.8); } 50% { opacity:.9; transform:scale(1.2); } }

    /* ---------- Partikel per panel ---------- */
    .particle {
        position: absolute; bottom: -8%; z-index: 2; opacity: 0; pointer-events: none;
        animation-name: driftUp; animation-timing-function: cubic-bezier(.4,0,.2,1);
        animation-iteration-count: infinite;
    }
    .particle--heart { line-height: 1; }
    .particle--dot { border-radius: 999px; }
    .particle--rose { color:#fda4af; text-shadow:0 0 8px rgba(251,113,133,.5); background:#fda4af; box-shadow:0 0 8px rgba(251,113,133,.6); }
    .particle--white { color:#ffffff; text-shadow:0 0 8px rgba(255,255,255,.5); background:#ffffff; box-shadow:0 0 6px rgba(255,255,255,.6); }
    .particle--gold { color:#F3E1B5; text-shadow:0 0 8px rgba(243,225,181,.6); background:#F3E1B5; box-shadow:0 0 8px rgba(243,225,181,.6); }
    @keyframes driftUp {
        0%   { opacity: 0;   transform: translateY(0) translateX(0) scale(.6) rotate(-4deg); }
        12%  { opacity: .75; }
        50%  { transform: translateY(-52vh) translateX(10px) scale(1) rotate(3deg); }
        88%  { opacity: .35; }
        100% { opacity: 0;   transform: translateY(-105vh) translateX(-8px) scale(1.05) rotate(-5deg); }
    }

    .heartbeat { display: inline-block; animation: heartbeat 1.8s ease-in-out infinite; }
    @keyframes heartbeat {
        0%, 100% { transform: scale(1); }
        15%      { transform: scale(1.28); }
        30%      { transform: scale(1); }
        45%      { transform: scale(1.16); }
        60%      { transform: scale(1); }
    }

    /* ---------- Nama mempelai ---------- */
    .cover-name-wrap { position: relative; display: inline-block; margin-top: 40px; }
    .cover-name-text { color: #fdf1da; animation: nameGlow 4s ease-in-out infinite; }
    @keyframes nameGlow {
        0%, 100% { text-shadow: 0 0 12px rgba(217,179,106,.35), 0 0 2px rgba(255,255,255,.35); }
        50%      { text-shadow: 0 0 26px rgba(217,179,106,.7),  0 0 6px rgba(255,255,255,.6); }
    }
    .cover-name-wrap::after {
        content: ''; position: absolute; left: 50%; bottom: -12px; height: 1px; width: 0;
        background: linear-gradient(90deg, transparent, rgba(217,179,106,.95), transparent);
        transform: translateX(-50%);
        animation: underlineDraw 1.3s ease-out forwards; animation-delay: 1.7s;
    }
    @keyframes underlineDraw { to { width: 68%; } }

    /* ---------- Karakter hati kawaii, berdiri di atas simbol "&" ---------- */
    .cover-cute {
        position: absolute; top: -32px; left: 50%; width: 42px; height: 42px; z-index: 20;
        animation: cuteBounce 2.4s ease-in-out infinite;
        filter: drop-shadow(0 3px 6px rgba(0,0,0,.35));
    }
    @keyframes cuteBounce {
        0%, 100% { transform: translateX(-50%) translateY(0) rotate(-4deg); }
        50%      { transform: translateX(-50%) translateY(-8px) rotate(4deg); }
    }
    .spark {
        position: absolute; width: 5px; height: 5px; border-radius: 999px; background: #fff;
        box-shadow: 0 0 8px rgba(255,255,255,.9); animation: sparkTwinkle 2.4s ease-in-out infinite;
    }
    @keyframes sparkTwinkle { 0%,100% { opacity:0; transform:scale(.4); } 50% { opacity:1; transform:scale(1); } }

    /* ---------- Kartu nama tamu ---------- */
    .cover-guest-card {
        display: inline-block; padding: 6px 22px; border-radius: 999px;
        border: 1px solid rgba(255,255,255,.18); background: rgba(255,255,255,.05);
        backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
        animation: guestGlow 4s ease-in-out infinite;
    }
    @keyframes guestGlow {
        0%, 100% { box-shadow: 0 0 0 rgba(217,179,106,0); border-color: rgba(255,255,255,.18); }
        50%      { box-shadow: 0 0 16px rgba(217,179,106,.4); border-color: rgba(217,179,106,.6); }
    }

    .cover-gold-divider { display: inline-flex; align-items: center; gap: .6rem; color: rgba(217,179,108,.8); font-size: 12px; margin: 16px 0; }
    .cover-gold-divider::before, .cover-gold-divider::after { content:''; width:26px; height:1px; background: linear-gradient(90deg, transparent, rgba(217,179,108,.7)); }
    .cover-gold-divider::after { background: linear-gradient(90deg, rgba(217,179,108,.7), transparent); }

    .cover-rings-wrap { position: relative; display: inline-flex; margin: 14px 0 6px; }
    .cover-rings { animation: ringsBreathe 5s ease-in-out infinite; filter: drop-shadow(0 0 6px rgba(217,179,106,.5)); }
    @keyframes ringsBreathe { 0%, 100% { transform: scale(1) rotate(0deg); } 50% { transform: scale(1.08) rotate(3deg); } }

    .cover-fade-up { opacity: 0; animation: coverFadeUp 1.1s cubic-bezier(.19,1,.22,1) forwards; }
    @keyframes coverFadeUp { from { opacity:0; transform: translateY(14px); } to { opacity:1; transform: translateY(0); } }

    /* ---------- Tombol: melayang pelan + glow napas + kilau menyapu ---------- */
    .cover-btn-glow { position: relative; display: inline-block; border-radius: 999px; animation: btnFloat 3.6s ease-in-out infinite; }
    @keyframes btnFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
    .cover-btn-glow::before {
        content: ''; position: absolute; inset: -10px; border-radius: 999px; z-index: -1;
        background: radial-gradient(circle, rgba(217,179,106,.35), transparent 70%);
        animation: coverBtnBreathe 6s ease-in-out infinite;
    }
    @keyframes coverBtnBreathe { 0%,100% { opacity:.35; transform:scale(.95); } 50% { opacity:.8; transform:scale(1.08); } }
    .cover-btn-shine { position: absolute; inset: 0; overflow: hidden; border-radius: 999px; pointer-events: none; }
    .cover-btn-shine span {
        position: absolute; top: 0; left: -60%; width: 35%; height: 100%;
        background: linear-gradient(115deg, transparent, rgba(255,255,255,.35), transparent);
        transform: skewX(-20deg); animation: btnShine 3.4s ease-in-out infinite;
    }
    @keyframes btnShine { 0% { left:-60%; } 45% { left:130%; } 100% { left:130%; } }

    /* =====================================================================
       TAMBAHAN IMUT (v2) — semuanya transform/opacity, ringan di HP
       Nama-nama penting (#cover, .gate-*, #open-invitation-btn, dst) TIDAK diubah.
    ===================================================================== */

    /* Aurora: blur berat hanya di desktop. Gradasinya sudah lembut, jadi di HP cukup tanpa blur (jauh lebih ringan). */
    @media (min-width: 1024px) { .aurora-bg { filter: blur(40px); } }
    @media (max-width: 767px) {
        .cover-shift { mix-blend-mode: normal; opacity: .3; animation: none; }
        .cover-guest-card { backdrop-filter: none; -webkit-backdrop-filter: none; background: rgba(255,255,255,.08); }
        .cover-name-text { animation: none; text-shadow: 0 0 14px rgba(217,179,106,.45); }
    }

    /* ---------- Bendera segitiga (bunting) bergoyang di atas tiap daun pintu ---------- */
    .cover-bunting { position: absolute; top: 0; left: 0; right: 0; height: 48px; z-index: 5; pointer-events: none; }
    .cover-bunting::before {
        content: ''; position: absolute; top: -14px; left: -6%; right: -6%; height: 38px;
        border-bottom: 1.5px solid rgba(217,179,106,.55); border-radius: 50%;
    }
    .cover-flag {
        position: absolute; width: 0; height: 0; margin-left: -10px; opacity: .88;
        border-left: 10px solid transparent; border-right: 10px solid transparent;
        border-top: 19px solid var(--c, #fda4af);
        transform-origin: 50% 0; animation: flagSway 3.2s ease-in-out infinite; animation-delay: var(--d, 0s);
    }
    @keyframes flagSway { 0%,100% { transform: rotate(-7deg); } 50% { transform: rotate(7deg); } }

    /* ---------- Awan mungil melayang & boneka mengintip dari bawah ---------- */
    .cover-cloud { position: absolute; z-index: 2; font-size: 34px; line-height: 1; opacity: .16; pointer-events: none; animation: cloudDrift 16s ease-in-out infinite alternate; }
    @keyframes cloudDrift { from { transform: translateX(-14px); } to { transform: translateX(26px); } }
    .cover-peek {
        position: absolute; bottom: -12px; z-index: 6; font-size: 38px; line-height: 1; pointer-events: none;
        transform-origin: 50% 100%; animation: peekBob 3s ease-in-out infinite; filter: drop-shadow(0 3px 5px rgba(0,0,0,.3));
    }
    @keyframes peekBob { 0%,100% { transform: translateY(0) rotate(-4deg); } 50% { transform: translateY(-9px) rotate(4deg); } }
    @media (max-width: 380px) { .cover-peek { font-size: 30px; } }

    /* ---------- Nama mempelai: tiap huruf melompat kecil bergiliran ---------- */
    .cute-word { display: inline-block; white-space: nowrap; }
    .cute-letter { display: inline-block; animation: letterHop 3.4s cubic-bezier(.34,1.56,.64,1) infinite; animation-delay: calc(var(--i, 0) * .1s + 2s); }
    @keyframes letterHop {
        0%,32%,100% { transform: translateY(0) rotate(0deg); }
        10%         { transform: translateY(-.12em) rotate(-4deg); }
        20%         { transform: translateY(0) rotate(2deg); }
    }
    .cute-amp { display: inline-block; animation: heartbeat 1.8s ease-in-out infinite; }

    /* ---------- Kartu nama tamu: pita kecil di pojok ---------- */
    .cover-guest-card { position: relative; }
    .cover-guest-card::before {
        content: '\1F380'; position: absolute; top: -12px; left: -8px; font-size: 15px; line-height: 1;
        transform: rotate(-18deg); animation: bowWiggle 2.8s ease-in-out infinite;
    }
    @keyframes bowWiggle { 0%,100% { transform: rotate(-18deg) scale(1); } 50% { transform: rotate(-6deg) scale(1.15); } }

    /* ---------- Tombol: kenyal saat disentuh, amplop bergoyang ---------- */
    #open-invitation-btn {
        font-family: 'Fredoka', 'Jost', sans-serif;
        transition: transform .3s cubic-bezier(.34,1.56,.64,1), background-color .5s ease, color .5s ease, border-color .5s ease, box-shadow .5s ease;
    }
    #open-invitation-btn:active { transform: scale(.92); }
    @media (hover: hover) { #open-invitation-btn:hover { transform: scale(1.06); } }
    #open-invitation-btn svg { animation: envWiggle 2.8s ease-in-out infinite; }
    @keyframes envWiggle {
        0%,84%,100% { transform: rotate(0deg) scale(1); }
        88% { transform: rotate(-14deg) scale(1.15); }
        93% { transform: rotate(12deg) scale(1.15); }
    }

    /* ---------- Setelah gerbang terbuka: hentikan semua animasi di dalamnya (hemat baterai) ---------- */
    #cover.gate-hidden *, #cover.gate-hidden *::before, #cover.gate-hidden *::after { animation: none !important; }
    #cover.gate-hidden .gate-panel { will-change: auto; }

    /* ---------- Setelah gerbang terbuka: pastikan halaman BISA di-scroll ---------- */
    html.is-open, html.is-open body { overflow-y: auto !important; overflow-x: hidden; height: auto; touch-action: pan-y; }
    html.is-open body { position: static !important; }
    #cover.gate-hidden { display: none !important; }
    /* Jangan biarkan sampul menangkap sentuhan/gulir begitu mulai terbuka */
    #cover.gate-open, #cover.gate-open * { pointer-events: none !important; }

    /* =====================================================================
       V3 — LEBIH ANIMATIF, LEBIH RESPONSIF, LEBIH "WEDDING"
       Semua nama class & ID lama dipertahankan (JS aman). Class baru berawalan "cv3-".
       Tetap hanya transform/opacity supaya ringan di HP.
    ===================================================================== */

    /* ---------- Pola renda halus di tiap daun pintu ---------- */
    .gate-panel::before {
        content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: .8;
        background:
            radial-gradient(circle at 50% 50%, rgba(253,164,175,.13) 0 2px, transparent 2.6px) 0 0 / 26px 26px,
            radial-gradient(circle at 50% 50%, rgba(243,225,181,.10) 0 1.5px, transparent 2px) 13px 13px / 26px 26px;
    }

    /* ---------- Sepasang lonceng pernikahan berayun di atas celah gerbang ---------- */
    .cv3-bells { position: absolute; top: calc(env(safe-area-inset-top, 0px) + 44px); left: 50%; transform: translateX(-50%); z-index: 4; display: flex; align-items: flex-start; gap: 1px; pointer-events: none; }
    .cv3-bell { display: inline-block; font-size: 24px; line-height: 1; transform-origin: 50% 0; animation: cv3Ring 2.4s ease-in-out infinite; filter: drop-shadow(0 2px 4px rgba(0,0,0,.35)); }
    .cv3-bell--r { animation-delay: -1.2s; }
    .cv3-bow { display: inline-block; font-size: 15px; margin: 0 -2px; align-self: flex-start; animation: cv3BowPulse 1.8s ease-in-out infinite; }
    @keyframes cv3Ring { 0%,100% { transform: rotate(-16deg); } 50% { transform: rotate(16deg); } }
    @keyframes cv3BowPulse { 0%,60%,100% { transform: scale(1); } 20% { transform: scale(1.3); } 40% { transform: scale(1.1); } }

    /* ---------- Merpati cinta terbang menyeberang layar ---------- */
    .cv3-dove { position: absolute; left: -12%; z-index: 3; font-size: 22px; line-height: 1; pointer-events: none; opacity: 0; animation: cv3Dove 15s linear infinite; filter: drop-shadow(0 2px 3px rgba(0,0,0,.3)); }
    .cv3-dove--b { animation-direction: reverse; animation-delay: -7s; font-size: 18px; }
    @keyframes cv3Dove {
        0%   { opacity: 0;   transform: translate3d(0,0,0) rotate(-6deg); }
        8%   { opacity: .95; }
        25%  { transform: translate3d(30vw,-14px,0) rotate(4deg); }
        50%  { transform: translate3d(62vw,6px,0) rotate(-4deg); }
        75%  { transform: translate3d(95vw,-16px,0) rotate(5deg); }
        92%  { opacity: .95; }
        100% { opacity: 0;   transform: translate3d(124vw,-4px,0) rotate(-3deg); }
    }

    /* ---------- Rangkaian bunga menjuntai di sisi kiri & kanan layar ---------- */
    .cv3-garland { position: absolute; top: calc(env(safe-area-inset-top, 0px) + 96px); width: 22px; z-index: 3; display: flex; flex-direction: column; align-items: center; gap: 5px; pointer-events: none; }
    .cv3-garland--l { left: 3px; }
    .cv3-garland--r { right: 3px; }
    .cv3-garland span { display: block; font-size: 15px; line-height: 1; opacity: .92; transform-origin: 50% 0; animation: cv3Sway 3.6s ease-in-out infinite; animation-delay: calc(var(--i, 0) * -.45s); }
    @keyframes cv3Sway { 0%,100% { transform: rotate(-9deg) translateX(-1px); } 50% { transform: rotate(9deg) translateX(1px); } }

    /* ---------- Confetti & kelopak jatuh pelan ---------- */
    .cv3-confetti { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 1; }
    .cv3-confetti i {
        position: absolute; top: -14px; left: var(--x, 50%); width: 7px; height: 11px; border-radius: 2px; opacity: 0;
        background: var(--c, #fda4af); animation: cv3Confetti var(--t, 9s) linear infinite; animation-delay: var(--d, 0s);
    }
    .cv3-confetti i:nth-child(3n) { width: 7px; height: 7px; border-radius: 50%; }
    @keyframes cv3Confetti {
        0%   { opacity: 0;  transform: translate3d(0,0,0) rotate(0deg); }
        8%   { opacity: .9; }
        50%  { transform: translate3d(16px,52vh,0) rotate(190deg); }
        100% { opacity: 0;  transform: translate3d(-12px,108vh,0) rotate(430deg); }
    }

    /* ---------- Pasangan chibi pengantin bergandengan tangan ---------- */
    .cv3-couple { position: relative; display: block; width: 112px; margin: 6px auto 0; animation: cv3CoupleBob 2.8s ease-in-out infinite; }
    .cv3-couple svg { display: block; width: 100%; height: auto; filter: drop-shadow(0 4px 8px rgba(0,0,0,.35)); }
    .cv3-couple-heart { position: absolute; top: 2px; font-size: 12px; color: #fb7185; opacity: 0; animation: cv3HeartUp 2.6s ease-out infinite; }
    .cv3-couple-heart:nth-child(1) { left: 47%; }
    .cv3-couple-heart:nth-child(2) { left: 30%; animation-delay: .9s; }
    .cv3-couple-heart:nth-child(3) { right: 28%; animation-delay: 1.7s; color: #fda4af; }
    @keyframes cv3CoupleBob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
    @keyframes cv3HeartUp { 0% { opacity: 0; transform: translateY(8px) scale(.6); } 25% { opacity: 1; } 100% { opacity: 0; transform: translateY(-34px) scale(1.2) rotate(10deg); } }

    /* ---------- Boneka mengintip kini berdandan: beruang bertopi, kelinci berbunga + buket & kue ---------- */
    .gate-panel--left  .cover-peek::before { content: '\1F3A9'; position: absolute; top: -9px; left: 50%; font-size: .55em; transform: translateX(-50%) rotate(-10deg); }
    .gate-panel--right .cover-peek::before { content: '\1F338'; position: absolute; top: -6px; left: 50%; font-size: .5em;  transform: translateX(-50%) rotate(12deg); }
    .cv3-extra { position: absolute; bottom: -4px; z-index: 6; font-size: 28px; line-height: 1; pointer-events: none; transform-origin: 50% 100%; animation: cv3Wobble 3.2s ease-in-out infinite; filter: drop-shadow(0 3px 4px rgba(0,0,0,.3)); }
    @keyframes cv3Wobble { 0%,100% { transform: rotate(-6deg) scale(1); } 50% { transform: rotate(6deg) scale(1.08); } }

    /* ---------- Tombol: area sentuh nyaman + denyut lembut ---------- */
    #cover #open-invitation-btn { min-height: 48px; }
    #cover .cover-hint { max-width: 90vw; }

    /* ---------- RESPONSIF ---------- */
    #cover #cover-panel {
        padding-top: max(2.5rem, calc(env(safe-area-inset-top, 0px) + 1.25rem));
        padding-bottom: max(2rem, calc(env(safe-area-inset-bottom, 0px) + 1rem));
    }
    @media (max-width: 639px) {
        #cover .cover-name-text { font-size: clamp(2.3rem, 13vw, 3.6rem); }
        #cover .cover-cute { width: 38px; height: 38px; top: -30px; }
        .cv3-confetti i:nth-child(n+8) { display: none; }
    }
    @media (max-width: 380px) {
        #cover #open-invitation-btn { padding-left: 1.6rem; padding-right: 1.6rem; }
        .cv3-bell { font-size: 21px; }
    }
    @media (max-width: 340px) { .cv3-garland, .cv3-extra { display: none; } }
    @media (max-height: 740px) { .cv3-couple { display: none; } }
    @media (max-height: 700px) {
        #cover .cover-guest-card { margin-bottom: 1.1rem; }
        #cover .cover-gold-divider { margin: 8px 0; }
        #cover .cover-name-wrap { margin-top: 30px; }
        #cover .cover-rings-wrap { display: none; }
    }
    @media (max-height: 640px) { .cv3-garland span:nth-child(n+5) { display: none; } }
    /* HP posisi landscape: konten boleh digulir di dalam gerbang, hiasan berat disembunyikan */
    @media (max-height: 520px) {
        #cover #cover-panel { overflow-y: auto; justify-content: flex-start; gap: 1rem; }
        .cv3-couple, .cv3-garland, .cv3-bells, .cv3-dove, .cover-rings-wrap { display: none !important; }
    }

    /* ---------- V4: huruf nama melompat saat disentuh / di-hover ---------- */
    .cover-name-text .cute-letter:active { animation: cv3LetterPop .6s cubic-bezier(.34,1.56,.64,1) 1; }
    @media (hover: hover) { .cover-name-text .cute-letter:hover { animation: cv3LetterPop .6s cubic-bezier(.34,1.56,.64,1) 1; } }
    @keyframes cv3LetterPop {
        0%   { transform: translateY(0) scale(1) rotate(0deg); }
        40%  { transform: translateY(-.32em) scale(1.35) rotate(-8deg); color: #fda4af; }
        100% { transform: translateY(0) scale(1) rotate(0deg); }
    }

    /* ---------- V5: pangkas hiasan tambahan di HP kecil (gerbang tetap penuh animasi) ---------- */
    @media (max-width: 639px) { .cover-cloud { display: none; } }
    html.is-weak .particle { animation-duration: 20s !important; }
</style>

<div
    id="cover"
    class="fixed inset-0 z-50 text-white overflow-hidden"
>
    {{-- ===== DAUN PINTU KIRI ===== --}}
    <div id="gate-left" class="gate-panel gate-panel--left" aria-hidden="true">
        <div class="aurora-bg"></div>
        <div class="cover-shift"></div>
        <div class="cover-vignette"></div>
        <div class="cover-frame-half"><span></span><span></span></div>
        <div class="gate-seam gate-seam--left"></div>

        <div class="cover-bunting" aria-hidden="true">
            <span class="cover-flag" style="left:8%;  top:15px; --c:#fda4af; --d:-.2s"></span>
            <span class="cover-flag" style="left:28%; top:21px; --c:#F3E1B5; --d:-1.1s"></span>
            <span class="cover-flag" style="left:50%; top:23px; --c:#ffffff; --d:-.6s"></span>
            <span class="cover-flag" style="left:72%; top:21px; --c:#fda4af; --d:-1.9s"></span>
            <span class="cover-flag" style="left:92%; top:15px; --c:#F3E1B5; --d:-.9s"></span>
        </div>
        <span class="cover-cloud" style="top:14%; left:6%;" aria-hidden="true">&#9729;&#65039;</span>
        <span class="cover-peek" style="left:20%;" aria-hidden="true">&#129528;</span>
        <span class="cv3-extra" style="left:4%;" aria-hidden="true">&#128144;</span>

        <svg class="absolute top-8 left-1/2 -translate-x-1/2 w-24 h-24 text-rose-400/30" viewBox="0 0 100 100" fill="none" stroke="currentColor" stroke-width="1">
            <path d="M50 90 C 50 60, 30 55, 20 30 M50 75 C 50 55, 40 50, 35 40"/>
        </svg>

        <div class="absolute inset-0 overflow-hidden pointer-events-none">
            @for ($i = 0; $i < 9; $i++)
                @php
                    $isHeart = $i % 4 === 0;
                    $variant = $i % 3 === 0 ? 'gold' : ($i % 3 === 1 ? 'rose' : 'white');
                    $left = rand(4, 92);
                    $delay = rand(0, 60) / 10;
                    $duration = rand(90, 150) / 10;
                    $size = $isHeart ? rand(12, 20) : rand(3, 6);
                @endphp
                @if ($isHeart)
                    <span class="particle particle--heart particle--{{ $variant }}{{ $i > 4 ? ' hidden sm:block' : '' }}"
                          style="left:{{ $left }}%; animation-delay:{{ $delay }}s; animation-duration:{{ $duration }}s; font-size:{{ $size }}px;">&#10084;</span>
                @else
                    <span class="particle particle--dot particle--{{ $variant }}{{ $i > 4 ? ' hidden sm:block' : '' }}"
                          style="left:{{ $left }}%; animation-delay:{{ $delay }}s; animation-duration:{{ $duration }}s; width:{{ $size }}px; height:{{ $size }}px;"></span>
                @endif
            @endfor
        </div>

        <span class="cute-butterfly" style="top:22%; left:18%; animation-delay:.4s;" aria-hidden="true">&#129419;</span>
    </div>

    {{-- ===== DAUN PINTU KANAN ===== --}}
    <div id="gate-right" class="gate-panel gate-panel--right" aria-hidden="true">
        <div class="aurora-bg" style="animation-delay:-4s;"></div>
        <div class="cover-shift" style="animation-delay:-3s;"></div>
        <div class="cover-vignette"></div>
        <div class="cover-frame-half"><span></span><span></span></div>
        <div class="gate-seam gate-seam--right"></div>

        <div class="cover-bunting" aria-hidden="true">
            <span class="cover-flag" style="left:8%;  top:15px; --c:#F3E1B5; --d:-1.4s"></span>
            <span class="cover-flag" style="left:28%; top:21px; --c:#fda4af; --d:-.3s"></span>
            <span class="cover-flag" style="left:50%; top:23px; --c:#ffffff; --d:-1.7s"></span>
            <span class="cover-flag" style="left:72%; top:21px; --c:#F3E1B5; --d:-.8s"></span>
            <span class="cover-flag" style="left:92%; top:15px; --c:#fda4af; --d:-2.2s"></span>
        </div>
        <span class="cover-cloud" style="top:24%; right:8%; animation-delay:-6s;" aria-hidden="true">&#9729;&#65039;</span>
        <span class="cover-peek" style="right:20%; animation-delay:-1.4s;" aria-hidden="true">&#128048;</span>
        <span class="cv3-extra" style="right:4%; animation-delay:-1.6s;" aria-hidden="true">&#127874;</span>

        <svg class="absolute top-8 left-1/2 -translate-x-1/2 w-24 h-24 text-rose-400/30" viewBox="0 0 100 100" fill="none" stroke="currentColor" stroke-width="1">
            <path d="M50 90 C 50 60, 70 55, 80 30 M50 75 C 50 55, 60 50, 65 40"/>
        </svg>

        <div class="absolute inset-0 overflow-hidden pointer-events-none">
            @for ($i = 0; $i < 9; $i++)
                @php
                    $isHeart = $i % 4 === 1;
                    $variant = $i % 3 === 0 ? 'rose' : ($i % 3 === 1 ? 'gold' : 'white');
                    $left = rand(4, 92);
                    $delay = rand(0, 60) / 10;
                    $duration = rand(90, 150) / 10;
                    $size = $isHeart ? rand(12, 20) : rand(3, 6);
                @endphp
                @if ($isHeart)
                    <span class="particle particle--heart particle--{{ $variant }}{{ $i > 4 ? ' hidden sm:block' : '' }}"
                          style="left:{{ $left }}%; animation-delay:{{ $delay }}s; animation-duration:{{ $duration }}s; font-size:{{ $size }}px;">&#10084;</span>
                @else
                    <span class="particle particle--dot particle--{{ $variant }}{{ $i > 4 ? ' hidden sm:block' : '' }}"
                          style="left:{{ $left }}%; animation-delay:{{ $delay }}s; animation-duration:{{ $duration }}s; width:{{ $size }}px; height:{{ $size }}px;"></span>
                @endif
            @endfor
        </div>

        <span class="cute-butterfly" style="top:30%; right:16%; animation-delay:1.4s;" aria-hidden="true">&#129419;</span>
    </div>

    {{-- ===== Efek di celah tengah gerbang ===== --}}
    <div class="cursor-glow" id="cursor-glow" aria-hidden="true"></div>
    <div class="gate-seam-glow" aria-hidden="true"></div>
    <div class="gate-hinge" style="left:calc(50% - 3px); top:18%;" aria-hidden="true"></div>
    <div class="gate-hinge" style="left:calc(50% - 3px); bottom:18%; animation-delay:1.3s;" aria-hidden="true"></div>
    <div class="portal-ring" aria-hidden="true"></div>
    <span class="lovebird-fly lovebird-fly--left" aria-hidden="true">&#128038;</span>
    <span class="lovebird-fly lovebird-fly--right" aria-hidden="true">&#128038;</span>
    <span class="gate-lock" aria-hidden="true">&#128152;</span>

    {{-- ===== KONTEN (tidak ikut terbelah, cukup memudar naik lalu tombolnya hilang) ===== --}}
    <div id="cover-panel" class="cover-inner-fade absolute inset-0 z-20 flex flex-col items-center justify-between px-6 py-12 sm:py-16" style="transform-style: preserve-3d;">
        <canvas id="cover-particles" class="hidden" aria-hidden="true"></canvas>

        {{-- ===== Dekorasi pernikahan (murni hiasan, ikut memudar bersama konten) ===== --}}
        <div class="cv3-confetti" aria-hidden="true">
            <i style="--x:6%;  --d:0s;   --t:9s;  --c:#fda4af"></i>
            <i style="--x:17%; --d:2.2s; --t:11s; --c:#F3E1B5"></i>
            <i style="--x:27%; --d:4.1s; --t:8.5s; --c:#ffffff"></i>
            <i style="--x:38%; --d:1.1s; --t:10s; --c:#fb7185"></i>
            <i style="--x:49%; --d:5.6s; --t:9.5s; --c:#F3E1B5"></i>
            <i style="--x:58%; --d:3.3s; --t:12s; --c:#fda4af"></i>
            <i style="--x:69%; --d:.6s;  --t:10.5s; --c:#ffffff"></i>
            <i style="--x:78%; --d:4.8s; --t:9s;  --c:#fb7185"></i>
            <i style="--x:86%; --d:2.9s; --t:11.5s; --c:#F3E1B5"></i>
            <i style="--x:93%; --d:6.4s; --t:8.8s; --c:#fda4af"></i>
        </div>
        <div class="cv3-bells" aria-hidden="true"><span class="cv3-bell">&#128276;</span><span class="cv3-bow">&#127872;</span><span class="cv3-bell cv3-bell--r">&#128276;</span></div>
        <span class="cv3-dove" style="top:15%;" aria-hidden="true">&#128330;&#65039;</span>
        <span class="cv3-dove cv3-dove--b" style="top:27%;" aria-hidden="true">&#128330;&#65039;</span>
        <div class="cv3-garland cv3-garland--l" aria-hidden="true"><span style="--i:0">&#127800;</span><span style="--i:1">&#127799;</span><span style="--i:2">&#127801;</span><span style="--i:3">&#127804;</span><span style="--i:4">&#127800;</span><span style="--i:5">&#127799;</span></div>
        <div class="cv3-garland cv3-garland--r" aria-hidden="true"><span style="--i:2">&#127799;</span><span style="--i:3">&#127800;</span><span style="--i:4">&#127804;</span><span style="--i:5">&#127801;</span><span style="--i:6">&#127799;</span><span style="--i:7">&#127800;</span></div>

        <div class="flex-1"></div>

        <div class="relative z-10 text-center">
            <p class="cover-fade-up font-display italic text-lg sm:text-xl text-rose-300 mb-3" style="animation-delay:.1s">
                <span class="heartbeat" aria-hidden="true">&#10084;</span>
                &nbsp;Kepada Bapak/Ibu/Saudara/i
            </p>

            <div class="cover-fade-up cover-guest-card mb-8" style="animation-delay:.3s">
                <p id="cover-guest-name" class="font-sans text-sm sm:text-base text-white/85 tracking-wide">
                    {{ $guestName ?? 'Tamu Undangan' }}
                </p>
            </div>

            <div class="cover-fade-up cover-gold-divider" style="animation-delay:.45s" aria-hidden="true">
                <span class="heartbeat">&#10084;</span>
            </div>

            <p class="cover-fade-up font-display text-sm sm:text-base text-white/70 mb-6" style="animation-delay:.5s">The Wedding of</p>

            <div class="cover-name-wrap cover-fade-up mb-3" style="animation-delay:.7s">
                <div class="cover-cute" aria-hidden="true">
                    <svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
                        <path d="M50 90 C 15 68, 8 38, 30 22 C42 14, 50 24, 50 34 C50 24, 58 14, 70 22 C92 38, 85 68, 50 90 Z" fill="#ffd9e0"/>
                        <path d="M18 44 Q6 40 8 28" stroke="#ffd9e0" stroke-width="7" fill="none" stroke-linecap="round"/>
                        <path d="M82 44 Q94 40 92 28" stroke="#ffd9e0" stroke-width="7" fill="none" stroke-linecap="round"/>
                        <ellipse cx="35" cy="54" rx="5" ry="3.4" fill="#fb7185" opacity=".55"/>
                        <ellipse cx="65" cy="54" rx="5" ry="3.4" fill="#fb7185" opacity=".55"/>
                        <path d="M29 46 q5 6 10 0" stroke="#7a2e3a" stroke-width="2.6" fill="none" stroke-linecap="round"/>
                        <path d="M61 46 q5 6 10 0" stroke="#7a2e3a" stroke-width="2.6" fill="none" stroke-linecap="round"/>
                        <path d="M46 56 q4 4.5 8 0" stroke="#7a2e3a" stroke-width="2.2" fill="none" stroke-linecap="round"/>
                        <path d="M50 24 C 41 10, 29 15, 37 25 C 41 29, 47 26, 50 24 Z" fill="#fb7185"/>
                        <path d="M50 24 C 59 10, 71 15, 63 25 C 59 29, 53 26, 50 24 Z" fill="#fb7185"/>
                        <circle cx="50" cy="24.5" r="3.4" fill="#f43f5e"/>
                    </svg>
                    <span class="spark" style="top:-2px; right:0; animation-delay:.6s"></span>
                    <span class="spark" style="bottom:2px; left:-4px; animation-delay:1.4s"></span>
                </div>

                <h1 class="cover-name-text font-display text-display-xl leading-none" aria-label="{{ $wedding->groom_nickname }} &amp; {{ $wedding->bride_nickname }}">
                    <span class="cute-word" aria-hidden="true">@foreach (mb_str_split((string) $wedding->groom_nickname) as $k => $ch)<span class="cute-letter" style="--i:{{ $k }}">{!! $ch === ' ' ? '&nbsp;' : e($ch) !!}</span>@endforeach</span>
                    <span class="italic px-1 cute-amp" style="color:#fda4af;" aria-hidden="true">&amp;</span>
                    <span class="cute-word" aria-hidden="true">@foreach (mb_str_split((string) $wedding->bride_nickname) as $k => $ch)<span class="cute-letter" style="--i:{{ $k }}">{!! $ch === ' ' ? '&nbsp;' : e($ch) !!}</span>@endforeach</span>
                </h1>
            </div>

            <p class="cover-fade-up font-sans text-sm sm:text-base text-white/70 tracking-wide mt-4" style="animation-delay:.9s">
                {{ $wedding->reception_datetime->translatedFormat('d F Y') }}
            </p>

            <div class="cover-fade-up cover-rings-wrap" style="animation-delay:1.05s" aria-hidden="true">
                <svg class="cover-rings" width="46" height="24" viewBox="0 0 64 34" xmlns="http://www.w3.org/2000/svg">
                    <circle cx="24" cy="17" r="12" fill="none" stroke="#D9B36C" stroke-width="2.4"/>
                    <circle cx="40" cy="17" r="12" fill="none" stroke="#F3E1B5" stroke-width="2.4"/>
                </svg>
                <span class="spark" style="top:-4px; left:16px; animation-delay:.3s"></span>
                <span class="spark" style="top:14px; left:40px; animation-delay:1.1s"></span>
            </div>

            <div class="cv3-couple" aria-hidden="true">
                <span class="cv3-couple-heart">&#10084;</span><span class="cv3-couple-heart">&#10084;</span><span class="cv3-couple-heart">&#10084;</span>
                <svg viewBox="0 0 120 96" xmlns="http://www.w3.org/2000/svg">
                    <path d="M60 25 C 46 15, 52 5, 60 12 C 68 5, 74 15, 60 25 Z" fill="#fb7185"/>
                    <rect x="29" y="78" width="8" height="12" rx="3.5" fill="#2b2b3a"/>
                    <rect x="40" y="78" width="8" height="12" rx="3.5" fill="#2b2b3a"/>
                    <path d="M23 80 Q23 52 38 50 Q53 52 53 80 Z" fill="#3a3a52"/>
                    <path d="M32 51 L38 66 L44 51 Z" fill="#fff"/>
                    <path d="M32 53 L38 56.5 L32 60 Z M44 53 L38 56.5 L44 60 Z" fill="#fb7185"/>
                    <circle cx="38" cy="56.5" r="2" fill="#f43f5e"/>
                    <circle cx="38" cy="35" r="15.5" fill="#ffe2cf"/>
                    <path d="M22 33 Q22 17 38 17.5 Q54 17 54 33 Q47 24.5 38 25.5 Q29 24.5 22 33 Z" fill="#3a2a2f"/>
                    <circle cx="32" cy="37" r="1.9" fill="#3a2a2f"/><circle cx="44" cy="37" r="1.9" fill="#3a2a2f"/>
                    <ellipse cx="27.5" cy="42" rx="3.2" ry="2" fill="#fb7185" opacity=".55"/>
                    <ellipse cx="48.5" cy="42" rx="3.2" ry="2" fill="#fb7185" opacity=".55"/>
                    <path d="M35 42 q3 3.2 6 0" stroke="#7a2e3a" stroke-width="1.7" fill="none" stroke-linecap="round"/>
                    <path d="M62 30 Q60 70 68 86 L96 86 Q104 70 102 30 Q82 6 62 30 Z" fill="#ffffff" opacity=".35"/>
                    <path d="M70 54 Q82 47 94 54 L106 88 Q82 96 58 88 Z" fill="#fff" stroke="#fecdd3" stroke-width="1.4"/>
                    <path d="M71.5 57 Q82 62 92.5 57" stroke="#fb7185" stroke-width="2.4" fill="none" stroke-linecap="round"/>
                    <circle cx="82" cy="35" r="15.5" fill="#ffe2cf"/>
                    <path d="M66 35 Q64 17 82 17.5 Q100 17 98 35 Q92 26 82 27 Q72 26 66 35 Z" fill="#5a2f2f"/>
                    <circle cx="74" cy="20" r="3.2" fill="#fda4af"/><circle cx="82" cy="16.5" r="3.6" fill="#fff"/><circle cx="90" cy="20" r="3.2" fill="#fda4af"/>
                    <circle cx="76" cy="37" r="1.9" fill="#3a2a2f"/><circle cx="88" cy="37" r="1.9" fill="#3a2a2f"/>
                    <ellipse cx="71.5" cy="42" rx="3.2" ry="2" fill="#fb7185" opacity=".55"/>
                    <ellipse cx="92.5" cy="42" rx="3.2" ry="2" fill="#fb7185" opacity=".55"/>
                    <path d="M79 42 q3 3.2 6 0" stroke="#7a2e3a" stroke-width="1.7" fill="none" stroke-linecap="round"/>
                    <path d="M52 66 Q60 70 68 66" stroke="#ffe2cf" stroke-width="4.5" fill="none" stroke-linecap="round"/>
                    <circle cx="64" cy="73" r="5" fill="#fb7185"/><circle cx="59" cy="76" r="4" fill="#fda4af"/><circle cx="68.5" cy="77" r="3.6" fill="#fecdd3"/>
                    <path d="M60 80 Q64 84 68 80" stroke="#86efac" stroke-width="2" fill="none" stroke-linecap="round"/>
                </svg>
            </div>
        </div>

        <div class="relative z-10 flex-1 flex flex-col items-center justify-end pb-4">
            <div class="cover-btn-glow">
                <button
                    id="open-invitation-btn"
                    type="button"
                    class="group relative inline-flex items-center gap-3 px-8 py-3 rounded-full overflow-hidden
                           border border-rose-300/60 text-white font-sans text-sm tracking-wide
                           bg-white/5 backdrop-blur-sm
                           hover:bg-white hover:text-red-950 hover:border-white hover:shadow-[0_0_32px_rgba(255,255,255,0.4)]
                           transition-all duration-500"
                >
                    <span class="cover-btn-shine" aria-hidden="true"><span></span></span>
                    <svg class="w-4 h-4 relative z-10" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6">
                        <path d="M3 8l9 6 9-6M4 6h16a1 1 0 011 1v10a1 1 0 01-1 1H4a1 1 0 01-1-1V7a1 1 0 011-1z"/>
                    </svg>
                    <span class="relative z-10">Buka Undangan</span>
                </button>
            </div>
            <p class="cover-hint mt-4 text-center font-sans text-[11px] tracking-widest text-rose-200/70">
                &#10024; Sentuh untuk membuka gerbang cinta kami &#10024;
            </p>
        </div>
    </div>
</div>

<script>
    // Cahaya lembut yang mengikuti kursor
    (function () {
        try {
            var gate = document.getElementById("cover");
            var glow = document.getElementById('cursor-glow');
            if (!gate || !glow) return;
            var raf = null;
            function setGlow(x, y) {
                var rect = gate.getBoundingClientRect();
                var mx = (((x - rect.left) / rect.width) * 100).toFixed(2) + '%';
                var my = (((y - rect.top) / rect.height) * 100).toFixed(2) + '%';
                glow.style.setProperty('--mx', mx);
                glow.style.setProperty('--my', my);
            }
            gate.addEventListener('mousemove', function (e) {
                if (raf) cancelAnimationFrame(raf);
                raf = requestAnimationFrame(function () { setGlow(e.clientX, e.clientY); });
            });
            gate.addEventListener('touchmove', function (e) {
                if (!e.touches || !e.touches[0]) return;
                setGlow(e.touches[0].clientX, e.touches[0].clientY);
            }, { passive: true });
        } catch (err) { /* diam saja kalau gagal, tidak mengganggu tampilan lain */ }
    })();

    // Letupan hati kecil dari tombol saat diklik
    function spawnHeartBurst(target) {
        try {
            var rect = target.getBoundingClientRect();
            var ox = rect.left + rect.width / 2;
            var oy = rect.top + rect.height / 2;
            var total = window.innerWidth < 480 ? 8 : 12;
            var faces = ['\u2764', '\u2728', '\uD83C\uDF38', '\uD83D\uDC96', '\uD83D\uDC8D', '\uD83D\uDD4A\uFE0F', '\uD83C\uDF8A', '\uD83E\uDD42'];
            for (var i = 0; i < total; i++) {
                (function () {
                    var h = document.createElement('span');
                    h.textContent = faces[Math.floor(Math.random() * faces.length)];
                    h.style.position = 'fixed';
                    h.style.left = ox + 'px';
                    h.style.top = oy + 'px';
                    h.style.fontSize = (10 + Math.random() * 11) + 'px';
                    h.style.color = Math.random() < .5 ? '#fda4af' : '#F3E1B5';
                    h.style.textShadow = '0 0 8px rgba(255,255,255,.5)';
                    h.style.pointerEvents = 'none';
                    h.style.zIndex = '9999';
                    h.style.opacity = '1';
                    h.style.transform = 'translate(-50%, -50%) scale(.6)';
                    h.style.transition = 'transform 1000ms cubic-bezier(.16,.8,.3,1), opacity 1000ms ease-out';
                    document.body.appendChild(h);
                    var dx = (Math.random() * 2 - 1) * 70;
                    var dy = -(70 + Math.random() * 110);
                    var rot = (Math.random() * 50 - 25);
                    requestAnimationFrame(function () {
                        h.style.transform = 'translate(calc(-50% + ' + dx + 'px), calc(-50% + ' + dy + 'px)) scale(1.3) rotate(' + rot + 'deg)';
                        h.style.opacity = '0';
                    });
                    setTimeout(function () { h.remove(); }, 1050);
                })();
            }
        } catch (err) { /* diam saja kalau gagal */ }
    }

    // Buka gerbang saat tombol ditekan.
    // PENTING: fungsi unlockScroll() di bawah melepas SEMUA jenis kunci scroll
    // (style inline, class overflow-hidden, class penanda 'is-open', touch-action)
    // dan dipanggil pasti, apa pun yang terjadi pada animasi.
    function unlockScroll() {
        try {
            var html = document.documentElement, body = document.body;
            html.classList.add('is-open');
            html.classList.remove('overflow-hidden', 'no-scroll', 'scroll-lock', 'modal-open', 'is-locked');
            body.classList.remove('overflow-hidden', 'no-scroll', 'scroll-lock', 'modal-open', 'is-locked');
            html.style.overflow = '';
            body.style.overflow = '';
            body.style.position = '';
            body.style.height = '';
            body.style.touchAction = '';
            html.style.touchAction = '';
            html.style.height = '';
            if (window.ScrollTrigger && window.ScrollTrigger.refresh) window.ScrollTrigger.refresh();
        } catch (err) { /* diam saja */ }
    }
    window.__unlockInvitationScroll = unlockScroll;

    (function () {
        try {
            var btn  = document.getElementById('open-invitation-btn');
            var gate = document.getElementById("cover");
            if (!btn || !gate) return;
            var opened = false;

            function playMusic() {
                try {
                    var a = document.getElementById('bg-audio');
                    var pl = document.getElementById('music-player');
                    if (pl) pl.classList.remove('opacity-0', 'pointer-events-none');
                    if (a && a.paused) a.play().catch(function () {});
                } catch (err) {}
            }

            // Capture + stopImmediatePropagation: handler GSAP lama di transitions.js
            // tidak ikut jalan, jadi tidak ada dua animasi yang saling bentrok.
            btn.addEventListener('click', function (e) {
                e.stopImmediatePropagation();
                if (opened) return; // cegah klik ganda
                opened = true;
                btn.disabled = true;
                playMusic();
                spawnHeartBurst(btn);
                gate.classList.add('cover-closing');

                setTimeout(function () { gate.classList.add('gate-open'); }, 480);

                setTimeout(function () {
                    gate.classList.add('gate-hidden');
                    gate.style.display = 'none';   // benar-benar keluar dari layout
                    unlockScroll();
                }, 480 + 1400);

                // Buka kunci scroll lebih awal juga, supaya tidak menunggu animasi selesai.
                setTimeout(unlockScroll, 480 + 300);
            }, true);
        } catch (err) { /* diam saja kalau gagal */ }
    })();

    // Jaring pengaman: setelah gerbang terbuka, kalau halaman masih terkunci
    // (mis. CSS lain memakai overflow:hidden), cek berkala dan paksa lepas.
    (function () {
        try {
            var tries = 0;
            var iv = setInterval(function () {
                var gate = document.getElementById('cover');
                var done = !gate || gate.classList.contains('gate-hidden');
                if (done) {
                    if (typeof window.__unlockInvitationScroll === 'function') window.__unlockInvitationScroll();
                    if (++tries > 6) clearInterval(iv);
                }
            }, 500);
        } catch (err) { /* diam saja kalau gagal */ }
    })();
</script>