/* ---------- السداسي اللي بيلف (صفحة التجربة hex.html) ---------- */
.hex-stage {
  --w:360px;
  --h:calc(var(--w) / 1.586);
  position:relative;
  height:calc(var(--h) + 130px);
  margin:-6px 0 -34px;
  perspective:calc(var(--w) * 3.4);
  perspective-origin:50% 45%;
  overflow:hidden;
  touch-action:pan-y;              /* السحب يمين وشمال للسداسي، وفوق وتحت للصفحة */
  user-select:none; -webkit-user-select:none;
  -webkit-tap-highlight-color:transparent;
  cursor:grab;
}
.hex-stage.grabbing { cursor:grabbing; }

.hex-prism {
  position:absolute; left:50%; top:56px;
  width:var(--w); height:var(--h); margin-left:calc(var(--w) / -2);
  transform-style:preserve-3d;
  will-change:transform;
}

.hex-face {
  position:absolute; inset:0;
  backface-visibility:hidden; -webkit-backface-visibility:hidden;
  will-change:transform;
}
.hex-face .card { width:100%; }
.hex-face img { -webkit-user-drag:none; user-select:none; pointer-events:none; }

/* تغميق الوشوش اللي على الجنب: طبقة لوحدها بتتغير شفافيتها بس (من غير إعادة رسم الكارت) */
.hex-face .shade {
  position:absolute; inset:0; z-index:6; border-radius:22px;
  background:#000; opacity:0; pointer-events:none;
  will-change:opacity;
}
.hex-face .stamps { z-index:7; opacity:0; transform:scale(.85); transition:opacity .2s ease, transform .2s ease; }
/* الختم يظهر بس على الكارت اللي في النص، بعد ما اللف يقف */
.hex-stage:not(.moving) .hex-face.front .stamps { opacity:1; transform:none; transition:opacity .35s ease .05s, transform .35s cubic-bezier(.2,1.4,.4,1) .05s; }

/* لمعة الختم بتخلي الوش يترسم تاني مع كل frame جوه الـ 3D، فبنوقفها هنا بس */
.hex-face .stamp::after { animation:none; display:none; }

/* مفيش توهج على الكروت نفسها جوه السداسي (بنسيب الإطار الأبيض بس للكروت اللي بتحتاجه) */
.hex-face .card { box-shadow:none !important; }
.hex-face .card.img.ring,
.hex-face .card.dpt { box-shadow:inset 0 0 0 1px #fff !important; }

/* التوهج: عنصر واحد ثابت ورا الكارت اللي في النص، بينوّر بلون الكارت لما اللف يقف بس */
.hex-glow {
  --gc:#f5004a;
  position:absolute; left:50%; top:56px;
  width:var(--w); height:var(--h); margin-left:calc(var(--w) / -2);
  border-radius:22px; pointer-events:none;
  box-shadow:
    0 26px 60px -18px color-mix(in srgb, var(--gc) 75%, transparent),
    0 0 46px -8px color-mix(in srgb, var(--gc) 55%, transparent);
  opacity:0;
  transition:opacity .15s ease;
  will-change:opacity;
}
.hex-glow.on { opacity:1; transition:opacity .5s ease; }

/* ---------- العنوان: خط القاهرة + بيتكتب حرف حرف + آخر كلمة بلون اللوجو ---------- */
header h1#siteTitle { font-family:"Cairo", system-ui, Tahoma, sans-serif; font-weight:900; min-height:1.4em; }
.t-type { display:inline-block; white-space:nowrap; border-left:3px solid #46f0c8; padding-left:2px; animation:tCaret .8s step-end infinite; }
.t-type.done { border-left-color:transparent; animation:none; transition:border-color .4s ease; }
@keyframes tCaret { 50% { border-left-color:transparent; } }
.t-grad { background:linear-gradient(90deg, #46f0c8, #3b8cf5); -webkit-background-clip:text; background-clip:text; color:transparent; }

/* ---------- زرار التسجيل الثابت تحت الشاشة ---------- */
.sticky-cta {
  position:fixed; z-index:50; left:12px; right:12px;
  bottom:calc(12px + env(safe-area-inset-bottom, 0px));
  max-width:520px; margin:0 auto;
  display:flex; align-items:center; gap:10px;
  padding:9px 9px 9px 14px; border-radius:18px;
  background:rgba(16,16,22,.86);
  -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
  border:1px solid color-mix(in srgb, var(--accent) 45%, transparent);
  box-shadow:0 18px 40px -16px #000, 0 0 34px -14px var(--accent);
  transform:translateY(150%); opacity:0; pointer-events:none; visibility:hidden;
  transition:transform .4s cubic-bezier(.2,.9,.25,1), opacity .3s ease, visibility 0s linear .4s;
}
.sticky-cta.show { transform:none; opacity:1; pointer-events:auto; visibility:visible; transition-delay:0s; }
.sc-info { flex:1; min-width:0; text-align:right; }
.sc-info small { display:block; color:var(--muted); font-size:12px; line-height:1.3; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.sc-code {
  margin-top:3px; border:1px dashed #ffffff40; background:#ffffff0d; color:#fff;
  font:inherit; font-family:ui-monospace, Consolas, monospace; font-size:14px; font-weight:800; letter-spacing:1px;
  padding:3px 10px; border-radius:8px; cursor:pointer; direction:ltr;
}
.sc-code::after { content:"  ⎘"; opacity:.6; font-weight:400; }
.sc-code.done { border-style:solid; border-color:var(--accent); font-family:inherit; letter-spacing:0; }
.sc-code.done::after { content:""; }
.sc-btn {
  flex:0 0 auto; text-decoration:none; white-space:nowrap;
  background:var(--accent); color:var(--on-accent, #fff);
  font-weight:800; font-size:16px; padding:12px 20px; border-radius:13px;
  box-shadow:0 8px 22px -10px var(--accent);
  animation:scPulse 2.6s ease-in-out infinite;
}
@keyframes scPulse { 0%, 100% { transform:scale(1); } 50% { transform:scale(1.04); } }
/* مساحة تحت عشان الزرار الثابت مايغطيش آخر الصفحة */
footer { padding-bottom:110px; }
footer .copyright {
  margin:16px auto 0; padding-top:14px; max-width:320px;
  border-top:1px solid #ffffff14; color:#7d7d8a; font-size:12px;
}

/* ---------- عداد العرض ---------- */
.countdown { display:flex; gap:6px; margin:2px 0 10px; }
.cd-box {
  flex:1 1 0; max-width:70px; text-align:center;
  background:#00000059; border:1px solid #f5004a55; border-radius:11px; padding:6px 2px 5px;
}
.cd-box b { display:block; color:#fff; font-size:21px; font-weight:900; line-height:1.15; font-variant-numeric:tabular-nums; direction:ltr; }
.cd-box span { display:block; color:#c7c7d0; font-size:11px; }
.cd-over { margin:2px 0 10px; color:#f5004a; font-weight:800; }

/* على التليفون: تغيير لون الخلفية أسرع عشان مايبانش تقطيع بعد ما اللف يقف */
@media (pointer:coarse) {
  body::before { transition-duration:.35s; }
}