/* برق 360 — طبقة التفاعل: المؤشر، الانتقالات، القايمة، التوهّج، الأرقام، الأزرار، السكرول الأفقي، صفحة 404.
 * بتتحمّل بعد site.css وcompany.css. كل حاجة هنا بتختفي أو بتثبت مع prefers-reduced-motion. */

/* ── ضوضاء فيلم خفيفة ── */
body::after {
  content: ""; position: fixed; inset: -50%; z-index: 90; pointer-events: none; opacity: .05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grain 1.2s steps(6) infinite;
}
@keyframes grain { 0% { transform: translate(0, 0); } 20% { transform: translate(-3%, 2%); } 40% { transform: translate(2%, -3%); } 60% { transform: translate(-2%, -1%); } 80% { transform: translate(3%, 3%); } 100% { transform: translate(0, 0); } }

/* ── توهّج الخلفية حسب القسم ── */
.bg-glow { position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(60vw 50vh at 85% 20%, var(--g1, rgba(37,99,235,.12)), transparent 70%), radial-gradient(50vw 50vh at 10% 90%, var(--g2, rgba(124,58,237,.10)), transparent 70%); }
.bg-glow[data-tone="blue"] { --g1: rgba(37,99,235,.16); --g2: rgba(56,189,248,.08); }
.bg-glow[data-tone="violet"] { --g1: rgba(124,58,237,.16); --g2: rgba(37,99,235,.10); }
.bg-glow[data-tone="cyan"] { --g1: rgba(56,189,248,.14); --g2: rgba(37,99,235,.10); }
.bg-glow[data-tone="green"] { --g1: rgba(34,197,94,.12); --g2: rgba(37,99,235,.08); }
.bg-glow[data-tone="red"] { --g1: rgba(239,68,68,.10); --g2: rgba(124,58,237,.08); }
@property --g1 { syntax: "<color>"; inherits: false; initial-value: transparent; }
@property --g2 { syntax: "<color>"; inherits: false; initial-value: transparent; }
.bg-glow { transition: --g1 1.2s ease, --g2 1.2s ease; }

