/* ==================================================================
   Tema LUX — undangan pernikahan berlatar foto (wedding-lux-*)
   Variabel warna & font diisi oleh tiap file tema (theme_vars) +
   --lux-shade (RGB lapisan di atas foto) dan --lux-shade-a.
   ================================================================== */

.lux { --lux-ink: rgb(var(--c-text)); --lux-acc: rgb(var(--c-accent)); }
body { font-family: var(--f-body); }

/* ---------- Tipografi ---------- */
.lux-kicker { font-family: var(--f-body); font-size: .7rem; letter-spacing: .38em; text-transform: uppercase; color: var(--lux-acc); }
.lux-names { font-family: var(--f-script); font-weight: 400; line-height: .95; color: rgb(var(--c-text)); display: flex; flex-direction: column; align-items: inherit; }
.lux-names--script .lux-names { font-size: clamp(3.2rem, 15vw, 4.6rem); }
.lux-names--display .lux-names { font-family: var(--f-display); font-size: clamp(2.5rem, 12vw, 3.6rem); text-transform: uppercase; letter-spacing: .06em; line-height: 1.02; }
.lux-amp { font-family: var(--f-script); color: var(--lux-acc); font-size: .7em; line-height: 1.05; }
.lux-amp-t { font-family: var(--f-body); font-weight: 300; font-size: .85em; }
.lux-names--display .lux-names .lux-amp { font-size: .6em; text-transform: none; letter-spacing: 0; }
.lux-date { font-family: var(--f-display); letter-spacing: .28em; text-transform: uppercase; font-size: .8rem; color: rgb(var(--c-text)); opacity: .9; }
.lux-title { font-family: var(--f-display); font-size: 2.1rem; line-height: 1.15; margin-top: .35rem; color: rgb(var(--c-text)); }
.lux-lead { max-width: 26rem; margin: 0 auto 2rem; text-align: center; line-height: 1.75; font-size: .95rem; color: rgb(var(--c-text)); opacity: .92; }
.lux-orn { width: 9rem; margin: .9rem auto; color: var(--lux-acc); }
.lux-orn svg { display: block; width: 100%; height: auto; }
.lux-head { text-align: center; margin-bottom: 2.25rem; }

/* ---------- Section berlatar foto ---------- */
.lux-sec { position: relative; overflow: hidden; isolation: isolate; padding: 5.5rem 1.4rem; min-height: 70vh; display: flex; flex-direction: column; justify-content: center; color: rgb(var(--c-text)); }
.lux-bg { position: absolute; left: 0; right: 0; top: -14%; bottom: -14%; z-index: -2; will-change: transform; }
.lux-bg-img { position: absolute; inset: 0; background-size: cover; background-position: center; transform: scale(1.18); transition: transform 2.6s cubic-bezier(.2,.7,.2,1); }
.lux-sec.is-in .lux-bg-img { transform: scale(1); }
.lux-shade { position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(180deg, rgb(var(--lux-shade) / calc(var(--lux-shade-a) + .12)) 0%, rgb(var(--lux-shade) / var(--lux-shade-a)) 35%, rgb(var(--lux-shade) / var(--lux-shade-a)) 65%, rgb(var(--lux-shade) / calc(var(--lux-shade-a) + .18)) 100%); }
.lux-sec--plain { background: radial-gradient(ellipse at top, rgb(var(--c-surface)), rgb(var(--c-bg)) 70%); }
.lux-sec--plain .lux-shade { opacity: .25; }
.lux-inner { position: relative; width: 100%; max-width: 30rem; margin: 0 auto; }
.lux-gray .t-gallery-item img, .lux-gray .lux-bg-img, .lux-gray .lux-slide, .lux-gray .lux-aside-img, .lux-gray .lux-cover-blur, .lux-gray .lux-host-photo img { filter: grayscale(1) contrast(1.08); }

/* Hero */
.lux-hero { min-height: 100vh; min-height: 100svh; justify-content: flex-end; padding-bottom: 6rem; text-align: center; }
.lux-hero .lux-shade { background: linear-gradient(180deg, rgb(var(--lux-shade) / .05) 0%, rgb(var(--lux-shade) / calc(var(--lux-shade-a) * .6)) 45%, rgb(var(--lux-shade) / calc(var(--lux-shade-a) + .3)) 100%); }
.lux-hero .lux-names { align-items: center; margin: .6rem 0 .2rem; }
.lux-hero .lux-countdown { margin-top: 1.6rem; }
.lux-scroll { position: absolute; left: 50%; bottom: 1.6rem; width: 1.3rem; height: 2.1rem; margin-left: -.65rem; border: 1px solid rgb(var(--c-text) / .6); border-radius: 1rem; }
.lux-scroll span { position: absolute; left: 50%; top: .4rem; width: 3px; height: 6px; margin-left: -1.5px; border-radius: 3px; background: rgb(var(--c-text)); animation: luxScroll 1.8s ease-in-out infinite; }

