/* Crimson Court: source-video hero, engraved stationery, geometric cards, velvet still life, satin closing. */
.hero { position:relative; height:100svh; min-height:540px; container-type:inline-size; text-align:center; isolation:isolate; overflow:hidden; background:var(--oxblood); }
.hero-video,.hero-shade { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center; }
.hero-shade { background:radial-gradient(ellipse at 50% 53%,color-mix(in srgb,var(--night) 24%,transparent),transparent 65%); pointer-events:none; }
.opening { position:absolute; inset:0; z-index:5; transition:opacity .35s ease; background:var(--oxblood); }
.opening-art { position:relative; width:100%; height:100%; }
.opening-video,.opening-poster { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center; }
.opening-poster { transition:opacity .15s ease; }
.opening-poster.is-hidden { opacity:0; }
/* Personalised palace entrance: gold monogram and an unboxed invitation cue. */
.opening-gate { position:absolute; inset:0; width:100%; padding:0; border:0; background:transparent; color:var(--candle); opacity:1; transition:opacity .55s ease; }
.opening-gate::before { content:''; position:absolute; inset:0; background:radial-gradient(ellipse 68% 58% at 50% 50%,rgba(40,4,3,.9) 0%,rgba(56,4,5,.83) 36%,rgba(56,4,5,.42) 62%,rgba(40,4,3,.06) 88%,transparent 100%); pointer-events:none; }
.opening-caption { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:84%; max-width:490px; display:flex; flex-direction:column; align-items:center; padding:0; text-align:center; text-shadow:0 2px 15px var(--night); }
.opening-monogram { display:block; width:clamp(88px,25cqw,142px); height:auto; margin:0 auto 22px; filter:drop-shadow(0 2px 10px rgba(40,4,3,.65)); }
.opening-kicker { display:block; font-family:var(--font-label); font-size:clamp(13px,3.5cqw,18px); line-height:1.6; letter-spacing:.24em; text-transform:uppercase; color:var(--gold); }
.opening-caption .opening-names { display:flex; align-items:baseline; justify-content:center; gap:.3em; width:100%; color:var(--candle); font-family:var(--font-script); font-size:clamp(43px,13cqw,76px); line-height:1.25; margin:16px 0 6px; padding:.04em .05em .1em; font-weight:400; white-space:nowrap; }
.opening-names > span { display:block; }
.opening-names i { font-family:var(--font-display); color:var(--gold); font-size:.48em; line-height:1; font-style:italic; }
.opening-cue { display:flex; flex-direction:column; align-items:center; gap:8px; margin-top:10px; }
.opening-flourish { display:block; width:clamp(125px,34cqw,190px); height:auto; }
.opening-cue em { display:block; padding:8px 12px; font-family:var(--font-label); font-style:normal; font-weight:600; font-size:clamp(13px,3.4cqw,16px); line-height:1.5; letter-spacing:.2em; text-transform:uppercase; color:var(--candle); animation:invitation-cue 3.5s ease-in-out infinite; }
.opening-guest { display:flex; flex-direction:column; align-items:center; max-width:100%; padding:6px 0 0; }
.opening-guest-label { color:var(--gold); font:400 clamp(10px,2.6cqw,13px)/1.6 var(--font-label); letter-spacing:.17em; text-transform:uppercase; }
.opening-guest-name { display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:3; overflow:hidden; max-width:100%; margin-top:4px; color:var(--candle); font:400 clamp(19px,5.1cqw,28px)/1.35 var(--font-display); overflow-wrap:anywhere; }
.opening-caption.has-guest .opening-monogram { width:clamp(82px,22cqw,120px); margin-bottom:17px; }
.opening-gate:hover .opening-cue em { color:var(--gold); }
.opening-gate:focus-visible .opening-cue em { outline:1px solid var(--gold); outline-offset:4px; }
.opening-gate.is-opening { pointer-events:none; opacity:0; }
@keyframes invitation-cue { 0%,100% { opacity:.8; } 50% { opacity:1; } }
@media(max-height:620px) {
  .opening-monogram { width:80px; margin-bottom:13px; }
  .opening-caption .opening-names { margin:9px 0 6px; }
  .opening-cue { margin-top:10px; gap:8px; }
}
.opening.is-leaving { opacity:0; pointer-events:none; }
.skip-intro { position:absolute; bottom:24px; left:50%; transform:translateX(-50%); min-height:44px; padding:10px 18px; background:var(--oxblood); color:var(--candle); border:1px solid var(--gold); z-index:4; }
.hero-content { position:absolute; top:29%; left:12%; right:12%; z-index:6; opacity:0; pointer-events:none; transform:translateY(10px); }
.hero-content p,.hero-content h1 { text-shadow:0 2px 16px var(--oxblood); }
.hero-bismillah { font-family:'Geeza Pro'; font-weight:400; font-synthesis:none; font-size:clamp(16px,4.1cqw,22px); line-height:1.6; color:var(--candle); }
.hero-family { font-family:var(--font-label); font-size:clamp(10px,2.7cqw,15px); line-height:1.8; letter-spacing:.14em; text-transform:uppercase; margin-top:17px; }
.hero-names { display:flex; flex-direction:column; align-items:center; font-family:var(--font-script); font-size:clamp(44px,11.7cqw,72px); line-height:1.08; margin:15px auto 19px; color:var(--candle); }
.hero-bride,.hero-groom { display:block; max-width:100%; white-space:nowrap; padding:.03em .03em .05em; }
.hero-amp { font-family:var(--font-display); font-size:clamp(25px,6cqw,34px); font-style:italic; line-height:1.2; color:var(--gold); }
.hero-occasions { font-family:var(--font-label); text-transform:uppercase; letter-spacing:.2em; font-size:clamp(12px,3cqw,17px); color:var(--candle); }
.is-hero-ready .hero-content { opacity:1; transform:none; transition:opacity 1s ease,transform 1s ease; }
.is-hero-ready .hero-content > *,.is-hero-ready .hero-couple > * { animation:copy-in .8s ease both; }
.is-hero-ready .hero-family { animation-delay:.15s; }
.is-hero-ready .hero-names { animation-delay:.3s; }
.is-hero-ready .hero-occasions { animation-delay:.45s; }
@keyframes copy-in { from { opacity:0; transform:translateY(7px); } to { opacity:1; transform:none; } }
.scroll-cue { position:relative; z-index:6; display:flex; flex-direction:column; align-items:center; gap:8px; width:fit-content; max-width:100%; min-height:44px; margin:14px auto 0; padding:7px 10px; pointer-events:auto; text-decoration:none; font-family:var(--font-label); font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:var(--candle); opacity:0; transition:opacity .6s ease; text-shadow:0 2px 10px var(--night); }
.is-hero-ready .hero-couple > .scroll-cue { animation:none; }
.is-chrome-ready .scroll-cue { opacity:1; }
.scroll-cue > span { white-space:pre-line; }
.scroll-cue svg { animation:arrow-float 2.5s ease-in-out infinite; }
.section-divider { position:relative; height:0; width:100%; z-index:10; pointer-events:none; }
.section-divider img { position:absolute; top:0; left:50%; display:block; width:100%; height:auto; max-width:none; transform:translate(-50%,-50%); }
.section-divider--gold img { width:90%; }
.verse-section { position:relative; text-align:center; padding:80px 15% 68px; background:var(--oxblood); }
.verse-section--pairs { background:linear-gradient(180deg,var(--oxblood),var(--night)); }
.verse-section--marriage { background:var(--night); padding-top:70px; padding-bottom:80px; }
.verse-arabic { font-family:var(--font-arabic); font-size:clamp(29px,7vw,39px); line-height:1.9; color:var(--gold); }
.verse-translation { font-family:var(--font-display); font-size:clamp(22px,5.3vw,29px); line-height:1.6; max-width:400px; margin:20px auto 0; }
.verse-reference { font-family:var(--font-label); font-size:12px; letter-spacing:.07em; color:var(--gold); margin-top:20px; }
.verse-content .ornament { margin-bottom:0; }
.formal { position:relative; text-align:center; background:var(--crimson) var(--formal-bg) center/100% 100% no-repeat; }
.formal-content { width:70%; max-width:430px; margin:auto; padding:clamp(80px,20vw,135px) 0 clamp(110px,25vw,165px); }
.formal-salawat {
  --salawat-fill:#f7d6a2;
  display:block; width:70%; max-width:350px; aspect-ratio:2172 / 724; margin:0 auto;
  background-color:var(--salawat-fill);
  -webkit-mask:var(--salawat-image,url('../images/salawat-client-mask.png')) center / contain no-repeat;
  mask:var(--salawat-image,url('../images/salawat-client-mask.png')) center / contain no-repeat;
}
.formal-intro { font-size:clamp(14px,3.4vw,17px); line-height:1.9; margin:10px auto 28px; max-width:360px; }
.formal-guest-greeting { margin:10px auto 18px; font-family:var(--font-display); font-size:clamp(20px,5.4vw,28px); line-height:1.5; color:var(--candle); overflow-wrap:anywhere; }
.formal-guest-greeting span:first-child { display:block; font-family:var(--font-label); font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--gold); margin-bottom:4px; }
.formal-name { white-space:nowrap; font-family:var(--font-script); font-size:clamp(48px,12vw,72px); line-height:1.12; color:var(--candle); padding-bottom:.1em; }
.formal-relation { margin-top:8px; font-family:var(--font-label); color:var(--gold); font-size:13px; }
.formal-family { font-size:clamp(14px,3.4vw,18px); line-height:1.8; margin:6px auto 0; max-width:350px; }
.formal-joining { font-family:var(--font-display); font-style:italic; font-size:26px; color:var(--gold); margin:27px 0 21px; }
.formal-content .ornament { margin:33px auto 0; }
.details-paper { background:radial-gradient(ellipse at 50% 0,var(--crimson),var(--oxblood) 40%,var(--night)); }
.date-section { padding:73px 7% 55px; text-align:center; }
.section-heading h2 { font-family:var(--font-display); font-size:clamp(35px,8.5vw,49px); line-height:1.3; margin:12px auto 0; }
.scratch-hint { font-size:13px; max-width:285px; margin:19px auto 30px; color:var(--candle); }
.scratch-cards { user-select:none; -webkit-user-select:none; display:flex; justify-content:center; gap:13px; max-width:470px; margin:auto; }
.scratch-item { width:30%; max-width:134px; flex:1; min-width:0; }
.scratch-circle { --heart-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M50 91C42 82 5 58 5 31C5 6 37 1 50 23C63 1 95 6 95 31C95 58 58 82 50 91Z'/%3E%3C/svg%3E"); position:relative; width:100%; aspect-ratio:1; background:var(--oxblood) url('../images/scratch-heart-face.svg?v=2') center/100% auto no-repeat; mask:var(--heart-mask) center/100% 100% no-repeat; -webkit-mask:var(--heart-mask) center/100% 100% no-repeat; isolation:isolate; }
.scratch-decoration { display:none; }
.scratch-value { position:absolute; z-index:1; inset:0; display:grid; place-items:center; padding-bottom:12%; font-family:var(--font-display); font-size:clamp(23px,6.2vw,34px); color:var(--candle); }
.scratch-canvas { position:absolute; z-index:2; inset:0; width:100%; height:100%; touch-action:none; cursor:crosshair; transition:opacity .6s ease; }
.scratch-circle.is-revealed .scratch-canvas { opacity:0; pointer-events:none; }
.scratch-circle.is-revealed { animation:seal-reveal .75s ease; }
.scratch-label { font-family:var(--font-label); color:var(--gold); font-size:11px; letter-spacing:.22em; margin-top:7px; text-transform:uppercase; }
.countdown-panel { margin-top:40px; }
.countdown-eyebrow { margin-bottom:10px; }
.countdown-panel h3 { font-family:var(--font-display); font-size:27px; margin-bottom:26px; }
.countdown-units { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:clamp(6px,2vw,12px); max-width:460px; margin:auto; }
.countdown-unit { position:relative; min-width:0; aspect-ratio:100 / 156; display:flex; flex-direction:column; align-items:center; justify-content:center; padding-top:16px; }
.countdown-arch-frame { position:absolute; inset:0; width:100%; height:100%; fill:none; stroke:currentColor; color:var(--gold); pointer-events:none; }
.countdown-arch-frame path { stroke-width:1; vector-effect:non-scaling-stroke; }
.countdown-arch-frame .countdown-arch-inner { stroke-width:.5; opacity:.38; }
.countdown-number { position:relative; color:var(--candle); font-family:var(--font-display); font-size:clamp(29px,8vw,45px); line-height:1; font-variant-numeric:tabular-nums; filter:blur(7px); user-select:none; transition:filter .85s ease; }
.countdown-panel.is-date-revealed .countdown-number { filter:blur(0); user-select:text; }
.countdown-label { position:relative; font-family:var(--font-label); text-transform:uppercase; font-size:clamp(9px,2.4vw,11px); letter-spacing:.07em; margin-top:11px; color:var(--gold); }
.event-section { text-align:center; padding:48px 4% 52px; }
.event-card { position:relative; isolation:isolate; width:100%; max-width:540px; margin:auto; background:var(--oxblood) var(--event-bg) center/100% 100% no-repeat; padding:clamp(100px,25vw,144px) 11% clamp(100px,25vw,140px); }
.event-invocation { font-family:var(--font-arabic); font-size:23px; line-height:1.6; color:var(--gold); margin-bottom:2px; }
.event-name { font-family:var(--font-label); font-size:clamp(44px,11vw,58px); line-height:1.15; letter-spacing:.035em; color:var(--candle); }
.event-card .ornament { width:100px; margin:14px auto 26px; }
.event-details { margin:0; }
.event-detail { margin-top:12px; }
.event-detail--venue { margin-top:34px; }
.event-detail:first-child { margin-top:0; }
.event-detail dt { font-family:var(--font-label); font-size:11px; text-transform:uppercase; letter-spacing:.18em; color:var(--gold); margin-bottom:4px; }
.event-detail dd { margin:0; }
.event-detail-icon { width:21px; height:21px; margin:0 auto 7px; color:var(--gold); }
.event-weekday { display:block; font-family:var(--font-label); font-size:13px; text-transform:uppercase; letter-spacing:.15em; }
.event-date { display:block; font-family:var(--font-display); font-size:clamp(21px,5.5vw,29px); line-height:1.5; margin-top:3px; }
.event-hijri { display:block; font-size:12px; color:var(--gold); margin-top:4px; }
.programme-name { display:none; }
.programme-time { display:block; font-family:var(--font-display); font-size:clamp(19px,4.8vw,24px); color:var(--candle); }
.event-venue { display:block; font-family:var(--font-display); font-size:clamp(24px,6vw,33px); line-height:1.4; }
.event-venue-subtitle { display:block; font-family:var(--font-display); font-size:clamp(17px,4.3vw,21px); font-style:italic; line-height:1.5; color:var(--gold); margin-top:7px; }
.event-address { display:block; max-width:300px; font-size:clamp(12px,3vw,15px); line-height:1.8; margin:8px auto 0; }
.event-actions { display:flex; align-items:center; justify-content:center; flex-direction:column; gap:11px; margin-top:26px; }
.map-link,.action-link { display:inline-flex; justify-content:center; align-items:center; gap:8px; width:100%; max-width:230px; min-height:44px; padding:11px 12px; text-decoration:none; border:1px solid color-mix(in srgb,var(--gold) 65%,transparent); background:color-mix(in srgb,var(--oxblood) 80%,transparent); font-family:var(--font-label); font-size:11px; letter-spacing:.1em; text-transform:uppercase; }
.map-link { width:auto; max-width:100%; padding:9px 15px; }
.event-venue-art { display:block; width:100%; max-width:270px; height:auto; object-fit:contain; margin:0 auto 24px; }
.map-link:hover,.action-link:hover { background:var(--crimson); }
.gifts-section { position:relative; text-align:center; background:var(--oxblood); margin-top:0; }
.hands-image { display:block; width:100%; height:auto; mask-image:linear-gradient(180deg,transparent 0%,var(--candle) 12%,var(--candle) 100%); -webkit-mask-image:linear-gradient(180deg,transparent 0%,var(--candle) 12%,var(--candle) 100%); }
.gift-copy { position:absolute; top:12%; left:19%; right:19%; }
.gift-copy h2 { font-family:var(--font-display); font-size:clamp(27px,7vw,39px); line-height:1.4; margin:13px auto 0; text-shadow:0 2px 8px var(--oxblood); }
.gift-copy .eyebrow { font-size:11px; }
.gift-note:empty { display:none; }
.personal-invitation { text-align:center; padding:16px 14% 55px; background:var(--oxblood); }
.personal-invitation p { font-family:var(--font-display); font-size:clamp(24px,6vw,31px); line-height:1.55; max-width:370px; margin:auto; }
.rsvp-section { padding:55px 12%; text-align:center; background:var(--oxblood); }
.rsvp-content h2 { font-family:var(--font-display); font-size:38px; }
.rsvp-name { margin-top:24px; font-family:var(--font-display); font-size:29px; }
.rsvp-number { color:var(--gold); }
.rsvp-actions { display:flex; justify-content:center; gap:12px; margin-top:20px; }
.rsvp-contact { margin-top:35px; }
.dua { text-align:center; background:var(--night); padding:65px 13% 75px; }
.dua-arabic-monogram {
  --heart-part-1-light:#fff9e6;
  --heart-part-1:#fff0d0;
  --heart-part-1-shade:#eacb93;
  --heart-part-2-light:#f8dc99;
  --heart-part-2:#dba062;
  --heart-part-2-shade:#aa6c2a;
  display:block; width:clamp(126px,37vw,180px); max-width:100%; height:auto;
  aspect-ratio:911.7 / 804.7; margin:0 auto 28px; transform-origin:center;
}
.dua-arabic-monogram .heart-stop-1-light { stop-color:var(--heart-part-1-light); }
.dua-arabic-monogram .heart-stop-1-mid { stop-color:var(--heart-part-1); }
.dua-arabic-monogram .heart-stop-1-shade { stop-color:var(--heart-part-1-shade); }
.dua-arabic-monogram .heart-stop-2-light { stop-color:var(--heart-part-2-light); }
.dua-arabic-monogram .heart-stop-2-mid { stop-color:var(--heart-part-2); }
.dua-arabic-monogram .heart-stop-2-shade { stop-color:var(--heart-part-2-shade); }
.dua-content.is-visible .dua-arabic-monogram { animation:dua-heartbeat 3s ease-in-out infinite; }
@keyframes dua-heartbeat { 0%,38%,100% { transform:scale(1); } 12% { transform:scale(1.055); } 20% { transform:scale(1); } 29% { transform:scale(1.035); } }
@media(prefers-reduced-motion:reduce) { .dua-content.is-visible .dua-arabic-monogram { animation:none; transform:none; } }
.dua-prayer { font-family:var(--font-arabic); font-size:clamp(27px,6.5vw,35px); line-height:2; color:var(--gold); max-width:440px; margin:auto; }
.dua-translation { font-size:clamp(14px,3.5vw,18px); line-height:1.9; max-width:360px; margin:23px auto 0; }
.dua-message { font-family:var(--font-arabic); font-size:34px; color:var(--gold); margin-top:17px; }
.celebration { position:relative; isolation:isolate; min-height:620px; aspect-ratio:9/16; padding:32px 13% 112px; display:grid; place-items:center; text-align:center; background:var(--oxblood) var(--blessings-bg) center/cover no-repeat; }
.celebration-copy { position:relative; z-index:2; width:100%; }
.closing-monogram { display:block; width:clamp(150px,40vw,220px); max-width:100%; height:auto; margin:25px auto; }
.celebration-message { font-family:var(--font-display); font-size:clamp(28px,7vw,40px); line-height:1.45; max-width:365px; margin:auto; }
.celebration-signoff { white-space:pre-line; margin-top:24px; font-family:var(--font-label); font-size:14px; letter-spacing:.08em; color:var(--gold); }
@media(min-width:600px) and (max-height:800px) {
  .hero-content { top:22%; }
  .hero-names { font-size:66px; line-height:1; margin:8px auto 10px; }
  .hero-family { margin-top:8px; }
}
@media(max-width:380px) {
  .hero-content { left:13%; right:13%; top:29%; }
  .hero-names { font-size:44px; }
  .hero-family { font-size:10px; }
  .formal-content { width:72%; }
  .event-section { padding-left:4%; padding-right:4%; }
  .event-card { padding-left:11%; padding-right:11%; }
  .event-address { font-size:12px; }
  .gift-copy { top:11%; left:18%; right:18%; }
  .gift-copy h2 { font-size:27px; }
  .gift-copy .eyebrow { font-size:10px; letter-spacing:.11em; }
}


.event-frame { display:none; }

/* Subtle textile layers retain the original background sizing. */
.verse-section,.date-section { position:relative; isolation:isolate; background:var(--oxblood); }
.verse-section::before,.date-section::before,.dua::before { content:''; position:absolute; inset:0; z-index:0; pointer-events:none; background-position:center; background-size:cover; background-repeat:no-repeat; }
.verse-section::before { background-image:var(--verse-bg); opacity:.3; }
.date-section::before { background-image:var(--scratch-bg); background-size:100% 100%; opacity:.28; }
.verse-content,.date-section > *,.dua-content { position:relative; z-index:1; }
.dua { position:relative; isolation:isolate; }
.dua::before { background-image:var(--verse-bg); opacity:.22; }