/* برق 360 — المشاهد الـ3D في الصفحة الرئيسية (مع assets/js/site3d.js) */
#gl3d { position: fixed; inset: 0; width: 100vw; height: 100vh; z-index: 0; display: block; pointer-events: none;
  opacity: 0; transition: opacity .7s ease; }
#gl3d.on { opacity: 1; }
main, footer { position: relative; z-index: 1; }

/* البطل: الكانفاس القديم اتشال — الخلفية شفافة عشان المشهد يبان من وراها */
.hero.hero-cine.hero-3d, .page-hero { background: transparent; }
.page-hero .hero-inner { padding-top: 46vh; }
@media (max-width: 700px) { .page-hero .hero-inner { padding-top: 36vh; } }
.hero-3d .hero-inner { padding-top: 26vh; }
.hero-3d h1 { line-height: 1.15; padding-bottom: .06em; position: relative; text-shadow: 0 2px 24px rgba(0,0,0,.7); }
.hero-3d h1 strong, .hero-3d h1 strong .wi { text-shadow: none; filter: drop-shadow(0 2px 14px rgba(0,0,0,.6)); }
@media (max-width: 700px) { .hero-3d .hero-inner { padding-top: 22vh; } }

/* مشهد الموبايل والكرة: أقسام شفافة طويلة، الكلام على جنب والـ3D بيتحرك ورا */
.scene3d { min-height: 150vh; background: transparent; display: flex; align-items: flex-start; padding-top: 22vh; }
.scene3d .wrap { width: 100%; }
.scene3d-copy { max-width: 1180px; }
.scene3d-copy > * { max-width: 520px; }
html[dir="rtl"] .scene3d-copy > * { margin-inline-start: 0; }
.scene3d h2 { font-size: clamp(34px, 5vw, 64px); line-height: 1.12; color: #fff; text-shadow: 0 10px 50px rgba(0,0,0,.7); margin: 10px 0 16px; }
.scene3d .muted { color: #cbd5e1; font-size: clamp(16px, 1.5vw, 19px); line-height: 1.75; }
.scene3d-list { list-style: none; padding: 0; margin: 22px 0 26px; display: grid; gap: 10px; }
.scene3d-list li { color: #e2e8f0; font-weight: 500; }
.scene3d-list li::before { content: '⚡'; margin-inline-end: 8px; }
.scene3d-center { text-align: center; min-height: 170vh; }
.scene3d-center .wrap > * { margin-inline: auto; max-width: 760px; }
@media (max-width: 700px) { .scene3d { padding-top: 12vh; min-height: 160vh; } }

/* الإشعارات فوق الكرة */
.chip3d { position: fixed; z-index: 3; display: flex; align-items: center; gap: 9px; padding: 11px 17px; border-radius: 999px; font-size: 14px; font-weight: 700;
  background: rgba(8,12,22,.74); border: 1px solid rgba(160,190,255,.2); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); color: #eef3ff;
  opacity: 0; pointer-events: none; white-space: nowrap; box-shadow: 0 12px 34px rgba(0,0,0,.45); }
.chip3d i { width: 20px; height: 20px; border-radius: 50%; display: inline-grid; place-items: center; font-style: normal; font-size: 11px; background: #16a34a; color: #fff; }
.chip3d.b i { background: #2563EB; } .chip3d.y i { background: #d97706; }
@media (max-width: 640px) { .chip3d { font-size: 12px; padding: 8px 12px; } }

/* معرض الشاشات بالعرض */
.crm3d { padding: 0; }
.crm3d .pin3d { height: 100vh; display: flex; flex-direction: column; justify-content: center; gap: 8px; overflow: hidden; padding-top: 70px; }
.crm3d h2 { font-size: clamp(28px, 3.8vw, 48px); margin: 8px 0 18px; opacity: 1; filter: none; }
.gal3d { display: flex; gap: 28px; padding: 0 clamp(20px, 5vw, 64px); width: max-content; will-change: transform; }
.card3d { width: min(56vw, 520px, calc((100vh - 260px) * 1.6)); flex: none; border-radius: 22px; overflow: hidden; position: relative; display: block; text-decoration: none; color: #fff;
  border: 1px solid rgba(140,175,255,.16); background: #070b16; box-shadow: 0 30px 80px rgba(0,0,0,.55); transition: transform .35s ease, border-color .35s; }
.card3d:hover { transform: translateY(-6px); border-color: rgba(140,175,255,.45); }
.card3d img { width: 100%; height: auto; display: block; aspect-ratio: 16/10; object-fit: cover; object-position: top; }
.card3d .cap { position: absolute; inset-inline: 0; bottom: 0; padding: 60px 26px 22px; background: linear-gradient(transparent, rgba(3,5,11,.95)); display: grid; gap: 4px; }
.card3d .cap b { color: #93C5FD; font-size: 13px; }
.card3d .cap strong { font-size: clamp(20px, 2.2vw, 28px); }
.card3d .cap em { font-style: normal; color: #94a3b8; font-size: 15px; }
@media (max-width: 640px) { .card3d { width: 84vw; } }

@media (prefers-reduced-motion: reduce) { #gl3d { transition: none; } }
.page-hero.page-hero-sm .hero-inner { padding-top: 54vh; }