/* Noor Mahal — walnut and gold at the doors, ivory cards with dark ink inside the hall.
   Loaded on top of wm-base.css. Every caption is a real card so the words stay easy to read
   over a bright, moving film. */
.wm--noor { --gold: #f3d9a4; --gold-2: #c89a4a; --cream: #fff7ea; --muted: rgba(255, 247, 234, .84); --line: rgba(243, 217, 164, .4); --ink: #140a06;
  --n-ink: #3a1620; --n-text: #55352f; --n-soft: #6b4b45; --n-gold: #8a5f14; --n-rose: #9c2c45; --n-line: rgba(160, 112, 40, .42); background: #140a06; }
.wm--noor .wm-loader { background: radial-gradient(ellipse at 50% 40%, #5c341b 0%, #2c160b 55%, #140a06 100%); }
.wm--noor .wm-mandala { color: #f3d9a4; filter: drop-shadow(0 0 18px rgba(243, 200, 130, .4)); }
.wm--noor .wm-l-names { color: #fff1d4; text-shadow: 0 0 34px rgba(240, 190, 120, .5); }
.wm--noor .wm-top { background: linear-gradient(180deg, rgba(20, 9, 3, .42), rgba(20, 9, 3, 0)); }
.wm--noor .wm-brand { color: #fbe7b4; text-shadow: 0 2px 10px rgba(0, 0, 0, .8); }
.wm--noor .wm-ico { background: rgba(44, 22, 10, .62); border-color: rgba(243, 217, 164, .45); }
.wm--noor .wm-nav i { border-color: rgba(255, 255, 255, .95); background: rgba(60, 30, 12, .4); box-shadow: 0 0 0 1px rgba(60, 30, 12, .45), 0 1px 5px rgba(0, 0, 0, .45); }
.wm--noor .wm-nav button.is-on i { background: #fff3cf; box-shadow: 0 0 0 1px rgba(60, 30, 12, .5), 0 0 12px rgba(255, 220, 150, .95); }
.wm--noor .wm-nav span { color: #fff; text-shadow: 0 1px 6px rgba(0, 0, 0, .95), 0 0 2px rgba(0, 0, 0, .9); }

/* ---------- the opening: names on the doors ---------- */
.wm--noor .wm-cap.wm-cap--hero { --top: calc(19 * var(--vh)); width: min(700px, calc(100vw - 24px)); padding: 0; background: none; border: 0; box-shadow: none; border-radius: 0; color: #fff3d6;
  transform: translate3d(0, var(--y), 0); }
.wm--noor .wm-cap.wm-cap--hero::before { inset: -8% calc((100% - 100vw) / 2 + 12px) -4%; border: 0; border-radius: 50%; background: radial-gradient(ellipse at 50% 46%, rgba(18, 8, 3, .76) 0%, rgba(18, 8, 3, .5) 44%, rgba(18, 8, 3, 0) 72%); }
.wm--noor .wm-cap.wm-cap--hero::after { display: none; }
.wn-kicker { margin: 0 0 calc(2.6 * var(--vh)); font: 600 12px var(--cin); letter-spacing: .42em; text-indent: .42em; text-transform: uppercase; color: #f6e2b6; text-shadow: 0 2px 10px rgba(0, 0, 0, .95); }
.wn-names { margin: 0; display: flex; flex-direction: column; align-items: center; font-family: var(--script); font-weight: 400; line-height: 1; }
.wn-names span { display: block; padding: .06em .16em .2em; font-size: clamp(78px, 25vw, 150px);
  background: linear-gradient(180deg, #fffef6 0%, #fdeec4 36%, #ecc574 68%, #fff4d2 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: #fdeec4;
  filter: drop-shadow(0 3px 2px rgba(20, 8, 2, .9)) drop-shadow(0 0 20px rgba(20, 8, 2, .75)); }
.wn-names em { display: flex; align-items: center; gap: 14px; margin: -.5em 0 -.35em; font: 600 clamp(13px, 3.6vw, 18px) var(--cin); letter-spacing: .5em; text-indent: .5em; text-transform: uppercase; color: #f6e2b6; text-shadow: 0 2px 10px rgba(0, 0, 0, .95); }
.wn-names em::before, .wn-names em::after { content: ""; width: 34px; height: 1px; background: linear-gradient(90deg, rgba(246, 226, 182, 0), #f6e2b6); }
.wn-names em::after { transform: scaleX(-1); }
.wn-herodate { margin: calc(1.6 * var(--vh)) 0 0; font: 600 clamp(13px, 3.7vw, 17px) var(--cin); letter-spacing: .14em; color: #fff3d6; text-shadow: 0 2px 12px rgba(0, 0, 0, .98), 0 0 3px rgba(0, 0, 0, .8); }
.wn-herodate b { display: block; margin-top: 6px; font: italic 600 clamp(16px, 4.4vw, 20px) var(--serif); letter-spacing: .02em; color: #ffe9bd; }
.wm--noor .wm-cap--hero .wm-hint { position: absolute; left: 50%; top: calc(69 * var(--vh)); margin: 0; transform: translateX(-50%); white-space: nowrap; padding: 10px 20px 10px 13px; border-radius: 999px; color: #fff3d6;
  background: rgba(30, 14, 6, .7); border: 1px solid rgba(243, 217, 164, .4); }
.wm--noor .wm-cap--hero > *, .wm--noor .wn-names span, .wm--noor .wn-names em { opacity: 0; }
.wm--noor.wn-go .wm-cap--hero > * { animation: wn-rise 1.3s cubic-bezier(.2, .8, .2, 1) both; }
.wm--noor.wn-go .wn-kicker { animation-delay: .35s; }
.wm--noor.wn-go .wn-names { animation-delay: 0s; }
.wm--noor.wn-go .wn-names span { animation: wn-name 1.7s cubic-bezier(.2, .8, .2, 1) .55s both; }
.wm--noor.wn-go .wn-names em { animation: wn-rise 1.2s cubic-bezier(.2, .8, .2, 1) 1s both; }
.wm--noor.wn-go .wn-names span.b { animation-delay: 1.2s; }
.wm--noor.wn-go .wn-herodate { animation-delay: 1.9s; }
.wm--noor.wn-go .wm-cap--hero .wm-hint { animation: wn-fade 1.2s ease 2.8s both; }
@keyframes wn-rise { from { opacity: 0; transform: translate3d(0, 18px, 0); } to { opacity: 1; transform: none; } }
@keyframes wn-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes wn-name { from { opacity: 0; transform: translate3d(0, .22em, 0) scale(.9); letter-spacing: .08em; } to { opacity: 1; transform: none; letter-spacing: 0; } }
@media (min-aspect-ratio: 1/1) {
  .wm--noor .wm-cap.wm-cap--hero { --top: calc(24 * var(--vh)); width: min(1100px, calc(100vw - 60px)); }
  .wn-names { flex-direction: row; justify-content: center; align-items: center; gap: .1em; }
  .wn-names span { font-size: clamp(72px, 10.5vw, 168px); }
  .wn-names em { flex-direction: column; gap: 10px; margin: 0 .2em; letter-spacing: .36em; text-indent: .36em; }
  .wn-names em::before, .wn-names em::after { width: 1px; height: 26px; background: linear-gradient(180deg, rgba(246, 226, 182, 0), #f6e2b6); }
  .wn-names em::after { transform: scaleY(-1); }
  .wm--noor .wm-cap--hero .wm-hint { top: calc(62 * var(--vh)); }
}

/* ---------- ivory cards ---------- */
.wm--noor .wm-cap { width: min(520px, calc(100vw - 52px)); padding: 30px 22px 22px; border-radius: 26px; color: var(--n-text);
  background: linear-gradient(180deg, rgba(255, 253, 248, .965), rgba(255, 247, 234, .95)); border: 1px solid var(--n-line);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .7), 0 30px 70px rgba(70, 36, 10, .34), 0 6px 18px rgba(70, 36, 10, .2);
  transform: translate3d(var(--x, 0px), var(--y), 0) perspective(1100px) rotateX(var(--rx, 0deg)) rotateY(calc(var(--mx, 0) * 2.5deg)) scale(var(--s, 1)); transform-origin: 50% 55%; }
.wm--noor .wm-cap::before { inset: 7px; border-radius: 20px; background: none; border: 1px solid rgba(176, 128, 52, .32); }
.wm--noor .wm-cap::after { content: ""; position: absolute; left: 50%; top: -17px; width: 86px; height: 34px; margin-left: -43px; pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 86 34'%3E%3Cg fill='%23fffaf1' stroke='%23a87424' stroke-width='1.3' stroke-linejoin='round'%3E%3Cpath d='M43 28c-3-9-11-14-19-13c2 8 9 13 19 13z'/%3E%3Cpath d='M43 28c3-9 11-14 19-13c-2 8-9 13-19 13z'/%3E%3Cpath d='M43 3c6 7 6 17 0 25c-6-8-6-18 0-25z'/%3E%3C/g%3E%3Cpath d='M2 28h22M62 28h22' stroke='%23a87424' stroke-width='1.3' stroke-linecap='round'/%3E%3C/svg%3E") center/contain no-repeat; }
.wm--noor .wm-cap .wm-eyebrow { margin: 0 0 8px; color: var(--n-gold); text-shadow: none; font-weight: 700; letter-spacing: .26em; }
.wm--noor .wm-cap h2, .wm--noor .wm-cap h3 { color: var(--n-ink); text-shadow: none; }
.wm--noor .wm-cap h2 { font-size: clamp(30px, 7.8vw, 44px); font-weight: 700; }
.wm--noor .wm-cap .wm-sub { color: var(--n-text); text-shadow: none; font-size: 16px; line-height: 1.55; font-weight: 500; }
.wm--noor .wm-cap .wm-om { color: var(--n-gold); text-shadow: none; font-size: 16px; }
.wm--noor .wm-cap .wm-fam { color: var(--n-gold); font-size: 13px; }
.wm--noor .wm-cap .wm-script { color: var(--n-rose) !important; font-size: clamp(46px, 12.5vw, 68px) !important; line-height: 1.04; margin-bottom: 10px; }
.wm--noor .wm-cap .wm-when { margin: 0 0 14px; color: var(--n-ink); text-shadow: none; font-size: clamp(15px, 4.2vw, 18px); font-weight: 700; }
.wn-date { font-family: var(--cin) !important; font-size: clamp(22px, 6.5vw, 38px) !important; white-space: nowrap; letter-spacing: .04em !important; color: var(--n-rose) !important; margin-bottom: 6px !important; }
body.wm--noor .wm-evname { display: block; margin: 0 0 4px; color: var(--n-rose) !important; font-size: clamp(50px, 14vw, 74px) !important; line-height: 1.05; }
.wm--noor .wm-evwhen { margin: 0 0 12px; color: var(--n-ink); font-size: clamp(14px, 3.9vw, 16px); font-weight: 700; letter-spacing: .08em; }
.wm--noor .wm-link { display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border: 1px solid var(--n-line); border-radius: 999px; background: #fff; color: #5d3409; font-size: 15px; font-weight: 600; line-height: 1.25; text-align: left; }
.wm--noor .wm-link svg { flex: none; width: 17px; height: 17px; color: var(--n-rose); }
.wm--noor .wm-tip { color: var(--n-soft); font-size: 13px; }
.wm--noor .wm-sign { color: var(--n-gold); }
.wm--noor .wm-made { color: var(--n-soft); }
.wm--noor .wm-count { gap: 8px; margin-bottom: 14px; }
.wm--noor .wm-count div { min-width: 66px; background: #fff; border-color: var(--n-line); box-shadow: 0 4px 14px rgba(90, 50, 10, .1); -webkit-backdrop-filter: none; backdrop-filter: none; }
.wm--noor .wm-count b { color: var(--n-rose); font-size: 27px; }
.wm--noor .wm-count span { color: var(--n-soft); font-weight: 600; }
.wm--noor .wm-cap .wm-btn, .wm--noor .wm-sheet .wm-btn { color: #fff8ec; background: linear-gradient(135deg, #8f2942, #6a1830 58%, #8f2942); border-color: #6a1830; box-shadow: 0 10px 26px rgba(106, 24, 48, .3), inset 0 1px 0 rgba(255, 255, 255, .22); font-size: 15px; }
.wm--noor .wm-cap .wm-btn--ghost, .wm--noor .wm-sheet .wm-btn--ghost { color: var(--n-ink); background: #fff; border-color: var(--n-line); box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
.wm--noor .wm-passcard { box-shadow: 0 0 0 4px rgba(176, 128, 52, .16), 0 14px 34px rgba(70, 36, 10, .22); }
.wm--noor .wm-passcard .qr img, .wm--noor .wm-passcard .qr canvas { width: 132px !important; height: 132px !important; }
.wn-pin { display: grid; place-items: center; width: 46px; height: 46px; margin: 0 auto 8px; border-radius: 50%; color: #fff8ec; background: linear-gradient(135deg, #8f2942, #6a1830); box-shadow: 0 8px 20px rgba(106, 24, 48, .28); }
.wn-pin svg { width: 22px; height: 22px; }
@media (min-width: 900px) and (min-aspect-ratio: 1/1) { .wm--noor .wm-cap { width: 500px; padding: 34px 30px 26px; } .wm--noor .wm-cap.wm-cap--hero { width: min(1100px, calc(100vw - 60px)); padding: 0; } }
@media (max-height: 640px) { .wm--noor .wm-cap { padding: 24px 18px 16px; } .wm--noor .wm-count div { padding: 7px 4px 6px; } .wm--noor .wm-cap .wm-script { font-size: clamp(38px, 10vw, 52px) !important; } }

/* text motion: words rise into place, then stay perfectly still */
.wm--noor .w { display: inline-block; opacity: 0; transform: translate3d(0, .5em, 0); }
.wm--noor .wm-cap.is-in .w { animation: wn-word .9s cubic-bezier(.2, .8, .2, 1) both; animation-delay: calc(var(--i, 0) * 55ms); }
@keyframes wn-word { from { opacity: 0; transform: translate3d(0, .5em, 0); } to { opacity: 1; transform: none; } }
.wm--noor .wm-cap.is-in .wm-actions, .wm--noor .wm-cap.is-in .wm-link { animation: wn-rise .9s cubic-bezier(.2, .8, .2, 1) .4s both; }
.wm--noor .wm-cap.is-in .wm-count { animation: wn-rise .9s cubic-bezier(.2, .8, .2, 1) .25s both; }

/* ---------- sheets in the same ivory ---------- */
.wm--noor .wm-sheet.is-open { background: rgba(30, 14, 6, .52); }
.wm--noor .wm-sheet-card { color: var(--n-text); background: linear-gradient(180deg, #fffdf8, #fff4e3); border-color: var(--n-line); box-shadow: 0 -20px 60px rgba(40, 18, 4, .4); }
.wm--noor .wm-sheet-card h3 { color: var(--n-ink); }
.wm--noor .wm-sheet-card .wm-eyebrow { color: var(--n-gold); text-shadow: none; font-weight: 700; }
.wm--noor .wm-sheet-card .wm-sub { color: var(--n-text); text-shadow: none; }
.wm--noor .wm-x { color: var(--n-ink); background: #fff; border-color: var(--n-line); }
.wm--noor .wm-form label { color: var(--n-soft); font-weight: 600; }
.wm--noor .wm-form input, .wm--noor .wm-form select, .wm--noor .wm-form textarea { background: #fff; color: #2a1512; border-color: rgba(160, 112, 40, .5); }
.wm--noor .wm-form input:focus, .wm--noor .wm-form select:focus, .wm--noor .wm-form textarea:focus { border-color: #8f2942; box-shadow: 0 0 0 3px rgba(143, 41, 66, .16); }
.wm--noor .wm-msg { color: #8f2942; font-weight: 600; }
.wm--noor .wm-amts button { background: #fff; color: var(--n-ink); border-color: var(--n-line); }
.wm--noor .wm-amts button.is-on { background: linear-gradient(135deg, #8f2942, #6a1830); color: #fff8ec; }
.wm--noor .wm-map { border-color: var(--n-line); background: #f6ead8; color: var(--n-soft); }

/* without WebGL the hall is a still picture and every card is simply shown */
body.no-gl.wm--noor .wm-fallback { background: #2c160b url(../noor/p_hall.jpg) center / cover no-repeat; }
@media (min-aspect-ratio: 1/1) { body.no-gl.wm--noor .wm-fallback { background-image: url(../noor/l_hall.jpg); } }
body.no-gl.wm--noor .wm-cap--hero > *, body.no-gl.wm--noor .wn-names span, body.no-gl.wm--noor .wn-names em, body.no-gl.wm--noor .w { opacity: 1; transform: none; animation: none; }
body.no-gl.wm--noor .wm-cap--hero .wm-hint { display: none; }
@media (prefers-reduced-motion: reduce) { .wm--noor .w, .wm--noor .wm-cap--hero > *, .wm--noor .wn-names span, .wm--noor .wn-names em { opacity: 1; transform: none; animation: none !important; } }