html { scroll-behavior: smooth; }
    ::-webkit-scrollbar { width: 6px; height: 6px; }
    ::-webkit-scrollbar-thumb { background: rgba(212, 175, 55, 0.45); border-radius: 99px; }

    /* ==========================================================================
       NATURAL CHROME — studio drawer & modals mengikuti bahasa visual
       hangat Punakawan (cream #F7EEDF, rose #7A4E28, kartu putih lembut)
       ========================================================================== */
    ::-webkit-scrollbar-thumb { background: rgba(163, 99, 97, 0.4); }

    /* ---- Drawer studio ---- */
    #studioDrawer { color: #3B342C; }
    #studioDrawer .bg-stone-950, #studioDrawer .bg-stone-950\/98 { background: #FBF7F0 !important; }
    #studioDrawer .bg-stone-900, #studioDrawer .bg-stone-900\/98 { background: #FFFFFF !important; }
    #studioDrawer .bg-stone-800 { background: #F6EEE2 !important; }
    #studioDrawer .border-stone-800, #studioDrawer .border-stone-700 { border-color: #E7DAC8 !important; }
    #studioDrawer .text-white, #studioDrawer .text-stone-100, #studioDrawer .text-stone-200 { color: #3B342C !important; }
    #studioDrawer .text-stone-300, #studioDrawer .text-stone-400 { color: #97867B !important; }
    #studioDrawer .text-amber-400, #studioDrawer .text-amber-300 { color: #7A4E28 !important; }
    #studioDrawer .text-sky-300, #studioDrawer .text-sky-200, #studioDrawer .text-sky-400 { color: #7C9BB8 !important; }
    #studioDrawer .text-emerald-400, #studioDrawer .text-emerald-300 { color: #3E8E5E !important; }
    #studioDrawer input, #studioDrawer textarea, #studioDrawer select { background-color: #FFFFFF !important; border-color: #E7DAC8 !important; color: #3B342C !important; }
    #studioDrawer input::placeholder, #studioDrawer textarea::placeholder { color: #C0B0A4 !important; }
    #studioDrawer input[type="radio"], #studioDrawer input[type="range"], #studioDrawer input[type="color"] { accent-color: #7A4E28; }
    #studioDrawer .accent-amber-400 { accent-color: #7A4E28 !important; }
    #studioDrawer .border-amber-500\/30 { border-color: #E2D3BE !important; }
    #studioDrawer .bg-amber-500\/10, #studioDrawer .border-amber-500\/25 { background: #F6EEE2 !important; border-color: #E2D3BE !important; }
    #studioDrawer .text-yellow-200, #studioDrawer .text-sky-200, #studioDrawer .text-rose-200, #studioDrawer .text-indigo-200,
    #studioDrawer .bg-yellow-500\/20, #studioDrawer .bg-sky-500\/20, #studioDrawer .bg-rose-500\/20, #studioDrawer .bg-indigo-500\/20,
    #studioDrawer .border-yellow-500\/50, #studioDrawer .border-sky-500\/50, #studioDrawer .border-rose-500\/50, #studioDrawer .border-indigo-500\/50 { background: #F6EEE2 !important; border-color: #E2D3BE !important; color: #7A4E28 !important; }
    #studioDrawer .hover\:bg-amber-400:hover { background: #F7EEDF !important; color: #7A4E28 !important; }
    #studioDrawer .hover\:bg-amber-400:hover svg, #studioDrawer .hover\:bg-amber-400:hover i { color: #7A4E28 !important; }
    #studioDrawer .border-amber-400 { border-color: #7A4E28 !important; }
    #studioDrawer .hover\:border-amber-400:hover { border-color: #7A4E28 !important; }
    #studioDrawer .text-amber-300:hover, #studioDrawer .hover\:text-white:hover { color: #7A4E28 !important; }
    #studioDrawer .bg-stone-800.hover\:bg-stone-700:hover { background: #F6EEE2 !important; }
    #studioDrawer .text-amber-300 { color: #7A4E28 !important; }
    #studioDrawer .bg-emerald-500\/10, #studioDrawer .border-emerald-500\/25 { background: #F0F8F2 !important; border-color: #CFE8D6 !important; }
    #studioDrawer .text-emerald-300 { color: #3E8E5E !important; }
    #studioDrawer .bg-sky-500\/10, #studioDrawer .border-sky-500\/30 { background: #F2F6FA !important; border-color: #D5E2EE !important; }

    /* ---- Modals (katalog & galeri layout): panel putih hangat ---- */
    #catalogModal, #layoutGalleryModal { background: rgba(62, 38, 34, 0.55) !important; backdrop-filter: blur(10px); }
    #catalogModal > div, #layoutGalleryModal > div { background: #FFFFFF !important; border-color: #E7DAC8 !important; color: #3B342C; }
    #catalogModal .bg-stone-900, #layoutGalleryModal .bg-stone-900 { background: #FFFFFF !important; }
    #catalogModal .border-stone-800, #layoutGalleryModal .border-stone-800, #catalogModal .border-stone-700, #layoutGalleryModal .border-stone-700 { border-color: #E7DAC8 !important; }
    #catalogModal .text-white, #layoutGalleryModal .text-white { color: #3B342C !important; }
    #catalogModal .text-stone-400, #layoutGalleryModal .text-stone-400, #catalogModal .text-stone-500 { color: #97867B !important; }
    #catalogModal .text-stone-300, #layoutGalleryModal .text-stone-300 { color: #5F544A !important; }
    #catalogModal .bg-stone-950, #layoutGalleryModal .bg-stone-950 { background: #FBF7F0 !important; }
    #catalogModal .bg-stone-800, #layoutGalleryModal .bg-stone-800 { background: #F6EEE2 !important; }
    #catalogModal .text-stone-400:hover, #catalogModal .hover\:text-white:hover { color: #7A4E28 !important; }
    #catalogModal .border-amber-400, #catalogModal .ring-amber-400\/40 { border-color: #7A4E28 !important; }
    #catalogModal .hover\:border-rose-500:hover, #layoutGalleryModal .hover\:border-amber-400:hover { border-color: #7A4E28 !important; }
    #catalogModal .text-sky-300, #catalogModal .text-sky-300.font-semibold { color: #7C9BB8 !important; }
    #catalogModal .text-stone-300.group-hover\:text-amber-300:hover { color: #7A4E28 !important; }
    #catalogModal .group-hover\:text-amber-300:hover, #catalogModal .group-hover\:text-amber-300 { color: #7A4E28 !important; }
    #catalogModal .bg-stone-900.group-hover\:text-amber-300:hover, #catalogModal .bg-stone-900 span { background: #FBF7F0; color: #5F544A; }
    #catalogModal .text-amber-300, #catalogModal .text-amber-200 { color: #7A4E28 !important; }
    #catalogModal .text-indigo-300 { color: #6B7FB8 !important; }
    #catalogModal .text-emerald-300 { color: #3E8E5E !important; }
    #catalogModal .text-sky-300 { color: #6E93B8 !important; }
    #catalogModal .text-rose-400 { color: #7A4E28 !important; }
    #catalogModal .bg-rose-700, #catalogModal .bg-rose-700:hover { background: #7A4E28 !important; }
    #catalogModal .bg-amber-500 { background: #F7EEDF !important; color: #7A4E28 !important; border-color: #7A4E28 !important; }
    #catalogModal .bg-amber-400 { background: #7A4E28 !important; color: #FFFFFF !important; }
    #layoutGalleryModal .bg-amber-400 { background: #7A4E28 !important; color: #FFFFFF !important; }
    #layoutGalleryModal .border-amber-400, #layoutGalleryModal .ring-amber-400\/40 { border-color: #7A4E28 !important; }
    #layoutGalleryModal .text-amber-400 { color: #7A4E28 !important; }
    #layoutGalleryModal .text-stone-500 { color: #97867B !important; }
    #layoutGalleryModal .text-sky-300 { color: #7C9BB8 !important; }
    #layoutGalleryModal .bg-stone-800.hover\:bg-stone-700:hover { background: #F6EEE2 !important; }
    #layoutGalleryModal .text-stone-400.hover\:text-white:hover { color: #7A4E28 !important; }
    #studioDrawer .bg-amber-500, #studioDrawer .bg-amber-500:hover { background: #7A4E28 !important; color: #FFFFFF !important; }
    #studioDrawer .hover\:bg-amber-400:hover { background: #F7EEDF !important; color: #7A4E28 !important; }

    /* toast natural */
    #aiToastBanner { background: #F7EEDF !important; color: #7A4E28 !important; border: 1px solid #E2D3BE !important; box-shadow: 0 6px 18px rgba(163, 99, 97, 0.25) !important; }
    #aiToastBanner span:first-child { color: #7A4E28 !important; }
    .reveal-item {
      opacity: 0;
      transform: translateY(18px);
      transition: opacity 0.95s cubic-bezier(0.16, 1, 0.3, 1), transform 0.95s cubic-bezier(0.16, 1, 0.3, 1);
      will-change: transform, opacity;
    }
    .reveal-item.active {
      opacity: 1;
      transform: translateY(0);
    }
    .delay-1 { transition-delay: 140ms; }
    .delay-2 { transition-delay: 260ms; }
    .delay-3 { transition-delay: 380ms; }

    /* Animasi halus — hanya untuk satu elemen fokus per halaman, sisanya statis */
    @keyframes gentleSway {
      0%, 100% { transform: rotate(0deg); }
      50% { transform: rotate(1.6deg); }
    }
    @keyframes gentleFloat {
      0%, 100% { transform: translateY(0px); }
      50% { transform: translateY(-4px); }
    }
    @keyframes spinDisc {
      from { transform: rotate(0deg); }
      to { transform: rotate(360deg); }
    }

    .anim-sway { animation: none; }
    .anim-float { animation: none; }
    .spin-disc { animation: spinDisc 12s linear infinite; }
    .spin-paused { animation-play-state: paused; }


    /* Header ringkas di layar kecil — aksi utama tetap terjangkau */
    @media (max-width: 640px) {
      /* hanya 6 tombol layout cepat yang disembunyikan (tersedia di Galeri Layout) */
      #layoutQuickBar [id^="ly-"] { display: none !important; }
      #themeSelectDropdown { max-width: 132px !important; font-size: 10px !important; }
      header button[onclick="reopenCover()"] { display: none !important; }
      #studioBar { flex-wrap: wrap; row-gap: 6px; }
      #studioDrawer { width: 100% !important; }
    }

    /* Modal: mulai selalu dari atas, jangan dipulihkan ke posisi lama */
    #catalogModal, #themeGalleryModal, #layoutGalleryModal { overflow-anchor: none; }

    /* ==== SIGNATURE NIKAHCRAFT: garis sogan + cecek ==== */
    .nc-rule { display:flex; align-items:center; gap:6px; }
    .nc-rule::before, .nc-rule::after { content:''; height:1px; flex:1; background:linear-gradient(90deg, transparent, #C9B79A); }
    .nc-rule::after { background:linear-gradient(90deg, #C9B79A, transparent); }
    .nc-cecek { display:inline-flex; gap:4px; align-items:center; }
    .nc-cecek i { width:4px; height:4px; border-radius:50%; background:#7A4E28; display:block; }
    .nc-cecek i:nth-child(2) { background:#5F6F52; }
    .nc-cecek i:nth-child(3) { background:#B3674A; }

    /* ==== MOTION HALUS (SKU premium): hanya gerak yang menjelaskan, bukan hiasan ==== */
    @keyframes ncDrift {
      from { transform: scale(1.02) translate3d(0, 0, 0); }
      to   { transform: scale(1.06) translate3d(0, -10px, 0); }
    }
    body.nc-motion .nc-motion-bg { animation: ncDrift 30s ease-in-out infinite alternate; }
    body.nc-motion .anim-float { animation: gentleFloat 12s ease-in-out infinite; }
    body.nc-motion .reveal-item { transition-duration: 0.95s; }
    body.nc-motion .reveal-item.delay-1 { transition-delay: 120ms; }
    @media (prefers-reduced-motion: reduce) {
      body.nc-motion .nc-motion-bg,
      body.nc-motion .anim-float { animation: none !important; }
    }
    /* Ornamen watercolor: bayangan lembut seperti tinta di kertas, bukan glow */
    .orn-watercolor { filter: drop-shadow(0 2px 4px rgba(120, 96, 80, 0.10)); }

    /* ==========================================================================
       MOTIF TEKSTUR SATU TEMA (BATIK KAWUNG JAWA, BOTANICAL LINEN, SONGKET)
       ========================================================================== */
    /* Motif Batik Kawung & Parang Sogan Keraton Jawa Asli (Pure SVG Pattern) */
    .pattern-javanese-batik {
      background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' stroke='%23D4AF37' stroke-width='0.7' stroke-opacity='0.16'%3E%3Ccircle cx='30' cy='30' r='12'/%3E%3Cellipse cx='30' cy='15' rx='6' ry='12'/%3E%3Cellipse cx='30' cy='45' rx='6' ry='12'/%3E%3Cellipse cx='15' cy='30' rx='12' ry='6'/%3E%3Cellipse cx='45' cy='30' rx='12' ry='6'/%3E%3Ccircle cx='30' cy='30' r='3' fill='%23D4AF37' fill-opacity='0.15'/%3E%3C/g%3E%3C/svg%3E") !important;
      background-repeat: repeat !important;
      background-size: 60px 60px !important;
    }
    /* Motif Linen Botanical Halus */
    .pattern-botanical-linen {
      background-image: radial-gradient(rgba(122, 145, 110, 0.16) 1.5px, transparent 1.5px) !important;
      background-repeat: repeat !important;
      background-size: 28px 28px !important;
    }
    /* Motif Songket Geometris Nusantara */
    .pattern-songket-gold {
      background-image: url("data:image/svg+xml,%3Csvg width='48' height='48' viewBox='0 0 48 48' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M24 4 L44 24 L24 44 L4 24 Z' fill='none' stroke='%23F59E0B' stroke-width='0.6' stroke-opacity='0.14'/%3E%3Ccircle cx='24' cy='24' r='4' fill='none' stroke='%23F59E0B' stroke-width='0.6' stroke-opacity='0.14'/%3E%3C/svg%3E") !important;
      background-repeat: repeat !important;
      background-size: 48px 48px !important;
    }
    /* Motif Arabesque / Bintang Geometris Timur Tengah (Arabian Luxury) */
    .pattern-arabian-moresque {
      background-image: url("data:image/svg+xml,%3Csvg width='64' height='64' viewBox='0 0 64 64' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' stroke='%23E5C158' stroke-width='0.75' stroke-opacity='0.2'%3E%3Cpolygon points='32,4 40,24 60,32 40,40 32,60 24,40 4,32 24,24'/%3E%3Cpolygon points='32,12 46,18 52,32 46,46 32,52 18,46 12,32 18,18'/%3E%3Ccircle cx='32' cy='32' r='6'/%3E%3C/g%3E%3C/svg%3E") !important;
      background-repeat: repeat !important;
      background-size: 64px 64px !important;
    }
    /* Motif Tenun Ulos & Gorga Batak (Merah-Hitam-Putih-Emas) */
    .pattern-batak-ulos {
      background-image: url("data:image/svg+xml,%3Csvg width='56' height='56' viewBox='0 0 56 56' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' stroke='%23EF4444' stroke-width='0.8' stroke-opacity='0.22'%3E%3Cpath d='M28 4 L52 28 L28 52 L4 28 Z'/%3E%3Cpath d='M28 12 L44 28 L28 44 L12 28 Z' stroke='%23F59E0B'/%3E%3Ccircle cx='28' cy='28' r='4' stroke='%23FFFFFF' stroke-opacity='0.25'/%3E%3C/g%3E%3C/svg%3E") !important;
      background-repeat: repeat !important;
      background-size: 56px 56px !important;
    }

    /* Motif Damask Kerajaan Eropa (Royal Wedding Westminster) */
    .pattern-royal-damask {
      background-image: url("data:image/svg+xml,%3Csvg width='72' height='72' viewBox='0 0 72 72' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' stroke='%237DA9D8' stroke-width='0.8' stroke-opacity='0.18'%3E%3Cpath d='M36 8 C44 18, 52 18, 52 28 C52 38, 42 40, 36 50 C30 40, 20 38, 20 28 C20 18, 28 18, 36 8 Z'/%3E%3Cpath d='M0 44 C6 52, 16 52, 16 60 M72 44 C66 52, 56 52, 56 60'/%3E%3Ccircle cx='36' cy='29' r='3'/%3E%3C/g%3E%3C/svg%3E") !important;
      background-repeat: repeat !important;
      background-size: 72px 72px !important;
    }
    /* Motif Linen Hangat Halus (Intimate Garden Candlelight) */
    .pattern-intimate-linen {
      background-image: url("data:image/svg+xml,%3Csvg width='40' height='40' viewBox='0 0 40 40' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' stroke='%23B0956E' stroke-width='0.5' stroke-opacity='0.16'%3E%3Cpath d='M0 20 H40 M20 0 V40'/%3E%3Cpath d='M0 0 H40 M0 0 V40 M40 40 H0 M40 40 V0'/%3E%3Ccircle cx='20' cy='20' r='7'/%3E%3C/g%3E%3C/svg%3E") !important;
      background-repeat: repeat !important;
      background-size: 40px 40px !important;
    }
    /* Motif Ukiran Toraja Pa'tedong & Kain Bombonan */
    .pattern-toraja-carving {
      background-image: url("data:image/svg+xml,%3Csvg width='56' height='56' viewBox='0 0 56 56' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' stroke='%23FACC15' stroke-width='0.8' stroke-opacity='0.2'%3E%3Ccircle cx='28' cy='28' r='10'/%3E%3Ccircle cx='28' cy='28' r='4'/%3E%3Cpath d='M28 4 V14 M28 42 V52 M4 28 H14 M42 28 H52'/%3E%3Cpath d='M10 10 L18 18 M46 10 L38 18 M10 46 L18 38 M46 46 L38 38'/%3E%3C/g%3E%3C/svg%3E") !important;
      background-repeat: repeat !important;
      background-size: 56px 56px !important;
    }
    /* Motif Geometris Art Deco 1920s Sunburst Gatsby */
    .pattern-artdeco-gatsby {
      background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' stroke='%23E5C158' stroke-width='0.8' stroke-opacity='0.22'%3E%3Cpath d='M30 30 L30 6 M30 30 L48 14 M30 30 L54 30 M30 30 L48 46 M30 30 L30 54 M30 30 L12 46 M30 30 L6 30 M30 30 L12 14'/%3E%3Crect x='24' y='24' width='12' height='12'/%3E%3C/g%3E%3C/svg%3E") !important;
      background-repeat: repeat !important;
      background-size: 60px 60px !important;
    }

    /* Kubah Moresque Arab / Maroko */
    .arch-arabian-dome {
      border-radius: 50% 50% 18px 18px / 38% 38% 18px 18px;
    }
    /* Kubah Katedral Gotik / Royal Westminster */
    .arch-royal-gothic {
      border-radius: 50% 50% 12px 12px / 62% 62% 12px 12px;
    }

    .atm-bca { background: linear-gradient(135deg, #0b2246 0%, #1d4d91 55%, #081833 100%); }
    .atm-mandiri { background: linear-gradient(135deg, #2d2312 0%, #5c4622 55%, #1d160b 100%); }

    .swiper-pagination-bullet-active {
      background: #D4AF37 !important;
      width: 18px !important;
      border-radius: 8px !important;
    }

/* ==========================================================================
   RESTORASI DESAIN — SKIN SAMPUL, AMBIENT BERTEMA, 3 LAYOUT BARU
   ========================================================================== */

/* ---------- sampul: dasar bersama ---------- */
.ncv { position: relative; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.ncv-kicker { font-size: 10px; letter-spacing: .42em; text-transform: uppercase; opacity: .78; margin-bottom: 14px; font-weight: 600; }
.ncv-btn { margin-top: 26px; display: inline-flex; align-items: center; gap: 8px; padding: 13px 30px; border-radius: 999px; background: var(--sk, #7A4E28); color: #FBF7F0; font-size: 11px; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; transition: background .25s ease, transform .25s ease; }
.ncv-btn:hover { transform: translateY(-1px); filter: brightness(1.08); }
.ncv-grain { position: absolute; inset: 0; pointer-events: none; opacity: .07; }

/* ---------- sampul: scene (adat / vintage — karya penuh) ---------- */
.ncv-scene-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ncv-scene-scrim { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(16,11,8,.30) 0%, rgba(16,11,8,.18) 42%, rgba(16,11,8,.78) 100%); }
.ncv-scene-in { position: relative; z-index: 2; text-align: center; padding: 40px 28px; max-width: 620px; color: #FBF7F0; }
.ncv-scene-badge { display: inline-block; font-size: 9px; letter-spacing: .3em; text-transform: uppercase; padding: 7px 16px; border: 1px solid color-mix(in srgb, var(--sk) 55%, transparent); border-radius: 999px; margin-bottom: 26px; opacity: .85; }
.ncv-scene-names { font-size: clamp(42px, 9vw, 84px); line-height: 1.02; font-weight: 500; text-shadow: 0 2px 26px rgba(0,0,0,.45); }
.ncv-scene-names .ncv-amp { font-size: .72em; font-style: italic; opacity: .9; padding: 0 6px; }
.ncv-scene-date { margin-top: 16px; font-size: 12.5px; letter-spacing: .5em; text-indent: .5em; opacity: .92; }
.ncv-scene-to { margin-top: 34px; font-size: 11px; opacity: .7; }
.ncv-scene-guest { font-size: 17px; font-weight: 600; margin-top: 5px; letter-spacing: .04em; color: #fff; }
.ncv-scene .ncv-btn { background: var(--sk); }

/* ---------- sampul: noir (editorial gelap) ---------- */
.ncv-noir { background: #0D0A08; color: #F5EFE8; }
.ncv-noir .ncv-aurora { position: absolute; inset: -20%; filter: blur(60px); opacity: .8; }
.ncv-noir .ncv-aurora i { position: absolute; border-radius: 50%; }
.ncv-noir .ncv-aurora .a1 { width: 55vw; height: 55vw; left: -12%; top: 8%; background: radial-gradient(circle, color-mix(in srgb, var(--sk) 72%, #1a0b14) 0%, transparent 65%); animation: ncAuroraA 26s ease-in-out infinite alternate; }
.ncv-noir .ncv-aurora .a2 { width: 48vw; height: 48vw; right: -10%; top: 30%; background: radial-gradient(circle, color-mix(in srgb, var(--sk) 40%, #241019) 0%, transparent 62%); animation: ncAuroraB 34s ease-in-out infinite alternate; }
.ncv-noir .ncv-aurora .a3 { width: 40vw; height: 40vw; left: 18%; bottom: -14%; background: radial-gradient(circle, rgba(240,225,205,.16) 0%, transparent 60%); animation: ncAuroraA 40s ease-in-out infinite alternate-reverse; }
@keyframes ncAuroraA { from { transform: translate3d(0,0,0) scale(1); } to { transform: translate3d(6vw,-4vh,0) scale(1.12); } }
@keyframes ncAuroraB { from { transform: translate3d(0,0,0) scale(1.05); } to { transform: translate3d(-5vw,5vh,0) scale(.94); } }
.ncv-noir-in { position: relative; z-index: 2; text-align: center; padding: 40px 28px; max-width: 620px; }
.ncv-noir-title { position: relative; display: inline-block; margin: 10px 0 8px; }
.ncv-noir-photo { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -52%); width: 132px; height: 168px; object-fit: cover; z-index: 0; }
.ncv-noir-name { position: relative; z-index: 1; font-family: "Playfair Display", serif; font-size: clamp(52px, 12vw, 96px); line-height: .94; font-weight: 500; letter-spacing: .01em; color: var(--sk); mix-blend-mode: normal; }
.ncv-noir-script { display: block; margin-top: 10px; font-size: clamp(20px, 5vw, 30px); color: rgba(245,239,232,.85); transform: rotate(-2deg); }
.ncv-noir-invite { margin-top: 34px; font-size: 10.5px; letter-spacing: .3em; text-transform: uppercase; opacity: .6; }
.ncv-noir-guest { margin-top: 8px; font-size: 21px; font-weight: 700; }
.ncv-noir-btn { margin-top: 26px; display: inline-flex; align-items: center; gap: 8px; padding: 12px 28px; border-radius: 999px; border: 1px solid rgba(245,239,232,.35); background: rgba(245,239,232,.06); color: #F5EFE8; font-size: 10.5px; font-weight: 600; letter-spacing: .26em; text-transform: uppercase; transition: background .25s ease, border-color .25s ease; }
.ncv-noir-btn:hover { background: rgba(245,239,232,.14); border-color: rgba(245,239,232,.6); }
.ncv-noir-foot { position: absolute; bottom: 14px; left: 0; right: 0; text-align: center; font-size: 10px; letter-spacing: .2em; opacity: .45; z-index: 2; }

/* ---------- sampul: watercolor (floral lembut) ---------- */
.ncv-wc { background: #FBF6EF; color: #43392F; }
.ncv-wc-orn { position: absolute; width: clamp(120px, 30vw, 230px); opacity: .9; pointer-events: none; }
.ncv-wc-orn.tl { top: -14px; left: -14px; }
.ncv-wc-orn.br { bottom: -14px; right: -14px; transform: rotate(180deg); }
.ncv-wc-in { position: relative; z-index: 2; text-align: center; padding: 40px 28px; max-width: 560px; }
.ncv-wc-frame { width: 168px; height: 216px; margin: 0 auto 20px; border-radius: 999px 999px 18px 18px; overflow: hidden; border: 5px solid #fff; box-shadow: 0 14px 40px rgba(90,62,50,.18); }
.ncv-wc-frame img { width: 100%; height: 100%; object-fit: cover; }
.ncv-wc-names { font-size: clamp(38px, 8vw, 62px); line-height: 1.05; font-weight: 400; }
.ncv-wc-names span { font-size: .8em; }
.ncv-wc-sub { margin-top: 20px; font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: #8A7B6B; }
.ncv-wc-guest { margin-top: 6px; font-size: 18px; font-weight: 600; color: #3B342C; }
.ncv-wc-date { margin-top: 4px; font-size: 11px; letter-spacing: .34em; color: #8A7B6B; }

/* ---------- ambient di atas panggung ---------- */
.nc-amb { position: fixed; inset: 0; z-index: 30; pointer-events: none; }
.nc-amb-aurora { mix-blend-mode: screen; opacity: .5; }
.nc-amb-aurora i { position: absolute; border-radius: 50%; filter: blur(70px); }
.nc-amb-aurora .a1 { width: 44vw; height: 44vw; left: -8%; top: 4%; background: radial-gradient(circle, color-mix(in srgb, var(--sk, #A8853F) 46%, transparent) 0%, transparent 65%); animation: ncAuroraA 36s ease-in-out infinite alternate; }
.nc-amb-aurora .a2 { width: 38vw; height: 38vw; right: -6%; bottom: 6%; background: radial-gradient(circle, rgba(240,225,205,.20) 0%, transparent 60%); animation: ncAuroraB 44s ease-in-out infinite alternate; }
.nc-amb-aurora .a3 { width: 30vw; height: 30vw; left: 30%; top: 40%; background: radial-gradient(circle, rgba(179,103,74,.14) 0%, transparent 60%); animation: ncAuroraA 50s ease-in-out infinite alternate-reverse; }
.nc-amb-aurora .grain { position: absolute; inset: 0; opacity: .05; mix-blend-mode: overlay; }
.nc-amb-petals i { position: absolute; top: -30px; border-radius: 999px 0 999px 0; background: var(--petal, #B07C63); opacity: .5; animation: ncPetalFall linear infinite; }
@keyframes ncPetalFall { 0% { transform: translateY(-4vh) rotate(0deg); } 100% { transform: translateY(108vh) rotate(340deg); } }
.nc-amb-gold i { position: absolute; bottom: -12px; border-radius: 50%; background: var(--gold, #C2A06A); opacity: .55; box-shadow: 0 0 6px color-mix(in srgb, var(--gold, #C2A06A) 70%, transparent); animation: ncGoldRise linear infinite; }
@keyframes ncGoldRise { 0% { transform: translateY(0) translateX(0); opacity: 0; } 12% { opacity: .6; } 88% { opacity: .5; } 100% { transform: translateY(-106vh) translateX(24px); opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .nc-amb, .ncv-aurora i, .ncv-noir .ncv-aurora i { animation: none !important; }
  .nc-amb-aurora, .nc-amb-aurora .grain { opacity: .18; }
  .nc-amb-petals, .nc-amb-gold { display: none; }
}

/* ---------- layout 7: editorial noir ---------- */
.nc-noir { background: var(--paper, #0D0A08); color: var(--text, #F5EFE8); --sk: #A8853F; }
.nc-noir-hero { min-height: 100svh; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; position: relative; padding: 80px 24px 60px; overflow: hidden; }
.nc-noir-hero-photo { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -58%); width: min(52vw, 320px); aspect-ratio: 3/4; object-fit: cover; border-radius: 16px; opacity: .55; -webkit-mask-image: linear-gradient(to bottom, black 35%, transparent 92%); mask-image: linear-gradient(to bottom, black 35%, transparent 92%); pointer-events: none; }
.nc-noir-kicker { position: relative; z-index: 2; font-size: 10px; letter-spacing: .44em; text-transform: uppercase; opacity: .75; }
.nc-noir-hero-name { position: relative; z-index: 2; margin-top: 14px; font-family: "Playfair Display", serif; font-size: clamp(56px, 13vw, 128px); line-height: .92; font-weight: 500; color: var(--sk); text-shadow: 0 4px 20px rgba(0,0,0,0.6); }
.nc-noir-hero-script { position: relative; z-index: 2; display: block; margin-top: 12px; font-size: clamp(20px, 5vw, 32px); color: rgba(245,239,232,.9); transform: rotate(-2deg); text-shadow: 0 2px 10px rgba(0,0,0,0.8); }
.nc-noir-guest { position: relative; z-index: 2; margin-top: 48px; font-size: 13.5px; opacity: .98; color: #FAF7F2 !important; text-shadow: 0 2px 14px rgba(0,0,0,0.95); }
.nc-noir-guest strong { font-size: 18px; color: #FFE8B0 !important; text-shadow: 0 2px 12px rgba(0,0,0,0.98); font-weight: 700; }
.nc-noir-count { position: relative; z-index: 2; margin-top: 14px; font-variant-numeric: tabular-nums; font-size: 12px; letter-spacing: .28em; opacity: .85; color: #E2D7CC; text-shadow: 0 2px 10px rgba(0,0,0,0.9); }
.nc-noir-sec { max-width: 880px; margin: 0 auto; padding: 88px 24px; }
.nc-noir-label { display: block; font-size: 10px; letter-spacing: .4em; text-transform: uppercase; color: var(--sk); margin-bottom: 36px; }
.nc-noir-couple { display: grid; grid-template-columns: 1fr auto 1fr; gap: 28px; align-items: start; text-align: center; }
.nc-noir-couple .nc-noir-amp { font-size: 56px; color: var(--sk); align-self: center; }
.nc-noir-frame { width: min(58vw, 250px); aspect-ratio: 3/4; margin: 0 auto 18px; overflow: hidden; border-radius: 999px 999px 14px 14px; background: #1A1410; }
.nc-noir-frame img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.85); }
.nc-noir-couple h3 { font-family: "Playfair Display", serif; font-size: 24px; letter-spacing: .08em; }
.nc-noir-full { margin-top: 6px; font-size: 12px; opacity: .85; }
.nc-noir-parents { margin-top: 10px; font-size: 11px; line-height: 1.7; opacity: .55; }
.nc-noir-chapter { display: grid; grid-template-columns: 72px 1fr; gap: 20px; padding: 26px 0; border-bottom: 1px solid rgba(245,239,232,.1); }
.nc-noir-num { font-family: "Playfair Display", serif; font-size: 40px; color: var(--sk); opacity: .85; line-height: 1; }
.nc-noir-chapter h3 { font-family: "Playfair Display", serif; font-size: 20px; font-weight: 500; }
.nc-noir-chapter p { margin-top: 8px; font-size: 12.5px; line-height: 1.8; opacity: .68; }
.nc-noir-event { padding: 30px 0; border-bottom: 1px solid rgba(245,239,232,.1); }
.nc-noir-event h3 { font-family: "Playfair Display", serif; font-size: 26px; font-weight: 500; }
.nc-noir-date { margin-top: 8px; font-size: 12px; letter-spacing: .4em; color: var(--sk); }
.nc-noir-place { margin-top: 8px; font-size: 13px; opacity: .75; line-height: 1.7; }
.nc-noir-map { display: inline-block; margin-top: 14px; font-size: 10.5px; letter-spacing: .26em; text-transform: uppercase; color: var(--sk); border-bottom: 1px solid color-mix(in srgb, var(--sk) 50%, transparent); padding-bottom: 3px; }
.nc-noir-strip { max-width: none; }
.nc-noir-marquee { overflow: hidden; }
.nc-noir-track { display: flex; gap: 14px; width: max-content; animation: ncMarquee 42s linear infinite; }
.nc-noir-shot { flex: 0 0 auto; width: min(62vw, 300px); }
.nc-noir-shot img { width: 100%; aspect-ratio: 3/4; object-fit: cover; border-radius: 6px; }
.nc-noir-shot figcaption { margin-top: 8px; font-size: 10px; letter-spacing: .2em; text-transform: uppercase; opacity: .5; }
@keyframes ncMarquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.nc-noir-gift-sec .space-y-10 > div:first-child span, .nc-noir-gift-sec h2 { color: #F5EFE8 !important; }
.nc-noir-foot-sec { text-align: center; padding: 50px 20px 60px; font-size: 10px; letter-spacing: .3em; text-transform: uppercase; opacity: .4; }
@media (prefers-reduced-motion: reduce) { .nc-noir-track { animation: none; } }
@media (max-width: 640px) { .nc-noir-couple { grid-template-columns: 1fr; } .nc-noir-couple .nc-noir-amp { margin: -8px auto; } }

/* ---------- layout 8: klasik terilustrasi ---------- */
.nc-cl { background: var(--paper, #FBF6EF); color: var(--text, #43392F); --sk: #7A4E28; }
.nc-cl-hero { position: relative; min-height: 92svh; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.nc-cl-hero-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.nc-cl-hero-scrim { position: absolute; inset: 0; background: linear-gradient(180deg, color-mix(in srgb, var(--paper, #FBF6EF) 65%, transparent) 0%, color-mix(in srgb, var(--paper, #FBF6EF) 35%, transparent) 45%, var(--paper, #FBF6EF) 100%); }
.nc-cl-hero-in { position: relative; z-index: 2; text-align: center; padding: 48px 28px; }
.nc-cl-kicker { font-size: 10px; letter-spacing: .44em; text-transform: uppercase; color: #8A7B6B; margin-bottom: 12px; }
.nc-cl-hero-in h1 { font-size: clamp(40px, 9vw, 76px); line-height: 1.02; font-weight: 500; color: #3B342C; }
.nc-cl-dotted { margin-top: 16px; font-size: 13px; letter-spacing: .5em; text-indent: .5em; color: var(--sk); font-weight: 600; }
.nc-cl-to { margin-top: 36px; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: #8A7B6B; }
.nc-cl-guest { margin-top: 6px; font-size: 19px; font-weight: 600; color: #3B342C; }
.nc-cl-sec { max-width: 760px; margin: 0 auto; padding: 72px 24px; text-align: center; }
.nc-cl-h2 { font-size: 28px; font-weight: 500; margin-bottom: 8px; }
.nc-cl-greeting { font-size: 17px; font-weight: 600; }
.nc-cl-greeting-sub { margin: 14px auto 0; max-width: 54ch; font-size: 12.5px; line-height: 1.85; color: #6E6154; }
.nc-cl-count { margin-top: 34px; display: flex; justify-content: center; gap: 10px; }
.nc-cl-count > div { min-width: 84px; padding: 16px 10px; border: 1px solid #E7DAC8; border-radius: 12px; background: #fff; }
.nc-cl-count strong { display: block; font-family: "Playfair Display", serif; font-size: 30px; font-variant-numeric: tabular-nums; }
.nc-cl-count span { font-size: 9.5px; letter-spacing: .22em; text-transform: uppercase; color: #8A7B6B; }
.nc-cl-events { margin-top: 26px; display: grid; gap: 18px; }
.nc-cl-event { border: 1px solid #E7DAC8; outline: 1px solid #E7DAC8; outline-offset: 3px; border-radius: 4px; padding: 30px 26px; background: #FFFCF7; text-align: center; }
.nc-cl-event h3 { font-family: "Playfair Display", serif; font-size: 23px; font-weight: 500; }
.nc-cl-row { margin-top: 12px; font-size: 12px; }
.nc-cl-row span { display: block; font-size: 9.5px; letter-spacing: .24em; text-transform: uppercase; color: #8A7B6B; margin-bottom: 3px; }
.nc-cl-row strong { font-weight: 600; line-height: 1.6; }
.nc-cl-map { display: inline-block; margin-top: 16px; font-size: 10.5px; letter-spacing: .22em; text-transform: uppercase; color: var(--sk); border-bottom: 1px solid color-mix(in srgb, var(--sk) 45%, transparent); padding-bottom: 3px; }
.nc-cl-couple { margin-top: 26px; display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.nc-cl-frame { width: min(40vw, 190px); aspect-ratio: 3/4; margin: 0 auto 16px; border-radius: 999px 999px 12px 12px; overflow: hidden; border: 5px solid #fff; box-shadow: 0 12px 34px rgba(90,62,50,.16); background: #F3EBDD; }
.nc-cl-frame img { width: 100%; height: 100%; object-fit: cover; }
.nc-cl-person h3 { font-family: "Playfair Display", serif; font-size: 24px; font-weight: 500; }
.nc-cl-full { margin-top: 5px; font-size: 11.5px; color: #6E6154; }
.nc-cl-parents { margin-top: 8px; font-size: 11px; line-height: 1.75; color: #8A7B6B; }
.nc-cl-quote { margin: 40px auto 0; max-width: 46ch; font-family: "Playfair Display", serif; font-style: italic; font-size: 15.5px; line-height: 1.85; color: #5F544A; }
.nc-cl-quote cite { display: block; margin-top: 10px; font-family: Inter, sans-serif; font-style: normal; font-size: 10px; letter-spacing: .24em; text-transform: uppercase; color: #8A7B6B; }
.nc-cl-gallery { margin-top: 24px; columns: 2; column-gap: 12px; }
.nc-cl-gallery img { width: 100%; margin-bottom: 12px; border-radius: 6px; cursor: zoom-in; }
.nc-cl-gift { max-width: 900px; }
.nc-cl-foot { padding: 60px 20px 70px; text-align: center; }
.nc-cl-foot p { font-size: 24px; color: var(--sk); }
.nc-cl-foot span { display: block; margin-top: 8px; font-size: 10px; letter-spacing: .24em; text-transform: uppercase; color: #8A7B6B; }
@media (max-width: 640px) { .nc-cl-couple { grid-template-columns: 1fr; gap: 34px; } .nc-cl-count > div { min-width: 0; flex: 1; } }

/* Dukungan Kontras Tinggi untuk Tema Gelap di Layout Klasik Terilustrasi */
.nc-cl[data-dark="true"] .nc-cl-hero-in h1 {
  color: #FFFDF9 !important;
  text-shadow: 0 2px 14px rgba(0,0,0,0.65);
}
.nc-cl[data-dark="true"] .nc-cl-kicker {
  color: rgba(255, 255, 255, 0.75) !important;
}
.nc-cl[data-dark="true"] .nc-cl-dotted {
  color: var(--sk) !important;
  text-shadow: 0 1px 8px rgba(0,0,0,0.4);
}
.nc-cl[data-dark="true"] .nc-cl-to {
  color: rgba(255, 255, 255, 0.75) !important;
}
.nc-cl[data-dark="true"] .nc-cl-guest {
  color: #FFFDF9 !important;
  text-shadow: 0 1px 8px rgba(0,0,0,0.5);
}
.nc-cl[data-dark="true"] .nc-cl-greeting {
  color: var(--sk) !important;
}
.nc-cl[data-dark="true"] .nc-cl-greeting-sub {
  color: rgba(255, 255, 255, 0.8) !important;
}
.nc-cl[data-dark="true"] .nc-cl-count > div {
  background: rgba(255, 255, 255, 0.08) !important;
  border-color: rgba(255, 255, 255, 0.18) !important;
  color: #FFFDF9 !important;
  backdrop-filter: blur(8px);
}
.nc-cl[data-dark="true"] .nc-cl-count strong {
  color: var(--sk) !important;
}
.nc-cl[data-dark="true"] .nc-cl-count span {
  color: rgba(255, 255, 255, 0.75) !important;
}
.nc-cl[data-dark="true"] .nc-cl-event {
  background: rgba(255, 255, 255, 0.08) !important;
  border: 1px solid rgba(255, 255, 255, 0.18) !important;
  color: #FFFDF9 !important;
  backdrop-filter: blur(8px);
}
.nc-cl[data-dark="true"] .nc-cl-event h3 {
  color: #FFFDF9 !important;
}
.nc-cl[data-dark="true"] .nc-cl-row span {
  color: rgba(255, 255, 255, 0.75) !important;
}
.nc-cl[data-dark="true"] .nc-cl-row strong {
  color: #FFFDF9 !important;
}
.nc-cl[data-dark="true"] .nc-cl-person h3 {
  color: #FFFDF9 !important;
}
.nc-cl[data-dark="true"] .nc-cl-full {
  color: #FFFDF9 !important;
}
.nc-cl[data-dark="true"] .nc-cl-parents {
  color: rgba(255, 255, 255, 0.75) !important;
}
.nc-cl[data-dark="true"] .nc-cl-quote {
  background: rgba(255, 255, 255, 0.06) !important;
  border-color: var(--sk) !important;
  color: rgba(255, 255, 255, 0.85) !important;
}
.nc-cl[data-dark="true"] .nc-cl-quote cite {
  color: var(--sk) !important;
}

/* ---------- layout 9: soft arch & wave ---------- */
.nc-sa { position: relative; background: var(--paper, #FAF6F0); color: var(--text, #43392F); --sk: #5F6F52; overflow: hidden; }
.nc-sa-orn { position: absolute; width: clamp(110px, 26vw, 210px); opacity: .9; z-index: 2; pointer-events: none; }
.nc-sa-orn.tl { top: -12px; left: -12px; }
.nc-sa-orn.br { bottom: -12px; right: -12px; transform: rotate(180deg); }
.nc-sa-hero { position: relative; z-index: 1; min-height: 96svh; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 70px 24px 46px; }
.nc-sa-kicker { font-size: 10px; letter-spacing: .4em; text-transform: uppercase; color: #8A7B6B; margin-bottom: 22px; }
.nc-sa-frame { width: min(52vw, 210px); aspect-ratio: 3/4; border-radius: 999px 999px 999px 999px / 46% 46% 54% 54%; overflow: hidden; border: 5px solid #fff; box-shadow: 0 16px 44px rgba(90,62,50,.18); background: #F3EBDD; }
.nc-sa-frame img { width: 100%; height: 100%; object-fit: cover; }
.nc-sa-hero h1 { margin-top: 20px; font-size: clamp(38px, 9vw, 64px); line-height: 1.05; font-weight: 400; }
.nc-sa-sub { margin-top: 12px; font-size: 12.5px; color: #6E6154; max-width: 40ch; }
.nc-sa-count { margin-top: 26px; display: flex; gap: 10px; }
.nc-sa-chip { min-width: 70px; padding: 13px 8px; border-radius: 12px; background: var(--sk); color: #FBF7F0; }
.nc-sa-chip strong { display: block; font-family: "Playfair Display", serif; font-size: 26px; font-variant-numeric: tabular-nums; line-height: 1.1; }
.nc-sa-chip span { font-size: 9px; letter-spacing: .2em; text-transform: uppercase; opacity: .85; }
.nc-sa-date { margin-top: 18px; font-size: 12px; letter-spacing: .3em; color: #6E6154; }
.nc-sa-guest { margin-top: 22px; font-size: 11.5px; color: #6E6154; line-height: 1.8; }
.nc-sa-guest strong { font-size: 16px; color: #3B342C; }

/* Dukungan Kontras Tinggi untuk Tema Gelap di Layout Soft Arch */
.nc-sa[data-dark="true"] .nc-sa-kicker,
.nc-sa[data-dark="true"] .nc-sa-sub,
.nc-sa[data-dark="true"] .nc-sa-date,
.nc-sa[data-dark="true"] .nc-sa-guest,
.nc-sa[data-dark="true"] .nc-sa-greeting-sub,
.nc-sa[data-dark="true"] .nc-sa-person p,
.nc-sa[data-dark="true"] .nc-sa-parents,
.nc-sa[data-dark="true"] .nc-sa-story p {
  color: rgba(255, 255, 255, 0.75) !important;
}
.nc-sa[data-dark="true"] .nc-sa-guest strong {
  color: #FFFDF9 !important;
  text-shadow: 0 1px 6px rgba(0,0,0,0.4);
}
.nc-sa[data-dark="true"] .nc-sa-hero h1 {
  text-shadow: 0 2px 12px rgba(0,0,0,0.35);
}
.nc-sa[data-dark="true"] .nc-sa-chip strong {
  color: #FFFDF9 !important;
}
.nc-sa[data-dark="true"] .nc-sa-event,
.nc-sa[data-dark="true"] .nc-sa-story article {
  background: rgba(255, 255, 255, 0.08) !important;
  border: 1px solid rgba(255, 255, 255, 0.16);
  color: #FFFDF9 !important;
  backdrop-filter: blur(8px);
}
.nc-sa[data-dark="true"] .nc-sa-event h3,
.nc-sa[data-dark="true"] .nc-sa-person h3,
.nc-sa[data-dark="true"] .nc-sa-story h3 {
  color: #FFFDF9 !important;
}
.nc-sa-wave { color: var(--sk); line-height: 0; opacity: .95; }
.nc-sa-wave svg { width: 100%; height: 74px; }
.nc-sa-sec { position: relative; z-index: 1; max-width: 780px; margin: 0 auto; padding: 72px 24px; text-align: center; }
.nc-sa-h2 { font-family: "Playfair Display", serif; font-size: 26px; font-weight: 500; margin-bottom: 26px; }
.nc-sa-greeting { font-size: 26px; color: var(--sk); }
.nc-sa-greeting-sub { margin: 12px auto 0; max-width: 52ch; font-size: 12.5px; line-height: 1.85; color: #6E6154; }
.nc-sa-events { display: grid; gap: 16px; }
.nc-sa-event { border-radius: 18px; background: #fff; box-shadow: 0 10px 30px rgba(90,62,50,.09); padding: 28px 24px; }
.nc-sa-event h3 { font-family: "Playfair Display", serif; font-size: 21px; font-weight: 500; }
.nc-sa-date { margin-top: 8px; font-size: 11.5px; color: #8A7B6B; }
.nc-sa-place { margin-top: 6px; font-size: 13px; font-weight: 500; line-height: 1.65; }
.nc-sa-map { display: inline-block; margin-top: 14px; padding: 8px 20px; border-radius: 999px; background: var(--sk); color: #FBF7F0; font-size: 10px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; }
.nc-sa-couple { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.nc-sa-mini { width: min(38vw, 170px); aspect-ratio: 3/4; margin: 0 auto 14px; border-radius: 999px 999px 14px 14px; overflow: hidden; border: 4px solid #fff; box-shadow: 0 10px 28px rgba(90,62,50,.14); background: #F3EBDD; }
.nc-sa-mini img { width: 100%; height: 100%; object-fit: cover; }
.nc-sa-person h3 { font-family: "Playfair Display", serif; font-size: 22px; font-weight: 500; }
.nc-sa-person p { margin-top: 5px; font-size: 11.5px; color: #6E6154; }
.nc-sa-parents { line-height: 1.7; color: #8A7B6B; }
.nc-sa-story { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; text-align: left; }
.nc-sa-story article { border-radius: 16px; background: #fff; box-shadow: 0 8px 24px rgba(90,62,50,.08); overflow: hidden; padding-bottom: 18px; }
.nc-sa-story-img { aspect-ratio: 16/10; background: #F3EBDD; }
.nc-sa-story-img img { width: 100%; height: 100%; object-fit: cover; }
.nc-sa-year { display: block; padding: 14px 16px 0; font-size: 10px; letter-spacing: .26em; color: var(--sk); font-weight: 700; }
.nc-sa-story h3 { padding: 4px 16px 0; font-size: 14.5px; font-weight: 600; }
.nc-sa-story p { padding: 6px 16px 0; font-size: 11.5px; line-height: 1.7; color: #6E6154; }
.nc-sa-gallery { columns: 2; column-gap: 12px; }
.nc-sa-gallery img { width: 100%; margin-bottom: 12px; border-radius: 12px; cursor: zoom-in; }
.nc-sa-gift { max-width: 900px; }
.nc-sa-foot { position: relative; z-index: 1; text-align: center; padding: 40px 20px 60px; }
.nc-sa-foot p { font-size: 26px; }
.nc-sa-foot span { display: block; margin-top: 6px; font-size: 10px; letter-spacing: .24em; text-transform: uppercase; color: #8A7B6B; }
@media (max-width: 640px) { .nc-sa-couple { grid-template-columns: 1fr; gap: 30px; } .nc-sa-story { grid-template-columns: 1fr; } .nc-sa-count { flex-wrap: wrap; justify-content: center; } }

/* ---------- preloader ---------- */
#ncPreload { position: fixed; inset: 0; z-index: 90; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; background: #140F0B; color: #F5EFE8; transition: opacity .7s ease, visibility .7s ease; }
#ncPreload.done { opacity: 0; visibility: hidden; }
#ncPreload .nc-pre-mark { font-family: "Great Vibes", cursive; font-size: 34px; color: #E6C665; }
#ncPreload .nc-pre-pct { font-variant-numeric: tabular-nums; font-size: 12px; letter-spacing: .3em; opacity: .7; }
#ncPreload .nc-pre-bar { width: 132px; height: 1px; background: rgba(245,239,232,.18); overflow: hidden; }
#ncPreload .nc-pre-bar i { display: block; height: 100%; width: 0%; background: #E6C665; transition: width .18s ease; }

/* ==========================================================================
   AMBIENT TAMBAHAN + ENTRANCE PER KELUARGA + PARALLAX SAMPUL
   ========================================================================== */
.nc-amb-arabian { pointer-events: none; }
.nc-fanous { position: absolute; top: clamp(8px, 2.5vw, 28px); z-index: 38; filter: drop-shadow(0 6px 24px rgba(230,194,90,.65)); pointer-events: none; }
.nc-fanous-l { left: clamp(14px, 4vw, 55px); width: clamp(52px, 6.8vw, 78px); transform-origin: 35px 0; animation: ncFanousSwayLeft 6.5s ease-in-out infinite alternate; }
.nc-fanous-r { right: clamp(14px, 4vw, 55px); width: clamp(46px, 6.2vw, 70px); transform-origin: 35px 0; animation: ncFanousSwayRight 5.8s ease-in-out infinite alternate; }
@keyframes ncFanousSwayLeft { 0% { transform: rotate(-3.5deg); } 50% { transform: rotate(1deg); } 100% { transform: rotate(4deg); } }
@keyframes ncFanousSwayRight { 0% { transform: rotate(3.5deg); } 50% { transform: rotate(-1deg); } 100% { transform: rotate(-4deg); } }
.anim-fanous-glow { animation: ncLanternGlow 3.2s ease-in-out infinite alternate; transform-origin: 35px 74px; }
.anim-flame { animation: ncFanousFlicker 1.8s ease-in-out infinite alternate; transform-origin: 35px 72px; }
@keyframes ncLanternGlow { 0% { opacity: .7; transform: scale(.94); } 100% { opacity: 1; transform: scale(1.18); } }
@keyframes ncFanousFlicker { 0% { transform: scale(1) rotate(-1deg); opacity: .85; } 100% { transform: scale(1.22) rotate(1.5deg); opacity: 1; } }

.nc-amb-arabian i.nc-star {
  position: absolute; bottom: -16px; color: var(--gold, #E5C158); opacity: .7;
  animation: ncStarRise linear infinite; pointer-events: none;
}
@keyframes ncStarRise {
  0% { transform: translateY(0) rotate(0deg) scale(.75); opacity: 0; }
  15% { opacity: .75; }
  85% { opacity: .65; }
  100% { transform: translateY(-106vh) rotate(180deg) scale(1.1); opacity: 0; }
}

/* Islamic Arabesque Rotating Watermark (Arabian Night) */
.nc-arabesque-spin {
  position: fixed; top: 50%; left: 50%; width: min(85vmin, 680px); height: min(85vmin, 680px);
  transform: translate(-50%, -50%); opacity: .06; pointer-events: none; z-index: 1;
  animation: ncSpinSlow 120s linear infinite;
}
@keyframes ncSpinSlow { from { transform: translate(-50%, -50%) rotate(0deg); } to { transform: translate(-50%, -50%) rotate(360deg); } }

/* Balinese Kamboja (Frangipani) falling */
.nc-amb-bali i {
  position: absolute; top: -36px; animation: ncFrangipaniFall linear infinite; opacity: .85; pointer-events: none;
}
@keyframes ncFrangipaniFall {
  0% { transform: translateY(-4vh) rotate(0deg) translateX(0) scale(.85); opacity: 0; }
  12% { opacity: .9; }
  50% { transform: translateY(52vh) rotate(190deg) translateX(32px) scale(1); }
  88% { opacity: .8; }
  100% { transform: translateY(106vh) rotate(380deg) translateX(-20px) scale(.88); opacity: 0; }
}

/* Javanese & Sundanese Melati Ronce falling */
.nc-amb-jawa i, .nc-amb-sunda i {
  position: absolute; top: -30px; animation: ncMelatiFall linear infinite; opacity: .8; pointer-events: none;
}
@keyframes ncMelatiFall {
  0% { transform: translateY(-4vh) rotate(0deg) translateX(0); opacity: 0; }
  15% { opacity: .85; }
  50% { transform: translateY(50vh) rotate(140deg) translateX(-24px); }
  85% { opacity: .75; }
  100% { transform: translateY(105vh) rotate(280deg) translateX(22px); opacity: 0; }
}

/* Autumn Falling Leaves (Franconia Germany) */
.nc-amb-autumn i {
  position: absolute; top: -34px; animation: ncAutumnFall linear infinite; opacity: .85; pointer-events: none;
}
@keyframes ncAutumnFall {
  0% { transform: translateY(-5vh) rotate(0deg) translateX(0) scale(.85); opacity: 0; }
  12% { opacity: .88; }
  50% { transform: translateY(50vh) rotate(175deg) translateX(36px) scale(1.05); }
  88% { opacity: .78; }
  100% { transform: translateY(106vh) rotate(355deg) translateX(-28px) scale(.88); opacity: 0; }
}

.nc-amb-weave i { position: absolute; left: -12%; width: 124%; height: 2px; background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--gold, #C2A06A) 55%, transparent), transparent); opacity: .5; animation: ncWeaveSweep linear infinite; }
@keyframes ncWeaveSweep { 0% { transform: translateX(-30px); opacity: 0; } 30% { opacity: .55; } 70% { opacity: .4; } 100% { transform: translateX(30px); opacity: 0; } }

.nc-amb-lanterns i { position: absolute; bottom: -30px; border-radius: 6px; aspect-ratio: 1/1.4; background: radial-gradient(circle at 50% 35%, color-mix(in srgb, var(--gold, #E6C25A) 85%, #fff) 0%, var(--gold, #E6C25A) 55%, transparent 78%); box-shadow: 0 0 18px color-mix(in srgb, var(--gold, #E6C25A) 60%, transparent); opacity: .5; animation: ncGoldRise linear infinite; }

.nc-amb-waves { mix-blend-mode: soft-light; opacity: .5; }
.nc-amb-waves i { position: absolute; border-radius: 50%; filter: blur(40px); background: radial-gradient(circle, color-mix(in srgb, var(--sk, #3E6F94) 40%, transparent) 0%, transparent 62%); }
.nc-amb-waves .w1 { width: 60vw; height: 30vh; left: -10%; top: 12%; animation: ncAuroraA 30s ease-in-out infinite alternate; }
.nc-amb-waves .w2 { width: 52vw; height: 26vh; right: -8%; top: 46%; animation: ncAuroraB 38s ease-in-out infinite alternate; }
.nc-amb-waves .w3 { width: 44vw; height: 22vh; left: 24%; top: 74%; animation: ncAuroraA 46s ease-in-out infinite alternate-reverse; }

.nc-amb-leaves i { position: absolute; top: -30px; aspect-ratio: 1/1.5; border-radius: 0 999px 0 999px; background: linear-gradient(135deg, var(--leaf, #7C8E5A), color-mix(in srgb, var(--leaf, #7C8E5A) 55%, #B3674A)); opacity: .45; animation: ncLeafFall linear infinite; }
@keyframes ncLeafFall { 0% { transform: translateY(-4vh) rotate(0deg) translateX(0); } 50% { transform: translateY(52vh) rotate(190deg) translateX(34px); } 100% { transform: translateY(108vh) rotate(380deg) translateX(-16px); } }

.nc-amb-ember .glow { position: absolute; inset: 0; background: radial-gradient(circle at 50% 78%, color-mix(in srgb, var(--gold, #C39A69) 26%, transparent) 0%, transparent 46%); animation: ncEmberFlicker 5.5s ease-in-out infinite; }
.nc-amb-ember i { position: absolute; bottom: -8px; width: 2px; height: 2px; border-radius: 50%; background: var(--gold, #C39A69); box-shadow: 0 0 8px var(--gold, #C39A69); opacity: .7; animation: ncGoldRise linear infinite; }
@keyframes ncEmberFlicker { 0%, 100% { opacity: .75; } 22% { opacity: 1; } 47% { opacity: .6; } 66% { opacity: .95; } 81% { opacity: .68; } }

.ncv-scene-in, .ncv-wc-in, .ncv-noir-in { animation: ncCoverIn 1.15s cubic-bezier(.22,1,.36,1) both; }
.ncv-scene-bg { animation: ncCoverBg 2s ease both; }
.ncv-still .ncv-scene-in, .ncv-still .ncv-wc-in, .ncv-still .ncv-noir-in, .ncv-still .ncv-scene-bg { animation: none; }
@keyframes ncCoverIn { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: translateY(0); } }
@keyframes ncCoverBg { from { opacity: 0; transform: scale(1.1); } to { opacity: 1; transform: scale(1.08); } }
.ncv-scene-bg { transform: scale(1.08) translate(calc(var(--mx, 0) * -12px), calc(var(--my, 0) * -9px)); transition: transform .35s cubic-bezier(.22,1,.36,1); }
.ncv-noir-photo { transform: translate(calc(-50% + var(--mx, 0) * 8px), calc(-52% + var(--my, 0) * 6px)); transition: transform .35s cubic-bezier(.22,1,.36,1); }
@media (prefers-reduced-motion: reduce) {
  .ncv-scene-bg, .ncv-noir-photo { transform: none !important; }
  .nc-amb-weave i, .nc-amb-lanterns i, .nc-amb-leaves i, .nc-amb-ember i, .nc-amb-ember .glow { animation: none !important; }
  .nc-amb-lanterns, .nc-amb-leaves, .nc-amb-ember i { display: none; }
  .ncv-scene-in, .ncv-wc-in, .ncv-noir-in, .ncv-scene-bg { animation: none; }
}

/* ---------- entrance per keluarga ---------- */
#mainStage[data-fam="adat"] .reveal-item:not(.active) { transform: none; clip-path: inset(12% 0 12% 0); }
#mainStage[data-fam="adat"] .reveal-item { transition-property: opacity, clip-path; transition-duration: .9s; }
#mainStage[data-fam="adat"] .reveal-item.active { clip-path: inset(0 0 0 0); }
#mainStage[data-fam="noir"] .reveal-item:not(.active) { transform: translateY(18px); filter: blur(9px); letter-spacing: .08em; }
#mainStage[data-fam="noir"] .reveal-item { transition-property: opacity, transform, filter, letter-spacing; transition-duration: 1s; }
#mainStage[data-fam="noir"] .reveal-item.active { filter: blur(0); letter-spacing: normal; }
#mainStage[data-fam="floral"] .reveal-item:not(.active) { transform: scale(.965); filter: blur(5px); }
#mainStage[data-fam="floral"] .reveal-item { transition-property: opacity, transform, filter; transition-duration: 1.05s; }
#mainStage[data-fam="floral"] .reveal-item.active { filter: blur(0); transform: scale(1); }
#mainStage[data-fam="destinasi"] .reveal-item:not(.active) { transform: translateX(-26px); }
#mainStage[data-fam="destinasi"] .reveal-item { transition-property: opacity, transform; transition-duration: .95s; }
#mainStage[data-fam="destinasi"] .reveal-item.active { transform: translateX(0); }
@media (prefers-reduced-motion: reduce) {
  #mainStage[data-fam] .reveal-item:not(.active) { transform: none; filter: none; clip-path: none; letter-spacing: normal; }
}

/* ==========================================================================
   FLOURISH PER TEMA: pita budaya, kartu Horja Batak, Intimate gelap hangat,
   sampul tipografis untuk tema minimalis
   ========================================================================== */
/* pita pembatas seksi — palet tenun/ukiran tiap budaya */
section.nc-band { position: relative; }
section.nc-band::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 5px; background: var(--nc-band, transparent); opacity: .92; pointer-events: none; }

/* kartu acara gaya Horja (Batak): band ulos + sudut gorga */
#mainStage.fl-batak section .reveal-item.rounded-2xl,
#mainStage.fl-batak .nc-cl-event,
#mainStage.fl-batak .nc-sa-event {
  position: relative; overflow: hidden;
}
#mainStage.fl-batak section .reveal-item.rounded-2xl::before,
#mainStage.fl-batak .nc-cl-event::before,
#mainStage.fl-batak .nc-sa-event::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 6px;
  background: repeating-linear-gradient(90deg,#7F1D1D 0 22px,#160B0B 22px 28px,#C0685D 28px 38px,#F59E0B 38px 44px,#FFFDF9 44px 46px);
}
#mainStage.fl-batak section .reveal-item.rounded-2xl::after,
#mainStage.fl-batak .nc-cl-event::after,
#mainStage.fl-batak .nc-sa-event::after {
  content: ''; position: absolute; bottom: 10px; right: 10px; width: 22px; height: 22px;
  border-right: 2px solid #F59E0B; border-bottom: 2px solid #C0685D; opacity: .8; pointer-events: none;
}
#mainStage.fl-batak h2, #mainStage.fl-batak h3 { letter-spacing: .01em; }

/* Intimate Candlelight Garden sebagai wajah Soft Arch: linen gelap hangat */
#mainStage.fl-intimate .nc-sa { background: #211C15; color: #F0E7D6; }
#mainStage.fl-intimate .nc-sa-kicker,
#mainStage.fl-intimate .nc-sa-sub,
#mainStage.fl-intimate .nc-sa-date,
#mainStage.fl-intimate .nc-sa-guest,
#mainStage.fl-intimate .nc-sa-greeting-sub,
#mainStage.fl-intimate .nc-sa-place,
#mainStage.fl-intimate .nc-sa-person p,
#mainStage.fl-intimate .nc-sa-parents { color: rgba(240,231,214,.72); }
#mainStage.fl-intimate .nc-sa-h2,
#mainStage.fl-intimate .nc-sa-event h3,
#mainStage.fl-intimate .nc-sa-person h3,
#mainStage.fl-intimate .nc-sa-story h3 { color: #F5EDDC; }
#mainStage.fl-intimate .nc-sa-event,
#mainStage.fl-intimate .nc-sa-story article { background: #2A241B; border: 1px solid rgba(217,164,65,.28); box-shadow: none; }
#mainStage.fl-intimate .nc-sa-chip { background: #C39A69; color: #211C15; }
#mainStage.fl-intimate .nc-sa-wave { color: #C39A69; opacity: .5; }
#mainStage.fl-intimate .nc-sa-frame,
#mainStage.fl-intimate .nc-sa-mini { border-color: #3A3226; box-shadow: 0 12px 34px rgba(0,0,0,.45); background: #2A241B; }
#mainStage.fl-intimate .nc-sa-story-img { background: #2A241B; }
#mainStage.fl-intimate .nc-sa-guest strong { color: #F5EDDC; }

/* sampul tipografis — untuk tema tanpa foto (minimalis) */
.ncv-type { background: #FAF7F1; color: #1F1B18; }
.ncv-type-in { text-align: center; padding: 48px 30px; max-width: 560px; }
.ncv-type-rule { display: block; width: 64px; height: 1px; margin: 22px auto; background: color-mix(in srgb, var(--sk, #8C7A66) 70%, transparent); }
.ncv-type-names { font-size: clamp(40px, 8.5vw, 66px); line-height: 1.04; font-weight: 500; }
.ncv-type-date { font-size: 11.5px; letter-spacing: .44em; text-indent: .44em; color: #8B7F73; }
.ncv-type-sub { margin-top: 26px; font-size: 10.5px; letter-spacing: .2em; text-transform: uppercase; color: #8B7F73; }
.ncv-type-guest { margin-top: 7px; font-size: 18px; font-weight: 600; }
.ncv-type-btn { background: var(--sk, #1F1B18); }
.ncv-type .ncv-kicker { color: #8B7F73; }

/* ---------- tema tanpa foto: sembunyikan bingkai foto & gambar kosong ---------- */
#mainStage.fl-nophoto .nc-cl-frame,
#mainStage.fl-nophoto .nc-sa-frame,
#mainStage.fl-nophoto .nc-sa-mini,
#mainStage.fl-nophoto .nc-sa-story-img,
#mainStage.fl-nophoto .nc-noir-frame { display: none; }
img[src=""] { visibility: hidden; }

/* ==========================================================================
   TRANSISI BERTEMA YANG TERLIHAT: kain penyibak seksi + keluar sampul
   ========================================================================== */
/* seksi ber-kain */
section.has-sweep { position: relative; }
section.has-sweep > .nc-sweep {
  position: absolute; inset: -2px; z-index: 6; pointer-events: none;
  transform: translateX(0); transition: none;
}
section.has-sweep.active > .nc-sweep {
  transform: translateX(104%) skewX(-6deg);
  transition: transform 1.15s cubic-bezier(.65,0,.35,1), opacity .45s ease .75s;
  opacity: 0;
}
/* kain adat: warna tema pekat (terasa seperti kain tenun disibak) */
#mainStage[data-fam="adat"] section.has-sweep > .nc-sweep {
  background:
    repeating-linear-gradient(90deg, color-mix(in srgb, var(--sk, #7A4E28) 88%, #140F0B) 0 46px, color-mix(in srgb, var(--sk, #7A4E28) 55%, #1A1410) 46px 58px),
    linear-gradient(112deg, color-mix(in srgb, var(--sk, #7A4E28) 85%, #140F0B), #140F0B);
}
/* kain floral/destinasi: selimut kertas terang yang lembut */
#mainStage[data-fam="floral"] section.has-sweep > .nc-sweep,
#mainStage[data-fam="destinasi"] section.has-sweep > .nc-sweep {
  background: linear-gradient(112deg, #FBF7F0 0%, #F4EDE1 55%, rgba(251,247,240,.25) 100%);
}

/* coverGate transition state — transparan agar panggung #mainStage langsung terlihat saat pintu/tirai/amplop terbuka */
#coverGate {
  height: calc(var(--vh, 1vh) * 100);
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  padding: 0 !important;
  perspective: 1800px;
  overflow: hidden;
  opacity: 1 !important;
  transition: none !important;
}
#coverGate.gate-open {
  opacity: 1 !important;
  pointer-events: none !important;
}
#coverGate.opacity-0 {
  opacity: 0 !important;
  pointer-events: none !important;
}
#coverGate.gate-open ~ #mainStage {
  animation: ncMainStagePush 1.45s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
@keyframes ncMainStagePush {
  0% { transform: scale(1.035); filter: brightness(0.88); }
  100% { transform: scale(1); filter: brightness(1); }
}

/* foto muncul dengan sapuan pada keluarga adat */
#mainStage[data-fam="adat"] .reveal-item img {
  transition: clip-path 1s cubic-bezier(.65,0,.35,1) .15s;
  clip-path: inset(0 0 0 0);
}
#mainStage[data-fam="adat"] .reveal-item:not(.active) img {
  clip-path: inset(0 100% 0 0);
}

/* garis pembatas tumbuh dari tengah saat seksi menyala */
#mainStage .reveal-item .h-px,
#mainStage .reveal-item .h-\[1px\] {
  transform: scaleX(0); transform-origin: center;
  transition: transform .9s cubic-bezier(.65,0,.35,1) .25s;
}
#mainStage .reveal-item.active .h-px,
#mainStage .reveal-item.active .h-\[1px\] { transform: scaleX(1); }

@media (prefers-reduced-motion: reduce) {
  .nc-sweep, #coverGate::after { display: none !important; }
  #mainStage[data-fam="adat"] .reveal-item img { transition: none; clip-path: none; }
  #mainStage .reveal-item .h-px, #mainStage .reveal-item .h-\[1px\] { transform: none; transition: none; }
  #coverGate.opacity-0 .ncv-scene-in, #coverGate.opacity-0 .ncv-scene-bg,
  #coverGate.opacity-0 .ncv-noir-in, #coverGate.opacity-0 .ncv-wc-in,
  #coverGate.opacity-0 .ncv-type-in { animation: none !important; }
}

/* ==========================================================================
   POLA REFERENSI: Ken Burns sampul, ornamen melayang berfase, foto
   ter-reveal zoom dari sudut — semua satu arah lembut, tanpa kilau murahan
   ========================================================================== */

/* 1) Ken Burns pada foto sampul scene — bernapas terus, sangat pelan */
.ncv-scene-bg {
  animation: ncCoverBg 2s ease both, ncKenburns 38s ease-in-out infinite alternate 2s;
}
@keyframes ncKenburns {
  0%   { transform: scale(1.08) translate(0, 0); }
  50%  { transform: scale(1.14) translate(-1.6%, 1%); }
  100% { transform: scale(1.09) translate(1.4%, -1.2%); }
}
#coverGate.opacity-0 .ncv-scene-bg { animation: ncExitBg 1.1s ease forwards !important; }

/* 2) ornamen sudut melayang/goyang — tiap tema punya fase sendiri (--od),
      elemen kanan-bawah sengaja terlambat agar tidak serempak (gaya
      Rumahundangan: fla/flb/flc/fld berbeda fase) */
#coverGate .anim-sway  { animation: ncOrnSway 9s ease-in-out infinite alternate; animation-delay: var(--od, 0s); }
#coverGate .anim-float { animation: ncOrnBob 6.5s ease-in-out infinite alternate; animation-delay: calc(var(--od, 0s) + .9s); }
.nc-sa-orn, .ncv-wc-orn { animation: ncOrnBob 7.5s ease-in-out infinite alternate; animation-delay: var(--od, 0s); }
.nc-sa-orn.br, .ncv-wc-orn.br { animation-name: ncOrnSway; animation-delay: calc(var(--od, 0s) + 1.8s); }
@keyframes ncOrnBob  { 0% { transform: translateY(0) rotate(0deg); } 100% { transform: translateY(-7px) rotate(-1.4deg); } }
@keyframes ncOrnSway { 0% { transform: rotate(0deg); } 100% { transform: rotate(2.2deg) translateY(-3px); } }

/* Micro-animations ornamen hidup gaya agung & alami (organik, tenang, tanpa jitter cepat) */
.anim-wayang-l { animation: ncWayangL 14s infinite alternate ease-in-out; transform-origin: bottom left; }
.anim-wayang-r { animation: ncWayangR 14s infinite alternate ease-in-out; transform-origin: bottom right; }
@keyframes ncWayangL { 0% { transform: rotate(0deg) translateY(0); } 100% { transform: rotate(-1.2deg) translateY(-2px); } }
@keyframes ncWayangR { 0% { transform: scaleX(-1) rotate(0deg) translateY(0); } 100% { transform: scaleX(-1) rotate(1.2deg) translateY(-2px); } }

.anim-bunga-a { animation: ncBungaA 16s infinite alternate ease-in-out; transform-origin: left top; }
.anim-bunga-b { animation: ncBungaB 18s infinite alternate ease-in-out; transform-origin: right top; }
@keyframes ncBungaA { 0% { transform: rotate(0deg) translateY(0); opacity: 0.85; } 100% { transform: rotate(0.6deg) translateY(-3px); opacity: 0.98; } }
@keyframes ncBungaB { 0% { transform: rotate(0deg) translateY(0); opacity: 0.85; } 100% { transform: rotate(-0.6deg) translateY(-3px); opacity: 0.98; } }

.anim-pulse-gentle { animation: ncPulseGentle 8s infinite ease-in-out; transform-origin: center; }
@keyframes ncPulseGentle { 0%, 100% { transform: scale(1); opacity: 0.92; } 50% { transform: scale(1.02); opacity: 1; } }

.anim-flower-spin { animation: ncFlowerSpin 20s infinite alternate ease-in-out; transform-origin: center; }
@keyframes ncFlowerSpin { 0% { transform: rotate(2deg) scale(1); } 100% { transform: rotate(-2deg) scale(1.015); } }

/* 3) foto ter-reveal zoom dari sudut pada keluarga floral/destinasi
      (zoom-top-left / zoom-bottom-right ala Rumahundangan) */
#mainStage[data-fam="floral"] .reveal-item img,
#mainStage[data-fam="destinasi"] .reveal-item img {
  transition: clip-path 1s cubic-bezier(.65,0,.35,1) .1s, transform 1.25s cubic-bezier(.22,1,.36,1) .1s;
  clip-path: inset(0 0 0 0); transform: scale(1);
}
#mainStage[data-fam="floral"] .reveal-item:not(.active) img {
  clip-path: inset(14% 0 0 14%); transform: scale(1.14); transform-origin: top left;
}
#mainStage[data-fam="destinasi"] .reveal-item:not(.active) img {
  clip-path: inset(0 14% 14% 0); transform: scale(1.12); transform-origin: bottom right;
}
#mainStage[data-fam="floral"] .reveal-item.active img,
#mainStage[data-fam="destinasi"] .reveal-item.active img { clip-path: inset(0); transform: scale(1); }

/* 4) tombol tumbuh halus saat disentuh (elementor-animation-grow ala referensi) */
.ncv-btn:hover, .nc-sa-map:hover, .nc-cl-map:hover { transform: scale(1.04); }

@media (prefers-reduced-motion: reduce) {
  .ncv-scene-bg { animation: none !important; }
  #coverGate .anim-sway, #coverGate .anim-float, .nc-sa-orn, .ncv-wc-orn, .anim-wayang-l, .anim-wayang-r, .anim-bunga-a, .anim-bunga-b, .anim-pulse-gentle, .anim-flower-spin { animation: none !important; }
  #mainStage[data-fam="floral"] .reveal-item img,
  #mainStage[data-fam="destinasi"] .reveal-item img { transition: none; clip-path: none; transform: none; }
}

/* ==========================================================================
   LAYOUT 10: BAB PER BAB — undangan sebagai rangkaian bab sinema
   ========================================================================== */
.nc-bab { position: relative; height: 100svh; min-height: 620px; overflow: hidden; }
.nc-bab-ch {
  position: absolute; inset: 0; padding: 84px 24px 96px; overflow-y: auto;
  display: flex; flex-direction: column; justify-content: center;
  opacity: 0; transform: translateY(7%);
  pointer-events: none;
  transition: opacity .65s ease, transform .75s cubic-bezier(.22,1,.36,1);
}
.nc-bab-ch::before {
  content: none;
}
.nc-bab-ch.is-cur { opacity: 1; transform: none; pointer-events: auto; }
.nc-bab-ch.is-done { transform: translateY(-7%); }
.nc-bab-ch.is-next { transform: translateY(7%); }
.nc-bab-in { position: relative; z-index: 1; max-width: 640px; margin: 0 auto; text-align: center; width: 100%; }
.nc-bab-in.nc-bab-wide { max-width: 900px; }
.nc-bab-kicker { font-size: 10.5px; letter-spacing: .42em; text-transform: uppercase; font-weight: 800; margin-bottom: 14px; color: var(--sk); text-shadow: 0 1px 4px rgba(0,0,0,0.15); }
.nc-bab-ch h1 { font-size: clamp(42px, 9vw, 76px); line-height: 1.02; font-weight: 700; color: var(--text, #1A140E); text-shadow: 0 2px 10px rgba(0,0,0,0.12); }
.nc-bab-ch h1 span { font-weight: 400; }
.nc-bab-dotted { margin-top: 16px; font-size: 12px; letter-spacing: .5em; text-indent: .5em; font-weight: 800; color: var(--sk); text-shadow: 0 1px 4px rgba(0,0,0,0.12); }
.nc-bab-guest { margin-top: 30px; font-size: 13.5px; opacity: .95; color: var(--text, #1A140E); }
.nc-bab-guest strong { font-size: 18px; font-weight: 800; color: var(--text, #1A140E); }
.nc-bab-label { font-size: 11px; letter-spacing: .4em; text-transform: uppercase; color: var(--sk); margin-bottom: 24px; font-weight: 800; text-shadow: 0 1px 4px rgba(0,0,0,0.15); }
.nc-bab-greet { font-size: 30px; line-height: 1.25; margin-bottom: 16px; color: var(--sk); text-shadow: 0 1px 6px rgba(0,0,0,0.12); }
.nc-bab-text { font-size: 14px; line-height: 1.9; font-weight: 500; max-width: 48ch; margin: 0 auto; color: var(--text, #1A140E); }
.nc-bab-count { margin-top: 30px; display: flex; justify-content: center; gap: 18px; font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--text, #1A140E); }
.nc-bab-count strong { display: block; font-family: "Playfair Display", serif; font-size: 28px; font-variant-numeric: tabular-nums; color: var(--sk); font-weight: 800; }
.nc-bab-couple { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; }
.nc-bab-frame { width: min(38vw, 180px); aspect-ratio: 3/4; margin: 0 auto 14px; border-radius: 999px 999px 14px 14px; overflow: hidden; border: 4px solid color-mix(in srgb, var(--sk) 45%, transparent); background: rgba(127,127,127,.08); box-shadow: 0 10px 28px rgba(0,0,0,0.2); }
.nc-bab-frame img { width: 100%; height: 100%; object-fit: cover; }
.nc-bab-couple h3 { font-family: "Playfair Display", serif; font-size: 24px; font-weight: 700; color: var(--text, #1A140E); }
.nc-bab-couple p { margin-top: 5px; font-size: 12px; color: var(--text, #1A140E); opacity: .88; }
.nc-bab-parents { margin-top: 8px; line-height: 1.7; color: var(--muted, #4A3E34); opacity: .85; }
.nc-bab-event {
  max-width: 480px; margin: 0 auto 18px; padding: 28px 24px; border-radius: 20px;
  background: rgba(255, 255, 255, 0.96) !important;
  backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px);
  border: 1.5px solid color-mix(in srgb, var(--sk, #A6603A) 45%, rgba(0,0,0,0.1));
  box-shadow: 0 18px 45px rgba(0,0,0,0.22);
  position: relative; z-index: 2;
  color: #1A140E !important;
}
.nc-bab-event h3 { font-family: "Playfair Display", serif; font-size: 24px; font-weight: 800; color: #1A140E !important; }
.nc-bab[data-dark="true"] .nc-bab-event {
  background: rgba(22, 17, 13, 0.95) !important;
  border-color: color-mix(in srgb, var(--sk, #D4AF37) 45%, transparent);
  color: #FAF7F2 !important;
}
.nc-bab[data-dark="true"] .nc-bab-event h3 { color: #FAF7F2 !important; }
.nc-bab[data-dark="true"] .nc-bab-place { color: #D2C5B5 !important; }
.nc-bab-date { margin-top: 8px; font-size: 12px; letter-spacing: .34em; color: var(--sk); font-weight: 800; }
.nc-bab-place { margin-top: 8px; font-size: 13.5px; opacity: .95; line-height: 1.65; color: var(--text, #1A140E) !important; font-weight: 600; }
.nc-bab-map { display: inline-block; margin-top: 14px; font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--sk) !important; font-weight: 800; background: color-mix(in srgb, var(--sk) 14%, transparent); border: 1px solid color-mix(in srgb, var(--sk) 40%, transparent); border-radius: 999px; padding: 6px 18px; transition: transform .2s ease; }
.nc-bab-map:hover { transform: scale(1.05); }
.nc-bab-gallery { columns: 2; column-gap: 12px; }
.nc-bab-gallery img { width: 100%; margin-bottom: 12px; border-radius: 10px; cursor: zoom-in; }
.nc-bab-nav {
  position: fixed; right: 18px; top: 50%; transform: translateY(-50%); z-index: 45;
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  background: rgba(20, 16, 12, 0.65); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  padding: 12px 7px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 10px 30px rgba(0,0,0,0.35);
}
.nc-bab-nav > button {
  width: 36px; height: 36px; border-radius: 999px; display: flex; align-items: center; justify-content: center;
  background: var(--sk); color: #FBF7F0; border: none; cursor: pointer;
  transition: transform .2s ease, filter .2s ease;
}
.nc-bab-nav > button:hover { transform: scale(1.12); filter: brightness(1.15); }
.nc-bab-dots { display: flex; flex-direction: column; gap: 7px; }
.nc-bab-dot { width: 7px; height: 7px; border-radius: 999px; border: none; padding: 0; cursor: pointer; background: color-mix(in srgb, var(--sk) 40%, transparent); transition: transform .25s ease, background .25s ease; }
.nc-bab-dot.on { background: #FAF7F2; transform: scale(1.45); box-shadow: 0 0 6px rgba(255,255,255,0.8); }
@media (max-width: 640px) { .nc-bab-couple { grid-template-columns: 1fr; gap: 28px; } }
@media (prefers-reduced-motion: reduce) {
  .nc-bab-ch { transition: opacity .3s ease; transform: none !important; }
}

/* ==========================================================================
   CHOREOGRAFI GERBANG FISIK MULTI-PART PER BUDAYA (10 TRANSISI NYATA)
   - #coverGate transparan agar #mainStage langsung terlihat sejak t = 0ms
   - Tiap transisi menggerakkan panel fisik terpisah (pintu gebyok 3D, gunungan
     kembar, amplop segel lilin 3D, tirai sutra berpelmet, kain ulos diagonal,
     songket emas bersilang, 4 pita tapis, gerbang candi bentar, lensa cincin
     emas, kabut taman 3 lapis)
   ========================================================================== */
#coverGate::after { content: none !important; animation: none !important; }

.nc-gate-stage {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  perspective: 1800px;
  transform-style: preserve-3d;
}

.nc-gate-mech {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  perspective: 1800px;
  transform-style: preserve-3d;
}

/* Latar fotografi budaya asli pada tiap panel gerbang */
.nc-gp-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: contrast(1.06) saturate(1.08);
  transform: scale(1.04);
  transition: transform 1.5s ease;
}
.nc-gp-scrim {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at center,
    color-mix(in srgb, var(--bg, #18120D) 52%, rgba(12,9,6,0.45)) 0%,
    color-mix(in srgb, var(--bg, #18120D) 82%, rgba(10,7,5,0.85)) 100%);
}
.nc-gate-stage[data-dark="false"] .nc-gp-scrim {
  background: radial-gradient(ellipse at center,
    color-mix(in srgb, var(--bg, #FAF6EE) 64%, rgba(25,18,12,0.18)) 0%,
    color-mix(in srgb, var(--bg, #FAF6EE) 86%, rgba(25,18,12,0.42)) 100%);
}
.nc-gp-grain {
  position: absolute;
  inset: 0;
  opacity: 0.16;
  mix-blend-mode: overlay;
}

/* Kartu Undangan Utama di Tengah Gerbang */
.nc-gate-card {
  position: relative;
  z-index: 10;
  width: min(90vw, 430px);
  padding: 28px 26px 24px;
  border-radius: 34px;
  text-align: center;
  background: linear-gradient(165deg, rgba(24, 18, 13, 0.86) 0%, rgba(15, 11, 8, 0.92) 100%);
  border: 1.5px solid color-mix(in srgb, var(--sk, #D4AF37) 58%, rgba(255,255,255,0.18));
  box-shadow: 0 28px 70px rgba(0, 0, 0, 0.65), inset 0 0 0 1px rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  color: #FAF6EE;
  overflow: hidden;
  transition: transform 0.65s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.55s ease;
}
.nc-gate-stage[data-dark="false"] .nc-gate-card {
  background: linear-gradient(165deg, rgba(253, 249, 242, 0.92) 0%, rgba(245, 237, 224, 0.95) 100%);
  color: #231B14;
  box-shadow: 0 26px 65px rgba(32, 22, 12, 0.28), inset 0 0 0 1px rgba(255, 255, 255, 0.6);
}
.nc-gc-corner {
  position: absolute;
  width: 84px;
  height: 84px;
  pointer-events: none;
  opacity: 0.78;
}
.nc-gc-corner.tl { top: -4px; left: -4px; }
.nc-gc-corner.br { bottom: -4px; right: -4px; transform: rotate(180deg); }
.nc-gc-sym {
  width: 52px;
  height: 62px;
  margin: 0 auto 6px;
}
.nc-gc-badge {
  display: inline-block;
  padding: 4px 14px;
  border-radius: 999px;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  border: 1px solid color-mix(in srgb, var(--sk, #D4AF37) 50%, transparent);
  background: color-mix(in srgb, var(--sk, #D4AF37) 15%, transparent);
  color: var(--sk, #D4AF37);
  margin-bottom: 6px;
}
.nc-gate-stage[data-dark="true"] .nc-gc-badge {
  color: #F5D77F;
}
.nc-gc-kicker {
  font-size: 10px;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  opacity: 0.78;
  margin-bottom: 10px;
}
.nc-gc-portrait {
  width: 112px;
  height: 142px;
  margin: 0 auto 12px;
  border-radius: 999px 999px 18px 18px;
  padding: 4px;
  border: 2px solid var(--sk, #D4AF37);
  background: rgba(0, 0, 0, 0.25);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.38);
  overflow: hidden;
}
.nc-gc-portrait img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 999px 999px 14px 14px;
}
.nc-gc-names {
  font-size: clamp(26px, 5vw, 35px);
  font-weight: 700;
  line-height: 1.12;
  color: inherit;
}
.nc-gc-amp {
  font-weight: 400;
  color: var(--sk, #D4AF37);
  padding: 0 3px;
}
.nc-gc-date {
  font-size: 11px;
  letter-spacing: 0.36em;
  text-transform: uppercase;
  opacity: 0.85;
  margin-top: 6px;
  font-weight: 700;
}
.nc-gc-guestbox {
  margin: 14px 0;
  padding: 11px 16px;
  border-radius: 16px;
  background: rgba(0, 0, 0, 0.24);
  border: 1px solid color-mix(in srgb, var(--sk, #D4AF37) 35%, transparent);
}
.nc-gate-stage[data-dark="false"] .nc-gc-guestbox {
  background: rgba(255, 255, 255, 0.65);
}
.nc-gc-to {
  font-size: 10.5px;
  opacity: 0.78;
  margin-bottom: 2px;
}
.nc-gc-guest {
  font-size: 16.5px;
  font-weight: 800;
  color: var(--sk, #D4AF37);
}
.nc-gate-stage[data-dark="true"] .nc-gc-guest {
  color: #F7DC88;
}
.nc-gc-btn {
  width: 100%;
  padding: 13px 22px;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--sk, #D4AF37), color-mix(in srgb, var(--sk, #D4AF37) 78%, #000));
  color: #FFFDF9 !important;
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  border: 1px solid rgba(255, 255, 255, 0.28);
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.35);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  cursor: pointer;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.nc-gc-btn:hover {
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 14px 32px rgba(0, 0, 0, 0.45);
}
.nc-gc-tr-tag {
  display: block;
  margin-top: 9px;
  font-size: 9px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  opacity: 0.62;
}

/* Saat tombol Buka Undangan ditekan: Kartu Tengah terangkat & memudar elegan */
:is(#coverGate.gate-open, #coverGate.opacity-0) .nc-gate-stage:not([data-tr="iris"]) .nc-gate-card {
  animation: ncCardLiftExit 1.15s cubic-bezier(0.35, 0, 0.2, 1) forwards;
}
@keyframes ncCardLiftExit {
  0%   { transform: translateY(0) scale(1); opacity: 1; }
  45%  { transform: translateY(-16px) scale(1.03); opacity: 0.92; }
  100% { transform: translateY(-54px) scale(0.94); opacity: 0; }
}

/* ==========================================================================
   1. GUNUNGAN — Gunungan Wayang Kembar Menyibak Kiri & Kanan (Kraton Jawa)
   ========================================================================== */
.nc-mech-gunungan .nc-g-wing {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 50.5%;
  overflow: hidden;
  box-shadow: 0 0 60px rgba(0, 0, 0, 0.82);
  will-change: transform;
}
.nc-mech-gunungan .nc-g-left {
  left: 0;
  border-right: 3px solid color-mix(in srgb, var(--sk, #D4AF37) 85%, #fff);
}
.nc-mech-gunungan .nc-g-right {
  right: 0;
  border-left: 3px solid color-mix(in srgb, var(--sk, #D4AF37) 85%, #fff);
}
.nc-mech-gunungan .nc-g-seam-border {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 18px;
  background: repeating-linear-gradient(180deg,
    var(--sk, #D4AF37) 0px,
    var(--sk, #D4AF37) 10px,
    rgba(20, 14, 9, 0.9) 10px,
    rgba(20, 14, 9, 0.9) 20px);
  opacity: 0.88;
  z-index: 3;
}
.nc-g-left .nc-g-seam-border { right: 0; }
.nc-g-right .nc-g-seam-border { left: 0; }
.nc-mech-gunungan .nc-g-kayon {
  position: absolute;
  bottom: -2%;
  height: min(86vh, 720px);
  width: auto;
  object-fit: contain;
  filter: drop-shadow(0 18px 38px rgba(0, 0, 0, 0.85)) brightness(1.12);
  opacity: 0.96;
  z-index: 4;
}
.nc-mech-gunungan .nc-g-kayon-l {
  right: 14px;
  transform-origin: bottom center;
}
.nc-mech-gunungan .nc-g-kayon-r {
  left: 14px;
  transform: scaleX(-1);
  transform-origin: bottom center;
}
.nc-mech-gunungan .nc-g-corner {
  position: absolute;
  width: 120px;
  height: 120px;
  opacity: 0.82;
  z-index: 3;
}
.nc-mech-gunungan .nc-g-corner.tl { top: 12px; left: 12px; }
.nc-mech-gunungan .nc-g-corner.bl { bottom: 12px; left: 12px; transform: scaleY(-1); }
.nc-mech-gunungan .nc-g-corner.tr { top: 12px; right: 12px; transform: scaleX(-1); }
.nc-mech-gunungan .nc-g-corner.br { bottom: 12px; right: 12px; transform: rotate(180deg); }

:is(#coverGate.gate-open, #coverGate.opacity-0) .nc-mech-gunungan .nc-g-left {
  animation: ncGununganOpenL 2.1s cubic-bezier(0.35, 0, 0.2, 1) forwards;
}
:is(#coverGate.gate-open, #coverGate.opacity-0) .nc-mech-gunungan .nc-g-right {
  animation: ncGununganOpenR 2.1s cubic-bezier(0.35, 0, 0.2, 1) forwards;
}
@keyframes ncGununganOpenL {
  0%   { transform: translate3d(0, 0, 0) rotate(0deg); }
  45%  { transform: translate3d(-38%, -2%, 0) rotate(-3.5deg); }
  100% { transform: translate3d(-106%, -5%, 0) rotate(-7deg); }
}
@keyframes ncGununganOpenR {
  0%   { transform: translate3d(0, 0, 0) rotate(0deg); }
  45%  { transform: translate3d(38%, -2%, 0) rotate(3.5deg); }
  100% { transform: translate3d(106%, -5%, 0) rotate(7deg); }
}

/* ==========================================================================
   2. GEBYOK — Pintu Gebyok Kayu Ukir 3D (Ayun Engsel Kiri & Kanan)
   ========================================================================== */
.nc-mech-gebyok {
  perspective: 1800px;
  transform-style: preserve-3d;
}
.nc-gebyok-lintel {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 68px;
  z-index: 5;
  background: linear-gradient(180deg, #2A1A10 0%, #3E2718 65%, #1F120A 100%);
  border-bottom: 3px solid var(--sk, #D4AF37);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.75);
  display: flex;
  align-items: center;
  justify-content: center;
}
.nc-gebyok-door {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 50.3%;
  overflow: hidden;
  transform-style: preserve-3d;
  backface-visibility: hidden;
  box-shadow: 0 0 60px rgba(0, 0, 0, 0.85);
}
.nc-gebyok-door.nc-door-l {
  left: 0;
  transform-origin: left center;
  border-right: 3px solid var(--sk, #D4AF37);
}
.nc-gebyok-door.nc-door-r {
  right: 0;
  transform-origin: right center;
  border-left: 3px solid var(--sk, #D4AF37);
}
.nc-door-wood {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(46, 27, 15, 0.74) 0%, rgba(72, 43, 24, 0.56) 50%, rgba(38, 22, 12, 0.78) 100%),
    repeating-linear-gradient(90deg, rgba(255,215,130,0.03) 0px, rgba(255,215,130,0.03) 3px, rgba(0,0,0,0.08) 3px, rgba(0,0,0,0.08) 9px);
}
.nc-door-frame {
  position: absolute;
  inset: 78px 22px 26px 22px;
  border: 2px solid color-mix(in srgb, var(--sk, #D4AF37) 65%, transparent);
  border-radius: 14px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 18px;
  box-shadow: inset 0 0 30px rgba(0, 0, 0, 0.65);
}
.nc-door-coffer {
  flex: 1;
  margin: 10px 6px;
  border: 1.5px solid color-mix(in srgb, var(--sk, #D4AF37) 42%, transparent);
  border-radius: 8px;
  background: rgba(20, 12, 7, 0.36);
  box-shadow: inset 0 4px 18px rgba(0, 0, 0, 0.6);
}
.nc-door-ukir {
  position: absolute;
  width: 96px;
  height: 96px;
  opacity: 0.85;
}
.nc-door-ukir.tl { top: 4px; left: 4px; }
.nc-door-ukir.bl { bottom: 4px; left: 4px; transform: scaleY(-1); }
.nc-door-ukir.tr { top: 4px; right: 4px; transform: scaleX(-1); }
.nc-door-ukir.br { bottom: 4px; right: 4px; transform: rotate(180deg); }
.nc-door-handle {
  position: absolute;
  top: 50%;
  width: 28px;
  height: 76px;
  margin-top: -38px;
  border-radius: 999px;
  background: linear-gradient(180deg, #F7DC88, #B8860B, #F7DC88);
  border: 2px solid #FFF8DC;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.75);
  display: flex;
  align-items: center;
  justify-content: center;
}
.nc-door-handle i {
  width: 18px;
  height: 18px;
  border-radius: 999px;
  border: 3px solid #3A2312;
}
.nc-handle-l { right: 12px; }
.nc-handle-r { left: 12px; }

:is(#coverGate.gate-open, #coverGate.opacity-0) .nc-mech-gebyok .nc-door-l {
  animation: ncGebyokSwingL 2.1s cubic-bezier(0.35, 0, 0.2, 1) forwards;
}
:is(#coverGate.gate-open, #coverGate.opacity-0) .nc-mech-gebyok .nc-door-r {
  animation: ncGebyokSwingR 2.1s cubic-bezier(0.35, 0, 0.2, 1) forwards;
}
:is(#coverGate.gate-open, #coverGate.opacity-0) .nc-mech-gebyok .nc-gebyok-lintel {
  animation: ncLintelUp 1.85s cubic-bezier(0.35, 0, 0.2, 1) 0.2s forwards;
}
@keyframes ncGebyokSwingL {
  0%   { transform: rotateY(0deg); filter: brightness(1); }
  45%  { transform: rotateY(-48deg); filter: brightness(0.82); }
  100% { transform: rotateY(-86deg); filter: brightness(0.65); }
}
@keyframes ncGebyokSwingR {
  0%   { transform: rotateY(0deg); filter: brightness(1); }
  45%  { transform: rotateY(48deg); filter: brightness(0.82); }
  100% { transform: rotateY(86deg); filter: brightness(0.65); }
}
@keyframes ncLintelUp {
  0%   { transform: translateY(0); opacity: 1; }
  100% { transform: translateY(-120%); opacity: 0; }
}

/* ==========================================================================
   3. IRIS — Amplop Segel Lilin Emas 3D (Royal Wax Seal Envelope)
   ========================================================================== */
.nc-mech-iris .nc-env-wing {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 51%;
  overflow: hidden;
}
.nc-mech-iris .nc-env-wing-l { left: 0; }
.nc-mech-iris .nc-env-wing-r { right: 0; }
.nc-mech-iris .nc-env-backdrop {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  perspective: 1600px;
}
.nc-mech-iris .nc-env-shell {
  position: relative;
  width: min(94vw, 520px);
  height: min(86vh, 650px);
  border-radius: 24px;
  transform-style: preserve-3d;
  box-shadow: 0 32px 80px rgba(0, 0, 0, 0.72);
}
.nc-mech-iris .nc-env-back {
  position: absolute;
  inset: 0;
  border-radius: 24px;
  background: linear-gradient(160deg, #2B2017 0%, #1A130D 100%);
  border: 2px solid color-mix(in srgb, var(--sk, #D4AF37) 65%, transparent);
}
/* Kantong amplop bawah & samping (di atas kartu sedikit di bagian tepi) */
.nc-mech-iris .nc-env-pocket {
  position: absolute;
  inset: 0;
  border-radius: 24px;
  background:
    linear-gradient(32deg, rgba(38, 28, 19, 0.96) 0%, rgba(52, 38, 26, 0.94) 44%, transparent 44.5%),
    linear-gradient(-32deg, rgba(38, 28, 19, 0.96) 0%, rgba(52, 38, 26, 0.94) 44%, transparent 44.5%),
    linear-gradient(0deg, rgba(32, 23, 15, 0.98) 0%, rgba(48, 35, 24, 0.95) 38%, transparent 38.5%);
  border-bottom: 3px solid var(--sk, #D4AF37);
  pointer-events: none;
  z-index: 12;
}
/* Lidah Penutup Amplop Segitiga Atas (Flap 3D) */
.nc-mech-iris .nc-env-flap {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 54%;
  background: linear-gradient(180deg, #3D2D20 0%, #261B12 100%);
  clip-path: polygon(0 0, 100% 0, 50% 94%);
  transform-origin: top center;
  transform-style: preserve-3d;
  border-top: 2.5px solid var(--sk, #D4AF37);
  filter: drop-shadow(0 14px 24px rgba(0, 0, 0, 0.65));
  z-index: 14;
}
.nc-mech-iris .nc-env-flap-lining {
  position: absolute;
  inset: 6px 14px 16px 14px;
  clip-path: polygon(0 0, 100% 0, 50% 92%);
  border-top: 1px dashed color-mix(in srgb, var(--sk, #D4AF37) 65%, transparent);
  background: radial-gradient(circle at 50% 30%, color-mix(in srgb, var(--sk, #D4AF37) 25%, transparent), transparent 70%);
}
/* Segel Lilin Emas 3D (Embossed Royal Wax Seal) */
.nc-mech-iris .nc-wax-seal {
  position: absolute;
  top: 48%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 88px;
  height: 88px;
  border-radius: 999px;
  background: radial-gradient(circle at 35% 30%, #FFF2B2 0%, #E6B84C 35%, #AA771C 72%, #6E480B 100%);
  border: 3px solid #FCE8A6;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.7), inset 0 2px 8px rgba(255, 255, 255, 0.65), inset 0 -4px 10px rgba(68, 40, 4, 0.8);
  z-index: 25;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  pointer-events: auto;
  animation: ncWaxPulse 3s ease-in-out infinite;
}
@keyframes ncWaxPulse {
  0%, 100% { transform: translate(-50%, -50%) scale(1); }
  50%      { transform: translate(-50%, -50%) scale(1.05); }
}
.nc-mech-iris .nc-wax-ring {
  width: 70px;
  height: 70px;
  border-radius: 999px;
  border: 1.5px dashed #5C3A06;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #3D2502;
  text-shadow: 0 1px 0 rgba(255, 240, 190, 0.6);
}
.nc-mech-iris .nc-wax-mono {
  font-family: "Playfair Display", serif;
  font-size: 19px;
  font-weight: 900;
  line-height: 1;
}
.nc-mech-iris .nc-wax-mono span {
  font-size: 13px;
  padding: 0 1px;
}
.nc-mech-iris .nc-wax-sub {
  font-size: 6.5px;
  letter-spacing: 0.22em;
  font-weight: 800;
  margin-top: 2px;
}

/* Choreografi Buka Amplop Segel Lilin 3D */
:is(#coverGate.gate-open, #coverGate.opacity-0) .nc-mech-iris .nc-wax-seal {
  animation: ncWaxBreak 0.65s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}
:is(#coverGate.gate-open, #coverGate.opacity-0) .nc-mech-iris .nc-env-flap {
  animation: ncFlapOpen3D 0.95s cubic-bezier(0.4, 0, 0.2, 1) 0.18s forwards;
}
:is(#coverGate.gate-open, #coverGate.opacity-0) .nc-gate-stage[data-tr="iris"] .nc-gate-card {
  animation: ncLetterRise 1.75s cubic-bezier(0.22, 1, 0.36, 1) 0.42s forwards;
}
:is(#coverGate.gate-open, #coverGate.opacity-0) .nc-mech-iris .nc-env-shell {
  animation: ncEnvShellDrop 1.25s cubic-bezier(0.45, 0, 0.2, 1) 0.85s forwards;
}
:is(#coverGate.gate-open, #coverGate.opacity-0) .nc-mech-iris .nc-env-wing-l {
  animation: ncGununganOpenL 1.65s cubic-bezier(0.35, 0, 0.2, 1) 0.45s forwards;
}
:is(#coverGate.gate-open, #coverGate.opacity-0) .nc-mech-iris .nc-env-wing-r {
  animation: ncGununganOpenR 1.65s cubic-bezier(0.35, 0, 0.2, 1) 0.45s forwards;
}
@keyframes ncWaxBreak {
  0%   { transform: translate(-50%, -50%) scale(1); opacity: 1; }
  45%  { transform: translate(-50%, -50%) scale(1.25) rotate(12deg); opacity: 0.95; filter: brightness(1.35); }
  100% { transform: translate(-50%, -50%) scale(0.3) rotate(25deg); opacity: 0; }
}
@keyframes ncFlapOpen3D {
  0%   { transform: rotateX(0deg); z-index: 14; }
  100% { transform: rotateX(180deg); z-index: 1; opacity: 0.35; }
}
@keyframes ncLetterRise {
  0%   { transform: translateY(0) scale(1); opacity: 1; }
  48%  { transform: translateY(-22%) scale(1.05); opacity: 1; box-shadow: 0 36px 90px rgba(0,0,0,0.75); }
  100% { transform: translateY(-75%) scale(0.95); opacity: 0; }
}
@keyframes ncEnvShellDrop {
  0%   { transform: translateY(0) scale(1); opacity: 1; }
  100% { transform: translateY(55%) scale(0.88); opacity: 0; }
}

/* ==========================================================================
   4. TIRAI — Tirai Sutra Royal & Pelmet Mahkota (Menyibak Melengkung Kiri-Kanan)
   ========================================================================== */
.nc-mech-tirai .nc-curtain-valance {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 78px;
  z-index: 6;
  background:
    radial-gradient(circle at 50% 0%, color-mix(in srgb, var(--sk, #D4AF37) 40%, #24160E), #170E09 80%);
  border-bottom: 4px solid var(--sk, #D4AF37);
  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.72);
}
.nc-mech-tirai .nc-valance-trim {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -12px;
  height: 12px;
  background: repeating-radial-gradient(circle at 12px 0, var(--sk, #D4AF37) 0, var(--sk, #D4AF37) 8px, transparent 9px, transparent 24px);
}
.nc-mech-tirai .nc-curtain-wing {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 51.5%;
  overflow: hidden;
  box-shadow: 0 0 55px rgba(0, 0, 0, 0.8);
}
.nc-mech-tirai .nc-curtain-l {
  left: 0;
  transform-origin: top left;
  border-right: 3px solid var(--sk, #D4AF37);
}
.nc-mech-tirai .nc-curtain-r {
  right: 0;
  transform-origin: top right;
  border-left: 3px solid var(--sk, #D4AF37);
}
/* Efek lipatan kain beludru/sutra vertikal */
.nc-mech-tirai .nc-curtain-pleats {
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(90deg,
    rgba(0, 0, 0, 0.42) 0px,
    rgba(255, 255, 255, 0.08) 28px,
    rgba(0, 0, 0, 0.48) 56px,
    rgba(212, 175, 55, 0.10) 84px);
  pointer-events: none;
}
.nc-mech-tirai .nc-curtain-tassel {
  position: absolute;
  top: 52%;
  width: 22px;
  height: 92px;
  border-radius: 12px;
  background: linear-gradient(180deg, #FCE8A6 0%, #D4AF37 50%, #9A6F18 100%);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.65);
}
.nc-curtain-l .nc-curtain-tassel { right: 16px; }
.nc-curtain-r .nc-curtain-tassel { left: 16px; }

:is(#coverGate.gate-open, #coverGate.opacity-0) .nc-mech-tirai .nc-curtain-l {
  animation: ncCurtainSweepL 2.1s cubic-bezier(0.35, 0, 0.2, 1) forwards;
}
:is(#coverGate.gate-open, #coverGate.opacity-0) .nc-mech-tirai .nc-curtain-r {
  animation: ncCurtainSweepR 2.1s cubic-bezier(0.35, 0, 0.2, 1) forwards;
}
:is(#coverGate.gate-open, #coverGate.opacity-0) .nc-mech-tirai .nc-curtain-valance {
  animation: ncLintelUp 1.85s cubic-bezier(0.35, 0, 0.2, 1) 0.28s forwards;
}
@keyframes ncCurtainSweepL {
  0%   { transform: translate3d(0, 0, 0) scaleX(1) rotate(0deg); border-bottom-right-radius: 0; }
  45%  { transform: translate3d(-36%, -4%, 0) scaleX(0.76) rotate(-5deg); border-bottom-right-radius: 180px; }
  100% { transform: translate3d(-98%, -12%, 0) scaleX(0.45) rotate(-9deg); border-bottom-right-radius: 260px; }
}
@keyframes ncCurtainSweepR {
  0%   { transform: translate3d(0, 0, 0) scaleX(1) rotate(0deg); border-bottom-left-radius: 0; }
  45%  { transform: translate3d(36%, -4%, 0) scaleX(0.76) rotate(5deg); border-bottom-left-radius: 180px; }
  100% { transform: translate3d(98%, -12%, 0) scaleX(0.45) rotate(9deg); border-bottom-left-radius: 260px; }
}

/* ==========================================================================
   5. ULOS — Kain Ulos Sakral (Sibak Diagonal Atas-Kiri & Bawah-Kanan)
   ========================================================================== */
/* Fisika kain: kamera 3D + bayangan proyeksi dinamis (ilusi lipatan) */
.nc-mech-ulos {
  perspective: 1200px;
  perspective-origin: 50% 46%;
}
.nc-mech-ulos .nc-ulos-panel {
  position: absolute;
  inset: 0;
  overflow: hidden;
  box-shadow: 0 0 65px rgba(0, 0, 0, 0.9);
  transform-style: preserve-3d;
  will-change: transform, filter;
}
/* Kilau benang emas yang berjalan mengikuti lipatan kain */
.nc-mech-ulos .nc-ulos-panel::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(115deg,
    rgba(245, 222, 130, 0) 30%,
    rgba(245, 222, 130, 0.16) 44%,
    rgba(255, 240, 190, 0.30) 50%,
    rgba(245, 222, 130, 0.16) 56%,
    rgba(245, 222, 130, 0) 70%);
  mix-blend-mode: screen;
  opacity: 0;
}
.nc-mech-ulos .nc-ulos-top,
.nc-mech-ulos .u-top {
  clip-path: polygon(0 0, 100% 0, 100% 24%, 0 84%);
}
.nc-mech-ulos .nc-ulos-bot,
.nc-mech-ulos .u-bot {
  clip-path: polygon(100% 16%, 100% 100%, 0 100%, 0 76%);
}
.nc-mech-ulos .nc-ulos-weave {
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(-28deg,
      rgba(155, 22, 22, 0.38) 0px,
      rgba(155, 22, 22, 0.38) 18px,
      rgba(232, 190, 74, 0.42) 18px,
      rgba(232, 190, 74, 0.42) 24px,
      rgba(18, 12, 9, 0.48) 24px,
      rgba(18, 12, 9, 0.48) 42px,
      rgba(245, 236, 218, 0.18) 42px,
      rgba(245, 236, 218, 0.18) 46px);
}
.nc-mech-ulos .nc-ulos-border {
  position: absolute;
  inset: 14px;
  border: 4px solid #E5B94B;
  box-shadow: inset 0 0 0 4px rgba(155, 22, 22, 0.75);
  opacity: 0.88;
}
:is(#coverGate.gate-open, #coverGate.opacity-0) .nc-mech-ulos :is(.nc-ulos-top, .u-top) {
  animation: ncUlosPartTop 2.1s cubic-bezier(0.35, 0, 0.2, 1) forwards;
}
:is(#coverGate.gate-open, #coverGate.opacity-0) .nc-mech-ulos :is(.nc-ulos-bot, .u-bot) {
  animation: ncUlosPartBot 2.1s cubic-bezier(0.35, 0, 0.2, 1) forwards;
}
@keyframes ncUlosPartTop {
  0%   { transform: translate3d(0, 0, 0) rotate3d(1, 0.4, 0, 0deg); filter: drop-shadow(0 0 22px rgba(0, 0, 0, 0.85)); }
  25%  { transform: translate3d(-12%, -13%, 0) rotate3d(1, 0.4, 0, 7deg);  filter: drop-shadow(14px 18px 26px rgba(0, 0, 0, 0.62)); }
  45%  { transform: translate3d(-34%, -32%, 0) rotate3d(1, 0.4, 0, -6deg); filter: drop-shadow(-10px 22px 30px rgba(0, 0, 0, 0.55)); }
  100% { transform: translate3d(-102%, -96%, 0) rotate3d(1, 0.4, 0, -14deg); filter: drop-shadow(-26px 30px 36px rgba(0, 0, 0, 0.32)); }
}
@keyframes ncUlosPartBot {
  0%   { transform: translate3d(0, 0, 0) rotate3d(1, 0.4, 0, 0deg); filter: drop-shadow(0 0 22px rgba(0, 0, 0, 0.85)); }
  25%  { transform: translate3d(12%, 13%, 0) rotate3d(1, 0.4, 0, 7deg);  filter: drop-shadow(-14px -18px 26px rgba(0, 0, 0, 0.62)); }
  45%  { transform: translate3d(34%, 32%, 0) rotate3d(1, 0.4, 0, -6deg); filter: drop-shadow(10px -22px 30px rgba(0, 0, 0, 0.55)); }
  100% { transform: translate3d(102%, 96%, 0) rotate3d(1, 0.4, 0, -14deg); filter: drop-shadow(26px -30px 36px rgba(0, 0, 0, 0.32)); }
}
/* Sheen emas menyapu bersamaan dengan sapuan kain */
:is(#coverGate.gate-open, #coverGate.opacity-0) .nc-mech-ulos .nc-ulos-panel::after {
  animation: ncUlosSheen 2.1s cubic-bezier(0.35, 0, 0.2, 1) forwards;
}
@keyframes ncUlosSheen {
  0%   { opacity: 0; transform: translate3d(0, 0, 0) rotate3d(0, 0, 1, 0deg); }
  30%  { opacity: 1; transform: translate3d(-6%, -6%, 0) rotate3d(0, 0, 1, -3deg); }
  70%  { opacity: 0.85; transform: translate3d(4%, 4%, 0) rotate3d(0, 0, 1, 2deg); }
  100% { opacity: 0; transform: translate3d(0, 0, 0) rotate3d(0, 0, 1, 0deg); }
}

/* ==========================================================================
   6. SONGKET — Kain Songket Emas Lepus (Sapuan Silang Kembar Kiri-Kanan)
   ========================================================================== */
/* Fisika kain: kamera 3D — sapuan silang terasa melipat ke arah kamera */
.nc-mech-songket {
  perspective: 1100px;
  perspective-origin: 50% 40%;
}
.nc-mech-songket .nc-songket-drape {
  position: absolute;
  top: -6%;
  bottom: -6%;
  width: 60%;
  overflow: hidden;
  box-shadow: 0 0 65px rgba(0, 0, 0, 0.88);
  transform-style: preserve-3d;
  will-change: transform, filter;
}
/* Kilau lipatan: pita cahaya emas melintang di tubuh kain */
.nc-mech-songket .nc-songket-drape::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(105deg,
    rgba(255, 236, 180, 0) 36%,
    rgba(255, 236, 180, 0.14) 46%,
    rgba(255, 244, 205, 0.30) 50%,
    rgba(255, 236, 180, 0.14) 54%,
    rgba(255, 236, 180, 0) 64%);
  mix-blend-mode: screen;
  opacity: 0;
}
.nc-mech-songket .nc-songket-l,
.nc-mech-songket .s-left {
  left: -6%;
  clip-path: polygon(0 0, 100% 0, 78% 100%, 0 100%);
  border-right: 4px solid #E5B94B;
}
.nc-mech-songket .nc-songket-r,
.nc-mech-songket .s-right {
  right: -6%;
  clip-path: polygon(22% 0, 100% 0, 100% 100%, 0 100%);
  border-left: 4px solid #E5B94B;
}
.nc-mech-songket .nc-songket-brocade {
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(45deg, rgba(235, 192, 75, 0.28) 0px, rgba(235, 192, 75, 0.28) 3px, rgba(128, 20, 28, 0.24) 3px, rgba(128, 20, 28, 0.24) 18px),
    repeating-linear-gradient(-45deg, rgba(235, 192, 75, 0.28) 0px, rgba(235, 192, 75, 0.28) 3px, transparent 3px, transparent 18px);
}
.nc-mech-songket .nc-songket-trim {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 28px;
  background: repeating-linear-gradient(180deg, #F5D576 0px, #F5D576 8px, #7A1820 8px, #7A1820 16px);
  opacity: 0.92;
}
:is(.nc-songket-l, .s-left) .nc-songket-trim { right: 11%; }
:is(.nc-songket-r, .s-right) .nc-songket-trim { left: 11%; }

:is(#coverGate.gate-open, #coverGate.opacity-0) .nc-mech-songket :is(.nc-songket-l, .s-left) {
  animation: ncSongketCrossL 2.1s cubic-bezier(0.35, 0, 0.2, 1) forwards;
}
:is(#coverGate.gate-open, #coverGate.opacity-0) .nc-mech-songket :is(.nc-songket-r, .s-right) {
  animation: ncSongketCrossR 2.1s cubic-bezier(0.35, 0, 0.2, 1) forwards;
}
@keyframes ncSongketCrossL {
  0%   { transform: translate3d(0, 0, 0) skewX(0deg) rotate3d(0, 1, 0, 0deg); filter: drop-shadow(0 0 22px rgba(0, 0, 0, 0.85)); }
  25%  { transform: translate3d(-14%, -4%, 0) skewX(-2deg) rotate3d(0, 1, 0, 12deg); filter: drop-shadow(16px 8px 26px rgba(0, 0, 0, 0.62)); }
  45%  { transform: translate3d(-38%, -9%, 0) skewX(-4deg) rotate3d(0, 1, 0, -6deg); filter: drop-shadow(-12px 14px 30px rgba(0, 0, 0, 0.55)); }
  100% { transform: translate3d(-106%, -24%, 0) skewX(-7deg) rotate3d(0, 1, 0, -18deg); filter: drop-shadow(-30px 18px 36px rgba(0, 0, 0, 0.32)); }
}
@keyframes ncSongketCrossR {
  0%   { transform: translate3d(0, 0, 0) skewX(0deg) rotate3d(0, 1, 0, 0deg); filter: drop-shadow(0 0 22px rgba(0, 0, 0, 0.85)); }
  25%  { transform: translate3d(14%, 4%, 0) skewX(-2deg) rotate3d(0, 1, 0, 12deg); filter: drop-shadow(-16px -8px 26px rgba(0, 0, 0, 0.62)); }
  45%  { transform: translate3d(38%, 9%, 0) skewX(-4deg) rotate3d(0, 1, 0, -6deg); filter: drop-shadow(12px -14px 30px rgba(0, 0, 0, 0.55)); }
  100% { transform: translate3d(106%, 24%, 0) skewX(-7deg) rotate3d(0, 1, 0, -18deg); filter: drop-shadow(30px -18px 36px rgba(0, 0, 0, 0.32)); }
}
/* Sheen lipatan menyapu mengikuti sapuan kain songket */
:is(#coverGate.gate-open, #coverGate.opacity-0) .nc-mech-songket .nc-songket-drape::after {
  animation: ncSongketSheen 2.1s cubic-bezier(0.35, 0, 0.2, 1) forwards;
}
@keyframes ncSongketSheen {
  0%   { opacity: 0; transform: translate3d(0, 0, 0) skewX(0deg); }
  30%  { opacity: 1; transform: translate3d(-5%, -3%, 0) skewX(-3deg); }
  70%  { opacity: 0.8; transform: translate3d(5%, 3%, 0) skewX(2deg); }
  100% { opacity: 0; transform: translate3d(0, 0, 0) skewX(0deg); }
}

/* ==========================================================================
   7. TAPIS — 4 Pita Tenun Tapis & Siger (Geser Bersilang Bertingkat Halus)
   ========================================================================== */
.nc-mech-tapis .nc-tapis-band {
  position: absolute;
  left: 0;
  right: 0;
  height: 25.4%;
  overflow: hidden;
  border-top: 2.5px solid #E5B94B;
  border-bottom: 2.5px solid #E5B94B;
  box-shadow: 0 10px 32px rgba(0, 0, 0, 0.78);
}
.nc-mech-tapis .nc-tapis-band.b1 { top: 0; }
.nc-mech-tapis .nc-tapis-band.b2 { top: 25%; }
.nc-mech-tapis .nc-tapis-band.b3 { top: 50%; }
.nc-mech-tapis .nc-tapis-band.b4 { top: 75%; }
.nc-mech-tapis .nc-tapis-gold {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 8px;
  height: 14px;
  background:
    repeating-linear-gradient(90deg, #F5D576 0px, #F5D576 22px, rgba(145, 28, 28, 0.85) 22px, rgba(145, 28, 28, 0.85) 34px);
  border-top: 1px solid #FFF3C4;
  border-bottom: 1px solid #FFF3C4;
  opacity: 0.88;
}
:is(#coverGate.gate-open, #coverGate.opacity-0) .nc-mech-tapis .nc-tapis-band.b1 {
  animation: ncTapisGlideL 2.05s cubic-bezier(0.35, 0, 0.2, 1) 0s forwards;
}
:is(#coverGate.gate-open, #coverGate.opacity-0) .nc-mech-tapis .nc-tapis-band.b2 {
  animation: ncTapisGlideR 2.05s cubic-bezier(0.35, 0, 0.2, 1) 0.08s forwards;
}
:is(#coverGate.gate-open, #coverGate.opacity-0) .nc-mech-tapis .nc-tapis-band.b3 {
  animation: ncTapisGlideL 2.05s cubic-bezier(0.35, 0, 0.2, 1) 0.16s forwards;
}
:is(#coverGate.gate-open, #coverGate.opacity-0) .nc-mech-tapis .nc-tapis-band.b4 {
  animation: ncTapisGlideR 2.05s cubic-bezier(0.35, 0, 0.2, 1) 0.24s forwards;
}
@keyframes ncTapisGlideL {
  0%   { transform: translate3d(0, 0, 0); }
  45%  { transform: translate3d(-38%, 0, 0); }
  100% { transform: translate3d(-105%, 0, 0); }
}
@keyframes ncTapisGlideR {
  0%   { transform: translate3d(0, 0, 0); }
  45%  { transform: translate3d(38%, 0, 0); }
  100% { transform: translate3d(105%, 0, 0); }
}

/* ==========================================================================
   8. LIFT — Gerbang Candi Bentar / Archway Megah (Walk-Through Parallax)
   ========================================================================== */
.nc-mech-lift .nc-arch-crown {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 24%;
  overflow: hidden;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 72% 65%, 50% 48%, 28% 65%, 0 100%);
  border-bottom: 4px solid var(--sk, #D4AF37);
  z-index: 4;
}
.nc-mech-lift .nc-arch-pillar {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 50.5%;
  overflow: hidden;
  box-shadow: 0 0 60px rgba(0, 0, 0, 0.8);
}
.nc-mech-lift .nc-arch-l {
  left: 0;
  border-right: 3px solid var(--sk, #D4AF37);
}
.nc-mech-lift .nc-arch-r {
  right: 0;
  border-left: 3px solid var(--sk, #D4AF37);
}
.nc-mech-lift .nc-pillar-steps {
  position: absolute;
  top: 12%;
  bottom: 12%;
  width: 28px;
  border: 2px solid color-mix(in srgb, var(--sk, #D4AF37) 65%, transparent);
  background: rgba(0, 0, 0, 0.28);
}
.nc-arch-l .nc-pillar-steps { right: 12px; }
.nc-arch-r .nc-pillar-steps { left: 12px; }

:is(#coverGate.gate-open, #coverGate.opacity-0) .nc-mech-lift .nc-arch-crown {
  animation: ncArchCrownUp 2.05s cubic-bezier(0.35, 0, 0.2, 1) forwards;
}
:is(#coverGate.gate-open, #coverGate.opacity-0) .nc-mech-lift .nc-arch-l {
  animation: ncArchWalkL 2.1s cubic-bezier(0.35, 0, 0.2, 1) forwards;
}
:is(#coverGate.gate-open, #coverGate.opacity-0) .nc-mech-lift .nc-arch-r {
  animation: ncArchWalkR 2.1s cubic-bezier(0.35, 0, 0.2, 1) forwards;
}
@keyframes ncArchCrownUp {
  0%   { transform: translate3d(0, 0, 0) scale(1); }
  45%  { transform: translate3d(0, -42%, 0) scale(1.1); }
  100% { transform: translate3d(0, -115%, 0) scale(1.25); }
}
@keyframes ncArchWalkL {
  0%   { transform: translate3d(0, 0, 0) scale(1); }
  45%  { transform: translate3d(-38%, 0, 0) scale(1.1); }
  100% { transform: translate3d(-108%, 0, 0) scale(1.22); }
}
@keyframes ncArchWalkR {
  0%   { transform: translate3d(0, 0, 0) scale(1); }
  45%  { transform: translate3d(38%, 0, 0) scale(1.1); }
  100% { transform: translate3d(108%, 0, 0) scale(1.22); }
}

/* ==========================================================================
   9. ZOOM — Lensa Sinematik & Cincin Emas (4 Bilah Aperture & Astrolabe)
   ========================================================================== */
.nc-mech-zoom .nc-zoom-blade {
  position: absolute;
  width: 52%;
  height: 52%;
  overflow: hidden;
  border: 2px solid color-mix(in srgb, var(--sk, #D4AF37) 75%, transparent);
  box-shadow: 0 0 40px rgba(0, 0, 0, 0.75);
}
.nc-mech-zoom .nc-zoom-blade.zb1 { top: 0; left: 0; }
.nc-mech-zoom .nc-zoom-blade.zb2 { top: 0; right: 0; }
.nc-mech-zoom .nc-zoom-blade.zb3 { bottom: 0; right: 0; }
.nc-mech-zoom .nc-zoom-blade.zb4 { bottom: 0; left: 0; }
.nc-mech-zoom .nc-zoom-ring {
  position: absolute;
  top: 50%;
  left: 50%;
  border-radius: 999px;
  border: 2px dashed color-mix(in srgb, var(--sk, #D4AF37) 85%, #fff);
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 5;
}
.nc-mech-zoom .nc-zoom-ring.zr1 {
  width: min(82vw, 500px);
  height: min(82vw, 500px);
}
.nc-mech-zoom .nc-zoom-ring.zr2 {
  width: min(96vw, 620px);
  height: min(96vw, 620px);
  border-style: solid;
  opacity: 0.65;
}
:is(#coverGate.gate-open, #coverGate.opacity-0) .nc-mech-zoom .zb1 {
  animation: ncBladeTL 2.1s cubic-bezier(0.35, 0, 0.2, 1) forwards;
}
:is(#coverGate.gate-open, #coverGate.opacity-0) .nc-mech-zoom .zb2 {
  animation: ncBladeTR 2.1s cubic-bezier(0.35, 0, 0.2, 1) forwards;
}
:is(#coverGate.gate-open, #coverGate.opacity-0) .nc-mech-zoom .zb3 {
  animation: ncBladeBR 2.1s cubic-bezier(0.35, 0, 0.2, 1) forwards;
}
:is(#coverGate.gate-open, #coverGate.opacity-0) .nc-mech-zoom .zb4 {
  animation: ncBladeBL 2.1s cubic-bezier(0.35, 0, 0.2, 1) forwards;
}
:is(#coverGate.gate-open, #coverGate.opacity-0) .nc-mech-zoom .zr1 {
  animation: ncRingSpinOut1 2.1s cubic-bezier(0.35, 0, 0.2, 1) forwards;
}
:is(#coverGate.gate-open, #coverGate.opacity-0) .nc-mech-zoom .zr2 {
  animation: ncRingSpinOut2 2.1s cubic-bezier(0.35, 0, 0.2, 1) forwards;
}
@keyframes ncBladeTL { 0% { transform: translate3d(0,0,0) rotate(0deg); } 45% { transform: translate3d(-38%, -38%, 0) rotate(-8deg) scale(1.08); } 100% { transform: translate3d(-108%, -108%, 0) rotate(-18deg) scale(1.2); } }
@keyframes ncBladeTR { 0% { transform: translate3d(0,0,0) rotate(0deg); } 45% { transform: translate3d(38%, -38%, 0) rotate(8deg) scale(1.08); } 100% { transform: translate3d(108%, -108%, 0) rotate(18deg) scale(1.2); } }
@keyframes ncBladeBR { 0% { transform: translate3d(0,0,0) rotate(0deg); } 45% { transform: translate3d(38%, 38%, 0) rotate(-8deg) scale(1.08); } 100% { transform: translate3d(108%, 108%, 0) rotate(-18deg) scale(1.2); } }
@keyframes ncBladeBL { 0% { transform: translate3d(0,0,0) rotate(0deg); } 45% { transform: translate3d(-38%, 38%, 0) rotate(8deg) scale(1.08); } 100% { transform: translate3d(-108%, 108%, 0) rotate(18deg) scale(1.2); } }
@keyframes ncRingSpinOut1 { 0% { transform: translate(-50%, -50%) rotate(0deg) scale(1); opacity: 0.9; } 50% { transform: translate(-50%, -50%) rotate(38deg) scale(1.45); opacity: 0.75; } 100% { transform: translate(-50%, -50%) rotate(75deg) scale(2.4); opacity: 0; } }
@keyframes ncRingSpinOut2 { 0% { transform: translate(-50%, -50%) rotate(0deg) scale(1); opacity: 0.65; } 50% { transform: translate(-50%, -50%) rotate(-38deg) scale(1.55); opacity: 0.55; } 100% { transform: translate(-50%, -50%) rotate(-75deg) scale(2.8); opacity: 0; } }

/* ==========================================================================
   10. FADE — Kabut Taman Pagi (3 Lapis Kabut Organik Menyibak)
   ========================================================================== */
.nc-mech-fade .nc-mist-veil {
  position: absolute;
  inset: 0;
  overflow: hidden;
}
.nc-mech-fade .nc-mist-veil.m-left {
  clip-path: polygon(0 0, 62% 0, 44% 100%, 0 100%);
  border-right: 2px solid rgba(255, 240, 200, 0.45);
}
.nc-mech-fade .nc-mist-veil.m-right {
  clip-path: polygon(58% 0, 100% 0, 100% 100%, 38% 100%);
  border-left: 2px solid rgba(255, 240, 200, 0.45);
}
.nc-mech-fade .nc-mist-veil.m-top {
  background: radial-gradient(circle at 50% 40%, color-mix(in srgb, var(--sk, #D4AF37) 35%, rgba(255,250,240,0.38)) 0%, transparent 72%);
  pointer-events: none;
}
.nc-mech-fade .nc-mist-cloud {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 35% 50%, rgba(255, 248, 235, 0.34) 0%, transparent 65%),
    radial-gradient(ellipse at 65% 50%, rgba(245, 222, 179, 0.28) 0%, transparent 65%);
}
:is(#coverGate.gate-open, #coverGate.opacity-0) .nc-mech-fade .m-left {
  animation: ncMistDriftL 2.1s cubic-bezier(0.35, 0, 0.2, 1) forwards;
}
:is(#coverGate.gate-open, #coverGate.opacity-0) .nc-mech-fade .m-right {
  animation: ncMistDriftR 2.1s cubic-bezier(0.35, 0, 0.2, 1) forwards;
}
:is(#coverGate.gate-open, #coverGate.opacity-0) .nc-mech-fade .m-top {
  animation: ncMistDriftTop 2.1s cubic-bezier(0.35, 0, 0.2, 1) forwards;
}
@keyframes ncMistDriftL {
  0%   { transform: translate3d(0, 0, 0) scale(1); opacity: 1; filter: blur(0); }
  45%  { transform: translate3d(-28%, -6%, 0) scale(1.06); opacity: 0.82; filter: blur(3px); }
  100% { transform: translate3d(-78%, -14%, 0) scale(1.16); opacity: 0; filter: blur(12px); }
}
@keyframes ncMistDriftR {
  0%   { transform: translate3d(0, 0, 0) scale(1); opacity: 1; filter: blur(0); }
  45%  { transform: translate3d(28%, 6%, 0) scale(1.06); opacity: 0.82; filter: blur(3px); }
  100% { transform: translate3d(78%, 14%, 0) scale(1.16); opacity: 0; filter: blur(12px); }
}
@keyframes ncMistDriftTop {
  0%   { transform: translateY(0) scale(1); opacity: 1; }
  50%  { transform: translateY(-22%) scale(1.12); opacity: 0.75; }
  100% { transform: translateY(-48%) scale(1.25); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  :is(#coverGate.gate-open, #coverGate.opacity-0) .nc-gate-mech *,
  :is(#coverGate.gate-open, #coverGate.opacity-0) .nc-gate-card { animation: none !important; }
}

/* ==========================================================================
   ORNAMEN GERBANG BUDAYA — Lentera Arab, Kori Agung Bali, Siger Sunda
   (ditempel di atas mekanik gerbang, di bawah kartu, pointer-events none)
   ========================================================================== */
.nc-orn-culture {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
}

/* --- Lentera Arab berayun (zoom & tirai) --- */
.nc-orn-lantern {
  position: absolute;
  top: -4px;
  width: 30px;
  transform-origin: top center;
  animation: ncLanternSway 4.6s ease-in-out infinite alternate;
  filter: drop-shadow(0 8px 16px rgba(210, 184, 124, 0.45));
  opacity: 0.92;
}
.nc-orn-lantern .nc-lantern-chain {
  display: block;
  width: 2px;
  height: 34px;
  margin: 0 auto;
  background: linear-gradient(180deg, #D2B87C 0%, rgba(210, 184, 124, 0.35) 100%);
}
.nc-orn-lantern svg {
  display: block;
  width: 100%;
  height: auto;
}
.nc-orn-la1 { left: 7%;  animation-delay: 0s; }
.nc-orn-la2 { left: 28%; animation-delay: -1.4s; top: -6px; }
.nc-orn-la3 { left: 50%; animation-delay: -2.8s; top: -8px; width: 34px; }
.nc-orn-la4 { left: 72%; animation-delay: -0.7s; top: -6px; }
.nc-orn-la5 { left: 90%; animation-delay: -2.1s; }
@keyframes ncLanternSway {
  0%   { transform: rotate(-7deg); }
  100% { transform: rotate(7deg); }
}

/* --- Kori Agung Bali (lift) --- */
.nc-orn-kori {
  position: absolute;
  left: 50%;
  top: 0;
  width: min(64vw, 300px);
  transform: translateX(-50%);
  filter: drop-shadow(0 10px 26px rgba(212, 175, 55, 0.35));
  opacity: 0.9;
}
.nc-orn-kori svg { display: block; width: 100%; height: auto; }

/* --- Mahkota Siger Kencana Sunda (tirai & iris) --- */
.nc-orn-siger {
  position: absolute;
  left: 50%;
  top: 0;
  width: min(56vw, 250px);
  transform: translateX(-50%);
  filter: drop-shadow(0 8px 22px rgba(212, 175, 55, 0.4));
  opacity: 0.92;
}
.nc-orn-siger svg { display: block; width: 100%; height: auto; }

/* ==========================================================================
   BLOOM — Kelopak Mekar Berlapis (mandala bunga mekar tengah → luar)
   ========================================================================== */
.nc-mech-bloom {
  perspective: 1200px;
  overflow: hidden;
  background: radial-gradient(120% 120% at 50% 50%, rgba(26, 14, 16, 0.45) 0%, rgba(16, 8, 10, 0.94) 100%);
}
.nc-mech-bloom .nc-bloom-layer {
  position: absolute;
  inset: 0;
  animation: ncBloomSpin 38s linear infinite;
}
.nc-mech-bloom .bl2 { animation-duration: 46s; animation-direction: reverse; }
.nc-mech-bloom .bl3 { animation-duration: 54s; }
.nc-mech-bloom .bl4 { animation-duration: 62s; animation-direction: reverse; }
@keyframes ncBloomSpin { to { transform: rotate3d(0, 0, 1, 360deg); } }
.nc-mech-bloom .nc-bloom-petal {
  position: absolute;
  left: 50%;
  top: 50%;
  transform-origin: 50% 100%;
  transform: translate(-50%, -50%) rotate(var(--r)) translateY(-8%);
  will-change: transform, opacity, filter;
}
.nc-mech-bloom .bl1 .nc-bloom-petal { width: 58vmax; height: 58vmax; }
.nc-mech-bloom .bl2 .nc-bloom-petal { width: 50vmax; height: 50vmax; }
.nc-mech-bloom .bl3 .nc-bloom-petal { width: 42vmax; height: 42vmax; }
.nc-mech-bloom .bl4 .nc-bloom-petal { width: 34vmax; height: 34vmax; }
.nc-bloom-petal {
  border-radius: 52% 48% 55% 45% / 68% 64% 30% 36%;
  filter: drop-shadow(0 0 24px rgba(0, 0, 0, 0.35));
}
.nc-mech-bloom .bl1 .nc-bloom-petal:nth-child(odd),
.nc-mech-bloom .bl2 .nc-bloom-petal:nth-child(even) {
  background: radial-gradient(120% 95% at 50% 92%, var(--p1) 0%, var(--p1) 34%, rgba(255, 255, 255, 0.42) 62%, transparent 84%);
}
.nc-mech-bloom .bl1 .nc-bloom-petal:nth-child(even),
.nc-mech-bloom .bl2 .nc-bloom-petal:nth-child(odd) {
  background: radial-gradient(120% 95% at 50% 92%, var(--p2) 0%, var(--p2) 34%, rgba(255, 255, 255, 0.42) 62%, transparent 84%);
}
.nc-mech-bloom .bl3 .nc-bloom-petal:nth-child(odd),
.nc-mech-bloom .bl4 .nc-bloom-petal:nth-child(even) {
  background: radial-gradient(120% 95% at 50% 92%, var(--p3) 0%, var(--p3) 34%, rgba(255, 255, 255, 0.42) 62%, transparent 84%);
}
.nc-mech-bloom .bl3 .nc-bloom-petal:nth-child(even),
.nc-mech-bloom .bl4 .nc-bloom-petal:nth-child(odd) {
  background: radial-gradient(120% 95% at 50% 92%, var(--p2) 0%, var(--p2) 34%, rgba(255, 255, 255, 0.42) 62%, transparent 84%);
}
.nc-mech-bloom .nc-bloom-core {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 26vmin;
  height: 26vmin;
  margin: -13vmin 0 0 -13vmin;
  border-radius: 50%;
  background: radial-gradient(circle, var(--p2) 0%, var(--p1) 55%, transparent 72%);
  filter: drop-shadow(0 0 34px rgba(255, 230, 160, 0.5));
  animation: ncBloomCorePulse 3.4s ease-in-out infinite;
}
@keyframes ncBloomCorePulse {
  0%, 100% { transform: scale(1); opacity: 0.95; }
  50% { transform: scale(1.12); opacity: 1; }
}
:is(#coverGate.gate-open, #coverGate.opacity-0) .nc-mech-bloom .nc-bloom-petal {
  animation: ncBloomOpen 1.7s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
:is(#coverGate.gate-open, #coverGate.opacity-0) .nc-mech-bloom .bl3 .nc-bloom-petal { animation-delay: 0.18s; }
:is(#coverGate.gate-open, #coverGate.opacity-0) .nc-mech-bloom .bl2 .nc-bloom-petal { animation-delay: 0.36s; }
:is(#coverGate.gate-open, #coverGate.opacity-0) .nc-mech-bloom .bl1 .nc-bloom-petal { animation-delay: 0.54s; }
@keyframes ncBloomOpen {
  0%   { transform: translate(-50%, -50%) rotate(var(--r)) translateY(-8%) scale(1) rotate3d(0, 1, 0, 0deg); opacity: 1; }
  55%  { transform: translate(-50%, -50%) rotate(var(--r)) translateY(-26%) scale(1.26) rotate3d(0, 1, 0, 20deg); opacity: 0.85; }
  100% { transform: translate(-50%, -50%) rotate(var(--r)) translateY(-58%) scale(1.75) rotate3d(0, 1, 0, 42deg); opacity: 0; }
}
:is(#coverGate.gate-open, #coverGate.opacity-0) .nc-mech-bloom .nc-bloom-core {
  animation: ncBloomCoreOpen 1.5s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
@keyframes ncBloomCoreOpen {
  0%   { transform: scale(1); opacity: 1; }
  60%  { transform: scale(1.9); opacity: 0.7; }
  100% { transform: scale(3.2); opacity: 0; }
}

/* ==========================================================================
   ARCH — Gerbang Melati & Kenanga (sayap rangkaian bunga menyibak)
   ========================================================================== */
.nc-mech-arch {
  overflow: hidden;
  background: radial-gradient(130% 130% at 50% 40%, rgba(28, 40, 30, 0.35) 0%, rgba(16, 24, 18, 0.88) 100%);
}
.nc-mech-arch .nc-farch-wing {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 30%;
  background: linear-gradient(105deg, #FBF7EC 0%, #F1E8D5 100%);
  box-shadow: 0 0 55px rgba(0, 0, 0, 0.55);
  will-change: transform, opacity, filter;
}
.nc-mech-arch .nc-farch-l { left: 0; border-right: 3px solid #D9B95C; }
.nc-mech-arch .nc-farch-r { right: 0; border-left: 3px solid #D9B95C; }
.nc-mech-arch .nc-farch-l .nc-garland-svg { position: absolute; right: 4px; top: 0; height: 100%; width: 118px; }
.nc-mech-arch .nc-farch-r .nc-garland-svg { position: absolute; left: 4px; top: 0; height: 100%; width: 118px; transform: scaleX(-1); }
.nc-mech-arch .nc-farch-crown {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 92px;
  background: linear-gradient(180deg, rgba(251, 247, 236, 0.95) 0%, rgba(251, 247, 236, 0.75) 78%, transparent 100%);
  border-bottom: 3px solid #D9B95C;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.4);
  will-change: transform, opacity;
}
.nc-mech-arch .nc-farch-crown .nc-garland-svg { width: 100%; height: 100%; }
.nc-mech-arch .nc-farch-scatter { position: absolute; inset: 0; }
.nc-farch-petal {
  position: absolute;
  width: 16px;
  height: 21px;
  border-radius: 52% 48% 50% 50% / 66% 62% 34% 38%;
  background: radial-gradient(120% 100% at 50% 90%, var(--c) 0%, rgba(255, 255, 255, 0.6) 60%, transparent 82%);
  opacity: 0.95;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18);
  will-change: transform, opacity;
}
:is(#coverGate.gate-open, #coverGate.opacity-0) .nc-mech-arch .nc-farch-l {
  animation: ncFarchSweepL 2.1s cubic-bezier(0.35, 0, 0.2, 1) forwards;
}
:is(#coverGate.gate-open, #coverGate.opacity-0) .nc-mech-arch .nc-farch-r {
  animation: ncFarchSweepR 2.1s cubic-bezier(0.35, 0, 0.2, 1) forwards;
}
:is(#coverGate.gate-open, #coverGate.opacity-0) .nc-mech-arch .nc-farch-crown {
  animation: ncFarchCrownUp 1.8s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
:is(#coverGate.gate-open, #coverGate.opacity-0) .nc-mech-arch .nc-farch-petal {
  animation: ncFarchFly 1.9s ease-in var(--d, 0s) forwards;
}
@keyframes ncFarchSweepL {
  0%   { transform: translate3d(0, 0, 0) rotate3d(0, 1, 0, 0deg); opacity: 1; }
  45%  { transform: translate3d(-28%, 0, 0) rotate3d(0, 1, 0, -16deg); opacity: 1; }
  100% { transform: translate3d(-116%, 0, 0) rotate3d(0, 1, 0, -30deg); opacity: 0.2; }
}
@keyframes ncFarchSweepR {
  0%   { transform: translate3d(0, 0, 0) rotate3d(0, 1, 0, 0deg); opacity: 1; }
  45%  { transform: translate3d(28%, 0, 0) rotate3d(0, 1, 0, 16deg); opacity: 1; }
  100% { transform: translate3d(116%, 0, 0) rotate3d(0, 1, 0, 30deg); opacity: 0.2; }
}
@keyframes ncFarchCrownUp {
  0%   { transform: translateY(0) rotate3d(1, 0, 0, 0deg); opacity: 1; }
  100% { transform: translateY(-130%) rotate3d(1, 0, 0, -24deg); opacity: 0; }
}
@keyframes ncFarchFly {
  0%   { transform: translate3d(0, 0, 0) rotate(0deg); opacity: 0.95; }
  100% { transform: translate3d(var(--tx, 20vw), var(--ty, -40vh), 0) rotate(var(--tr, 240deg)); opacity: 0; }
}

/* ==========================================================================
   PETAL — Hujan Sakura Tropis (kabut menyibak + 3 lapis kelopak parallax)
   ========================================================================== */
.nc-mech-petal {
  overflow: hidden;
  background: linear-gradient(180deg, #FDF9F0 0%, #F6EDE0 100%);
}
.nc-pr-petal {
  position: absolute;
  top: 0;
  left: 0;
  width: var(--s, 14px);
  height: calc(var(--s, 14px) * 1.32);
  border-radius: 52% 48% 50% 50% / 66% 62% 34% 38%;
  background: radial-gradient(120% 100% at 50% 88%, var(--c) 0%, rgba(255, 255, 255, 0.55) 62%, transparent 82%);
  will-change: transform, opacity;
  animation: ncPetalFall var(--t, 9s) linear infinite;
  animation-delay: var(--d, 0s);
}
.nc-mech-petal .nc-petal-layer { position: absolute; inset: 0; }
.nc-mech-petal .far  { opacity: 0.55; }
.nc-mech-petal .mid  { opacity: 0.75; }
.nc-mech-petal .near { opacity: 0.9; }
.nc-mech-petal .nc-pr-mist {
  position: absolute;
  top: -4%;
  bottom: -4%;
  width: 56%;
  background: linear-gradient(100deg, rgba(253, 249, 240, 0.94) 0%, rgba(253, 249, 240, 0.8) 55%, rgba(253, 249, 240, 0.62) 100%);
  box-shadow: 0 0 55px rgba(120, 90, 60, 0.25);
}
.nc-mech-petal .m-left { left: -4%; }
.nc-mech-petal .m-right { right: -4%; }
.nc-mech-petal .nc-mist-cloud {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 35% 50%, rgba(255, 248, 235, 0.4) 0%, transparent 65%),
    radial-gradient(ellipse at 65% 50%, rgba(245, 222, 179, 0.34) 0%, transparent 65%);
}
@keyframes ncPetalFall {
  0%   { transform: translate3d(var(--x, 10vw), -12vh, 0) rotate(0deg) rotate3d(1, 0.6, 0, 0deg); opacity: 0; }
  8%   { opacity: 0.9; }
  88%  { opacity: 0.85; }
  100% { transform: translate3d(calc(var(--x, 10vw) + 6vw), 112vh, 0) rotate(330deg) rotate3d(1, 0.6, 0, 220deg); opacity: 0; }
}
:is(#coverGate.gate-open, #coverGate.opacity-0) .nc-mech-petal .m-left {
  animation: ncMistDriftL 2.1s cubic-bezier(0.35, 0, 0.2, 1) forwards;
}
:is(#coverGate.gate-open, #coverGate.opacity-0) .nc-mech-petal .m-right {
  animation: ncMistDriftR 2.1s cubic-bezier(0.35, 0, 0.2, 1) forwards;
}

/* ==========================================================================
   KIPAS — Kipas Flora Tatakan (7 bilah menutup lalu terangkat ke atas)
   ========================================================================== */
.nc-mech-kipas {
  perspective: 1100px;
  overflow: hidden;
  background: radial-gradient(130% 130% at 50% 100%, rgba(24, 14, 10, 0.3) 0%, rgba(14, 10, 8, 0.9) 100%);
}
.nc-kipas-blade {
  position: absolute;
  left: 50%;
  bottom: -8vh;
  width: 36vmax;
  height: 118vh;
  transform-origin: 50% 100%;
  transform: translateX(-50%) rotate(var(--a));
  clip-path: polygon(50% 0%, 90% 12%, 100% 100%, 0% 100%, 10% 12%);
  background:
    repeating-linear-gradient(78deg, rgba(255, 255, 255, 0.07) 0px, rgba(255, 255, 255, 0.07) 10px, transparent 10px, transparent 26px),
    linear-gradient(185deg, rgba(255, 255, 255, 0.22) 0%, transparent 30%),
    linear-gradient(185deg, var(--pc) 0%, rgba(0, 0, 0, 0.3) 100%);
  filter: drop-shadow(0 0 30px rgba(0, 0, 0, 0.5));
  will-change: transform, opacity, filter;
}
:is(#coverGate.gate-open, #coverGate.opacity-0) .nc-mech-kipas .nc-kipas-blade {
  animation: ncKipasFold 1.9s cubic-bezier(0.22, 1, 0.36, 1) var(--kd, 0s) forwards;
}
@keyframes ncKipasFold {
  0%   { transform: translateX(-50%) rotate(var(--a)); opacity: 1; filter: drop-shadow(0 0 30px rgba(0, 0, 0, 0.5)); }
  38%  { transform: translateX(-50%) rotate(calc(var(--a) * 0.18)) rotate3d(1, 0, 0, -6deg); opacity: 1; filter: drop-shadow(0 0 22px rgba(0, 0, 0, 0.4)); }
  100% { transform: translateX(-50%) rotate(0deg) translateY(-122vh); opacity: 0; filter: drop-shadow(0 0 12px rgba(0, 0, 0, 0.2)); }
}
.nc-mech-kipas .nc-kipas-petals { position: absolute; inset: 0; }
.nc-mech-kipas .nc-pr-petal {
  animation: ncPetalFall 2.6s cubic-bezier(0.45, 0.05, 0.55, 0.95) calc(0.5s + var(--d, 0s)) forwards;
  opacity: 0;
}

/* ==========================================================================
   LAZY BLUR-UP — foto galeri memudar halus dari blur saat siap
   ========================================================================== */
img.nc-blurup {
  opacity: 0;
  filter: blur(14px);
  transform: scale(1.04);
  transition: opacity 0.7s ease, filter 0.7s ease, transform 0.7s ease;
}
img.nc-blurup.nc-loaded {
  opacity: 1;
  filter: blur(0);
  transform: scale(1);
}

/* ==========================================================================
   LIGHTBOX PARALLAX — penampil foto dengan zoom halus & parallax gerak
   ========================================================================== */
#ncLightbox {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.35s ease;
}
#ncLightbox.nc-lb-open { opacity: 1; pointer-events: auto; }
#ncLightbox .nc-lb-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(12, 9, 7, 0.9);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
#ncLightbox .nc-lb-stage {
  position: relative;
  margin: 0;
  max-width: 92vw;
  max-height: 86vh;
  will-change: transform;
}
#ncLightbox .nc-lb-img {
  display: block;
  max-width: 92vw;
  max-height: 86vh;
  width: auto;
  height: auto;
  border-radius: 14px;
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.65);
  transform: scale(1.06);
  transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.35s ease;
  opacity: 0;
}
#ncLightbox.nc-lb-open .nc-lb-img { opacity: 1; }
#ncLightbox .nc-lb-close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.3);
  background: rgba(255, 255, 255, 0.12);
  color: #FFF;
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.25s ease, transform 0.25s ease;
}
#ncLightbox .nc-lb-close:hover { background: rgba(255, 255, 255, 0.24); transform: rotate(90deg); }

/* ==========================================================================
   LAPIS 2: gerak banyak-berbeda-tempo + kisah bernomor + parallax
   (pola referensi: 13 ornamen × 4 durasi berjalan bersamaan)
   ========================================================================== */
#mainStage { position: relative; }
.nc-motion { position: absolute; inset: 0; pointer-events: none; z-index: 4; overflow: hidden; }
.nc-motion .nc-m-orn {
  position: absolute; width: clamp(46px, 11vw, 92px); opacity: .16;
  animation-name: ncMFloat; animation-iteration-count: infinite;
  animation-timing-function: ease-in-out; animation-direction: alternate;
  filter: saturate(.9);
}
.nc-motion .nc-m-dot {
  position: absolute; border-radius: 50%;
  background: color-mix(in srgb, var(--sk, #7A4E28) 70%, #fff);
  opacity: .35;
  animation-name: ncMDrift; animation-iteration-count: infinite;
  animation-timing-function: ease-in-out; animation-direction: alternate;
}
@keyframes ncMFloat {
  0%   { transform: scale(var(--s, 1)) translateY(0) rotate(0deg); }
  50%  { transform: scale(var(--s, 1)) translateY(-13px) rotate(3deg); }
  100% { transform: scale(var(--s, 1)) translateY(-4px) rotate(-2deg); }
}
@keyframes ncMDrift {
  0%   { transform: translate3d(0,0,0) scale(1); opacity: .18; }
  50%  { transform: translate3d(9px,-16px,0) scale(1.35); opacity: .5; }
  100% { transform: translate3d(-7px,-6px,0) scale(.9); opacity: .25; }
}

/* Kisah bernomor */
.nc-story { position: relative; z-index: 6; max-width: 940px; margin: 0 auto; padding: 88px 24px; }
.nc-story-label { text-align: center; font-size: 10px; letter-spacing: .42em; text-transform: uppercase; opacity: .62; margin-bottom: 46px; }
.nc-story-list { display: grid; gap: 54px; }
.nc-story-ch { display: grid; grid-template-columns: 1fr 1fr; gap: 34px; align-items: center; }
.nc-story-ch:nth-child(even) .nc-story-media { order: 2; }
.nc-story-media { position: relative; border-radius: 14px; overflow: hidden; background: rgba(127,127,127,.10); aspect-ratio: 4/5; }
.nc-story-media img { width: 100%; height: 100%; object-fit: cover; will-change: transform; }
.nc-story-num {
  position: absolute; left: 12px; bottom: 6px; font-size: 54px; line-height: 1;
  color: #fff; mix-blend-mode: overlay; opacity: .85; font-weight: 500;
}
.nc-story-body h3 { font-size: 26px; font-weight: 500; margin-top: 6px; line-height: 1.2; }
.nc-story-year { font-size: 10.5px; letter-spacing: .32em; opacity: .62; }
.nc-story-body p:last-child { margin-top: 12px; font-size: 12.5px; line-height: 1.9; opacity: .78; }
@media (max-width: 700px) {
  .nc-story-ch { grid-template-columns: 1fr; gap: 18px; }
  .nc-story-ch:nth-child(even) .nc-story-media { order: 0; }
  .nc-story-media { aspect-ratio: 16/11; }
}
@media (prefers-reduced-motion: reduce) {
  .nc-motion { display: none; }
  #mainStage [data-par] { transform: none !important; }
}
/* ornamen klaster: skala inline dipertahankan saat beranimasi */
.nc-motion .nc-m-orn { opacity: .13; }

/* performa: di layar kecil cukup 3 ornamen + 5 titik, tetap hidup tapi ringan */
@media (max-width: 640px) {
  .nc-motion .nc-m-orn:nth-child(n+4) { display: none; }
  .nc-motion .nc-m-dot:nth-child(n+6) { display: none; }
}

/* ==========================================================================
   GALERI FOTO BERTEMA — hadir di setiap tema/layout
   ========================================================================== */
.nc-galb { position: relative; z-index: 6; padding: 78px 20px; border-top: 1px solid; }
.nc-galb-label { text-align: center; font-size: 10px; letter-spacing: .42em; text-transform: uppercase; opacity: .9; margin-bottom: 8px; }
.nc-galb-title { text-align: center; font-size: clamp(22px, 5vw, 34px); font-weight: 500; margin-bottom: 26px; line-height: 1.15; }
.nc-galb-grid {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: 10px; max-width: 900px; margin: 0 auto;
}
.nc-galb-item { position: relative; margin: 0; border-radius: 12px; overflow: hidden; aspect-ratio: 3/4; background: rgba(127,127,127,.12); }
.nc-galb-item.tall { aspect-ratio: 3/5; }
.nc-galb-item img { width: 100%; height: 100%; object-fit: cover; cursor: zoom-in; transition: transform .7s cubic-bezier(.22,1,.36,1); }
.nc-galb-item:hover img { transform: scale(1.05); }
.nc-galb-item figcaption {
  position: absolute; inset: auto 0 0 0; padding: 22px 10px 8px;
  font-size: 9.5px; letter-spacing: .12em; text-transform: uppercase;
  color: #fff; background: linear-gradient(180deg, transparent, rgba(0,0,0,.62));
}
@media (min-width: 720px) { .nc-galb-grid { grid-template-columns: repeat(3, 1fr); gap: 12px; } }
@media (prefers-reduced-motion: reduce) { .nc-galb-item img { transition: none; } }

/* ==========================================================================
   TRANSISI SEKSI BERAGAM & HALUS (Sapu kain / reveal bertema)
   - Easing decelerate: cubic-bezier(.16, 1, .3, 1)
   - Durasi 1.5s–1.7s yang anggun & tidak tergesa-gesa
   - Lapisan diberi will-change + contain
   ========================================================================== */
section.has-sweep { contain: paint; position: relative; }
section.has-sweep > .nc-sweep {
  position: absolute; inset: -4px; z-index: 6; pointer-events: none;
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--sk, #7A4E28) 42%, #18120E) 0%,
    color-mix(in srgb, var(--sk, #7A4E28) 22%, #100C09) 100%);
  will-change: transform, opacity;
  backface-visibility: hidden;
  transition-delay: .08s;
}
#mainStage[data-fam="floral"] section.has-sweep > .nc-sweep,
#mainStage[data-fam="destinasi"] section.has-sweep > .nc-sweep {
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--sk, #C2A06A) 30%, #FBF7F0) 0%,
    color-mix(in srgb, var(--sk, #C2A06A) 15%, #F0E8DC) 100%);
}

/* 1. IRIS: lingkaran mekar melingkar dari tengah */
#mainStage:is([data-tr="iris"]) section.has-sweep > .nc-sweep {
  clip-path: none !important;
  border-radius: 50%;
  transform: scale(2.6);
  opacity: 1;
  background: radial-gradient(circle at 50% 50%,
    color-mix(in srgb, var(--sk,#B07C63) 45%, #FBF7F0) 0%,
    color-mix(in srgb, var(--sk,#B07C63) 80%, #4A3B32) 100%);
  transition: transform 1.6s cubic-bezier(.16,1,.3,1), opacity .6s ease 1s;
}
#mainStage:is([data-tr="iris"]) section.has-sweep.active > .nc-sweep {
  transform: scale(0);
  opacity: 0;
}

/* 2. CURTAIN: tirai terbelah dua ke kiri dan kanan (Gunungan & Gebyok) */
#mainStage:is([data-tr="curtain"], [data-tr="gunungan"], [data-tr="gebyok"]) section.has-sweep > .nc-sweep { background: none; }
#mainStage:is([data-tr="curtain"], [data-tr="gunungan"], [data-tr="gebyok"]) section.has-sweep > .nc-sweep::before,
#mainStage:is([data-tr="curtain"], [data-tr="gunungan"], [data-tr="gebyok"]) section.has-sweep > .nc-sweep::after {
  content: ''; position: absolute; top: 0; bottom: 0; width: 50.5%;
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--sk, #B29A6B) 78%, #14100C),
    color-mix(in srgb, var(--sk, #B29A6B) 42%, #0E0B08));
  transition: transform 1.6s cubic-bezier(.16,1,.3,1);
  will-change: transform;
}
#mainStage:is([data-tr="curtain"], [data-tr="gunungan"], [data-tr="gebyok"]) section.has-sweep > .nc-sweep::before { left: 0; transform: translate3d(0,0,0); }
#mainStage:is([data-tr="curtain"], [data-tr="gunungan"], [data-tr="gebyok"]) section.has-sweep > .nc-sweep::after { right: 0; transform: translate3d(0,0,0); }
#mainStage:is([data-tr="curtain"], [data-tr="gunungan"], [data-tr="gebyok"]) section.has-sweep.active > .nc-sweep::before { transform: translate3d(-101%,0,0); }
#mainStage:is([data-tr="curtain"], [data-tr="gunungan"], [data-tr="gebyok"]) section.has-sweep.active > .nc-sweep::after { transform: translate3d(101%,0,0); }

/* 3. WIPE-UP: kain terangkat ke atas (Tirai, Lift, Tapis) */
#mainStage:is([data-tr="wipe-up"], [data-tr="tirai"], [data-tr="lift"], [data-tr="tapis"]) section.has-sweep > .nc-sweep {
  transform: translate3d(0,0,0);
  transition: transform 1.55s cubic-bezier(.16,1,.3,1);
}
#mainStage:is([data-tr="wipe-up"], [data-tr="tirai"], [data-tr="lift"], [data-tr="tapis"]) section.has-sweep.active > .nc-sweep { transform: translate3d(0,-101%,0); }

/* 4. WIPE-LEFT: sapuan tenun adat ke samping kiri (Ulos) */
#mainStage:is([data-tr="wipe-left"], [data-tr="ulos"]) section.has-sweep > .nc-sweep {
  transform: translate3d(0,0,0);
  transition: transform 1.55s cubic-bezier(.16,1,.3,1);
}
#mainStage:is([data-tr="wipe-left"], [data-tr="ulos"]) section.has-sweep.active > .nc-sweep { transform: translate3d(-101%,0,0); }

/* 5. ZOOM: zoom kedalaman sinematik & blur dissolve */
#mainStage:is([data-tr="zoom"]) section.has-sweep > .nc-sweep {
  transform: scale(1); opacity: 1;
  transition: transform 1.5s cubic-bezier(.22,1,.36,1), opacity .8s ease .35s;
}
#mainStage:is([data-tr="zoom"]) section.has-sweep.active > .nc-sweep { transform: scale(1.3); opacity: 0; }

/* 6. FADE: dissolve khidmat sakral */
#mainStage:is([data-tr="fade"]) section.has-sweep > .nc-sweep {
  opacity: 1;
  transition: opacity 1.4s cubic-bezier(.4,0,.2,1) .1s;
}
#mainStage:is([data-tr="fade"]) section.has-sweep.active > .nc-sweep { opacity: 0; }

/* 7. SWEEP: sapuan miring berkarakter (Songket) */
#mainStage:is([data-tr="sweep"], [data-tr="songket"]) section.has-sweep > .nc-sweep {
  transform: translate3d(0,0,0) skewX(-4deg); opacity: 1;
  transition: transform 1.55s cubic-bezier(.16,1,.3,1), opacity .6s ease .9s;
}
#mainStage:is([data-tr="sweep"], [data-tr="songket"]) section.has-sweep.active > .nc-sweep { transform: translate3d(104%,0,0) skewX(-4deg); opacity: 0; }

/* reveal gambar adat */
#mainStage[data-fam="adat"] .reveal-item img {
  clip-path: none !important;
  transition: opacity 1.1s ease .15s, transform 1.4s cubic-bezier(.16,1,.3,1) .15s;
}
#mainStage[data-fam="adat"] .reveal-item:not(.active) img { opacity: .001; transform: translate3d(-14px, 10px, 0) scale(1.03); }
#mainStage[data-fam="adat"] .reveal-item.active img { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  section.has-sweep > .nc-sweep { display: none !important; }
}

/* Kontras Tinggi Terjamin di Seluruh Background Tema */
.nc-sa[data-dark="true"] .nc-sa-guest { color: #F7FAF8 !important; text-shadow: 0 2px 12px rgba(0,0,0,0.9); }
.nc-sa[data-dark="true"] .nc-sa-guest strong { color: #E5C158 !important; font-weight: 700; }
.nc-sa[data-dark="true"] .nc-sa-kicker { color: #E5C158 !important; opacity: 0.95; }
.nc-sa[data-dark="true"] .nc-sa-sub { color: #C2D9CC !important; }
.nc-sa[data-dark="true"] .nc-sa-date { color: #E5C158 !important; }
.nc-cl[data-dark="true"] .nc-cl-hero-in h1 { color: #FAF7F2 !important; text-shadow: 0 3px 18px rgba(0,0,0,0.9); }
.nc-cl[data-dark="true"] .nc-cl-hero-in .nc-cl-script { color: #FFE8B0 !important; text-shadow: 0 2px 12px rgba(0,0,0,0.95); }
.nc-cl[data-dark="true"] .nc-cl-guest { color: #FAF7F2 !important; text-shadow: 0 2px 12px rgba(0,0,0,0.95); }
.nc-cl[data-dark="true"] .nc-cl-guest strong { color: #FFE8B0 !important; }