/* =========================================================
   RADAR v4.2 — 3D, fades, smooth transitions
   ========================================================= */

/* --- native cross-document page transitions (fade + blur) --- */
@view-transition{navigation:auto}
::view-transition-old(root){animation:vt-out .45s cubic-bezier(.22,1,.36,1) both}
::view-transition-new(root){animation:vt-in .7s cubic-bezier(.22,1,.36,1) both}
@keyframes vt-out{to{opacity:0;filter:blur(10px);transform:scale(.985)}}
@keyframes vt-in{from{opacity:0;filter:blur(10px);transform:scale(1.015)}}

/* --- fallback curtain for browsers without cross-document VT --- */
.curtain{position:fixed;inset:0;z-index:95;pointer-events:none;background:var(--bg);opacity:0;visibility:hidden;transition:opacity .5s cubic-bezier(.22,1,.36,1),visibility 0s .5s}
.leaving .curtain{opacity:1;visibility:visible;pointer-events:auto;transition:opacity .5s cubic-bezier(.22,1,.36,1)}
.leaving main,.leaving .nav{filter:blur(8px);transition:filter .5s cubic-bezier(.22,1,.36,1)}

/* --- section tone shift (colour) + aura hue --- */
body{background-color:var(--tone,var(--bg));transition:background-color 1.4s cubic-bezier(.22,1,.36,1)}
/* aura tint per section: cheap opacity shift (no filters on the fixed layer) */
.aura .a2{transition:opacity 2.4s cubic-bezier(.22,1,.36,1)}
[data-sec=approach] .aura .a2,[data-sec=services] .aura .a2{opacity:1.0}
[data-sec=brief] .aura .a3,[data-sec=contact] .aura .a3{opacity:1}
[data-sec=work-s] .aura .a2,[data-sec=about] .aura .a2{opacity:.6}

/* --- fades everywhere: enter (rise + blur→sharp), exit (fade up + blur) --- */
.js .fx:not(.reveal){opacity:0;transform:translate3d(0,26px,0);filter:blur(6px);
  transition:opacity 1.1s cubic-bezier(.22,1,.36,1) calc(var(--fd,0) * 90ms),transform 1.1s cubic-bezier(.22,1,.36,1) calc(var(--fd,0) * 90ms),filter 1.1s cubic-bezier(.22,1,.36,1) calc(var(--fd,0) * 90ms)}
.js .fx.fx-in:not(.reveal){opacity:1;transform:none;filter:none}
.js .fx.fx-out{opacity:.18!important;filter:blur(5px)!important;transform:translate3d(0,-18px,0)!important;transition:opacity .8s cubic-bezier(.22,1,.36,1),transform .8s cubic-bezier(.22,1,.36,1),filter .8s cubic-bezier(.22,1,.36,1)!important}
.js .reveal{transition-delay:calc(var(--fd,0) * 90ms)}

/* images crossfade over the placeholder */
.media img.xf{opacity:0;filter:blur(12px);transform:scale(1.04);transition:opacity 1.2s cubic-bezier(.22,1,.36,1),filter 1.2s cubic-bezier(.22,1,.36,1),transform 1.6s cubic-bezier(.22,1,.36,1)}
.media img.xf.loaded{opacity:1;filter:none;transform:none}

