/* حيط الترحيب — شاشة العرض (الستيج + شاشة المعاينة) */
@property --s { syntax: '<length>'; inherits: true; initial-value: 100px; }
:root { color-scheme: dark; --ease: cubic-bezier(.55, 0, .2, 1); }
html, body { margin: 0; height: 100%; overflow: hidden; background: #000; }
body.nocur { cursor: none; }
#root { position: absolute; left: 0; top: 0; overflow: hidden; transform-origin: 0 0; background: var(--bgc, #05070d);
  font-family: "Tajawal", system-ui, sans-serif; color: #fff; }

/* ---------- الخلفية ---------- */
.bgl { position: absolute; inset: 0; pointer-events: none; }
#bgc { width: 100%; height: 100%; display: block; }
#bgImg, #bgVid { width: 100%; height: 100%; object-fit: cover; display: none; }
#dim { background: #000; opacity: 0; }
#noise { opacity: .05; mix-blend-mode: overlay; background-size: 160px 160px; }
#vig { background: radial-gradient(ellipse at center, transparent 45%, rgba(0, 0, 0, .9) 100%); }
canvas.fx { position: absolute; inset: 0; pointer-events: none; }

/* ---------- الضيوف ---------- */
#wall { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.gc { position: absolute; left: 0; top: 0; width: calc(var(--s) * var(--kx)); height: calc(var(--s) * var(--ky));
  transition: transform 1.25s var(--ease), --s 1.25s var(--ease), opacity .7s; will-change: transform; --fa: calc(var(--s) * var(--fam, .035)); }
.gc.hide { opacity: 0; transition: none; }
.gc .fl { width: 100%; height: 100%; }
body.float .gc .fl { animation: gwFl var(--fd, 7s) ease-in-out var(--fdl, 0s) infinite alternate; }
@keyframes gwFl {
  from { transform: translate(calc(var(--fa) * -1), calc(var(--fa) * .7)) rotate(calc(var(--fr) * -1)); }
  to { transform: translate(var(--fa), calc(var(--fa) * -.8)) rotate(var(--fr)); }
}
.gc .cd { width: 100%; height: 100%; box-sizing: border-box; transition: transform .7s var(--ease), filter .6s; }
.gc.out .cd { transform: scale(.05); opacity: 0; transition: transform .8s var(--ease), opacity .8s; }
.gc.new .cd { animation: gwNew 2.2s ease-out 3; }
@keyframes gwNew { 0%, 100% { filter: none; } 30% { filter: drop-shadow(0 0 calc(var(--s) * .18) var(--ac)) brightness(1.18); } }
.gc .ph { overflow: hidden; box-sizing: border-box; background: #222; flex: none; }
.gc .ph img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gc .nm { font-family: var(--nf); color: var(--nc); font-size: calc(var(--s) * var(--nk) * var(--ns)); font-weight: 600;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: center; line-height: 1.3; max-width: 100%; unicode-bidi: plaintext; }
.nonames .gc .nm { display: none; }

/* 1) دائري */
.st-circle .cd { display: flex; flex-direction: column; align-items: center; }
.st-circle .ph { width: var(--s); height: var(--s); border-radius: 50%; border: calc(var(--s) * .035) solid var(--ac);
  box-shadow: 0 0 calc(var(--s) * .14) var(--acg), 0 calc(var(--s) * .05) calc(var(--s) * .14) rgba(0, 0, 0, .55); }
.st-circle .nm { margin-top: calc(var(--s) * .07); text-shadow: 0 0 .4em rgba(0, 0, 0, .9), 0 0 .9em rgba(0, 0, 0, .6); }

/* 2) كارت */
.st-card .cd { display: flex; flex-direction: column; padding: calc(var(--s) * .06); border-radius: calc(var(--s) * .09);
  background: linear-gradient(165deg, var(--cb2), var(--cb)); box-shadow: 0 calc(var(--s) * .05) calc(var(--s) * .16) rgba(0, 0, 0, .55), inset 0 0 0 calc(var(--s) * .012) var(--acg); }
.st-card .ph { width: 100%; aspect-ratio: 1; border-radius: calc(var(--s) * .055); }
.st-card .nm { flex: 1; display: flex; align-items: center; justify-content: center; position: relative; padding-top: calc(var(--s) * .02); }
.st-card .nm::before { content: ""; position: absolute; top: calc(var(--s) * .035); left: 38%; right: 38%; height: calc(var(--s) * .012); border-radius: 9px; background: var(--ac); }
.st-card .nm span { overflow: hidden; text-overflow: ellipsis; }

/* 3) بولارويد */
.st-polaroid .cd { display: flex; flex-direction: column; padding: calc(var(--s) * .065) calc(var(--s) * .065) 0; background: #faf7f0;
  border-radius: calc(var(--s) * .015); box-shadow: 0 calc(var(--s) * .06) calc(var(--s) * .18) rgba(0, 0, 0, .6); }
.st-polaroid .ph { width: 100%; aspect-ratio: 1; border-radius: 2px; }
.st-polaroid .nm { flex: 1; display: flex; align-items: center; justify-content: center; color: #2b2622; }
.st-polaroid .nm span { overflow: hidden; text-overflow: ellipsis; }

/* 4) زجاجي أفقي */
.st-glass .cd { display: flex; align-items: center; gap: calc(var(--s) * .1); padding: calc(var(--s) * .055); border-radius: 999px;
  background: linear-gradient(90deg, var(--cbg), var(--cbg2)); border: calc(var(--s) * .01) solid var(--acg);
  box-shadow: 0 calc(var(--s) * .04) calc(var(--s) * .14) rgba(0, 0, 0, .45); }
.st-glass .ph { height: 100%; aspect-ratio: 1; border-radius: 50%; border: calc(var(--s) * .02) solid var(--ac); }
.st-glass .nm { flex: 1; text-align: start; padding-inline-end: calc(var(--s) * .12); }
.nonames .st-glass .cd { padding: 0; background: none; border: 0; box-shadow: none; justify-content: center; }

/* 5) سداسي نيون */
.st-hex .cd { display: flex; flex-direction: column; align-items: center; }
.st-hex .hx { width: var(--s); height: calc(var(--s) * 1.1547); filter: drop-shadow(0 0 calc(var(--s) * .07) var(--ac)) drop-shadow(0 calc(var(--s) * .04) calc(var(--s) * .08) rgba(0, 0, 0, .6)); }
.st-hex .hb { width: 100%; height: 100%; background: linear-gradient(160deg, var(--ac), var(--ac2)); display: grid; place-items: center;
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); }
.st-hex .ph { width: 90%; height: 90%; clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); }
.st-hex .nm { margin-top: calc(var(--s) * .05); text-shadow: 0 0 .35em var(--ac), 0 0 .8em rgba(0, 0, 0, .8); }

