/* 22: brief gestures inside the long drift. People and the base stay quiet.
   Separate hero/service phrases avoid repeating the same scene further down. */
.variant-22 .form-hero .build-idea{--motif-motion:hero-gesture-idea}
.variant-22 .form-hero .build-square{--motif-motion:hero-gesture-square}
.variant-22 .form-hero .build-triangle{--motif-motion:hero-gesture-triangle}
.variant-22 .form-hero .build-link{--motif-motion:hero-gesture-link}
.variant-22 .form-practice .build-idea{--motif-motion:service-gesture-idea;--motif-period:19.7s}
.variant-22 .form-practice .build-square{--motif-motion:service-gesture-square;--motif-period:25.1s}
.variant-22 .form-practice .build-triangle{--motif-motion:service-gesture-triangle;--motif-period:21.3s}
.variant-22 .form-practice .build-link{--motif-motion:service-gesture-link;--motif-period:20.9s}
@keyframes hero-gesture-idea{
 0%,100%{transform:translate(-14px,6px)}
 20%{transform:translate(-5px,-12px)}
 38%{transform:translate(8px,-7px);animation-timing-function:cubic-bezier(.18,.7,.25,1)}
 40.5%{transform:translate(20px,-18px)}
 51%{transform:translate(9px,-3px)}
 63%{transform:translate(6px,10px)}
 82%{transform:translate(-9px,15px)}
}
@keyframes hero-gesture-square{
 0%,100%{transform:translate(-18px,-10px) rotate(-8deg)}
 17%{transform:translate(-7px,-19px) rotate(3deg)}
 38%{transform:translate(8px,-8px) rotate(10deg)}
 53%{transform:translate(5px,2px) rotate(0deg);animation-timing-function:cubic-bezier(.18,.7,.25,1)}
 55%{transform:translate(-9px,-10px) rotate(-13deg)}
 66%{transform:translate(1px,7px) rotate(-2deg)}
 81%{transform:translate(-12px,3px) rotate(-11deg)}
}
@keyframes hero-gesture-triangle{
 0%,100%{transform:translate(-5px,-15px) rotate(5deg)}
 22%{transform:translate(-13px,-7px) rotate(-5deg)}
 41%{transform:translate(-7px,5px) rotate(2deg)}
 64%{transform:translate(0,-4px) rotate(6deg)}
 72%{transform:translate(-1px,-11px) rotate(2deg);animation-timing-function:cubic-bezier(.18,.7,.25,1)}
 74%{transform:translate(11px,-21px) rotate(13deg)}
 85%{transform:translate(-2px,-20px) rotate(-2deg)}
}
@keyframes hero-gesture-link{
 0%,100%{transform:translate(-9px,5px) rotate(-9deg)}
 16%{transform:translate(1px,-11px) rotate(-2deg)}
 25%{transform:translate(5px,-9px) rotate(2deg);animation-timing-function:cubic-bezier(.18,.7,.25,1)}
 27.5%{transform:translate(18px,-17px) rotate(16deg)}
 40%{transform:translate(12px,-6px) rotate(10deg)}
 63%{transform:translate(7px,8px) rotate(4deg)}
 81%{transform:translate(-5px,12px) rotate(-7deg)}
}
@keyframes service-gesture-idea{
 0%,100%{transform:translate(-14px,6px)}
 18%{transform:translate(-6px,-9px);animation-timing-function:cubic-bezier(.18,.7,.25,1)}
 20.5%{transform:translate(-22px,-19px)}
 32%{transform:translate(-3px,-10px)}
 49%{transform:translate(12px,-5px)}
 67%{transform:translate(6px,10px)}
 84%{transform:translate(-9px,15px)}
}
@keyframes service-gesture-square{
 0%,100%{transform:translate(-18px,-10px) rotate(-8deg)}
 17%{transform:translate(-7px,-19px) rotate(3deg)}
 33%{transform:translate(4px,-11px) rotate(6deg);animation-timing-function:cubic-bezier(.18,.7,.25,1)}
 35%{transform:translate(19px,-22px) rotate(19deg)}
 47%{transform:translate(8px,-8px) rotate(10deg)}
 66%{transform:translate(4px,7px) rotate(-2deg)}
 84%{transform:translate(-12px,3px) rotate(-11deg)}
}
@keyframes service-gesture-triangle{
 0%,100%{transform:translate(-5px,-15px) rotate(5deg)}
 22%{transform:translate(-13px,-7px) rotate(-5deg)}
 41%{transform:translate(-7px,5px) rotate(2deg)}
 54%{transform:translate(-3px,0) rotate(4deg);animation-timing-function:cubic-bezier(.18,.7,.25,1)}
 56%{transform:translate(-20px,-11px) rotate(-10deg)}
 69%{transform:translate(0,-4px) rotate(6deg)}
 84%{transform:translate(-2px,-20px) rotate(-2deg)}
}
@keyframes service-gesture-link{
 0%,100%{transform:translate(-9px,5px) rotate(-9deg)}
 16%{transform:translate(1px,-11px) rotate(-2deg)}
 38%{transform:translate(12px,-6px) rotate(10deg)}
 63%{transform:translate(7px,8px) rotate(4deg)}
 75%{transform:translate(0,10px) rotate(-3deg);animation-timing-function:cubic-bezier(.18,.7,.25,1)}
 77.5%{transform:translate(-17px,0) rotate(-21deg)}
 88%{transform:translate(-5px,12px) rotate(-7deg)}
}