/* --- 3D hero sphere (WebGL owns .waves-main) --- */
.gl .waves-main{-webkit-mask-image:radial-gradient(60% 58% at 41% 54%,#000 36%,transparent 78%);mask-image:radial-gradient(60% 58% at 41% 54%,#000 36%,transparent 78%)}
.gl.ready .waves-main{opacity:.86}
.gl.ready .waves-blur{opacity:.4}
.gl .hero-sphere{transform:translate3d(var(--px,0),calc(-50% + var(--py,0px) + var(--sy,0px)),0) scale(var(--hz,1))}
.gl .sph-blur{opacity:.16}

/* --- services: chapters in perspective on the horizontal track --- */
@media (min-width:1024px){
  .pinned .sv-track{perspective:1600px}
  .pinned .chapter{translate:0 0 var(--cz,0px);rotate:y var(--cry,0deg);opacity:var(--co,1);transition:border-color .5s,opacity .3s linear}
}

/* --- work cards: deeper 3D tilt + layered parallax --- */
.work{perspective:1200px}
.js .work.reveal{transform:perspective(1200px) rotateX(16deg) translate3d(0,48px,-40px);transform-origin:50% 100%}
.js .work.reveal.in{transform:none}
.work-frame{transform-style:preserve-3d}
.work-frame .media{translate:var(--lx,0px) 0}
.work-meta{transition:transform .6s cubic-bezier(.22,1,.36,1)}

/* --- process steps rise in 3D --- */
.ap{perspective:1000px}
.js .ap li.reveal{transform:perspective(900px) rotateX(42deg) translate3d(0,64px,-70px);transform-origin:50% 100%;filter:blur(6px)}
.js .ap li.reveal.in{transform:none;filter:none}
.js .ap li:nth-child(2){--fd:1}.js .ap li:nth-child(3){--fd:2}.js .ap li:nth-child(4){--fd:3}

/* --- form steps: depth + blur transitions --- */
@keyframes stepin3d{from{opacity:0;filter:blur(8px);transform:perspective(900px) translate3d(calc(var(--dirx,1) * 46px),0,-60px) rotateY(calc(var(--dirx,1) * -10deg))}to{opacity:1;filter:none;transform:none}}
.bstep.is-on{animation:stepin3d .75s cubic-bezier(.22,1,.36,1)}

/* --- sticky nav: smooth state + tuck away on scroll down --- */
.nav{transition:background .5s,backdrop-filter .5s,transform .6s cubic-bezier(.22,1,.36,1),padding .5s cubic-bezier(.22,1,.36,1),border-color .5s}
.nav .brand img,.nav .brand svg{transition:transform .5s cubic-bezier(.22,1,.36,1)}
.nav.scrolled .brand img,.nav.scrolled .brand svg{transform:scale(.9)}

/* smooth scroll owns the page on desktop */
.smooth{scroll-behavior:auto!important}

/* --- reduced motion: simple fades only --- */
@media (prefers-reduced-motion:reduce){
  ::view-transition-old(root),::view-transition-new(root){animation:none}
  .js .fx:not(.reveal){transform:none;filter:none;transition:opacity .6s ease}
  .js .fx.fx-out{opacity:1!important;filter:none!important;transform:none!important}
  .js .work.reveal,.js .ap li.reveal{transform:none!important;filter:none!important}
  .media img.xf{filter:none;transform:none;transition:opacity .6s ease}
  .bstep.is-on{animation:none}
  .pinned .chapter{translate:none;rotate:none;opacity:1}
  .curtain{display:none}
}

/* hero: deeper fade into the next section */
.gl .hero-vign{background:radial-gradient(75% 90% at 18% 50%,rgba(11,12,17,.95) 30%,rgba(11,12,17,.25) 68%,transparent),linear-gradient(0deg,var(--tone,var(--bg)) 0,transparent 42%)}
[dir=rtl].gl .hero-vign{background:radial-gradient(75% 90% at 82% 50%,rgba(11,12,17,.95) 30%,rgba(11,12,17,.25) 68%,transparent),linear-gradient(0deg,var(--tone,var(--bg)) 0,transparent 42%)}

/* =========================================================
   v4.2b — section 3D objects, office map, real images, EN caps
   ========================================================= */
.obj3d{position:absolute;pointer-events:none;opacity:0;transition:opacity 1.6s cubic-bezier(.22,1,.36,1)}
.obj3d.in{opacity:1}
.obj3d canvas{display:block;width:100%;height:100%}
/* services chapters: object sits in the art corner, behind copy */
.ch-art .obj-ch{width:min(46%,380px);aspect-ratio:1;inset-block-start:6%;inset-inline-end:4%;opacity:0}
.ch-art .obj-ch.in{opacity:.9}
.chapter:has(.ch-media) .ch-art .obj-ch{inset-block-start:auto;inset-block-end:4%;width:min(34%,280px)}

/* section heads with an object */
.work-s .sec-head,.approach .sec-head,.about-body,.contact{position:relative}
.obj-frames,.obj-steps{width:clamp(180px,22vw,320px);aspect-ratio:1;inset-block-start:50%;inset-inline-end:0;translate:0 -50%}
.obj-orbit{width:clamp(200px,24vw,340px);aspect-ratio:1;inset-block-start:-40px;inset-inline-end:-20px;z-index:-1}
.obj-orbit.in{opacity:.75}
.obj-contact{width:clamp(220px,28vw,420px);aspect-ratio:1;inset-block-start:clamp(40px,6vw,90px);inset-inline-end:0;z-index:0}
.obj-contact.in{opacity:.85}
@media (max-width:759px){
  .obj-frames,.obj-steps{width:120px;inset-block-start:0;translate:none;opacity:0}
  .obj-frames.in,.obj-steps.in{opacity:.55}
  .obj-orbit{width:150px;inset-block-start:-30px}
  .obj-contact{width:160px;inset-block-start:20px;opacity:0}.obj-contact.in{opacity:.5}
  .ch-art .obj-ch{width:42%;inset-block-start:4%}
}
/* old contact sphere host no longer exists; keep heads above objects */
.work-s .sec-head>*:not(.obj3d),.approach .sec-head>*:not(.obj3d),.contact>*:not(.obj3d){position:relative;z-index:1}

/* real images */
.media picture{display:block;width:100%;height:100%}
.media picture img{width:100%;height:100%;object-fit:cover;display:block}

.ch-media::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 40%,rgba(11,12,17,.55));pointer-events:none}

