/* First-visit intro overlay for /ar/home and /en/home (approved design, CSS/JS only, no video).
   Hidden unless the inline head check sets html.nj-intro-on (JS on, first visit, motion allowed). */
.nj-intro{display:none}
html.nj-intro-on .nj-intro{display:block;position:fixed;inset:0;z-index:9999;background:#12100d;opacity:1;transition:opacity .35s ease;animation:nj-intro-failsafe .35s ease 4s forwards}
html.nj-intro-on .nj-intro.out{opacity:0;pointer-events:none}
@keyframes nj-intro-failsafe{to{opacity:0;visibility:hidden;pointer-events:none}}
.nj-intro .nj-hero{height:100%;min-height:0}
.nj-intro-skip{position:absolute;top:max(16px,env(safe-area-inset-top));inset-inline-end:16px;z-index:10;min-height:44px;padding:10px 18px;border-radius:999px;border:1px solid rgba(246,245,244,.45);background:rgba(18,16,13,.6);color:#f6f5f4;font:600 15px/1 "IBM Plex Sans Arabic","IBM Plex Sans",Arial,sans-serif;cursor:pointer}
.nj-intro-skip:hover,.nj-intro-skip:focus-visible{background:#FF5A36;border-color:#FF5A36;color:#12100d;outline:2px solid #f6f5f4;outline-offset:2px}
@media (prefers-reduced-motion:reduce){html.nj-intro-on .nj-intro{display:none!important}}
.nj-hero{--acc:#FF5A36;--bg:#12100d;--ivory:#f6f5f4;position:relative;overflow:hidden;width:100%;min-height:100vh;min-height:100svh;background:var(--bg);color:var(--ivory);font-family:Inter,"Helvetica Neue",Arial,sans-serif;display:grid;place-items:center;isolation:isolate}
.nj-hero *{box-sizing:border-box}
.nj-hero:before{content:"";position:absolute;inset:0;background:radial-gradient(rgba(246,245,244,.07) 1px,transparent 1.2px) 0 0/22px 22px;z-index:-2;-webkit-mask:radial-gradient(ellipse at center,#000 30%,transparent 85%);mask:radial-gradient(ellipse at center,#000 30%,transparent 85%)}
.nj-hero:after{content:"";position:absolute;inset:0;background:radial-gradient(ellipse 60% 45% at 50% 52%,rgba(255,90,54,.13),transparent 70%);z-index:-1}
.nj-stack{position:relative;display:flex;flex-direction:column;align-items:center;line-height:.86;text-align:center;user-select:none}
.nj-word{font-weight:900;font-size:clamp(64px,19vw,300px);letter-spacing:-.065em;margin:0;white-space:nowrap;padding-right:.06em}
.nj-stack-ar{line-height:1.2}
.nj-stack-ar .nj-word{letter-spacing:0;padding:0;font-family:"IBM Plex Sans Arabic","Noto Sans Arabic",Tahoma,sans-serif;font-weight:800}
.nj-en{font-family:Inter,"Helvetica Neue",Arial,sans-serif;letter-spacing:.04em}
.nj-ghost{color:transparent;-webkit-text-stroke:1.5px rgba(255,90,54,.22);opacity:0;background:radial-gradient(rgba(255,90,54,.16) 1px,transparent 1.3px) 0 0/6px 6px;-webkit-background-clip:text;background-clip:text}
.nj-main{color:var(--acc);position:relative;z-index:2;text-shadow:0 10px 60px rgba(255,90,54,.25);opacity:0;transform:translateY(8%) scale(.82);filter:blur(10px)}
.nj-ar{position:absolute!important;bottom:7%;left:50%;translate:-50% 0;white-space:nowrap;font-family:"Noto Sans Arabic",Tahoma,sans-serif;font-weight:700;font-size:clamp(22px,3.2vw,44px);color:var(--ivory);margin:.35em 0 0;display:flex;align-items:center;gap:.6em;opacity:0;transform:translateY(12px);position:relative;z-index:3;line-height:1.4}
.nj-ar small{font-family:Inter,Arial,sans-serif;font-size:.42em;letter-spacing:.3em;font-weight:600;color:rgba(246,245,244,.6);text-transform:uppercase}
.nj-diamond{width:.38em;height:.38em;border:2px solid var(--acc);transform:rotate(45deg);display:inline-block}
.nj-path{position:absolute;inset:0;width:100%;height:100%;z-index:1;pointer-events:none;overflow:visible}
.nj-path .dots{fill:none;stroke:var(--acc);stroke-width:2.2;stroke-dasharray:.1 9;stroke-linecap:round;opacity:.85}
.nj-path .reveal{fill:none;stroke:#fff;stroke-width:30;stroke-dasharray:1;stroke-dashoffset:1}
.nj-path .node{fill:var(--acc);opacity:0}
.nj-tiles{position:absolute;inset:0;z-index:4;pointer-events:none}
.nj-tile{position:absolute;left:0;top:0;width:var(--s,74px);height:var(--s,74px);margin:calc(var(--s,74px)/-2) 0 0 calc(var(--s,74px)/-2);opacity:0}
.nj-tile i{display:grid;place-items:center;width:100%;height:100%;border-radius:22%;background:linear-gradient(145deg,rgba(246,245,244,.34),rgba(246,245,244,.12));border:1px solid rgba(246,245,244,.35);box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 18px 40px rgba(0,0,0,.45);-webkit-backdrop-filter:blur(10px) saturate(1.3);backdrop-filter:blur(10px) saturate(1.3);transform:rotate(var(--r,0deg));animation:nj-float 5s ease-in-out infinite;animation-delay:var(--fd,0s);animation-play-state:paused}
.nj-tile svg{width:46%;height:46%;padding:9%;box-sizing:content-box;border-radius:24%;background:var(--bg);color:var(--ivory)}
.nj-tile.acc svg{background:var(--acc);color:var(--bg)}
.nj-tile.iv svg{background:var(--ivory);color:var(--bg)}
.nj-hero.play .nj-tile i,.nj-hero.done .nj-tile i{animation-play-state:running}
@keyframes nj-float{0%,100%{translate:0 0}50%{translate:0 -9px}}
/* play */
.nj-hero.play .nj-main{animation:nj-in 1.1s cubic-bezier(.2,.9,.2,1) .1s forwards}
.nj-hero.play .nj-ghost{animation:nj-fade 1.2s ease .7s forwards}
.nj-hero.play .nj-ar{animation:nj-up .6s ease 1s forwards}
.nj-hero.play .reveal{animation:nj-draw 1.3s cubic-bezier(.6,0,.3,1) .8s forwards}
.nj-hero.play .node{animation:nj-fade .3s ease 1.9s forwards}
@keyframes nj-in{to{opacity:1;transform:none;filter:none}}
@keyframes nj-fade{to{opacity:1}}
@keyframes nj-up{to{opacity:1;transform:none}}
@keyframes nj-draw{to{stroke-dashoffset:0}}
/* final/static */
.nj-hero.done .nj-main,.nj-hero.done .nj-ghost,.nj-hero.done .nj-ar,.nj-hero.done .node,.nj-hero.done .nj-tile{opacity:1;transform:none;filter:none;animation:none}
.nj-hero.done .reveal{stroke-dashoffset:0;animation:none}
@media (prefers-reduced-motion:reduce){.nj-hero .nj-main,.nj-hero .nj-ghost,.nj-hero .nj-ar,.nj-hero .node,.nj-hero .nj-tile{opacity:1!important;transform:none!important;filter:none!important;animation:none!important}.nj-hero .reveal{stroke-dashoffset:0!important;animation:none!important}.nj-tile i{animation:none!important}}
@media (max-width:640px){.nj-path .node{display:none}.nj-word{font-size:21vw}.nj-tile{--s:52px!important}.nj-stack{line-height:.95}}
