/* HERO only. Terrain and animals share the exact mountain parallax transform. */
.wildlife-scene{position:absolute;z-index:1;left:64%;top:39%;width:35%;aspect-ratio:3;pointer-events:none;transform:translate(calc(var(--x)*.45),calc(var(--y)*.45));filter:saturate(.73) contrast(.86);opacity:.9;isolation:isolate;mask-image:linear-gradient(90deg,transparent,#000 7%,#000 95%,transparent)}
.scenery{isolation:isolate}
.scenery .city{z-index:2}
.wildlife-terrace,.wildlife-foreground{position:absolute;inset:0;background:url('/assets/wildlife-terrace.webp') center/100% 100% no-repeat;mask-image:linear-gradient(#000 0%,#000 60%,transparent 95%)}
.wildlife-foreground{z-index:3;clip-path:polygon(0 0,18% 0,20% 61%,57% 62%,66% 0,100% 0,100% 100%,0 100%)}
.leopard-traverse{position:absolute;z-index:2;left:8%;top:17%;width:19%;aspect-ratio:1;opacity:0;animation:leopard-passage 76s linear infinite;will-change:transform,opacity}
.leopard-walk{position:absolute;inset:0;overflow:hidden;filter:contrast(.9) saturate(.85)}
.leopard-frames{position:absolute;left:0;top:0;width:400%;height:200%;background:url('/assets/leopard-walk.webp') 0 0/100% 100% no-repeat;animation:leopard-footsteps 1.6s steps(1,end) infinite;will-change:transform}
.leopard-shadow{position:absolute;left:26%;right:8%;top:72%;height:4%;border-radius:50%;background:#24384955;filter:blur(2px);transform:rotate(-2deg)}
@keyframes leopard-passage{0%{opacity:0;transform:translate3d(0,0,0)}4%{opacity:1;transform:translate3d(10%,0,0)}18%{opacity:1;transform:translate3d(100%,1%,0)}34%{opacity:1;transform:translate3d(210%,3%,0)}42%{opacity:0;transform:translate3d(260%,2%,0)}100%{opacity:0;transform:translate3d(260%,2%,0)}}
@keyframes leopard-footsteps{0%,100%{transform:translate3d(0,0,0)}12.5%{transform:translate3d(-25%,0,0)}25%{transform:translate3d(-50%,0,0)}37.5%{transform:translate3d(-75%,0,0)}50%{transform:translate3d(0,-50%,0)}62.5%{transform:translate3d(-25%,-50%,0)}75%{transform:translate3d(-50%,-50%,0)}87.5%{transform:translate3d(-75%,-50%,0)}}
.hero[data-motion-paused] .leopard-traverse,.hero[data-motion-paused] .leopard-frames{animation-play-state:paused}
@media(max-width:1150px) and (min-width:801px){.wildlife-scene{left:61%;top:42%;width:38%}}
@media(max-width:800px){.wildlife-scene{left:53%;top:49%;width:46%}}
@media(max-width:600px){.wildlife-scene{left:2%;top:60%;width:96%;transform:none;opacity:.88}.leopard-traverse{animation-duration:96s}.leopard-frames{animation-duration:2s}}
@media(prefers-reduced-motion:reduce){.wildlife-scene{transform:none}.leopard-traverse{animation:none;opacity:1;transform:translate3d(115%,1%,0)}.leopard-frames{animation:none;transform:translate3d(-75%,0,0)}}

/* Isolate only the larger ibex head; the torso and its contact shadows stay fixed. */
.wildlife-terrace,.wildlife-foreground{mask-image:linear-gradient(#000 0%,#000 60%,transparent 95%),url('/assets/ibex-head-mask.svg');mask-size:100% 100%;mask-composite:intersect}
.wildlife-ibex-head{position:absolute;inset:0;z-index:4;pointer-events:none;background:url('/assets/wildlife-terrace.webp') center/100% 100% no-repeat;clip-path:polygon(68% 12%,76.667% 12%,76.667% 25.5%,72.833% 27.5%,71.5% 37%,68.25% 36.25%);transform-origin:71.5% 34%;animation:ibex-gentle-nod 18s ease-in-out infinite}
@keyframes ibex-gentle-nod{0%,8%,22%,100%{transform:rotate(0deg)}14%{transform:rotate(-7deg)}18%{transform:rotate(1deg)}}
.hero[data-motion-paused] .wildlife-ibex-head{animation-play-state:paused}
@media(prefers-reduced-motion:reduce){.wildlife-ibex-head{animation:none;transform:none}}