/* 13 / 14: several movements per phrase, with independent motif periods. */
:is(.variant-13,.variant-14) .form-intro{--scene-offset:-6.3s}
:is(.variant-13,.variant-14) .form-practice{--scene-offset:-11.8s}
:is(.variant-13,.variant-14) :is(.form-hero,.form-intro,.form-practice) .construction-art>svg>g{
 animation-name:var(--motif-motion,none);
 animation-duration:var(--motif-period,20s);
 animation-delay:calc(var(--motif-offset,0s) + var(--scene-offset,0s));
 animation-timing-function:cubic-bezier(.42,0,.58,1);
 animation-iteration-count:infinite;
 animation-direction:normal;
}
.build-person{--motif-motion:graphic-person;--motif-period:21.7s;--motif-offset:-1.1s}
.build-idea{--motif-motion:graphic-idea;--motif-period:17.3s;--motif-offset:-4.3s}
.build-square{--motif-motion:graphic-square;--motif-period:23.9s;--motif-offset:-7.2s}
.build-triangle{--motif-motion:graphic-triangle;--motif-period:19.1s;--motif-offset:-2.6s}
.build-span{--motif-motion:graphic-span;--motif-period:25.7s;--motif-offset:-10.4s}
.build-block{--motif-motion:graphic-block;--motif-period:22.9s;--motif-offset:-5.1s}
.build-link{--motif-motion:graphic-link;--motif-period:18.7s;--motif-offset:-8.9s}
.build-base{--motif-motion:graphic-base;--motif-period:31.3s;--motif-offset:-13.2s}
/* Bring the person and the related ideas closer without shifting the overall centre. */
:is(.variant-13,.variant-14) .form-intro .construction-art>svg>g.build-person{translate:28px 0}
:is(.variant-13,.variant-14) .form-intro .construction-art>svg>g:not(.build-person){translate:-28px 0}
/* Keep the lower motifs just above the base at every independent phase. */
:is(.variant-13,.variant-14) .form-intro .construction-art>svg>g:is(.build-block,.build-span){translate:-28px -6px}
:is(.variant-13,.variant-14) .form-intro .construction-art>svg>g.build-base{translate:-28px 12px}
/* Retain the closer arrangement of the second section. */
.geometry-small .build-square{--motif-motion:graphic-intro-square}
.geometry-small .build-triangle{--motif-motion:graphic-intro-triangle}
.geometry-small .build-idea{--motif-motion:graphic-intro-idea}
.geometry-small .build-link{--motif-motion:graphic-intro-link}
@keyframes graphic-person{
 0%,100%{transform:translate(-2px,1px) rotate(-1.2deg)}
 18%{transform:translate(3px,-8px) rotate(1.8deg)}
 39%{transform:translate(6px,-3px) rotate(.3deg)}
 61%{transform:translate(1px,5px) rotate(-1.6deg)}
 82%{transform:translate(-4px,-5px) rotate(.9deg)}
}
@keyframes graphic-idea{
 0%,100%{transform:translate(-14px,6px)}
 20%{transform:translate(-5px,-12px)}
 41%{transform:translate(12px,-5px)}
 63%{transform:translate(6px,10px)}
 82%{transform:translate(-9px,15px)}
}
@keyframes graphic-square{
 0%,100%{transform:translate(-18px,-10px) rotate(-8deg)}
 17%{transform:translate(-7px,-19px) rotate(3deg)}
 38%{transform:translate(8px,-8px) rotate(10deg)}
 59%{transform:translate(4px,7px) rotate(-2deg)}
 81%{transform:translate(-12px,3px) rotate(-11deg)}
}
@keyframes graphic-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)}
 83%{transform:translate(-2px,-20px) rotate(-2deg)}
}
@keyframes graphic-span{
 0%,100%{transform:translate(7px,-10px) rotate(.9deg)}
 19%{transform:translate(-2px,-16px) rotate(-1.4deg)}
 43%{transform:translate(-6px,-4px) rotate(.4deg)}
 66%{transform:translate(2px,5px) rotate(1.6deg)}
 84%{transform:translate(9px,-2px) rotate(-.6deg)}
}
@keyframes graphic-block{
 0%,100%{transform:translate(-12px,-5px) rotate(-5deg)}
 21%{transform:translate(-5px,-13px) rotate(2deg)}
 44%{transform:translate(6px,-4px) rotate(7deg)}
 67%{transform:translate(1px,7px) rotate(-2deg)}
 84%{transform:translate(-9px,3px) rotate(-7deg)}
}
@keyframes graphic-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)}
 81%{transform:translate(-5px,12px) rotate(-7deg)}
}
@keyframes graphic-base{
 0%,100%{transform:translate(4px,1px) rotate(-.8deg)}
 18%{transform:translate(7px,-2px) rotate(.4deg)}
 42%{transform:translate(8px,1px) rotate(1.1deg)}
 64%{transform:translate(5px,3px) rotate(-.1deg)}
 84%{transform:translate(3px,0) rotate(-1.1deg)}
}
@keyframes graphic-intro-square{
 0%,100%{transform:translate(-119px,8px) rotate(-7deg)}
 17%{transform:translate(-112px,3px) rotate(0)}
 38%{transform:translate(-101px,12px) rotate(6deg)}
 59%{transform:translate(-108px,21px) rotate(2deg)}
 81%{transform:translate(-121px,17px) rotate(-5deg)}
}
@keyframes graphic-intro-triangle{
 0%,100%{transform:translate(-147px,60px) rotate(-4deg)}
 22%{transform:translate(-144px,53px) rotate(2deg)}
 41%{transform:translate(-131px,55px) rotate(6deg)}
 64%{transform:translate(-133px,62px) rotate(0)}
 83%{transform:translate(-145px,64px) rotate(-5deg)}
}
@keyframes graphic-intro-idea{
 0%,100%{transform:translate(-10px,5px)}
 20%{transform:translate(-4px,-5px)}
 41%{transform:translate(6px,-2px)}
 63%{transform:translate(3px,7px)}
 82%{transform:translate(-8px,10px)}
}
@keyframes graphic-intro-link{
 0%,100%{transform:translate(-5px,5px) rotate(-6deg)}
 16%{transform:translate(2px,-4px) rotate(0)}
 38%{transform:translate(9px,-2px) rotate(6deg)}
 63%{transform:translate(5px,6px) rotate(3deg)}
 81%{transform:translate(-3px,9px) rotate(-4deg)}
}
/* 22 / Our perspective: small, occasional gestures within the long drift.
   Each motif makes one brief move per phrase, then takes time to settle. */
