/*
 * Template "Floral Pastel Tanpa Foto" (Pernikahan): a lush peony garden, complete without any photo.
 * Colors from the variant (x-inv.head): --inv-primary (deep berry: dark bands, names, buttons), --inv-accent (soft
 * gold hairlines and rings), --inv-background (warm ivory), --inv-text, and the garden tints --inv-blush, --inv-peach,
 * --inv-lilac, --inv-mint and --inv-leaf (washes, glows, card edges).
 * Flowers are public-domain botanical plates in img/ (see img/CREDITS.md), shown as <img> (.fp-flora), swaying
 * slowly; the cover wreath draws once; six petals drift once on "Buka Undangan"; gentle fade-up on scroll.
 * Fonts: the client's pair (--inv-font-display for names, --inv-font-heading for titles) + Jost for reading.
 * All motion off with "reduce motion". Every class starts with "fp-".
 */

:root {
    --inv-primary: #7a1a45;
    --inv-accent: #c99a5b;
    --inv-background: #fdf5f2;
    --inv-text: #3a1d2a;
    --inv-blush: #f4d5dd;
    --inv-peach: #f1b9a3;
    --inv-lilac: #a68bcf;
    --inv-mint: #7fb08e;
    --inv-leaf: #3c6b4f;
    --inv-radius: 14px;

    --fp-col: min(100vw, 460px);
    --fp-script: var(--inv-font-display, 'Great Vibes'), 'Brush Script MT', cursive;
    --fp-serif: var(--inv-font-heading, 'Cormorant Garamond'), 'Times New Roman', serif;
    --fp-sans: 'Jost', 'Segoe UI', system-ui, sans-serif;
    --fp-arabic: 'Amiri', 'Traditional Arabic', serif;

    --fp-deep: color-mix(in srgb, var(--inv-primary) 74%, #12030a);
    --fp-ivory: #fff8f3;
    --fp-gold-l: color-mix(in srgb, var(--inv-accent) 62%, #fff);
    --fp-blush-l: color-mix(in srgb, var(--inv-blush) 75%, #fff);
    --fp-muted: color-mix(in srgb, var(--inv-text) 84%, var(--inv-background));
    --fp-on-dark: color-mix(in srgb, var(--fp-ivory) 90%, var(--inv-blush));
    --fp-on-dark-muted: color-mix(in srgb, var(--fp-ivory) 82%, var(--inv-primary));
    --fp-em: color-mix(in srgb, var(--inv-primary) 68%, var(--inv-lilac));
    --fp-line: color-mix(in srgb, var(--inv-accent) 70%, transparent);
    --fp-shadow: 0 22px 44px -28px color-mix(in srgb, var(--inv-primary) 75%, transparent);
    --fp-dark-bg:
        radial-gradient(75% 42% at 92% 0%, color-mix(in srgb, var(--inv-lilac) 34%, transparent), transparent 72%),
        radial-gradient(70% 40% at 0% 100%, color-mix(in srgb, var(--inv-blush) 20%, transparent), transparent 72%),
        radial-gradient(55% 30% at 10% 30%, color-mix(in srgb, var(--inv-primary) 60%, #ff7aa8 0%), transparent 70%),
        linear-gradient(172deg, var(--inv-primary), var(--fp-deep));
    --fp-washes:
        radial-gradient(55% 32% at 4% 6%, color-mix(in srgb, var(--inv-blush) 70%, transparent), transparent 72%),
        radial-gradient(50% 30% at 98% 34%, color-mix(in srgb, var(--inv-lilac) 20%, transparent), transparent 72%),
        radial-gradient(52% 30% at 2% 78%, color-mix(in srgb, var(--inv-mint) 18%, transparent), transparent 72%),
        radial-gradient(50% 30% at 96% 98%, color-mix(in srgb, var(--inv-peach) 30%, transparent), transparent 72%);
}

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; }
html { scroll-behavior: smooth; }
p, h1, h2, h3, figure, blockquote, ol, ul { margin: 0; }
a { color: inherit; }
img { max-width: 100%; }

body.fp-body {
    min-height: 100vh;
    color: var(--inv-text);
    font-family: var(--fp-sans);
    font-size: 15.5px;
    line-height: 1.7;
    font-variant-numeric: lining-nums;
    -webkit-font-smoothing: antialiased;
    background: var(--fp-dark-bg);
    background-attachment: fixed;
}

.fp-preview {
    position: fixed; top: 0; left: 50%; z-index: 60; transform: translateX(-50%);
    padding: .3rem .9rem; border-radius: 0 0 10px 10px; white-space: nowrap;
    background: var(--inv-accent); color: #2a1408; font: 600 .7rem/1.4 var(--fp-sans);
}

/* ---------- botanical art ---------- */
.fp-flora {
    display: block; height: auto; pointer-events: none; user-select: none;
    filter: drop-shadow(0 10px 14px rgb(40 6 22 / .22));
    transform-origin: 50% 90%;
}
/* the art follows the variant a little */
.fp-v-lilac-mist .fp-flora--peonies, .fp-v-lilac-mist .fp-flora--peony { filter: drop-shadow(0 10px 14px rgb(30 10 40 / .25)) hue-rotate(-16deg); }
.fp-v-peach-sorbet .fp-flora--peonies, .fp-v-peach-sorbet .fp-flora--peony { filter: drop-shadow(0 10px 14px rgb(50 15 5 / .22)) hue-rotate(10deg) saturate(.95); }
html.inv-anim .fp-flora { animation: fp-sway 9s ease-in-out infinite alternate; }
@keyframes fp-sway { from { rotate: -1.6deg; } to { rotate: 1.6deg; } }

/* wide screens: two big bouquets on the deep berry backdrop beside the column */
.fp-backdrop { display: none; }
@media (min-width: 900px) {
    .fp-backdrop { display: block; position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
    .fp-backdrop .fp-flora { position: absolute; opacity: .9; animation: none !important; }
    .fp-backdrop__left { left: max(-4rem, calc(50vw - 230px - 34rem)); bottom: -4rem; width: min(30vw, 30rem); }
    .fp-backdrop__right { right: max(-3rem, calc(50vw - 230px - 30rem)); top: -3rem; width: min(26vw, 25rem); transform: rotate(168deg); }
}

/* six petals drift down once after "Buka Undangan", then stop */
.fp-drift { display: none; position: fixed; top: 0; left: 50%; z-index: 35; width: var(--fp-col); height: 100vh; transform: translateX(-50%); overflow: hidden; pointer-events: none; }
html.inv-anim .fp-drift { display: block; }
.fp-drift i {
    position: absolute; top: -30px; left: var(--x); width: 13px; height: 17px; opacity: 0;
    border-radius: 80% 10% 80% 10%;
    background: linear-gradient(140deg, var(--fp-pet, var(--inv-blush)), color-mix(in srgb, var(--fp-pet, var(--inv-blush)) 60%, var(--inv-primary)));
}
.fp-drift.is-go i { animation: fp-petal var(--d) cubic-bezier(.3, .2, .5, 1) var(--delay) forwards; }
.fp-drift i:nth-child(1) { --x: 9%; --d: 4.8s; --delay: .1s; }
.fp-drift i:nth-child(2) { --x: 27%; --d: 5.6s; --delay: .55s; --fp-pet: color-mix(in srgb, var(--inv-primary) 55%, #fff); }
.fp-drift i:nth-child(3) { --x: 46%; --d: 4.4s; --delay: .3s; --fp-pet: var(--inv-lilac); }
.fp-drift i:nth-child(4) { --x: 64%; --d: 5.2s; --delay: .75s; }
.fp-drift i:nth-child(5) { --x: 80%; --d: 5s; --delay: .4s; --fp-pet: color-mix(in srgb, var(--inv-primary) 55%, #fff); }
.fp-drift i:nth-child(6) { --x: 92%; --d: 5.8s; --delay: .95s; --fp-pet: var(--inv-peach); }
@keyframes fp-petal {
    0% { opacity: 0; transform: translate(0, 0) rotate(0deg); }
    10% { opacity: .9; }
    80% { opacity: .75; }
    100% { opacity: 0; transform: translate(-40px, 105vh) rotate(320deg); }
}

/* ---------- shared pieces ---------- */
.fp-kicker {
    font: 600 .72rem/1.5 var(--fp-sans); letter-spacing: .28em; text-transform: uppercase;
    color: color-mix(in srgb, var(--inv-primary) 88%, var(--inv-text));
}
.fp-script { font-family: var(--fp-script); font-weight: 400; line-height: 1.1; color: var(--inv-primary); }
.fp-icon { display: block; width: 1.1rem; height: 1.1rem; flex: none; }

.fp-divider { display: flex; align-items: center; justify-content: center; gap: .55rem; max-width: 14rem; margin: 1.4rem auto; }
.fp-divider__line { flex: 1; height: 1px; background: linear-gradient(90deg, transparent, var(--fp-line), transparent); }
.fp-divider__mark { flex: none; width: 1.3rem; height: 1.3rem; overflow: visible; }
.fp-divider__petals { fill: color-mix(in srgb, var(--inv-accent) 85%, #fff); }
.fp-divider__heart { fill: var(--inv-primary); }
.fp-divider--title { margin: .5rem auto 0; max-width: 12rem; }

.fp-title { position: relative; display: grid; justify-items: center; gap: .2rem; margin-bottom: 2.1rem; }
.fp-title__text { position: relative; font: 500 clamp(2.1rem, 9.5vw, 2.5rem)/1.12 var(--fp-serif); color: var(--inv-primary); letter-spacing: -.005em; }
.fp-title__text em { font-style: italic; color: var(--fp-em); }
.fp-title > .fp-kicker, .fp-title > .fp-divider { position: relative; }
/* a small botanical cluster leaning in beside the heading */
.fp-title__flora { position: absolute; top: -3.6rem; width: 6.6rem; z-index: 0; }
.fp-title__flora--left { left: -2.4rem; transform: rotate(-12deg); }
.fp-title__flora--right { right: -2.4rem; transform: rotate(12deg) scaleX(-1); }

.fp-chip {
    display: inline-flex; align-items: center; gap: .4rem; margin-top: .75rem;
    padding: .4rem .9rem; border-radius: 999px; text-decoration: none;
    font: 500 .8rem/1.2 var(--fp-sans); color: var(--inv-primary); background: #fff;
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--inv-primary) 40%, transparent);
}
.fp-chip .fp-icon { width: .95rem; height: .95rem; }

.fp-card {
    position: relative; padding: 2.4rem 1.2rem 1.5rem; border-radius: 22px; text-align: left; color: var(--inv-text);
    background: #fffdfb;
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--inv-accent) 40%, transparent), var(--fp-shadow);
}
.fp-card__flora { position: absolute; z-index: 2; top: -3.6rem; right: -1.4rem; width: 6.4rem; transform: rotate(16deg); }
.fp-lead { max-width: 31ch; margin: -.8rem auto 1.7rem; color: var(--fp-muted); font-size: .95rem; }

/* ---------- section grounds ---------- */
.fp-section { position: relative; padding: 4.6rem 1.5rem; text-align: center; overflow: hidden; }
.fp-section > * { position: relative; }
.fp-light { background: var(--fp-washes), var(--inv-background); }
.fp-blush {
    background:
        radial-gradient(60% 30% at 100% 0%, color-mix(in srgb, var(--inv-lilac) 22%, transparent), transparent 72%),
        radial-gradient(60% 30% at 0% 100%, color-mix(in srgb, var(--inv-mint) 20%, transparent), transparent 72%),
        linear-gradient(180deg, color-mix(in srgb, var(--inv-blush) 70%, var(--inv-background)), color-mix(in srgb, var(--inv-blush) 40%, var(--inv-background)));
}
.fp-dark { color: var(--fp-on-dark); background: var(--fp-dark-bg); }
.fp-dark .fp-kicker { color: var(--fp-blush-l); }
.fp-dark .fp-title__text { color: var(--fp-ivory); }
.fp-dark .fp-title__text em { color: var(--fp-gold-l); }
.fp-dark .fp-divider__petals { fill: var(--fp-gold-l); }
.fp-dark .fp-divider__heart { fill: var(--fp-blush-l); }
.fp-dark .fp-lead { color: var(--fp-on-dark-muted); }
.fp-dark .fp-script { color: var(--fp-ivory); }
.fp-dark .fp-card .fp-kicker { color: color-mix(in srgb, var(--inv-primary) 88%, var(--inv-text)); }

/* ---------- buttons ---------- */
.inv-button {
    background: var(--inv-primary); color: #fff; font: 500 .86rem/1.2 var(--fp-sans); letter-spacing: .02em;
    box-shadow: 0 12px 22px -14px var(--inv-primary);
}
.inv-button--outline {
    background: #fff; color: var(--inv-primary);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--inv-primary) 45%, transparent);
}
.fp-dark > * .inv-button:not(.fp-card *) { background: var(--fp-ivory); color: var(--inv-primary); }
.fp-dark .inv-countdown__actions .inv-button {
    background: color-mix(in srgb, #fff 10%, transparent); color: var(--fp-ivory);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--fp-gold-l) 70%, transparent);
}

/* ---------- wreath (cover & closing) ---------- */
.fp-crest { position: relative; display: grid; place-items: center; width: 15rem; aspect-ratio: 1; }
.fp-crest__ring { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.fp-crest__ring circle { fill: none; stroke: var(--fp-gold-l); }
.fp-crest__ring-a { stroke-width: 1.4; }
.fp-crest__ring-b { stroke-width: .7; opacity: .7; stroke-dasharray: 1.6 3.2; }
.fp-crest__disc {
    position: absolute; inset: 13%; border-radius: 50%;
    background:
        radial-gradient(circle at 50% 50%, transparent 58%, color-mix(in srgb, var(--inv-blush) 60%, transparent) 100%),
        radial-gradient(circle at 34% 28%, #fffdfb, color-mix(in srgb, var(--inv-blush) 78%, var(--fp-ivory)) 78%);
    box-shadow: inset 0 0 0 5px color-mix(in srgb, var(--fp-ivory) 70%, transparent), inset 0 0 0 6px color-mix(in srgb, var(--inv-accent) 70%, transparent), 0 18px 40px -16px rgb(20 2 10 / .75);
}
.fp-crest__f { position: absolute; z-index: 1; }
.fp-crest__f--main { width: 68%; left: -30%; bottom: -15%; }
.fp-crest__f--top { width: 48%; right: -25%; top: -3%; transform: rotate(-4deg); animation-delay: -3s !important; }
.fp-crest__f--side { width: 34%; right: -15%; bottom: -10%; transform: rotate(14deg); animation-delay: -5s !important; }
.fp-crest__f--head { width: 29%; left: -1%; top: 1%; transform: rotate(40deg); animation-delay: -2s !important; }
.fp-crest__f--tl { width: 32%; left: -12%; top: -10%; transform: scaleX(-1) rotate(10deg); animation-delay: -6s !important; }
.fp-crest__letters {
    position: relative; z-index: 2; display: inline-flex; align-items: center; gap: .1rem;
    font: 500 3rem/1 var(--fp-serif); color: var(--inv-primary); letter-spacing: .02em;
}
.fp-crest__letters i { font: 400 2.2rem/1 var(--fp-script); font-style: normal; color: var(--inv-accent); padding: 0 .12rem; }

/* opening moment: the ring draws once, the flowers settle */
html.inv-anim .fp-crest--cover .fp-crest__ring-a { stroke-dasharray: 100; stroke-dashoffset: 100; animation: fp-draw 1.5s cubic-bezier(.5, 0, .2, 1) .15s forwards; }
html.inv-anim .fp-crest--cover .fp-crest__disc { animation: fp-fade .9s ease-out .1s both; }
html.inv-anim .fp-crest--cover .fp-crest__f { animation: fp-bloom 1.3s cubic-bezier(.2, .8, .2, 1) .35s both, fp-sway 9s ease-in-out 1.7s infinite alternate; }
html.inv-anim .fp-crest--cover .fp-crest__f--top { animation-delay: .55s, 1.9s !important; }
html.inv-anim .fp-crest--cover .fp-crest__f--side { animation-delay: .7s, 2s !important; }
html.inv-anim .fp-crest--cover .fp-crest__f--head { animation-delay: .45s, 2.1s !important; }
@keyframes fp-draw { to { stroke-dashoffset: 0; } }
@keyframes fp-fade { from { opacity: 0; scale: .94; } }
@keyframes fp-bloom { from { opacity: 0; scale: .82; } }

/* ---------- cover ---------- */
.fp-cover {
    position: fixed; top: 0; bottom: 0; left: 50%; z-index: 30; width: var(--fp-col); transform: translateX(-50%);
    overflow: hidden auto; overscroll-behavior: contain;
    color: var(--fp-on-dark); background: var(--fp-dark-bg);
    box-shadow: 0 0 80px -20px rgb(10 0 5 / .6);
}
.fp-cover__glow {
    position: absolute; inset: 0; pointer-events: none;
    background:
        radial-gradient(48% 30% at 50% 34%, color-mix(in srgb, var(--inv-blush) 30%, transparent), transparent 72%),
        radial-gradient(60% 24% at 50% 100%, color-mix(in srgb, var(--inv-lilac) 22%, transparent), transparent 72%);
}
.fp-cover__corners { position: absolute; inset: 0; pointer-events: none; }
.fp-cover__corners .fp-flora { position: absolute; }
.fp-cover__corner-br { bottom: -6svh; right: -19%; width: min(8.4rem, 17svh); transform: rotate(-24deg) scaleX(-1); animation-delay: -4s !important; }

.fp-cover__inner {
    position: relative; z-index: 2; min-height: 100vh; min-height: 100svh;
    display: flex; flex-direction: column; align-items: center; justify-content: space-evenly;
    padding: calc(3.8rem + env(safe-area-inset-top)) 1.6rem calc(3.2rem + env(safe-area-inset-bottom));
    text-align: center;
}
.fp-cover__the { color: var(--fp-gold-l); letter-spacing: .34em; }
.fp-crest--cover { width: min(14.5rem, 31svh); margin: .9rem 0 1.1rem; }
.fp-cover__names { position: relative; z-index: 3; display: flex; flex-direction: column; align-items: center; font-size: clamp(3rem, 14vw, 3.7rem); line-height: 1.02; color: var(--fp-ivory); text-shadow: 0 2px 18px rgb(30 2 14 / .45); }
.fp-cover__amp { font-size: .55em; color: var(--fp-gold-l); margin: -.02em 0; }
.fp-cover__date {
    margin-top: .7rem; padding: .32rem .2rem; font: 600 .76rem/1.5 var(--fp-sans); letter-spacing: .22em; text-transform: uppercase; color: var(--fp-ivory);
    border-top: 1px solid color-mix(in srgb, var(--fp-gold-l) 70%, transparent); border-bottom: 1px solid color-mix(in srgb, var(--fp-gold-l) 70%, transparent);
}
.fp-cover__quote { max-width: 30ch; margin-top: .7rem; font: italic 400 1.04rem/1.5 var(--fp-serif); color: var(--fp-on-dark-muted); }

.fp-guest {
    width: min(100%, 17.5rem); margin-top: 1.2rem; padding: .75rem 1.1rem .85rem; border-radius: 16px;
    background: color-mix(in srgb, #fff 9%, transparent);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--fp-gold-l) 55%, transparent);
    -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.fp-guest__label { font: 600 .64rem/1.4 var(--fp-sans); letter-spacing: .26em; text-transform: uppercase; color: var(--fp-blush-l); }
.fp-guest__name { display: block; margin-top: .15rem; font: 600 1.32rem/1.3 var(--fp-serif); color: var(--fp-ivory); overflow-wrap: anywhere; }

.fp-open {
    margin-top: 1.1rem; padding: .85rem 1.7rem; gap: .55rem;
    font: 600 .78rem/1 var(--fp-sans); letter-spacing: .16em; text-transform: uppercase;
    background: linear-gradient(135deg, var(--fp-gold-l), var(--inv-accent)); color: color-mix(in srgb, var(--inv-primary) 70%, #000);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--fp-gold-l) 22%, transparent), 0 14px 26px -12px rgb(10 0 5 / .7);
}
.fp-open__icon { width: 1.1rem; height: 1.1rem; }
.fp-open:hover { filter: brightness(1.06); }

.fp-cover--leave { transition: opacity .9s ease, transform 1s cubic-bezier(.6, 0, .3, 1); }
.fp-cover--gone { opacity: 0; transform: translateX(-50%) translateY(-4%) scale(1.03); }

/* ---------- page ---------- */
.fp-page {
    position: relative; display: flex; flex-direction: column; width: var(--fp-col); min-height: 100vh; margin: 0 auto; overflow: hidden;
    background: var(--inv-background);
    box-shadow: 0 0 80px -20px rgb(10 0 5 / .6);
}
.fp-main { position: relative; }

/* ---------- opening ---------- */
.fp-opening { padding-top: 6.6rem; }
.fp-opening__flora { position: absolute; inset: 0 0 auto; height: 14rem; pointer-events: none; }
.fp-opening__flora .fp-flora { position: absolute; }
.fp-opening__sp { top: -1.2rem; left: -2.2rem; width: 9.6rem; transform: rotate(-14deg); }
.fp-opening__an { top: -1rem; right: -2rem; width: 8.6rem; transform: rotate(16deg) scaleX(-1); animation-delay: -4s !important; }
.fp-opening__text { max-width: 22rem; margin: 0 auto; }
.fp-arabic { margin-bottom: .6rem; font-family: var(--fp-arabic); font-size: clamp(1.8rem, 8vw, 2.2rem); line-height: 1.9; color: var(--inv-primary); }
.fp-opening__greeting { font: italic 500 1.4rem/1.4 var(--fp-serif); color: var(--inv-primary); }
.fp-opening__message { max-width: 32ch; margin: .9rem auto 0; color: var(--fp-muted); }

.fp-verse {
    margin: 3.2rem auto 0; padding: 2.6rem 1.6rem 2rem; max-width: 23rem; border-radius: 26px; color: var(--fp-on-dark);
    background: var(--fp-dark-bg);
    box-shadow: var(--fp-shadow);
}
.fp-verse::before {
    content: ''; position: absolute; inset: .45rem; border-radius: 21px; pointer-events: none;
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--fp-gold-l) 55%, transparent);
}
.fp-verse__flora { position: absolute; z-index: 2; top: -3.4rem; right: -1.6rem; width: 7rem; transform: rotate(18deg); }
.fp-verse__mark { position: relative; display: block; height: 1.7rem; font: 400 3.8rem/1 var(--fp-serif); color: var(--fp-gold-l); }
.fp-verse blockquote { position: relative; font: italic 400 1.14rem/1.62 var(--fp-serif); color: var(--fp-ivory); }
.fp-verse figcaption { position: relative; margin-top: 1rem; font: 600 .72rem/1.4 var(--fp-sans); letter-spacing: .22em; text-transform: uppercase; color: var(--fp-gold-l); }

/* ---------- couple: zig-zag with berry medallions ---------- */
.fp-couple { padding-left: 1.2rem; padding-right: 1.2rem; }
.fp-person { display: grid; grid-template-columns: 8rem minmax(0, 1fr); align-items: center; gap: 1.1rem; text-align: left; }
.fp-person--right { grid-template-columns: minmax(0, 1fr) 8rem; text-align: right; }
.fp-person--right .fp-medal { order: 2; }
.fp-medal { position: relative; display: grid; place-items: center; width: 100%; aspect-ratio: 1; }
.fp-medal__disc {
    position: absolute; inset: 0; border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--inv-primary) 70%, #fff 12%), var(--fp-deep) 78%);
    box-shadow: inset 0 0 0 1.5px var(--fp-gold-l), inset 0 0 0 5px var(--inv-primary), inset 0 0 0 6px color-mix(in srgb, var(--fp-gold-l) 55%, transparent), 0 16px 30px -16px var(--inv-primary);
}
.fp-medal__initial { position: relative; margin-top: -.3rem; font: 400 3.6rem/1 var(--fp-script); color: var(--fp-ivory); }
.fp-medal__flora { position: absolute; z-index: 1; width: 82%; left: -36%; bottom: -34%; transform: rotate(-10deg); }
.fp-person--right .fp-medal__flora { left: auto; right: -32%; width: 74%; transform: rotate(10deg); }
.fp-person__label { font-size: .62rem; letter-spacing: .22em; }
.fp-person__nick { font-size: 2.7rem; margin-top: .1rem; }
.fp-person__name { margin-top: .1rem; font: 600 1.22rem/1.25 var(--fp-serif); color: var(--inv-text); overflow-wrap: anywhere; }
.fp-person__parents { margin-top: .45rem; font-size: .86rem; line-height: 1.5; color: var(--fp-muted); }
.fp-person__parents span { display: block; font-size: .78rem; font-style: italic; }

.fp-amp { display: flex; align-items: center; gap: .9rem; max-width: 14rem; margin: 1.7rem auto 1.5rem; }
.fp-amp__mark { font-size: 3rem; line-height: 1; color: var(--inv-accent); }

/* ---------- countdown ---------- */
.fp-countdown { padding-bottom: 8.5rem; }
.fp-countdown > .fp-flora { position: absolute; }
.fp-countdown__f1 { width: 11.5rem; left: -3.4rem; bottom: -3.4rem; transform: rotate(10deg); }
.fp-countdown__f2 { width: 8.4rem; right: -2.8rem; top: -3.2rem; transform: rotate(192deg); animation-delay: -4s !important; }
.fp-datecard { display: grid; justify-items: center; margin: -.6rem auto 1.8rem; }
.fp-datecard__day, .fp-datecard__month { font: 600 .74rem/1.4 var(--fp-sans); letter-spacing: .26em; text-transform: uppercase; color: var(--fp-blush-l); }
.fp-datecard__num { font: 500 4.4rem/1.02 var(--fp-serif); color: var(--fp-ivory); }

.inv-countdown { gap: .55rem; }
.inv-countdown__item {
    flex: 1; min-width: 0; max-width: 4.9rem; padding: .7rem .2rem .6rem; border-radius: 16px;
    background: color-mix(in srgb, #fff 9%, transparent);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--fp-gold-l) 50%, transparent);
    -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
}
.inv-countdown__value { font: 500 1.75rem/1.1 var(--fp-serif); color: var(--fp-ivory); }
.inv-countdown__label { margin-top: .15rem; font: 600 .58rem/1.2 var(--fp-sans); letter-spacing: .14em; text-transform: uppercase; color: var(--fp-blush-l); opacity: 1; }
.inv-countdown__actions { margin-top: 1.6rem; }
.inv-countdown__actions .inv-button { padding: .6rem 1rem; font-size: .78rem; }
.inv-countdown__done { font: italic 500 1.25rem var(--fp-serif); color: var(--fp-ivory); }

/* ---------- events: cards with a berry head ---------- */
.fp-events__list { display: grid; gap: 2.6rem; padding-top: .6rem; }
.fp-event { position: relative; border-radius: 22px; background: #fffdfb; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--inv-accent) 40%, transparent), var(--fp-shadow); }
.fp-event__head {
    position: relative; padding: 1.4rem 1rem 1.2rem; border-radius: 22px 22px 0 0; color: var(--fp-ivory);
    background: var(--fp-dark-bg);
}
.fp-event__head::after { content: ''; position: absolute; left: 1.2rem; right: 1.2rem; bottom: .5rem; height: 1px; background: linear-gradient(90deg, transparent, var(--fp-gold-l), transparent); }
.fp-event__flora { position: absolute; z-index: 2; top: -2.8rem; right: -1.6rem; width: 5.8rem; transform: rotate(16deg); }
.fp-event:nth-child(even) .fp-event__flora { right: auto; left: -1.8rem; width: 6.6rem; transform: rotate(-14deg); }
.fp-event__no { position: relative; font-size: .64rem; color: var(--fp-gold-l) !important; }
.fp-event__name { position: relative; font-size: 2.6rem; color: var(--fp-ivory); }
.fp-event__body { display: grid; justify-items: center; gap: .35rem; padding: 1.3rem 1.1rem 1.5rem; }
.fp-event__date, .fp-event__time, .fp-event__dress { display: inline-flex; align-items: center; gap: .45rem; font-size: .95rem; }
.fp-event__date { font-weight: 600; }
.fp-event__time { font-weight: 600; color: var(--inv-primary); }
.fp-event__date .fp-icon, .fp-event__time .fp-icon, .fp-event__dress .fp-icon, .fp-event__pin { width: 1rem; height: 1rem; color: var(--inv-primary); }
.fp-event__place { display: grid; justify-items: center; gap: .1rem; margin-top: .4rem; }
.fp-event__venue { font: 600 1.3rem/1.3 var(--fp-serif); color: var(--inv-text); }
.fp-event__address { max-width: 30ch; font-size: .88rem; line-height: 1.5; color: var(--fp-muted); }
.fp-event__dress { margin-top: .25rem; padding: .28rem .85rem; border-radius: 999px; font-size: .82rem; background: color-mix(in srgb, var(--inv-mint) 22%, #fff); color: var(--inv-text); }
.fp-event__actions { display: flex; justify-content: center; gap: .5rem; width: 100%; margin-top: 1rem; }
.fp-event__actions .inv-button { flex: 1; max-width: 10rem; gap: .4rem; padding: .65rem .6rem; font-size: .78rem; white-space: nowrap; }
.fp-event__actions .fp-icon { width: .95rem; height: .95rem; }

/* ---------- love story: a timeline ---------- */
.fp-story { background: radial-gradient(70% 30% at 100% 20%, color-mix(in srgb, var(--inv-lilac) 22%, transparent), transparent 72%), var(--fp-washes), var(--inv-background); }
.fp-timeline { position: relative; display: grid; gap: 1.2rem; padding: 0 0 0 2.3rem; list-style: none; text-align: left; }
.fp-timeline::before {
    content: ''; position: absolute; top: .6rem; bottom: .6rem; left: .95rem; width: 1px;
    background: linear-gradient(transparent, var(--fp-line) 6%, var(--fp-line) 94%, transparent);
}
.fp-moment { position: relative; }
.fp-moment__dot {
    position: absolute; top: .85rem; left: -1.85rem; width: 1rem; height: 1rem; border-radius: 50% 50% 50% 0; rotate: -45deg;
    background: linear-gradient(135deg, color-mix(in srgb, var(--inv-primary) 70%, #fff), var(--inv-primary));
    box-shadow: 0 0 0 3px var(--inv-background), 0 0 0 4px var(--fp-line);
}
.fp-moment:nth-child(3n+2) .fp-moment__dot { background: linear-gradient(135deg, color-mix(in srgb, var(--inv-lilac) 60%, #fff), var(--inv-lilac)); }
.fp-moment:nth-child(3n) .fp-moment__dot { background: linear-gradient(135deg, color-mix(in srgb, var(--inv-mint) 60%, #fff), var(--inv-leaf)); }
.fp-moment__card {
    padding: .95rem 1.05rem 1.05rem; border-radius: 4px 18px 18px 18px; background: #fffdfb;
    box-shadow: inset 3px 0 0 var(--inv-primary), inset 0 0 0 1px color-mix(in srgb, var(--inv-accent) 30%, transparent), 0 14px 28px -22px var(--inv-primary);
}
.fp-moment__date { font: 600 .68rem/1.4 var(--fp-sans); letter-spacing: .2em; text-transform: uppercase; color: var(--inv-primary); }
.fp-moment__title { margin-top: .15rem; font: 600 1.25rem/1.25 var(--fp-serif); color: var(--inv-text); overflow-wrap: anywhere; }
.fp-moment__story { margin-top: .3rem; font-size: .9rem; line-height: 1.6; color: var(--fp-muted); overflow-wrap: anywhere; }

/* ---------- live ---------- */
.fp-live__card { display: grid; justify-items: center; gap: .6rem; text-align: center; }
.fp-live__icon { display: grid; place-items: center; width: 3rem; height: 3rem; border-radius: 50%; background: color-mix(in srgb, var(--inv-blush) 55%, #fff); color: var(--inv-primary); }
.fp-live__icon .fp-icon { width: 1.5rem; height: 1.5rem; }
.fp-live__badge { display: inline-flex; align-items: center; gap: .45rem; font: 600 .72rem/1.4 var(--fp-sans); letter-spacing: .2em; text-transform: uppercase; color: var(--inv-primary); }
.fp-live__badge span { width: .5rem; height: .5rem; border-radius: 50%; background: #d64545; box-shadow: 0 0 0 4px color-mix(in srgb, #d64545 22%, transparent); }
html.inv-anim .fp-live__badge span { animation: fp-pulse 2s ease-in-out infinite; }
@keyframes fp-pulse { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }
.fp-live__note { font-size: .88rem; color: var(--fp-muted); }

/* ---------- gift: accounts as deep berry cards ---------- */
.fp-giftbox { display: grid; gap: 1rem; }
.inv-gift__account + .inv-gift__account { margin-top: 0; }
.inv-gift__accounts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; }
.inv-gift__account:last-child:nth-child(odd) { grid-column: 1 / -1; }
.inv-gift__account:not(.inv-gift__address) {
    position: relative; isolation: isolate; overflow: hidden; min-width: 0; margin: 0;
    display: flex; flex-direction: column; align-items: flex-start;
    padding: .85rem .85rem .9rem; border-radius: 16px; text-align: left; color: var(--fp-ivory);
    background:
        radial-gradient(90% 70% at 100% 0%, color-mix(in srgb, var(--inv-lilac) 45%, transparent), transparent 70%),
        linear-gradient(140deg, color-mix(in srgb, var(--inv-primary) 88%, #fff 12%), var(--fp-deep));
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--fp-gold-l) 45%, transparent), 0 16px 28px -18px var(--inv-primary);
}
.inv-gift__account:nth-child(3n+2):not(.inv-gift__address) {
    background:
        radial-gradient(90% 70% at 0% 100%, color-mix(in srgb, var(--inv-mint) 40%, transparent), transparent 70%),
        linear-gradient(140deg, color-mix(in srgb, var(--inv-primary) 88%, #fff 12%), var(--fp-deep));
}
.inv-gift__account:not(.inv-gift__address)::before {
    content: ''; display: block; order: 1; width: 1.7rem; height: 1.3rem; margin-top: .55rem; border-radius: 4px;
    background:
        linear-gradient(90deg, transparent 31%, rgb(0 0 0 / .2) 32% 34%, transparent 35% 65%, rgb(0 0 0 / .2) 66% 68%, transparent 69%),
        linear-gradient(transparent 46%, rgb(0 0 0 / .2) 47% 53%, transparent 54%),
        linear-gradient(135deg, #f8e7bd, var(--inv-accent) 60%, color-mix(in srgb, var(--inv-accent) 75%, #000));
    box-shadow: inset 0 0 0 1px rgb(0 0 0 / .12);
}
.inv-gift__account:not(.inv-gift__address) .inv-gift__bank {
    order: 0; margin: 0; min-height: 1.5rem; max-width: 100%; display: flex; align-items: center; overflow-wrap: anywhere;
    font: 600 .68rem/1.2 var(--fp-sans); letter-spacing: .12em; text-transform: uppercase; color: var(--fp-ivory);
}
.inv-gift__account:not(.inv-gift__address) .inv-gift__logo { height: 1.5rem; padding: .2rem .45rem; border-radius: .35rem; background: #fff; }
.inv-gift__account:not(.inv-gift__address) .inv-gift__logo img { max-width: 5.5rem; }
.inv-gift__account:not(.inv-gift__address) .inv-gift__number {
    order: 2; max-width: 100%; margin: .55rem 0 0; font: 500 1rem/1.3 var(--fp-sans); letter-spacing: .06em; color: var(--fp-ivory); overflow-wrap: anywhere;
}
.inv-gift__account:not(.inv-gift__address) .inv-gift__holder {
    order: 3; max-width: 100%; margin: .2rem 0 0; font: 600 .62rem/1.35 var(--fp-sans); letter-spacing: .1em; text-transform: uppercase;
    color: var(--fp-blush-l); overflow-wrap: anywhere;
}
.inv-gift__account:not(.inv-gift__address) .inv-button {
    order: 4; margin-top: .65rem; padding: .38rem .8rem; font-size: .7rem;
    background: var(--fp-ivory); color: var(--inv-primary); box-shadow: none;
}
.inv-gift__address {
    padding: 1.4rem 1.2rem; border-radius: 20px; text-align: center; background: #fffdfb;
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--inv-accent) 40%, transparent), var(--fp-shadow);
}
.inv-gift__address .inv-gift__bank { margin: 0 0 .4rem; font: 600 .72rem/1.4 var(--fp-sans); letter-spacing: .22em; text-transform: uppercase; color: var(--inv-primary); }
.inv-gift__address .inv-gift__holder { margin: 0 0 .2rem; font: 600 1.18rem/1.3 var(--fp-serif); }
.inv-gift__address p { margin: 0 0 .9rem; font-size: .92rem; color: var(--fp-muted); }

/* ---------- forms & wishes ---------- */
.fp-form .inv-form label, .fp-form .inv-form__choices legend { font-weight: 600; font-size: .88rem; color: var(--inv-text); }
.fp-form .inv-form input:not([type=radio]):not([type=checkbox]), .fp-form .inv-form select, .fp-form .inv-form textarea {
    border: 1px solid color-mix(in srgb, var(--inv-primary) 30%, transparent); border-radius: 12px;
    background: color-mix(in srgb, var(--inv-blush) 14%, #fff); color: var(--inv-text); padding: .7rem .85rem; font-family: var(--fp-sans);
}
.fp-form .inv-form input:focus, .fp-form .inv-form select:focus, .fp-form .inv-form textarea:focus {
    outline: none; border-color: var(--inv-primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--inv-primary) 18%, transparent);
}
.fp-form .inv-form .inv-button[type=submit] { width: 100%; padding: .85rem 1rem; }
.fp-wishes .fp-card { padding-top: 1.5rem; }
.inv-rsvp__deadline { margin: 0 0 .9rem; font-size: .86rem; color: var(--fp-muted); text-align: center; }
.inv-form__notice { background: color-mix(in srgb, var(--inv-mint) 20%, #fff); color: var(--inv-text); }
.inv-wishes { --inv-wishes-height: 20rem; }
.inv-wishes:not(.inv-wishes--paged) .inv-wishes__list {
    padding: .5rem .45rem .5rem .35rem; border-radius: 14px;
    background: color-mix(in srgb, var(--inv-blush) 30%, var(--inv-background));
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--inv-accent) 25%, transparent);
}
.inv-wish {
    padding: .65rem .8rem; background: #fff; border-radius: 4px 14px 14px 14px;
    box-shadow: inset 3px 0 0 var(--inv-primary), inset 0 0 0 1px color-mix(in srgb, var(--inv-accent) 25%, transparent);
}
.inv-wish:nth-child(3n+2) { box-shadow: inset 3px 0 0 var(--inv-lilac), inset 0 0 0 1px color-mix(in srgb, var(--inv-accent) 25%, transparent); }
.inv-wish:nth-child(3n) { box-shadow: inset 3px 0 0 var(--inv-leaf), inset 0 0 0 1px color-mix(in srgb, var(--inv-accent) 25%, transparent); }
.inv-wish__name { font: 600 1.05rem/1.3 var(--fp-serif); color: var(--inv-primary); }
.inv-wish__message { font-size: .9rem; line-height: 1.5; color: var(--inv-text); }
.inv-wish__time { font-size: .72rem; color: var(--fp-muted); }

/* ---------- closing: the big floral frame ---------- */
.fp-closing { padding-top: 5rem; padding-bottom: 2.9rem; }
.fp-crest--closing { width: min(78%, 16.5rem); margin: .4rem auto 3.2rem; }
.fp-crest__words { position: relative; z-index: 2; display: grid; justify-items: center; gap: .35rem; margin-top: -.6rem; }
.fp-crest--closing .fp-kicker { color: var(--inv-primary); font-size: .66rem; }
.fp-crest--closing .fp-crest__f--main { width: 72%; left: -32%; bottom: -20%; }
.fp-closing__message { max-width: 32ch; margin: 0 auto; color: var(--fp-on-dark-muted); }
.fp-closing__sign { margin-bottom: .2rem; }
.fp-closing__names { font-size: clamp(2.7rem, 12vw, 3.2rem); }

/* ---------- footer, nav, music ---------- */
.fp-foot {
    flex: 1; display: grid; align-content: start; justify-items: center; gap: .4rem;
    padding: .2rem 1rem 0; color: var(--fp-on-dark-muted);
    background: var(--fp-deep);
}
.fp-branding { color: var(--fp-on-dark-muted); opacity: 1; }
.inv-checkin { color: #1a1a1a; }

.fp-nav {
    --inv-nav-bg: color-mix(in srgb, var(--fp-ivory) 94%, transparent);
    --inv-nav-text: color-mix(in srgb, var(--inv-text) 80%, transparent);
    --inv-nav-active: var(--inv-primary);
    border-color: color-mix(in srgb, var(--inv-accent) 45%, transparent);
    font-family: var(--fp-sans);
}
.fp-nav .inv-nav__item.is-active { color: #fff; font-weight: 600; }

/* the music button stays inside the column */
.fp-body .inv-music { right: max(1rem, calc(50vw - 230px + 1rem)); }
.inv-music__button { background: var(--fp-ivory); color: var(--inv-primary); box-shadow: 0 0 0 1px color-mix(in srgb, var(--inv-accent) 60%, transparent), 0 0 0 4px color-mix(in srgb, var(--inv-blush) 35%, transparent), 0 8px 18px -8px var(--inv-primary); }

/* ---------- fit: the whole cover (wreath → "Buka Undangan") on one phone screen ---------- */
@media (max-height: 760px) {
    .fp-cover__inner { padding-top: calc(2.8rem + env(safe-area-inset-top)); padding-bottom: calc(2.4rem + env(safe-area-inset-bottom)); }
    .fp-crest--cover { width: min(13rem, 29svh); margin: .2rem 0 .7rem; }
    .fp-crest--cover .fp-crest__letters { font-size: 2.5rem; }
    .fp-crest--cover .fp-crest__letters i { font-size: 1.8rem; }
    .fp-cover__names { font-size: clamp(2.7rem, 12.5vw, 3.2rem); }
    .fp-cover__quote { max-width: 34ch; font-size: .98rem; line-height: 1.4; }
    .fp-guest { margin-top: .8rem; }
    .fp-open { margin-top: .8rem; }
}
@media (max-height: 660px) {
    .fp-cover__inner { padding-top: calc(2rem + env(safe-area-inset-top)); padding-bottom: calc(2rem + env(safe-area-inset-bottom)); }
    .fp-crest--cover { width: 25svh; margin: .1rem 0 .5rem; }
    .fp-crest--cover .fp-crest__letters { font-size: 2.1rem; }
    .fp-crest--cover .fp-crest__letters i { font-size: 1.5rem; }
    .fp-cover__names { font-size: 2.5rem; }
    .fp-cover__date { margin-top: .4rem; font-size: .7rem; }
    .fp-cover__quote { margin-top: .4rem; font-size: .92rem; }
    .fp-guest { margin-top: .6rem; padding: .55rem 1rem .6rem; }
    .fp-guest__name { font-size: 1.2rem; }
    .fp-open { margin-top: .6rem; padding: .75rem 1.5rem; }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .fp-flora, .fp-crest__ring-a, .fp-crest__disc, .fp-live__badge span { animation: none !important; }
    .fp-drift { display: none !important; }
    .fp-cover--leave { transition: opacity .3s ease; }
}

/* the RSVP card's peony stays clear of the lead text */
.fp-rsvp .fp-lead { margin-bottom: 3.2rem; }

/* ---------- intro scene "Taman Peoni Malam" (scene.json, sections/_scene): a berry night garden, the plates grow in from
   the corners, a crimson peony head drifts down, the gold ring draws and the name card is the ivory medallion ---------- */
.fp-scene-flora { transform-origin: 50% 50%; }
.fp-scene-flora .fp-flora { width: 100%; }
.fp-scene-ring { position: absolute; left: 50%; top: 44%; width: min(88vw, 25.5rem); aspect-ratio: 1; transform: translate(-50%, -50%); }
.fp-scene-ring svg { display: block; width: 100%; height: 100%; overflow: visible; }
.fp-scene-ring circle { fill: none; stroke: var(--fp-gold-l); }
.fp-scene-ring__a { stroke-width: 1.2; }
.fp-scene-ring__b { stroke-width: .6; opacity: .75; stroke-dasharray: 1.6 3.2; }
html.inv-anim .inv-intro.is-playing .fp-scene-ring__a { stroke-dasharray: 100; stroke-dashoffset: 100; animation: fp-draw 1.8s cubic-bezier(.5, 0, .2, 1) 1.9s forwards; }
.fp-scene-petals { position: absolute; inset: 0; overflow: hidden; }
.fp-scene-petals i {
    position: absolute; top: -30px; left: var(--x); width: 13px; height: 17px; opacity: 0; border-radius: 80% 10% 80% 10%;
    background: linear-gradient(140deg, var(--fp-pet, var(--inv-blush)), color-mix(in srgb, var(--fp-pet, var(--inv-blush)) 60%, var(--inv-primary)));
}
html.inv-anim .inv-intro.is-playing .fp-scene-petals i { animation: fp-petal var(--d) cubic-bezier(.3, .2, .5, 1) var(--delay) forwards; }
.fp-scene-petals i:nth-child(1) { --x: 12%; --d: 6s; --delay: .5s; }
.fp-scene-petals i:nth-child(2) { --x: 30%; --d: 7s; --delay: 1.6s; --fp-pet: color-mix(in srgb, var(--inv-primary) 55%, #fff); }
.fp-scene-petals i:nth-child(3) { --x: 52%; --d: 6.2s; --delay: .9s; --fp-pet: var(--inv-lilac); }
.fp-scene-petals i:nth-child(4) { --x: 70%; --d: 6.6s; --delay: 2.4s; }
.fp-scene-petals i:nth-child(5) { --x: 84%; --d: 5.8s; --delay: 1.2s; --fp-pet: color-mix(in srgb, var(--inv-primary) 55%, #fff); }
.fp-scene-petals i:nth-child(6) { --x: 94%; --d: 7.2s; --delay: 3s; --fp-pet: var(--inv-peach); }
/* the name card: the ivory medallion of the cover wreath */
body.fp-body .inv-scene__card {
    aspect-ratio: 1; padding: 1.6rem 1.4rem; border-radius: 50%; -webkit-mask: none; mask: none;
    -webkit-backdrop-filter: none; backdrop-filter: none;
    background:
        radial-gradient(circle at 50% 50%, transparent 60%, color-mix(in srgb, var(--inv-blush) 60%, transparent) 100%),
        radial-gradient(circle at 34% 28%, #fffdfb, color-mix(in srgb, var(--inv-blush) 78%, var(--fp-ivory)) 78%);
    box-shadow: inset 0 0 0 5px color-mix(in srgb, var(--fp-ivory) 70%, transparent), inset 0 0 0 6px color-mix(in srgb, var(--inv-accent) 70%, transparent), 0 22px 46px -16px rgb(20 2 10 / .8);
}
body.fp-body .inv-scene__card .inv-intro__label { margin-bottom: .5rem; font: 600 .64rem/1.4 var(--fp-sans); letter-spacing: .28em; color: color-mix(in srgb, var(--inv-accent) 55%, var(--inv-primary)); }
body.fp-body .inv-scene__card .inv-intro__names { font-family: var(--fp-script); font-size: clamp(2rem, 9vw, 2.7rem); line-height: 1.12; color: var(--inv-primary); }
body.fp-body .inv-scene__card .inv-intro__rule { width: 4.5rem; margin: .7rem auto .6rem; background: linear-gradient(90deg, transparent, var(--inv-accent), transparent); }
body.fp-body .inv-scene__card .inv-intro__date { font: 600 .66rem/1.4 var(--fp-sans); letter-spacing: .18em; text-transform: uppercase; color: var(--fp-muted); }
body.fp-body .inv-intro--scene .inv-intro__skip { background: color-mix(in srgb, var(--fp-deep) 55%, transparent); color: var(--fp-on-dark); border-color: color-mix(in srgb, var(--fp-gold-l) 50%, transparent); }