/* =====================================================================
   enhance.css — loaded AFTER site.css
   ---------------------------------------------------------------------
   1. Arabic + right-to-left
   2. Performance guards (off-screen tiles, containment)
   3. The "wow" layer: progress bar, word reveal, spotlight, magnetism,
      parallax, custom cursor, grain, command palette, page transitions
   4. Theme switches driven by SITE.THEME (no-aurora / no-stars / …)
   5. Admin draft banner
   ===================================================================== */

/* =====================================================================
   1. ARABIC / RTL
   ===================================================================== */
.is-ar {
  --display: 'Cairo', 'Tajawal', system-ui, sans-serif;
  --body: 'Tajawal', system-ui, 'Segoe UI', sans-serif;
}
/* Arabic script has no uppercase and hates tight tracking */
.is-ar h1, .is-ar h2, .is-ar h3 { letter-spacing: 0 }
.is-ar .ey { letter-spacing: 0 }
.is-ar body, .is-ar p { line-height: 1.85 }

/* keep latin/technical fragments reading left-to-right inside Arabic */
.ltr { direction: ltr; unicode-bidi: isolate; display: inline-block }

/* --- mirror the directional gradients --- */
[dir="rtl"] .assemble-shade {
  background:
    linear-gradient(270deg, rgba(7,10,12,.88) 0%, rgba(7,10,12,.55) 30%, rgba(7,10,12,0) 58%),
    linear-gradient(0deg, rgba(7,10,12,.7) 0%, rgba(7,10,12,0) 26%),
    radial-gradient(120% 90% at 40% 50%, transparent 55%, rgba(7,10,12,.55) 100%);
}
[dir="rtl"] .film-shade {
  background:
    linear-gradient(270deg, rgba(6,9,15,.9) 0%, rgba(6,9,15,.6) 34%, rgba(6,9,15,0) 62%),
    linear-gradient(0deg, rgba(6,9,15,.75) 0%, rgba(6,9,15,0) 40%);
}
[dir="rtl"] .p-hero-shade {
  background:
    linear-gradient(0deg, rgba(8,12,22,.96) 0%, rgba(8,12,22,.55) 34%, rgba(8,12,22,.05) 64%, rgba(8,12,22,.45) 100%),
    linear-gradient(270deg, rgba(8,12,22,.7) 0%, rgba(8,12,22,0) 55%);
}
[dir="rtl"] .band::before {
  background: linear-gradient(270deg, rgba(12,20,38,.95) 0%, rgba(12,20,38,.75) 50%, rgba(12,20,38,.3) 100%);
}
[dir="rtl"] .cta-photo img {
  -webkit-mask-image: linear-gradient(270deg, transparent 0%, #000 30%);
          mask-image: linear-gradient(270deg, transparent 0%, #000 30%);
}

/* --- mirror the absolutely positioned bits --- */
[dir="rtl"] .console { left: auto; right: -7% }
[dir="rtl"] .tag-float { right: auto; left: -3% }
[dir="rtl"] .sound { right: auto; left: 22px }
[dir="rtl"] .dock { right: auto; left: 18px; align-items: flex-start }
[dir="rtl"] .hud .load { text-align: left }
[dir="rtl"] .scrub-hint { text-align: left }
[dir="rtl"] .d-row b { text-align: left }
[dir="rtl"] .cap { left: auto; right: 0 }
[dir="rtl"] .photo .corner.tl { left: auto; right: 14px; border-right: 2px solid var(--gold); border-left: 0 }
[dir="rtl"] .photo .corner.br { right: auto; left: 14px; border-left: 2px solid var(--gold); border-right: 0 }
[dir="rtl"] .photo figcaption { left: auto; right: 18px }
[dir="rtl"] .play { right: auto; left: 14px }
[dir="rtl"] .bar u { margin-left: 0; margin-right: auto }
[dir="rtl"] .bar em { margin-left: 0; margin-right: 10px }
[dir="rtl"] .hud .bar i { transform-origin: right }
[dir="rtl"] .scroll-progress i { transform-origin: right }
[dir="rtl"] .lb-ctrl .lb-prev svg,
[dir="rtl"] .lb-ctrl .lb-next svg { transform: scaleX(-1) }
[dir="rtl"] .view .shot { object-position: top center }

@media (max-width:700px) {
  [dir="rtl"] .dock { left: 0; right: 0 }
  [dir="rtl"] .tag-float { left: 0; right: auto }
}

/* =====================================================================
   2. PERFORMANCE GUARDS
   ---------------------------------------------------------------------
   content-visibility lets the browser skip layout, paint AND style for
   tiles that are off screen. With 23 video tiles this is the difference
   between a janky scroll and a smooth one, and it costs nothing.
   ===================================================================== */
.tile, .tile-cta { content-visibility: auto; contain-intrinsic-size: auto 320px }
.work-row, .site-card { contain: layout style }
.gallery { contain: layout }

/* the poster is what you see until the decoder is actually free */
.tile video { will-change: opacity }
.tile.is-playing .poster { opacity: .001 }
.tile .poster { transition: transform .6s ease, opacity .4s ease }

/* a weak device keeps the layout and loses the expensive paint work */
.tier-low .aurora { display: none }
.tier-low .site-header,
.tier-low .filters { backdrop-filter: none; -webkit-backdrop-filter: none; background: rgba(12,20,38,.95) }
.tier-low .grain { display: none }
.no-aurora .aurora { display: none }
.no-grain .grain { display: none }

/* =====================================================================
   3. THE WOW LAYER
   ===================================================================== */

/* ---------- scroll progress ---------- */
.scroll-progress {
  position: fixed; inset: 0 0 auto 0; height: 2px; z-index: 1001; pointer-events: none;
  background: rgba(255,255,255,.06);
}
.scroll-progress i {
  display: block; height: 100%; width: 100%; transform: scaleX(0); transform-origin: left;
  background: linear-gradient(90deg, var(--gold), var(--gold2));
  box-shadow: 0 0 12px rgba(var(--gold-rgb,234,178,74), .7);
}
.site-header { transition: background .3s, height .3s, box-shadow .3s }
.site-header.is-stuck {
  height: calc(var(--header) - 8px);
  box-shadow: 0 10px 30px rgba(0,0,0,.35);
  background: rgba(12,19,35,.86);
}

/* ---------- language toggle ---------- */
.lang-btn {
  display: inline-flex; align-items: center; gap: 7px; padding: 7px 12px; cursor: pointer;
  border: 1px solid var(--edge2); background: rgba(255,255,255,.04); border-radius: 999px;
  color: var(--muted); font-size: 13px; font-weight: 600; transition: color .18s, border-color .18s, background .18s;
}
.lang-btn:hover { color: var(--text); border-color: rgba(var(--gold-rgb,234,178,74), .5) }
.lang-btn svg { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 1.8 }

/* search / palette trigger in the header */
.cmd-btn {
  display: inline-flex; align-items: center; gap: 8px; padding: 7px 11px; cursor: pointer;
  border: 1px solid var(--edge); background: rgba(255,255,255,.03); border-radius: var(--r-sm);
  color: var(--dim); font-size: 12.5px; transition: color .18s, border-color .18s;
}
.cmd-btn:hover { color: var(--text); border-color: rgba(var(--gold-rgb,234,178,74), .45) }
.cmd-btn svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round }
.cmd-btn kbd {
  font-family: var(--mono); font-size: 10.5px; padding: 2px 5px; border-radius: 5px;
  border: 1px solid var(--edge2); background: rgba(255,255,255,.05); color: var(--muted);
}
@media (max-width:1000px) { .cmd-btn { display: none } }

/* ---------- headline word reveal ---------- */
[data-split].is-split .w {
  display: inline-block;
  opacity: 0;
  transform: translateY(.42em) rotate(1.2deg);
  filter: blur(6px);
  transition: opacity .62s cubic-bezier(.2,.7,.3,1), transform .62s cubic-bezier(.2,.7,.3,1), filter .62s ease;
  transition-delay: calc(var(--wi) * 42ms);
}
[data-split].w-in .w { opacity: 1; transform: none; filter: blur(0) }

/* ---------- gold glow behind key headings ---------- */
.hero h1, .p-hero h1 { position: relative }
.hero h1::after, .p-hero h1::after {
  content: ""; position: absolute; left: -6%; top: 10%; width: 60%; height: 80%; z-index: -1;
  background: radial-gradient(60% 60% at 30% 50%, rgba(var(--gold-rgb,234,178,74), .18), transparent 70%);
  filter: blur(34px); pointer-events: none;
}
.no-glow .hero h1::after, .no-glow .p-hero h1::after { display: none }

/* ---------- pointer spotlight on cards ---------- */
.cap-card, .site-card, .step, .tile-cta, .dossier { position: relative; overflow: hidden }
.cap-card::before, .site-card::before, .step::before, .tile-cta::before, .dossier::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: 0;
  transition: opacity .3s ease;
  background: radial-gradient(260px circle at var(--mx,50%) var(--my,50%),
              rgba(var(--gold-rgb,234,178,74), .16), transparent 62%);
}
.cap-card:hover::before, .site-card:hover::before, .step:hover::before,
.tile-cta:hover::before, .dossier:hover::before { opacity: 1 }
.cap-card > *, .site-card > *, .step > *, .tile-cta > *, .dossier > * { position: relative; z-index: 1 }
.coarse .cap-card::before, .coarse .site-card::before, .coarse .step::before,
.coarse .tile-cta::before, .coarse .dossier::before { display: none }