/* Static offsets are baked into inner SVG groups to remain visible in Safari. */
.variant-22.variant-13 .form-intro .construction-art>svg>g{translate:none}
.variant-22 .form-intro .build-square{--motif-motion:working-square}
.variant-22 .form-intro .build-triangle{--motif-motion:working-triangle}
.variant-22 .form-intro .build-idea{--motif-motion:working-idea}
.variant-22 .form-intro .build-link{--motif-motion:working-link}
.variant-22 .form-intro .build-block{--motif-motion:working-block}
@keyframes working-square{
 0%,100%{transform:translate(-119px,8px) rotate(-7deg)}
 17%{transform:translate(-112px,3px) rotate(0)}
 38%{transform:translate(-101px,12px) rotate(6deg)}
 52%{transform:translate(-105px,16px) rotate(2deg);animation-timing-function:cubic-bezier(.18,.7,.25,1)}
 54%{transform:translate(-89px,6px) rotate(12deg)}
 63%{transform:translate(-108px,21px) rotate(2deg)}
 81%{transform:translate(-121px,17px) rotate(-5deg)}
}
@keyframes working-triangle{
 0%,100%{transform:translate(-147px,60px) rotate(-4deg)}
 22%{transform:translate(-144px,53px) rotate(2deg)}
 41%{transform:translate(-131px,55px) rotate(6deg)}
 64%{transform:translate(-133px,62px) rotate(0)}
 73%{transform:translate(-137px,63px) rotate(-2deg);animation-timing-function:cubic-bezier(.18,.7,.25,1)}
 75.5%{transform:translate(-149px,43px) rotate(-11deg)}
 84%{transform:translate(-145px,64px) rotate(-5deg)}
}
@keyframes working-idea{
 0%,100%{transform:translate(-10px,5px)}
 20%{transform:translate(-4px,-5px)}
 34%{transform:translate(-1px,-4px);animation-timing-function:cubic-bezier(.18,.7,.25,1)}
 36%{transform:translate(15px,-11px)}
 43%{transform:translate(6px,-2px)}
 63%{transform:translate(3px,7px)}
 82%{transform:translate(-8px,10px)}
}
@keyframes working-link{
 0%,100%{transform:translate(-5px,5px) rotate(-6deg)}
 16%{transform:translate(2px,-4px) rotate(0)}
 22%{transform:translate(4px,-3px) rotate(2deg);animation-timing-function:cubic-bezier(.18,.7,.25,1)}
 24.5%{transform:translate(19px,-14px) rotate(-14deg)}
 34%{transform:translate(9px,-2px) rotate(6deg)}
 63%{transform:translate(5px,6px) rotate(3deg)}
 81%{transform:translate(-3px,9px) rotate(-4deg)}
}
@keyframes working-block{
 0%,100%{transform:translate(-12px,-5px) rotate(-5deg)}
 21%{transform:translate(-5px,-13px) rotate(2deg)}
 44%{transform:translate(6px,-4px) rotate(7deg)}
 64%{transform:translate(1px,5px) rotate(-2deg);animation-timing-function:cubic-bezier(.18,.7,.25,1)}
 66%{transform:translate(5px,-7px) rotate(4deg)}
 74%{transform:translate(0,1px) rotate(-2deg)}
 84%{transform:translate(-9px,3px) rotate(-7deg)}
}
@media(prefers-reduced-motion:reduce){
 :is(.variant-13,.variant-14) .construction-art>svg>g{animation:none!important}
}