/* Shared design tokens, typography, controls, and reusable components. */
:root {
    --invitation-nav-height: 74px;
    --invitation-content-width: 600px;
    --invitation-safe-top: env(safe-area-inset-top, 0px);
    --invitation-safe-right: env(safe-area-inset-right, 0px);
    --invitation-safe-bottom: env(safe-area-inset-bottom, 0px);
    --invitation-safe-left: env(safe-area-inset-left, 0px);
    --invitation-focus-color: color-mix(in srgb, var(--theme, #7b6044) 68%, #ffffff);
}

:where(a, button, input, select, textarea, [tabindex]):focus-visible {
    outline: 3px solid var(--invitation-focus-color, #0d6efd);
    outline-offset: 3px;
    box-shadow: 0 0 0 5px rgba(255, 255, 255, .28);
}

:where(button, [role="button"], .nav-link) {
    -webkit-tap-highlight-color: transparent;
}
html {
    scroll-behavior: smooth;
    scrollbar-width: none;
}


/* Keep the unopened cover bound to the visual viewport on mobile browsers. */
html.invitation-locked,
html.invitation-locked body {
    width: 100%;
    height: 100%;
    overflow: hidden;
    overscroll-behavior: none;
}

html.invitation-locked body {
    position: fixed;
    inset: 0;
}

html.invitation-locked #welcome {
    position: fixed;
    inset: 0;
    width: auto;
    height: auto;
    min-height: 100vh;
    min-height: 100dvh;
    overflow: hidden;
    overscroll-behavior: none;
}

html.invitation-locked #welcome > .d-flex {
    width: 100%;
    height: 100%;
    min-height: 100%;
    overflow: hidden;
}

html.invitation-locked #root {
    visibility: hidden;
    pointer-events: none;
}


body {
    width: 100%;
    overflow-x: hidden;
    font-family: "Josefin Sans", sans-serif;
    background: #111;
}


.font-esthetic {
    font-family: "Sacramento", cursive;
}


.font-arabic {
    font-family: "Noto Naskh Arabic", serif;
}


.bg-light-dark {
    background-color: var(--bs-light);
}


.bg-white-black {
    background-color: var(--bs-white);
}


.bg-theme-auto {
    background-color: var(--bs-gray-100);
}


.bg-overlay-auto {
    background-color: rgba(255, 255, 255, .55);
    backdrop-filter: blur(.35rem);
}


.text-theme-auto {
    color: var(--bs-dark);
}


.btn-outline-auto {
    --bs-btn-color: var(--bs-dark);
    --bs-btn-border-color: var(--bs-dark);
    --bs-btn-hover-color: var(--bs-white);
    --bs-btn-hover-bg: var(--bs-dark);
    --bs-btn-hover-border-color: var(--bs-dark);
    --bs-btn-focus-shadow-rgb: var(--bs-dark-rgb);
}


.btn-primary {
    --bs-btn-bg: var(--theme);
    --bs-btn-border-color: var(--theme);
    --bs-btn-hover-bg: #111;
    --bs-btn-hover-border-color: #111;
}


.loading-page {
    position: fixed;
    inset: 0;
    z-index: 1056;
    width: 100%;
    height: 100%;
}


.img-center-crop {
    width: 13rem;
    height: 13rem;
    max-width: 100%;
    max-height: 100%;
    object-fit: cover;
    aspect-ratio: 1 / 1;
}


.gallery-photo,
.gallery-placeholder {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    display: block;
}


.gallery-placeholder {
    display: grid;
    place-items: center;
    color: var(--bs-secondary-color);
    border: 1px dashed var(--bs-border-color);
    background: var(--bs-gray-100);
}


.bg-cover-home {
    width: 100%;
    height: 100%;
    object-fit: cover;
    mask-image: linear-gradient(.5turn, transparent, black 40%, black 60%, transparent);
}


.slide-desktop {
    animation: desktopFade 18s linear infinite;
}


.slide-desktop:nth-child(2) {
    animation-delay: 6s;
}


.slide-desktop:nth-child(3) {
    animation-delay: 12s;
}


@keyframes desktopFade {
    0%, 28% {
        opacity: .34;
        transform: scale(1);
    }
    33%, 100% {
        opacity: 0;
        transform: scale(1.05);
    }
}