/* Kutipan, penutup */
.lux-quote { text-align: center; min-height: 60vh; }
.lux-quote .t-quote blockquote { font-family: var(--f-display); font-size: 1.15rem; line-height: 1.8; }
.lux-closing { min-height: 100vh; min-height: 100svh; text-align: center; }
.lux-closing .t-footer { padding: 0; }
.lux-closing .t-footer .font-script { font-size: 3rem; color: rgb(var(--c-text)); }
.lux-closing .t-footer .t-muted { color: rgb(var(--c-text) / .75); }

/* Mempelai */
.lux-hosts { display: flex; flex-direction: column; align-items: center; gap: 1.6rem; }
.lux-host { text-align: center; }
.lux-host-photo { width: 11rem; height: 14.5rem; margin: 0 auto 1.25rem; overflow: hidden; display: grid; place-items: center; background: rgb(var(--c-surface) / .6); border: 1px solid rgb(var(--c-accent) / .7); outline: 1px solid rgb(var(--c-accent) / .35); outline-offset: 6px; }
.lux-frame--arch .lux-host-photo { border-radius: 999px 999px .6rem .6rem; }
.lux-frame--circle .lux-host-photo { width: 12rem; height: 12rem; border-radius: 999px; }
.lux-frame--rect .lux-host-photo { border-radius: 2px; }
.lux-host-photo img { width: 100%; height: 100%; object-fit: cover; }
.lux-host-photo span { font-family: var(--f-display); font-size: 3rem; color: var(--lux-acc); }
.lux-host-name { font-family: var(--f-display); font-size: 1.6rem; line-height: 1.2; }
.lux-names--script .lux-host-name { font-family: var(--f-script); font-size: 2.6rem; line-height: 1.1; }
.lux-host-info { margin-top: .6rem; font-size: .88rem; line-height: 1.65; opacity: .85; max-width: 20rem; margin-left: auto; margin-right: auto; }
.lux-ig { display: inline-flex; align-items: center; gap: .35rem; margin-top: .8rem; font-size: .78rem; color: var(--lux-acc); border: 1px solid rgb(var(--c-accent) / .5); border-radius: 999px; padding: .35rem .8rem; }
.lux-ig svg { width: 1rem; height: 1rem; }
.lux-amp--big { font-size: 3.4rem; }

.lux-stack > * + * { margin-top: 1.5rem; }