/* a card lifts a little on hover, in step with the spotlight */
.step { transition: border-color .2s, transform .2s }
.step:hover { border-color: rgba(var(--gold-rgb,234,178,74), .3); transform: translateY(-2px) }

/* ---------- magnetic buttons ---------- */
.btn-gold, .nav-cta, .dock a, .play { transition: transform .22s cubic-bezier(.2,.7,.3,1), background .17s, box-shadow .17s, border-color .17s }
.btn-gold { transform: var(--mag, translate(0,0)) }
.btn-gold:hover { transform: var(--mag, translate(0,0)) translateY(-2px) }
.btn-gold:active { transform: var(--mag, translate(0,0)) scale(.97) }
.dock a { transform: var(--mag, translate(0,0)) }
.dock a:hover { transform: var(--mag, translate(0,0)) translateY(-2px) }
.tile:hover .play { transform: var(--mag, translate(0,0)) scale(1.06) }

/* a slow sheen across the primary button */
.btn-gold { position: relative; overflow: hidden }
.btn-gold::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: 45%; left: -60%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.45), transparent);
  transform: skewX(-18deg); pointer-events: none;
}
.btn-gold:hover::after { animation: sheen .75s ease }
@keyframes sheen { to { left: 120% } }

/* ---------- hero parallax ---------- */
[data-par] { transform: var(--par, translate3d(0,0,0)); transition: transform .5s cubic-bezier(.2,.7,.3,1) }
.hero:hover [data-par] { transition: transform .12s linear }