/* ---------- الدائرة بالنص ---------- */
#center { position: absolute; inset: 0; z-index: 4; pointer-events: none; }
.coinWrap { position: absolute; width: var(--D); height: var(--D); left: calc(var(--cx) - var(--D) / 2); top: calc(var(--cy) - var(--D) / 2); perspective: calc(var(--D) * 3.2); }
.halo { position: absolute; inset: calc(var(--D) * -.16); border-radius: 50%; opacity: var(--hg);
  background: radial-gradient(circle, transparent 47%, var(--rcg) 57%, transparent 70%); }
.breath .halo { animation: gwBreath 4.8s ease-in-out infinite; }
@keyframes gwBreath { 50% { opacity: calc(var(--hg) * .45); transform: scale(1.04); } }
.swayer { position: absolute; inset: 0; transform-style: preserve-3d; }
.sway .swayer { animation: gwSway 11s ease-in-out infinite; }
@keyframes gwSway { 0%, 100% { transform: rotateY(-9deg) rotateX(3deg); } 50% { transform: rotateY(9deg) rotateX(-3deg); } }
.coin { position: absolute; inset: 0; transform-style: preserve-3d; transition: transform var(--fdur, 1.3s) cubic-bezier(.65, 0, .25, 1); }
.face { position: absolute; inset: 0; border-radius: 50%; backface-visibility: hidden; -webkit-backface-visibility: hidden; overflow: hidden;
  box-sizing: border-box; border: var(--rw) solid var(--rc); display: grid; place-items: center;
  box-shadow: 0 0 calc(var(--D) * .07 * var(--rgl)) var(--rcg), inset 0 0 calc(var(--D) * .05 * var(--rgl)) var(--rcg2); }
