/* ===== Motion: subtle, one easing, short durations ===== */
:root{--ease:cubic-bezier(.22,.61,.36,1);--ease-out:cubic-bezier(.16,1,.3,1)}

/* Photo layers for hero and banners (enable parallax + entrance) */
.h-hero,.banner{position:relative;overflow:hidden;isolation:isolate;background-image:none!important}
.h-hero .media,.banner .media{position:absolute;inset:-6% 0;z-index:-2;background-size:cover;background-position:center;will-change:transform}
.h-hero::after,.banner::after{content:"";position:absolute;inset:0;z-index:-1}
.h-hero::after{background:linear-gradient(180deg,rgba(53,43,45,.8),rgba(53,43,45,.9))}
.banner::after{background:linear-gradient(90deg,rgba(53,43,45,.94),rgba(53,43,45,.7))}
[dir="rtl"] .banner::after{background:linear-gradient(270deg,rgba(53,43,45,.94),rgba(53,43,45,.7))}
.h-about-img{overflow:hidden}
.h-about-img img{will-change:transform}

/* Only hide things when JS has confirmed motion is allowed */
html.motion .rv{opacity:0;transform:translate3d(0,24px,0);transition:opacity .7s var(--ease) var(--d,0ms),transform .7s var(--ease) var(--d,0ms),translate .35s var(--ease),box-shadow .35s var(--ease)}
html.motion .rv.in{opacity:1;transform:none}

/* Hero / banner entrance */
@keyframes az-up{from{opacity:0;transform:translate3d(0,22px,0)}to{opacity:1;transform:none}}
@keyframes az-media{from{opacity:0;scale:1.06}to{opacity:1;scale:1}}
html.motion .intro .media{animation:az-media 1.6s var(--ease-out) both}
html.motion .intro .h-hero-text>*,html.motion .intro .h-stats,
html.motion .intro .page-head>*:not(.svc-hero),html.motion .intro .svc-hero>div>*{animation:az-up .8s var(--ease) both}
html.motion .intro .h-hero-text>*:nth-child(1),html.motion .intro .page-head>*:nth-child(1),html.motion .intro .svc-hero>div>*:nth-child(1){animation-delay:.15s}
html.motion .intro .h-hero-text>*:nth-child(2),html.motion .intro .page-head>*:nth-child(2),html.motion .intro .svc-hero>div>*:nth-child(2){animation-delay:.27s}
html.motion .intro .h-hero-text>*:nth-child(3),html.motion .intro .page-head>*:nth-child(3),html.motion .intro .svc-hero>div>*:nth-child(3){animation-delay:.39s}
html.motion .intro .h-hero-text>*:nth-child(4),html.motion .intro .page-head>*:nth-child(4),html.motion .intro .svc-hero>div>*:nth-child(4){animation-delay:.51s}
html.motion .intro .page-head>*:nth-child(5){animation-delay:.6s}
html.motion .intro .h-stats{animation-delay:.7s}

/* Hover (desktop pointers only): slight lift + image zoom */
.h-card,.h-work-item,.tile,.wall-item,.pthumb,.way,.ccard,.picon,.ficons a,.btn{transition:translate .35s var(--ease),box-shadow .35s var(--ease),background-color .25s var(--ease),border-color .25s var(--ease),color .25s var(--ease)}
.h-card-img img,.h-work-item img,.tile img,.wall-item img,.pthumb img{transition:transform .7s var(--ease)}
@media (hover:hover) and (pointer:fine){
  .h-card:hover,.h-work-item:hover,.tile:hover,.wall-item:hover,.pthumb:hover{translate:0 -4px;box-shadow:0 18px 36px -24px rgba(53,43,45,.55)}
  .h-card:hover .h-card-img img,.h-work-item:hover img,.tile:hover img,.wall-item:hover img,.pthumb:hover img{transform:scale(1.05)}
  .way:hover,.ccard:hover{translate:0 -2px}
  .h-link svg,.tlink svg,.more svg{transition:transform .3s var(--ease)}
  .h-link:hover svg,.tlink:hover svg{transform:translateX(3px)}
  [dir="rtl"] .h-link:hover svg,[dir="rtl"] .tlink:hover svg{transform:translateX(-3px) scaleX(-1)}
}
/* stop the hover lift fighting the reveal transform */

@media (prefers-reduced-motion:reduce){
  html.motion .rv{opacity:1!important;transform:none!important}
  .media,.h-about-img img{transform:none!important;animation:none!important}
}

/* Mobile menu: closed menu (and its sub-links) must never catch taps */
@media (max-width:920px){
  .links:not(.open),.links:not(.open) *{pointer-events:none!important}
}