/* Elyoxe Cards — the approved card (prototype cards.html, 2026-09-23), shared by
   the guest page, the editor preview and the door. Colours arrive as tokens
   set by card.js on the element that holds data-design. */
.ec{
  --ground:#F0EFEB; --surface:#FFFFFF; --text:#3F4B5A; --muted:#6C7887; --accent:#617F99; --names:#5E7C97; --line:rgba(63,75,90,.16);
  --btn:#3F4B5A; --btn-text:#FFFFFF;
  --names-font:"Noto Nastaliq Urdu","Amiri",serif;
  --ec-body:"Tajawal","IBM Plex Sans Arabic",Tahoma,sans-serif;
  --ruqaa:"Aref Ruqaa","Amiri",serif;
  background:var(--ground);color:var(--text);font-family:var(--ec-body);line-height:1.7;
}
.ec *{box-sizing:border-box}
.ec [hidden]{display:none!important}
.ec-poster{color:var(--text);position:relative;aspect-ratio:9/16;max-width:100%;background-size:cover;background-position:center;container-type:inline-size;overflow:hidden;background-color:var(--ground)}
.ec-scrim,.ec-fx,.ec-sheen{position:absolute;inset:0;pointer-events:none}
.ec-fx{width:100%;height:100%}
.ec-frame{position:absolute;inset:3.6cqw;border:1px solid rgba(255,255,255,.55);pointer-events:none}
.ec-frame::after{content:"";position:absolute;inset:1.4cqw;border:1px solid rgba(255,255,255,.35)}
.ec-ghost{position:absolute;top:6%;left:0;right:0;text-align:center;font-family:var(--ruqaa);font-size:52cqw;line-height:1;color:rgba(255,255,255,.08);pointer-events:none}
.ec-sway{position:absolute;left:0;right:0;bottom:0;height:34%;background-size:100% auto;background-position:center bottom;background-repeat:no-repeat;transform-origin:50% 100%;pointer-events:none;
  -webkit-mask-image:linear-gradient(transparent,#000 30%);mask-image:linear-gradient(transparent,#000 30%);animation:ec-sway 7s ease-in-out infinite}
@keyframes ec-sway{0%,100%{transform:skewX(0deg)}30%{transform:skewX(.9deg)}70%{transform:skewX(-.7deg)}}
.ec-wm{position:absolute;left:0;right:0;font-family:var(--ruqaa);font-size:11cqw;line-height:1;white-space:nowrap;text-align:center;color:rgba(80,80,80,.09);pointer-events:none;overflow:hidden}
.ec-wm.t{top:3%}.ec-wm.b{bottom:3%}
.ec-sheen{background:linear-gradient(105deg,transparent 40%,rgba(255,244,214,.13) 50%,transparent 60%);background-size:260% 100%;animation:ec-sheen 7s ease-in-out infinite}
@keyframes ec-sheen{from{background-position:130% 0}to{background-position:-130% 0}}

.ec-pc{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;text-align:center;padding:var(--pad-top) var(--pad-right) var(--pad-bottom) var(--pad-left)}
.ec-pc > *{margin:0;flex-shrink:0}
.ec-pc{overflow:hidden}
.ec-guest{font-size:calc(3.4cqw * var(--fit,1));color:var(--muted);letter-spacing:.02em}
.ec-guest b{font-weight:500;color:var(--text)}
.ec-title{font-family:var(--ruqaa);font-size:calc(17cqw * var(--fit,1));line-height:1.2;color:var(--names);margin-top:1cqw}
.ec-bless{font-family:var(--ruqaa);font-size:calc(5.2cqw * var(--fit,1));line-height:1.6;color:var(--names);margin-top:1.5cqw}
.ec-poem{font-weight:300;font-size:calc(4.9cqw * var(--fit,1));line-height:1.75;margin-top:3cqw;white-space:pre-line}
.ec-host{font-weight:300;font-size:calc(4.6cqw * var(--fit,1));line-height:1.8;margin-top:3cqw;max-width:78cqw;text-wrap:balance}
.ec-mono{position:relative;width:100%;margin-top:2cqw;color:var(--names);font-family:var(--names-font)}
.ec-mono .g{display:block;font-size:calc(var(--g-size,17cqw) * var(--fit,1));line-height:1.9;font-weight:var(--names-weight,600)}
.ec-mono .b{position:absolute;top:-1cqw;inset-inline-end:17%;font-size:calc(10.5cqw * var(--fit,1));line-height:1.9;opacity:.92}
.ec-mono.solo .b{display:none}
/* the couple, stacked: groom · «و» · bride — any font, no overlap (the absolute monogram collided with wide fonts) */
.ec-mono.couple{margin-bottom:2.2cqw}
.ec-mono.couple .g{line-height:1.45}
.ec-mono.couple .w{display:block;font-style:normal;font-family:var(--ec-body);font-weight:300;font-size:calc(5.2cqw * var(--fit,1));line-height:1;opacity:.75;margin:.4cqw 0}
.ec-mono.couple .b{position:static;display:block;font-size:calc(var(--g-size,17cqw) * .82 * var(--fit,1));line-height:1.45;opacity:1}
.ec-mono.couple.mid .b{font-size:calc(var(--g-size,17cqw) * .7 * var(--fit,1))}
.ec-mono.couple.long .b{font-size:calc(var(--g-size,17cqw) * .52 * var(--fit,1));line-height:1.6}
.ec-mono.solo .g{font-size:calc(var(--g-size,17cqw) * 1.3 * var(--fit,1))}
.ec-mono.mid .g{font-size:calc(var(--g-size,17cqw) * .85 * var(--fit,1))}
.ec-mono.long .g{font-size:calc(var(--g-size,17cqw) * .6 * var(--fit,1));line-height:1.7}
.ec-title.long{font-size:calc(9.5cqw * var(--fit,1));line-height:1.45}
.ec-sub{font-weight:400;font-size:calc(4.4cqw * var(--fit,1));line-height:1.7;margin-top:1cqw;color:var(--text);max-width:80cqw;text-wrap:balance}
.ec-wash{position:absolute;inset:0;pointer-events:none}
.ec-frame.gold{border-color:rgba(205,174,106,.7)}
.ec-frame.gold::after{border-color:rgba(205,174,106,.35)}
.ec-info .col > span{font-size:inherit}
.ec-info svg{width:calc(5.8cqw * var(--fit,1));height:calc(5.8cqw * var(--fit,1))}
.ec-mono.veil .b{font-size:calc(5.6cqw * var(--fit,1));top:3cqw;inset-inline-end:10%;font-family:var(--ec-body);font-weight:300;letter-spacing:.02em}
.ec-latin{font-family:"Alexandria",sans-serif;font-weight:200;font-size:calc(3.5cqw * var(--fit,1));letter-spacing:.34em;margin-top:.5cqw;direction:ltr}
.ec-will{font-weight:300;font-size:calc(4.6cqw * var(--fit,1));margin-top:2.4cqw}
.ec-info{display:grid;grid-template-columns:1fr auto 1fr auto 1fr;align-items:center;gap:2.4cqw;width:100%;margin-top:4.5cqw;font-size:calc(3.6cqw * var(--fit,1));line-height:1.6}
.ec-info .col{display:grid;justify-items:center;gap:1.2cqw}
.ec-info svg{stroke:var(--accent);fill:none;stroke-width:1.3}
.ec-info .vr{width:1px;height:calc(17cqw * var(--fit,1));background:linear-gradient(transparent,var(--accent),transparent)}
.ec-info .num{font-variant-numeric:tabular-nums;direction:ltr;unicode-bidi:isolate}
.ec-close{font-weight:400;font-size:calc(5.4cqw * var(--fit,1));margin-top:4cqw}
.ec-close.ruq{font-family:var(--ruqaa);font-size:calc(6cqw * var(--fit,1));color:var(--names)}
.ec-spacer{flex:1}
/* the Emirati men's wedding card */
.ec-afrah{font-family:var(--names-font);font-weight:var(--names-weight,400);color:var(--names);line-height:1.35}
.ec-afrah span{display:block;font-size:calc(6.2cqw * var(--fit,1));margin-bottom:calc(2.6cqw * var(--fit,1))}
.ec-afrah b{display:block;font-weight:inherit;font-size:calc(8.4cqw * var(--fit,1));text-wrap:balance}
.ec-honor{font-weight:400;font-size:calc(5cqw * var(--fit,1));margin-top:3.4cqw}
.ec-fams{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:2.4cqw;align-items:center;width:100%;margin-top:2.2cqw;font-size:calc(3.9cqw * var(--fit,1) * var(--fams,1));line-height:1.6}
.ec-fams.one{grid-template-columns:1fr}
.ec-fams span{display:block;color:var(--muted)}
.ec-fams b{display:block;font-weight:500;white-space:nowrap}
.ec-fams.wrap b{white-space:normal;text-wrap:balance}
.ec-fams i{font-style:normal;color:var(--accent);font-size:1.2em}
.ec-invite{font-weight:400;font-size:calc(4.4cqw * var(--fit,1));margin-top:3.6cqw}
.ec-kareema{font-size:calc(4.2cqw * var(--fit,1));line-height:1.7;margin-top:.5cqw}
.ec-kareema span{display:block;color:var(--muted)}
.ec-kareema b{display:block;font-weight:500}
.ec-notes{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:1.4cqw 2.4cqw;margin-top:3.2cqw;font-size:calc(3.3cqw * var(--fit,1));color:var(--muted);letter-spacing:.02em}
.ec-notes i{width:1cqw;height:1cqw;border-radius:50%;background:var(--accent);opacity:.7}
.ec-foil .ec-mono,.ec-foil .ec-title{background:linear-gradient(100deg,#A9864E 0%,#E8D39C 22%,#B48F55 40%,#F3E4B8 55%,#A9864E 75%,#D8BC80 100%);background-size:260% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:ec-foil 6s linear infinite}
.ec-foil .ec-mono .g,.ec-foil .ec-mono .b{color:transparent}
@keyframes ec-foil{from{background-position:0% 0}to{background-position:-260% 0}}

/* الافتتاح: تنكشف الأسماء من اليمين كأنها تُكتب */
.ec-play .ec-mono .g,.ec-play .ec-mono .b,.ec-play .ec-title{animation:ec-write 1.6s cubic-bezier(.55,.1,.2,1) both}
.ec-play .ec-mono .b{animation-delay:.7s}
.ec-play .ec-afrah,.ec-play .ec-honor,.ec-play .ec-fams,.ec-play .ec-invite,.ec-play .ec-kareema,.ec-play .ec-notes,.ec-play .ec-sub,.ec-play .ec-host,.ec-play .ec-poem,.ec-play .ec-bless,.ec-play .ec-latin,.ec-play .ec-will,.ec-play .ec-info,.ec-play .ec-close,.ec-play .ec-guest{animation:ec-rise .9s ease both}
.ec-play .ec-poem,.ec-play .ec-bless,.ec-play .ec-honor{animation-delay:.15s}.ec-play .ec-fams{animation-delay:.3s}.ec-play .ec-invite{animation-delay:.45s}.ec-play .ec-kareema{animation-delay:1.2s}.ec-play .ec-host{animation-delay:.3s}
.ec-play .ec-latin{animation-delay:1.3s}.ec-play .ec-will{animation-delay:1.45s}.ec-play .ec-info{animation-delay:1.6s}.ec-play .ec-close,.ec-play .ec-notes{animation-delay:1.8s}
.ec-play .ec-info .vr{animation:ec-grow 1.2s ease 1.7s both}
.ec-play .ec-ghost{animation:ec-settle 2.4s ease both}
.ec-play .ec-foil .ec-mono{animation:ec-foil 6s linear infinite}
@keyframes ec-write{from{clip-path:inset(0 0 0 100%)}to{clip-path:inset(0 0 0 0)}}
@keyframes ec-rise{from{opacity:0;transform:translateY(1.6cqw)}to{opacity:1;transform:none}}
@keyframes ec-settle{from{opacity:0;transform:scale(1.08)}to{opacity:1;transform:none}}
@keyframes ec-grow{from{transform:scaleY(0)}to{transform:scaleY(1)}}

@media (prefers-reduced-motion:reduce){
  .ec-play *,.ec-sway,.ec-sheen,.ec-foil .ec-mono{animation:none!important}
}

/* the Emirati men's card stays still: the text fades in once, nothing writes itself or sparkles */
.ec-calm.ec-play .ec-mono .g,.ec-calm.ec-play .ec-mono .b,.ec-calm.ec-play .ec-title{animation:ec-rise .9s ease both}
.ec-calm.ec-play .ec-info .vr{animation:none}
.ec-calm.ec-foil .ec-mono,.ec-calm.ec-play.ec-foil .ec-mono{animation:none}
.ec-wm.men{font-size:9.6cqw;color:var(--accent);opacity:.32;letter-spacing:-.01em}
.ec-wm.men.t{top:2.4%}.ec-wm.men.b{bottom:2.4%}
.ec-info.big{font-size:calc(4.2cqw * var(--fit,1));line-height:1.55;font-weight:500}
/* double wedding: two grooms side by side, each over «على كريمة السيد/» */
.ec-duo > div{min-width:0}
.ec-duo{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:start;gap:2cqw;width:100%;margin-top:1cqw}
.ec-duo > i{font-style:normal;color:var(--accent);font-family:var(--names-font);font-size:calc(7cqw * var(--fit,1));align-self:center;margin-top:-6cqw}
.ec-duo .ec-mono{margin-top:0}
.ec-duo .ec-mono.duo .g{font-size:calc(var(--g-size,17cqw) * .78 * var(--fit,1) * var(--duo,1));line-height:1.7;white-space:nowrap}
.ec-duo .ec-kareema{font-size:calc(3.6cqw * var(--fit,1))}
.ec-fams.ec-fams-h0{margin-bottom:1cqw}
.ec-play .ec-duo{animation:ec-rise .9s ease .6s both}
/* no lone last word on the short lines (the milka blessing ended on «خير» by itself) */
.ec-title,.ec-bless,.ec-poem,.ec-host,.ec-close,.ec-sub{text-wrap:balance}

/* greeting cards (2026-10-17): few lines, so they sit in the middle; the big line is in the chosen name font */
.ec-greet .ec-pc{justify-content:center}
.ec-greet .ec-spacer{flex:0 0 2cqw}
.ec-greet .ec-title{font-family:var(--names-font);font-weight:var(--names-weight);font-size:calc(15cqw * var(--fit,1));line-height:1.35;margin-top:2cqw}
.ec-greet .ec-title.long{font-size:calc(10.5cqw * var(--fit,1));line-height:1.5}
.ec-greet .ec-bless{font-family:var(--ruqaa);font-size:calc(6.2cqw * var(--fit,1));line-height:1.75;margin-top:3cqw;max-width:80cqw}
.ec-greet .ec-poem{margin-top:3cqw}
.ec-greet .ec-guest{margin-top:5cqw}
.ec-greet .ec-mono{margin-top:1cqw}
.ec-greet .ec-mono .g{font-size:calc(var(--g-size) * .7 * var(--fit,1))}
.ec-greet .ec-close{margin-top:5cqw}