.face.front { background: var(--cf); }
.face.back { background: #111; transform: rotateY(180deg); }
.axis-x .face.back { transform: rotateX(180deg); }
.edge { position: absolute; inset: 0; border-radius: 50%; border: var(--rw) solid var(--rc); filter: brightness(.55); transform: translateZ(calc(var(--D) * -.012)); }
.face.front img { max-width: var(--lf); max-height: var(--lf); object-fit: contain; display: none;
  filter: brightness(var(--lb)) drop-shadow(0 0 calc(var(--D) * .02 * var(--lg)) var(--lgc)) drop-shadow(0 0 calc(var(--D) * .06 * var(--lg)) var(--lgc2)); }
.face.front .ltxt { font-family: var(--lfont); font-size: var(--lts); font-weight: 700; color: var(--wc, #fff); white-space: nowrap; line-height: 1;
  filter: brightness(var(--lb)); text-shadow: 0 0 calc(var(--D) * .03 * var(--lg)) var(--lgc), 0 0 calc(var(--D) * .08 * var(--lg)) var(--lgc2); }
.face.back img { width: 100%; height: 100%; object-fit: cover; }
.face.back .bn { position: absolute; left: 0; right: 0; bottom: 0; padding: 14% 12% 13%; text-align: center; font-family: var(--wf); font-weight: 700;
  font-size: calc(var(--D) * .085); color: #fff; background: linear-gradient(transparent, rgba(0, 0, 0, .75)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: none; }
.backname .face.back .bn { display: block; }

.wtxt, .gtxt { position: absolute; left: 0; right: 0; top: var(--ty); text-align: center; transition: opacity .7s, transform .7s var(--ease); white-space: nowrap; }
.wtxt .l1, .gtxt .l2 { font-family: var(--wf); font-size: var(--w1); color: var(--wc); line-height: 1.25; font-weight: 700;
  text-shadow: 0 0 calc(var(--w1) * .25 * var(--wg)) var(--wcg), 0 0 calc(var(--w1) * .6 * var(--wg)) var(--wcg2), 0 .04em .12em rgba(0, 0, 0, .5); }
.wtxt .l2, .gtxt .l1 { font-family: var(--wf); font-size: var(--w2); color: var(--wc); opacity: .85; line-height: 1.3; letter-spacing: .06em;
  text-shadow: 0 0 calc(var(--w2) * .3 * var(--wg)) var(--wcg); }
.gtxt { opacity: 0; transform: translateY(calc(var(--w1) * .4)); }
.greeting .gtxt { opacity: 1; transform: none; }
.greeting .wtxt { opacity: 0; transform: translateY(calc(var(--w1) * -.3)); }
.nowelcome .wtxt { display: none; }

/* طيران الكارت من الدائرة لمكانه */
#fly { position: absolute; inset: 0; z-index: 5; pointer-events: none; }
#fly .gc { transition: transform var(--flyd, 1.3s) cubic-bezier(.5, 0, .15, 1), --s var(--flyd, 1.3s) cubic-bezier(.5, 0, .15, 1); }

.credit { position: absolute; left: 0; right: 0; bottom: calc(var(--U) * .018); z-index: 6; text-align: center; white-space: nowrap; direction: ltr; pointer-events: none;
  font-size: calc(var(--U) * .016 + 2px); color: rgba(240, 240, 250, .6); text-shadow: 0 0 .7em rgba(0, 0, 0, .8); transition: opacity .6s; }
.credit .p { font: 500 .72em "Tajawal", system-ui, sans-serif; letter-spacing: .32em; text-transform: uppercase; opacity: .75; margin-right: .6em; }
.credit .n { font: 600 1em "Cinzel", "Times New Roman", serif; letter-spacing: .14em; color: rgba(255, 255, 255, .88); }
.nocredit .credit { opacity: 0; }

#info { position: fixed; top: 10px; left: 10px; z-index: 99; font: 12px/1.6 ui-monospace, Menlo, monospace; color: #cfe; background: rgba(0, 0, 0, .7);
  padding: 8px 12px; border-radius: 8px; white-space: pre; direction: ltr; display: none; }
#info.on { display: block; }
#tap { position: fixed; inset: 0; z-index: 98; display: none; place-items: center; background: rgba(0, 0, 0, .6); color: #fff; font: 600 22px Tajawal, sans-serif; cursor: pointer; }

@media (prefers-reduced-motion: reduce) { .sway .swayer, .breath .halo, body.float .gc .fl { animation: none; } }