.color-theme-svg {
    color: rgb(255, 255, 255);
    background-color: var(--bs-light);
}


.svg-wrapper {
    overflow: hidden;
    transform: translateZ(0);
}


.no-gap-bottom {
    margin-bottom: -.75rem;
}


.closing-section {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    --closing-accent: var(--theme);
    --closing-accent: color-mix(in srgb, var(--theme), var(--bs-dark) 52%);
    --closing-ink: var(--bs-dark);
    --closing-soft: rgba(0, 0, 0, .08);
}


.closing-section::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    opacity: .075;
    background-image:
        linear-gradient(45deg, currentColor 1px, transparent 1px),
        linear-gradient(-45deg, currentColor 1px, transparent 1px);
    background-size: 30px 30px;
    background-position: center;
}


.closing-family-panel {
    position: relative;
    width: min(100%, 34rem);
    margin: 0 auto;
    padding: clamp(1rem, 3.6vw, 1.45rem) .35rem .7rem;
}


.closing-family-panel::before,
.closing-family-panel::after {
    content: "";
    display: block;
    width: min(8rem, 34vw);
    height: 1px;
    margin: 0 auto 1rem;
    background: linear-gradient(90deg, transparent, currentColor, transparent);
    opacity: .28;
}


.closing-family-panel::after {
    margin: 1rem auto 0;
}


.closing-honor,
.closing-section > .container > p {
    max-width: 35rem;
    margin: 0 auto;
    font-size: clamp(.82rem, 3.2vw, .96rem);
    line-height: 1.62;
}


.closing-honor {
    color: var(--closing-ink);
    opacity: .82;
}


.closing-respect-title {
    margin: .9rem auto .35rem;
    color: var(--closing-accent);
    font-size: clamp(1.65rem, 8.2vw, 2.35rem);
    line-height: 1.2;
    font-weight: 500;
    text-wrap: balance;
}


.closing-happy {
    margin: 0;
    color: var(--closing-ink);
    font-size: clamp(.8rem, 2.9vw, .92rem);
    font-weight: 600;
    letter-spacing: .02em;
    opacity: .8;
}


.closing-couple-name {
    margin: .2rem 0 .85rem;
    color: var(--closing-accent);
    font-size: clamp(1.8rem, 8.8vw, 2.65rem);
    line-height: 1;
}


.closing-family-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .75rem;
    align-items: start;
}


.closing-family-item {
    min-width: 0;
    color: var(--closing-ink);
    padding: .6rem .35rem .2rem;
    border-top: 1px solid var(--closing-soft);
}


.closing-family-item span {
    display: inline-block;
    color: var(--closing-accent);
    font-size: clamp(.62rem, 2.35vw, .72rem);
    line-height: 1.15;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
}


.closing-family-item p {
    margin: .25rem auto 0;
    max-width: 13rem;
    font-size: clamp(.67rem, 2.55vw, .8rem);
    line-height: 1.32;
    opacity: .82;
    overflow-wrap: anywhere;
}


.closing-section > .container > p {
    padding-top: .55rem !important;
    padding-bottom: .55rem !important;
    color: var(--closing-ink);
    opacity: .82;
}


.closing-section > .container > .font-esthetic {
    margin: 0;
    color: var(--closing-accent);
    font-size: clamp(1.55rem, 7.2vw, 2.08rem) !important;
    line-height: 1.2;
    text-wrap: balance;
}


.closing-section > .container > .closing-wassalam {
    position: relative;
    z-index: 1;
    color: var(--closing-accent);
    text-shadow: none;
}


.closing-section > .container > .font-arabic {
    padding-top: .82rem !important;
    margin: 0;
    color: var(--closing-ink);
    font-size: clamp(1.55rem, 6.7vw, 2.08rem) !important;
    line-height: 1.35;
}


.closing-section > .container > hr {
    margin: 1rem 0 .85rem;
    border-color: currentColor;
    opacity: .55;
}


.closing-section > .container > small {
    display: block;
    padding-bottom: 1.1rem;
    font-size: clamp(.78rem, 2.9vw, .92rem);
}


svg {
    display: block;
    line-height: 0;
    shape-rendering: geometricPrecision;
}


.cursor-pointer {
    cursor: pointer;
}


.mouse-animation {
    height: 2rem;
}


