/* 06 / 07: a person, separate ideas and a structure assembling beside them. */
.construction-art .build-person{animation:construct-person 12s ease-in-out infinite}
.construction-art .build-idea{animation:construct-idea 12s ease-in-out infinite}
.construction-art .build-square{animation:construct-square 12s cubic-bezier(.45,0,.3,1) infinite}
.construction-art .build-triangle{animation:construct-triangle 12s cubic-bezier(.45,0,.3,1) infinite}
.construction-art .build-span{animation:construct-span 12s cubic-bezier(.45,0,.3,1) infinite}
.construction-art .build-block{animation:construct-block 12s cubic-bezier(.45,0,.3,1) infinite}
.construction-art .build-link{animation:construct-link 12s ease-in-out infinite}
.variant-3 .geo-plane,.construction-art .build-base{animation:construct-base 14s ease-in-out infinite alternate}
.construction-art.geometry-small{aspect-ratio:8/5}
.form-mini-art:has(.construction-art){width:min(100%,440px);margin-top:35px;display:block}
:is(.variant-6,.variant-7) .form-intro{gap:9%;grid-template-columns:1fr 1fr;padding-inline:6%}
.construction-art.geometry-practice{width:90%;max-width:380px}
.construction-art.geometry-practice g{animation-delay:-4s}
.construction-art.geometry-small g{animation-delay:-2s}
/* A quieter base drift keeps the composition from reading as a fixed pedestal. */
@keyframes construct-base{from{transform:translate3d(-1px,1px,0) rotate(-.45deg)}to{transform:translate3d(1px,-1px,0) rotate(.45deg)}}
@keyframes construct-person{0%,100%{transform:translateY(0)}45%,70%{transform:translateY(-5px)}}
@keyframes construct-idea{0%,100%{transform:translate(-12px,8px)}45%,70%{transform:translate(5px,-7px)}}
@keyframes construct-square{0%,100%{transform:translate(-16px,-12px) rotate(-9deg)}45%,70%{transform:translate(0,0) rotate(0)}}
@keyframes construct-triangle{0%,100%{transform:translate(10px,-17px) rotate(8deg)}50%,72%{transform:translate(0,0) rotate(0)}}
@keyframes construct-span{0%,100%{transform:translate(8px,-13px)}40%,72%{transform:translate(0,0)}}
@keyframes construct-block{0%,100%{transform:translate(-13px,-6px) rotate(-6deg)}35%,72%{transform:translate(0,0) rotate(0)}}
@keyframes construct-link{0%,100%{transform:translate(-7px,6px) rotate(-10deg)}48%,70%{transform:translate(6px,-8px) rotate(8deg)}}
@media(max-width:768px){
 :is(.variant-6,.variant-7) .form-hero.hero{min-height:680px}
 :is(.variant-6,.variant-7) .form-hero-layout{inset:135px 23px 65px}
 :is(.variant-6,.variant-7) .geometry-hero{width:clamp(235px,32svh,285px);bottom:-5px;right:-4px}
 :is(.variant-6,.variant-7) .form-intro{padding:70px 23px}
 .form-mini-art:has(.construction-art){width:min(100%,350px);margin:10px auto 25px}
 .construction-art.geometry-practice{width:250px;margin:20px 0 25px auto}
}
@media(prefers-reduced-motion:reduce){.construction-art g{animation:none!important}}