/* ==================================================================
   Pristage Hjr — Kad (shared)
   ------------------------------------------------------------------
   Fail ini digunakan oleh BACKEND dan FRONTEND. Itulah sebabnya apa
   yang disusun dalam editor kelihatan sama pada telefon pelanggan.

   Rahsianya --pr-u:
     .pr-phone  ialah "container" (container-type: inline-size)
     --pr-u     = 1/390 daripada lebar kad sebenar
     font-size  ditulis sebagai calc(var(--pr-u) * n)
   Kad 330px di admin dan 390px di telefon = susun atur identik.
   ================================================================== */

.pr-stage,
.pr-stage *{ box-sizing:border-box; }

.pr-stage{
    display:flex; justify-content:center; align-items:flex-start;
    width:100%;
}

.pr-phone{
    position:relative;
    width:min(390px,100%);
    container-type:inline-size;
    container-name:prcard;
    border-radius:34px;
    overflow:hidden;
    background:#fff;
    box-shadow:0 30px 70px -28px rgba(58,36,24,.45),
               0 0 0 1px rgba(255,255,255,.7) inset,
               0 0 0 8px rgba(255,255,255,.55);
    isolation:isolate;
}

.pr-card{
    --pr-u:1px;
    --pr-ink:#3a2c24;
    --pr-accent:#b08d57;
    --pr-paper:#fbf7f1;
    position:relative;
    width:100%;
    aspect-ratio:390 / 844;
    overflow:hidden;
    background:var(--pr-paper);
    color:var(--pr-ink);
    line-height:1.4;
}
@supports (width:1cqw){
    .pr-card{ --pr-u:0.2564102564cqw; }
}

/* Lapisan latar & hadapan ------------------------------------------ */
.pr-bg,
.pr-fg{
    position:absolute; inset:0; pointer-events:none;
    background-size:cover; background-position:center; background-repeat:no-repeat;
}
.pr-bg{ z-index:0; }
.pr-fg{ z-index:12; }
.pr-bg-plain{ background:var(--pr-paper); }

/* Scroller & section ----------------------------------------------- */
.pr-scroller{
    position:absolute; inset:0; z-index:2;
    overflow-y:auto; overflow-x:hidden;
    scroll-snap-type:y mandatory;
    scroll-behavior:smooth;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
}
.pr-scroller::-webkit-scrollbar{ display:none; }
.pr-card.is-static .pr-scroller{ overflow:hidden; scroll-snap-type:none; }

/* Auto-scroll moves the card a fraction of a pixel per frame. With
   mandatory snapping switched on, the browser drags it straight back to
   the nearest snap point every frame and the card never actually moves.
   Snapping is suspended while the card is scrolling itself, and returns
   the moment the guest takes over. */
/* 6.1.3: scroll-behavior:auto while the card moves itself. With the
   scroller's smooth scrolling every frame's small step started a new smooth
   scroll: the card barely moved, the engine took the lag for the guest's
   finger and paused 9 s at a time (the downloaded file crawled), and higher
   speeds froze, then leapt to the last page. */
.pr-scroller.dis-autoscrolling{ scroll-snap-type:none; scroll-behavior:auto; }

.pr-sec{
    position:relative;
    width:100%; height:100%;
    scroll-snap-align:start; scroll-snap-stop:always;
    overflow:hidden;
}
.pr-sec-layer{
    position:absolute; inset:0;
    background-size:cover; background-position:center;
    pointer-events:none;
}
.pr-sec-bg{ z-index:0; }
.pr-sec-fg{ z-index:9; }

/* Node -------------------------------------------------------------- */
.pr-node{
    position:absolute;
    display:block;
    word-break:break-word;
    z-index:1;
}
.pr-node .pr-in{
    display:block;
    transition:opacity .95s cubic-bezier(.22,.61,.36,1),
               transform .95s cubic-bezier(.22,.61,.36,1),
               filter .95s ease, letter-spacing .95s ease;
}

.pr-k-divider{ display:flex; align-items:center; }
.pr-rule{ display:block; width:100%; height:calc(var(--pr-u) * 1); opacity:.85; }

.pr-img{ width:100%; height:100%; display:block; }
.pr-k-image,
.pr-k-photo,
.pr-k-video{ overflow:hidden; }
.pr-photo{ width:100%; height:100%; overflow:hidden; border-radius:inherit; }
.pr-photo-ph{
    display:flex; align-items:center; justify-content:center;
    width:100%; height:100%;
    background:rgba(0,0,0,.05);
    /* Border ditunjuk hanya semasa mengedit (dalam editor) */
    border:calc(var(--pr-u) * 1) dashed currentColor;
    font-size:calc(var(--pr-u) * 11);
    letter-spacing:calc(var(--pr-u) * 1.6);
    text-transform:uppercase; opacity:.65;
    border-radius:inherit;
}
/* Sembunyikan placeholder gambar untuk tetamu (di luar editor) */
.pr-card:not(.pr-flat) .px-gal-it .pr-photo-ph{ border-color:transparent; opacity:0; }
.pr-card:not(.pr-flat) .px-gal-3d .px-gal-it:not(:has(img[src])),.pr-card:not(.pr-flat) .px-gal-collage .px-gal-it:not(:has(img[src])),.pr-card:not(.pr-flat) .px-gal-grid .px-gal-it:not(:has(img[src])){ border:none; background:transparent; box-shadow:none; }

.pr-icon{ display:inline-block; line-height:1; }

/* Butang di dalam kad ---------------------------------------------- */
.pr-btn-node{
    display:inline-flex; align-items:center; justify-content:center;
    gap:calc(var(--pr-u) * 6);
    padding:calc(var(--pr-u) * 10) calc(var(--pr-u) * 18);
    border:calc(var(--pr-u) * 1) solid currentColor;
    border-radius:calc(var(--pr-u) * 40);
    font-size:1em; font-weight:500;
    letter-spacing:calc(var(--pr-u) * 1.4);
    text-transform:uppercase;
    text-decoration:none; color:inherit;
    background:transparent;
    transition:background .3s ease, color .3s ease, transform .3s ease;
    white-space:nowrap;
}
.pr-btn-node:hover{ transform:translateY(calc(var(--pr-u) * -2)); }
.pr-btn-solid{ background:currentColor; }
.pr-btn-solid{ color:var(--pr-accent); }
.pr-btn-solid::after{ content:''; }
.pr-k-rsvp .pr-btn-solid{
    background:var(--pr-accent); color:#fff; border-color:var(--pr-accent);
}
.pr-actions{
    display:flex; gap:calc(var(--pr-u) * 10);
    justify-content:center; flex-wrap:wrap;
}
.pr-actions .pr-btn-node{ padding:calc(var(--pr-u) * 9) calc(var(--pr-u) * 14); }

/* WhatsApp / QR ----------------------------------------------------- */
.pr-wa{
    display:flex; flex-direction:column; align-items:center;
    gap:calc(var(--pr-u) * 10); height:100%;
}
.pr-wa-qr{
    width:calc(var(--pr-u) * 108); height:calc(var(--pr-u) * 108);
    border-radius:calc(var(--pr-u) * 12);
    background:#fff;
    padding:calc(var(--pr-u) * 6);
    box-shadow:0 calc(var(--pr-u) * 6) calc(var(--pr-u) * 18) rgba(40,24,16,.16);
}

/* Countdown --------------------------------------------------------- */
/* Engraved, not boxed: four figures set between two hairline rules,
   divided by fine vertical strokes. Figures take the node's display
   face; the labels are small, tracked and in the accent colour. */
.pr-countdown{
    position:relative;
    display:grid; grid-template-columns:repeat(4,1fr);
    align-items:stretch;
    width:100%;
    padding:calc(var(--pr-u) * 11) 0 calc(var(--pr-u) * 10);
}
.pr-countdown::before,
.pr-countdown::after{
    content:''; position:absolute; left:6%; right:6%;
    height:calc(var(--pr-u) * 1);
    background:linear-gradient(90deg,transparent,var(--pr-accent) 18%,var(--pr-accent) 82%,transparent);
    opacity:.55;
}
.pr-countdown::before{ top:0; }
.pr-countdown::after{ bottom:0; }
.pr-cd-unit{
    position:relative;
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    gap:calc(var(--pr-u) * 7);
    min-width:0;
}
.pr-cd-unit + .pr-cd-unit::before{
    content:''; position:absolute; left:0; top:18%; bottom:18%;
    width:calc(var(--pr-u) * 1);
    background:currentColor; opacity:.16;
}
.pr-cd-unit b{
    display:block;
    font-size:1.55em; font-weight:400; line-height:1;
    font-variant-numeric:lining-nums tabular-nums;
    font-feature-settings:"lnum" 1,"tnum" 1;
    letter-spacing:.01em;
}
.pr-cd-unit b.is-tick{ animation:pr-cd-tick .55s cubic-bezier(.22,.61,.36,1); }
@keyframes pr-cd-tick{
    from{ opacity:.25; transform:translateY(-.12em); }
    to{ opacity:1; transform:none; }
}
.pr-cd-unit i{
    display:block;
    font-style:normal; font-weight:500;
    font-size:calc(var(--pr-u) * 8.5); line-height:1;
    letter-spacing:calc(var(--pr-u) * 2.2);
    text-transform:uppercase;
    color:var(--pr-accent);
    /* optical centre: tracking adds space after the last letter */
    padding-left:calc(var(--pr-u) * 2.2);
}
.pr-cd-done{
    display:none; grid-column:1 / -1;
    align-self:center; text-align:center;
    font-style:italic; font-size:1em; line-height:1.3;
}
.pr-countdown[data-state="done"] .pr-cd-unit{ display:none; }
.pr-countdown[data-state="done"] .pr-cd-done{ display:block; }
.pr-countdown[data-state="empty"] b{ opacity:.35; }

/* E-Gift ------------------------------------------------------------ */
.pr-gift{
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    gap:calc(var(--pr-u) * 10); height:100%; width:100%;
}
.pr-gift-qr{
    width:calc(var(--pr-u) * 130); height:calc(var(--pr-u) * 130);
    object-fit:contain; background:#fff;
    padding:calc(var(--pr-u) * 8);
    border-radius:calc(var(--pr-u) * 12);
    box-shadow:0 calc(var(--pr-u) * 6) calc(var(--pr-u) * 18) rgba(40,24,16,.16);
}
.pr-gift-note{ margin:0; font-size:1em; line-height:1.6; }

/* Muzik ------------------------------------------------------------- */
/* A quiet glass disc with a line-drawn note. While a song plays the
   note gives way to four slender equaliser bars and a soft halo. */
.pr-music-toggle{
    position:absolute; right:calc(var(--pr-u,1px) * 16); top:calc(var(--pr-u,1px) * 16);
    z-index:20;
    display:grid; place-items:center;
    width:max(36px, calc(var(--pr-u,1px) * 40)); height:max(36px, calc(var(--pr-u,1px) * 40));
    min-width:36px; min-height:36px;
    margin:0; padding:0;
    border-radius:50%;
    border:calc(var(--pr-u,1px) * 1) solid color-mix(in srgb,var(--pr-accent) 55%,transparent);
    background:color-mix(in srgb,var(--pr-paper) 74%,transparent);
    color:var(--pr-accent);
    box-shadow:0 calc(var(--pr-u,1px) * 4) calc(var(--pr-u,1px) * 14) rgba(40,24,16,.16);
    -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
    cursor:pointer; overflow:hidden;
    -webkit-tap-highlight-color:transparent;
    transition:transform .35s ease, border-color .35s ease, background-color .35s ease;
}
.pr-music-toggle:hover{ transform:scale(1.05); }
.pr-music-toggle:focus-visible{ outline:calc(var(--pr-u) * 2) solid var(--pr-accent); outline-offset:calc(var(--pr-u) * 3); }
.pr-music-toggle svg{
    display:block; width:46%; height:46%;
    fill:none; stroke:currentColor; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round;
    transition:opacity .3s ease, transform .3s ease;
}
.pr-mt-eq{
    position:absolute; inset:0;
    display:flex; align-items:center; justify-content:center;
    gap:calc(var(--pr-u) * 2.4);
    opacity:0; transition:opacity .3s ease;
    pointer-events:none;
}
.pr-mt-eq i{
    display:block;
    width:calc(var(--pr-u) * 2); height:calc(var(--pr-u) * 14);
    border-radius:calc(var(--pr-u) * 2);
    background:currentColor;
    transform-origin:50% 100%;
    transform:scaleY(.3);
}
.pr-music-toggle::after{
    content:''; position:absolute; inset:calc(var(--pr-u) * -1);
    border-radius:50%;
    border:calc(var(--pr-u) * 1) solid var(--pr-accent);
    opacity:0; pointer-events:none;
}
.pr-music-toggle.is-playing{
    border-color:var(--pr-accent);
    background:color-mix(in srgb,var(--pr-paper) 88%,transparent);
}
.pr-music-toggle.is-playing svg{ opacity:0; transform:scale(.7); }
.pr-music-toggle.is-playing .pr-mt-eq{ opacity:1; }
.pr-music-toggle.is-playing .pr-mt-eq i{ animation:pr-eq 1.1s ease-in-out infinite; }
.pr-music-toggle.is-playing .pr-mt-eq i:nth-child(2){ animation-duration:.9s; animation-delay:-.4s; }
.pr-music-toggle.is-playing .pr-mt-eq i:nth-child(3){ animation-duration:1.25s; animation-delay:-.2s; }
.pr-music-toggle.is-playing .pr-mt-eq i:nth-child(4){ animation-duration:.95s; animation-delay:-.65s; }
.pr-music-toggle.is-playing::after{ animation:pr-halo 2.8s ease-out infinite; }
@keyframes pr-eq{
    0%,100%{ transform:scaleY(.3); }
    50%{ transform:scaleY(1); }
}
@keyframes pr-halo{
    0%{ opacity:.45; transform:scale(1); }
    100%{ opacity:0; transform:scale(1.45); }
}
/* Edit page: no song chosen yet */
.pr-music-toggle.is-empty{
    border-style:dashed;
    background:color-mix(in srgb,var(--pr-paper) 60%,transparent);
    opacity:.8;
}
.pr-card.pr-hide-premium .pr-music-toggle{ display:none; }
@media (prefers-reduced-motion:reduce){
    .pr-music-toggle.is-playing .pr-mt-eq i{ animation:none; transform:scaleY(.7); }
    .pr-music-toggle.is-playing::after{ animation:none; }
    .pr-cd-unit b.is-tick{ animation:none; }
}

/* Ornamen glyph: jangan biarkan telefon menukarnya kepada emoji */
.pr-icon{ font-variant-emoji:text; }

