/* Mohammed Moghazi — motion & depth layer: intro, aurora, cursor light, spotlight cards, 3D devices, marquee. */
@property --spin { syntax: '<angle>'; inherits: false; initial-value: 0deg; }

/* ── intro curtain (once per session) ── */
.intro { display: none; }
.intro-on .intro { display: grid; position: fixed; inset: 0; z-index: 200; place-items: center; background: #05070f;
  animation: introOut .9s cubic-bezier(.76, 0, .24, 1) 1.9s forwards; }
.intro-on body { overflow: hidden; }
.intro-in { display: grid; justify-items: center; gap: 22px; animation: introFade .5s 1.6s forwards; }
.intro-mark { width: 104px; height: 104px; filter: drop-shadow(0 0 22px rgba(232, 197, 122, .45)); }
.intro-mark rect, .intro-mark path { stroke-dasharray: 1; stroke-dashoffset: 1; animation: draw 1.1s cubic-bezier(.6, 0, .2, 1) .15s forwards; }
.intro-mark path { animation-delay: .45s; }
.intro-name { margin: 0; font: 400 22px/1 var(--display); letter-spacing: .34em; text-transform: uppercase; color: #f3dfb2; opacity: 0; animation: introName .8s .8s forwards; }
.intro-line { width: 180px; height: 1px; background: rgba(255, 255, 255, .12); overflow: hidden; }
.intro-line i { display: block; height: 100%; background: linear-gradient(90deg, transparent, #e8c57a, transparent); transform: translateX(-100%); animation: introBar 1.4s .3s cubic-bezier(.6, 0, .2, 1) forwards; }
@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes introName { from { opacity: 0; letter-spacing: .6em; filter: blur(6px); } to { opacity: 1; letter-spacing: .34em; filter: blur(0); } }
@keyframes introBar { to { transform: translateX(100%); } }
@keyframes introFade { to { opacity: 0; transform: scale(1.06); } }
@keyframes introOut { to { clip-path: inset(0 0 100% 0); visibility: hidden; } }
.intro { clip-path: inset(0); }

/* ── ambient aurora behind every section ── */
.aurora { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.aurora i { position: absolute; width: 58vmax; height: 58vmax; border-radius: 50%; filter: blur(110px); opacity: .16; will-change: transform; }
.aurora i:nth-child(1) { left: -18vmax; top: 22%; background: #2f6bff; animation: drift1 38s ease-in-out infinite alternate; }
.aurora i:nth-child(2) { right: -22vmax; top: 48%; background: #8a5cff; animation: drift2 46s ease-in-out infinite alternate; }
.aurora i:nth-child(3) { left: 30%; bottom: -34vmax; background: #c9963f; opacity: .11; animation: drift3 52s ease-in-out infinite alternate; }
@keyframes drift1 { to { transform: translate(22vmax, -14vmax) scale(1.15); } }
@keyframes drift2 { to { transform: translate(-26vmax, 12vmax) scale(.9); } }
@keyframes drift3 { to { transform: translate(-12vmax, -20vmax) scale(1.2); } }

/* ── cursor light & scroll progress ── */
.cursor-glow { position: fixed; left: 0; top: 0; z-index: 2; width: 620px; height: 620px; margin: -310px 0 0 -310px; border-radius: 50%; pointer-events: none; opacity: 0;
  background: radial-gradient(circle, rgba(232, 197, 122, .10), rgba(98, 214, 255, .05) 38%, transparent 66%); mix-blend-mode: screen; transition: opacity .6s; will-change: transform; }
.cursor-glow.on { opacity: 1; }
.scroll-bar { position: fixed; top: 0; inset-inline: 0; height: 3px; z-index: 60; pointer-events: none; }
.scroll-bar i { display: block; height: 100%; transform-origin: left; transform: scaleX(0); background: linear-gradient(90deg, #62d6ff, #9b8cff 45%, #e8c57a); box-shadow: 0 0 14px rgba(232, 197, 122, .7); }
[dir="rtl"] .scroll-bar i { transform-origin: right; }

/* ── hero: line reveal, gold shimmer, orbits ── */
h1 .l1, h1 .l2 { animation: lineUp 1.1s cubic-bezier(.16, 1, .3, 1) both; animation-delay: var(--d, .15s); }
h1 .l2 { --d: .32s; background-size: 220% 100%; animation: lineUp 1.1s cubic-bezier(.16, 1, .3, 1) .32s both, shimmer 7s linear 1.6s infinite; }
.intro-on h1 .l1, .intro-on h1 .l2, .intro-on .hero .reveal { animation-play-state: paused; transition-delay: 2.3s; }
@keyframes lineUp { from { opacity: 0; transform: translateY(.55em) rotateX(-38deg); filter: blur(10px); } to { opacity: 1; transform: none; filter: blur(0); } }
@keyframes shimmer { to { background-position: -220% 0; } }
h1 { perspective: 900px; }
.orbit { position: absolute; left: 50%; top: 50%; width: 150%; aspect-ratio: 1; margin: -75% 0 0 -75%; border-radius: 50%; border: 1px solid rgba(232, 197, 122, .32); pointer-events: none; transform-style: preserve-3d; }
.orbit.o1 { transform: translateZ(-40px) rotateX(74deg) rotateY(-12deg); animation: orbit1 16s linear infinite; }
.orbit.o2 { width: 176%; margin: -88% 0 0 -88%; border-color: rgba(98, 214, 255, .22); transform: translateZ(-70px) rotateX(68deg) rotateY(18deg); animation: orbit2 26s linear infinite reverse; }
.orbit i { position: absolute; top: 50%; left: -5px; width: 10px; height: 10px; margin-top: -5px; border-radius: 50%; background: #f6dfa6; box-shadow: 0 0 16px 4px rgba(232, 197, 122, .8); }
.orbit.o2 i { background: #9fe6ff; box-shadow: 0 0 16px 4px rgba(98, 214, 255, .75); width: 7px; height: 7px; }
@keyframes orbit1 { from { transform: translateZ(-40px) rotateX(74deg) rotateY(-12deg) rotateZ(0); } to { transform: translateZ(-40px) rotateX(74deg) rotateY(-12deg) rotateZ(360deg); } }
@keyframes orbit2 { from { transform: translateZ(-70px) rotateX(68deg) rotateY(18deg) rotateZ(0); } to { transform: translateZ(-70px) rotateX(68deg) rotateY(18deg) rotateZ(360deg); } }
.hero-inner { transform: translateY(calc(var(--sy, 0) * -60px)); opacity: calc(1 - var(--sy, 0) * 1.25); will-change: transform, opacity; }
.btn.gold { position: relative; overflow: hidden; }
.btn.gold::after { content: ''; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, .65) 50%, transparent 70%); transform: translateX(-120%); animation: sheen 4.5s ease-in-out 2.5s infinite; }
@keyframes sheen { 0%, 60% { transform: translateX(-120%); } 85%, 100% { transform: translateX(120%); } }

/* ── marquee band ── */
.marquee { position: relative; z-index: 1; margin: -30px 0 54px; padding: 26px 0; overflow: hidden; transform: rotate(-2deg) scale(1.04); border-block: 1px solid var(--line);
  background: linear-gradient(90deg, rgba(232, 197, 122, .06), rgba(98, 214, 255, .05), rgba(155, 140, 255, .06));
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
.mq-row { display: flex; width: max-content; gap: 0; direction: ltr; animation: mq 46s linear infinite; }
.mq-row + .mq-row { margin-top: 10px; animation-direction: reverse; animation-duration: 58s; }
.mq-row span { display: inline-flex; align-items: center; gap: 28px; padding-inline-end: 28px; font: 400 clamp(34px, 5vw, 68px)/1.1 var(--display); letter-spacing: -.02em; white-space: nowrap; color: transparent; -webkit-text-stroke: 1px rgba(238, 241, 248, .34); }
.mq-row span:nth-child(3n + 1) { color: var(--gold); -webkit-text-stroke: 0; font-style: italic; }
.mq-row span::after { content: '✦'; font-size: .42em; color: var(--gold); -webkit-text-stroke: 0; font-style: normal; }
[data-lang="ar"] .mq-row span { font-family: var(--ar-display); font-weight: 700; font-style: normal; letter-spacing: 0; line-height: 1.5; }
@keyframes mq { to { transform: translateX(-50%); } }

/* ── section headings: editorial numerals and reveals ── */
main { counter-reset: sec; }
.section > .sec-head, .about-text, .contact-card, .visits-head { counter-increment: sec; }
.section > .sec-head { position: relative; }
.section > .sec-head::after { content: counter(sec, decimal-leading-zero); position: absolute; inset-inline-end: -42%; top: -46px; font: 300 clamp(110px, 16vw, 210px)/1 var(--display); letter-spacing: -.05em;
  color: transparent; -webkit-text-stroke: 1px rgba(255, 255, 255, .07); pointer-events: none; z-index: -1; }
.kicker { display: flex; align-items: center; gap: 12px; }
.contact-card .kicker { justify-content: center; }
.kicker::before { content: ''; width: 34px; height: 1px; background: linear-gradient(90deg, var(--gold), transparent); transform-origin: left; transform: scaleX(0); transition: transform .9s cubic-bezier(.2, .7, .2, 1) .25s; }
[dir="rtl"] .kicker::before { transform-origin: right; background: linear-gradient(-90deg, var(--gold), transparent); }
.reveal.in .kicker::before, .kicker.reveal.in::before, .in > .kicker::before, .visits-card.in .kicker::before { transform: scaleX(1); }
.sec-head h2, .about-text h2 { background: linear-gradient(180deg, #fff 30%, #aeb6cc); -webkit-background-clip: text; background-clip: text; color: transparent; }
.reveal { transform: translateY(34px) scale(.985); filter: blur(8px); transition: opacity 1s cubic-bezier(.16, 1, .3, 1), transform 1s cubic-bezier(.16, 1, .3, 1), filter 1s; transition-delay: calc(var(--i, 0) * 70ms); }
.reveal.in { filter: none; }

/* ── numbers strip: rotating light border ── */
.numbers { overflow: visible; isolation: isolate; backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
.numbers::before { content: ''; position: absolute; inset: -1px; z-index: -1; border-radius: inherit; padding: 1px;
  background: conic-gradient(from var(--spin), transparent 0 62%, rgba(98, 214, 255, .9), rgba(232, 197, 122, 1), transparent 88%);
  -webkit-mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); animation: spin 7s linear infinite; }
@keyframes spin { to { --spin: 360deg; } }
.num { position: relative; transition: background .3s; }
.num:hover { background: rgba(255, 255, 255, .035); }
.num b { background: linear-gradient(180deg, #fff, #f1d9a2); -webkit-background-clip: text; background-clip: text; }

/* ── spotlight cards: light follows the cursor inside and along the border ── */
.rs, .pub, .q, .journey > li > div { position: relative; }
.fx-spot { position: absolute; inset: 0; z-index: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .35s;
  background: radial-gradient(360px circle at var(--mx, 50%) var(--my, 50%), rgba(232, 197, 122, .12), transparent 62%); }
.fx-spot::before { content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 1px;
  background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 50%), rgba(246, 223, 166, .95), rgba(98, 214, 255, .35) 45%, transparent 70%);
  -webkit-mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); }
:hover > .fx-spot { opacity: 1; }
.fx-tilt { transition: transform .5s cubic-bezier(.2, .7, .2, 1); transform-style: preserve-3d; will-change: transform; }
.fx-tilt.live { transition: transform .08s linear; }
.svc, .rs, .q, .pub, .steps li, .journey > li > div { transition: transform .5s cubic-bezier(.2, .7, .2, 1), border-color .3s, box-shadow .4s, background .3s; }
.pub:hover, .rs:hover, .q:hover, .steps li:hover, .journey > li > div:hover { border-color: rgba(232, 197, 122, .28); box-shadow: 0 24px 60px rgba(0, 0, 0, .35); }
.pub:hover { transform: translateY(-3px); }
.svc-ic { transition: transform .5s cubic-bezier(.2, .7, .2, 1), box-shadow .4s; transform: translateZ(0); }
.svc:hover .svc-ic { transform: translateZ(40px) scale(1.08) rotate(-6deg); box-shadow: 0 14px 34px rgba(232, 197, 122, .28); }
.rs b { background: linear-gradient(180deg, #fbe7b8, #c9963f); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* ── journey: the line draws as you scroll ── */
.journey::before { transform-origin: top; transform: scaleY(var(--jp, 0)); transition: transform .25s linear; box-shadow: 0 0 14px rgba(232, 197, 122, .5); }
.journey::after { content: ''; position: absolute; inset-inline-start: 34px; top: calc(10px + (100% - 20px) * var(--jp, 0)); width: 12px; height: 12px; margin-top: -6px; border-radius: 50%; background: #f6dfa6; box-shadow: 0 0 18px 5px rgba(232, 197, 122, .7); transition: top .25s linear; z-index: 2; }

/* ── products: devices turn to face you as they scroll in ── */
.prod { position: relative; overflow: hidden; }
.prod::before { content: ''; position: absolute; inset: 0; pointer-events: none; opacity: .0; transition: opacity .6s;
  background: radial-gradient(60% 80% at 80% 50%, var(--tint, rgba(232, 197, 122, .12)), transparent 70%); }
.prod:nth-child(even)::before { background: radial-gradient(60% 80% at 20% 50%, var(--tint, rgba(232, 197, 122, .12)), transparent 70%); }
.prod:hover::before, .prod.near::before { opacity: 1; }
.prod > * { position: relative; }
.fx-on .prod .browser, .fx-on .prod:nth-child(even) .browser, .fx-on .prod:hover .browser { transform: rotateY(calc(var(--ry, 0) * 1deg)) rotateX(calc(var(--rx, 0) * 1deg)) translateZ(0); transition: transform .5s cubic-bezier(.2, .7, .2, 1), box-shadow .5s; }
.fx-on .prod.near .browser { box-shadow: 0 50px 110px rgba(0, 0, 0, .6), 0 0 90px -20px var(--accent, rgba(232, 197, 122, .5)); }
.prod-media::after { content: ''; position: absolute; left: 8%; right: 8%; bottom: -34px; height: 46px; border-radius: 50%; background: var(--accent, #e8c57a); filter: blur(38px); opacity: .22; pointer-events: none; }
.prod h3 span { background: linear-gradient(120deg, #fff 40%, var(--accent, #e8c57a)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.prod-stats b { text-shadow: 0 0 26px color-mix(in srgb, var(--accent, #e8c57a) 55%, transparent); }

/* ── contact: living border ── */
.contact-card { isolation: isolate; }
.contact-card::after { content: ''; position: absolute; inset: 0; z-index: -1; border-radius: inherit; padding: 1.5px; pointer-events: none;
  background: conic-gradient(from var(--spin), rgba(232, 197, 122, .1), rgba(232, 197, 122, .95), rgba(98, 214, 255, .7), rgba(155, 140, 255, .6), rgba(232, 197, 122, .1));
  -webkit-mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); animation: spin 9s linear infinite; }
.contact-card h2 { background: linear-gradient(100deg, #fff, #f6dfa6 55%, #fff); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: shimmer 9s linear infinite; }
.fx-mag { transition: transform .35s cubic-bezier(.2, .7, .2, 1), box-shadow .2s, background .2s; }

/* ── footer wordmark ── */
.foot-word { position: relative; z-index: 1; margin: 90px 0 -1.2vw; text-align: center; overflow: hidden; pointer-events: none; user-select: none; }
.foot-word span { display: inline-block; font: 600 clamp(90px, 21vw, 330px)/.8 var(--display); letter-spacing: -.045em; color: transparent;
  background: linear-gradient(180deg, rgba(232, 197, 122, .42), rgba(232, 197, 122, 0) 82%); -webkit-background-clip: text; background-clip: text; -webkit-text-stroke: 1px rgba(232, 197, 122, .22); }
[data-lang="ar"] .foot-word span { font-family: var(--ar-display); font-weight: 800; letter-spacing: 0; line-height: 1.25; }

/* ── small screens & reduced motion ── */
@media (max-width: 1020px) { .section > .sec-head::after { inset-inline-end: 0; top: -30px; font-size: 96px; } .orbit { display: none; } }
@media (max-width: 760px) { .aurora i { filter: blur(70px); opacity: .13; } .marquee { margin: -10px 0 40px; padding: 18px 0; } .hero-inner { transform: none; opacity: 1; } .foot-word { margin-top: 60px; } }
@media (hover: none) { .cursor-glow { display: none; } }
@media (prefers-reduced-motion: reduce) {
  .aurora i, .orbit, .mq-row, .numbers::before, .contact-card::after, .contact-card h2, h1 .l1, h1 .l2, .btn.gold::after { animation: none !important; }
  .reveal { filter: none; } .cursor-glow { display: none; } .hero-inner { transform: none; opacity: 1; }
}
/* nebula clouds for the hero, painted in CSS so they never cut into the starfield */
.hero-glow { background:
  radial-gradient(34% 40% at 72% 42%, rgba(98, 214, 255, .16), transparent 70%),
  radial-gradient(30% 36% at 58% 68%, rgba(155, 140, 255, .17), transparent 70%),
  radial-gradient(26% 30% at 86% 74%, rgba(255, 143, 177, .09), transparent 70%),
  radial-gradient(45% 45% at 18% 72%, rgba(232, 197, 122, .11), transparent 70%),
  radial-gradient(80% 80% at 50% 120%, rgba(155, 140, 255, .16), transparent 70%), var(--bg); }
[dir="rtl"] .hero-glow { transform: scaleX(-1); }
/* Arabic: joined letters show seams under a text stroke, so use solid tints instead */
.marquee { direction: ltr; }
[data-lang="ar"] .mq-row span { -webkit-text-stroke: 0; color: rgba(238, 241, 248, .26); }
[data-lang="ar"] .mq-row span:nth-child(3n + 1) { color: var(--gold); }
[data-lang="ar"] .foot-word span { -webkit-text-stroke: 0; background: linear-gradient(180deg, rgba(232, 197, 122, .5), rgba(232, 197, 122, 0) 85%); -webkit-background-clip: text; background-clip: text; }
[data-lang="ar"] .section > .sec-head::after { font-family: var(--display); }
.cv-dl svg { width: 17px; height: 17px; }
.about-cv { margin-top: 18px !important; }
.about-cv a { display: inline-flex; gap: 8px; font-weight: 600; color: var(--gold); text-decoration: none; border-bottom: 1px solid rgba(232, 197, 122, .4); padding-bottom: 2px; }
.about-cv a:hover { border-color: var(--gold); }
[dir="rtl"] .about-cv a span[aria-hidden] { transform: scaleX(-1); }