/* office map */
.map{position:relative;margin-top:clamp(48px,6vw,80px);border:1px solid var(--line);border-radius:22px;overflow:hidden;min-height:clamp(320px,36vw,460px);background:#0E1017;isolation:isolate}
.map-poster{position:absolute;inset:0;display:grid;place-items:center;background:radial-gradient(60% 70% at 70% 50%,rgba(112,112,172,.16),transparent 70%),repeating-linear-gradient(0deg,transparent 0 47px,rgba(255,255,255,.035) 47px 48px),repeating-linear-gradient(90deg,transparent 0 47px,rgba(255,255,255,.035) 47px 48px);transition:opacity .9s cubic-bezier(.22,1,.36,1)}
[dir=rtl] .map-poster{background:radial-gradient(60% 70% at 30% 50%,rgba(112,112,172,.16),transparent 70%),repeating-linear-gradient(0deg,transparent 0 47px,rgba(255,255,255,.035) 47px 48px),repeating-linear-gradient(90deg,transparent 0 47px,rgba(255,255,255,.035) 47px 48px)}
.map-radar{position:absolute;inset-block-start:50%;inset-inline-end:22%;width:220px;height:220px;translate:50% -50%}
[dir=rtl] .map-radar{translate:-50% -50%}
.map-radar i{position:absolute;inset:0;border:1px solid rgba(160,170,230,.35);border-radius:50%;animation:mapping 4.8s cubic-bezier(.22,1,.36,1) infinite}
.map-radar i:nth-child(2){animation-delay:1.6s}.map-radar i:nth-child(3){animation-delay:3.2s}
@keyframes mapping{from{transform:scale(.15);opacity:.9}to{transform:scale(1);opacity:0}}
.map-pin{position:absolute;inset:50% auto auto 50%;width:14px;height:14px;margin:-7px;border-radius:50%;background:var(--fg);box-shadow:0 0 0 6px rgba(255,255,255,.08)}
.map-info{position:relative;z-index:2;align-self:start;justify-self:start;padding:clamp(24px,3vw,40px);max-width:520px}
.map-addr{font:var(--d-w) clamp(24px,2.4vw,34px)/1.15 var(--f-d);letter-spacing:var(--d-ls);margin-top:10px}
.map-note{color:var(--mute);margin-top:10px;font-size:14px}
.map-acts{position:absolute;z-index:3;inset-block-end:clamp(20px,2.6vw,32px);inset-inline-start:clamp(24px,3vw,40px);display:flex;flex-wrap:wrap;gap:10px}
.map iframe{position:absolute;inset:0;width:100%;height:100%;border:0;z-index:1;opacity:0;filter:invert(.92) hue-rotate(180deg) grayscale(.35) contrast(.92) brightness(.92);transition:opacity 1s cubic-bezier(.22,1,.36,1)}
.map.loaded iframe{opacity:1}
.map.loaded .map-poster{opacity:0}
.map.on .map-load{display:none}
.map.loaded .map-info{background:linear-gradient(180deg,rgba(11,12,17,.9),rgba(11,12,17,0));max-width:none;width:100%;pointer-events:none}
@media (max-width:759px){.map-radar{inset-inline-end:50%;inset-block-start:58%;width:160px;height:160px}.map-acts{inset-inline-end:clamp(24px,3vw,40px)}}

/* English: display + section headings in CAPITALS (source stays sentence case) */
html[lang=en] .display,html[lang=en] .display-sm,html[lang=en] .h2,html[lang=en] .work-meta h3,html[lang=en] .ch-body h3,html[lang=en] .ap h3,html[lang=en] .bstep legend,html[lang=en] .sv-head h2,html[lang=en] .map-addr{text-transform:uppercase}
html[lang=en] .display{letter-spacing:.01em;line-height:.96}
html[lang=en] .display-sm,html[lang=en] .h2{letter-spacing:.015em;line-height:1}
html[lang=en] .work-meta h3,html[lang=en] .ch-body h3,html[lang=en] .ap h3,html[lang=en] .map-addr{letter-spacing:.03em;line-height:1.08}
html[lang=en] .bstep legend{letter-spacing:.04em}
html[lang=en] .btn,html[lang=en] .btn-ghost{text-transform:uppercase;letter-spacing:.08em;font-size:13.5px}
/* hero sub-line stays sentence case — reads as a voice, not a headline */
html[lang=en] .hero-sub{text-transform:none}
@media (prefers-reduced-motion:reduce){.map-radar i{animation:none;opacity:.3}.obj3d{transition:opacity .6s ease}}
/* map layout fix: poster sits above iframe, transparent to pointer; info top-left, actions bottom */
.map-poster{display:block;z-index:2;pointer-events:none}
.map-info{position:static;max-width:560px}
.map-info .c-k{position:relative}
.map-acts{pointer-events:auto}
.map.loaded .map-poster{opacity:1;background:none}
.map.loaded .map-radar{opacity:0;transition:opacity .6s}
.map.loaded .map-info>p{position:relative;z-index:1}
.map.loaded .map-info{position:absolute;inset:0 0 auto 0;padding-bottom:60px}
/* objects: bigger in chapters, frames kept clear of the work lede */
.ch-art .obj-ch{width:min(58%,440px);inset-block-start:2%;inset-inline-end:0}
.work-s .obj-frames{inset-inline-end:auto;inset-inline-start:40%}
@media (max-width:759px){.ch-art .obj-ch{width:52%;inset-block-start:2%}.work-s .obj-frames{inset-inline-start:auto;inset-inline-end:0}}
/* no layout change when the map loads (CLS) */
.map .map-info{position:absolute;inset:0 0 auto 0;padding-bottom:60px;max-width:none}
.map .map-info>p{position:relative;z-index:1;max-width:560px}
.map .map-radar{z-index:0}
.obj3d canvas{position:absolute;inset:0;width:100%;height:100%}
[dir=rtl] .obj3d canvas{transform:scaleX(-1)}
.ch-art .obj3d{contain:strict}