/* ---------- custom cursor ---------- */
.has-cursor, .has-cursor a, .has-cursor button, .has-cursor .tile { cursor: none }
.cur-dot, .cur-ring {
  position: fixed; left: 0; top: 0; z-index: 4000; pointer-events: none;
  margin-left: -4px; margin-top: -4px; border-radius: 50%;
}
.cur-dot { width: 8px; height: 8px; background: var(--gold); box-shadow: 0 0 12px rgba(var(--gold-rgb,234,178,74), .9) }
.cur-ring {
  width: 34px; height: 34px; margin-left: -17px; margin-top: -17px;
  border: 1px solid rgba(var(--gold-rgb,234,178,74), .55);
  transition: width .2s, height .2s, margin .2s, background .2s, border-color .2s;
}
.cur-ring.hot {
  width: 54px; height: 54px; margin-left: -27px; margin-top: -27px;
  background: rgba(var(--gold-rgb,234,178,74), .1); border-color: rgba(var(--gold-rgb,234,178,74), .85);
}
@media (hover: none), (pointer: coarse) { .cur-dot, .cur-ring { display: none } }

/* ---------- film grain ---------- */
.grain {
  position: fixed; inset: -50%; z-index: 900; pointer-events: none; opacity: .04;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grain 7s steps(6) infinite;
}
@keyframes grain {
  0%,100% { transform: translate(0,0) }
  20% { transform: translate(-3%,2%) }
  40% { transform: translate(2%,-3%) }
  60% { transform: translate(-2%,-2%) }
  80% { transform: translate(3%,1%) }
}