.scroll-animation {
    width: .4rem;
    height: .4rem;
    animation: scrollDot 1.2s ease-in-out infinite;
}


@keyframes scrollDot {
    0% {
        transform: translateY(0);
        opacity: .4;
    }
    70% {
        transform: translateY(.8rem);
        opacity: 1;
    }
    100% {
        transform: translateY(0);
        opacity: .4;
    }
}


.animate-love {
    animation: loveFloat 3s ease-in-out infinite;
}


@keyframes loveFloat {
    0%, 100% {
        transform: translateY(0) rotate(-6deg);
    }
    50% {
        transform: translateY(-12px) rotate(6deg);
    }
}


.width-loading {
    width: 25%;
}


.with-scrollbar {
    scrollbar-width: auto;
}


.btn-transparent {
    background-color: rgba(248, 249, 250, .74);
    backdrop-filter: blur(.5rem);
}


.theme-line {
    width: 4rem;
    height: .12rem;
    margin: .5rem auto 1rem;
    background: var(--theme);
    border-radius: 999px;
}


.progress-bar {
    background-color: var(--theme);
}


/* Mobile-friendly foundation shared by every theme */
*,
*::before,
*::after {
    box-sizing: border-box;
}


html,
body {
    max-width: 100%;
}


img,
video,
canvas,
svg {
    max-width: 100%;
}


main,
section,
.container,
.row,
[class*="col-"] {
    min-width: 0;
}


h1,
h2,
h3,
h4,
h5,
h6,
p,
small,
a,
button,
label,
strong {
    overflow-wrap: break-word;
}


.btn,
.form-control,
.form-select,
textarea {
    max-width: 100%;
}


.btn {
    white-space: normal;
}


/* =========================================
   THEME ORNAMENTS & ANIMATIONS (ENHANCED)
   ========================================= */

#theme-ornaments {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 1057; /* Di atas loading-page (1056) agar tampil di landing page */
    overflow: hidden;
}

@keyframes swayWayangCenter { 
    0% { transform: translateX(-50%) rotate(-2deg); } 
    100% { transform: translateX(-50%) rotate(2deg); } 
}

@keyframes fadeInWayang { to { opacity: 0.08; } }


/* 2. Sakura Jepang: Vibrant Petals */
.petal {
    position: absolute;
    width: 18px;
    height: 18px;
    background: linear-gradient(135deg, rgba(255, 183, 197, 0.8), rgba(255, 105, 135, 0.6));
    border-radius: 15px 0 15px 0;
    top: -20px;
    box-shadow: 0 0 10px rgba(255, 183, 197, 0.5);
    animation: fallSakura linear infinite;
}

.petal.petal-odd { background: linear-gradient(135deg, rgba(255, 145, 164, 0.8), rgba(255, 99, 132, 0.6)); animation-duration: 6s; }

.petal.petal-even { animation-duration: 8s; }

.petal.petal-1 { left: 10%; animation-delay: 0s; }

.petal.petal-2 { left: 20%; animation-delay: 2s; }

.petal.petal-3 { left: 30%; animation-delay: 4s; }

.petal.petal-4 { left: 40%; animation-delay: 1s; }

.petal.petal-5 { left: 50%; animation-delay: 3s; }

.petal.petal-6 { left: 60%; animation-delay: 5s; }

.petal.petal-7 { left: 70%; animation-delay: 0.5s; }

.petal.petal-8 { left: 80%; animation-delay: 2.5s; }

.petal.petal-9 { left: 90%; animation-delay: 4.5s; }

.petal.petal-10 { left: 15%; animation-delay: 1.5s; }

.petal.petal-11 { left: 35%; animation-delay: 3.5s; }

.petal.petal-12 { left: 55%; animation-delay: 0.2s; }

.petal.petal-13 { left: 75%; animation-delay: 2.2s; }

.petal.petal-14 { left: 95%; animation-delay: 4.2s; }

.petal.petal-15 { left: 5%; animation-delay: 1.8s; }

@keyframes fallSakura {
    0% { transform: translateY(-20px) rotate(0deg) translateX(0); opacity: 0; }
    10% { opacity: 1; }
    50% { transform: translateY(50vh) rotate(180deg) translateX(80px); }
    90% { opacity: 1; }
    100% { transform: translateY(100vh) rotate(360deg) translateX(-80px); opacity: 0; }
}