/* ---------- Komponen bawaan (partial _p) di atas foto ---------- */
.lux-main .t-card { color: rgb(var(--c-text)); border-color: rgb(var(--c-accent) / .4); }
.lux-card--glass .t-card { background: rgb(var(--c-surface) / .5); -webkit-backdrop-filter: blur(14px) saturate(1.2); backdrop-filter: blur(14px) saturate(1.2); box-shadow: 0 10px 40px rgb(0 0 0 / .18); }
.lux-card--solid .t-card { background: rgb(var(--c-surface) / .93); box-shadow: 0 14px 40px rgb(0 0 0 / .25); }
.lux-card--outline .t-card { background: rgb(var(--lux-shade) / .35); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); border: 1px solid rgb(var(--c-accent) / .8); box-shadow: inset 0 0 0 4px rgb(var(--lux-shade) / .2), inset 0 0 0 5px rgb(var(--c-accent) / .35); border-radius: 0; }
.lux-main .t-schedule h3, .lux-main .t-gift .font-display, .lux-main .t-rsvp .font-display, .lux-main .t-date-num { color: rgb(var(--c-text)); }
.lux-main .t-date-num { border-color: rgb(var(--c-accent) / .5); }
.lux-main .t-muted { color: rgb(var(--c-muted)); }
.lux-main .t-kicker { color: var(--lux-acc); }
.lux-main .t-cd-box { background: rgb(var(--c-surface) / .45); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); border-color: rgb(var(--c-accent) / .45); }
.lux-main .t-cd-box span { color: rgb(var(--c-text)); }
.lux-main .t-cd-box small { color: rgb(var(--c-text) / .75); }
.lux-main .t-schedules > p, .lux-main .t-schedules > div:not(.t-card) { color: rgb(var(--c-text)); }
.lux-main .t-wish { background: rgb(var(--c-surface) / .55); border-color: rgb(var(--c-accent) / .3); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.lux-main .t-wishes .t-kicker { color: var(--lux-acc); }
.lux-main .t-input { background: rgb(var(--c-bg) / .55); border-color: rgb(var(--c-accent) / .45); }
.lux-main .t-choice { border-color: rgb(var(--c-accent) / .45); background: rgb(var(--c-bg) / .35); }
.lux-main .t-gallery-item { border-radius: 2px; box-shadow: 0 6px 20px rgb(0 0 0 / .25); }
.lux-main .t-btn { background: var(--lux-acc); color: rgb(var(--c-on-primary)); }
.lux-main .t-btn-outline { border-color: var(--lux-acc); color: var(--lux-acc); }

/* ---------- Animasi muncul ---------- */
.lux-main [data-reveal] { opacity: 0; transform: translateY(30px); filter: blur(4px); transition: opacity 1.1s ease, transform 1.1s cubic-bezier(.2,.7,.2,1), filter 1.1s ease; }
.lux-main [data-reveal].is-visible { opacity: 1; transform: none; filter: none; }
.lux-main .lux-host[data-reveal] { transform: translateY(40px) scale(.96); }
.lux-main .lux-host[data-reveal].is-visible { transform: none; }

/* ================= SAMPUL ================= */
.lux-cover { display: flex; flex-direction: column; color: rgb(var(--c-text)); background: rgb(var(--c-bg)); }
.lux-cover-media { position: fixed; inset: 0; overflow: hidden; z-index: 0; }
.lux-slide { position: absolute; inset: 0; background-size: cover; background-position: center; opacity: 0; transition: opacity 1.8s ease; }
.lux-slide.is-on { opacity: 1; animation: luxKenburns 14s ease-out both; }
.lux-slide:nth-child(2).is-on { animation-name: luxKenburns2; }
.lux-slide:nth-child(3).is-on { animation-name: luxKenburns3; }
.lux-cover-blur { position: absolute; inset: -40px; background-size: cover; background-position: center; filter: blur(22px) brightness(.85); transform: scale(1.1); }
.lux-gray .lux-cover-blur { filter: blur(22px) brightness(.85) grayscale(1); }
.lux-shade--cover { position: fixed; z-index: 0; background: linear-gradient(180deg, rgb(var(--lux-shade) / calc(var(--lux-shade-a) * .85)) 0%, rgb(var(--lux-shade) / calc(var(--lux-shade-a) * .75)) 40%, rgb(var(--lux-shade) / calc(var(--lux-shade-a) + .28)) 100%); }
/* Bayangan teks agar tetap terbaca di atas foto yang terang */
.lux--dark .lux-names, .lux--dark .lux-kicker, .lux--dark .lux-date, .lux--dark .lux-title, .lux--dark .lux-lead, .lux--dark .lux-host-name, .lux--dark .lux-host-info, .lux--dark .t-quote, .lux--dark .t-footer { text-shadow: 0 1px 2px rgb(0 0 0 / .35), 0 2px 18px rgb(0 0 0 / .35); }
.lux--dark .t-card .t-kicker, .lux--dark .t-card p { text-shadow: none; }
.lux-cover-frame { position: fixed; inset: 14px; border: 1px solid rgb(var(--c-accent) / .55); pointer-events: none; z-index: 1; }
.lux-cover-frame::after { content: ""; position: absolute; inset: 5px; border: 1px solid rgb(var(--c-accent) / .25); }
.lux-cover-inner { position: relative; z-index: 2; margin: auto; width: 100%; max-width: 30rem; padding: 3.2rem 1.6rem 2.6rem; text-align: center; display: flex; flex-direction: column; align-items: center; }
.lux-cover .lux-names { margin: .7rem 0 0; }
.lux-cover .lux-date { margin-top: .2rem; }
.lux-guest { margin-top: 1.2rem; padding: 1rem 1.3rem 1.15rem; border-radius: var(--radius); background: rgb(var(--lux-shade) / .28); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border: 1px solid rgb(var(--c-accent) / .3); min-width: 15rem; }
.lux-guest .t-cover-guest { margin-top: 0; }
.lux-guest .t-cover-qr { width: 7.25rem; height: 7.25rem; }
.lux-guest .t-cover-checkin { margin-top: .7rem; gap: .4rem; }
.lux-open { margin-top: 1.4rem; display: inline-flex; align-items: center; gap: .55rem; padding: .85rem 1.7rem; border-radius: 999px; font-family: var(--f-body); font-size: .78rem; letter-spacing: .22em; text-transform: uppercase; font-weight: 600; transition: transform .2s, box-shadow .2s, background .2s; }
.lux-open svg { width: 1.1rem; height: 1.1rem; }
.lux-btn--solid .lux-open { background: var(--lux-acc); color: rgb(var(--c-on-primary)); box-shadow: 0 10px 30px rgb(var(--c-accent) / .35); }
.lux-btn--outline .lux-open { border: 1px solid var(--lux-acc); color: rgb(var(--c-text)); background: rgb(var(--lux-shade) / .25); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.lux-open:hover { transform: translateY(-2px); }
.lux-open { animation: luxPulse 2.6s ease-in-out 3s infinite; }

/* Varian sampul: bawah (editorial) */
.lux-cover--bottom.lux-cover .lux-cover-inner { margin: auto 0 0; text-align: left; align-items: flex-start; padding-bottom: 2.4rem; max-width: 34rem; }
.lux-cover--bottom.lux-cover .lux-names { align-items: flex-start; }
.lux-cover--bottom.lux-cover .lux-orn { margin-left: 0; }
.lux-cover--bottom.lux-cover .lux-guest { text-align: left; }
.lux-cover--bottom.lux-cover .lux-shade--cover { background: linear-gradient(180deg, rgb(var(--lux-shade) / .15) 0%, rgb(var(--lux-shade) / calc(var(--lux-shade-a) * .7)) 28%, rgb(var(--lux-shade) / calc(var(--lux-shade-a) + .3)) 70%, rgb(var(--lux-shade) / .92) 100%); }

/* Varian sampul: jendela lengkung (arch) */
.lux-arch { position: relative; width: 9.5rem; height: 12rem; flex-shrink: 0; border-radius: 999px 999px 0 0; overflow: hidden; margin-bottom: 1.3rem; border: 1px solid rgb(var(--c-accent) / .8); box-shadow: 0 0 0 6px rgb(var(--lux-shade) / .25), 0 0 0 7px rgb(var(--c-accent) / .45), 0 20px 50px rgb(0 0 0 / .35); background: rgb(var(--c-surface)); }
.lux-arch-empty { position: absolute; inset: 0; display: grid; place-items: center; }
.lux-cover--arch.lux-cover .lux-cover-inner { padding-top: 2.4rem; }
.lux-cover--arch.lux-cover .lux-names { flex-direction: row; flex-wrap: wrap; justify-content: center; align-items: baseline; gap: 0 .3em; font-size: clamp(2.8rem, 13vw, 3.8rem); }
.lux-cover--arch.lux-cover .lux-guest { margin-top: .9rem; }

/* Animasi masuk sampul (dimulai saat halaman siap) */
.lux-in { opacity: 0; transform: translateY(22px); filter: blur(6px); }
.lux-ready .lux-in { animation: luxIn 1.3s cubic-bezier(.2,.7,.2,1) var(--d, 0s) forwards; }
.lux-ready .lux-names.lux-in { animation-name: luxInNames; animation-duration: 1.8s; }

/* ---------- Partikel ---------- */
.lux-particles { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 1; }
.lux-cover .lux-particles { position: fixed; }
.lux-particles i { position: absolute; top: -6%; width: calc(14px * var(--s)); height: calc(14px * var(--s)); animation: luxFall var(--dur) linear var(--delay) infinite; opacity: 0; }
.lux-particles--petal i { background: var(--c); border-radius: 80% 0 80% 0; opacity: .8; }
.lux-particles--leaf i { background: var(--c); border-radius: 0 90% 0 90%; width: calc(10px * var(--s)); height: calc(18px * var(--s)); }
.lux-particles--sparkle i { top: auto; bottom: -4%; width: calc(5px * var(--s)); height: calc(5px * var(--s)); border-radius: 50%; background: var(--c); box-shadow: 0 0 calc(10px * var(--s)) calc(2px * var(--s)) var(--c); animation-name: luxRise; }

.lux-grain { position: fixed; inset: -50%; z-index: 1; pointer-events: none; opacity: .14; animation: luxGrain 1s steps(6) infinite;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E"); }
.lux-main > .lux-aside .lux-grain { position: absolute; }

/* ================= DESKTOP: panel foto + kolom undangan ================= */
.lux-aside { display: none; }
@media (min-width: 1024px) {
  #main { width: 480px; margin-left: auto; position: relative; z-index: 2; box-shadow: -30px 0 60px rgb(0 0 0 / .35); }
  .lux-aside { display: block; position: fixed; top: 0; bottom: 0; left: 0; right: 480px; overflow: hidden; background: rgb(var(--c-bg)); z-index: 1; }
  .lux-aside-img { position: absolute; inset: 0; background-size: cover; background-position: center; opacity: 0; transform: scale(1.06); transition: opacity 1.4s ease, transform 8s ease-out; }
  .lux-aside-img.is-on { opacity: 1; transform: scale(1); }
  .lux-aside-shade { position: absolute; inset: 0; background: linear-gradient(90deg, rgb(var(--lux-shade) / .15), rgb(var(--lux-shade) / .05) 50%, rgb(var(--lux-shade) / .35)), linear-gradient(0deg, rgb(var(--lux-shade) / .85), transparent 55%); }
  .lux-aside-text { position: absolute; left: 4rem; bottom: 3.5rem; right: 3rem; color: rgb(var(--c-text)); }
  .lux--light .lux-aside-shade { background: linear-gradient(0deg, rgb(0 0 0 / .62), rgb(0 0 0 / .15) 50%, transparent 70%); }
  .lux--light .lux-aside-text { color: #fff; }
  .lux--light .lux-aside-text .lux-names, .lux--light .lux-aside-text .lux-date { color: #fff; }
  .lux-aside-text .lux-names { font-size: 5rem; align-items: flex-start; margin: .5rem 0 1rem; }
  .lux-names--display .lux-aside-text .lux-names { font-size: 3.8rem; }
  .lux-cover .lux-cover-inner { max-width: 34rem; }
  .lux-cover--bottom.lux-cover .lux-cover-inner { margin-left: 6vw; margin-bottom: 4vh; }
}

/* Mode terang: lapisan krem di atas foto, teks gelap */
.lux--light.lux-cover .lux-shade--cover { background: linear-gradient(180deg, rgb(var(--lux-shade) / .3) 0%, rgb(var(--lux-shade) / .72) 38%, rgb(var(--lux-shade) / .9) 100%); }
.lux--light.lux-cover--bottom.lux-cover .lux-shade--cover { background: linear-gradient(180deg, rgb(var(--lux-shade) / 0) 0%, rgb(var(--lux-shade) / .15) 22%, rgb(var(--lux-shade) / .85) 50%, rgb(var(--lux-shade) / .96) 100%); }
.lux--light .lux-cover-blur { filter: blur(22px) brightness(1.05); }
.lux--light .lux-guest { background: rgb(255 255 255 / .45); }
.lux--light .lux-sec .lux-shade { background: rgb(var(--lux-shade) / var(--lux-shade-a)); }
.lux--light .lux-hero .lux-shade { background: linear-gradient(180deg, rgb(var(--lux-shade) / .1) 0%, rgb(var(--lux-shade) / calc(var(--lux-shade-a) * .8)) 50%, rgb(var(--lux-shade) / .95) 100%); }

/* ---------- Seri Holy: lambang iman & cahaya ---------- */
.lux-emblem { width: 3.4rem; height: 3.4rem; margin: 0 auto .7rem; color: var(--lux-acc); filter: drop-shadow(0 0 14px rgb(var(--c-accent) / .45)); }
.lux-emblem svg { display: block; width: 100%; height: 100%; }
.lux-ready .lux-cover .lux-emblem.lux-in { animation: luxIn 1.3s cubic-bezier(.2,.7,.2,1) var(--d, 0s) forwards, luxGlow 4s ease-in-out 2s infinite; }
.lux-emblem--sm { width: 2.6rem; height: 2.6rem; }
.lux-cover--bottom.lux-cover .lux-emblem { margin-left: 0; }
.lux-orn--emblem { display: flex; align-items: center; justify-content: center; gap: .7rem; width: 10rem; }
.lux-orn--emblem span { flex: 1; height: 1px; background: linear-gradient(90deg, transparent, currentColor); }
.lux-orn--emblem span:last-child { transform: scaleX(-1); }
.lux-orn--emblem svg { width: 1.35rem; height: 1.35rem; flex-shrink: 0; }
.lux-cover--bottom.lux-cover .lux-orn--emblem { margin-left: 0; }
.lux-verse blockquote { font-family: var(--f-display); font-size: 1.15rem; line-height: 1.8; }

.lux-light { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.lux-cover .lux-light { position: fixed; }
.lux-light--rays { mix-blend-mode: screen; opacity: .7; transform-origin: 50% 0;
  background: conic-gradient(from 180deg at 50% -8%, transparent 0deg 150deg, rgb(255 244 214 / .28) 156deg, transparent 163deg, rgb(255 244 214 / .2) 170deg, transparent 176deg, rgb(255 246 222 / .32) 180deg, transparent 185deg, rgb(255 244 214 / .2) 192deg, transparent 198deg, rgb(255 244 214 / .26) 204deg, transparent 211deg 360deg);
  -webkit-mask-image: linear-gradient(180deg, #000 0%, rgb(0 0 0 / .6) 45%, transparent 85%); mask-image: linear-gradient(180deg, #000 0%, rgb(0 0 0 / .6) 45%, transparent 85%);
  animation: luxRays 10s ease-in-out infinite alternate; }
.lux--light .lux-light--rays { mix-blend-mode: normal; opacity: .9; }
.lux-light--stained { mix-blend-mode: screen; opacity: .55; filter: blur(14px);
  background:
    radial-gradient(circle at 18% 12%, rgb(200 40 70 / .55), transparent 26%),
    radial-gradient(circle at 78% 9%, rgb(40 90 210 / .55), transparent 28%),
    radial-gradient(circle at 52% 26%, rgb(240 180 50 / .45), transparent 24%),
    radial-gradient(circle at 30% 38%, rgb(40 160 120 / .35), transparent 26%),
    radial-gradient(circle at 82% 40%, rgb(150 60 190 / .35), transparent 26%);
  -webkit-mask-image: linear-gradient(180deg, #000 0%, transparent 70%); mask-image: linear-gradient(180deg, #000 0%, transparent 70%);
  animation: luxStained 16s ease-in-out infinite alternate; }

/* ---------- Seri Birthday ---------- */
/* Nama satu orang, gaya "fun" (huruf display besar) */
.lux-names--fun .lux-names { font-family: var(--f-display); font-size: clamp(3rem, 15vw, 4.6rem); line-height: 1; letter-spacing: .01em; color: rgb(var(--c-primary)); text-shadow: 3px 3px 0 rgb(var(--c-accent) / .55); }
.lux-names--fun .lux-host-name { font-family: var(--f-display); font-size: 2rem; }
.lux-names--fun .lux-aside-text .lux-names { font-size: 4.4rem; }
.lux-event--birthday.lux-names--script .lux-names { font-size: clamp(3.6rem, 17vw, 5.2rem); }
.lux-event--birthday.lux-names--display .lux-names { font-size: clamp(2.8rem, 13vw, 3.8rem); }

/* Angka usia */
.lux-age { display: inline-flex; align-items: flex-start; justify-content: center; font-family: var(--f-display); line-height: .9; color: var(--lux-age, rgb(var(--c-accent))); margin: .55rem auto .3rem; }
/* Tema ulang tahun terang: teks kecil & angka usia memakai warna utama agar kontras di latar pastel */
.lux-event--birthday.lux--light { --lux-age: rgb(var(--c-primary)); }
.lux-event--birthday.lux--light .lux-kicker, .lux-event--baptism.lux--light .lux-kicker, .lux-event--engagement.lux--light .lux-kicker { color: rgb(var(--c-primary)); opacity: .85; }
/* Lambang di tema terang memakai warna utama agar tidak pucat */
.lux--light .lux-emblem, .lux--light .lux-orn--emblem { color: rgb(var(--c-primary)); }
.lux-event--birthday.lux--light .lux-age span { text-shadow: 3px 3px 0 rgb(var(--c-accent) / .6); }
.lux-age span { font-size: clamp(4.6rem, 24vw, 6.6rem); font-weight: 700; font-variant-numeric: lining-nums; font-feature-settings: "lnum" 1; }
.lux-age small { font-size: 1.15rem; margin: .45rem 0 0 .12rem; font-family: var(--f-body); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.lux-cover--bottom.lux-cover .lux-age { margin-left: 0; }
.lux-cover--arch.lux-cover .lux-age span { font-size: 4rem; }
.lux-hero .lux-age { margin-top: .4rem; }
.lux-glow .lux-age { text-shadow: 0 0 8px rgb(var(--c-accent) / .9), 0 0 26px rgb(var(--c-accent) / .6); }

/* Yang mengundang (orang tua / keluarga) */
.lux-inviter { margin-top: 1.4rem; text-align: center; }
.lux-inviter-name { font-family: var(--f-display); font-size: 1.35rem; margin-top: .35rem; }

/* Efek neon */
.lux-glow .lux-names, .lux-glow .lux-title { text-shadow: 0 0 6px rgb(var(--c-accent) / .85), 0 0 20px rgb(var(--c-accent) / .55), 0 0 44px rgb(var(--c-primary) / .45); }
.lux-glow .lux-kicker { text-shadow: 0 0 10px rgb(var(--c-accent) / .7); }
.lux-ready .lux-glow.lux-cover .lux-names.lux-in { animation: luxInNames 1.8s cubic-bezier(.2,.7,.2,1) var(--d, 0s) forwards, luxFlicker 6s linear 3s infinite; }

/* Partikel ulang tahun */
.lux-particles--balloon i { top: auto; bottom: -14%; width: calc(26px * var(--s)); height: calc(32px * var(--s)); border-radius: 50% 50% 48% 48% / 56% 56% 44% 44%; background: radial-gradient(circle at 34% 28%, rgb(255 255 255 / .6), transparent 32%), var(--c); animation-name: luxFloatUp; }
.lux-particles--balloon i::after { content: ""; position: absolute; left: 50%; top: 100%; width: 1px; height: calc(38px * var(--s)); background: rgb(255 255 255 / .55); }
.lux-particles--confetti i { width: calc(7px * var(--s)); height: calc(13px * var(--s)); background: var(--c); border-radius: 2px; animation-name: luxConfetti; }
.lux-particles--bubble i { top: auto; bottom: -6%; width: calc(20px * var(--s)); height: calc(20px * var(--s)); border-radius: 50%; border: 1.5px solid var(--c); background: radial-gradient(circle at 32% 30%, rgb(255 255 255 / .55), transparent 40%); animation-name: luxFloatUp; }
.lux-particles--star i { width: calc(15px * var(--s)); height: calc(15px * var(--s)); background: var(--c); clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); }
.lux-particles--heart i { width: auto; height: auto; font-style: normal; line-height: 1; color: var(--c); font-size: calc(18px * var(--s)); }
.lux-particles--heart i::before { content: "\2665"; }

/* Pola latar halus */
.lux-pattern { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.lux-cover .lux-pattern--cover { position: fixed; z-index: 0; }
.lux-pattern--dots { background: radial-gradient(rgb(var(--c-accent) / .28) 2px, transparent 2.6px) 0 0 / 22px 22px; }
.lux-pattern--stripes { background: repeating-linear-gradient(45deg, rgb(var(--c-accent) / .1) 0 10px, transparent 10px 26px); }
.lux-pattern--grid { background: linear-gradient(rgb(var(--c-accent) / .14) 1px, transparent 1px) 0 0 / 28px 28px, linear-gradient(90deg, rgb(var(--c-accent) / .14) 1px, transparent 1px) 0 0 / 28px 28px; }
.lux-pattern--zigzag { background: linear-gradient(135deg, rgb(var(--c-accent) / .12) 25%, transparent 25%) -14px 0 / 28px 28px, linear-gradient(225deg, rgb(var(--c-accent) / .12) 25%, transparent 25%) -14px 0 / 28px 28px, linear-gradient(315deg, rgb(var(--c-accent) / .12) 25%, transparent 25%) 0 0 / 28px 28px, linear-gradient(45deg, rgb(var(--c-accent) / .12) 25%, transparent 25%) 0 0 / 28px 28px; }
.lux-pattern--checks { background: conic-gradient(rgb(var(--c-accent) / .1) 25%, transparent 0 50%, rgb(var(--c-accent) / .1) 0 75%, transparent 0) 0 0 / 40px 40px; }
.lux-pattern--confetti { background:
  radial-gradient(circle at 12% 18%, rgb(var(--c-accent) / .55) 3px, transparent 3.6px),
  radial-gradient(circle at 62% 8%, rgb(var(--c-primary) / .45) 2.5px, transparent 3px),
  radial-gradient(circle at 82% 58%, rgb(var(--c-accent) / .45) 3px, transparent 3.6px),
  radial-gradient(circle at 34% 72%, rgb(var(--c-primary) / .4) 2.5px, transparent 3px),
  radial-gradient(circle at 48% 40%, rgb(var(--c-muted) / .45) 2px, transparent 2.6px) 0 0 / 90px 90px; background-size: 90px 90px; }
.lux-pattern--waves { background: radial-gradient(circle at 50% 0, transparent 9px, rgb(var(--c-accent) / .2) 10px, transparent 11px) 0 0 / 24px 14px; }

/* ---------- Anniversary organisasi & event resmi ---------- */
.lux-names--title .lux-names { font-family: var(--f-display); font-size: clamp(1.9rem, 8.6vw, 2.7rem); line-height: 1.14; letter-spacing: .01em; text-transform: none; }
.lux-names--title .lux-aside-text .lux-names { font-size: 3rem; }
.lux-names--title .lux-host-name { font-family: var(--f-display); font-size: 1.45rem; }
.lux-by { margin-top: .75rem; font-size: .82rem; letter-spacing: .03em; line-height: 1.5; color: rgb(var(--c-text)); opacity: .88; }
.lux-by strong { font-weight: 600; color: var(--lux-acc); }
.lux--light .lux-by strong { color: rgb(var(--c-primary)); }
.lux-host-role { margin-bottom: .75rem; }
.lux-event--formal .lux-hosts { gap: 2.4rem; }
.lux-event--formal .lux-host-photo, .lux-event--organn .lux-host-photo { background: #fff; }
.lux-event--organn .lux-host-photo img, .lux-event--formal .lux-host-photo img { object-fit: contain; padding: 12%; }
.lux-event--organn.lux--light .lux-kicker, .lux-event--formal.lux--light .lux-kicker { color: rgb(var(--c-primary)); opacity: .85; }
.lux-event--organn.lux--light { --lux-age: rgb(var(--c-primary)); }

/* ---------- Keyframes ---------- */
@keyframes luxFloatUp { 0% { opacity: 0; transform: translate(0, 0); } 8% { opacity: .95; } 90% { opacity: .9; } 100% { opacity: 0; transform: translate(var(--drift), -118vh); } }
@keyframes luxConfetti { 0% { opacity: 0; transform: translate(0, 0) rotate3d(1, 1, 0, 0deg); } 8% { opacity: 1; } 92% { opacity: .9; } 100% { opacity: 0; transform: translate(var(--drift), 112vh) rotate3d(1, 1, 0, 900deg); } }
@keyframes luxFlicker { 0%, 18%, 22%, 25%, 53%, 57%, 100% { opacity: 1; } 20%, 24%, 55% { opacity: .55; } }
@keyframes luxGlow { 0%, 100% { filter: drop-shadow(0 0 10px rgb(var(--c-accent) / .35)); } 50% { filter: drop-shadow(0 0 22px rgb(var(--c-accent) / .75)); } }
@keyframes luxRays { from { transform: rotate(-4deg) scaleY(1); opacity: .55; } to { transform: rotate(4deg) scaleY(1.08); opacity: .8; } }
@keyframes luxStained { from { transform: translate3d(-3%, 0, 0) scale(1); opacity: .45; } to { transform: translate3d(3%, 2%, 0) scale(1.08); opacity: .65; } }
@keyframes luxIn { to { opacity: 1; transform: none; filter: none; } }
@keyframes luxInNames { 0% { opacity: 0; transform: scale(1.12); filter: blur(10px); letter-spacing: .08em; } 100% { opacity: 1; transform: none; filter: none; } }
@keyframes luxKenburns { from { transform: scale(1.18) translate(2%, 1%); } to { transform: scale(1.02) translate(0, 0); } }
@keyframes luxKenburns2 { from { transform: scale(1.04) translate(-2%, 0); } to { transform: scale(1.2) translate(1%, -2%); } }
@keyframes luxKenburns3 { from { transform: scale(1.2) translate(0, -2%); } to { transform: scale(1.04) translate(-1%, 1%); } }
@keyframes luxFall { 0% { opacity: 0; transform: translate(0, 0) rotate(0); } 10% { opacity: .85; } 90% { opacity: .7; } 100% { opacity: 0; transform: translate(var(--drift), 110vh) rotate(540deg); } }
@keyframes luxRise { 0% { opacity: 0; transform: translate(0, 0); } 15% { opacity: .9; } 50% { opacity: .35; } 80% { opacity: .9; } 100% { opacity: 0; transform: translate(var(--drift), -105vh); } }
@keyframes luxScroll { 0% { opacity: 0; transform: translateY(0); } 40% { opacity: 1; } 100% { opacity: 0; transform: translateY(12px); } }
@keyframes luxPulse { 0%, 100% { box-shadow: 0 0 0 0 rgb(var(--c-accent) / .45); } 60% { box-shadow: 0 0 0 14px rgb(var(--c-accent) / 0); } }
@keyframes luxGrain { 0% { transform: translate(0, 0); } 20% { transform: translate(-5%, 3%); } 40% { transform: translate(4%, -6%); } 60% { transform: translate(-3%, 8%); } 80% { transform: translate(7%, 2%); } 100% { transform: translate(0, 0); } }

@media (prefers-reduced-motion: reduce) {
  .lux-slide.is-on, .lux-particles i, .lux-grain, .lux-open, .lux-scroll span, .lux-light, .lux-emblem { animation: none !important; }
  .lux-cover .lux-emblem.lux-in { opacity: 1; }
  .lux-in { opacity: 1; transform: none; filter: none; }
  .lux-bg-img { transform: none !important; transition: none; }
}