/* Petunjuk scroll (6.1.0): "Leret ke atas" once the card is open ------ */
.pr-cue{
    position:absolute; left:50%; bottom:calc(var(--pr-u) * 14); z-index:18;
    display:flex; flex-direction:column; align-items:center;
    padding:calc(var(--pr-u) * 6) calc(var(--pr-u) * 15) calc(var(--pr-u) * 8);
    border-radius:999px; pointer-events:none;
    background:color-mix(in srgb, var(--pr-paper, #fff) 78%, transparent);
    -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
    box-shadow:0 calc(var(--pr-u) * 4) calc(var(--pr-u) * 16) rgba(30,22,14,.16),
               inset 0 0 0 calc(var(--pr-u) * 1) color-mix(in srgb, var(--pr-accent) 35%, transparent);
    color:var(--pr-ink, #2b241c);
    opacity:0; transform:translate(-50%, calc(var(--pr-u) * 12));
    transition:opacity .7s ease, transform .7s cubic-bezier(.2,.8,.25,1);
}
.pr-cue.is-on{ opacity:.95; transform:translate(-50%, 0); }
.pr-cue.is-gone{ opacity:0; transform:translate(-50%, calc(var(--pr-u) * 12)); }
.pr-cue-arrows{ position:relative; display:block; width:calc(var(--pr-u) * 14); height:calc(var(--pr-u) * 15); }
.pr-cue-arrows i{
    position:absolute; left:50%; top:calc(var(--pr-u) * 5);
    width:calc(var(--pr-u) * 8); height:calc(var(--pr-u) * 8); margin-left:calc(var(--pr-u) * -4);
    border-left:calc(var(--pr-u) * 1.6) solid var(--pr-accent); border-top:calc(var(--pr-u) * 1.6) solid var(--pr-accent);
    transform:rotate(45deg); opacity:0;
    animation:pr-cue-up 1.8s cubic-bezier(.3,.6,.3,1) infinite;
}
.pr-cue-arrows i + i{ animation-delay:.3s; }
@keyframes pr-cue-up{
    0%{ opacity:0; transform:translateY(calc(var(--pr-u) * 6)) rotate(45deg); }
    35%{ opacity:1; }
    100%{ opacity:0; transform:translateY(calc(var(--pr-u) * -5)) rotate(45deg); }
}
.pr-cue b{
    display:block; margin-top:calc(var(--pr-u) * 1);
    font-family:"Cinzel", "Cormorant Garamond", Georgia, serif; font-weight:600;
    font-size:calc(var(--pr-u) * 8.6); letter-spacing:.2em; text-transform:uppercase; white-space:nowrap;
    padding-left:.2em;
}
.pr-cue .pr-cue-mouse{ display:none; }
@media (hover:hover) and (pointer:fine){
    .pr-cue .pr-cue-touch{ display:none; }
    .pr-cue .pr-cue-mouse{ display:block; }
    /* with a mouse the page moves down: the chevrons point down */
    .pr-cue-arrows i{ top:calc(var(--pr-u) * 1); animation-name:pr-cue-down; }
}
@keyframes pr-cue-down{
    0%{ opacity:0; transform:translateY(calc(var(--pr-u) * -4)) rotate(225deg); }
    35%{ opacity:1; }
    100%{ opacity:0; transform:translateY(calc(var(--pr-u) * 6)) rotate(225deg); }
}
@media (prefers-reduced-motion:reduce){
    .pr-cue-arrows i{ animation:none; opacity:1; }
    .pr-cue-arrows i + i{ display:none; }
}

/* ==================================================================
   ENJIN MOTION PRISTAGE
   ------------------------------------------------------------------
   Tiga lapisan gerakan:
     1. Ken Burns  — latar belakang zoom perlahan tanpa henti
     2. Parallax   — lapisan latar bergerak lebih perlahan dari teks
     3. Reveal     — setiap node masuk dengan animasinya sendiri
   Semua boleh dipilih per-node dalam editor backend.
   ================================================================== */

/* ---- 1. Ken Burns pada latar ---- */
.pr-bg{
    transform:scale(1.06);
    transition:transform 1.6s cubic-bezier(.22,.61,.36,1);
    will-change:transform;
}
.pr-card.is-live .pr-bg{
    animation:pr-kenburns 34s ease-in-out infinite alternate;
}
@keyframes pr-kenburns{
    0%  { transform:scale(1.05) translate3d(0,0,0); }
    50% { transform:scale(1.13) translate3d(-1.2%,-1.6%,0); }
    100%{ transform:scale(1.07) translate3d(1.1%,-0.8%,0); }
}

/* ---- 2. Parallax ---- */
.pr-sec-layer{
    will-change:transform;
    transition:transform .18s linear;
}
.pr-sec-bg{ transform:translate3d(0,calc(var(--pr-par,0) * 26px),0) scale(1.1); }
.pr-sec-fg{ transform:translate3d(0,calc(var(--pr-par,0) * -34px),0) scale(1.04); }
.pr-fg{
    transform:translate3d(0,calc(var(--pr-scroll,0) * -18px),0);
    transition:transform .3s linear;
    will-change:transform;
}

/* Kad menyusut sedikit semasa section bertukar — kesan "morph". */
.pr-sec{
    transition:opacity .7s ease, transform .9s cubic-bezier(.22,.61,.36,1), filter .9s ease;
}
/* Hanya section yang SUDAH DILEPASI dikaburkan (kesan morph keluar).
   Section yang belum sampai TIDAK disembunyikan: ia berada di luar
   skrin dalam bekas scroll, jadi menyembunyikannya tiada faedah — dan
   jika kelas is-next tersangkut, section yang sedang dilihat akan
   menjadi telus serta kabur. Itulah punca kad kelihatan kabur. */
.pr-card.is-ready .pr-sec.is-past:not(.is-active){
    opacity:0; transform:scale(1.07); filter:blur(7px);
}

/* ---- 3. Reveal setiap node ---- */
.pr-node .pr-in{
    display:block;
    transition:
        opacity 1.05s cubic-bezier(.19,1,.22,1),
        transform 1.15s cubic-bezier(.19,1,.22,1),
        filter 1.05s cubic-bezier(.19,1,.22,1),
        letter-spacing 1.2s cubic-bezier(.19,1,.22,1),
        clip-path 1.25s cubic-bezier(.19,1,.22,1);
    will-change:opacity,transform,filter;
}

/* Keadaan mula (section belum aktif) */
.pr-card.is-ready .pr-sec:not(.is-active) .pr-node[data-anim="fade-up"]   .pr-in{ opacity:0; transform:translateY(34px); }
.pr-card.is-ready .pr-sec:not(.is-active) .pr-node[data-anim="fade-down"] .pr-in{ opacity:0; transform:translateY(-30px); }
.pr-card.is-ready .pr-sec:not(.is-active) .pr-node[data-anim="fade-back"] .pr-in{ opacity:0; transform:scale(.82); filter:blur(4px); }
.pr-card.is-ready .pr-sec:not(.is-active) .pr-node[data-anim="zoom-soft"] .pr-in{ opacity:0; transform:scale(1.14); filter:blur(8px); }
.pr-card.is-ready .pr-sec:not(.is-active) .pr-node[data-anim="slide-left"]  .pr-in{ opacity:0; transform:translateX(-52px); }
.pr-card.is-ready .pr-sec:not(.is-active) .pr-node[data-anim="slide-right"] .pr-in{ opacity:0; transform:translateX(52px); }
.pr-card.is-ready .pr-sec:not(.is-active) .pr-node[data-anim="blur-in"]   .pr-in{ opacity:0; filter:blur(16px); letter-spacing:.22em; transform:scale(1.04); }
.pr-card.is-ready .pr-sec:not(.is-active) .pr-node[data-anim="tilt-in"]   .pr-in{ opacity:0; transform:perspective(700px) rotateX(38deg) translateY(30px); transform-origin:bottom center; }
.pr-card.is-ready .pr-sec:not(.is-active) .pr-node[data-anim="flip-up"]   .pr-in{ opacity:0; transform:perspective(800px) rotateX(72deg) translateY(26px); transform-origin:bottom center; }
.pr-card.is-ready .pr-sec:not(.is-active) .pr-node[data-anim="drift-in"]  .pr-in{ opacity:0; transform:translate3d(-14px,26px,0) rotate(-2.4deg) scale(.96); }
.pr-card.is-ready .pr-sec:not(.is-active) .pr-node[data-anim="curtain"]   .pr-in{ opacity:0; clip-path:inset(0 50% 0 50%); }
.pr-card.is-ready .pr-sec:not(.is-active) .pr-node[data-anim="arch-open"] .pr-in{ opacity:0; clip-path:inset(0 0 100% 0); transform:translateY(14px); }
.pr-card.is-ready .pr-sec:not(.is-active) .pr-node[data-anim="mask-up"]   .pr-in{ opacity:0; clip-path:inset(100% 0 0 0); transform:translateY(24px); }
.pr-card.is-ready .pr-sec:not(.is-active) .pr-node[data-anim="circle-up"] .pr-in{ opacity:0; clip-path:circle(0% at 50% 100%); transform:translateY(20px); }
.pr-card.is-ready .pr-sec:not(.is-active) .pr-node[data-anim="morph"]     .pr-in{ opacity:0; transform:scale(.9) translateY(20px); filter:blur(10px) saturate(1.4); }
.pr-card.is-ready .pr-sec:not(.is-active) .pr-node[data-anim="emboss"]    .pr-in{ opacity:0; transform:scale(.97); filter:blur(3px) contrast(.7); }
.pr-card.is-ready .pr-sec:not(.is-active) .pr-node[data-anim="letter-rise"] .pr-in{ opacity:0; }
.pr-card.is-ready .pr-sec:not(.is-active) .pr-node[data-anim="letter-fade"] .pr-in{ opacity:0; }

/* Keadaan akhir */
.pr-card.is-ready .pr-sec.is-active .pr-node[data-anim="curtain"]   .pr-in{ clip-path:inset(0 0 0 0); }
.pr-card.is-ready .pr-sec.is-active .pr-node[data-anim="arch-open"] .pr-in{ clip-path:inset(0 0 0 0); }
.pr-card.is-ready .pr-sec.is-active .pr-node[data-anim="mask-up"]   .pr-in{ clip-path:inset(0 0 0 0); }
.pr-card.is-ready .pr-sec.is-active .pr-node[data-anim="circle-up"] .pr-in{ clip-path:circle(150% at 50% 100%); }

.pr-node[data-anim="none"] .pr-in{
    opacity:1 !important; transform:none !important;
    filter:none !important; clip-path:none !important;
}

/* ---- Reveal huruf demi huruf ---- */
.pr-char{
    display:inline-block;
    white-space:pre;
    transition:
        opacity .9s cubic-bezier(.19,1,.22,1),
        transform 1s cubic-bezier(.19,1,.22,1),
        filter .9s ease;
    transition-delay:calc(var(--pr-i, 0) * 42ms);
    will-change:opacity,transform;
}
.pr-card.is-ready .pr-sec:not(.is-active) .pr-node[data-anim="letter-rise"] .pr-char{
    opacity:0; transform:translateY(0.7em) rotate(3deg);
}
.pr-card.is-ready .pr-sec:not(.is-active) .pr-node[data-anim="letter-fade"] .pr-char{
    opacity:0; filter:blur(9px); transform:scale(1.22);
}
.pr-card.is-ready .pr-sec.is-active .pr-node[data-anim="letter-rise"] .pr-in,
.pr-card.is-ready .pr-sec.is-active .pr-node[data-anim="letter-fade"] .pr-in{ opacity:1; }

/* ---- Ornamen yang hidup sepanjang masa ---- */
/* Node berparallax digerakkan oleh JS melalui --pr-shift. */
.pr-node[data-par]{
    transform:translate3d(0,var(--pr-shift,0px),0);
    transition:transform .16s linear;
    will-change:transform;
}

.pr-node[data-float="1"]{ animation:pr-drift 9s ease-in-out infinite; }
.pr-node[data-float="2"]{ animation:pr-sway 11s ease-in-out infinite; }
.pr-node[data-float="3"]{ animation:pr-breathe 7s ease-in-out infinite; }
@keyframes pr-drift{
    0%,100%{ transform:translate3d(0,0,0); }
    50%{ transform:translate3d(0,calc(var(--pr-u) * -7),0); }
}
@keyframes pr-sway{
    0%,100%{ transform:rotate(-1.6deg) translate3d(0,0,0); }
    50%{ transform:rotate(1.6deg) translate3d(calc(var(--pr-u) * 4),calc(var(--pr-u) * -4),0); }
}
@keyframes pr-breathe{
    0%,100%{ transform:scale(1); opacity:.9; }
    50%{ transform:scale(1.05); opacity:1; }
}

/* ---- Kilauan emas pada teks aksen ---- */
.pr-node[data-shine="1"] .pr-in{
    background:linear-gradient(100deg,
        currentColor 0%, currentColor 38%,
        rgba(255,255,255,.92) 48%, rgba(255,255,255,.92) 52%,
        currentColor 62%, currentColor 100%);
    background-size:250% 100%;
    -webkit-background-clip:text; background-clip:text;
    -webkit-text-fill-color:transparent;
    animation:pr-shine 5.5s ease-in-out infinite;
}
@keyframes pr-shine{
    0%,100%{ background-position:180% 0; }
    55%{ background-position:-80% 0; }
}

/* ---- Butiran halus pada kertas ---- */
.pr-card::after{
    content:''; position:absolute; inset:0; z-index:11; pointer-events:none;
    opacity:.35; mix-blend-mode:multiply;
    background-image:
        radial-gradient(circle at 18% 24%, rgba(120,90,70,.05) 0 1px, transparent 2px),
        radial-gradient(circle at 62% 68%, rgba(120,90,70,.05) 0 1px, transparent 2px),
        radial-gradient(circle at 84% 32%, rgba(120,90,70,.04) 0 1px, transparent 2px);
    background-size:37px 37px, 53px 53px, 71px 71px;
}
.pr-card.pr-no-grain::after{ display:none; }

/* Vignette lembut supaya kad nampak seperti kertas sebenar */
.pr-card::before{
    content:''; position:absolute; inset:0; z-index:10; pointer-events:none;
    background:radial-gradient(120% 90% at 50% 42%, transparent 52%, rgba(60,38,26,.13) 100%);
}

/* ---- Section aktif: statik / cetak ---- */
.pr-card.is-static .pr-in,
.pr-card.is-static .pr-char{
    opacity:1 !important; transform:none !important;
    filter:none !important; clip-path:none !important;
}
.pr-card.is-static .pr-sec{ opacity:1 !important; transform:none !important; filter:none !important; }
.pr-card.is-static .pr-bg{ animation:none; }

@media (prefers-reduced-motion:reduce){
    .pr-node .pr-in, .pr-char, .pr-sec{ transition:none !important; }
    .pr-node .pr-in, .pr-char{ opacity:1 !important; transform:none !important; filter:none !important; clip-path:none !important; }
    .pr-card .pr-bg{ animation:none !important; }
    .pr-node[data-float], .pr-node[data-shine="1"] .pr-in{ animation:none !important; }
}

/* ================================================================
   Open Card — sampul pembuka (v2.1.0)
   5 animasi: envelope | doors | curtain | flip | lift
   Custom image (jika ada) dibawa melalui CSS var --oc-img.
   ================================================================ */
.dis-open-card{ position:absolute; inset:0; z-index:30; overflow:hidden; cursor:pointer;
    font-family:Georgia,'Times New Roman',serif; -webkit-tap-highlight-color:transparent; touch-action:manipulation; user-select:none; }
.dis-open-card .dis-oc-piece, .dis-open-card .dis-oc-cover, .dis-open-card .dis-oc-flap{
    position:absolute; inset:0; background-size:cover; background-position:center; background-repeat:no-repeat; will-change:transform,opacity; }
.dis-open-card .dis-oc-left, .dis-open-card .dis-oc-right{ z-index:2;
    background-image:var(--oc-img, linear-gradient(160deg,#f8f1e4,#eaddc4 55%,#d8c5a0));
    transition:transform 1.15s cubic-bezier(.77,0,.18,1), opacity .6s ease .55s; }
.dis-open-card .dis-oc-cover{ z-index:3;
    background-image:var(--oc-img, linear-gradient(155deg,#f9f2e5,#eee0c4 60%,#dcc9a2));
    transition:transform 1.05s cubic-bezier(.7,0,.25,1), opacity .7s ease .3s; }
.dis-open-card .dis-oc-flap{ z-index:4; transform-origin:50% 0;
    background-image:var(--oc-img, linear-gradient(170deg,#fbf5e9,#e7d7b6));
    transition:transform .85s cubic-bezier(.55,0,.3,1), opacity .5s ease .55s;
    clip-path:polygon(0 0, 100% 0, 50% 58%); }
.dis-open-card .dis-oc-seal{ position:absolute; left:50%; top:58%; transform:translate(-50%,-50%); z-index:5;
    width:52px; height:52px; display:grid; place-items:center; border-radius:50%;
    background:radial-gradient(circle at 32% 28%, #e7c476, #b08d4f 62%, #8a6a2e);
    color:#fff7e3; font-size:20px; box-shadow:0 8px 20px rgba(93,66,25,.4), inset 0 0 0 2px rgba(255,247,225,.5);
    transition:opacity .4s ease, transform .4s ease; }
.dis-open-card .dis-oc-inner{ position:absolute; left:8%; right:8%; top:50%; transform:translateY(-50%); z-index:6;
    display:flex; flex-direction:column; gap:10px; text-align:center; pointer-events:none;
    transition:opacity .35s ease, transform .35s ease; }
.dis-oc-kicker{ font-size:calc(var(--pr-u) * 11); letter-spacing:.34em; text-transform:uppercase; color:#a5813d; }
.dis-oc-title{ font-size:calc(var(--pr-u) * 30); font-style:italic; line-height:1.15; color:#3a3126; text-shadow:0 1px 0 rgba(255,255,255,.45); }
.dis-open-card .dis-oc-btn{ position:absolute; left:50%; bottom:9%; transform:translateX(-50%); z-index:7;
    border:0; padding:12px 26px; border-radius:999px; cursor:pointer; font-family:inherit;
    background:linear-gradient(135deg,#e2c06c,#b08d4f); color:#2b2416; font-weight:700; font-size:12px;
    letter-spacing:.14em; text-transform:uppercase; white-space:nowrap;
    box-shadow:0 10px 26px rgba(93,66,25,.35); animation:dis-oc-pulse 2.2s ease-in-out infinite;
    transition:opacity .35s ease; }
.dis-open-card.is-open{ pointer-events:none; }
.dis-open-card.is-open .dis-oc-inner{ opacity:0; transform:translateY(-58%); }
.dis-open-card.is-open .dis-oc-btn{ opacity:0; }
.dis-open-card.is-open .dis-oc-seal{ opacity:0; transform:translate(-50%,-50%) scale(1.5); }
.dis-open-card.is-done{ display:none !important; }
/* Doors — pintu gerbang */
.dis-oc-doors .dis-oc-flap, .dis-oc-doors .dis-oc-cover, .dis-oc-doors .dis-oc-seal{ display:none; }
.dis-oc-doors .dis-oc-left{ clip-path:polygon(0 0, 50.4% 0, 50.4% 100%, 0 100%);
    background-image:var(--oc-img, linear-gradient(135deg,#faf5ea,#ecdfc4)); }
.dis-oc-doors .dis-oc-right{ clip-path:polygon(49.6% 0, 100% 0, 100% 100%, 49.6% 100%);
    background-image:var(--oc-img, linear-gradient(135deg,#ecdfc4,#f5ecd9)); }
.dis-oc-doors .dis-oc-left::before, .dis-oc-doors .dis-oc-right::before{ content:''; position:absolute; top:0; bottom:0; width:3px;
    background:linear-gradient(#e2c473,#b08d4f); }
.dis-oc-doors .dis-oc-left::before{ right:0; } .dis-oc-doors .dis-oc-right::before{ left:0; }
.dis-oc-doors .dis-oc-left::after, .dis-oc-doors .dis-oc-right::after{ content:''; position:absolute; inset:12px;
    border:1px solid rgba(176,141,79,.5); pointer-events:none; }
.dis-oc-doors.is-open .dis-oc-left{ transform:translateX(-102%); }
.dis-oc-doors.is-open .dis-oc-right{ transform:translateX(102%); }
/* Curtain — tirai elegan */
.dis-oc-curtain .dis-oc-flap, .dis-oc-curtain .dis-oc-cover, .dis-oc-curtain .dis-oc-seal{ display:none; }
.dis-oc-curtain .dis-oc-left, .dis-oc-curtain .dis-oc-right{ transition-duration:1.25s;
    background-image:var(--oc-img, linear-gradient(180deg,#8a2436,#671523)); }
.dis-oc-curtain .dis-oc-left::after, .dis-oc-curtain .dis-oc-right::after{ content:''; position:absolute; inset:0; pointer-events:none;
    background:repeating-linear-gradient(90deg, rgba(0,0,0,.32) 0 7px, rgba(0,0,0,0) 7px 22px, rgba(255,236,190,.14) 22px 26px, rgba(0,0,0,0) 26px 42px); }
.dis-oc-curtain .dis-oc-left{ clip-path:polygon(0 0, 50.4% 0, 50.4% 100%, 0 100%); }
.dis-oc-curtain .dis-oc-right{ clip-path:polygon(49.6% 0, 100% 0, 100% 100%, 49.6% 100%); }
.dis-oc-curtain.is-open .dis-oc-left{ transform:translateX(-103%); }
.dis-oc-curtain.is-open .dis-oc-right{ transform:translateX(103%); }
.dis-oc-curtain .dis-oc-kicker{ color:#e5c67c; }
.dis-oc-curtain .dis-oc-title{ color:#fdf3dd; text-shadow:0 2px 14px rgba(0,0,0,.5); }
/* Flip — kad buku terbuka 3D */
.dis-oc-flip{ perspective:1300px; }
.dis-oc-flip .dis-oc-left, .dis-oc-flip .dis-oc-right, .dis-oc-flip .dis-oc-flap, .dis-oc-flip .dis-oc-seal{ display:none; }
.dis-oc-flip .dis-oc-cover{ transform-origin:left center; backface-visibility:hidden;
    background-image:var(--oc-img, linear-gradient(150deg,#f8f1e2,#e8d8b6)); }
.dis-oc-flip .dis-oc-cover::after{ content:''; position:absolute; inset:12px; border:1px solid rgba(176,141,79,.55);
    box-shadow:inset 0 0 0 4px rgba(176,141,79,.14); pointer-events:none; }
.dis-oc-flip.is-open .dis-oc-cover{ transform:rotateY(-168deg); }
/* Lift — angkat elegan dengan shimmer */
.dis-oc-lift .dis-oc-left, .dis-oc-lift .dis-oc-right, .dis-oc-lift .dis-oc-flap, .dis-oc-lift .dis-oc-seal{ display:none; }
.dis-oc-lift .dis-oc-cover{ background-image:var(--oc-img, linear-gradient(180deg,#fdf9f0,#ecdcbc));
    box-shadow:0 18px 40px rgba(60,42,18,.35); }
.dis-oc-lift .dis-oc-cover::after{ content:''; position:absolute; inset:0; pointer-events:none;
    background:linear-gradient(105deg, transparent 38%, rgba(255,238,196,.6) 50%, transparent 62%); transform:translateX(-130%); }
.dis-oc-lift.is-open .dis-oc-cover{ transform:translateY(-112%); }
.dis-oc-lift.is-open .dis-oc-cover::after{ animation:dis-oc-shimmer 1s ease .05s both; }
/* Envelope — sampul emas dengan segel */
.dis-oc-envelope .dis-oc-right{ display:none; }
.dis-oc-envelope .dis-oc-cover{ clip-path:polygon(0 40%, 50% 64%, 100% 40%, 100% 100%, 0 100%);
    background-image:var(--oc-img, linear-gradient(160deg,#f6eedd,#e6d5b2)); }
.dis-oc-envelope.is-open .dis-oc-flap{ transform:rotateX(-178deg); }
.dis-oc-envelope.is-open .dis-oc-cover{ transform:translateY(16%); opacity:0; transition-delay:.45s; }
.dis-oc-envelope.is-open .dis-oc-left{ opacity:0; transition-delay:.55s; }
@keyframes dis-oc-pulse{ 0%,100%{ box-shadow:0 10px 26px rgba(93,66,25,.35), 0 0 0 0 rgba(220,184,103,.55); }
    50%{ box-shadow:0 10px 26px rgba(93,66,25,.35), 0 0 0 12px rgba(220,184,103,0); } }
@keyframes dis-oc-shimmer{ from{ transform:translateX(-130%);} to{ transform:translateX(130%);} }
/* Kad muncul lembut selepas sampul terbuka */
.oc-reveal .dis-layer, .oc-reveal .dis-scroller{ animation:dis-oc-reveal 1.35s cubic-bezier(.22,.61,.36,1) both; }
@keyframes dis-oc-reveal{ from{ transform:scale(.94); opacity:.35; filter:blur(2px);} to{ transform:scale(1); opacity:1; filter:blur(0);} }
@media (prefers-reduced-motion: reduce){
    .dis-open-card *, .oc-reveal .dis-layer, .oc-reveal .dis-scroller{ transition-duration:.01s !important; animation-duration:.01s !important; }
}

/* ================================================================
   Open Card FX — kesan animasi 50 jenis (v2.2.0)
   Partikel dijana oleh dis-effects.js dengan CSS vars:
   --x --y (posisi), --c (warna), --s (saiz), --dx (layar),
   --rr (putaran), --o (opacity), --d (durasi)
   ================================================================ */
.dis-oc-fx{ position:absolute; inset:0; z-index:9; pointer-events:none; overflow:hidden; }
.dis-fx-p{ position:absolute; left:var(--x); top:var(--y); opacity:0;
    animation-timing-function:linear; animation-iteration-count:infinite; will-change:transform,top,left; }
.dis-fx-g{ display:block; color:var(--c); font-size:var(--s); line-height:1; font-style:normal;
    text-shadow:0 1px 2px rgba(0,0,0,.12); }
.dis-fx-glow{ text-shadow:0 0 6px var(--c), 0 0 14px var(--c); }
.dis-fx-blur{ filter:blur(2px); opacity:.8; }
.dis-fx-svg{ width:var(--s); height:calc(var(--s) * 1.25); background-size:contain; background-repeat:no-repeat; background-position:center; }
.dis-fx-rect{ width:calc(var(--s) * .45); height:calc(var(--s) * .78); background:var(--c); border-radius:1px; }
@keyframes dis-fx-fall{
    0%{ top:-12%; transform:translateX(0) rotate(0deg); opacity:0; }
    10%{ opacity:var(--o); }
    50%{ transform:translateX(var(--dx)) rotate(calc(var(--rr) * .5)); }
    90%{ opacity:var(--o); }
    100%{ top:112%; transform:translateX(calc(var(--dx) * -1)) rotate(var(--rr)); opacity:0; }
}
@keyframes dis-fx-rise{
    0%{ top:112%; transform:translateX(0) rotate(0deg); opacity:0; }
    10%{ opacity:var(--o); }
    50%{ transform:translateX(var(--dx)) rotate(calc(var(--rr) * .5)); }
    90%{ opacity:var(--o); }
    100%{ top:-14%; transform:translateX(calc(var(--dx) * -1)) rotate(var(--rr)); opacity:0; }
}
@keyframes dis-fx-across{
    0%{ left:-14%; transform:translateY(0) rotate(0deg); opacity:0; }
    12%{ opacity:var(--o); }
    50%{ transform:translateY(var(--dx)) rotate(calc(var(--rr) * .4)); }
    88%{ opacity:var(--o); }
    100%{ left:114%; transform:translateY(calc(var(--dx) * -1)) rotate(calc(var(--rr) * .8)); opacity:0; }
}
@keyframes dis-fx-swirl{
    0%{ top:-12%; left:var(--x); transform:rotate(0deg); opacity:0; }
    10%{ opacity:var(--o); }
    25%{ left:calc(var(--x) + 6%); }
    50%{ left:calc(var(--x) - 6%); }
    75%{ left:calc(var(--x) + 4%); }
    90%{ opacity:var(--o); }
    100%{ top:112%; left:var(--x); transform:rotate(var(--rr)); opacity:0; }
}
@keyframes dis-fx-twinkle{
    0%,100%{ opacity:0; transform:scale(.4) rotate(0deg); }
    50%{ opacity:var(--o); transform:scale(1) rotate(45deg); }
}
@keyframes dis-fx-drift{
    0%{ transform:translate(0,0) rotate(0deg); opacity:0; }
    20%{ opacity:var(--o); }
    50%{ transform:translate(var(--dx), calc(var(--dx) * -.6)) rotate(calc(var(--rr) * .3)); }
    80%{ opacity:var(--o); }
    100%{ transform:translate(calc(var(--dx) * -.7), var(--dx)) rotate(calc(var(--rr) * .6)); opacity:0; }
}
/* FX yang kekal selepas kad dibuka (dipindahkan ke screen) */
.dis-phone-screen > .dis-oc-fx, .dis-canvas > .dis-oc-fx{ z-index:12; }

/* ================================================================
   Butang muzik kad (v2.3.0) — ♪ main/pause lagu latar
   ================================================================ */
.dis-music-toggle{ position:absolute; top:44px; right:12px; z-index:8; width:38px; height:38px; border-radius:50%;
    border:1px solid rgba(255,247,225,.55); background:rgba(43,36,22,.45); color:#fff7e3; font-size:16px; line-height:1;
    cursor:pointer; backdrop-filter:blur(4px); display:grid; place-items:center; padding:0; overflow:hidden; }
.dis-music-toggle.is-playing{ background:rgba(176,141,79,.8); animation:dis-music-pulse 1.6s ease-in-out infinite; }
@keyframes dis-music-pulse{ 0%,100%{ box-shadow:0 0 0 0 rgba(226,192,108,.55);} 50%{ box-shadow:0 0 0 10px rgba(226,192,108,0);} }

/* ================================================================
   Gallery center-mode infinite loop (v2.4.0) — kad tengah aktif,
   tepi kelihatan sedikit, auto slide kiri + loop terus.
   (Gaya .dis-gallery-item dipinjam dari blok center-mode lama.)
   ================================================================ */
.dis-gallery-loop{ position:relative; display:flex; align-items:center; gap:10px; margin:0 auto; max-width:1100px; }
.dis-gallery-loop-viewport{ overflow:hidden; width:100%; padding:30px 0 34px; }
.dis-gallery-loop-track{ display:flex; gap:18px; align-items:stretch; will-change:transform; }
.dis-gallery-page .dis-gallery-loop .dis-gallery-arrow{ position:relative; flex:0 0 42px; top:auto; left:auto; right:auto; }
@media (max-width:700px){
    .dis-gallery-loop-track{ gap:14px; }
    .dis-gallery-page .dis-gallery-item{ width:190px !important; flex:0 0 190px !important; }
}
/* ================================================================
   Gallery premium polish (v2.4.5) — kad tengah bersinar elegan,
   butang emas penuh di tengah bawah kad; kad sisi tampil bersih
   (butang tersorok sampai jadi kad tengah). Loop tetap seperti asal.
   ================================================================ */
.dis-gallery-page .dis-gallery-loop{ max-width:1180px; gap:14px; }
.dis-gallery-page .dis-gallery-loop .dis-gallery-item{
    display:flex; flex-direction:column; align-items:stretch;
    flex:0 0 248px; width:248px; min-width:0;
    padding:10px 10px 16px;
    border:1px solid #eedfc2;
    border-radius:22px;
    background:linear-gradient(180deg,#fffdf8,#f9f2e2);
    box-shadow:0 14px 30px rgba(86,62,30,.08);
    transform:scale(.88) translateY(9px); opacity:.5;
    transition:transform .55s cubic-bezier(.22,.61,.36,1), opacity .55s ease, box-shadow .55s ease, border-color .55s ease;
    will-change:transform;
}
.dis-gallery-page .dis-gallery-loop .dis-gallery-item.is-center{
    transform:scale(1.05) translateY(0); opacity:1;
    border-color:#dfc48b;
    box-shadow:0 30px 70px rgba(96,66,27,.24), 0 0 0 1px rgba(198,164,101,.3);
    z-index:2;
}
.dis-gallery-page .dis-gallery-loop .dis-gallery-thumb{
    display:block; aspect-ratio:3/4; border-radius:15px; overflow:hidden;
    background-color:#efe7d8; background-size:cover; background-position:center;
    box-shadow:inset 0 0 0 1px rgba(180,148,88,.35);
}
.dis-gallery-page .dis-gallery-loop .dis-gallery-item .dis-btn{
    display:flex; align-items:center; justify-content:center;
    margin:14px 4px 0; padding:12px 12px; max-width:100%;
    border-radius:999px; font-size:12.5px; font-weight:700; letter-spacing:.04em;
    text-align:center; white-space:nowrap; line-height:1.2;
    background:linear-gradient(135deg,#d8b672 0%,#a87e2f 55%,#93691f 100%);
    color:#fff; text-shadow:0 1px 2px rgba(90,60,15,.35);
    box-shadow:0 10px 22px rgba(144,104,40,.3);
    opacity:0; transform:translateY(6px); pointer-events:none;
    transition:opacity .4s ease .12s, transform .4s ease, box-shadow .25s ease, filter .25s ease;
}
.dis-gallery-page .dis-gallery-loop .dis-gallery-item.is-center .dis-btn{
    opacity:1; transform:none; pointer-events:auto;
}
.dis-gallery-page .dis-gallery-loop .dis-gallery-item .dis-btn:hover{
    transform:translateY(-2px); box-shadow:0 14px 30px rgba(144,104,40,.45); filter:brightness(1.06);
}
/* Hi-lite halus di penjuru atas kad tengah */
.dis-gallery-page .dis-gallery-loop .dis-gallery-item.is-center::before{
    content:''; position:absolute; top:0; left:10%; right:10%; height:1px;
    background:linear-gradient(90deg, transparent, rgba(255,255,255,.95), transparent);
}
@media (max-width:700px){
    .dis-gallery-page .dis-gallery-loop .dis-gallery-item{ flex:0 0 186px !important; width:186px; padding:8px 8px 12px; }
    .dis-gallery-page .dis-gallery-loop .dis-gallery-item .dis-btn{ font-size:11px; padding:10px 8px; margin-top:10px; }
}
/* Badges bergaya & info tajuk+harga (v2.4.6) — setiap badge ada warna
   gradient tersendiri; tajuk kecil + harga di bawah thumbnail. */
.dis-gallery-page .dis-gallery-loop .dis-gallery-badges{
    position:absolute; top:9px; left:9px; z-index:3;
    display:flex; flex-direction:column; align-items:flex-start; gap:5px;
    margin:0; padding:0; border:0; border-radius:0; background:none; box-shadow:none;
    max-width:calc(100% - 18px); backdrop-filter:none;
}
.dis-gallery-page .dis-gallery-loop .dis-gallery-badge{
    display:inline-flex; align-items:center; gap:4px;
    padding:4px 9px; border-radius:999px;
    font-size:9.5px; font-weight:800; letter-spacing:.04em; line-height:1.25; white-space:nowrap;
    color:#fff; text-shadow:0 1px 2px rgba(0,0,0,.28);
    box-shadow:0 5px 14px rgba(24,15,4,.24), inset 0 1px 0 rgba(255,255,255,.28);
    border:1px solid rgba(255,255,255,.22);
}
.dis-gallery-badge.is-hot{ background:linear-gradient(135deg,#ff8a4c 0%,#e63946 100%); }
.dis-gallery-badge.is-popular{ background:linear-gradient(135deg,#ffd36e 0%,#d49a1f 100%); color:#5a3d03; text-shadow:none; }
.dis-gallery-badge.is-new{ background:linear-gradient(135deg,#4ade80 0%,#0d9488 100%); }
.dis-gallery-badge.is-discount{ background:linear-gradient(135deg,#34d399 0%,#02844c 100%); }
.dis-gallery-badge.is-featured{ background:linear-gradient(135deg,#c084fc 0%,#7c3aed 100%); }
.dis-gallery-badge.is-limited{ background:linear-gradient(135deg,#fb7185 0%,#be123c 100%); }
.dis-gallery-page .dis-gallery-loop .dis-gallery-info{
    display:flex; align-items:center; justify-content:space-between; gap:8px;
    margin:11px 6px 0;
}
.dis-gallery-page .dis-gallery-loop .dis-gallery-info .dis-gallery-title{
    font-family:Georgia,'Times New Roman',serif; font-size:14px; font-weight:600;
    color:#3a3126; letter-spacing:.01em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0;
}
.dis-gallery-page .dis-gallery-loop .dis-gallery-info .dis-gallery-price{
    flex:0 0 auto; font-size:11px; font-weight:800; color:#9a6f22; white-space:nowrap;
    padding:2px 9px; border-radius:999px;
    background:rgba(216,182,114,.22); border:1px solid rgba(168,126,47,.32);
}
@media (max-width:700px){
    .dis-gallery-page .dis-gallery-loop .dis-gallery-badge{ font-size:8.5px; padding:3px 7px; }
    .dis-gallery-page .dis-gallery-loop .dis-gallery-info .dis-gallery-title{ font-size:12.5px; }
    .dis-gallery-page .dis-gallery-loop .dis-gallery-info .dis-gallery-price{ font-size:10px; padding:1px 7px; }
}

/* ================================================================
   Section entrance animations (v2.4.2) — ikut "Scroll animation"
   backend. Seluruh section (background + kandungan) dianimasikan
   bersama supaya kesan circle/curtain/fade kelihatan pada background.
   JS tambah .dis-anim-play bila section muncul (auto & manual scroll).
   ================================================================ */
.dis-section.dis-anim-play{ animation-duration:.95s; animation-timing-function:cubic-bezier(.22,.61,.36,1); animation-fill-mode:both; }
.dis-section[data-anim="fade-up"].dis-anim-play{ animation-name:dis-sec-fadeup; }
.dis-section[data-anim="fade-back"].dis-anim-play{ animation-name:dis-sec-fadeback; }
.dis-section[data-anim="slide-left"].dis-anim-play{ animation-name:dis-sec-slideleft; }
.dis-section[data-anim="slide-right"].dis-anim-play{ animation-name:dis-sec-slideright; }
.dis-section[data-anim="circle-up"].dis-anim-play{ animation-name:dis-sec-circleup; }
.dis-section[data-anim="flip-up"].dis-anim-play{ animation-name:dis-sec-flipup; }
.dis-section[data-anim="blur-in"].dis-anim-play{ animation-name:dis-sec-blurin; }
.dis-section[data-anim="curtain"].dis-anim-play{ animation-name:dis-sec-curtain; }
@keyframes dis-sec-fadeup{ from{ opacity:0; transform:translateY(22px); } to{ opacity:1; transform:none; } }
@keyframes dis-sec-fadeback{ from{ opacity:0; transform:scale(.82); filter:blur(4px); } to{ opacity:1; transform:none; filter:none; } }
@keyframes dis-sec-slideleft{ from{ opacity:0; transform:translateX(-54px); } to{ opacity:1; transform:none; } }
@keyframes dis-sec-slideright{ from{ opacity:0; transform:translateX(54px); } to{ opacity:1; transform:none; } }
@keyframes dis-sec-circleup{ from{ clip-path:circle(0% at 50% 100%); opacity:.4; } to{ clip-path:circle(140% at 50% 100%); opacity:1; } }
@keyframes dis-sec-flipup{ from{ opacity:0; transform:perspective(900px) rotateX(58deg); } to{ opacity:1; transform:none; } }
@keyframes dis-sec-blurin{ from{ opacity:0; filter:blur(16px); } to{ opacity:1; filter:none; } }
@keyframes dis-sec-curtain{ from{ clip-path:inset(0 50% 0 50%); opacity:.55; } to{ clip-path:inset(0 0 0 0); opacity:1; } }


/* ==================================================================
   Mod rata (halaman Edit)
   ------------------------------------------------------------------
   Pelanggan perlu MELIHAT dan MENGISI, bukan menonton animasi.
   Semua helaian kekal jelas dan boleh di-scroll bebas.
   ================================================================== */
.pr-card.pr-flat .pr-scroller{
    scroll-snap-type:none;
    scroll-behavior:smooth;
}
.pr-card.pr-flat .pr-sec{
    opacity:1 !important;
    filter:none !important;
}
.pr-card.pr-flat:not(.px-sdt) .pr-sec{ transform:none !important; }
.pr-card.pr-flat .pr-in,
.pr-card.pr-flat .pr-char{
    opacity:1 !important;
    transform:none !important;
    filter:none !important;
    clip-path:none !important;
    letter-spacing:inherit;
    transition:none;
}
.pr-card.pr-flat .pr-bg{ animation:none; transform:scale(1.04); }
.pr-card.pr-flat .pr-sec-layer{ transform:none; }
.pr-card.pr-flat .pr-node[data-par]{ transform:none; }
.pr-card.pr-flat .pr-node[data-shine="1"] .pr-in,
.pr-card.is-static .pr-node[data-shine="1"] .pr-in{
    /* Kilauan emas menggunakan background-clip:text dengan text-fill
       telus. Pada kad statik (thumbnail) tiada animasi untuk menggerakkan
       kecerunan, dan nama boleh hilang sepenuhnya. Matikan di sini. */
    background:none;
    -webkit-text-fill-color:currentColor;
    -webkit-background-clip:border-box;
    background-clip:border-box;
    animation:none;
}

/* Sempadan halus antara helaian supaya pelanggan nampak di mana ia berakhir */
.pr-card.pr-flat .pr-sec + .pr-sec{
    box-shadow:0 calc(var(--pr-u) * -1) 0 rgba(120,90,70,.12);
}

/* Premium switch OFF on the Edit page: pages 4 onwards leave the preview */
/* Premium pages carry data-prem (the free photo gallery never does) */
.pr-card.pr-hide-premium .pr-sec[data-prem="1"]{ display:none; }

/* Edit page: the words being typed glow softly on the card */
.pr-card.pr-flat .pr-node.is-editing{
    outline:calc(var(--pr-u) * 1) dashed color-mix(in srgb,var(--pr-accent) 70%,transparent);
    outline-offset:calc(var(--pr-u) * 4);
    border-radius:calc(var(--pr-u) * 4);
    animation:pr-editing 1.8s ease-in-out infinite;
}
@keyframes pr-editing{
    0%,100%{ outline-color:color-mix(in srgb,var(--pr-accent) 70%,transparent); }
    50%{ outline-color:color-mix(in srgb,var(--pr-accent) 20%,transparent); }
}
@media (prefers-reduced-motion:reduce){
    .pr-card.pr-flat .pr-node.is-editing{ animation:none; }
}

/* ==================================================================
   SIGNATURE THEMES (5.0) — layers drawn by assets/js/dis-themes.js
   Order: backdrop 0 · frame 1 · pages 2 (florals inside, under words)
          ambient 11 · page sweep 14 · music 20 · opening 30
   Everything that moves animates transform / opacity only.
   ================================================================== */
.pr-card.px-theme{ background:var(--pr-paper); }
.pr-card.px-theme > .pr-bg{ display:none; }
.px-layer{ position:absolute; inset:0; pointer-events:none; overflow:hidden; }
.px-layer svg, .px-bloom svg, .px-open svg{ display:block; }
.px-backdrop{ z-index:0; }
.px-backdrop > svg, .px-frame > svg, .px-art{ position:absolute; inset:0; width:100%; height:100%; display:block; }
.px-frame{ z-index:1; }
/* cached art images: never selectable or draggable */
.px-img, .px-art{ display:block; width:100%; height:100%; user-select:none; -webkit-user-drag:none; pointer-events:none; }
.px-ambient{ z-index:11; }
.px-transit{ z-index:14; }
.px-bloom{ position:absolute; inset:0; z-index:0; pointer-events:none; }
/* The floral layer: fixed above the frame, under the words; it never
   scrolls. Each page's arrangement sits in the same place, stacked. */
.px-blooms{ z-index:1; }
/* thumbnails & cards without the watcher show only the cover's flowers */
.pr-card.is-static .px-blooms .px-bloom:not([data-px-sec="1"]),
.pr-card:not(.px-live):not(.is-static) .px-blooms .px-bloom:not([data-px-sec="1"]){ display:none; }

/* ---- Floral pieces ---- */
.px-piece{
    position:absolute;
    transform-origin:var(--ox) var(--oy);
    transform:rotate(var(--r)) scale(1);
    opacity:1;
}
/* A soft breeze: every piece has its own duration, strength and phase
   (set per piece by dis-themes.js), so nothing moves in unison. */
.px-sway{
    width:100%; height:100%;
    transform-origin:var(--ox) var(--oy);
    animation:px-breeze var(--sd,7s) ease-in-out var(--sdl,0s) infinite alternate;
}
.px-sway > svg, .px-sway > img{ width:100%; height:100%; display:block; }
/* bitmaps keep the sprite's own framing: sprays & grasses sit on their base */
.px-sway > img{ object-fit:contain; object-position:50% 100%; }
.px-k-bloom .px-sway > img, .px-k-sp .px-sway > img, .px-petal img, .px-glint img, .px-burst img{ object-fit:contain; object-position:50% 50%; }
@keyframes px-breeze{
    0%{ transform:rotate(calc(var(--sa,1.6deg) * -1 * var(--sk,1))) scale(1); }
    28%{ transform:rotate(calc(var(--sa,1.6deg) * .5 * var(--sk,1))) scale(1.012); }
    57%{ transform:rotate(calc(var(--sa,1.6deg) * -.25 * var(--sk,1))) scale(.997); }
    100%{ transform:rotate(calc(var(--sa,1.6deg) * var(--sk,1))) scale(1.008); }
}
.px-scene-firdaus, .px-scene-rimbun{ --sk:1.6; }
/* Still groups never sway; pages off screen rest (fewer moving layers). */
.px-leafdoor .px-sway,
.px-sweep-inner .px-sway,
.px-seal-sprig .px-sway,
.pr-card.px-live .px-bloom:not(.px-in) .px-sway,
.pr-card:not(.px-live):not(.is-static) .px-bloom:not([data-px-sec="1"]) .px-sway{ animation:none; }

/* ---- Opening & closing with the page ----
   Arriving: branches rise from their base first, then each flower opens
   from a tight bud, slowly, each on its own delay.
   Leaving: flowers fold back towards their stems, leaves settle, the
   arrangement grows lighter and fades — never a hard cut. */
.pr-card.px-live .px-bloom:not(.px-in) .px-piece{
    opacity:0;
    transform:rotate(calc(var(--r) + var(--cr,-16deg))) scale(var(--cs,.2));
    transition:transform 1.7s cubic-bezier(.55,.04,.4,1) var(--xd,0ms), opacity 1.4s ease var(--xd,0ms);
}
.pr-card.px-live .px-bloom.px-in .px-piece{
    transition:transform var(--gt,2.6s) cubic-bezier(.18,.86,.24,1) var(--d), opacity 1.5s ease var(--d);
}
.pr-card.px-live .px-bloom.px-in .px-piece.px-k-bloom{
    transition:transform var(--gt,2.8s) cubic-bezier(.24,1.16,.38,1) var(--d), opacity 1.3s ease var(--d);
}
/* wait behind the opening */
.pr-card.px-theme.px-gated:not(.px-revealed) .px-bloom .px-piece{
    opacity:0; transform:rotate(calc(var(--r) + var(--cr,-16deg))) scale(var(--cs,.2)); transition:none;
}
.pr-card.px-gated:not(.px-revealed) .pr-sec .pr-node .pr-in,
.pr-card.px-gated:not(.px-revealed) .pr-sec .pr-node .pr-rule{ opacity:0 !important; transition:none !important; }

/* ---- Line art that draws itself ---- */
.px-draw .px-stroke,
.px-k-line .px-stroke{ stroke-dasharray:1; stroke-dashoffset:0; }
.pr-card.px-theme.is-live .px-draw .px-stroke{ stroke-dashoffset:1; }
/* Long border lines fade in instead of drawing: drawing a line that runs
   round the whole card repaints the full screen every frame. The bow,
   corners, crests and sprigs still draw themselves. */
.px-frame .px-fade{ position:absolute; inset:0; opacity:1; transition:opacity 1.8s ease .2s; }
.pr-card.px-theme.is-live:not(.is-ready):not(.pr-flat) .px-frame .px-fade,
.pr-card.px-theme.px-gated:not(.px-revealed) .px-frame .px-fade{ opacity:0; }
.px-frame > svg.px-draw{ position:absolute; inset:0; width:100%; height:100%; }
.pr-card.px-theme.is-ready:not(.px-gated) .px-draw .px-stroke,
.pr-card.px-theme.px-revealed .px-draw .px-stroke{
    stroke-dashoffset:0;
    transition:stroke-dashoffset 3.2s cubic-bezier(.45,0,.2,1) .3s;
}
.pr-card.px-live .px-bloom:not(.px-in) .px-k-line .px-stroke{ stroke-dashoffset:1; transition:stroke-dashoffset .8s ease; }
.pr-card.px-live .px-bloom.px-in .px-k-line .px-stroke{ stroke-dashoffset:0; transition:stroke-dashoffset 1.8s ease var(--d); }

/* ---- Moving backdrops ---- */
.px-wave{ position:absolute; top:0; bottom:0; left:-6%; width:118%; will-change:transform; }
.px-wave > svg, .px-wave > img{ width:100%; height:100%; }
.px-wave-0{ animation:px-wave 9s ease-in-out infinite alternate; }
.px-wave-1{ animation:px-wave 13s ease-in-out -4s infinite alternate-reverse; }
.px-wave-2{ animation:px-wave 17s ease-in-out -7s infinite alternate; }
@keyframes px-wave{ from{ transform:translate3d(0,0,0); } to{ transform:translate3d(-8%,calc(var(--pr-u) * 4),0); } }
.px-sheen{
    position:absolute; inset:-30% -60%;
    background:linear-gradient(112deg, transparent 38%, rgba(255,255,255,.13) 47%, rgba(255,255,255,.04) 53%, transparent 62%);
    animation:px-sheen 10s ease-in-out infinite;
    will-change:transform;
}
@keyframes px-sheen{ 0%{ transform:translate3d(-35%,0,0); } 55%,100%{ transform:translate3d(35%,0,0); } }

/* ---- Ambient ---- */
.px-petal{
    position:absolute; top:-5%;
    width:calc(var(--pr-u) * 13 * var(--s)); height:calc(var(--pr-u) * 17 * var(--s));
    animation:px-fall var(--dur) linear var(--dl) infinite;
    will-change:transform, opacity;
}
.px-petal svg, .px-petal img{ width:100%; height:100%; }
@keyframes px-fall{
    0%{ opacity:0; transform:translate3d(0,0,0) rotate(0deg); }
    8%{ opacity:.9; }
    50%{ transform:translate3d(calc(var(--dx) * .55 + var(--pr-u) * 18),calc(var(--pr-u) * 440),0) rotate(calc(var(--rot) * .5)); }
    92%{ opacity:.85; }
    100%{ opacity:0; transform:translate3d(var(--dx),calc(var(--pr-u) * 900),0) rotate(var(--rot)); }
}
.px-glint{
    position:absolute;
    width:calc(var(--pr-u) * 16 * var(--s)); height:calc(var(--pr-u) * 16 * var(--s));
    animation:px-twinkle var(--dur) ease-in-out var(--dl) infinite;
    will-change:transform, opacity;
}
.px-glint svg, .px-glint img{ width:100%; height:100%; }
@keyframes px-twinkle{
    0%,100%{ opacity:0; transform:scale(.2) rotate(0deg); }
    50%{ opacity:1; transform:scale(1) rotate(45deg); }
}
.px-bird{
    position:absolute; left:50%;
    width:calc(var(--pr-u) * 58 * var(--s)); height:calc(var(--pr-u) * 36 * var(--s));
    margin-left:calc(var(--pr-u) * -29 * var(--s));
    animation:px-bird-cross var(--dur) linear var(--dl) infinite;
    will-change:transform;
}
.px-bird svg{ width:100%; height:100%; transform:scaleX(var(--dir)); }
/* fallback crossing (no offset-path): one long rising glide, never a drop */
@keyframes px-bird-cross{
    0%{ opacity:0; transform:translate3d(calc(var(--dir) * var(--pr-u) * -300),calc(var(--pr-u) * 10),0) rotate(calc(var(--dir) * -4deg)); }
    8%{ opacity:1; }
    35%{ transform:translate3d(calc(var(--dir) * var(--pr-u) * -100),calc(var(--pr-u) * -14),0) rotate(calc(var(--dir) * -6deg)); }
    65%{ transform:translate3d(calc(var(--dir) * var(--pr-u) * 100),calc(var(--pr-u) * -26),0) rotate(calc(var(--dir) * -2deg)); }
    92%{ opacity:1; }
    100%{ opacity:0; transform:translate3d(calc(var(--dir) * var(--pr-u) * 300),calc(var(--pr-u) * -40),0) rotate(calc(var(--dir) * -5deg)); }
}
.px-wing{ transform-box:view-box; transform-origin:38px 25px; animation:px-flap .42s ease-in-out infinite alternate; }
.px-wing-b{ animation-delay:-.21s; }
@keyframes px-flap{ from{ transform:scaleY(1); } to{ transform:scaleY(-.35); } }
.px-fly{
    position:absolute;
    width:calc(var(--pr-u) * 4 * var(--s)); height:calc(var(--pr-u) * 4 * var(--s));
    border-radius:50%;
    background:var(--c);
    box-shadow:0 0 calc(var(--pr-u) * 8) calc(var(--pr-u) * 3) var(--c);
    animation:px-drift var(--dur) ease-in-out var(--dl) infinite alternate, px-pulse 3s ease-in-out var(--dl) infinite;
    will-change:transform, opacity;
}
@keyframes px-drift{ from{ transform:translate3d(0,0,0); } to{ transform:translate3d(var(--dx),var(--dy),0); } }
@keyframes px-pulse{ 0%,100%{ opacity:.15; } 50%{ opacity:.95; } }

/* ---- Page transition ---- */
.px-transit{ opacity:0; }
.px-transit.is-play{ opacity:1; }
.px-sweep-inner{ position:absolute; inset:0; transform:translate3d(-130%,40%,0) rotate(-14deg) scale(1.7); will-change:transform; }
.px-transit.is-play .px-sweep-inner{ animation:px-sweep 2.3s cubic-bezier(.4,.12,.4,.92) forwards; }
@keyframes px-sweep{
    0%{ transform:translate3d(-135%,40%,0) rotate(-14deg) scale(1.5); }
    100%{ transform:translate3d(135%,-40%,0) rotate(8deg) scale(1.5); }
}
.px-burst{
    position:absolute; top:-8%;
    width:calc(var(--pr-u) * 14 * var(--s)); height:calc(var(--pr-u) * 18 * var(--s));
    opacity:0;
}
.px-burst svg, .px-burst img{ width:100%; height:100%; }
.px-transit.is-play .px-burst{ animation:px-burst 1.7s cubic-bezier(.3,.1,.6,1) var(--dl) forwards; }
@keyframes px-burst{
    0%{ opacity:0; transform:translate3d(0,0,0) rotate(0deg); }
    12%{ opacity:1; }
    100%{ opacity:0; transform:translate3d(var(--dx),calc(var(--pr-u) * 920),0) rotate(var(--rot)); }
}
.px-shimmer{
    position:absolute; inset:-20% -80%;
    background:linear-gradient(105deg, transparent 42%, color-mix(in srgb, var(--px-metal) 30%, transparent) 50%, transparent 58%);
    transform:translate3d(-45%,0,0);
}
.px-transit.is-play .px-shimmer{ animation:px-shim 1.5s ease forwards; }
@keyframes px-shim{ to{ transform:translate3d(45%,0,0); } }

/* ---- Monogram node: interlaced initials in gold foil ---- */
.px-mono{
    position:relative;
    display:flex; align-items:center; justify-content:center;
    height:100%; min-height:calc(var(--pr-u) * 60);
    line-height:1;
}
.px-mono::before, .px-mono::after{
    content:''; position:absolute; left:50%; top:50%;
    width:1.62em; height:1.62em; border-radius:50%;
    transform:translate(-50%,-50%);
    border:calc(var(--pr-u) * 1) solid var(--px-metal, currentColor);
    opacity:.55;
}
.px-mono::after{ width:1.5em; height:1.5em; opacity:.3; }
.px-mono b{
    position:relative; font-weight:400; font-size:1.18em;
    background:linear-gradient(115deg, var(--px-metal-lo, currentColor) 18%, var(--px-metal-hi, currentColor) 42%, var(--px-metal, currentColor) 52%, var(--px-metal-lo, currentColor) 82%);
    background-size:260% 100%;
    -webkit-background-clip:text; background-clip:text;
    color:transparent;
    background-position:30% 0;
}
/* the foil glint is a light sweeping over the letters on its own layer
   (animating the gradient itself would repaint the letters every frame) */
.px-mono{ overflow:visible; }
.px-mono b::after{ content:none; }
.px-mono b:first-child{ transform:translate(.16em,-.1em); }
.px-mono b:last-child{ transform:translate(-.16em,.14em); }
.px-mono b:only-child{ transform:none; }
@keyframes px-foil{ 0%,100%{ background-position:100% 0; } 50%{ background-position:0 0; } }

/* ---- Openings ---- */
.dis-open-card.px-oc{ background:transparent; }
.dis-open-card.px-oc .dis-oc-piece,
.dis-open-card.px-oc .dis-oc-cover,
.dis-open-card.px-oc .dis-oc-flap,
.dis-open-card.px-oc .dis-oc-seal{ display:none; }
.px-open{ position:absolute; inset:0; z-index:2; perspective:calc(var(--pr-u) * 1300); }
.dis-open-card.px-oc .dis-oc-inner{ top:17%; transform:none; z-index:6; gap:calc(var(--pr-u) * 8); }
.dis-open-card.px-oc .dis-oc-kicker{ color:var(--pr-accent); font-family:"Cinzel",Georgia,serif; font-size:calc(var(--pr-u) * 10.5); letter-spacing:.38em; }
.dis-open-card.px-oc .dis-oc-title{ color:var(--pr-ink); font-family:var(--px-script),"Pinyon Script",cursive; font-style:normal; font-size:calc(var(--pr-u) * 40); line-height:1.1; text-shadow:none; }
.dis-open-card.px-oc .dis-oc-btn{
    bottom:13%;
    padding:calc(var(--pr-u) * 11) calc(var(--pr-u) * 24);
    font-family:"Cinzel",Georgia,serif; font-size:calc(var(--pr-u) * 10.5); font-weight:600; letter-spacing:.24em;
    color:var(--pr-ink);
    background:color-mix(in srgb, var(--pr-paper) 78%, transparent);
    border:calc(var(--pr-u) * 1) solid color-mix(in srgb, var(--px-metal) 70%, transparent);
    box-shadow:0 calc(var(--pr-u) * 8) calc(var(--pr-u) * 24) rgba(0,0,0,.14);
    -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
    animation:px-breathe 2.6s ease-in-out infinite;
}
@keyframes px-breathe{ 0%,100%{ transform:translateX(-50%) scale(1); } 50%{ transform:translateX(-50%) scale(1.04); } }
.dis-open-card.px-oc.is-open .dis-oc-btn{ opacity:0; animation:none; }

/* Gatefold: two paper doors and a wax seal */
.px-door{
    position:absolute; top:0; bottom:0; width:calc(50% + 1px);
    backface-visibility:hidden;
    transition:transform 1.45s cubic-bezier(.62,.04,.26,1) .38s, opacity .5s ease 1.25s;
    will-change:transform;
    box-shadow:0 0 calc(var(--pr-u) * 14) rgba(0,0,0,.05);
}
.px-door > svg, .px-door > img{ width:100%; height:100%; }
.px-door-l{ left:0; transform-origin:0 50%; }
.px-door-r{ right:0; transform-origin:100% 50%; }
.dis-open-card.is-open .px-door-l{ transform:rotateY(-104deg); opacity:0; }
.dis-open-card.is-open .px-door-r{ transform:rotateY(104deg); opacity:0; }
.px-seal{
    position:absolute; left:50%; top:52%; z-index:3;
    width:calc(var(--pr-u) * 104); height:calc(var(--pr-u) * 104);
    transform:translate(-50%,-50%);
    transition:transform .7s cubic-bezier(.5,-.5,.6,1), opacity .5s ease .15s;
}
.px-seal > svg{ position:relative; z-index:2; width:100%; height:100%; animation:px-seal 3.2s ease-in-out infinite; }
@keyframes px-seal{ 0%,100%{ transform:scale(1); } 50%{ transform:scale(1.035); } }
.px-seal-sprig{ position:absolute; left:-30%; top:-80%; width:160%; height:160%; z-index:1; }
.dis-open-card.is-open .px-seal{ transform:translate(-50%,-50%) scale(1.4) rotate(-14deg); opacity:0; }

/* Foliage: two walls of engraved leaves part */
.dis-open-card.dis-oc-foliage{ background:var(--pr-paper); transition:background-color .9s ease .7s; }
.dis-open-card.dis-oc-foliage .dis-oc-inner{ left:14%; right:14%; padding:calc(var(--pr-u) * 16) 0; border-radius:50%;
    background:radial-gradient(closest-side, var(--pr-paper) 62%, color-mix(in srgb, var(--pr-paper) 0%, transparent)); }
.dis-open-card.dis-oc-foliage.is-open{ background-color:transparent; }
.px-leafdoor{ position:absolute; inset:0; transition:transform 1.7s cubic-bezier(.62,.04,.26,1) .2s, opacity .8s ease 1s; will-change:transform; }
.dis-open-card.is-open .px-leafdoor-l{ transform:translate3d(-78%,4%,0) rotate(-9deg) scale(1.2); opacity:0; }
.dis-open-card.is-open .px-leafdoor-r{ transform:translate3d(78%,4%,0) rotate(9deg) scale(1.2); opacity:0; }
.px-medal{
    position:absolute; left:50%; top:52%; z-index:3;
    width:calc(var(--pr-u) * 118); height:calc(var(--pr-u) * 118);
    transform:translate(-50%,-50%);
    transition:transform .8s ease, opacity .6s ease;
}
.px-medal-sm{ width:calc(var(--pr-u) * 92); height:calc(var(--pr-u) * 92); }
.px-medal > svg{ width:100%; height:100%; }
.dis-open-card.is-open .px-medal{ transform:translate(-50%,-60%) scale(.7); opacity:0; }

/* Veil: satin drapes gather to the sides */
.px-drape{ position:absolute; top:0; bottom:0; width:51%; transition:transform 1.8s cubic-bezier(.62,.04,.26,1) .25s; will-change:transform; }
.px-drape > svg, .px-drape > img{ width:100%; height:100%; }
.px-drape-l{ left:0; transform-origin:0 0; }
.px-drape-r{ right:0; transform-origin:100% 0; }
.dis-open-card.is-open .px-drape-l{ transform:scaleX(.08) skewY(2deg); }
.dis-open-card.is-open .px-drape-r{ transform:scaleX(.08) skewY(-2deg); }

/* ---- Still cards: gallery thumbs & admin canvas ---- */
.pr-card.is-static:not(.dis-anim) .px-ambient,
.pr-card.is-static .px-transit{ display:none; }
/* the admin canvas (.dis-anim) moves exactly like the guest's card */
.pr-card.is-static:not(.dis-anim) .px-sway,
.pr-card.is-static:not(.dis-anim) .px-wave,
.pr-card.is-static:not(.dis-anim) .px-sheen,
.pr-card.is-static:not(.dis-anim) .px-mono b{ animation:none; }
.pr-card.is-static .px-piece{ opacity:1 !important; transform:rotate(var(--r)) !important; transition:none !important; }
.pr-card.is-static .px-stroke{ stroke-dashoffset:0 !important; transition:none !important; }

/* ---- Edit page (.pr-flat): the words stay still for typing; the art
   opens and closes with the page exactly like the guest card (see
   "Opening & closing with the page"). The frame draws itself once. ---- */
.pr-card.px-theme.pr-flat.px-drawn .px-draw .px-stroke{
    stroke-dashoffset:0;
    transition:stroke-dashoffset 3.2s cubic-bezier(.45,0,.2,1) .3s;
}

@media (prefers-reduced-motion:reduce){
    .px-sway, .px-wave, .px-sheen, .px-petal, .px-glint, .px-bird, .px-fly, .px-mono b, .px-seal > svg,
    .px-bf, .px-bw, .px-pol, .px-bok, .px-mist, .px-ray, .px-tb{ animation:none !important; }
    .px-petal, .px-bird, .px-bf, .px-pol{ display:none; }
    .px-piece, .px-stroke{ transition-duration:.01s !important; }
}

/* ---- Performance for Signature cards ----
   Blurring a whole page while it leaves forces every flower on it to be
   redrawn each frame; a fade and a gentle scale look the same and cost
   almost nothing. Text reveals keep their blur but no longer animate
   letter-spacing (which re-lays out the text on every frame), and text
   only becomes a GPU layer while it is actually animating. */
.pr-card.px-theme.is-ready .pr-sec.is-past:not(.is-active){ filter:none; }
.pr-card.px-theme .pr-sec{ transition:opacity .7s ease, transform .9s cubic-bezier(.22,.61,.36,1); }
.pr-card.px-theme .pr-node .pr-in{
    will-change:auto;
    transition:
        opacity 1.05s cubic-bezier(.19,1,.22,1),
        transform 1.15s cubic-bezier(.19,1,.22,1),
        filter 1.05s cubic-bezier(.19,1,.22,1),
        clip-path 1.25s cubic-bezier(.19,1,.22,1);
}
.pr-card.px-theme.is-ready .pr-sec:not(.is-active) .pr-node[data-anim="blur-in"] .pr-in{ letter-spacing:inherit; filter:blur(10px); }

/* ==================================================================
   LIVING GARDEN (5.1) — atmosphere
   ================================================================== */
.px-par{ position:absolute; inset:-3%; will-change:transform; }
.px-depth{ position:absolute; inset:-4%; will-change:transform; pointer-events:none; }
/* the air dims and butterflies drift off while the page changes */
.px-ambient{ transition:opacity 1.3s ease; }
.pr-card.px-shift .px-ambient{ opacity:.35; }

/* loose petals: fall, drift and tumble in 3D */
.px-tb{ display:block; width:100%; height:100%; animation:px-tumble var(--tb,2.4s) ease-in-out infinite alternate; }
@keyframes px-tumble{
    from{ transform:rotateX(0deg) rotateY(0deg) rotateZ(0deg); }
    to{ transform:rotateX(58deg) rotateY(38deg) rotateZ(14deg); }
}

/* Butterflies: 3D wing beats on their own path; they land for a while */
.px-bf{
    position:absolute; left:0; top:0;
    width:calc(var(--pr-u) * 52 * var(--s)); height:calc(var(--pr-u) * 44 * var(--s));
    animation:px-route-a var(--dur) linear var(--dl) infinite;
    will-change:transform, opacity;
    z-index:2;
}
.px-bf.px-route-b{ animation-name:px-route-b; }
.px-bf.px-route-c{ animation-name:px-route-c; }
.px-bf-in{
    position:absolute; inset:0;
    perspective:calc(var(--pr-u) * 150);
    transition:opacity 1.2s ease, transform 1.6s cubic-bezier(.4,0,.2,1);
}
.pr-card.px-shift .px-bf-in{ opacity:0; transform:translate3d(calc(var(--pr-u) * 60),calc(var(--pr-u) * -90),0) scale(.55); }
.px-bw{ position:absolute; top:0; width:50%; height:100%; animation:px-flap-l var(--fl,.36s) ease-in-out infinite alternate; }
.px-bw img{ display:block; width:100%; height:100%; object-fit:contain; }
.px-bw-l{ left:0; transform-origin:100% 55%; }
.px-bw-r{ right:0; transform-origin:0 55%; animation-name:px-flap-r; }
.px-bw-r img{ transform:scaleX(-1); }
.px-bb{ position:absolute; left:50%; top:12%; width:12%; height:78%; transform:translateX(-50%); }
.px-bb img{ display:block; width:100%; height:100%; }
@keyframes px-flap-l{ from{ transform:rotateY(6deg); } to{ transform:rotateY(74deg); } }
@keyframes px-flap-r{ from{ transform:rotateY(-6deg); } to{ transform:rotateY(-74deg); } }
/* routes across the card (390 x 844 units): drift, hover, land, leave */
/* 5.9 routes: each butterfly crosses the card on a rising, bobbing
   curve (fallback for browsers without offset-path) */
@keyframes px-route-a{
    0%{ opacity:0; transform:translate3d(calc(var(--pr-u) * -70),calc(var(--pr-u) * 250),0) rotate(80deg) scale(.85); }
    6%{ opacity:1; }
    20%{ transform:translate3d(calc(var(--pr-u) * 30),calc(var(--pr-u) * 226),0) rotate(70deg) scale(.95); }
    36%{ transform:translate3d(calc(var(--pr-u) * 110),calc(var(--pr-u) * 238),0) rotate(96deg) scale(1); }
    52%{ transform:translate3d(calc(var(--pr-u) * 190),calc(var(--pr-u) * 196),0) rotate(66deg) scale(1); }
    68%{ transform:translate3d(calc(var(--pr-u) * 270),calc(var(--pr-u) * 192),0) rotate(92deg) scale(.95); }
    84%{ transform:translate3d(calc(var(--pr-u) * 350),calc(var(--pr-u) * 150),0) rotate(68deg) scale(.9); }
    94%{ opacity:1; }
    100%{ opacity:0; transform:translate3d(calc(var(--pr-u) * 440),calc(var(--pr-u) * 130),0) rotate(80deg) scale(.85); }
}
@keyframes px-route-b{
    0%{ opacity:0; transform:translate3d(calc(var(--pr-u) * 440),calc(var(--pr-u) * 660),0) rotate(-80deg) scale(.8); }
    7%{ opacity:1; }
    22%{ transform:translate3d(calc(var(--pr-u) * 340),calc(var(--pr-u) * 630),0) rotate(-66deg) scale(.9); }
    40%{ transform:translate3d(calc(var(--pr-u) * 240),calc(var(--pr-u) * 620),0) rotate(-96deg) scale(1); }
    58%{ transform:translate3d(calc(var(--pr-u) * 150),calc(var(--pr-u) * 570),0) rotate(-64deg) scale(1); }
    76%{ transform:translate3d(calc(var(--pr-u) * 60),calc(var(--pr-u) * 560),0) rotate(-94deg) scale(.95); }
    93%{ opacity:1; }
    100%{ opacity:0; transform:translate3d(calc(var(--pr-u) * -80),calc(var(--pr-u) * 500),0) rotate(-72deg) scale(.85); }
}
@keyframes px-route-c{
    0%{ opacity:0; transform:translate3d(calc(var(--pr-u) * -60),calc(var(--pr-u) * 560),0) rotate(84deg) scale(.7); }
    10%{ opacity:.9; }
    30%{ transform:translate3d(calc(var(--pr-u) * 70),calc(var(--pr-u) * 540),0) rotate(72deg) scale(.75); }
    50%{ transform:translate3d(calc(var(--pr-u) * 180),calc(var(--pr-u) * 556),0) rotate(98deg) scale(.75); }
    70%{ transform:translate3d(calc(var(--pr-u) * 290),calc(var(--pr-u) * 520),0) rotate(70deg) scale(.7); }
    90%{ opacity:.8; }
    100%{ opacity:0; transform:translate3d(calc(var(--pr-u) * 440),calc(var(--pr-u) * 500),0) rotate(84deg) scale(.6); }
}

/* pollen and glowing dust */
.px-pol{
    position:absolute;
    width:calc(var(--pr-u) * 3 * var(--s)); height:calc(var(--pr-u) * 3 * var(--s));
    border-radius:50%;
    background:radial-gradient(circle, var(--c) 0%, color-mix(in srgb, var(--c) 40%, transparent) 55%, transparent 72%);
    animation:px-pollen var(--dur) ease-in-out var(--dl) infinite;
    will-change:transform, opacity;
}
@keyframes px-pollen{
    0%{ opacity:0; transform:translate3d(0,0,0); }
    20%{ opacity:.9; }
    50%{ transform:translate3d(calc(var(--dx) * .6),calc(var(--dy) * .5),0); }
    80%{ opacity:.7; }
    100%{ opacity:0; transform:translate3d(var(--dx),var(--dy),0); }
}
.px-fly.px-dust{ box-shadow:0 0 calc(var(--pr-u) * 6) calc(var(--pr-u) * 2) var(--c); }

/* soft light rays */
.px-ray{
    position:absolute; top:-30%; height:150%; width:var(--w,14%);
    background:linear-gradient(90deg, transparent, color-mix(in srgb, var(--rc) 55%, transparent), transparent);
    transform:rotate(24deg);
    transform-origin:50% 0;
    opacity:.18;
    animation:px-ray var(--dur,11s) ease-in-out var(--dl,0s) infinite alternate;
    will-change:opacity, transform;
}
@keyframes px-ray{
    from{ opacity:.06; transform:rotate(24deg) translate3d(0,0,0); }
    to{ opacity:.3; transform:rotate(22deg) translate3d(calc(var(--pr-u) * 14),0,0); }
}

/* cinematic bokeh & mist behind the garden */
.px-bok{ position:absolute; aspect-ratio:1; opacity:var(--o,.3); animation:px-bokeh var(--dur,18s) ease-in-out var(--dl,0s) infinite alternate; will-change:transform, opacity; }
.px-bok img{ display:block; width:100%; height:100%; }
@keyframes px-bokeh{
    from{ transform:translate3d(0,0,0) scale(1); opacity:calc(var(--o,.3) * .5); }
    to{ transform:translate3d(var(--dx),var(--dy),0) scale(1.12); opacity:var(--o,.3); }
}
.px-mist{ position:absolute; left:-30%; width:160%; height:26%; opacity:.4; will-change:transform; }
.px-mist img{ display:block; width:100%; height:100%; }
.px-mist-a{ bottom:-4%; animation:px-mist 34s ease-in-out infinite alternate; }
.px-mist-b{ bottom:18%; height:18%; opacity:.22; animation:px-mist 46s ease-in-out -12s infinite alternate-reverse; }
@keyframes px-mist{ from{ transform:translate3d(-8%,0,0); } to{ transform:translate3d(8%,calc(var(--pr-u) * -10),0); } }

/* still cards: no living air */
.pr-card.is-static:not(.dis-anim) .px-depth .px-bok,
.pr-card.is-static:not(.dis-anim) .px-depth .px-mist{ animation:none; }

/* Each Signature page is its own GPU layer: the page cross-fade then only
   blends a finished picture instead of repainting every flower on it. */
.pr-card.px-theme.is-live .pr-sec{ will-change:opacity, transform; }

/* ---- Adaptive quality: lighter garden on slower phones (set by dis-themes.js) ---- */
.pr-card.px-lite .px-x{ display:none; }
.pr-card.px-lite .px-k-spray .px-sway,
.pr-card.px-lite .px-k-grass .px-sway{ animation:none; }
.pr-card.px-lite.px-theme .pr-node .pr-in{ filter:none !important; }

/* ==================================================================
   RSVP & GUESTBOOK (5.2) — dialogs inside the card
   Sized in card units so they look the same on the site, on the Edit
   page and in the downloaded file.
   ================================================================== */
.px-dlg{
    position:absolute; inset:0; z-index:40;
    display:flex; align-items:flex-end; justify-content:center;
    background:rgba(18,14,10,.42);
    -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px);
    opacity:0; transition:opacity .28s ease;
    --px-btn:color-mix(in srgb, var(--pr-accent) 80%, #1d2230);
    --px-tint:color-mix(in srgb, var(--pr-accent) 10%, #ffffff);
    font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    color:#1f2430; text-align:left;
}
.px-dlg[hidden]{ display:none; }
.px-dlg.is-open{ opacity:1; }
.px-dlg-box{
    position:relative; width:100%; max-height:92%; overflow:auto; -webkit-overflow-scrolling:touch;
    background:#ffffff;
    border-radius:max(16px, calc(var(--pr-u,1px) * 24)) max(16px, calc(var(--pr-u,1px) * 24)) 0 0;
    padding:max(20px, calc(var(--pr-u,1px) * 30)) max(16px, calc(var(--pr-u,1px) * 22)) max(20px, calc(var(--pr-u,1px) * 26));
    box-shadow:0 calc(var(--pr-u,1px) * -10) calc(var(--pr-u,1px) * 40) rgba(0,0,0,.18);
    transform:translateY(calc(var(--pr-u,1px) * 40));
    transition:transform .38s cubic-bezier(.2,.9,.25,1);
    /* Pastikan px-dlg-x tidak keluar dari kotak */
    overflow-x:hidden;
    overflow-y:auto;
}
.px-dlg.is-open .px-dlg-box{ transform:none; }
.px-dlg-x{
    position:absolute !important; top:calc(var(--pr-u,1px) * 14); right:calc(var(--pr-u,1px) * 14);
    width:max(32px, calc(var(--pr-u,1px) * 36)); height:max(32px, calc(var(--pr-u,1px) * 36));
    min-width:32px; min-height:32px;
    flex-shrink:0; flex-grow:0;
    border-radius:50%; border:0;
    background:#f0f1f4; color:#5b6170; cursor:pointer;
    display:grid; place-items:center; padding:0;
    overflow:hidden;
}
.px-dlg svg{ width:52%; height:52%; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.px-dlg h3{
    margin:0 calc(var(--pr-u) * 40) calc(var(--pr-u) * 6) 0;
    font-family:"Cormorant Garamond", Georgia, serif; font-weight:600;
    font-size:calc(var(--pr-u) * 27); line-height:1.15; color:#1b1f29;
}
.px-sub{ margin:0 0 calc(var(--pr-u) * 18); font-size:calc(var(--pr-u) * 13); line-height:1.5; color:#7a8090; }
.px-lbl{ display:block; margin:calc(var(--pr-u) * 14) 0 calc(var(--pr-u) * 7); font-size:calc(var(--pr-u) * 13.5); font-weight:600; color:#2c3140; }
.px-field{
    display:block; width:100%; box-sizing:border-box;
    padding:calc(var(--pr-u) * 12) calc(var(--pr-u) * 14);
    border:1px solid #e1e4ea; border-radius:calc(var(--pr-u) * 12);
    background:#fbfbfd; color:#1f2430;
    font:inherit; font-size:calc(var(--pr-u) * 14.5);
    outline:none; transition:border-color .2s, box-shadow .2s, background .2s;
}
.px-field:focus{ border-color:var(--px-btn); background:#fff; box-shadow:0 0 0 calc(var(--pr-u) * 3) color-mix(in srgb, var(--pr-accent) 18%, transparent); }
textarea.px-field{ resize:vertical; min-height:calc(var(--pr-u) * 110); line-height:1.5; }
.px-opt{
    display:flex; align-items:center; gap:calc(var(--pr-u) * 12);
    margin-bottom:calc(var(--pr-u) * 9); padding:calc(var(--pr-u) * 10) calc(var(--pr-u) * 14);
    border:1px solid #e6e8ee; border-radius:calc(var(--pr-u) * 12); background:#fafbfc;
    font-size:calc(var(--pr-u) * 14.5); font-weight:600; color:#2c3140; cursor:pointer;
    transition:border-color .2s, background .2s;
}
.px-opt input{ position:absolute; opacity:0; pointer-events:none; }
.px-ico{
    flex:0 0 auto; width:calc(var(--pr-u) * 32); height:calc(var(--pr-u) * 32); border-radius:50%;
    display:grid; place-items:center; background:#e9ebf0; color:#636a7a; transition:background .2s, color .2s;
}
.px-opt:has(input:checked){ border-color:var(--px-btn); background:var(--px-tint); }
.px-opt:has(input:checked) .px-ico{ background:var(--px-btn); color:#fff; }
.px-opt input:focus-visible + .px-ico{ box-shadow:0 0 0 calc(var(--pr-u) * 3) color-mix(in srgb, var(--pr-accent) 30%, transparent); }
.px-step{ display:flex; align-items:center; gap:calc(var(--pr-u) * 10); }
.px-step button{
    width:calc(var(--pr-u) * 40); height:calc(var(--pr-u) * 40); border-radius:50%;
    border:1px solid #e1e4ea; background:#fff; color:#2c3140; font-size:calc(var(--pr-u) * 20); line-height:1; cursor:pointer;
}
.px-step .px-field{ width:calc(var(--pr-u) * 78); text-align:center; font-weight:600; -moz-appearance:textfield; }
.px-step .px-field::-webkit-inner-spin-button, .px-step .px-field::-webkit-outer-spin-button{ -webkit-appearance:none; margin:0; }
.px-hp{ position:absolute !important; left:-9999px; width:1px; height:1px; opacity:0; }
.px-err{ min-height:1em; margin:calc(var(--pr-u) * 10) 0 0; font-size:calc(var(--pr-u) * 12.5); color:#b3261e; }
.px-go{
    display:block; width:100%; height:calc(var(--pr-u) * 50); margin-top:calc(var(--pr-u) * 10);
    border:0; border-radius:calc(var(--pr-u) * 12);
    background:var(--px-btn); color:#fff; cursor:pointer;
    font:inherit; font-size:calc(var(--pr-u) * 15.5); font-weight:600; letter-spacing:.02em;
    transition:opacity .2s, transform .15s;
}
.px-go:disabled{ opacity:.42; cursor:default; }
.px-go:not(:disabled):active{ transform:scale(.98); }
.px-go.is-busy{ opacity:.7; pointer-events:none; }
/* guestbook, in the manner of a printed guest book */
.px-gb-title{
    text-align:center; margin-right:0 !important; margin-top:calc(var(--pr-u) * 6) !important;
    font-family:"Cinzel", "Cormorant Garamond", Georgia, serif !important;
    letter-spacing:.12em; text-transform:uppercase; color:var(--px-btn) !important;
    font-size:calc(var(--pr-u) * 22) !important;
}
.px-wishbox .px-sub{ text-align:center; }
.px-gb-box{
    display:grid; gap:calc(var(--pr-u) * 12);
    padding:calc(var(--pr-u) * 16); border:1px solid #e0e2e7; border-radius:calc(var(--pr-u) * 18);
}
.px-gb-box .px-field{ background:#fff; }
.px-gb-foot{ display:flex; align-items:center; justify-content:space-between; gap:calc(var(--pr-u) * 10); }
.px-private{ display:flex; align-items:center; gap:calc(var(--pr-u) * 6); font-size:calc(var(--pr-u) * 11); color:#8a8f9b; }
.px-private svg{ width:calc(var(--pr-u) * 14); height:calc(var(--pr-u) * 14); flex:0 0 auto; }
.px-go-pill{
    width:auto; height:calc(var(--pr-u) * 44); margin:0; padding:0 calc(var(--pr-u) * 20);
    border-radius:999px; text-transform:uppercase; letter-spacing:.08em; font-size:calc(var(--pr-u) * 12.5); font-weight:700;
}
/* thank-you */
.px-done{ text-align:center; padding:calc(var(--pr-u) * 16) calc(var(--pr-u) * 6) calc(var(--pr-u) * 8); }
.px-done h3{ margin:calc(var(--pr-u) * 14) 0 calc(var(--pr-u) * 8) !important; }
.px-done p{ margin:0 auto calc(var(--pr-u) * 8); max-width:28em; font-size:calc(var(--pr-u) * 13.5); line-height:1.55; color:#6c7282; }
.px-done-ico{
    display:inline-grid; place-items:center; width:calc(var(--pr-u) * 58); height:calc(var(--pr-u) * 58); border-radius:50%;
    background:var(--px-tint); color:var(--px-btn);
    animation:px-pop .5s cubic-bezier(.3,1.6,.5,1);
}
@keyframes px-pop{ from{ transform:scale(.4); opacity:0; } to{ transform:none; opacity:1; } }
.px-sign{ margin-top:calc(var(--pr-u) * 12) !important; font-family:var(--px-script, "Pinyon Script"), cursive; font-size:calc(var(--pr-u) * 26) !important; color:var(--px-btn) !important; }
.px-demo{ font-size:calc(var(--pr-u) * 11.5) !important; color:#a0671a !important; }
/* inline RSVP: both answers on the card */
.pr-rsvp-inline{ display:flex; gap:calc(var(--pr-u) * 8); justify-content:center; flex-wrap:wrap; }
.pr-rsvp-inline .pr-btn-node{ flex:1 1 0; min-width:0; white-space:nowrap; padding-left:calc(var(--pr-u) * 8); padding-right:calc(var(--pr-u) * 8); }

/* ---- Stage (5.3): pages cross-fade in place over the fixed garden ----
   set by dis-themes.js; wins over the Edit page's "always visible". */
.pr-card.px-stage .pr-sec,
.pr-card.pr-flat.px-stage .pr-sec{
    opacity:var(--px-o, 1) !important;
    will-change:transform, opacity;
    transition:none !important;
}
.pr-card.px-stage:not(.px-sdt) .pr-sec,
.pr-card.pr-flat.px-stage:not(.px-sdt) .pr-sec{ transform:var(--px-t, none) !important; }
/* 5.9.1: the hold runs on the compositor, in step with the scroll, so the
   words never tremble while the card glides on its own. The page moves
   up by exactly the distance scrolled: translate = scrollTop - offsetTop. */
@supports (animation-timeline: scroll()){
    .pr-card.px-stage.px-sdt .pr-sec{
        animation:px-hold auto linear both;
        animation-timeline:scroll(nearest block);
    }
    @keyframes px-hold{
        from{ transform:translate3d(0,calc(var(--px-k, 0px) * -1),0); }
        to{ transform:translate3d(0,calc(var(--px-max, 0px) - var(--px-k, 0px)),0); }
    }
}

.pr-card.px-stage .pr-sec.px-off{ pointer-events:none; visibility:hidden; }
.pr-card.pr-flat.px-stage .pr-sec + .pr-sec{ box-shadow:none; }

/* ---- 5.3: RSVP & guestbook buttons — one size, truly centred, in the card's colours ---- */
.pr-card.px-theme .pr-k-rsvp .pr-btn-node,
.pr-card.px-theme .pr-k-guestbook .pr-btn-node{
    display:flex; width:100%; box-sizing:border-box;
    min-height:calc(var(--pr-u) * 40);
    padding-left:calc(var(--pr-u) * 19.4); padding-right:calc(var(--pr-u) * 18); /* letter-spacing trails the last letter */
    font-family:"Cinzel", "Cormorant Garamond", Georgia, serif; font-weight:600; font-size:.92em;
    border-color:var(--pr-accent); color:var(--pr-accent);
}
.pr-card.px-theme .pr-k-rsvp .pr-btn-solid{
    background:var(--pr-accent); border-color:var(--pr-accent);
    color:var(--pr-paper);
    box-shadow:0 calc(var(--pr-u) * 6) calc(var(--pr-u) * 18) color-mix(in srgb, var(--pr-accent) 30%, transparent);
}
.pr-card.px-theme .pr-k-guestbook .pr-btn-node{ background:color-mix(in srgb, var(--pr-paper) 70%, transparent); }
.pr-card.px-theme .pr-rsvp-inline{ width:100%; }

/* ---- 5.3: the dialogs wear the card: its paper, ink, gold and script ---- */
.pr-card.px-theme .px-dlg{
    --px-btn:var(--pr-accent);
    --px-tint:color-mix(in srgb, var(--pr-accent) 12%, var(--pr-paper));
    --px-line:color-mix(in srgb, var(--pr-ink) 16%, transparent);
    color:var(--pr-ink);
    font-family:"Cormorant Garamond", Georgia, serif;
}
.pr-card.px-theme .px-dlg-box{
    background:
        radial-gradient(120% 60% at 50% 0%, color-mix(in srgb, var(--px-metal) 10%, transparent), transparent 60%),
        var(--pr-paper);
    border-top:calc(var(--pr-u) * 1) solid color-mix(in srgb, var(--px-metal) 55%, transparent);
    overflow-x:hidden;
}
.pr-card.px-theme .px-dlg-box::before{
    content:''; position:absolute; left:calc(var(--pr-u) * 14); right:calc(var(--pr-u) * 14); top:calc(var(--pr-u) * 7);
    height:0; border-top:calc(var(--pr-u) * 1) solid color-mix(in srgb, var(--px-metal) 40%, transparent);
}
.pr-card.px-theme .px-dlg h3{
    font-family:var(--px-script, "Pinyon Script"), cursive; font-weight:400;
    font-size:calc(var(--pr-u) * 36); line-height:1.05; color:var(--pr-ink);
    text-align:center; margin:calc(var(--pr-u) * 10) calc(var(--pr-u) * 30) calc(var(--pr-u) * 8);
}
.pr-card.px-theme .px-sub{ text-align:center; font-style:italic; font-size:calc(var(--pr-u) * 14); color:color-mix(in srgb, var(--pr-ink) 65%, transparent); }
.pr-card.px-theme .px-lbl{
    font-family:"Cinzel", Georgia, serif; font-weight:500; letter-spacing:.14em; text-transform:uppercase;
    font-size:calc(var(--pr-u) * 10.5); color:color-mix(in srgb, var(--pr-ink) 70%, transparent);
}
.pr-card.px-theme .px-field{
    background:color-mix(in srgb, var(--pr-ink) 5%, var(--pr-paper));
    border-color:var(--px-line); color:var(--pr-ink);
    font-family:"Cormorant Garamond", Georgia, serif; font-size:calc(var(--pr-u) * 16);
}
.pr-card.px-theme .px-field::placeholder{ color:color-mix(in srgb, var(--pr-ink) 40%, transparent); }
.pr-card.px-theme .px-opt{
    background:color-mix(in srgb, var(--pr-paper) 88%, var(--pr-ink) 4%);
    border-color:var(--px-line); color:var(--pr-ink);
    font-family:"Cormorant Garamond", Georgia, serif; font-size:calc(var(--pr-u) * 16.5); font-weight:600;
}
.pr-card.px-theme .px-ico{ background:color-mix(in srgb, var(--pr-ink) 9%, transparent); color:color-mix(in srgb, var(--pr-ink) 70%, transparent); }
.pr-card.px-theme .px-opt:has(input:checked) .px-ico{ background:var(--pr-accent); color:var(--pr-paper); }
.pr-card.px-theme .px-step button{ background:transparent; border-color:var(--px-line); color:var(--pr-ink); }
.pr-card.px-theme .px-go{
    background:var(--pr-accent); color:var(--pr-paper);
    font-family:"Cinzel", Georgia, serif; letter-spacing:.16em; text-transform:uppercase; font-size:calc(var(--pr-u) * 13);
    border-radius:calc(var(--pr-u) * 40);
}
.pr-card.px-theme .px-dlg-x{ background:var(--pr-soft, rgba(0,0,0,0.09)); color:var(--pr-ink, #2a2a2a); }
/* 6.1.8: replace color-mix() with rgba so the button is visible on all Safari versions. */
.px-dlg .px-dlg-x,
.px-dlg .px-dlg-x:hover,
.px-dlg .px-dlg-x:active,
.px-dlg .px-dlg-x:focus{
    border:0 !important;
    outline:0 !important;
    box-shadow:none !important;
    -webkit-appearance:none;
    appearance:none;
    background:rgba(0,0,0,0.09) !important;
    color:#1f2430 !important;
}
/* Themed card overrides: use the template's own soft + ink palette. */
.pr-card.px-theme .px-dlg .px-dlg-x,
.pr-card.px-theme .px-dlg .px-dlg-x:hover,
.pr-card.px-theme .px-dlg .px-dlg-x:active,
.pr-card.px-theme .px-dlg .px-dlg-x:focus{
    background:var(--pr-soft, rgba(0,0,0,0.09)) !important;
    color:var(--pr-ink, #1f2430) !important;
}
.px-dlg .px-dlg-x:focus-visible{
    outline:2px solid color-mix(in srgb, var(--pr-ink, #2a2a2a) 32%, transparent) !important;
    outline-offset:2px;
}
/* Reset theme-wide button borders/rectangular focus rings on dialog close. */
.pr-card .px-dlg .px-dlg-box > button.px-dlg-x,
.pr-card .px-dlg .px-dlg-box > button.px-dlg-x:hover,
.pr-card .px-dlg .px-dlg-box > button.px-dlg-x:active,
.pr-card .px-dlg .px-dlg-box > button.px-dlg-x:focus{
    all:unset !important;
    position:absolute !important; top:max(10px, calc(var(--pr-u,1px) * 14)) !important;
    right:max(10px, calc(var(--pr-u,1px) * 14)) !important; z-index:5 !important;
    box-sizing:border-box !important; display:grid !important; place-items:center !important;
    width:max(34px, calc(var(--pr-u,1px) * 36)) !important;
    height:max(34px, calc(var(--pr-u,1px) * 36)) !important;
    min-width:34px !important; min-height:34px !important;
    margin:0 !important; padding:0 !important; flex:0 0 auto !important;
    border:0 !important; border-radius:50% !important; outline:0 !important;
    box-shadow:none !important; overflow:hidden !important;
    background:rgba(11,29,58,.10) !important; color:var(--pr-ink,#1f2430) !important;
    line-height:1 !important; cursor:pointer !important;
    -webkit-appearance:none !important; appearance:none !important;
    -webkit-tap-highlight-color:transparent !important;
}
.pr-card .px-dlg .px-dlg-box > button.px-dlg-x:focus-visible{
    outline:2px solid color-mix(in srgb, var(--pr-ink,#2a2a2a) 42%, transparent) !important;
    outline-offset:2px !important;
}
.pr-card .px-dlg .px-dlg-box > button.px-dlg-x:hover{ background:rgba(11,29,58,.16) !important; }
.pr-card .px-gal .px-gal-it,
.pr-card .px-gal .px-gal-it:hover,
.pr-card .px-gal .px-gal-it:active,
.pr-card .px-gal .px-gal-it:focus{
    border:1px solid color-mix(in srgb, var(--pr-ink) 14%, transparent) !important;
    outline:0 !important; box-shadow:0 calc(var(--pr-u) * 2) calc(var(--pr-u) * 7) rgba(20,30,50,.12) !important;
}
.pr-card .px-gal .px-gal-it:focus-visible{
    outline:2px solid color-mix(in srgb, var(--pr-accent) 65%, white) !important;
    outline-offset:2px !important;
}
.pr-card.px-theme .px-gb-title{ font-family:"Cinzel", Georgia, serif !important; color:var(--pr-accent) !important; font-size:calc(var(--pr-u) * 22) !important; }
.pr-card.px-theme .px-gb-box{ border-color:var(--px-line); background:color-mix(in srgb, var(--pr-paper) 60%, transparent); }
.pr-card.px-theme .px-private{ color:color-mix(in srgb, var(--pr-ink) 55%, transparent); font-style:italic; font-size:calc(var(--pr-u) * 12); }
.pr-card.px-theme .px-done p{ color:color-mix(in srgb, var(--pr-ink) 72%, transparent); font-size:calc(var(--pr-u) * 15); }
.pr-card.px-theme .px-sign{ color:var(--pr-accent) !important; font-size:calc(var(--pr-u) * 30) !important; }
.px-count-live{ margin:calc(var(--pr-u) * 6) auto 0 !important; font-family:"Cinzel", Georgia, serif; letter-spacing:.08em; font-size:calc(var(--pr-u) * 12) !important; color:var(--pr-accent) !important; }
.px-count-live b{ font-size:calc(var(--pr-u) * 22); font-weight:600; margin-right:.25em; }
/* painted sprigs that dress each dialog (added by dis-themes.js) */
.px-dlg-decor{ position:absolute; pointer-events:none; opacity:.95; }
.px-dlg-decor img{ display:block; width:100%; height:100%; object-fit:contain; }
.px-dlg-decor.l{ left:calc(var(--pr-u) * -18); top:calc(var(--pr-u) * -14); width:calc(var(--pr-u) * 96); height:calc(var(--pr-u) * 96); transform:rotate(-18deg); }
.px-dlg-decor.r{ right:calc(var(--pr-u) * -26); top:calc(var(--pr-u) * 18); width:calc(var(--pr-u) * 60); height:calc(var(--pr-u) * 130); transform:rotate(-24deg); }
/* the visitor's name on the closed card (personal guest link) */
.dis-oc-to{ display:block; margin-top:calc(var(--pr-u) * 10); font-family:"Cinzel", Georgia, serif; font-size:calc(var(--pr-u) * 10.5); letter-spacing:.2em; text-transform:uppercase; color:var(--pr-ink); opacity:.8; }
.dis-oc-to b{ display:block; margin-top:calc(var(--pr-u) * 4); font-family:"Cormorant Garamond", Georgia, serif; font-size:calc(var(--pr-u) * 18); letter-spacing:.02em; text-transform:none; font-weight:600; }

/* ==================================================================
   PHOTO GALLERY (5.3) — grid, collage, 3D, lightbox
   ================================================================== */
.pr-k-gallery .pr-in{ height:100%; }
.px-gal{ position:relative; width:100%; height:calc(var(--pr-u) * 360); }
.px-gal-grid, .px-gal-collage{ display:grid; gap:calc(var(--pr-u) * 6); overflow-y:auto; scrollbar-width:none; align-content:start; padding:calc(var(--pr-u) * 2); }
.px-gal-grid::-webkit-scrollbar, .px-gal-collage::-webkit-scrollbar{ display:none; }
.px-gal-grid{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
.px-gal-collage{ grid-template-columns:repeat(3, minmax(0, 1fr)); grid-auto-rows:calc(var(--pr-u) * 74); grid-auto-flow:dense; }
.px-gal-collage .px-gal-it:nth-child(6n+1){ grid-column:span 2; grid-row:span 2; }
.px-gal-collage .px-gal-it:nth-child(6n+4){ grid-column:span 2; }
.px-gal-collage .px-gal-it:nth-child(6n+6){ grid-row:span 2; }
.px-gal-it{
    position:relative; display:block; box-sizing:border-box; -webkit-appearance:none; appearance:none;
    padding:0; margin:0; cursor:pointer; overflow:hidden;
    border:0;
    border-radius:calc(var(--pr-u) * 6);
    background:transparent;
    box-shadow:none;
}
.px-gal-grid .px-gal-it{ aspect-ratio:1; }
.px-gal-it img{ display:block; box-sizing:border-box; width:100%; height:100%; object-fit:cover; object-position:center; transform:scale(1.06); transition:transform .6s ease; position:absolute; inset:0; }
.px-gal-it:hover img{ transform:scale(1.1); }
.px-gal-ph{
    position:absolute; inset:0;
    background:
        radial-gradient(circle at 34% 36%, color-mix(in srgb, var(--pr-accent) 30%, transparent) 0 8%, transparent 9%),
        linear-gradient(160deg, transparent 55%, color-mix(in srgb, var(--pr-accent) 22%, transparent) 56% 70%, transparent 71%),
        linear-gradient(200deg, transparent 60%, color-mix(in srgb, var(--pr-accent) 16%, transparent) 61%),
        color-mix(in srgb, var(--pr-accent) 8%, var(--pr-paper));
}
/* 3D ring */
.px-gal-3d{ perspective:calc(var(--pr-u) * 720); }
.px-gal-ring{ position:absolute; inset:0 0 calc(var(--pr-u) * 26); transform-style:flat; perspective:calc(var(--pr-u) * 720); }
.px-gal-3d .px-gal-it{
    position:absolute; left:50%; top:50%; width:86%; height:100%;
    transition:transform .7s cubic-bezier(.22,.8,.26,1), opacity .5s ease;
    will-change:transform;
}
.px-gal-3d .px-gal-it.is-cur{ box-shadow:none; }
.px-gal-nav{
    position:absolute; top:50%; transform:translateY(-50%); z-index:30;
    width:calc(var(--pr-u) * 36); height:calc(var(--pr-u) * 36); border-radius:50%;
    /* Reset WP theme button overrides that add square pink borders */
    border:0 !important; outline:0 !important; outline-offset:0 !important;
    -webkit-appearance:none !important; appearance:none !important;
    background:rgba(255,255,255,.86); color:var(--pr-ink);
    display:grid; place-items:center;
    cursor:pointer;
    box-shadow:none;
    transition:transform .2s ease, background .2s ease;
    -webkit-tap-highlight-color:transparent;
}
.px-gal-nav:hover{ background:#fff; transform:translateY(-50%) scale(1.1); box-shadow:none; }
.px-gal-nav:focus-visible{ outline:0 !important; outline-offset:0 !important; box-shadow:none !important; }
.px-gal-nav svg{ display:block; width:calc(var(--pr-u) * 13); height:calc(var(--pr-u) * 20); flex-shrink:0; }
.px-gal-nav.p{ left:calc(var(--pr-u) * 10); } .px-gal-nav.n{ right:calc(var(--pr-u) * 10); }
.px-gal-dots{ position:absolute; left:0; right:0; bottom:calc(var(--pr-u) * 4); display:flex; justify-content:center; gap:calc(var(--pr-u) * 5); }
.px-gal-dots i{ width:calc(var(--pr-u) * 6); height:calc(var(--pr-u) * 6); border-radius:99px; background:color-mix(in srgb, var(--pr-ink) 25%, transparent); transition:width .3s, background .3s; cursor:pointer; }
.px-gal-dots i.is-on{ width:calc(var(--pr-u) * 18); background:var(--pr-accent); }
/* lightbox */
.px-lb{
    position:fixed; inset:0; z-index:2147483000; box-sizing:border-box;
    display:grid; place-items:center;
    width:100vw; height:100vh; height:100dvh;
    padding:calc(58px + env(safe-area-inset-top, 0px)) calc(18px + env(safe-area-inset-right, 0px)) calc(58px + env(safe-area-inset-bottom, 0px)) calc(18px + env(safe-area-inset-left, 0px));
    background:rgba(8,14,30,.96); opacity:0; transition:opacity .22s ease;
}
.px-lb.is-open{ opacity:1; }
.px-lb[hidden]{ display:none; }
.px-lb img{
    display:block; width:auto; height:auto; max-width:min(100%, 560px); max-height:100%;
    object-fit:contain; border:0; border-radius:12px; box-shadow:0 18px 54px rgba(0,0,0,.28);
}
.px-lb-x, .px-lb-nav{
    position:absolute; display:grid; place-items:center; padding:0;
    width:44px; height:44px; border:1px solid rgba(255,255,255,.24);
    background:rgba(19,36,73,.78); color:#fff; border-radius:50%;
    font:400 26px/1 Arial,sans-serif; cursor:pointer; -webkit-appearance:none; appearance:none;
    box-shadow:0 8px 22px rgba(0,0,0,.24); -webkit-tap-highlight-color:transparent;
}
.px-lb-x{ top:max(12px, env(safe-area-inset-top, 0px)); right:max(12px, env(safe-area-inset-right, 0px)); z-index:2; }
.px-lb-nav{ top:50%; transform:translateY(-50%); }
.px-lb-nav.p{ left:max(12px, env(safe-area-inset-left, 0px)); }
.px-lb-nav.n{ right:max(12px, env(safe-area-inset-right, 0px)); }
.px-lb-x:hover, .px-lb-nav:hover{ background:#244a91; }
.px-lb-x:focus-visible, .px-lb-nav:focus-visible{ outline:2px solid #c9dbfa; outline-offset:3px; }
.px-lb-n{ position:absolute; bottom:max(18px, env(safe-area-inset-bottom, 0px)); color:#fff; font:12px/1 "Cinzel", Georgia, serif; letter-spacing:.2em; }
@media (max-width:600px){
    .px-lb{ padding-left:14px; padding-right:14px; }
    .px-lb img{ max-width:100%; max-height:100%; border-radius:10px; }
    .px-lb-nav{ width:40px; height:40px; }
}

/* hidden & premium pages */
.pr-sec[data-hidden="1"]{ display:none !important; }

/* still thumbnails can be glided through their pages (collection preview) */
.pr-card.is-static .pr-scroller{ scroll-snap-type:none; scroll-behavior:auto; }

.px-go-pill{ white-space:nowrap; flex:0 0 auto; padding:0 calc(var(--pr-u) * 16); }
.px-gb-foot .px-private{ flex:1 1 auto; min-width:0; }

/* ==================================================================
   5.5 MOTION LANGUAGES — every family moves in its own way.
   The hidden state says where a piece comes from and where it goes;
   the rest animation is its breath. Transform & opacity only (the
   sketch family alone draws with clip-path, briefly).
   bloom = default above (unfurls from the stem, breeze sway)
   ================================================================== */

/* Hanyut (Senja, Seri): slides in from beyond its corner, floats, drifts away */
.pr-card.px-live.px-motion-drift .px-bloom:not(.px-in) .px-piece{
    opacity:0;
    transform:translate3d(calc(var(--pr-u) * var(--mx, 0)), calc(var(--pr-u) * var(--my, 0)), 0) rotate(calc(var(--r) + 7deg)) scale(.9);
    transition:transform 2.2s cubic-bezier(.45,0,.55,1) var(--xd,0ms), opacity 1.8s ease var(--xd,0ms);
}
.pr-card.px-live.px-motion-drift .px-bloom.px-in .px-piece{ transition:transform 3.2s cubic-bezier(.16,.8,.3,1) var(--d), opacity 2.2s ease var(--d); }
.px-motion-drift .px-sway{ animation:px-float calc(var(--sd,7s) * 1.4) ease-in-out var(--sdl,0s) infinite alternate; }
@keyframes px-float{
    0%{ transform:translate3d(0,0,0) rotate(calc(var(--sa,1.6deg) * -.5)); }
    100%{ transform:translate3d(calc(var(--pr-u) * 2), calc(var(--pr-u) * -5), 0) rotate(calc(var(--sa,1.6deg) * .6)); }
}

/* Cahaya Malam (Mawar Senja, Tengah Malam, Zamrud Malam): out of the dark, breathing */
.pr-card.px-live.px-motion-glow .px-bloom:not(.px-in) .px-piece{
    opacity:0; transform:rotate(var(--r)) scale(.94);
    transition:transform 2.4s ease var(--xd,0ms), opacity 2s ease var(--xd,0ms);
}
.pr-card.px-live.px-motion-glow .px-bloom.px-in .px-piece{ transition:transform 3.6s cubic-bezier(.2,.7,.2,1) var(--d), opacity 3s ease var(--d); }
.px-motion-glow .px-sway{ animation:px-breathe calc(var(--sd,7s) * 1.3) ease-in-out var(--sdl,0s) infinite alternate; }
@keyframes px-breathe{ 0%{ transform:scale(1); opacity:.84; } 100%{ transform:scale(1.018); opacity:1; } }

/* Kilau Emas (Deco, Satin, Baldu): a crisp, confident rise — then perfect stillness */
.pr-card.px-live.px-motion-gilded .px-bloom:not(.px-in) .px-piece{
    opacity:0; transform:translate3d(0, calc(var(--pr-u) * 14), 0) rotate(var(--r)) scale(.97);
    transition:transform 1.2s cubic-bezier(.4,0,.2,1) var(--xd,0ms), opacity .9s ease var(--xd,0ms);
}
.pr-card.px-live.px-motion-gilded .px-bloom.px-in .px-piece{ transition:transform 1.6s cubic-bezier(.2,.9,.2,1) calc(var(--d) * .6), opacity 1.2s ease calc(var(--d) * .6); }
.px-motion-gilded .px-sway{ animation:none; }

/* Lakaran (Coretan, Toile): drawn from the stem upward, lines that gently "boil" like ink */
.pr-card.px-live.px-motion-sketch .px-bloom:not(.px-in) .px-piece{
    opacity:0; clip-path:inset(100% 0 0 0); transform:rotate(var(--r));
    transition:clip-path 1s ease var(--xd,0ms), opacity .8s ease var(--xd,0ms);
}
.pr-card.px-live.px-motion-sketch .px-bloom.px-in .px-piece{ clip-path:inset(0 0 0 0); transition:clip-path 1.9s cubic-bezier(.3,.6,.3,1) var(--d), opacity .4s ease var(--d); }
.px-motion-sketch .px-sway{ animation:px-boil 1.05s steps(1) var(--sdl,0s) infinite; }
@keyframes px-boil{
    0%{ transform:rotate(-.35deg); }
    33%{ transform:rotate(.3deg) translate(calc(var(--pr-u) * .4), 0); }
    66%{ transform:rotate(-.1deg) translate(0, calc(var(--pr-u) * -.4)); }
}

/* Sutera (Reben, Renda): swings in with a soft overshoot, a slow pendulum at rest */
.pr-card.px-live.px-motion-silk .px-bloom:not(.px-in) .px-piece{
    opacity:0; transform:rotate(calc(var(--r) - 16deg)) translate3d(0, calc(var(--pr-u) * -10), 0) scale(.96);
    transition:transform 1.8s cubic-bezier(.5,0,.5,1) var(--xd,0ms), opacity 1.4s ease var(--xd,0ms);
}
.pr-card.px-live.px-motion-silk .px-bloom.px-in .px-piece{ transition:transform 2.6s cubic-bezier(.3,1.45,.45,1) var(--d), opacity 1.6s ease var(--d); }
.px-motion-silk .px-sway{ animation:px-pendulum calc(var(--sd,7s) * 1.25) cubic-bezier(.45,0,.55,1) var(--sdl,0s) infinite alternate; }
@keyframes px-pendulum{ 0%{ transform:rotate(calc(var(--sa,1.6deg) * -1.2)); } 100%{ transform:rotate(calc(var(--sa,1.6deg) * 1.2)); } }

/* Ombak (Lautan): surfaces from below, rides a slow swell */
.pr-card.px-live.px-motion-tide .px-bloom:not(.px-in) .px-piece{
    opacity:0; transform:translate3d(0, calc(var(--pr-u) * 30), 0) rotate(calc(var(--r) + 4deg));
    transition:transform 2s cubic-bezier(.5,0,.6,1) var(--xd,0ms), opacity 1.6s ease var(--xd,0ms);
}
.pr-card.px-live.px-motion-tide .px-bloom.px-in .px-piece{ transition:transform 2.8s cubic-bezier(.2,.75,.25,1) var(--d), opacity 2s ease var(--d); }
.px-motion-tide .px-sway{ animation:px-bob calc(var(--sd,7s) * 1.1) ease-in-out var(--sdl,0s) infinite alternate; }
@keyframes px-bob{
    0%{ transform:translate3d(0, calc(var(--pr-u) * -3), 0) rotate(calc(var(--sa,1.6deg) * -.5)); }
    100%{ transform:translate3d(0, calc(var(--pr-u) * 3), 0) rotate(calc(var(--sa,1.6deg) * .5)); }
}

/* Gerbang (Mihrab, Gerbang, Kameo): stems climb from their base like a vine, flowers open last */
.pr-card.px-live.px-motion-arch .px-bloom:not(.px-in) .px-piece{
    opacity:0; transform:rotate(var(--r)) scale(.9, .06);
    transition:transform 1.5s cubic-bezier(.5,0,.6,1) var(--xd,0ms), opacity 1.2s ease var(--xd,0ms);
}
.pr-card.px-live.px-motion-arch .px-bloom:not(.px-in) .px-piece.px-k-bloom{ transform:rotate(calc(var(--r) - 30deg)) scale(.3); }
.pr-card.px-live.px-motion-arch .px-bloom.px-in .px-piece{ transition:transform 2.4s cubic-bezier(.22,.9,.3,1) var(--d), opacity 1.2s ease var(--d); }
.pr-card.px-live.px-motion-arch .px-bloom.px-in .px-piece.px-k-bloom{ transition:transform 2.8s cubic-bezier(.25,1.2,.4,1) calc(var(--d) + 500ms), opacity 1.4s ease calc(var(--d) + 500ms); }
.px-motion-arch .px-sway{ animation-duration:calc(var(--sd,7s) * 1.25); }

/* Marmar: nothing moves but the light — pieces settle into place and stay perfectly still */
.pr-card.px-live.px-motion-still .px-bloom:not(.px-in) .px-piece{
    opacity:0; transform:rotate(var(--r)) scale(1.04);
    transition:opacity 1.8s ease var(--xd,0ms), transform 2s ease var(--xd,0ms);
}
.pr-card.px-live.px-motion-still .px-bloom.px-in .px-piece{ transition:opacity 2.6s ease calc(var(--d) * .5), transform 3.4s cubic-bezier(.2,.7,.2,1) calc(var(--d) * .5); }
.px-motion-still .px-sway{ animation:none; }

/* Butterflies: a wandering loop through the outer bands, one quiet rest on the way */
.px-bf.px-fly{
    animation-name:px-fly !important; animation-duration:calc(var(--dur) * 1.3);
    offset-rotate:auto 90deg; offset-anchor:50% 50%;
}
@keyframes px-fly{
    0%{ offset-distance:0%; animation-timing-function:cubic-bezier(.4,0,.6,1); }
    34%{ offset-distance:32.5%; animation-timing-function:linear; }
    50%{ offset-distance:33.5%; animation-timing-function:cubic-bezier(.4,0,.6,1); }
    100%{ offset-distance:100%; }
}

/* Fireflies (night) */
.px-ff{
    position:absolute; width:calc(var(--pr-u) * 16); height:calc(var(--pr-u) * 16); margin:calc(var(--pr-u) * -8) 0 0 calc(var(--pr-u) * -8);
    border-radius:50%; pointer-events:none;
    background:radial-gradient(circle, #fffbe0 0 12%, rgba(255,222,140,.75) 22%, rgba(255,200,110,.18) 46%, rgba(255,200,110,0) 70%);
    opacity:0; will-change:transform, opacity;
    animation:px-ff-drift var(--fd) ease-in-out var(--fdl) infinite alternate, px-ff-blink var(--fb) ease-in-out var(--fdl) infinite alternate;
}
@keyframes px-ff-drift{
    0%{ transform:translate3d(0,0,0); }
    50%{ transform:translate3d(calc(var(--pr-u) * var(--fx) * .4), calc(var(--pr-u) * var(--fy) * .6), 0); }
    100%{ transform:translate3d(calc(var(--pr-u) * var(--fx)), calc(var(--pr-u) * var(--fy)), 0); }
}
@keyframes px-ff-blink{ 0%, 30%{ opacity:.04; } 62%{ opacity:1; } 100%{ opacity:.3; } }

/* Gold glints (gilded, tide): a four-point star that catches the light now and then */
.px-gl{
    position:absolute; width:calc(var(--pr-u) * 15 * var(--gs, 1)); aspect-ratio:1; pointer-events:none;
    background:color-mix(in srgb, var(--px-metal, #e2c27d) 45%, #fffaf0);
    clip-path:polygon(50% 0, 57% 43%, 100% 50%, 57% 57%, 50% 100%, 43% 57%, 0 50%, 43% 43%);
    opacity:0; will-change:transform, opacity;
    animation:px-glint var(--gd) ease-in-out var(--gdl) infinite;
}
@keyframes px-glint{
    0%, 68%, 100%{ opacity:0; transform:scale(.2) rotate(0deg); }
    80%{ opacity:1; transform:scale(1) rotate(45deg); }
    89%{ opacity:.55; transform:scale(.72) rotate(70deg); }
}
@media (prefers-reduced-motion:reduce){
    .px-ff, .px-gl, .px-bf, .px-motion-drift .px-sway, .px-motion-glow .px-sway, .px-motion-sketch .px-sway, .px-motion-silk .px-sway, .px-motion-tide .px-sway{ animation:none !important; }
    .px-ff{ opacity:.6; }
}

/* 5.6: the main blooms breathe — petals open and settle, very slowly */
.pr-card.px-live .px-bloom.px-in .px-k-bloom .px-sway > img{ animation:px-open 11s cubic-bezier(.45,.05,.55,.95) var(--sdl, 0s) infinite alternate; transform-origin:50% 55%; }
.px-motion-gilded .px-k-bloom .px-sway > img, .px-motion-still .px-k-bloom .px-sway > img, .px-motion-sketch .px-k-bloom .px-sway > img{ animation:none !important; }
@keyframes px-open{ 0%{ transform:scale(.985) rotate(-.6deg); } 100%{ transform:scale(1.025) rotate(.6deg); } }
@media (prefers-reduced-motion:reduce){ .px-k-bloom .px-sway > img{ animation:none !important; } }
/* photographic wings: the wing root always meets the body; the body keeps its shape */
.px-bw-l img, .px-bw-r img{ object-position:right center; }
.px-bb img{ object-fit:contain; }


/* ==================================================================
   5.9 — Real flight on curved lines (offset-path set by dis-themes.js)
   ================================================================== */
.px-bf.px-path{
    left:0; top:0;
    animation:px-flight calc(var(--dur) * .78) linear var(--dl) infinite !important;
    offset-rotate:auto 90deg; offset-anchor:50% 50%;
}
@keyframes px-flight{
    0%{ offset-distance:0%; opacity:0; }
    6%{ opacity:1; }
    94%{ opacity:1; }
    100%{ offset-distance:100%; opacity:0; }
}
.px-bird.px-path{
    left:0 !important; top:0 !important; margin:0;
    animation:px-glide var(--dur) linear var(--dl) infinite;
    offset-rotate:auto; offset-anchor:50% 50%;
}
.px-bird.px-path.px-left{ animation-direction:reverse; }
@keyframes px-glide{
    0%{ offset-distance:0%; opacity:0; }
    6%{ opacity:1; }
    94%{ opacity:1; }
    100%{ offset-distance:100%; opacity:0; }
}

/* ==================================================================
   5.9 — FIRDAUS palace gardens
   Scene (still, baked) · moving water · carved arch · swaying trees
   ================================================================== */
.px-scenery, .px-water, .px-arch, .px-tree{ position:absolute; inset:0; pointer-events:none; }
.px-scenery{ transform-origin:50% 62%; }
.px-tree{ will-change:transform; }
.px-tree > .px-art{ position:absolute; inset:0; }
.px-tree-l{ transform-origin:0 0; animation:px-tree 9s ease-in-out infinite alternate; }
.px-tree-r{ transform-origin:100% 0; animation:px-tree 10.5s ease-in-out -4s infinite alternate-reverse; }
.px-tb2{ position:absolute; display:block; height:auto; aspect-ratio:1; object-fit:contain; user-select:none; filter:drop-shadow(0 calc(var(--pr-u) * 4) calc(var(--pr-u) * 5) rgba(40,18,22,.28)); }
/* falling water: bright bands slide down the painted streams */
.px-fall{ position:absolute; overflow:hidden; border-radius:calc(var(--pr-u) * 3); opacity:.85; }
.px-fall i{
    position:absolute; left:0; right:0; top:-100%; height:200%;
    background:linear-gradient(180deg, rgba(255,255,255,0) 0, rgba(255,255,255,.95) 7%, rgba(255,255,255,0) 15%, rgba(255,255,255,.55) 29%, rgba(255,255,255,0) 39%, rgba(255,255,255,.85) 57%, rgba(255,255,255,0) 66%, rgba(255,255,255,.45) 81%, rgba(255,255,255,0) 91%) 0 0 / 100% 50% repeat-y;
    animation:px-fall var(--fd,1.2s) linear infinite;
    will-change:transform;
}
@keyframes px-fall{ to{ transform:translate3d(0,50%,0); } }
.px-spray{
    position:absolute; aspect-ratio:2.4 / 1; transform:translate(-50%,-55%);
    background:radial-gradient(closest-side, rgba(255,255,255,.9), rgba(255,255,255,.35) 55%, rgba(255,255,255,0));
    animation:px-spray var(--sd,3s) ease-in-out infinite alternate; will-change:transform, opacity;
}
@keyframes px-spray{ 0%{ transform:translate(-50%,-55%) scale(.85); opacity:.6; } 100%{ transform:translate(-50%,-62%) scale(1.15); opacity:1; } }
.px-glimmer{
    position:absolute; left:-20%; width:140%;
    background-image:radial-gradient(ellipse calc(var(--pr-u) * 9) calc(var(--pr-u) * 1.2) at 50% 50%, var(--gc, rgba(255,255,255,.75)) 55%, transparent 75%);
    background-size:calc(var(--pr-u) * 46) calc(var(--pr-u) * 15);
    -webkit-mask-image:linear-gradient(180deg, transparent, #000 18%, #000 60%, transparent);
    mask-image:linear-gradient(180deg, transparent, #000 18%, #000 60%, transparent);
    opacity:.5; animation:px-glim 10s linear infinite; will-change:transform;
}
@keyframes px-glim{ to{ transform:translate3d(calc(var(--pr-u) * 46),0,0); } }
/* the camera moves in as the invitation opens, like walking into the garden */
.pr-card.px-scene-firdaus.oc-reveal .px-scenery, .pr-card.px-scene-rimbun.oc-reveal .px-scenery{ animation:px-fd-in 7s cubic-bezier(.16,.84,.3,1) both; }
.pr-card.px-scene-firdaus.oc-reveal .px-tree-l{ animation:px-fd-tree-l 3.6s cubic-bezier(.16,.84,.3,1) both, px-tree 9s ease-in-out 3.6s infinite alternate; }
.pr-card.px-scene-firdaus.oc-reveal .px-tree-r{ animation:px-fd-tree-r 3.6s cubic-bezier(.16,.84,.3,1) both, px-tree 10.5s ease-in-out 3.6s infinite alternate-reverse; }
@keyframes px-fd-in{ 0%{ transform:scale(1.32) translate3d(0,-5%,0); } 100%{ transform:none; } }
@keyframes px-fd-tree-l{ 0%{ transform:translate3d(-18%,-6%,0) scale(1.12); } 100%{ transform:none; } }
@keyframes px-fd-tree-r{ 0%{ transform:translate3d(18%,-6%,0) scale(1.12); } 100%{ transform:none; } }
.pr-card.px-lite .px-glimmer{ animation:none !important; }
/* still thumbnails in the collection rest until they are woken */
.pr-card.is-static:not(.dis-anim) .px-tree, .pr-card.is-static:not(.dis-anim) .px-fall i, .pr-card.is-static:not(.dis-anim) .px-spray, .pr-card.is-static:not(.dis-anim) .px-glimmer{ animation:none !important; }
@media (prefers-reduced-motion:reduce){
    .px-tree, .px-fall i, .px-spray, .px-glimmer, .px-scenery{ animation:none !important; }
    .px-bf.px-path, .px-bird.px-path{ animation:none !important; display:none; }
}


/* ==================================================================
   5.9.1 — Living trees, birds from the field guide, falling leaves
   ================================================================== */
/* the tree as three layers that rustle out of step */
.px-tl{ position:absolute; inset:0; will-change:transform; }
.px-tl > .px-art{ position:absolute; inset:0; }
.px-tree-l{ animation:px-tree 8s ease-in-out infinite alternate; }
.px-tree-r{ animation:px-tree 9.5s ease-in-out -3s infinite alternate-reverse; }
@keyframes px-tree{ 0%{ transform:rotate(-1deg) translate3d(0,0,0); } 100%{ transform:rotate(1.1deg) translate3d(0,calc(var(--pr-u) * 3),0); } }
.px-tree-l .px-tl-back{ transform-origin:0 0; animation:px-rustle 6.5s ease-in-out -1s infinite alternate; }
.px-tree-r .px-tl-back{ transform-origin:100% 0; animation:px-rustle 7.2s ease-in-out -2.4s infinite alternate-reverse; }
.px-tree-l .px-tl-front{ transform-origin:0 0; animation:px-rustle2 5.2s ease-in-out -0.6s infinite alternate; }
.px-tree-r .px-tl-front{ transform-origin:100% 0; animation:px-rustle2 5.8s ease-in-out -3s infinite alternate-reverse; }
.px-tl-hang{ transform-origin:50% 0; animation:px-hang 4.6s ease-in-out infinite alternate; }
.px-tree-r .px-tl-hang{ animation-delay:-2.2s; }
@keyframes px-rustle{ 0%{ transform:rotate(-.5deg) scale(1); } 100%{ transform:rotate(.7deg) scale(1.012) translate3d(calc(var(--pr-u) * 1.5),calc(var(--pr-u) * 1.5),0); } }
@keyframes px-rustle2{ 0%{ transform:rotate(.6deg) scale(1.006); } 50%{ transform:rotate(-.3deg) scale(1); } 100%{ transform:rotate(-.8deg) scale(1.014) translate3d(calc(var(--pr-u) * -1.5),calc(var(--pr-u) * 2),0); } }
@keyframes px-hang{ 0%{ transform:skewX(-2.2deg); } 100%{ transform:skewX(2.4deg); } }
.px-tb2{ transform:rotate(var(--r,0deg)); animation:px-bob2 4.4s ease-in-out var(--bd,0s) infinite alternate; }
@keyframes px-bob2{ 0%{ transform:rotate(var(--r,0deg)) translate3d(0,0,0) scale(1); } 100%{ transform:rotate(calc(var(--r,0deg) + 4deg)) translate3d(calc(var(--pr-u) * 1.5),calc(var(--pr-u) * 2.5),0) scale(1.03); } }

/* a real bird perched in the tree: breathes, looks about, hops now and then */
.px-perch{ position:absolute; display:block; transform-origin:50% 92%; animation:px-perch 7s ease-in-out var(--pd,0s) infinite; }
.px-perch img{ display:block; width:100%; height:auto; transform:scaleX(var(--fx,1)); filter:drop-shadow(0 calc(var(--pr-u) * 3) calc(var(--pr-u) * 3) rgba(30,20,20,.25)); }
@keyframes px-perch{
    0%, 100%{ transform:translate3d(0,0,0) rotate(0deg) scaleY(1); }
    20%{ transform:translate3d(0,0,0) rotate(0deg) scaleY(1.02); }
    40%{ transform:translate3d(0,0,0) rotate(-3deg) scaleY(1); }
    52%{ transform:translate3d(0,0,0) rotate(2deg) scaleY(1.015); }
    70%{ transform:translate3d(0,0,0) rotate(0deg) scaleY(1); }
    76%{ transform:translate3d(0,calc(var(--pr-u) * -6),0) rotate(-4deg) scaleY(1.04); }
    82%{ transform:translate3d(0,0,0) rotate(0deg) scaleY(.97); }
    88%{ transform:translate3d(0,0,0) rotate(0deg) scaleY(1); }
}

/* the hummingbird (real illustration) visits the flowers */
.px-hum{ position:absolute; left:0; top:0; width:calc(var(--pr-u) * 46); animation:px-hum var(--hd,20s) ease-in-out var(--hdl,0s) infinite; will-change:transform, opacity; z-index:3; }
.px-hum i{ display:block; animation:px-hover 1.6s ease-in-out infinite alternate; }
.px-hum img{ display:block; width:100%; height:auto; }
@keyframes px-hover{ 0%{ transform:translate3d(0,0,0) rotate(-2deg); } 100%{ transform:translate3d(0,calc(var(--pr-u) * -4),0) rotate(2deg); } }
@keyframes px-hum{
    0%{ opacity:0; transform:translate3d(calc(var(--pr-u) * 420),calc(var(--pr-u) * 540),0) scaleX(1); }
    6%{ opacity:1; }
    16%, 30%{ transform:translate3d(calc(var(--pr-u) * 262),calc(var(--pr-u) * 640),0) scaleX(1); }
    40%, 54%{ transform:translate3d(calc(var(--pr-u) * 150),calc(var(--pr-u) * 676),0) scaleX(1); }
    56%{ transform:translate3d(calc(var(--pr-u) * 150),calc(var(--pr-u) * 676),0) scaleX(-1); }
    66%, 80%{ transform:translate3d(calc(var(--pr-u) * 214),calc(var(--pr-u) * 610),0) scaleX(-1); }
    93%{ opacity:1; }
    100%{ opacity:0; transform:translate3d(calc(var(--pr-u) * 430),calc(var(--pr-u) * 470),0) scaleX(-1); }
}

/* flying birds from the field guide: wings beat in bursts, then glide */
.px-bird-sp svg{ overflow:visible; }
.px-sw{ animation:px-beat var(--fb,1.9s) ease-in-out var(--fbd,0s) infinite; }
.px-sw-b{ animation-delay:calc(var(--fbd,0s) - .05s); }
@keyframes px-beat{
    0%{ transform:scaleY(1); } 8%{ transform:scaleY(-.6); } 16%{ transform:scaleY(1); } 24%{ transform:scaleY(-.6); }
    32%{ transform:scaleY(1); } 40%{ transform:scaleY(-.5); } 50%{ transform:scaleY(.3); } 100%{ transform:scaleY(.22); }
}

/* petals and leaves letting go of the canopy, drifting and turning */
.px-leaves{ position:absolute; inset:0; pointer-events:none; overflow:hidden; }
.px-fleaf{ position:absolute; width:calc(var(--pr-u) * 13 * var(--s)); aspect-ratio:1; opacity:0; animation:px-fleaf var(--dur) linear var(--dl) infinite; will-change:transform, opacity; }
.px-fleaf img{ display:block; width:100%; height:100%; object-fit:contain; animation:px-turn var(--tb,3s) ease-in-out infinite alternate; }
@keyframes px-fleaf{
    0%{ opacity:0; transform:translate3d(0,0,0); }
    8%{ opacity:1; }
    25%{ transform:translate3d(calc(var(--pr-u) * var(--fx) * .45),calc(var(--pr-u) * var(--fy) * .22),0); }
    50%{ transform:translate3d(calc(var(--pr-u) * var(--fx) * .15),calc(var(--pr-u) * var(--fy) * .5),0); }
    75%{ transform:translate3d(calc(var(--pr-u) * var(--fx) * .8),calc(var(--pr-u) * var(--fy) * .77),0); }
    92%{ opacity:1; }
    100%{ opacity:0; transform:translate3d(calc(var(--pr-u) * var(--fx)),calc(var(--pr-u) * var(--fy)),0); }
}
@keyframes px-turn{ 0%{ transform:rotate(-35deg) rotateX(0deg); } 100%{ transform:rotate(45deg) rotateX(65deg); } }

.pr-card.is-static:not(.dis-anim) .px-tl, .pr-card.is-static:not(.dis-anim) .px-tb2, .pr-card.is-static:not(.dis-anim) .px-perch, .pr-card.is-static:not(.dis-anim) .px-fleaf{ animation:none !important; }
.pr-card.is-static:not(.dis-anim) .px-fleaf{ display:none; }
@media (prefers-reduced-motion:reduce){
    .px-tl, .px-tb2, .px-perch, .px-hum, .px-hum i, .px-sw, .px-fleaf, .px-fleaf img{ animation:none !important; }
    .px-fleaf, .px-hum{ display:none; }
}

/* ==================================================================
   5.9.2 — Decor layers (set in the admin): position, size, colour,
   transparency, and fade-or-stay between pages. translate/scale are the
   individual transform properties, so they add to each layer's own
   motion rather than replacing it.
   ================================================================== */
.px-dl{
    position:absolute; inset:0; pointer-events:none;
    translate:calc(var(--dx, 0) * var(--pr-u)) calc(var(--dy, 0) * var(--pr-u));
    scale:var(--ds, 1);
    opacity:var(--dop, 1);
    transition:opacity 1.1s cubic-bezier(.4,0,.2,1);
}
.px-dl-backdrop{ transform-origin:50% 50%; }
.px-dl-frame{ transform-origin:50% 40%; }
.px-dl-bloom{ transform-origin:50% 100%; }
.px-dl-birds, .px-dl-particles, .px-dl-fx, .px-dl-butterflies, .px-dl-hum{ transform-origin:50% 50%; }
/* "fade": the layer softly leaves while the pages change, like the flowers, and returns with the next page */
.pr-card.px-live.px-shift .px-dl-fade{ opacity:calc(var(--dop, 1) * .06); }
.pr-card.is-static:not(.dis-anim) .px-dl{ transition:none; }
.pr-card.is-static:not(.dis-anim) .px-dl[data-anim]{ animation:none; }
/* admin: the layer being edited is outlined on the canvas */
.px-dl.is-picked{ outline:calc(var(--pr-u) * 2) dashed rgba(31,79,191,.85); outline-offset:calc(var(--pr-u) * -2); }


/* ==================================================================
   5.9.3 — Layer motion (admin): the background can push slowly forward
   and stay, pull back, drift, breathe, sway or float. Uses `transform`,
   which stays free because position and size use translate/scale.
   ================================================================== */
.px-dl[data-anim="zoomin"]{ animation:px-d-zoomin calc(16s / var(--dspd, 1)) cubic-bezier(.25,.1,.25,1) both; }
.px-dl[data-anim="zoomout"]{ animation:px-d-zoomout calc(16s / var(--dspd, 1)) cubic-bezier(.25,.1,.25,1) both; }
.px-dl[data-anim="zoomloop"]{ animation:px-d-zoomloop calc(22s / var(--dspd, 1)) ease-in-out infinite alternate; }
.px-dl[data-anim="pan"]{ animation:px-d-pan calc(26s / var(--dspd, 1)) ease-in-out infinite alternate; }
.px-dl[data-anim="breathe"]{ animation:px-d-breathe calc(9s / var(--dspd, 1)) ease-in-out infinite alternate; }
.px-dl[data-anim="sway"]{ animation:px-d-sway calc(7s / var(--dspd, 1)) ease-in-out infinite alternate; }
.px-dl[data-anim="float"]{ animation:px-d-float calc(6s / var(--dspd, 1)) ease-in-out infinite alternate; }
.px-dl[data-anim="slidein"], .px-dl[data-anim="slideout"]{
    transition:opacity 1.1s cubic-bezier(.4,0,.2,1), transform calc(1.9s / var(--dspd, 1)) cubic-bezier(.22,.61,.36,1);
    will-change:transform;
}
/* 5.9.15 — the background zooms with the pages: in as the guest slides on
   (and back out as they return), or the other way round */
.px-dl[data-anim="slidein"]{ transform:scale(calc(1 + .1 * var(--px-pp, 0))); }
.px-dl[data-anim="slideout"]{ transform:scale(calc(1.1 - .1 * var(--px-pp, 0))); }
/* 6.0.2: the zoom was 1.65x, which blew the picture up until it blurred.
   Now it stays sharp: as the invitation opens, the camera pulls back from
   the scene (as in the reference film), then follows the pages by 10%. */
.pr-card.oc-reveal .px-dl-backdrop .px-bgmedia{
    transform-origin:50% 62%;
    /* starts as the envelope clears, so the guest sees the camera move */
    animation:px-bg-pull calc(6.5s / var(--dspd, 1)) cubic-bezier(.3,.05,.18,1) 1.1s both;
}
@keyframes px-bg-pull{ from{ transform:scale(1.3); } to{ transform:none; } }
.pr-card.is-static:not(.dis-anim) .px-bgmedia{ animation:none !important; }
@media (prefers-reduced-motion:reduce){ .px-bgmedia{ animation:none !important; } }
@keyframes px-d-zoomin{ from{ transform:scale(1); } to{ transform:scale(1.2); } }
@keyframes px-d-zoomout{ from{ transform:scale(1.25); } to{ transform:scale(1); } }
@keyframes px-d-zoomloop{ from{ transform:scale(1); } to{ transform:scale(1.14); } }
@keyframes px-d-pan{ from{ transform:scale(1.12) translate3d(-3%,0,0); } to{ transform:scale(1.12) translate3d(3%,-1%,0); } }
@keyframes px-d-breathe{ from{ transform:scale(1); } to{ transform:scale(1.04); } }
@keyframes px-d-sway{ from{ transform:rotate(-1.2deg); } to{ transform:rotate(1.2deg); } }
@keyframes px-d-float{ from{ transform:translate3d(0,0,0); } to{ transform:translate3d(0,calc(var(--pr-u) * -8),0); } }

/* ---- Hand-placed decorations ---- */
.px-items{ position:absolute; inset:0; pointer-events:none; }
.px-it{
    position:absolute; display:block; transform:translate(-50%,-50%) rotate(var(--r, 0deg));
    opacity:var(--op, 1); transition:opacity 1s cubic-bezier(.4,0,.2,1);
}
.px-it .px-ia{ display:block; transform-origin:50% 85%; }
.px-it img{ display:block; width:100%; height:auto; transform:scaleX(var(--fx, 1)); user-select:none; }
/* placed on one page only: hidden until that page is on stage */
.px-it:not([data-pg="0"]){ opacity:0; }
.pr-card[data-pxpg="1"] .px-it[data-pg="1"],.pr-card[data-pxpg="2"] .px-it[data-pg="2"],.pr-card[data-pxpg="3"] .px-it[data-pg="3"],.pr-card[data-pxpg="4"] .px-it[data-pg="4"],.pr-card[data-pxpg="5"] .px-it[data-pg="5"],.pr-card[data-pxpg="6"] .px-it[data-pg="6"],.pr-card[data-pxpg="7"] .px-it[data-pg="7"],.pr-card[data-pxpg="8"] .px-it[data-pg="8"],.pr-card[data-pxpg="9"] .px-it[data-pg="9"],.pr-card[data-pxpg="10"] .px-it[data-pg="10"],.pr-card[data-pxpg="11"] .px-it[data-pg="11"],.pr-card[data-pxpg="12"] .px-it[data-pg="12"]{ opacity:var(--op, 1); }
.pr-card.px-live.px-shift .px-it-fade{ opacity:calc(var(--op, 1) * .06); }
.px-ia-sway{ animation:px-i-sway calc(5s / var(--ispd, 1)) ease-in-out infinite alternate; }
.px-ia-float{ animation:px-i-float calc(4.5s / var(--ispd, 1)) ease-in-out infinite alternate; }
.px-ia-flutter{ animation:px-i-flutter calc(.9s / var(--ispd, 1)) ease-in-out infinite alternate; }
.px-ia-spin{ animation:px-i-spin calc(18s / var(--ispd, 1)) linear infinite; transform-origin:50% 50%; }
.px-ia-pulse{ animation:px-i-pulse calc(3.6s / var(--ispd, 1)) ease-in-out infinite alternate; transform-origin:50% 50%; }
.px-ia-drift{ animation:px-i-drift calc(9s / var(--ispd, 1)) ease-in-out infinite alternate; }
@keyframes px-i-sway{ from{ transform:rotate(-4deg); } to{ transform:rotate(4deg); } }
@keyframes px-i-float{ from{ transform:translate3d(0,0,0); } to{ transform:translate3d(0,calc(var(--pr-u) * -7),0); } }
@keyframes px-i-flutter{ from{ transform:scaleY(1) rotate(-2deg); } to{ transform:scaleY(.86) rotate(2deg); } }
@keyframes px-i-spin{ to{ transform:rotate(360deg); } }
@keyframes px-i-pulse{ from{ transform:scale(1); } to{ transform:scale(1.07); } }
@keyframes px-i-drift{ from{ transform:translate3d(calc(var(--pr-u) * -10),0,0) rotate(-3deg); } to{ transform:translate3d(calc(var(--pr-u) * 10),calc(var(--pr-u) * -6),0) rotate(3deg); } }
.px-it.is-picked{ outline:calc(var(--pr-u) * 1.5) dashed rgba(31,79,191,.9); outline-offset:calc(var(--pr-u) * 3); }
@media (prefers-reduced-motion:reduce){ .px-dl[data-anim], .px-ia{ animation:none !important; } .px-dl[data-anim="slidein"], .px-dl[data-anim="slideout"]{ transition:opacity 1.1s; } }

/* admin: pause everything to place a decoration precisely */
.pr-card.dis-paused *, .pr-card.dis-paused *::before, .pr-card.dis-paused *::after{ animation-play-state:paused !important; }

/* 5.9.9 — painted floral clusters (trees) and your own background */
.px-cl{ position:absolute; display:block; height:auto; user-select:none; -webkit-user-drag:none; filter:drop-shadow(0 calc(var(--pr-u) * 6) calc(var(--pr-u) * 8) rgba(40,20,24,.22)); }
.px-bgmedia{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; image-rendering:auto; backface-visibility:hidden; }
/* 5.9.15 — site themes size every img (img{ height:auto; max-width:100% }),
   which left the background short of the card's foot */
.pr-card .px-dl img.px-bgmedia, .pr-card .px-dl video.px-bgmedia{ width:100% !important; height:100% !important; max-width:none !important; max-height:none !important; margin:0; }

/* ==================================================================
   5.9.11 — Real trees: trunk, branches and hanging blossom
   (.px-ptree, drawn by dis-themes.js photoTree). The crown rustles,
   the hanging blossom swings from the branches, the tree sways from
   its root. Left and right trees are mirror images.
   ================================================================== */
.px-ptree{
    position:absolute; top:calc(var(--pr-u) * -4); bottom:0; pointer-events:none;
    transform-origin:14% 100%; will-change:transform;
    animation:px-pt-sway calc(11s / var(--dspd, 1)) ease-in-out infinite alternate;
}
.px-ptree-r{ transform-origin:86% 100%; animation-delay:-4.5s; animation-direction:alternate-reverse; }
.px-pt-m{ position:absolute; inset:0; }
.px-ptree-r .px-pt-m{ transform:scaleX(-1); }
.px-pt-trunk, .px-pt-hang{ display:none; } /* 6.0.3: no mirrored bark strip, no second crown (they drew the "double" tree) */
.px-pt-crown, .px-pt-cl{ position:absolute; display:block; height:auto; max-width:none; user-select:none; -webkit-user-drag:none; }
.px-pt-crown{
    left:0; top:0; width:100%;
    transform-origin:0 0;
    /* the foot of the crown melts away behind the blossom: no cut edge */
    -webkit-mask-image:linear-gradient(180deg, #000 0, #000 72%, transparent 100%);
            mask-image:linear-gradient(180deg, #000 0, #000 72%, transparent 100%);
    animation:px-pt-rustle calc(7s / var(--dspd, 1)) ease-in-out -1.2s infinite alternate;
}
/* blossom cascading down the side: it hangs from its top and swings gently */
.px-pt-cl{ transform-origin:32% 4%; animation:px-pt-swing calc(5.8s / var(--dspd, 1)) ease-in-out infinite alternate; }
.px-pt-flip{ scale:-1 1; }
.px-pt-cl-b{ animation-duration:calc(6.6s / var(--dspd, 1)); animation-delay:-2.2s; }
.px-pt-cl-h{ animation-duration:calc(8s / var(--dspd, 1)); animation-delay:-1.4s; }
/* 6.0.4: the right side shows the blossom crown only (no second trunk), so it
   never reads as the left tree in a mirror */
.px-pt-crown.px-pt-crown-top{
    -webkit-mask-image:linear-gradient(180deg, #000 0, #000 38%, transparent 55%);
            mask-image:linear-gradient(180deg, #000 0, #000 38%, transparent 55%);
}
.px-pt-cl-c{ animation-duration:calc(7.2s / var(--dspd, 1)); animation-delay:-4.1s; }
.px-ptree-r .px-pt-cl-a{ animation-delay:-2.6s; }
.px-ptree-r .px-pt-crown{ animation-delay:-3.4s; }
@keyframes px-pt-sway{ 0%{ transform:rotate(-.55deg); } 100%{ transform:rotate(.65deg) translate3d(0,calc(var(--pr-u) * 1.5),0); } }
@keyframes px-pt-rustle{ 0%{ transform:rotate(-.35deg) scale(1); } 100%{ transform:rotate(.45deg) scale(1.008); } }
@keyframes px-pt-swing{ 0%{ transform:skewX(-1.6deg) rotate(.5deg); } 100%{ transform:skewX(1.8deg) rotate(-.6deg); } }
/* the trees grow into place as the invitation opens */
.pr-card.oc-reveal .px-ptree-l{ animation:px-pt-in-l 3.4s cubic-bezier(.16,.84,.3,1) both, px-pt-sway calc(11s / var(--dspd, 1)) ease-in-out 3.4s infinite alternate; }
.pr-card.oc-reveal .px-ptree-r{ animation:px-pt-in-r 3.4s cubic-bezier(.16,.84,.3,1) both, px-pt-sway calc(11s / var(--dspd, 1)) ease-in-out 3.4s infinite alternate-reverse; }
@keyframes px-pt-in-l{ 0%{ transform:translate3d(-16%,-4%,0) scale(1.1); opacity:.2; } 100%{ transform:none; opacity:1; } }
@keyframes px-pt-in-r{ 0%{ transform:translate3d(16%,-4%,0) scale(1.1); opacity:.2; } 100%{ transform:none; opacity:1; } }
.pr-card.px-lite .px-pt-cl, .pr-card.px-lite .px-pt-crown{ animation:none; }
.pr-card.is-static:not(.dis-anim) .px-ptree,
.pr-card.is-static:not(.dis-anim) .px-pt-crown,
.pr-card.is-static:not(.dis-anim) .px-pt-cl{ animation:none !important; }
@media (prefers-reduced-motion:reduce){
    .px-ptree, .px-pt-crown, .px-pt-cl{ animation:none !important; }
}
.px-dl-treeL, .px-dl-treeR{ pointer-events:none; }

/* ==================================================================
   5.9.11 — Still words while the card glides. Each page is pinned by
   the browser itself (position:sticky, top and bottom 0) instead of
   being scrolled and pulled back by a transform. Nothing is moved
   frame by frame any more, so the text cannot tremble — on the
   guest's card, the template preview and the Edit page alike. The
   scroll only drives the cross-fade between pages.
   ================================================================== */
.pr-card.px-stage .pr-sec,
.pr-card.pr-flat.px-stage .pr-sec,
.pr-card.px-stage.px-sdt .pr-sec{
    position:-webkit-sticky; position:sticky; top:0; bottom:0;
    transform:none !important; animation:none !important;
    will-change:opacity;
}
.pr-card.px-stage .pr-node{ will-change:auto; }
/* the pager glides exactly one page per gesture, so the browser's own
   snapping is not needed (and it cannot measure pinned pages) */
.pr-card.px-stage .pr-scroller{ scroll-snap-type:none !important; }
.pr-card.px-stage .pr-sec{ scroll-snap-align:none; }

/* ==================================================================
   5.9.12 — Smoothness. A design that is off screen pauses every
   animation inside it until it comes back into view.
   ================================================================== */
.pr-card.px-asleep, .pr-card.px-asleep *{ animation-play-state:paused !important; }
/* Variables that move every frame stay on the element that uses them:
   registered as non-inherited, so changing them never restyles the
   hundreds of elements inside a page or a card. */
@property --px-o{ syntax:'<number>'; inherits:false; initial-value:1; }
@property --pr-shift{ syntax:'<length>'; inherits:false; initial-value:0px; }
@property --rx{ syntax:'<angle>'; inherits:false; initial-value:0deg; }
@property --ry{ syntax:'<angle>'; inherits:false; initial-value:0deg; }

/* Opening-card particles used to travel by changing top/left, which
   makes the browser lay the page out again on every frame. They now
   travel by transform, measured against the card itself (container
   units), so the graphics chip moves them for free. */
@supports (width:1cqh){
    .dis-oc-fx{ container-type:size; }
    .dis-fx-p[data-m="dis-fx-fall"], .dis-fx-p[data-m="dis-fx-swirl"]{ top:-12% !important; }
    .dis-fx-p[data-m="dis-fx-rise"]{ top:112% !important; }
    .dis-fx-p[data-m="dis-fx-across"]{ left:-14% !important; }
    @keyframes dis-fx-fall{
        0%{ transform:translate3d(0,0,0) rotate(0deg); opacity:0; }
        10%{ opacity:var(--o); }
        50%{ transform:translate3d(var(--dx),62cqh,0) rotate(calc(var(--rr) * .5)); }
        90%{ opacity:var(--o); }
        100%{ transform:translate3d(calc(var(--dx) * -1),124cqh,0) rotate(var(--rr)); opacity:0; }
    }
    @keyframes dis-fx-rise{
        0%{ transform:translate3d(0,0,0) rotate(0deg); opacity:0; }
        10%{ opacity:var(--o); }
        50%{ transform:translate3d(var(--dx),-63cqh,0) rotate(calc(var(--rr) * .5)); }
        90%{ opacity:var(--o); }
        100%{ transform:translate3d(calc(var(--dx) * -1),-126cqh,0) rotate(var(--rr)); opacity:0; }
    }
    @keyframes dis-fx-across{
        0%{ transform:translate3d(0,0,0) rotate(0deg); opacity:0; }
        12%{ opacity:var(--o); }
        50%{ transform:translate3d(64cqw,var(--dx),0) rotate(calc(var(--rr) * .4)); }
        88%{ opacity:var(--o); }
        100%{ transform:translate3d(128cqw,calc(var(--dx) * -1),0) rotate(calc(var(--rr) * .8)); opacity:0; }
    }
    @keyframes dis-fx-swirl{
        0%{ transform:translate3d(0,0,0) rotate(0deg); opacity:0; }
        10%{ opacity:var(--o); }
        25%{ transform:translate3d(6cqw,31cqh,0); }
        50%{ transform:translate3d(-6cqw,62cqh,0); }
        75%{ transform:translate3d(4cqw,93cqh,0); }
        90%{ opacity:var(--o); }
        100%{ transform:translate3d(0,124cqh,0) rotate(var(--rr)); opacity:0; }
    }
    .dis-fx-p{ will-change:transform, opacity; }
}


/* ==================================================================
   5.9.17 — Buttons, music, scroll cue and countdown that hold their
   shape on any WordPress theme. Site themes style every button and
   link (padding, square corners, underlines, uppercase), which turned
   the music disc into a box and pushed words out of their pills.
   Everything here is scoped to the card and wins over the theme.
   ================================================================== */
.pr-card button.pr-music-toggle{
    box-sizing:border-box !important;
    width:calc(var(--pr-u) * 40) !important; height:calc(var(--pr-u) * 40) !important;
    min-width:0 !important; min-height:0 !important; max-width:none !important;
    padding:0 !important; margin:0 !important;
    border-radius:50% !important;
    line-height:1 !important; font-size:0 !important;
    letter-spacing:0 !important; text-transform:none !important; text-shadow:none !important;
}
/* Gallery items (grid/collage/3d) — WP themes add padding to all buttons
   which creates a gap around photos, making them look small inside the frame */
.pr-card .px-gal .px-gal-it{
    box-sizing:border-box !important;
    padding:0 !important; margin:0 !important;
    min-height:0 !important; min-width:0 !important;
    line-height:0 !important; font-size:0 !important;
    letter-spacing:0 !important; text-transform:none !important;
    text-decoration:none !important; text-shadow:none !important;
    vertical-align:top !important;
}
/* Gallery nav arrows — WP themes add border/outline to all buttons, causing
   the visible pink square frame around the arrow buttons */
.pr-card .px-gal .px-gal-nav{
    box-sizing:border-box !important;
    border:0 !important; outline:none !important;
    padding:0 !important; margin:0 !important;
    min-height:0 !important; min-width:0 !important;
    line-height:1 !important; font-size:0 !important;
    letter-spacing:0 !important; text-transform:none !important;
    text-decoration:none !important; text-shadow:none !important;
    -webkit-appearance:none !important; appearance:none !important;
    -webkit-tap-highlight-color:transparent !important;
}
.pr-card .pr-btn-node,
.pr-card .pr-btn-node *{
    text-decoration:none !important; text-shadow:none !important;
}
.pr-card .pr-btn-node{
    box-sizing:border-box; max-width:100%;
    min-height:calc(var(--pr-u) * 40);
    padding:calc(var(--pr-u) * 9) calc(var(--pr-u) * 16);
    line-height:1.2;
    letter-spacing:calc(var(--pr-u) * 1.1);
    text-align:center;
    white-space:normal; overflow-wrap:anywhere;
    box-shadow:none;
    -webkit-tap-highlight-color:transparent;
}
.pr-card .pr-btn-node:focus-visible{ outline:calc(var(--pr-u) * 2) solid var(--pr-accent); outline-offset:calc(var(--pr-u) * 2); }

/* Google Maps / Waze: equal pills side by side, stacked when the
   column is narrow (between the trees), never squeezed */
.pr-card .pr-actions{
    display:grid; width:100%;
    grid-template-columns:repeat(auto-fit, minmax(calc(var(--pr-u) * 116), 1fr));
    gap:calc(var(--pr-u) * 8);
}
.pr-card .pr-actions .pr-btn-node{
    width:100%;
    padding:calc(var(--pr-u) * 9) calc(var(--pr-u) * 10);
    font-size:.95em;
    background:color-mix(in srgb, var(--pr-paper) 78%, transparent);
    border-color:color-mix(in srgb, currentColor 70%, transparent);
    -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
}
.pr-card .pr-actions .pr-btn-node:first-child{
    background:var(--pr-accent); border-color:var(--pr-accent); color:var(--pr-paper);
    box-shadow:0 calc(var(--pr-u) * 5) calc(var(--pr-u) * 14) color-mix(in srgb, var(--pr-accent) 28%, transparent);
}
/* 6.0.1: a single "Direction" button is a centred pill, not a full-width bar */
.pr-card .pr-actions .pr-btn-node:only-child{
    justify-self:center; width:auto;
    min-width:calc(var(--pr-u) * 150);
    padding:calc(var(--pr-u) * 10) calc(var(--pr-u) * 30);
    letter-spacing:calc(var(--pr-u) * 1.6);
}

/* Hadir / Tidak Hadir: the same rule — two across, or one above the other */
.pr-card .pr-rsvp-inline{
    display:grid; width:100%;
    grid-template-columns:repeat(auto-fit, minmax(calc(var(--pr-u) * 112), 1fr));
    gap:calc(var(--pr-u) * 8);
}
.pr-card .pr-rsvp-inline .pr-btn-node,
.pr-card.px-theme .pr-k-rsvp .pr-rsvp-inline .pr-btn-node{
    width:100%; white-space:normal;
    padding-left:calc(var(--pr-u) * 10); padding-right:calc(var(--pr-u) * 10);
    letter-spacing:calc(var(--pr-u) * 1.1);
}
.pr-card.px-theme .pr-k-rsvp .pr-rsvp-inline .pr-btn-ghost,
.pr-card .pr-rsvp-inline .pr-btn-ghost{
    background:color-mix(in srgb, var(--pr-paper) 78%, transparent);
}

/* RSVP / guestbook single buttons and the WhatsApp contact */
.pr-card.px-theme .pr-k-rsvp .pr-btn-node,
.pr-card.px-theme .pr-k-guestbook .pr-btn-node{
    padding-left:calc(var(--pr-u) * 14); padding-right:calc(var(--pr-u) * 14);
    letter-spacing:calc(var(--pr-u) * 1.2);
}
.pr-card .pr-wa .pr-btn-node{
    width:100%;
    background:color-mix(in srgb, var(--pr-paper) 78%, transparent);
}

/* Countdown: labels always on one line, in the space each figure has */
.pr-card .pr-cd-unit{ padding:0 calc(var(--pr-u) * 2); }
.pr-card .pr-cd-unit i{
    white-space:nowrap;
    font-size:calc(var(--pr-u) * 8);
    letter-spacing:calc(var(--pr-u) * 1.2);
    padding-left:calc(var(--pr-u) * 1.2);
}

/* Scroll cue: see "Leret ke atas" near the top of this file (6.1.0) */

/* "Bank QR" placeholder: a hint in the editors, never on a guest's card */
.pr-card .pr-gift .pr-ph-edit{ display:none; }
.pg-edit .pr-card .pr-gift .pr-ph-edit,
#dis-canvas .pr-gift .pr-ph-edit{
    display:flex; width:auto; height:auto;
    padding:calc(var(--pr-u) * 8) calc(var(--pr-u) * 14);
    border-radius:calc(var(--pr-u) * 10);
}

/* Photos: a fine mat and a soft shadow, like a printed card; an empty
   photo frame is a hint in the editors and leaves no box on the card */
.pr-card .pr-k-photo{
    padding:calc(var(--pr-u) * 4);
    background:color-mix(in srgb, var(--pr-paper) 92%, #fff);
    box-shadow:0 0 0 calc(var(--pr-u) * 1) color-mix(in srgb, var(--pr-accent) 28%, transparent),
               0 calc(var(--pr-u) * 10) calc(var(--pr-u) * 26) rgba(40,24,16,.18);
    box-sizing:border-box;
}
.pr-card .pr-k-photo .pr-photo{ border-radius:inherit; }
.pr-card .pr-k-photo .pr-img{ border-radius:inherit; }
.pr-card .pr-k-photo[data-empty]{ visibility:hidden; }
.pg-edit .pr-card .pr-k-photo[data-empty],
#dis-canvas .pr-k-photo[data-empty]{ visibility:visible; }
.pg-edit .pr-card .pr-photo .pr-ph-edit,
#dis-canvas .pr-photo .pr-ph-edit{ width:100%; height:100%; padding:0; }

/* ==================================================================
   6.1.0 — RSVP count and the sky of wishes, inside the card
   ================================================================== */

/* "12 / 300 tetamu akan hadir", just under the RSVP button */
.pr-rsvp-tally{
    position:absolute; left:50%; top:calc(100% + var(--pr-u) * 10); z-index:2;
    transform:translateX(-50%);
    display:flex; flex-direction:column; align-items:center; gap:calc(var(--pr-u) * 5);
    padding:calc(var(--pr-u) * 6) calc(var(--pr-u) * 16) calc(var(--pr-u) * 8);
    border-radius:calc(var(--pr-u) * 18);
    background:color-mix(in srgb, var(--pr-paper, #fff) 76%, transparent);
    box-shadow:0 calc(var(--pr-u) * 3) calc(var(--pr-u) * 12) rgba(40,26,10,.10),
               inset 0 0 0 calc(var(--pr-u) * 1) color-mix(in srgb, var(--pr-accent) 22%, transparent);
    white-space:nowrap; pointer-events:none;
    color:var(--pr-ink, #2b241c);
    font-family:"Cinzel", "Cormorant Garamond", Georgia, serif;
    --rt-c:color-mix(in srgb, var(--px-metal, var(--pr-accent)) 72%, var(--pr-ink, #2b241c));
}
.pr-rsvp-tally[hidden]{ display:none !important; }
.pr-rt-line{
    display:inline-flex; align-items:center; gap:calc(var(--pr-u) * 5);
    font-size:calc(var(--pr-u) * 9); font-weight:600; letter-spacing:.13em; text-transform:uppercase;
    font-variant-numeric:lining-nums;
}
.pr-rt-line svg{ width:calc(var(--pr-u) * 12); height:calc(var(--pr-u) * 12); fill:none; stroke:var(--rt-c); stroke-width:2.6; stroke-linecap:round; stroke-linejoin:round; }
.pr-rt-line b{
    font-family:"Cormorant Garamond", Georgia, serif; font-weight:700; font-variant-numeric:lining-nums tabular-nums;
    font-size:calc(var(--pr-u) * 19); line-height:1; letter-spacing:0; color:var(--rt-c);
    display:inline-block;
}
.pr-rt-of{ font-family:"Cormorant Garamond", Georgia, serif; font-size:calc(var(--pr-u) * 13); font-weight:600; letter-spacing:0; opacity:.7; margin-left:calc(var(--pr-u) * -2); }
.pr-rt-of:empty{ display:none; }
.pr-rt-txt{ opacity:.82; }
.pr-rt-bar{
    display:block; position:relative; overflow:hidden;
    width:calc(var(--pr-u) * 150); height:calc(var(--pr-u) * 3); border-radius:999px;
    background:color-mix(in srgb, var(--pr-ink, #2b241c) 13%, transparent);
}
.pr-rt-bar[hidden]{ display:none; }
.pr-rt-bar i{
    position:absolute; left:0; top:0; bottom:0; width:0; border-radius:inherit;
    background:linear-gradient(90deg, var(--px-metal-lo, var(--rt-c)), var(--rt-c) 55%, var(--px-metal-hi, var(--rt-c)));
    transition:width 1.4s cubic-bezier(.2,.8,.2,1);
}
.pr-rsvp-tally.is-bump .pr-rt-line b{ animation:pr-rt-bump .8s cubic-bezier(.3,1.7,.5,1); }
@keyframes pr-rt-bump{ 0%{ transform:scale(1); } 35%{ transform:scale(1.45); } 100%{ transform:scale(1); } }
/* on a Laman page: under the buttons, in the page's own colours */
.pr-rsvp-tally.is-flow{
    position:relative; left:auto; top:auto; transform:none;
    margin:0 auto 22px; color:inherit; --rt-c:currentColor;
    background:none; box-shadow:none; padding:0;
}
.pr-rsvp-tally.is-flow .pr-rt-line{ font-size:12px; }
.pr-rsvp-tally.is-flow .pr-rt-line b{ font-size:26px; }
.pr-rsvp-tally.is-flow .pr-rt-of{ font-size:17px; }
.pr-rsvp-tally.is-flow .pr-rt-bar{ width:220px; height:4px; background:color-mix(in srgb, currentColor 22%, transparent); }
.pr-rsvp-tally.is-flow .pr-rt-bar i{ background:currentColor; }

/* the sky of wishes: one glowing dot per wish, on a soft halo of paper
   so the dots read over any picture (the crowns, the sky, a photo) */
.pr-wishsky{
    position:absolute; left:14%; right:14%; z-index:6;
    pointer-events:none;
    --ws-c:var(--px-metal, var(--pr-accent, #b08d57));
}
.pr-wishsky::before{
    content:''; position:absolute; left:-9%; right:-9%; top:-6%; bottom:-2%;
    border-radius:50%; pointer-events:none;
    background:radial-gradient(closest-side,
        color-mix(in srgb, var(--pr-paper, #fff) 84%, transparent) 0%,
        color-mix(in srgb, var(--pr-paper, #fff) 70%, transparent) 55%,
        color-mix(in srgb, var(--pr-paper, #fff) 30%, transparent) 82%,
        transparent 100%);
}
.pr-wishsky.is-flow::before{ display:none; }
.pr-ws-field{
    position:absolute; left:0; right:0; top:0; bottom:calc(var(--pr-u) * 18);
    pointer-events:auto; cursor:pointer; outline:none;
    -webkit-tap-highlight-color:transparent; touch-action:manipulation;
    border-radius:50%;
}
.pr-ws-field:focus-visible{ box-shadow:0 0 0 calc(var(--pr-u) * 1) color-mix(in srgb, var(--ws-c) 60%, transparent); }
.pr-wishsky.is-empty .pr-ws-field{ pointer-events:none; cursor:default; }
.pr-ws-dot{
    position:absolute; display:block;
    width:calc(var(--pr-u) * var(--ws-dot, 9) * var(--ds, 1));
    height:calc(var(--pr-u) * var(--ws-dot, 9) * var(--ds, 1));
    transform:translate(-50%, -50%);
    border-radius:50%;
    background:radial-gradient(circle at 46% 42%,
        #ffffff 0 18%,
        color-mix(in srgb, var(--ws-c) 45%, #ffffff) 34%,
        var(--ws-c) 62%,
        color-mix(in srgb, var(--ws-c) 62%, #2a1a06) 100%);
    box-shadow:0 0 0 calc(var(--pr-u) * .6) color-mix(in srgb, var(--ws-c) 55%, #2a1a06 25%),
               0 0 calc(var(--pr-u) * 6) calc(var(--pr-u) * 1.5) color-mix(in srgb, var(--ws-c) 60%, transparent),
               0 0 calc(var(--pr-u) * 16) calc(var(--pr-u) * 3) color-mix(in srgb, var(--ws-c) 26%, transparent);
    animation:pr-ws-tw var(--tw, 4s) ease-in-out var(--td, 0s) infinite;
    transition:left 1s cubic-bezier(.2,.8,.2,1), top 1s cubic-bezier(.2,.8,.2,1);
}
@keyframes pr-ws-tw{
    0%,100%{ opacity:.62; transform:translate(-50%, -50%) scale(.84); }
    50%{ opacity:1; transform:translate(-50%, -50%) scale(1.08); }
}
.pr-ws-dot.is-new{ animation:pr-ws-born 1.6s cubic-bezier(.2,1.4,.4,1) both, pr-ws-tw var(--tw, 4s) ease-in-out 1.6s infinite; z-index:2; }
.pr-ws-dot.is-new::after{
    content:''; position:absolute; inset:-130%; border-radius:50%;
    border:calc(var(--pr-u) * 1) solid var(--ws-c);
    animation:pr-ws-ring 1.8s ease-out .2s 3 both;
}
@keyframes pr-ws-born{ 0%{ opacity:0; transform:translate(-50%, -50%) scale(0); } 60%{ opacity:1; transform:translate(-50%, -50%) scale(1.9); } 100%{ opacity:1; transform:translate(-50%, -50%) scale(1); } }
@keyframes pr-ws-ring{ from{ opacity:.9; transform:scale(.3); } to{ opacity:0; transform:scale(1.6); } }
.pr-ws-dot.is-cur{
    animation:none; opacity:1; z-index:3;
    transform:translate(-50%, -50%) scale(1.6);
    box-shadow:0 0 0 calc(var(--pr-u) * 2.5) color-mix(in srgb, var(--pr-paper, #fff) 85%, transparent),
               0 0 calc(var(--pr-u) * 12) calc(var(--pr-u) * 3) color-mix(in srgb, var(--ws-c) 70%, transparent);
}
.pr-ws-cap{
    position:absolute; left:-12%; right:-12%; bottom:0; margin:0;
    text-align:center; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
    font-family:"Cinzel", "Cormorant Garamond", Georgia, serif; font-weight:600;
    font-size:calc(var(--pr-u) * 8.2); letter-spacing:.16em; text-transform:uppercase;
    color:color-mix(in srgb, var(--pr-ink, #2b241c) 80%, transparent);
    pointer-events:none;
}
.pr-wishsky.is-empty .pr-ws-cap{ bottom:42%; }
.pr-wishsky.is-below .pr-ws-field{ top:calc(var(--pr-u) * 16); bottom:0; }
.pr-wishsky.is-below .pr-ws-cap{ top:0; bottom:auto; }
.pr-wishsky.is-below.is-empty .pr-ws-cap{ top:0; }
.pr-wishsky.is-below::before{ top:-12%; bottom:-6%; }
.pr-wishsky.is-sample .pr-ws-cap{ color:color-mix(in srgb, var(--ws-c) 85%, #2b241c); }
@media (prefers-reduced-motion:reduce){
    .pr-ws-dot, .pr-ws-dot.is-new{ animation:none; opacity:.95; }
    .pr-ws-dot.is-new::after{ display:none; }
}
/* on a Laman page: a band of its own below the buttons */
.pr-wishsky.is-flow{
    position:relative; left:auto; right:auto;
    width:min(100%, 560px); height:200px; margin:6px auto 26px;
    --pr-u:1px; --ws-c:currentColor;
}
.pr-wishsky.is-flow .pr-ws-field{ bottom:22px; }
.pr-wishsky.is-flow .pr-ws-cap{ font-size:11px; color:inherit; opacity:.85; }
.wb-garden .pr-wishsky.is-flow{ --ws-c:var(--wb-accent); }

/* the reader: one wish at a time */
.px-readbox{ text-align:center; padding-top:calc(var(--pr-u) * 34) !important; }
.px-read-kicker{
    display:block; margin:0 calc(var(--pr-u) * 34);
    font-family:"Cinzel", "Cormorant Garamond", Georgia, serif; font-weight:600;
    font-size:calc(var(--pr-u) * 10.5); letter-spacing:.22em; text-transform:uppercase;
    color:var(--px-btn);
}
.px-read-msg{
    position:relative; margin:calc(var(--pr-u) * 18) auto calc(var(--pr-u) * 12) !important; max-width:24em;
    max-height:calc(var(--pr-u) * 260); overflow:auto; overscroll-behavior:contain;
    font-family:"Cormorant Garamond", Georgia, serif; font-style:italic;
    font-size:calc(var(--pr-u) * 19); line-height:1.5; white-space:pre-line; word-break:break-word;
    color:inherit;
}
.px-read-msg::before{
    content:'\201C'; display:block; height:calc(var(--pr-u) * 22); margin-bottom:calc(var(--pr-u) * 4);
    font-family:Georgia, serif; font-style:normal; font-size:calc(var(--pr-u) * 52); line-height:1;
    color:color-mix(in srgb, var(--px-btn) 55%, transparent);
}
.px-read-msg.is-in{ animation:px-read-in .5s cubic-bezier(.2,.8,.2,1); }
@keyframes px-read-in{ from{ opacity:0; transform:translateY(calc(var(--pr-u) * 8)); } to{ opacity:1; transform:none; } }
.px-read-who{ margin:0 !important; font-size:calc(var(--pr-u) * 12) !important; color:color-mix(in srgb, currentColor 62%, transparent); }
.px-read-who b{
    font-family:var(--px-script, "Pinyon Script"), cursive; font-weight:400;
    font-size:calc(var(--pr-u) * 27); color:var(--px-btn);
}
.px-read-nav{
    display:flex; align-items:center; justify-content:center; gap:calc(var(--pr-u) * 18);
    margin-top:calc(var(--pr-u) * 18);
}
.px-read-nav button{
    width:calc(var(--pr-u) * 40); height:calc(var(--pr-u) * 40); border-radius:50%; padding:0;
    border:1px solid color-mix(in srgb, currentColor 22%, transparent); background:transparent; color:inherit;
    font-size:calc(var(--pr-u) * 22); line-height:1; cursor:pointer;
}
.px-read-nav button[hidden]{ visibility:hidden; display:block; }
.px-read-nav span{
    min-width:5em; font-family:"Cinzel", Georgia, serif; font-size:calc(var(--pr-u) * 11); letter-spacing:.14em;
    color:color-mix(in srgb, currentColor 65%, transparent);
}
.px-see{
    display:inline-block; margin:calc(var(--pr-u) * 6) auto 0; padding:calc(var(--pr-u) * 10) calc(var(--pr-u) * 20);
    border:1px solid var(--px-btn); border-radius:999px; background:transparent; color:var(--px-btn); cursor:pointer;
    font-family:"Cinzel", Georgia, serif; font-size:calc(var(--pr-u) * 11); letter-spacing:.14em; text-transform:uppercase;
}


/* ==================================================================
   6.1.2 — Full screen on a phone (guest link & downloaded file)
   ------------------------------------------------------------------
   The card used to keep its 390 x 844 shape at the full width of the
   phone, so it came out taller than the screen (850 px on a phone that
   shows 660-760 px): the guest saw a blown-up card and had to scroll
   the page to reach its foot. With .pr-fill on .pr-stage, on a phone
   the card IS the screen:
     - .pr-phone is exactly the visible screen (100dvh) and becomes a
       size container, so --pr-u follows the smaller of width / 390 and
       height / 844: every page fits one screen, on any phone;
     - each page keeps the 390 x 844 proportions in the middle (the
       words sit where the design put them) while the backdrop, the
       trees, the flowers and the envelope reach the edges of the screen.
   Larger screens show the whole card in the height of the window
   (export_web_html, pristage.css).
   ================================================================== */
@supports (height:1cqh){
    @media (max-width:520px){
        .pr-stage.pr-fill{
            width:100%; height:100vh; height:100svh; height:100dvh; min-height:0;
            padding:0; align-items:stretch; justify-content:center;
        }
        .pr-stage.pr-fill > .pr-phone:not(.wb-phone){
            width:100%; max-width:none; height:100%;
            border:0; border-radius:0; box-shadow:none;
            container-type:size;
        }
        .pr-stage.pr-fill > .pr-phone:not(.wb-phone) > .pr-card{
            height:100%; aspect-ratio:auto;
            --pr-u:min(0.2564102564cqw, 0.1184834123cqh);
        }
        /* the pages: 390 x 844 in the middle of the screen (46.2085cqh = 390/844 of its height) */
        .pr-stage.pr-fill > .pr-phone:not(.wb-phone) .pr-sec{
            width:min(100%, 46.2085308057cqh);
            margin-left:auto; margin-right:auto;
            overflow-x:visible; overflow-y:clip;
        }
        /* a page's own picture still covers the whole width */
        .pr-stage.pr-fill > .pr-phone:not(.wb-phone) .pr-sec-layer{
            left:calc(50% - 50cqw); right:calc(50% - 50cqw);
        }
        /* clear of the notch / home bar when the viewer goes edge to edge */
        .pr-stage.pr-fill > .pr-phone:not(.wb-phone) .pr-music-toggle{
            top:calc(var(--pr-u) * 16 + env(safe-area-inset-top, 0px));
        }
        .pr-stage.pr-fill > .pr-phone:not(.wb-phone) .pr-cue{
            bottom:calc(var(--pr-u) * 14 + env(safe-area-inset-bottom, 0px));
        }
    }
}

/* 6.1.13 — Photo gallery: images fill the tiles; controls have no frames. */
.pr-card .px-gal .px-gal-it,
.pr-card .px-gal .px-gal-it:hover,
.pr-card .px-gal .px-gal-it:active,
.pr-card .px-gal .px-gal-it:focus,
.pr-card .px-gal .px-gal-it:focus-visible{
    border:0 !important;
    outline:0 !important;
    outline-offset:0 !important;
    box-shadow:none !important;
    background:transparent !important;
    -webkit-tap-highlight-color:transparent !important;
}
.pr-card .px-gal .px-gal-nav,
.pr-card .px-gal .px-gal-nav:hover,
.pr-card .px-gal .px-gal-nav:active,
.pr-card .px-gal .px-gal-nav:focus,
.pr-card .px-gal .px-gal-nav:focus-visible{
    border:0 !important;
    outline:0 !important;
    outline-offset:0 !important;
    box-shadow:none !important;
    border-radius:50% !important;
    background:transparent !important;
    color:var(--pr-ink, #142849) !important;
    -webkit-tap-highlight-color:transparent !important;
}
#pr-photo-lightbox .px-lb-x,
#pr-photo-lightbox .px-lb-x:hover,
#pr-photo-lightbox .px-lb-x:active,
#pr-photo-lightbox .px-lb-x:focus,
#pr-photo-lightbox .px-lb-x:focus-visible,
#pr-photo-lightbox .px-lb-nav,
#pr-photo-lightbox .px-lb-nav:hover,
#pr-photo-lightbox .px-lb-nav:active,
#pr-photo-lightbox .px-lb-nav:focus,
#pr-photo-lightbox .px-lb-nav:focus-visible{
    border:0 !important;
    outline:0 !important;
    outline-offset:0 !important;
    box-shadow:none !important;
    -webkit-tap-highlight-color:transparent !important;
}

/* 6.1.16 — White-only halo; no offset dark shadow or dark stroke. */
.pr-card .pr-node:not(.pr-k-image):not(.pr-k-photo):not(.pr-k-video):not(.pr-k-gallery) .pr-in{
    text-shadow:
        0 0 2px rgba(255,255,255,.98),
        0 0 6px rgba(255,255,255,.86) !important;
}