/* ==========================================================================
   Business ON — interaction "bits" (vanilla ports of React Bits effects).
   Blur Text, Shiny Text, Spotlight + Border Glow, Tilted Card, Magnet,
   Click Spark, Logo Loop, Dot Grid. Behaviour lives in assets/js/bits.js.
   Text effects split by word only, so Arabic letters stay joined.
   ========================================================================== */

/* ---------- Blur Text: headings rise out of a blur, word by word ---------- */
.js .blur-text .bt-w { display: inline-block; opacity: 0; filter: blur(10px); transform: translateY(-14px); transition: opacity .6s var(--ease), filter .7s var(--ease), transform .7s var(--ease); transition-delay: calc(var(--w) * 90ms + 120ms); }
.js .blur-text.is-in .bt-w { opacity: 1; filter: none; transform: none; }

/* ---------- Shiny Text: a light sweep across the kicker label ---------- */
.shiny { background: linear-gradient(110deg, var(--fg-2) 40%, #fff 50%, var(--fg-2) 60%) 0 0 / 250% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: shiny 4.5s linear infinite; }
[dir="rtl"] .shiny { animation-direction: reverse; }
:root[data-theme="light"] .shiny, .paper .shiny { background-image: linear-gradient(110deg, var(--fg-2) 40%, var(--red-2) 50%, var(--fg-2) 60%); }
@keyframes shiny { from { background-position: 125% 0; } to { background-position: -125% 0; } }

/* ---------- Spotlight card + Border Glow (Magic Bento) ---------- */
.spot { --mx: 50%; --my: 50%; --spot: 0; }
.spot::before { content: ""; position: absolute; inset: 0; z-index: 0; border-radius: inherit; pointer-events: none; opacity: var(--spot); transition: opacity .35s; background: radial-gradient(420px circle at var(--mx) var(--my), rgba(227, 25, 63, .16), transparent 60%); }
.spot > .spot-ring { position: absolute; inset: 0; z-index: 2; border-radius: inherit; pointer-events: none; padding: 1px; opacity: var(--spot); transition: opacity .35s; background: radial-gradient(260px circle at var(--mx) var(--my), rgba(255, 70, 100, .95), transparent 70%); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); }
.spot > *:not(.spot-ring) { position: relative; z-index: 1; }
.b-card a.spot, .card-box.spot, .vm-card.spot, .text-card.spot { position: relative; }

/* ---------- Tilted Card: project tiles lean toward the pointer ---------- */
.mosaic, .grid-3 { perspective: 1100px; }
.js .tilt { rotate: var(--tx, 0) var(--ty, 1) 0 var(--ta, 0deg); transition: rotate .5s var(--ease), opacity .7s var(--ease) var(--d, 0ms), transform .7s var(--ease) var(--d, 0ms); }
.js .tilt.is-tilting { transition: rotate .12s linear, opacity .7s var(--ease), transform .7s var(--ease); }
.m-tile.tilt .m-info { transition: translate .5s var(--ease); }
.m-tile.tilt.is-tilting .m-info { translate: calc(var(--ty, 0) * 6px) calc(var(--tx, 0) * -6px); }

/* ---------- Magnet: CTAs drift toward the cursor ---------- */
.magnet { translate: var(--gx, 0) var(--gy, 0); transition: translate .45s cubic-bezier(.3, 1.6, .5, 1), background .2s, border-color .2s, color .2s, transform .2s var(--ease); }
.magnet.is-pulling { transition: translate .15s ease-out, background .2s, border-color .2s, color .2s, transform .2s var(--ease); }

/* ---------- Click Spark ---------- */
.spark { position: fixed; z-index: 9999; width: 0; height: 0; pointer-events: none; }
.spark i { position: absolute; left: -1px; top: 0; width: 2px; height: 12px; border-radius: 2px; background: var(--red-2); transform-origin: 1px 0; }
:root[data-theme="light"] .spark i { background: var(--red); }

/* ---------- Logo Loop: client logos scroll forever ---------- */
.clients.is-loop .clients-grid { grid-template-columns: 200px minmax(0, 1fr); }
.clients.is-loop .logo-loop { overflow: hidden; mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
.clients.is-loop ul { display: flex; width: max-content; border: 0; animation: logo-loop var(--loop-t, 30s) linear infinite; }
[dir="rtl"] .clients.is-loop ul { animation-name: logo-loop-rtl; }
.clients.is-loop .logo-loop:hover ul { animation-play-state: paused; }
.clients.is-loop li { width: 180px; height: 80px; border: 0; padding: 14px 28px; }
.clients.is-loop li:hover img { transform: scale(1.08); }
.clients.is-loop img { transition: opacity .25s, transform .3s var(--ease); }
@keyframes logo-loop { to { transform: translateX(-50%); } }
@keyframes logo-loop-rtl { to { transform: translateX(50%); } }

/* ---------- Dot Grid: interactive canvas background ---------- */
.dot-grid { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; pointer-events: none; }
.page-hero.has-dots::after { display: none; }
.page-hero .dot-grid { mask-image: linear-gradient(180deg, #000, transparent 90%); }
.switch-cta-inner .dot-grid { mask-image: radial-gradient(90% 90% at 70% 50%, #000, transparent); }

@media (max-width: 760px) {
	.clients.is-loop .clients-grid { grid-template-columns: 1fr; }
	.clients.is-loop li { width: 140px; padding: 12px 20px; }
}

@media (prefers-reduced-motion: reduce) {
	.js .blur-text .bt-w { opacity: 1; filter: none; transform: none; }
	.shiny { animation: none; color: inherit; background: none; }
	.clients.is-loop ul { animation: none; }
}

/* ==========================================================================
   Round 2
   ========================================================================== */

/* ---------- Power "ON": electric current runs around the letters, then they light up ---------- */
.pw-wire { position: absolute; left: 0; top: 0; overflow: visible; pointer-events: none; }
.pw-wire text { fill: none; stroke-linejoin: round; stroke-linecap: round; }
.pw-wire .w-line { stroke: var(--red-2); stroke-width: 3; filter: drop-shadow(0 0 6px rgba(227, 25, 63, .9)); }
.pw-wire .w-head { stroke: #fff; stroke-width: 4; filter: drop-shadow(0 0 4px #fff) drop-shadow(0 0 12px var(--red-2)); }
.power.has-wire .pw-fill { clip-path: none; opacity: 0; transition: opacity .25s; }
.power.has-wire.is-on .pw-fill { opacity: 1; text-shadow: 0 0 50px rgba(227, 25, 63, .45); }
.power.has-wire.is-on .w-head { opacity: 0; }
.power.has-wire.is-on .w-line { transition: opacity .6s .3s; opacity: 0; }
.power.is-flash .power-glow { animation: flash .7s ease-out; }
@keyframes flash { 20% { filter: brightness(2.6); } }
.pw-spark { position: absolute; width: 5px; height: 5px; border-radius: 50%; background: #fff; box-shadow: 0 0 8px 2px var(--red-2); pointer-events: none; }
.pw-dot { position: relative; }
.pw-ring { position: absolute; inset: -2px; border-radius: 50%; border: 2px solid var(--red-2); opacity: 0; pointer-events: none; }
.power.is-on .pw-ring { animation: ring 2.6s cubic-bezier(.2, .8, .2, 1) infinite; }
.power.is-on .pw-ring + .pw-ring { animation-delay: 1.3s; }
@keyframes ring { 0% { transform: scale(1); opacity: .9; } 100% { transform: scale(5); opacity: 0; } }

/* ---------- Electric Logo: lightning outline + arcs (ON word once lit, header logo on hover) ---------- */
.elec-layer { position: absolute; z-index: 2; margin: 0; max-width: none; pointer-events: none; opacity: 0; transition: opacity .25s; }
.is-electric > .elec-layer { opacity: 1; }
.brand.is-electric > .elec-layer { opacity: .6; }
.elec-arcs { position: absolute; z-index: 3; pointer-events: none; }
.brand { position: relative; }

/* ---------- Electric Border (React Bits WebGL port, assets/js/electric-border.js) ---------- */
.eb-canvas { position: fixed; left: 0; top: 0; z-index: 40; pointer-events: none; transform: translate(-9999px, 0); }
.is-eb > .spot-ring { opacity: 0; }
.is-eb { border-color: transparent !important; }

/* ---------- Scroll Velocity: service names band, speeds up with scrolling ---------- */
.velo { padding: clamp(28px, 4vw, 48px) 0; overflow: hidden; border-block: 1px solid var(--line); direction: ltr; }
.velo-row { display: flex; white-space: nowrap; }
.velo-row + .velo-row { margin-top: 10px; }
.velo-track { display: flex; align-items: center; gap: clamp(20px, 3vw, 40px); padding-inline-end: clamp(20px, 3vw, 40px); flex: none; will-change: transform; }
.velo-track span { font: 700 clamp(2rem, 5.5vw, 4.6rem)/1.15 var(--f-head); letter-spacing: -.02em; }
.velo-row[data-velo="-1"] .velo-track span { color: transparent; -webkit-text-stroke: 1px var(--line-2); }
.velo-track i { width: .5em; height: .5em; flex: none; border-radius: 50%; background: var(--red-2); box-shadow: 0 0 18px rgba(227, 25, 63, .7); font-size: clamp(1rem, 2vw, 1.6rem); }
:root[lang="ar"] .velo-track span { font-weight: 700; letter-spacing: 0; }

/* ---------- Scroll Float: section titles rise word by word ---------- */
.js .float-text .ft-w { display: inline-block; opacity: 0; transform: translateY(60%) scaleY(1.6); transform-origin: 50% 100%; transition: opacity .6s var(--ease), transform .8s cubic-bezier(.3, 1.4, .5, 1); transition-delay: calc(var(--w) * 55ms); }
.js .float-text.is-in .ft-w { opacity: 1; transform: none; }

/* ---------- Scroll Reveal: lead text lights up as you scroll ---------- */
.scroll-rev .sr-w { opacity: var(--o, .18); filter: blur(calc((1 - var(--o, .18)) * 3px)); transition: opacity .25s, filter .25s; }

/* ---------- Glare Hover ---------- */
.glare { position: absolute; inset: 0; z-index: 2; pointer-events: none; border-radius: inherit; background: linear-gradient(-45deg, transparent 40%, rgba(255, 255, 255, .28) 50%, transparent 60%) -100% -100% / 250% 250% no-repeat; transition: background-position .8s var(--ease); }
.m-tile:hover .glare, .p-card a:hover .glare { background-position: 100% 100%; }
.p-card-media { position: relative; }

/* ---------- Star Border: light orbiting the header CTA ---------- */
.nav-cta { position: relative; overflow: hidden; isolation: isolate; }
.nav-cta .star { position: absolute; z-index: -1; width: 300%; height: 50%; border-radius: 50%; opacity: .8; background: radial-gradient(circle, #fff, transparent 12%); pointer-events: none; }
.nav-cta .star-b { bottom: -12px; right: -250%; animation: star-b 5s linear infinite alternate; }
.nav-cta .star-t { top: -12px; left: -250%; animation: star-t 5s linear infinite alternate; }
@keyframes star-b { 0% { transform: translateX(0); opacity: 1; } 100% { transform: translateX(-100%); opacity: 0; } }
@keyframes star-t { 0% { transform: translateX(0); opacity: 1; } 100% { transform: translateX(100%); opacity: 0; } }

/* ---------- Pill Nav: a pill slides under the hovered link ---------- */
@media (min-width: 1101px) { .nav { position: relative; } }
.nav-pill { position: absolute; top: 0; left: 0; height: 0; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--line); opacity: 0; pointer-events: none; transition: transform .35s var(--ease), width .35s var(--ease), opacity .25s; }
.nav-pill.is-on { opacity: 1; }
.nav-list > li > a { z-index: 1; }

/* ---------- Circular Text badge ---------- */
.circ { position: absolute; top: clamp(16px, 3vw, 28px); inset-inline-end: clamp(16px, 3vw, 28px); width: 112px; height: 112px; z-index: 1; direction: ltr; pointer-events: auto; }
.circ-ring { position: absolute; inset: 0; animation: spin 18s linear infinite; }
.circ:hover .circ-ring { animation-duration: 4s; }
@keyframes spin { to { rotate: 360deg; } }
.circ-ring span { position: absolute; left: 50%; top: 0; height: 50%; width: 1ch; margin-left: -.5ch; transform-origin: 50% 100%; text-align: center; font: 600 .7rem/1 var(--f-body); letter-spacing: 0; color: var(--fg-2); }
.circ::after { content: ""; position: absolute; inset: 42%; border-radius: 50%; background: var(--red-2); box-shadow: 0 0 20px rgba(227, 25, 63, .8); }

/* ---------- Glitch: 404 code ---------- */
.nf-code { animation: glitch 3.2s steps(1) infinite; }
@keyframes glitch {
	0%, 86%, 100% { clip-path: none; text-shadow: none; translate: 0; }
	88% { clip-path: inset(10% 0 55% 0); text-shadow: -4px 0 var(--red-2), 4px 0 #3cf; translate: -6px 0; }
	90% { clip-path: inset(60% 0 8% 0); text-shadow: 4px 0 var(--red-2), -4px 0 #3cf; translate: 6px 0; }
	92% { clip-path: inset(30% 0 40% 0); text-shadow: -3px 0 var(--red-2); translate: -3px 0; }
	94% { clip-path: none; text-shadow: 3px 0 #3cf; translate: 2px 0; }
}

@media (max-width: 1100px) { .nav-pill { display: none; } }
@media (max-width: 760px) { .circ { display: none; } }

@media (prefers-reduced-motion: reduce) {
	.nav-cta .star, .circ-ring, .nf-code { animation: none; }
	.elec-arcs, .elec-layer { display: none; }
	.js .float-text .ft-w { opacity: 1; transform: none; }
	.scroll-rev .sr-w { opacity: 1; filter: none; }
}

/* ---------- Mobile menu: Staggered Menu (React Bits) ---------- */
.nav-foot { display: none; }
@media (max-width: 1100px) {
	/* A backdrop-filter makes the header the containing block of the fixed menu and squeezes it to ~1px. */
	.site-header.is-open { -webkit-backdrop-filter: none; backdrop-filter: none; background: var(--bg); }
	.nav { display: flex; padding: 8px var(--gut) calc(24px + env(safe-area-inset-bottom)); background: radial-gradient(90% 50% at 100% 100%, rgba(200, 16, 46, .2), transparent 70%), radial-gradient(60% 35% at 0 0, rgba(200, 16, 46, .08), transparent 70%), var(--bg); transform: translateY(-10px); transition: opacity .3s, visibility .3s, transform .45s var(--ease); }
	.nav.is-open { transform: none; }
	.nav-list { counter-reset: nav; }
	.nav-list > li { counter-increment: nav; opacity: 0; transform: translateY(22px); transition: opacity .4s var(--ease), transform .55s var(--ease); }
	.nav.is-open .nav-list > li { opacity: 1; transform: none; }
	.nav.is-open .nav-list > li:nth-child(1) { transition-delay: .08s; }
	.nav.is-open .nav-list > li:nth-child(2) { transition-delay: .14s; }
	.nav.is-open .nav-list > li:nth-child(3) { transition-delay: .2s; }
	.nav.is-open .nav-list > li:nth-child(4) { transition-delay: .26s; }
	.nav.is-open .nav-list > li:nth-child(5) { transition-delay: .32s; }
	.nav.is-open .nav-list > li:nth-child(6) { transition-delay: .38s; }
	.nav-list > li > a { display: flex; align-items: baseline; gap: 14px; padding: 16px 0; font-size: clamp(1.45rem, 6.5vw, 1.9rem); color: var(--fg); }
	.nav-list > li > a::before { content: counter(nav, decimal-leading-zero); min-width: 2ch; font: 600 .72rem/1 var(--f-head); letter-spacing: .04em; color: var(--red-2); }
	.nav-list > li > a[aria-current] { color: var(--red-2); }
	.sub-toggle { border-radius: 12px; border: 1px solid var(--line-2); width: 40px; height: 40px; }
	.sub-toggle .ico { transition: transform .25s var(--ease); }
	.sub ul { gap: 2px; padding-inline-start: 32px; }
	.sub a { align-items: center; padding: 8px 0; }
	.sub-ico { width: 34px; height: 34px; }
	.sub strong { font-size: .95rem; color: var(--fg-2); }
	.nav-foot { display: block; margin-top: auto; padding-top: 28px; opacity: 0; transform: translateY(16px); transition: opacity .4s var(--ease) .1s, transform .5s var(--ease) .1s; }
	.nav.is-open .nav-foot { opacity: 1; transform: none; transition-delay: .44s; }
	body:has(.site-header.is-open) .wa-float { opacity: 0; pointer-events: none; }
}
@media (max-width: 1100px) and (prefers-reduced-motion: reduce) {
	.nav, .nav-list > li, .nav-foot { transform: none; }
}