@keyframes swingLantern { 0% { transform: rotate(-15deg); } 100% { transform: rotate(15deg); } }

@keyframes framePulse { 0% { border-color: rgba(212, 175, 55, 0.2); } 100% { border-color: rgba(212, 175, 55, 0.5); } }

@keyframes pulseCrown { 0%, 100% { transform: scale(1); opacity: 0.8; } 50% { transform: scale(1.15); opacity: 1; filter: drop-shadow(0 0 25px rgba(212, 175, 55, 1)); } }


/* 6. Garden Party: Floating Leaves */
.leaf {
    position: absolute;
    font-size: 2rem;
    color: rgba(45, 106, 79, 0.5);
    top: -40px;
    animation: fallSakura linear infinite;
}

.leaf.leaf-odd { color: rgba(27, 67, 50, 0.6); animation-duration: 9s; font-size: 1.5rem; }

.leaf.leaf-even { animation-duration: 12s; }

.leaf.leaf-1 { left: 10%; animation-delay: 0s; }

.leaf.leaf-2 { left: 30%; animation-delay: 2s; }

.leaf.leaf-3 { left: 50%; animation-delay: 4s; }

.leaf.leaf-4 { left: 70%; animation-delay: 1s; }

.leaf.leaf-5 { left: 90%; animation-delay: 3s; }

.leaf.leaf-6 { left: 20%; animation-delay: 5s; }

.leaf.leaf-7 { left: 40%; animation-delay: 0.5s; }

.leaf.leaf-8 { left: 60%; animation-delay: 2.5s; }

.leaf.leaf-9 { left: 80%; animation-delay: 4.5s; }

.leaf.leaf-10 { left: 15%; animation-delay: 1.5s; }

.leaf.leaf-11 { left: 85%; animation-delay: 3.5s; }

.leaf.leaf-12 { left: 55%; animation-delay: 0.2s; }


/* 7. Elegant Luxury: Twinkling Diamonds */
.sparkle {
    position: absolute;
    font-size: 1rem;
    color: rgba(255, 215, 0, 0.8);
    filter: drop-shadow(0 0 5px rgba(255, 215, 0, 1));
    animation: twinkle 4s infinite ease-in-out;
}

.sparkle.sparkle-odd { font-size: 0.6rem; animation-duration: 2s; }

.sparkle.sparkle-1 { top: 10%; left: 20%; animation-delay: 0s; }

.sparkle.sparkle-2 { top: 30%; left: 80%; animation-delay: 0.5s; }

.sparkle.sparkle-3 { top: 60%; left: 15%; animation-delay: 1s; }

.sparkle.sparkle-4 { top: 80%; left: 70%; animation-delay: 1.5s; }

.sparkle.sparkle-5 { top: 40%; left: 40%; animation-delay: 2s; }

.sparkle.sparkle-6 { top: 15%; left: 60%; animation-delay: 0.2s; }

.sparkle.sparkle-7 { top: 85%; left: 25%; animation-delay: 0.7s; }

.sparkle.sparkle-8 { top: 50%; left: 85%; animation-delay: 1.2s; }

.sparkle.sparkle-9 { top: 70%; left: 10%; animation-delay: 1.7s; }

.sparkle.sparkle-10 { top: 25%; left: 90%; animation-delay: 2.2s; }

.sparkle.sparkle-11 { top: 5%; left: 40%; animation-delay: 0.3s; }

.sparkle.sparkle-12 { top: 95%; left: 50%; animation-delay: 0.8s; }

.sparkle.sparkle-13 { top: 45%; left: 5%; animation-delay: 1.3s; }

.sparkle.sparkle-14 { top: 65%; left: 95%; animation-delay: 1.8s; }

.sparkle.sparkle-15 { top: 35%; left: 25%; animation-delay: 2.3s; }

.sparkle.sparkle-16 { top: 55%; left: 65%; animation-delay: 0.4s; }

.sparkle.sparkle-17 { top: 75%; left: 45%; animation-delay: 0.9s; }

.sparkle.sparkle-18 { top: 20%; left: 10%; animation-delay: 1.4s; }

.sparkle.sparkle-19 { top: 90%; left: 80%; animation-delay: 1.9s; }