/* ── المؤشر المخصص ── */
.cursor-dot, .cursor-ring { position: fixed; top: 0; left: 0; z-index: 120; pointer-events: none; border-radius: 50%; opacity: 0; transition: opacity .3s; }
.cursor-on .cursor-dot, .cursor-on .cursor-ring { opacity: 1; }
.cursor-dot { width: 6px; height: 6px; margin: -3px 0 0 -3px; background: #fff; }
.cursor-ring { width: 38px; height: 38px; margin: -19px 0 0 -19px; border: 1.5px solid rgba(147,197,253,.55); display: grid; place-items: center;
  transition: width .35s cubic-bezier(.16,1,.3,1), height .35s cubic-bezier(.16,1,.3,1), margin .35s cubic-bezier(.16,1,.3,1), background .3s, border-color .3s, opacity .3s; }
.cursor-ring span { font: 700 12px/1 'IBM Plex Sans Arabic', 'Plus Jakarta Sans', sans-serif; color: #05070F; opacity: 0; transition: opacity .2s; white-space: nowrap; }
.cursor-ring.is-link { width: 58px; height: 58px; margin: -29px 0 0 -29px; border-color: rgba(147,197,253,.9); background: rgba(59,130,246,.08); }
.cursor-ring.is-label { width: 84px; height: 84px; margin: -42px 0 0 -42px; background: #fff; border-color: #fff; }
.cursor-ring.is-label span { opacity: 1; }
.cursor-ring.is-down { width: 30px; height: 30px; margin: -15px 0 0 -15px; }
.has-cursor .cursor-ring.is-label ~ .cursor-dot { opacity: 0; }

/* ── انتقال الصفحات: ستارة + برق ── */
.pt { position: fixed; inset: 0; z-index: 110; pointer-events: none; display: grid; place-items: center;
  background: radial-gradient(circle at 50% 50%, #1E3A8A 0%, #0B1122 55%, #05070F 100%); clip-path: inset(100% 0 0 0); }
.pt img { width: 90px; height: 90px; opacity: 0; transform: scale(.6); }
.pt.is-covering { pointer-events: all; clip-path: inset(0 0 0 0); transition: clip-path .6s cubic-bezier(.76,0,.24,1); }
.pt.is-covering img { opacity: 1; transform: scale(1); transition: opacity .3s .25s, transform .5s .25s cubic-bezier(.2,.9,.25,1.2); }
.pt.is-revealing { clip-path: inset(0 0 100% 0); transition: clip-path .7s .15s cubic-bezier(.76,0,.24,1); }
.pt.is-revealing img { opacity: 0; transition: opacity .2s; }
.pt.no-anim, .pt.no-anim img { transition: none !important; }

/* ── القايمة: تختفي نازل، وشريط التقدّم ── */
.nav { transition: transform .45s cubic-bezier(.16,1,.3,1), background .3s; }
.nav.is-hidden { transform: translateY(-100%); }
.nav.is-scrolled { background: rgba(5,7,15,.82); }
.scroll-progress { position: absolute; inset-inline: 0; bottom: -1px; height: 2px; overflow: hidden; }
.scroll-progress i { display: block; height: 100%; transform: scaleX(0); transform-origin: left; background: linear-gradient(90deg, #38BDF8, #3B82F6, #7C3AED); }
html[dir="rtl"] .scroll-progress i { transform-origin: right; }
.svc-nav { transition: top .45s cubic-bezier(.16,1,.3,1); }
.nav.is-hidden ~ main .svc-nav { top: 0; }

/* ── الميل ثلاثي الأبعاد + لمعة ── */
.tilt { position: relative; transform-style: preserve-3d; will-change: transform; }
.tilt::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .4s;
  background: radial-gradient(420px circle at var(--sx, 50%) var(--sy, 50%), rgba(255,255,255,.09), transparent 45%); }
.tilt:hover::after { opacity: 1; }

/* ── أرقام بتلف ── */
[data-roll].is-rolled { display: inline-flex; direction: ltr; }
.roll-col { display: inline-block; height: 1em; line-height: 1; overflow: hidden; vertical-align: top; }
.roll-strip { display: flex; flex-direction: column; transform: translateY(0); transition: transform 1.6s cubic-bezier(.16,1,.3,1); }
.roll-strip span { height: 1em; line-height: 1; }
.roll-col:nth-child(2) .roll-strip { transition-delay: .12s; }
[data-roll].is-in .roll-strip { transform: translateY(calc(var(--d) * -1em)); }
.step i[data-roll] { line-height: 1; }
.step i[data-roll].is-rolled { display: flex; justify-content: center; align-items: center; }

/* ── زرار البرق: شعاع ضوء بيلف حوالين الإطار ── */
@property --beam { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
.btn-gold { position: relative; isolation: isolate; }
.btn-gold::before { content: ""; position: absolute; inset: -2px; z-index: -1; border-radius: inherit; padding: 2px; opacity: 0; transition: opacity .3s;
  background: conic-gradient(from var(--beam), transparent 0deg, transparent 280deg, #BFDBFE 320deg, #fff 345deg, transparent 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; }
.btn-gold:hover::before, .btn-gold:focus-visible::before { opacity: 1; animation: beam 1.4s linear infinite; }
@keyframes beam { to { --beam: 360deg; } }

/* ── الخدمات: السكرول الأفقي (ديسكتوب) ── */
.h-wrap.is-horizontal { overflow: hidden; }
.h-wrap.is-horizontal .h-track { display: flex; width: max-content; will-change: transform; }
.h-wrap.is-horizontal .h-panel { width: 100vw; min-height: 100vh; display: flex; align-items: center; border-bottom: 0; border-inline-end: 1px solid var(--border); padding-block: 150px 60px; }
.h-wrap.is-horizontal .h-panel .svc-row { width: 100%; }
.h-wrap.is-horizontal .h-panel:nth-of-type(even) .svc-row .svc-copy { order: 0; }
.h-wrap.is-horizontal .svc-stage { height: min(52vh, 420px); }

/* ── صفحة 404 ── */
.nf { min-height: 100vh; display: grid; place-items: center; text-align: center; padding: 120px 20px; position: relative; overflow: hidden; }
.nf-mark { width: min(260px, 60vw); margin: 0 auto 26px; }
.nf-mark .ring { fill: none; stroke: #334155; stroke-width: 4; stroke-dasharray: 8 10; animation: nfSpin 18s linear infinite; transform-origin: 32px 32px; }
.nf-mark .bolt { fill: #1E293B; stroke: #475569; stroke-width: 1; animation: nfFlicker 4s steps(1) infinite; }
@keyframes nfSpin { to { transform: rotate(360deg); } }
@keyframes nfFlicker { 0%, 100% { fill: #1E293B; } 7% { fill: #60A5FA; } 9% { fill: #1E293B; } 11% { fill: #93C5FD; } 13% { fill: #1E293B; } }
.nf h1 { font-size: clamp(64px, 14vw, 180px); line-height: 1; font-family: 'Plus Jakarta Sans', sans-serif; letter-spacing: -.04em; margin: 0 0 8px; background: linear-gradient(90deg, #93C5FD, #A78BFA); -webkit-background-clip: text; background-clip: text; color: transparent; }
.nf p { color: var(--muted); font-size: 20px; max-width: 520px; margin: 0 auto 30px; }

@media (prefers-reduced-motion: reduce) {
  body::after, .btn-gold:hover::before, .nf-mark .ring, .nf-mark .bolt { animation: none !important; }
  .pt { display: none; }
  .roll-strip { transition: none; }
  .nav { transition: none; }
}

/* الفوتر: 3 أعمدة روابط (الخدمات · الشركة · قانوني) */
footer .wrap.footer-grid { grid-template-columns: 1.7fr 1fr 1fr 1fr; }
@media (max-width: 760px) { footer .wrap.footer-grid { grid-template-columns: 1fr 1fr; } }

/* فورم التواصل مقفول من الإعدادات — الصفحة تفضل متوازنة */
.contact-grid.no-form { grid-template-columns: 1fr; max-width: 720px; margin-inline: auto; text-align: center; }
.contact-grid.no-form .hero-ctas { justify-content: center; }
.form-off { display: flex; justify-content: center; margin-top: 10px; }