/* =====================================================================
   SPInvite — full-page invitation designs (pages/rsvp/invite.js).
   Layout, motion and timings follow reference/raikanfarisyanie one to one:
   cover gate with corner flowers that gather on "Buka Jemputan", a sticky
   parallax hero that pins the pelamin while the couple rises into it, then
   the content sections and a frosted bottom nav. Artwork is CoreLuke's own
   (pages/rsvp/art/<design>/, built by tools/build-invite-art.mjs).
   Each design sets the --ivx-* tokens on .ivx[data-design].
   ===================================================================== */
.ivx {
  --bg-primary: #fdf8f4;
  --bg-secondary: #f5ede4;
  --text-primary: #5a5a5a;
  --text-secondary: #6b6b70;
  --accent-gold: #bb9958;
  --accent-gold-light: #d4b96a;
  --accent-rose: #c4917b;
  --border-light: #e8ddd2;
  --nav-bg: rgba(253, 248, 244, .88);
  --gate: #1a2744;
  --gate-ink: #ffffff;
  --hero-ink: #c8890a;
  --hero-ink-2: #e0a955;
  --hero-soft: rgba(224, 169, 85, .85);
  --hero-bg: linear-gradient(180deg, #1a2744 0%, #1a2744 18%, #d9e8f0 32%, #fdf8f4 48%, #fdf8f4 100%);
  --font-display: "Playfair Display", Georgia, serif;
  --font-names: var(--font-display);
  --font-arabic: "Amiri", "Times New Roman", serif;
  --font-body: "Lato", system-ui, sans-serif;
  --font-label: "Montserrat", system-ui, sans-serif;
  --couple-margin-top: calc(-300px - 85svh);
  --u: 1;
  /* the shared sheets (card.css .ivc-*) read these */
  --iv-card: var(--bg-primary); --iv-soft: var(--bg-secondary); --iv-ink: var(--text-primary); --iv-muted: var(--text-secondary);
  --iv-gold: var(--accent-gold); --iv-accent: var(--accent-rose); --iv-line: var(--border-light);
  --iv-display: var(--font-display); --iv-text: var(--font-body); --iv-label: var(--font-label); --iv-ease: cubic-bezier(.2, .8, .2, 1);
  position: relative; font-family: var(--font-body); color: var(--text-primary); -webkit-font-smoothing: antialiased;
}
.ivx *, .ivx *::before, .ivx *::after { box-sizing: border-box; }
.ivx img { max-width: none; }
.ivx p, .ivx h1, .ivx h2, .ivx h3, .ivx blockquote { margin: 0; }
.ivx button { font: inherit; }
.ivx iconify-icon { vertical-align: -.18em; }
@media (min-width: 769px) { .ivx { --couple-margin-top: calc(-100px - 100svh); } }

html.ivx-doc { scroll-behavior: smooth; scrollbar-width: none; overscroll-behavior: none; }
html.ivx-doc::-webkit-scrollbar, html.ivx-doc body::-webkit-scrollbar { display: none; width: 0; height: 0; }
html.ivx-doc body { margin: 0; min-height: 100vh; scrollbar-width: none; overscroll-behavior: none; background: var(--ivx-shell, #1a1a1f); }

/* ── Shared bits ── */
.ivx-center { text-align: center; }
.ivx-eyebrow { margin-bottom: 8px; font-size: 12px; letter-spacing: .3em; text-transform: uppercase; color: var(--accent-gold); }
.ivx-h3 { font-family: var(--font-display); font-size: 24px; line-height: 1.33; font-weight: 400; color: var(--text-primary); }
.ivx-sub { max-width: 320px; margin: 12px auto 0; font-size: 14px; line-height: 1.63; color: var(--text-secondary); }
.ivx-small { font-size: 14px; line-height: 1.63; color: var(--text-secondary); }
.ivx-shimmer {
  background: linear-gradient(90deg, var(--accent-gold), var(--accent-gold-light), var(--accent-gold)); background-size: 200%;
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; animation: 3s linear infinite ivxShimmer;
}
.ivx-divider { display: flex; justify-content: center; padding: 16px 0; }
.ivx-divider img { display: block; height: auto; }
.ivx-heart { display: flex; align-items: center; justify-content: center; gap: 12px; margin: 20px 0; }
.ivx-heart i { flex: 1; max-width: 70px; height: 1px; background: linear-gradient(to right, transparent, color-mix(in srgb, var(--accent-gold) 60%, transparent)); }
.ivx-heart i:last-child { background: linear-gradient(to left, transparent, color-mix(in srgb, var(--accent-gold) 60%, transparent)); }
.ivx-heart svg { flex-shrink: 0; color: var(--accent-rose); }
@keyframes ivxShimmer { 0% { background-position: 200% 0; } to { background-position: -200% 0; } }
@keyframes ivxFadeIn { from { opacity: 0; } to { opacity: 1; } }

/* ── Cover gate ── */
.ivx-cover { position: fixed; top: 0; bottom: 0; left: 50%; z-index: 50; width: 100%; max-width: 425px; transform: translateX(-50%); }
.ivx-flowers { position: absolute; inset: 0; overflow: hidden; }
.ivx-backdrop { position: absolute; inset: 0; z-index: 30; pointer-events: none; background: var(--gate); transition: opacity .45s ease; }
.ivx-flowers.is-gathering:not(.is-curtain) .ivx-backdrop { opacity: 1; }
.ivx-flowers.is-gathering.is-curtain .ivx-backdrop { opacity: 0; }
.ivx-loader { position: absolute; inset: 0; z-index: 32; display: flex; align-items: center; justify-content: center; pointer-events: none; opacity: 0; animation: .2s ease-out forwards ivxFadeIn; }
.ivx-spinner { display: block; width: 34px; height: 34px; border: 2.5px solid color-mix(in srgb, var(--gate-ink) 20%, transparent); border-top-color: var(--gate-ink); border-radius: 50%; animation: .8s linear infinite ivxSpin; }
@keyframes ivxSpin { to { transform: rotate(360deg); } }
.ivx-gate { position: absolute; inset: 0; z-index: 35; display: flex; flex-direction: column; align-items: center; justify-content: center; transition: opacity .3s; }
.ivx-flowers.is-gathering .ivx-gate { opacity: 0; }
.ivx-dots { position: absolute; inset: 0; opacity: .06;
  background-image: radial-gradient(circle at 30% 40%, var(--gate-ink) 1px, transparent 2px), radial-gradient(circle at 70% 60%, var(--gate-ink) 1px, transparent 2px), radial-gradient(circle at 50% 80%, var(--gate-ink) .5px, transparent 1.5px);
  background-size: 50px 50px, 60px 60px, 40px 40px; }
.ivx-frame-line { position: absolute; inset: 20px; border: 1px solid color-mix(in srgb, var(--gate-ink) 25%, transparent); border-radius: 8px; pointer-events: none; }
.ivx-gate-copy { position: relative; z-index: 35; padding: 0 32px; text-align: center; opacity: 0; animation: 1s ease-out .3s forwards ivxFadeIn; }
.ivx-bism { margin-bottom: 8px !important; font-family: var(--font-arabic); font-size: 18px; line-height: 1.55; color: var(--gate-ink); }
.ivx-gate-eyebrow { margin-bottom: 12px !important; font-size: 12px; font-weight: 500; letter-spacing: .35em; text-transform: uppercase; color: color-mix(in srgb, var(--gate-ink) 55%, transparent); }
.ivx-arabic { margin: 0; padding: .1em 0; font-family: var(--font-arabic); font-size: 3.4rem; font-weight: 400; line-height: 1.6; direction: rtl; text-shadow: 0 2px 20px color-mix(in srgb, var(--gate-ink) 25%, transparent);
  background: linear-gradient(90deg, var(--gate-ink), color-mix(in srgb, var(--gate-ink) 65%, transparent), var(--gate-ink)); background-size: 200%;
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; animation: 3s linear infinite ivxShimmer; }
.ivx-arabic + .ivx-dan + .ivx-arabic { margin-bottom: 8px; }
.ivx-dan { display: flex; align-items: center; justify-content: center; gap: 12px; margin: -12px auto; }
.ivx-dan i { width: 60px; height: 1px; background: linear-gradient(to right, transparent, var(--gate-ink)); }
.ivx-dan i:last-child { background: linear-gradient(to left, transparent, var(--gate-ink)); }
.ivx-dan span { font-family: var(--font-arabic); font-size: 1.6rem; color: color-mix(in srgb, var(--gate-ink) 80%, transparent); }
.ivx-to { margin: 2px 0 14px !important; font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: color-mix(in srgb, var(--gate-ink) 55%, transparent); }
.ivx-to b { display: block; margin-top: 2px; font-family: var(--font-display); font-size: 18px; font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--gate-ink); }
.ivx-open { position: relative; padding: 12px 40px; border: 1.5px solid var(--gate-ink); border-radius: 999px; background: transparent; color: var(--gate-ink); font-size: 14px !important; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; cursor: pointer; transition: all .3s; }
.ivx-open:hover { background: color-mix(in srgb, var(--gate-ink) 12%, transparent); }
.ivx-open:focus-visible { outline: 2px solid var(--gate-ink); outline-offset: 3px; }
.ivx-gate-note { position: absolute; left: 0; right: 0; bottom: 24px; z-index: 35; text-align: center; font-size: 12px; color: color-mix(in srgb, var(--gate-ink) 40%, transparent); }
.ivx-exit { animation: .3s forwards ivxGone !important; }
@keyframes ivxGone { to { opacity: 0; } }

/* butterflies / doves */
.ivx-fly { position: absolute; z-index: 41; pointer-events: none; }
.ivx-fly.is-mirror { transform: scaleX(-1); }
.ivx-fly img { width: 50px; opacity: 0; animation: .8s ease-out 2s forwards ivxFlyIn, 4s ease-in-out 2.8s infinite ivxFloat; }
.ivx-fly.is-late img { animation: .8s ease-out 2.2s forwards ivxFlyIn, 4.5s ease-in-out 3s infinite ivxFloat; }
@keyframes ivxFlyIn { 0% { opacity: 0; transform: translateY(-10px) scale(.9); } to { opacity: 1; transform: none; } }
@keyframes ivxFloat { 0%, to { transform: none; } 25% { transform: translateY(-6px) rotate(2deg); } 50% { transform: translateY(-3px) rotate(-1deg); } 75% { transform: translateY(-8px) rotate(1.5deg); } }

/* corner flowers: page-load entrance and the gather on open converge on the
   same point, --gx/--gy/--gs, measured in JS from each flower's real position */
.ivx-fl { position: absolute; z-index: 40; pointer-events: none; will-change: transform; backface-visibility: hidden; animation: 2s ease-in-out .3s both ivxFlowerIn; }
.ivx-fl img { display: block; width: 100%; }
.ivx-fl .is-flip { transform: scale(-1, -1); }
.ivx-fl .is-flip-x { transform: scaleX(-1); }
@keyframes ivxFlowerIn {
  0%, 20% { transform: translate3d(var(--gx, 0px), var(--gy, 0px), 0) scale(var(--gs, 1)); }
  to { transform: translate(0, 0) scale(1); }
}
@keyframes ivxFlowerGather {
  0% { opacity: 1; transform: translate(0, 0) scale(1); }
  25%, 72% { opacity: 1; transform: translate3d(var(--gx, 0px), var(--gy, 0px), 0) scale(var(--gs, 1)); }
  to { opacity: 0; transform: translate(0, 0) scale(1); }
}
.ivx-flowers.is-gathering .ivx-fl { animation: 1.6s ease-in-out forwards ivxFlowerGather !important; }
.ivx-flowers.is-gathering .ivx-fl img { animation: none !important; }
.ivx-sway-1 { transform-origin: top; animation: 4s cubic-bezier(.45, 0, .55, 1) infinite ivxWind; }
.ivx-sway-2 { transform-origin: top; animation: 4.5s cubic-bezier(.45, 0, .55, 1) .5s infinite ivxWind2; }
.ivx-sway-3 { transform-origin: bottom; animation: 4s cubic-bezier(.45, 0, .55, 1) 1s infinite ivxWind; }
.ivx-sway-4 { transform-origin: bottom; animation: 4s cubic-bezier(.45, 0, .55, 1) 1.5s infinite ivxWind; }
@keyframes ivxWind { 0%, to { transform: none; } 50% { transform: rotate(3deg) translate(6px); } }
@keyframes ivxWind2 { 0%, to { transform: none; } 30% { transform: rotate(-2deg) translate(-5px); } 70% { transform: rotate(1.5deg) translate(4px); } }

/* sparkles */
.ivx-sparkles { pointer-events: none; overflow: hidden; opacity: .35; }
.ivx-sparkles.is-cover { position: fixed; inset: 0; z-index: 5; }
.ivx-sparkles.is-hero { position: fixed; top: 0; bottom: 0; left: 50%; z-index: 5; width: 100%; max-width: 375px; transform: translateX(-50%); }
.ivx-spark { position: absolute; top: -5%; animation: linear infinite ivxFall; }
@keyframes ivxFall { 0% { transform: translateY(-5vh) translate(0) rotate(0); } to { transform: translateY(105vh) translateX(var(--drift, 0px)) rotate(360deg); } }

/* ── Main column ── */
.ivx-main { position: relative; width: 100%; max-width: 425px; margin: 0 auto; overflow-x: clip; background: var(--bg-primary); }

/* ── Hero ── */
.ivx-hero { position: relative; isolation: isolate; z-index: 10; width: 100%; }
.ivx-hero.is-handoff { z-index: 4; }
.ivx-track { height: calc(2000px * var(--u)); }
.ivx-sticky { position: sticky; top: 0; z-index: 1; height: 100vh; height: 100lvh; overflow: clip; background: var(--gate); }
.ivx-scene { position: relative; z-index: 1; width: 100%; min-height: calc(2000px * var(--u)); background: var(--hero-bg); }
.ivx-layer { position: absolute; pointer-events: none; will-change: transform; }
.ivx-layer img, img.ivx-layer { display: block; width: 100%; height: auto; }
.ivx-sky { top: 0; left: 0; width: 100%; height: 50% !important; object-fit: cover; object-position: top center; }
.ivx-bush-bg { left: -5%; width: 110%; bottom: calc(1020px * var(--u)); }
.ivx-bush-bg img { opacity: .9; animation: bushWindBg 5s ease-in-out infinite; }
.ivx-bush-fg { left: -15%; width: 150%; bottom: calc(1010px * var(--u)); }
.ivx-bush-fg.is-low { bottom: calc(950px * var(--u)); }
.ivx-bush-fg.is-low > div { transform: scaleX(-1); }
.ivx-bush-fg img { animation: bushWindFg 3.5s ease-in-out -1.2s infinite; }
.ivx-house { left: 0; width: 100%; bottom: calc(580px * var(--u)); }
.ivx-pelamin { left: 0; width: 100%; bottom: calc(510px * var(--u)); }
@keyframes bushWindBg { 0%, to { transform: none; } 30% { transform: translate(7px); } 65% { transform: translate(-5px); } }
@keyframes bushWindFg { 0%, to { transform: none; } 35% { transform: translate(-6px); } 70% { transform: translate(4px); } }

.ivx-hero-copy { position: absolute; left: 0; right: 0; top: 0; z-index: 10; display: flex; flex-direction: column; align-items: center; padding-top: 96px; text-align: center; }
@media (min-width: 768px) { .ivx-hero-copy { padding-top: 160px; } }
.ivx-s1-label { margin-bottom: 16px !important; font-family: var(--font-arabic); font-size: 1.1rem; letter-spacing: .4em; color: var(--hero-soft); opacity: 0; }
.ivx-s1-name { display: inline-block; overflow: hidden; margin: 0; font-family: var(--font-names); font-size: 3rem; font-weight: 400; line-height: 1.1; color: var(--hero-ink); }
.ivx-s1-name > span { display: inline-block; opacity: 0; }
.ivx-s1-weds { display: flex; align-items: center; justify-content: center; gap: 14px; width: fit-content; margin: -8px auto; }
.ivx-s1-line { display: block; flex-shrink: 0; width: 60px; height: 1px; border-radius: 2px; opacity: 0; transform: scaleX(0); background: linear-gradient(to right, transparent, var(--hero-ink)); transform-origin: 100%; }
.ivx-s1-line:last-child { background: linear-gradient(to left, transparent, var(--hero-ink)); transform-origin: 0; }
.ivx-s1-amp { font-family: var(--font-display); font-size: 1.4rem; font-style: italic; letter-spacing: .3em; color: var(--hero-ink); text-shadow: 0 2px 12px rgba(0, 0, 0, .2); opacity: 0; }
.ivx-s1-date { margin-top: 24px !important; font-family: var(--font-display); font-size: 1rem; font-style: italic; color: var(--hero-soft); text-shadow: 0 2px 15px rgba(0, 0, 0, .2); opacity: 0; }
.ivx-s1-hint { display: flex; flex-direction: column; align-items: center; margin-top: 12px; opacity: 0; }
.ivx-s1-hint p { margin-bottom: 2px !important; font-size: 8px; letter-spacing: .2em; text-transform: uppercase; color: var(--hero-soft); opacity: .6; }
.ivx-chevrons { display: flex; flex-direction: column; align-items: center; color: var(--hero-soft); }
.ivx-chevrons svg:first-child { opacity: .5; animation: 1.5s ease-in-out infinite ivxChevron; }
.ivx-chevrons svg:last-child { opacity: .3; animation: 1.5s ease-in-out .2s infinite ivxChevron; }
@keyframes ivxChevron { 0%, to { opacity: .4; transform: none; } 50% { opacity: 1; transform: translateY(4px); } }

.ivx-hero.is-active .ivx-s1-label { animation: 1s ease-out .2s forwards ivxFadeDown; }
.ivx-hero.is-active .ivx-s1-line { animation: 1s ease-out 1.1s forwards ivxLines; }
.ivx-hero.is-active .ivx-s1-amp { animation: .8s ease-out 1.3s forwards ivxAmp; }
.ivx-hero.is-active .ivx-s1-date { animation: 1s ease-out 2.6s forwards ivxFadeDown; }
.ivx-hero.is-active .ivx-s1-hint { animation: 1s ease-out 4s forwards ivxFadeDown; }
.ivx-hero.is-active .ivx-s1-name > span {
  background: linear-gradient(90deg, var(--hero-ink), var(--hero-ink-2), var(--hero-ink)); background-size: 200%;
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  animation: 1.2s cubic-bezier(.22, 1, .36, 1) .6s forwards ivxMaskRise, 5s linear 2s infinite ivxShimmer;
}
.ivx-hero.is-active .ivx-s1-name.is-2 > span { animation: 1.2s cubic-bezier(.22, 1, .36, 1) 1.4s forwards ivxMaskRise, 5s linear 2.8s infinite ivxShimmer; }
@keyframes ivxFadeDown { 0% { opacity: 0; transform: translateY(-12px); } to { opacity: 1; transform: none; } }
@keyframes ivxMaskRise { 0% { opacity: 0; transform: translateY(100%); } to { opacity: 1; transform: none; } }
@keyframes ivxLines { 0% { opacity: 0; transform: scaleX(0); } to { opacity: 1; transform: scaleX(1); } }
@keyframes ivxAmp { 0% { opacity: 0; } to { opacity: .85; } }

.ivx-couple { position: relative; z-index: 10; margin-top: var(--couple-margin-top); overflow-x: clip; pointer-events: none; transition: opacity .35s ease; }
.ivx-couple-glow { position: absolute; top: 0; left: 50%; z-index: 1; width: 120%; height: 90svh; pointer-events: none; opacity: 0; transform: translateX(-50%);
  background: radial-gradient(ellipse 80% 60% at 50% 100%, var(--glow, rgba(255, 255, 255, .88)) 0%, color-mix(in srgb, var(--glow, rgba(255, 255, 255, .88)) 35%, transparent) 35%, transparent 60%), linear-gradient(to top, var(--bg-primary) 0%, transparent 40%); }
.ivx-couple-img { position: relative; z-index: 2; display: block; width: 100% !important; max-height: min(85svh, 720px); height: auto; margin: 0 auto; object-fit: contain; object-position: center bottom; }
.ivx-nav-trigger { height: 0; }

/* ── Content ── */
.ivx-content { position: relative; z-index: 6; overflow: hidden; padding-bottom: 80px; background-color: var(--bg-primary); background-repeat: repeat; background-size: 250px; opacity: 0; pointer-events: none; }
.ivx.is-open .ivx-content { opacity: 1; pointer-events: auto; transition: opacity .4s ease; }
.ivx-greet { position: relative; padding: 32px 24px 12px; text-align: center; }
.ivx-greet::before { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to bottom, var(--bg-primary) 0%, var(--bg-primary) 42%, color-mix(in srgb, var(--bg-primary) 98%, transparent) 55%, transparent 78%); }
.ivx-greet .ivx-bism-lg { margin-bottom: 16px !important; font-family: var(--font-arabic); font-size: 30px; line-height: 1.2; color: var(--accent-gold); }
.ivx-greet .ivx-salam { margin-bottom: 32px !important; font-size: 12px; letter-spacing: .2em; text-transform: uppercase; color: var(--text-secondary); }
.ivx-parent { font-family: var(--font-display); font-size: 24px; line-height: 1.33; }
.ivx-amp { margin: 4px 0 !important; font-family: var(--font-display); font-style: italic; color: var(--accent-gold); }
.ivx-parent.is-2 { margin-bottom: 24px !important; }
.ivx-greet .ivx-small { max-width: 320px; margin: 0 auto; }

.ivx-people { padding: 12px 24px 48px; text-align: center; }
.ivx-portrait { display: block; width: min(300px, 88vw) !important; height: auto; margin: 0 auto 16px; pointer-events: none; }
.ivx-person-name { margin-bottom: 4px !important; font-family: var(--font-display); font-size: 36px; line-height: 1.11; font-weight: 400; }
.ivx-people .ivx-small { margin-bottom: 4px !important; }

.ivx-details { padding: 32px 24px 16px; text-align: center; }
.ivx-details .ivx-stack { display: flex; flex-direction: column; gap: 32px; }
.ivx-details .ivx-addr { max-width: 270px; margin: 4px auto 0 !important; }

.ivx-sched { padding: 16px 24px 24px; }
.ivx-sched > div > .ivx-eyebrow { margin-bottom: 40px; text-align: center; font-family: var(--font-label); }
.ivx-tl { position: relative; max-width: 320px; margin: 0 auto; }
.ivx-tl-line { position: absolute; top: 0; bottom: 0; left: 50%; width: 2px; transform: translateX(-50%); background: var(--accent-gold); opacity: .35; }
.ivx-tl-fill { position: absolute; top: 0; left: 50%; z-index: 1; width: 2px; height: 0; transform: translateX(-50%); background: var(--accent-gold); transition: height .35s cubic-bezier(.4, 0, .2, 1); }
.ivx-tl.is-in .ivx-tl-fill { height: 100%; }
.ivx-tl-cap { position: relative; z-index: 10; display: flex; justify-content: center; margin: 0 0 24px; }
.ivx-tl-cap:last-child { margin: 24px 0 0; }
.ivx-tl-cap i { width: 12px; height: 12px; border-radius: 50%; background: var(--accent-gold); }
.ivx-tl-rows { display: flex; flex-direction: column; gap: 32px; }
.ivx-tl-row { position: relative; display: flex; align-items: center; }
.ivx-tl-row > div { width: 50%; transition: opacity .5s; }
.ivx-tl-row > div:first-child { padding-right: 24px; text-align: right; }
.ivx-tl-row > div:last-child { padding-left: 24px; text-align: left; }
.ivx-tl-row > div.is-off { opacity: 0; pointer-events: none; }
.ivx-tl-row b { display: block; font-size: 14px; font-weight: 600; color: var(--text-primary); }
.ivx-tl-row span { display: block; margin-top: 2px; font-size: 12px; line-height: 1.375; color: var(--text-secondary); }
.ivx-tl-icon { position: absolute; left: 50%; z-index: 10; display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border: 2px solid var(--accent-gold); border-radius: 50%; transform: translateX(-50%);
  background: var(--icon-bg, #fff); color: var(--accent-gold); font-size: 18px; box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-gold) 12%, transparent); }

.ivx-count-sec { padding: 48px 24px; text-align: center; }
.ivx-count-sec .ivx-eyebrow { margin-bottom: 24px; }
.ivx-count { display: flex; justify-content: center; gap: 12px; }
.ivx-count > div { min-width: 70px; padding: 12px 16px; border-radius: 12px; text-align: center; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  background: linear-gradient(135deg, color-mix(in srgb, var(--accent-gold) 8%, transparent), color-mix(in srgb, var(--accent-gold) 2%, transparent)); border: 1px solid color-mix(in srgb, var(--accent-gold) 15%, transparent); }
.ivx-count b { display: block; font-family: var(--font-display); font-size: 30px; line-height: 1.2; font-weight: 700; color: var(--accent-gold); font-variant-numeric: tabular-nums; }
.ivx-count span { display: block; margin-top: 4px; font-size: 12px; letter-spacing: .05em; text-transform: uppercase; color: var(--text-secondary); }

.ivx-doa { padding: 40px 24px; text-align: center; }
.ivx-doa blockquote { margin-bottom: 16px; font-family: var(--font-display); font-size: 18px; font-style: italic; line-height: 1.63; color: var(--text-primary); }
.ivx-doa p { font-size: 12px; color: var(--text-secondary); }

.ivx-story { padding: 48px 0; }
.ivx-story .ivx-heading { margin-bottom: 40px; }
.ivx-story-list { display: flex; flex-direction: column; gap: 40px; padding: 0 24px; }
.ivx-story-img { position: relative; max-width: 320px; margin: 0 auto; }
.ivx-story-img img { display: block; width: 100% !important; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 16px; background: #f0ebe3; pointer-events: none; }
.ivx-story-txt { max-width: 320px; margin: 16px auto 0; text-align: center; }
.ivx-story-txt b { display: block; margin-bottom: 4px; font-family: var(--font-label); font-size: 14px; font-weight: 600; color: var(--text-primary); }
.ivx-story-txt p { font-size: 12px; line-height: 1.63; color: var(--text-secondary); }
.ivx-story-div { display: flex; justify-content: center; margin-top: 12px; }

.ivx-gallery { padding: 48px 0; }
.ivx-gallery .ivx-heading { margin-bottom: 32px; padding: 0 24px; }
.ivx-gal-track { display: flex; gap: 12px; overflow-x: auto; padding: 0 24px 8px; scroll-snap-type: x mandatory; scroll-padding-left: 24px; scrollbar-width: none; }
.ivx-gal-track::-webkit-scrollbar { display: none; }
.ivx-gal-track > div { flex-shrink: 0; width: 72%; aspect-ratio: 3 / 4; overflow: hidden; border-radius: 16px; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, .1), 0 2px 4px -2px rgba(0, 0, 0, .1); scroll-snap-align: center; }
.ivx-gal-track img { display: block; width: 100% !important; height: 100%; object-fit: cover; background: #f0ebe3; }
.ivx-gal-ctl { display: flex; align-items: center; justify-content: center; gap: 24px; margin-top: 16px; }
.ivx-gal-arrow { display: flex; align-items: center; justify-content: center; flex-shrink: 0; width: 34px; height: 34px; border: 1.5px solid var(--accent-gold); border-radius: 50%; background: transparent; color: var(--accent-gold); cursor: pointer; transition: background-color .2s ease, color .2s ease; }
.ivx-gal-arrow:hover { background: var(--accent-gold); color: #fff; }
.ivx-gal-dots { display: flex; align-items: center; gap: 8px; }
.ivx-gal-dots button { width: 6px; height: 6px; padding: 0; border: 0; border-radius: 999px; background: color-mix(in srgb, var(--accent-gold) 35%, transparent); cursor: pointer; transition: width .25s ease, background-color .25s ease; }
.ivx-gal-dots button.is-on { width: 18px; background: var(--accent-gold); }

.ivx-book { padding: 24px 24px; text-align: center; }
.ivx-book .ivx-heading { margin-bottom: 24px; }
.ivx-loop { position: relative; height: 260px; overflow: hidden; cursor: grab; }
.ivx-loop-item { padding: 16px 0; text-align: center; }
.ivx-loop-item p { margin-bottom: 6px !important; padding: 0 16px; font-size: 14px; font-style: italic; line-height: 1.63; color: var(--text-secondary); }
.ivx-loop-item b { font-size: 12px; font-weight: 600; color: var(--accent-gold); }
.ivx-loop-item i { display: block; width: 32px; height: 1px; margin: 16px auto 0; background: var(--border-light); }
.ivx-shine { position: relative; display: inline-flex; align-items: center; gap: 8px; margin: 24px auto 0; padding: 12px 40px; overflow: hidden; border: 0; border-radius: 999px; background: var(--accent-gold); color: var(--on-accent, #fff); font-size: 14px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; cursor: pointer; transition: all .3s; }
.ivx-shine::after { content: ""; position: absolute; top: -20%; left: -120%; width: 60%; height: 140%; transform: skew(-15deg);
  background: linear-gradient(105deg, transparent 20%, rgba(255, 255, 255, .07) 40%, rgba(255, 255, 255, .13) 50%, rgba(255, 255, 255, .07) 60%, transparent 80%); animation: 4s cubic-bezier(.4, 0, .6, 1) infinite ivxShine; }
.ivx-shine:focus-visible, .ivx-gal-arrow:focus-visible, .ivx-nav button:focus-visible { outline: 2px solid var(--accent-gold); outline-offset: 2px; }
@keyframes ivxShine { 0% { opacity: 0; left: -120%; } 10% { opacity: 1; } 50% { opacity: 1; left: 160%; } 51% { opacity: 0; } to { opacity: 0; left: 160%; } }

.ivx-foot { padding-bottom: 32px; text-align: center; }
.ivx-foot .ivx-tag { font-family: var(--font-display); font-size: 24px; line-height: 1.33; color: var(--accent-gold); }
.ivx-foot .ivx-small { margin-top: 16px; }
.ivx-foot .ivx-small + .ivx-small { margin-top: 4px; }
.ivx-foot .ivx-by { margin-top: 32px !important; font-size: 10px; letter-spacing: .3em; text-transform: uppercase; color: var(--text-secondary); }
.ivx-foot a { display: inline-block; margin-top: 8px; font-size: 14px; color: var(--accent-gold); text-decoration: none; }

/* scroll reveal: children rise and scale in, staggered */
.ivx-reveal > * { opacity: 0; transform: translateY(80px) scale(.75); will-change: opacity, transform; }
.ivx-reveal.is-in > * { opacity: 1; transform: none; transition: opacity 2s, transform 2s; }
.ivx-reveal.is-in > :nth-child(2) { transition-delay: 80ms; }
.ivx-reveal.is-in > :nth-child(3) { transition-delay: .16s; }
.ivx-reveal.is-in > :nth-child(4) { transition-delay: .24s; }
.ivx-reveal.is-in > :nth-child(5) { transition-delay: .32s; }
.ivx-reveal.is-in > :nth-child(6) { transition-delay: .4s; }
.ivx-reveal.is-in > :nth-child(7) { transition-delay: .48s; }
.ivx-reveal.is-in > :nth-child(8) { transition-delay: .56s; }

/* ── Bottom nav, music ── */
.ivx-nav { position: fixed; bottom: 0; left: 50%; z-index: 60; width: 100%; max-width: 375px; transform: translate(-50%, 100%); transition: transform .3s ease-out; touch-action: none;
  background: var(--nav-bg); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); border-top: 1px solid color-mix(in srgb, var(--accent-gold) 15%, transparent); border-radius: 14px 14px 0 0; box-shadow: 0 -4px 20px rgba(0, 0, 0, .05); }
.ivx-nav.is-in { transform: translate(-50%, 0); }
.ivx-nav > div { display: flex; align-items: stretch; justify-content: space-around; padding: 10px 8px; }
.ivx-nav button { display: flex; flex: 1; flex-direction: column; align-items: center; gap: 4px; min-width: 0; padding: 4px; border: 0; background: transparent; color: var(--accent-gold); cursor: pointer; }
.ivx-nav span { font-family: var(--font-label); font-size: 9px; letter-spacing: .025em; }
.ivx-music[hidden] { display: none; }
.ivx-music { position: fixed; top: 16px; right: max(16px, calc(50% - 212px + 16px)); z-index: 50; display: flex; align-items: center; justify-content: center; width: 38px; height: 38px; border: 0; border-radius: 50%;
  color: var(--accent-gold); background: var(--nav-bg); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); box-shadow: 0 2px 10px rgba(0, 0, 0, .12); cursor: pointer; }

/* sheets (markup and styles shared with card.css) sit in a fixed layer over the column */
.ivx-sheets { position: fixed; top: 0; bottom: 0; left: 50%; z-index: 70; width: 100%; max-width: 425px; transform: translateX(-50%); pointer-events: none; }
.ivx-sheets .ivc-sheet-wrap { pointer-events: auto; }
.ivx-sheets .ivc-sheet { font-family: var(--font-body); color: var(--text-primary); }
.ivx-sheets iconify-icon { font-size: 1.15em; vertical-align: -.18em; }

/* ── Event designs (Design 2 · Annual Dinner) ── */
.ivx.is-still .ivx-bush-bg img { animation: none; }
.ivx.is-dark .ivc-sheet { background: var(--bg-secondary); }
.ivx.is-dark .ivc-form input, .ivx.is-dark .ivc-form select, .ivx.is-dark .ivc-form textarea, .ivx.is-dark .ivc-seg span { background: rgba(255, 255, 255, .06); color: var(--text-primary); border-color: var(--border-light); }
.ivx.is-dark .ivc-form select option { color: #111; }
.ivx.is-dark .ivc-seg input:checked + span { background: color-mix(in srgb, var(--accent-gold) 22%, transparent); color: var(--text-primary); }
.ivx.is-dark .ivc-btn { color: var(--on-accent, #fff); }
.ivx.is-dark .ivc-btn.is-ghost { color: var(--accent-gold); }
.ivx.is-dark .ivc-li, .ivx.is-dark .ivc-acct { background: rgba(255, 255, 255, .05); }
.ivx.is-dark .ivc-mono { background: transparent; box-shadow: none; }
.ivx.is-dark .ivc-err { color: #ff9a8a; }
.ivx.is-dark .ivx-gal-arrow:hover { color: var(--on-accent, #fff); }
.ivx-g-eyebrow { margin-bottom: 6px !important; font-family: var(--font-label); font-size: 10px; letter-spacing: .32em; text-transform: uppercase; color: color-mix(in srgb, var(--gate-ink) 60%, transparent); }
.ivx-g-company { margin-bottom: 14px !important; font-family: var(--font-display); font-size: 15px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--gate-ink); }
.ivx-g-title { display: flex; flex-direction: column; align-items: center; transition: transform .25s ease-out; transform-style: preserve-3d; }
.ivx-3d { display: block; font-family: "Cinzel", Georgia, serif; font-size: 3.1rem; font-weight: 700; line-height: 1.02; letter-spacing: .02em; color: #f7dd8e;
  text-shadow: 0 1px 0 #e2bd5c, 0 2px 0 #d2a947, 0 3px 0 #bf943a, 0 4px 0 #a97f2e, 0 5px 0 #926a24, 0 6px 0 #7a561c, 0 7px 8px rgba(0, 0, 0, .55), 0 14px 26px rgba(0, 0, 0, .55), 0 0 30px rgba(246, 210, 120, .25);
  animation: ivxFloat3d 5s ease-in-out infinite; }
.ivx-3d + .ivx-3d { animation-delay: -.6s; }
@keyframes ivxFloat3d { 0%, 100% { transform: translateY(0) rotateX(0); } 50% { transform: translateY(-4px) rotateX(6deg); } }
.ivx-g-year { font-family: "Cinzel", Georgia, serif; font-size: 1.5rem; font-weight: 600; letter-spacing: .3em; color: var(--gate-ink); padding-left: .3em; }
.ivx-cover .ivx-dan { margin: 6px auto 10px; }
.ivx-g-theme { margin-bottom: 18px !important; font-family: var(--font-display); font-size: 15px; font-style: italic; color: color-mix(in srgb, var(--gate-ink) 80%, transparent); }
.ivx[data-design="gala"] .ivx-open { background: linear-gradient(180deg, rgba(246, 227, 166, .14), rgba(246, 227, 166, .02)); box-shadow: 0 8px 22px -10px rgba(246, 210, 120, .6), inset 0 1px 0 rgba(255, 255, 255, .25); }
.ivx[data-design="gala"] .ivx-s1-name { font-size: 1.85rem; letter-spacing: .03em; }
.ivx[data-design="gala"] .ivx-s1-amp { font-family: "Cinzel", Georgia, serif; font-style: normal; font-size: 1.15rem; letter-spacing: .32em; padding-left: .32em; }
.ivx-g-label { font-family: var(--font-label) !important; font-size: 11px !important; letter-spacing: .3em !important; text-transform: uppercase; }
.ivx-g-star { display: block; width: 64px !important; height: auto; margin: 0 auto 14px; filter: drop-shadow(0 8px 14px rgba(0, 0, 0, .5)); animation: ivxFloat3d 5s ease-in-out infinite; }
.ivx-g-msg { max-width: 330px; margin: 14px auto 0 !important; }
.ivx-g-sign { margin-top: 16px !important; font-family: var(--font-display); font-size: 14px; font-style: italic; color: var(--accent-gold); }
.ivx-g-swatches { display: flex; justify-content: center; gap: 18px; margin: 22px 0 6px; }
.ivx-g-swatches span { display: flex; flex-direction: column; align-items: center; gap: 8px; width: 82px; font-size: 11px; line-height: 1.3; color: var(--text-secondary); }
.ivx-g-swatches i { width: 46px; height: 46px; border-radius: 50%; background: radial-gradient(circle at 34% 30%, color-mix(in srgb, var(--c) 30%, #fff) 0%, var(--c) 45%, color-mix(in srgb, var(--c) 55%, #000) 100%); box-shadow: 0 10px 18px -6px rgba(0, 0, 0, .6), inset 0 -4px 8px rgba(0, 0, 0, .25); }
.ivx-g-cta { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.ivx-g-cta .ivx-shine { margin-top: 12px; }
.ivx-g-ghost { display: inline-flex; align-items: center; gap: 8px; padding: 10px 26px; border: 1.5px solid var(--accent-gold); border-radius: 999px; background: transparent; color: var(--accent-gold); font-family: var(--font-label); font-size: 12px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; cursor: pointer; transition: background-color .2s, color .2s; }
.ivx-g-ghost:hover { background: var(--accent-gold); color: var(--on-accent, #fff); }
.ivx[data-design="gala"] .ivx-greet .ivx-salam { margin-bottom: 14px !important; }

/* e-ticket: a card that tilts with the pointer or the phone */
.ivt-wrap { perspective: 900px; padding: 8px 4px 4px; }
.ivt { position: relative; overflow: hidden; border-radius: 18px; color: #f3ead7; transform-style: preserve-3d; transition: transform .2s ease-out;
  background: linear-gradient(150deg, #1f2a52 0%, #0d1322 55%, #1a1f3a 100%); border: 1px solid rgba(217, 180, 90, .45); box-shadow: 0 24px 40px -18px rgba(0, 0, 0, .8), inset 0 1px 0 rgba(255, 255, 255, .12); }
.ivt-head { padding: 16px 18px 12px; text-align: center; background: linear-gradient(180deg, rgba(217, 180, 90, .18), transparent); }
.ivt-head span { display: block; font-family: "Montserrat", sans-serif; font-size: 9.5px; letter-spacing: .28em; text-transform: uppercase; color: #d9b45a; }
.ivt-head b { display: block; margin-top: 4px; font-family: "Cinzel", Georgia, serif; font-size: 22px; letter-spacing: .04em; color: #f7dd8e; text-shadow: 0 2px 0 #9a7428, 0 6px 12px rgba(0, 0, 0, .5); }
.ivt-head em { font-family: "Cinzel", Georgia, serif; font-size: 11px; font-style: normal; color: #b8b1a2; }
.ivt-body { display: flex; align-items: center; gap: 14px; padding: 6px 18px 14px; }
.ivt-qr { flex-shrink: 0; padding: 7px; border-radius: 10px; background: #fff; line-height: 0; }
.ivt-qr img, .ivt-qr canvas { display: block; width: 104px; height: 104px; }
.ivt dl { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 3px 10px; font-size: 12px; text-align: left; }
.ivt dt { font-family: "Montserrat", sans-serif; font-size: 9px; letter-spacing: .14em; text-transform: uppercase; color: #8f8a7e; align-self: center; }
.ivt dd { margin: 0; font-weight: 700; color: #f3ead7; overflow-wrap: anywhere; }
.ivt-cut { position: relative; height: 0; border-top: 2px dashed rgba(217, 180, 90, .4); margin: 0 14px; }
.ivt-cut::before, .ivt-cut::after { content: ""; position: absolute; top: -12px; width: 22px; height: 22px; border-radius: 50%; background: var(--bg-secondary, #151d33); }
.ivt-cut::before { left: -26px; } .ivt-cut::after { right: -26px; }
.ivt-foot { display: grid; grid-template-columns: repeat(3, 1fr); padding: 12px 18px 16px; text-align: center; }
.ivt-foot span { display: block; font-family: "Montserrat", sans-serif; font-size: 8.5px; letter-spacing: .16em; text-transform: uppercase; color: #8f8a7e; }
.ivt-foot b { font-size: 13px; color: #f7dd8e; }
.ivt-shine { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(60% 50% at var(--sx, 50%) 0%, rgba(255, 240, 200, .22), transparent 70%); mix-blend-mode: screen; }

/* Card Studio redraws: no entrance animations, so typing does not flicker */
.ivx.no-intro .ivx-reveal > * { opacity: 1; transform: none; transition: none; }
.ivx.no-intro .ivx-hero.is-active .ivx-s1-label, .ivx.no-intro .ivx-hero.is-active .ivx-s1-date, .ivx.no-intro .ivx-hero.is-active .ivx-s1-hint,
.ivx.no-intro .ivx-hero.is-active .ivx-s1-amp, .ivx.no-intro .ivx-hero.is-active .ivx-s1-line { animation: none; opacity: 1; transform: none; }
.ivx.no-intro .ivx-hero.is-active .ivx-s1-name > span { animation: 5s linear infinite ivxShimmer; opacity: 1; }
.ivx.no-intro .ivx-content { transition: none; }

@media (prefers-reduced-motion: reduce) {
  .ivx *, .ivx *::before, .ivx *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .ivx-reveal > * { opacity: 1; transform: none; }
  html.ivx-doc { scroll-behavior: auto; }
}