/* "برّا جو الشغل" (AR first): a 3D fly-through gallery. The stage is pinned while you scroll; each photo floats toward you out of the haze. Without JS or with reduced motion it is a plain photo grid. */
.offsec{position:relative;padding:88px var(--m) 60px;background-image:radial-gradient(rgba(255,193,7,.1) 1.2px,transparent 1.5px);background-size:20px 20px;background-position:10px 10px} /* taste-skill-ignore: dot pattern, not a gradient fill */
.offsec .dtitle{margin-bottom:20px}
.off-lead{margin-bottom:12px}
/* gallery: default = a simple grid */
.fstage{display:block}
.world{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.fc{margin:0;position:relative;background:var(--bg2);overflow:hidden}
.fc img{display:block;width:100%;height:100%;object-fit:cover;aspect-ratio:1/1}
.fc.land{grid-column:1/-1}.fc.land img{aspect-ratio:16/11}.fc.port img{aspect-ratio:9/16}
.fc .sh{position:absolute;inset:0;background:var(--bg);opacity:0;pointer-events:none}
.fcap,.fdots,.fhint{display:none}
/* gallery: 3D tunnel when JS is active */
.fly.is3d{height:calc(90svh + var(--n)*24svh);margin-inline:calc(var(--m)*-1)}
.fly.is3d .fstage{position:sticky;top:5svh;height:90svh;overflow:hidden;perspective:820px;perspective-origin:50% 46%}
.fly.is3d .world{display:block;position:absolute;inset:0;transform-style:preserve-3d}
.fly.is3d .fc{position:absolute;left:50%;top:50%;width:min(94vw,440px);border:5px solid var(--bg);background:var(--bg2);will-change:transform,opacity;backface-visibility:hidden}
.fly.is3d .fc.land{width:min(98vw,500px);grid-column:auto}
.fly.is3d .fc.port{width:min(72vw,340px)}
.fly.is3d .fc img{aspect-ratio:auto;height:auto}
.fly.is3d .fc.sq img{aspect-ratio:1/1;height:auto}
.fly.is3d .fc.land img{aspect-ratio:1100/792}
.fly.is3d .fc.port img{aspect-ratio:563/1000}
.fly.is3d .fcap{display:flex;position:absolute;inset-inline:0;bottom:7%;justify-content:center;align-items:center;gap:10px;min-height:34px;padding-inline:20px;font-size:21px;line-height:1.35;color:var(--pri);text-align:center;transition:opacity .4s var(--ease),transform .4s var(--ease);pointer-events:none}
.fly.is3d .fcap.en{direction:ltr;font-family:'U',sans-serif;font-weight:500;font-size:19px}
.fly.is3d .fcap.swap{opacity:0;transform:translateY(8px)}
.fly.is3d .fcap::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--acc);flex:none}
.fly.is3d .fcap:empty::before{display:none}
.fly.is3d .fdots{display:flex;position:absolute;inset-inline:0;bottom:2.5%;justify-content:center;gap:7px;direction:ltr}
.fdots i{width:7px;height:7px;border-radius:50%;background:rgba(254,254,254,.25);transition:background .3s,transform .4s var(--ease)}
.fdots i.on{background:var(--acc);transform:scale(1.5)}
/* scroll hint: an LED column like the wand, its dots lighting top to bottom */
.fly.is3d .fhint{display:flex;position:absolute;top:4%;left:50%;z-index:2;align-items:center;gap:10px;padding:8px 16px 8px 14px;border-radius:45px;background:rgba(32,32,42,.88);color:var(--txt);font-size:14px;line-height:1;white-space:nowrap;transform:translateX(-50%);transition:opacity .5s var(--ease),transform .5s var(--ease);pointer-events:none}
.fhint.gone{opacity:0;transform:translate(-50%,-8px)}
.fhint.nudge{animation:fhNudge .6s var(--ease)}
.fh-dots{display:grid;gap:3px}
.fh-dots i{width:5px;height:5px;border-radius:50%;background:var(--acc);opacity:.18;animation:fhDot 1.5s infinite}
.fh-dots i:nth-child(2){animation-delay:.2s}.fh-dots i:nth-child(3){animation-delay:.4s}
@keyframes fhDot{0%,60%,100%{opacity:.18}20%{opacity:1}}
@keyframes fhNudge{30%{transform:translate(-50%,6px)}}
/* hobbies: one neat row, logos only */
.hobs{margin-top:34px;margin-bottom:60px}
.hrow{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.hob{display:grid;justify-items:center;align-content:start;gap:6px;text-align:center;color:var(--txt)}
a.hob:hover b{text-decoration:underline;text-underline-offset:5px}
.hi{display:grid;place-items:center;width:100%;height:56px}
.hi svg{width:44px;height:44px;fill:var(--pri);color:var(--pri)}
.hi.game img{width:auto;max-width:92px;height:44px;object-fit:contain;display:block}
.hi.belt svg{width:50px;height:50px;overflow:visible}
.hi.belt .tk-f{transform-box:view-box;transform-origin:50% 100%;animation:tkLunge 2.4s cubic-bezier(.5,0,.2,1) infinite}
.hi.belt .tk-fx{fill:none;stroke:var(--acc);stroke-width:1.6;stroke-linecap:round;opacity:0;animation:tkSpark 2.4s linear infinite}
@keyframes tkLunge{0%,20%,100%{transform:none}38%{transform:translate(-1.5px,0) rotate(-4deg)}46%,62%{transform:translate(1.5px,-.5px) rotate(3deg) scale(1.06)}80%{transform:none}}
@keyframes tkSpark{0%,44%{opacity:0;transform:scale(.6)}50%{opacity:1;transform:scale(1)}66%,100%{opacity:0;transform:scale(1.2)}}
.hob b{font-size:18px;line-height:1.3;color:var(--pri)}
.hob span:last-child{font:400 12.5px/1.4 'U','EB',sans-serif;color:rgba(227,227,227,.8)}
html[lang=ar] .hob span:last-child{direction:rtl}
/* entrance (JS on) */
.js .hobs .lt{opacity:0;transition:opacity .7s var(--ease)}
.js .hobs.seen .lt{opacity:1}
.js .hob{opacity:0;transform:translateY(10px);transition:opacity .7s var(--ease) calc(var(--k,0)*.15s + .3s),transform .7s var(--ease) calc(var(--k,0)*.15s + .3s)}
.js .hobs.seen .hob{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.js .hobs .lt,.js .hob,.fcap{transition:none}.hi.belt svg,.hi.belt .tk-fx{animation:none}.hi.belt .tk-fx{opacity:1}}
@media (min-width:900px){
.offsec{padding:130px var(--m) 80px;max-width:1100px;margin-inline:auto}
.fly.is3d{margin-inline:calc(var(--m)*-1)}
.fly.is3d .fc{width:min(34vw,440px)}
.fly.is3d .fc.land{width:min(48vw,600px)}
.fly.is3d .fc.port{width:min(24vw,310px)}
}