/* ---------- command palette ---------- */
.palette {
  position: fixed; inset: 0; z-index: 3000; display: flex; align-items: flex-start; justify-content: center;
  padding: clamp(60px, 14vh, 150px) 18px 18px;
  background: rgba(4,7,12,.72); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  opacity: 0; transition: opacity .18s ease;
}
.palette[hidden] { display: none }
@media (max-width: 1180px) and (min-width: 1001px) {
  .navlinks { gap: 18px }
  .cmd-btn kbd { display: none }
}
.palette.in { opacity: 1 }
.pal-box {
  width: min(620px, 100%); border-radius: var(--r-md); overflow: hidden;
  border: 1px solid var(--edge2); background: rgba(16,25,44,.97);
  box-shadow: 0 40px 100px rgba(0,0,0,.6);
  transform: translateY(-10px) scale(.985); transition: transform .2s cubic-bezier(.2,.7,.3,1);
}
.palette.in .pal-box { transform: none }
.pal-top { display: flex; align-items: center; gap: 11px; padding: 0 16px; height: 56px; border-bottom: 1px solid var(--edge) }
.pal-top svg { width: 17px; height: 17px; stroke: var(--dim); fill: none; stroke-width: 2; stroke-linecap: round; flex: none }
.pal-top input {
  flex: 1; min-width: 0; background: none; border: 0; outline: none; color: var(--text);
  font: inherit; font-size: 15.5px; height: 100%;
}
.pal-top kbd {
  font-family: var(--mono); font-size: 10.5px; color: var(--dim); padding: 3px 7px;
  border: 1px solid var(--edge2); border-radius: 6px; flex: none;
}
.pal-list { max-height: min(52vh, 420px); overflow-y: auto; padding: 8px }
.pal-group {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .09em; text-transform: uppercase;
  color: var(--dim); padding: 12px 10px 6px;
}
.pal-row {
  display: flex; align-items: center; justify-content: space-between; gap: 14px; width: 100%;
  padding: 10px 12px; border: 0; border-radius: 9px; background: none; cursor: pointer;
  text-align: start; font-size: 14.5px; color: var(--text);
}
.pal-row em { font-style: normal; font-family: var(--mono); font-size: 11.5px; color: var(--dim); flex: none }
.pal-row.on { background: rgba(var(--gold-rgb,234,178,74), .14); color: var(--text) }
.pal-row.on em { color: var(--gold) }
.pal-row span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.pal-empty { padding: 26px 14px; text-align: center; color: var(--dim); font-size: 14px }
.pal-foot {
  padding: 10px 16px; border-top: 1px solid var(--edge); color: var(--dim);
  font-family: var(--mono); font-size: 11px;
}
body.pal-open { overflow: hidden }

/* ---------- page transitions ---------- */
.veil {
  position: fixed; inset: 0; z-index: 2500; pointer-events: none; opacity: 0;
  background: var(--bg-deep); transition: opacity .26s ease;
}
body.page-out .veil { opacity: 1 }
body.page-out { pointer-events: none }
main, footer { transition: opacity .3s ease }
body.page-out main, body.page-out footer { opacity: .35 }

/* =====================================================================
   4. ADMIN DRAFT BANNER
   ===================================================================== */
