/* 06 / 07: a quiet constellation between the person and the structure. */
:is([data-variant="6"],[data-variant="7"],[data-variant="13"],[data-variant="14"]) .form-intro .construction-art .build-person{translate:16px 0}
:is([data-variant="6"],[data-variant="7"],[data-variant="13"],[data-variant="14"]) .form-intro .construction-art g:not(.build-person){translate:-16px 0}
:is([data-variant="6"],[data-variant="7"],[data-variant="13"],[data-variant="14"]) .form-intro .build-square{animation-name:intro-square-thought}
:is([data-variant="6"],[data-variant="7"],[data-variant="13"],[data-variant="14"]) .form-intro .build-triangle{animation-name:intro-triangle-thought;animation-delay:-4.25s}
:is([data-variant="6"],[data-variant="7"],[data-variant="13"],[data-variant="14"]) .form-intro .build-idea{animation-name:intro-circle-thought}
:is([data-variant="6"],[data-variant="7"],[data-variant="13"],[data-variant="14"]) .form-intro .build-link{animation-name:intro-curve-thought;animation-delay:-3.5s}
:is([data-variant="6"],[data-variant="7"],[data-variant="13"],[data-variant="14"]) .form-intro :is(.build-square,.build-triangle,.build-idea,.build-link){animation-duration:9s;animation-timing-function:ease-in-out}
/* The base has the same restrained sway in the hero, concept and service scenes. */
:is([data-variant="6"],[data-variant="7"],[data-variant="13"],[data-variant="14"]) .construction-art .build-base{animation-name:construction-base-sway;animation-duration:10.5s}
@keyframes intro-square-thought{
 0%,100%{transform:translate(-119px,8px) rotate(-7deg)}
 50%{transform:translate(-103px,18px) rotate(4deg)}
}
@keyframes intro-triangle-thought{
 0%,100%{transform:translate(-150px,62px) rotate(-5deg)}
 50%{transform:translate(-130px,52px) rotate(5deg)}
}
@keyframes intro-circle-thought{
 0%,100%{transform:translate(-10px,5px)}
 50%{transform:translate(6px,-5px)}
}
@keyframes intro-curve-thought{
 0%,100%{transform:translate(-5px,5px) rotate(-6deg)}
 50%{transform:translate(9px,-5px) rotate(6deg)}
}
@keyframes construction-base-sway{
 from{transform:translate(-3px,2px) rotate(-1.2deg)}
 to{transform:translate(3px,-2px) rotate(1.2deg)}
}
/* 13 / 14: a single mobile reading flow, with the artwork between paragraphs. */
@media(max-width:768px){
 :is(.variant-13,.variant-14) .form-intro h2{margin-bottom:18px}
 :is(.variant-13,.variant-14) .form-intro .prose{padding-top:0}
 :is(.variant-13,.variant-14) .form-intro .prose>p{margin:0}
 :is(.variant-13,.variant-14) .form-intro .prose>p+p{margin-top:22px}
 :is(.variant-13,.variant-14) .form-intro .form-mini-art{margin:16px auto 18px}
 :is(.variant-13,.variant-14) .form-intro .geometry-small{aspect-ratio:64/31}
 :is(.variant-13,.variant-14) .form-practice .geometry-practice{
  width:min(88%,300px);aspect-ratio:120/109;margin:16px auto 22px;
 }
}

/* A restrained Japanese lead, just above the body copy in size. */
:is(.variant-13,.variant-14) .form-intro .prose>p:first-child{font-size:15px;line-height:2}
@media(max-width:768px){
 :is(.variant-13,.variant-14) .form-intro .prose>p:first-child{font-size:14px}
}