.sparkle.sparkle-20 { top: 10%; left: 95%; animation-delay: 2.4s; }

@keyframes twinkle { 0%, 100% { opacity: 0; transform: scale(0.3) rotate(0deg); } 50% { opacity: 1; transform: scale(1.5) rotate(180deg); } }

@keyframes moveGrid { 0% { background-position: 0 0; } 100% { background-position: 0 500px; } }

@keyframes shoot { 0% { transform: rotate(45deg) translateY(-100px); opacity: 1; } 100% { transform: rotate(45deg) translateY(2500px); opacity: 0; } }

@keyframes expandFlourish { 0% { transform: scaleX(0); opacity: 0; } 100% { transform: scaleX(1); opacity: 1; } }

@keyframes panBatik { 0% { transform: translate(0, 0); } 100% { transform: translate(60px, 60px); } }

@keyframes rotateCircle { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }


@keyframes javaneseCoverOutLeft {
    from { opacity: .44; transform: translateX(0); }
    to { opacity: 0; transform: translateX(-110%); }
}


@keyframes javaneseCoverOutRight {
    from { opacity: .44; transform: scaleX(-1) translateX(0); }
    to { opacity: 0; transform: scaleX(-1) translateX(-110%); }
}


@keyframes javaneseSideInLeft {
    from { opacity: 0; transform: translateX(-42px) scale(.98); }
    to { opacity: .36; transform: translateX(0) scale(1); }
}


@keyframes javaneseSideInRight {
    from { opacity: 0; transform: translateX(42px) scaleX(-1) scale(.98); }
    to { opacity: .36; transform: translateX(0) scaleX(-1) scale(1); }
}


@keyframes javaneseOrnamentGlow {
    from { filter: drop-shadow(0 10px 16px rgba(75, 54, 33, .16)); }
    to { filter: drop-shadow(0 16px 24px rgba(75, 54, 33, .27)); }
}


@keyframes javaneseCornerTopLeft {
    from { opacity: 0; transform: translate(-24px, -24px) scale(.94); }
    to { opacity: .46; transform: translate(0, 0) scale(1); }
}


@keyframes javaneseCornerTopRight {
    from { opacity: 0; transform: translate(24px, -24px) scale(.94); }
    to { opacity: .46; transform: translate(0, 0) scale(1); }
}


@keyframes javaneseCornerBottomLeft {
    from { opacity: 0; transform: translate(-24px, 24px) scale(.94); }
    to { opacity: .38; transform: translate(0, 0) scale(1); }
}


@keyframes javaneseCornerBottomRight {
    from { opacity: 0; transform: translate(24px, 24px) scale(.94); }
    to { opacity: .38; transform: translate(0, 0) scale(1); }
}


@keyframes javaneseGununganLeft {
    from { opacity: 0; transform: translate(-28px, 18px) rotate(-14deg) scale(.92); }
    to { opacity: .14; transform: translate(0, 0) rotate(-8deg) scale(1); }
}


@keyframes javaneseGununganRight {
    from { opacity: 0; transform: translate(28px, 18px) scaleX(-1) rotate(-14deg) scale(.92); }
    to { opacity: .14; transform: translate(0, 0) scaleX(-1) rotate(-8deg) scale(1); }
}


@keyframes burgundyTopLeftIn {
    from { opacity: 0; transform: translate3d(-1rem, -1rem, 0) scaleX(-1) scale(.96); }
    to { opacity: 1; transform: translate3d(0, 0, 0) scaleX(-1) scale(1); }
}