.draft-bar {
  position: fixed; left: 50%; transform: translateX(-50%); bottom: 16px; z-index: 1200;
  display: flex; align-items: center; gap: 14px; padding: 9px 9px 9px 16px; border-radius: 999px;
  background: rgba(20,14,4,.94); border: 1px solid rgba(var(--gold-rgb,234,178,74), .5);
  box-shadow: 0 18px 44px rgba(0,0,0,.5); font-size: 13px; color: var(--gold);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
.draft-bar a { color: var(--text); text-decoration: underline; text-underline-offset: 3px }
.draft-bar button {
  border: 0; cursor: pointer; border-radius: 999px; padding: 7px 13px; font-size: 12.5px; font-weight: 600;
  background: var(--gold); color: var(--ink-on-gold);
}
@media (max-width:700px) { .draft-bar { bottom: 78px; font-size: 12px; padding: 8px 8px 8px 12px } }

/* =====================================================================
   5. REDUCED MOTION — switch the whole wow layer off
   ===================================================================== */
@media (prefers-reduced-motion: reduce) {
  .scroll-progress, .grain, .cur-dot, .cur-ring, .veil { display: none !important }
  [data-split].is-split .w { opacity: 1 !important; transform: none !important; filter: none !important }
  .btn-gold::after { display: none }
  .has-cursor, .has-cursor a, .has-cursor button, .has-cursor .tile { cursor: auto }
}

/* =====================================================================
   6. HEADER TOOL CLUSTER (search + language + burger)
   ===================================================================== */
.nav-tools { display: flex; align-items: center; gap: 10px; flex: none }
.nav-tools .burger { display: none }
@media (max-width: 1000px) {
  .nav-tools .burger { display: flex }
  .nav-tools { gap: 6px }
  .lang-btn { padding: 7px 10px; font-size: 12.5px }
  .lang-btn svg { display: none }
}

/* the language switch inside the mobile dropdown is not needed twice */
.navlinks .lang-btn { display: none }

/* =====================================================================
   7. SPEED FIXES
   ---------------------------------------------------------------------
   The page was doing heavy work every single frame, even when nobody
   touched it. These rules keep the look and drop the expensive parts.
   ===================================================================== */

/* film grain: an animated noise layer over the whole screen, on top of
   everything — the single most expensive thing on the page */
.grain { display: none !important }

/* custom cursor: the trailing ring felt laggy, the normal cursor is instant */
.cur-dot, .cur-ring { display: none !important }
.has-cursor, .has-cursor .tile { cursor: auto }
.has-cursor a, .has-cursor button, .has-cursor .tile, .has-cursor [role="button"] { cursor: pointer }

/* colour clouds: keep the colour, stop them drifting (two huge blurred
   layers being redrawn every frame) */
.aurora span { animation: none !important; will-change: auto }

/* frosted glass over moving pictures had to be re-blurred every frame:
   use a solid, slightly see-through panel instead */
.site-header, .filters, .console, .tag-float, .play, .sound, .btn-glass, .dock {
  backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
}
.site-header { background: rgba(13,21,38,.94) }
.site-header.is-over-media { background: rgba(8,12,20,.72) }
.site-header.is-stuck { background: rgba(12,19,35,.96) }
.filters { background: rgba(15,25,46,.97) }
.console { background: rgba(12,20,38,.95) }
.tag-float { background: rgba(12,20,38,.93) }
.play, .sound, .btn-glass { background: rgba(8,12,20,.68) }
@media (max-width:700px) { .dock { background: rgba(12,20,38,.98) } }

/* headline words: fade and rise, without blurring every word */
[data-split].is-split .w { filter: none !important; transition-property: opacity, transform }

/* pulsing dots: fade (cheap) instead of a growing shadow (repaints) */
@keyframes led { 0%, 100% { opacity: 1 } 50% { opacity: .45 } }

/* the loading shimmer stops once the screenshot has arrived */
.view:has(.shot.loaded) .ph { display: none }

/* gallery: draw every tile normally. Skipping off-screen tiles with a
   guessed height made the page jump while scrolling. */
.tile, .tile-cta { content-visibility: visible; contain-intrinsic-size: none }

/* =====================================================================
   8. READY-MADE SYSTEMS (#services on the homepage, see services.js)
   ===================================================================== */
#services { padding-top: 40px }
.svc-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; align-items: stretch }
.svc {
  display: flex; flex-direction: column; min-width: 0;
  border: 1px solid var(--edge); border-radius: var(--r-lg); overflow: hidden;
  background: linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.01)), var(--panel2);
  transition: border-color .2s, transform .2s;
}
.svc:hover { border-color: rgba(var(--gold-rgb,234,178,74), .35); transform: translateY(-3px) }
.svc-shot { border-radius: 0; border: 0; border-bottom: 1px solid var(--edge); box-shadow: none; transform: none !important }
.svc-shot .bar { height: 32px }
.svc-shot .bar i { width: 8px; height: 8px }
.svc-shot img { width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; object-position: top left; background: #0b111d }
.svc-body { display: flex; flex-direction: column; flex: 1; padding: 22px 22px 24px }
.svc-badge {
  align-self: flex-start; display: inline-flex; align-items: center; gap: 7px;
  padding: 5px 11px; border-radius: 999px; font-size: 12px; font-weight: 600; color: var(--gold);
  background: var(--gold-dim); border: 1px solid rgba(var(--gold-rgb,234,178,74), .3); margin-bottom: 14px;
}
.svc-badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--gold) }
.svc h3 { font-weight: 600; font-size: 20px; line-height: 1.25; letter-spacing: -.015em }
.svc-lead { color: var(--muted); font-size: 14.5px; margin: 10px 0 14px }
.svc-points { list-style: none; display: grid; gap: 8px; margin-bottom: 22px }
.svc-points li { position: relative; padding-inline-start: 22px; font-size: 14px; color: #c9d2de; line-height: 1.5 }
.svc-points li::before {
  content: ""; position: absolute; inset-inline-start: 2px; top: .42em; width: 11px; height: 6px;
  border-left: 2px solid var(--gold); border-bottom: 2px solid var(--gold); transform: rotate(-45deg);
}
.svc-cta { margin-top: auto; align-self: flex-start }
.svc-note {
  margin-top: 26px; display: flex; gap: 10px; align-items: flex-start; max-width: 76ch;
  color: var(--dim); font-size: 13.5px;
}
.svc-note::before {
  content: ""; flex: none; width: 15px; height: 15px; margin-top: 2px; opacity: .8;
  background: var(--gold);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='11' width='16' height='10' rx='2'/%3E%3Cpath d='M8 11V7a4 4 0 0 1 8 0v4'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='11' width='16' height='10' rx='2'/%3E%3Cpath d='M8 11V7a4 4 0 0 1 8 0v4'/%3E%3C/svg%3E") center / contain no-repeat;
}
[dir="rtl"] .svc-shot .bar em { margin-left: 0; margin-right: 10px }
@media (max-width: 1000px) {
  .svc-grid { grid-template-columns: minmax(0, 1fr); max-width: 680px }
}