@keyframes burgundyTopRightIn {
    from { opacity: 0; transform: translate3d(1rem, -1rem, 0) scale(.96); }
    to { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
}


@keyframes burgundyBottomIn {
    from { opacity: 0; transform: translate3d(0, 1rem, 0) scale(.98); }
    to { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
}


@keyframes wayangPatternDrift {
    to { background-position: 230px 230px, -150px 150px; }
}


@keyframes wayangMistFloat {
    to { transform: translate3d(28px, -24px, 0) scale(1.03); }
}


@keyframes wayangCornerLeftIn {
    from { opacity: 0; transform: translate3d(-20px, -16px, 0) scale(.96); }
    to { opacity: .92; transform: translate3d(0, 0, 0) scale(1); }
}


@keyframes wayangCornerRightIn {
    from { opacity: 0; transform: translate3d(20px, -16px, 0) scaleX(-1) scale(.96); }
    to { opacity: .92; transform: translate3d(0, 0, 0) scaleX(-1) scale(1); }
}


@keyframes wayangLineTopIn {
    from { opacity: 0; transform: translate3d(-50%, -12px, 0) scale(.98); }
    to { opacity: .92; transform: translate3d(-50%, 0, 0) scale(1); }
}


@keyframes wayangLineBottomIn {
    from { opacity: 0; transform: translate3d(-50%, 12px, 0) scale(.98); }
    to { opacity: .92; transform: translate3d(-50%, 0, 0) scale(1); }
}


@keyframes wayangPuppetLeftIn {
    from { opacity: 0; transform: translate3d(-24px, 24px, 0) rotate(-2.5deg) scale(.97); }
    to { opacity: 1; transform: translate3d(0, 0, 0) rotate(0) scale(1); }
}


@keyframes wayangPuppetRightIn {
    from { opacity: 0; transform: translate3d(24px, 24px, 0) rotate(2.5deg) scale(.97); }
    to { opacity: 1; transform: translate3d(0, 0, 0) rotate(0) scale(1); }
}


@keyframes wayangPuppetLeftSubtleIn {
    from { opacity: 0; transform: translate3d(-16px, 16px, 0) rotate(-1.5deg) scale(.975); }
    to { opacity: 1; transform: translate3d(0, 0, 0) rotate(0) scale(1); }
}


@keyframes wayangPuppetRightSubtleIn {
    from { opacity: 0; transform: translate3d(16px, 16px, 0) rotate(1.5deg) scale(.975); }
    to { opacity: 1; transform: translate3d(0, 0, 0) rotate(0) scale(1); }
}


@keyframes wayangGoldGlow {
    from { filter: drop-shadow(0 14px 18px rgba(0, 0, 0, .2)); }
    to { filter: drop-shadow(0 18px 24px rgba(255, 206, 67, .18)); }
}


@keyframes floralBurgundyTopIn {
    from {
        opacity: 0;
        transform: translate3d(-50%, -58px, 0) scale(1.05);
    }
    to {
        opacity: .96;
        transform: translate3d(-50%, -4px, 0) scale(1);
    }
}


@keyframes floralBurgundyBottomIn {
    from {
        opacity: 0;
        transform: translate3d(-50%, 58px, 0) scale(1.05);
    }
    to {
        opacity: .96;
        transform: translate3d(-50%, 6px, 0) scale(1);
    }
}


@keyframes motifSlideX {
    0% { background-position: 0 0; }
    100% { background-position: 220px 0; }
}


@keyframes motifDrift {
    0% { background-position: 0 0; }
    100% { background-position: 180px 140px; }
}


@keyframes pulseHalo {
    0%, 100% { opacity: .42; transform: scale(1); }
    50% { opacity: .82; transform: scale(1.05); }
}


@keyframes floatPetal {
    0% { transform: translateY(-10px) rotate(0deg); opacity: 0; }
    50% { opacity: 0.7; }
    100% { transform: translateY(100vh) rotate(360deg); opacity: 0; }
}

@keyframes invitationRevealIn {
    0% {
        opacity: 0;
        transform: translate3d(var(--item-reveal-x), var(--item-reveal-y), 0) scale(var(--item-reveal-scale));
    }
    70% {
        opacity: 1;
    }
    100% {
        opacity: 1;
        transform: translate3d(0, 0, 0) scale(1);
    }
}


@keyframes themeSignatureIn {
    from {
        opacity: 0;
        transform: translate3d(-50%, -22px, 0) scale(.9);
    }
    to {
        opacity: var(--signature-opacity);
        transform: translate3d(-50%, 0, 0) scale(1);
    }
}


@keyframes themeSignatureFloat {
    from { transform: translate3d(0, 0, 0) rotate(-.8deg); }
    to { transform: translate3d(0, 7px, 0) rotate(.8deg); }
}


@keyframes minimalLinesDrift {
    to { background-position: 180px 180px, 56px 56px; }
}


@keyframes softRotateField {
    to { transform: rotate(360deg) scale(1.03); }
}


@keyframes batikParangDrift {
    to { background-position: 150px 150px, -150px 150px; }
}


@keyframes batikDotsFloat {
    to { transform: translate3d(28px, -22px, 0); }
}


@keyframes luxurySheenSweep {
    0%, 100% { transform: translate3d(-26%, 0, 0); opacity: .12; }
    45%, 60% { transform: translate3d(26%, 0, 0); opacity: .32; }
}


@keyframes diamondLatticeGlide {
    to { background-position: 120px 120px, -120px 120px; }
}


@keyframes royalRaysTurn {
    to { transform: rotate(360deg); }
}


@keyframes goldPatternRise {
    to { background-position: 68px -68px, -68px -68px; }
}


@keyframes parchmentGrainMove {
    0%, 100% { transform: translate3d(0, 0, 0); }
    25% { transform: translate3d(8px, -6px, 0); }
    50% { transform: translate3d(-5px, 7px, 0); }
    75% { transform: translate3d(4px, 5px, 0); }
}


@keyframes vintagePatternSway {
    to { transform: translate3d(-32px, 18px, 0) scale(1.04); }
}


@keyframes sakuraWindField {
    to { transform: translate3d(34px, -18px, 0) scale(1.04); }
}


@keyframes sakuraMistDrift {
    to { background-position: 180px -180px; }
}


@keyframes islamicPatternSlide {
    to { background-position: 92px 92px, -92px 92px; }
}


@keyframes archPatternFloat {
    to { transform: translate3d(0, -24px, 0); }
}


@keyframes nusantaraBatikFlow {
    to { background-position: 120px 120px, -160px 160px; }
}


@keyframes wovenPatternShift {
    to { background-position: 140px 140px, -140px 140px; }
}


@keyframes gardenBreezeMove {
    to { transform: translate3d(42px, -26px, 0); }
}


@keyframes leafShadowDrift {
    to { background-position: 160px -160px; }
}


@keyframes anaPaperBreathe {
    to { transform: translate3d(0, -18px, 0) scale(1.025); }
}


@keyframes anaFloralDrift {
    to { background-position: 180px 140px, -260px 200px; }
}


@keyframes editorialLinesMove {
    to { background-position: 180px 180px, 0 52px; }
}


@keyframes editorialSpotlightSweep {
    0%, 100% { transform: translate3d(-28%, 0, 0); opacity: .12; }
    50% { transform: translate3d(28%, 0, 0); opacity: .28; }
}


@keyframes fullPhotoKenBurns {
    from { transform: scale(1); }
    to { transform: scale(1.08) translate3d(-1.8%, 1.2%, 0); }
}


@keyframes invitationPageIn {
    from { opacity: 0; }
    to { opacity: 1; }
}


@keyframes invitationPageOut {
    from { opacity: 1; }
    to { opacity: 0; }
}


@keyframes invitationRevealLite {
    from {
        opacity: 0;
        transform: translate3d(var(--item-reveal-x), var(--item-reveal-y), 0) scale(var(--item-reveal-scale));
    }
    to {
        opacity: 1;
        transform: translate3d(0, 0, 0) scale(1);
    }
}


@keyframes wayangPuppetLiteSwayLeft {
    from { transform: translate3d(0, 0, 0) rotate(-.16deg); }
    to { transform: translate3d(0, -3px, 0) rotate(.16deg); }
}


@keyframes wayangPuppetLiteSwayRight {
    from { transform: translate3d(0, -1px, 0) rotate(.14deg); }
    to { transform: translate3d(0, 2px, 0) rotate(-.14deg); }
}


@keyframes scrollDotLite {
    0%, 100% { opacity: .35; transform: translate3d(0, 0, 0); }
    50% { opacity: .9; transform: translate3d(0, 7px, 0); }
}


@keyframes loveFloatLite {
    0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
    50% { transform: translate3d(0, -4px, 0) scale(1.035); }
}


@keyframes invitationButtonLite {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.018); }
}


@keyframes themeOrnamentsSoftIn {
    from { opacity: 0; }
    to { opacity: 1; }
}


@keyframes welcomeItemReveal {
    from {
        opacity: 0;
        transform: translate3d(0, 14px, 0) scale(.992);
    }
    to {
        opacity: 1;
        transform: translate3d(0, 0, 0) scale(1);
    }
}