/* October 8 Illustrator feedback. */

/* Show the four items over the title, hold for .2s, then spread them outward. */
.hero-motion .hero-piece {
  animation: hero-arrive-1008 1.1s linear both;
  animation-delay: 1.45s;
}
.hero-motion .hero-piece picture { animation-delay: 2.6s; }
@keyframes hero-arrive-1008 {
  0% { opacity:0; transform:translate(var(--from-x),var(--from-y)) scale(.72); animation-timing-function:ease-out; }
  13.6% { opacity:1; transform:translate(var(--from-x),var(--from-y)) scale(.72); }
  31.8% { opacity:1; transform:translate(var(--from-x),var(--from-y)) scale(.72); animation-timing-function:cubic-bezier(.16,.8,.3,1); }
  85% { opacity:1; transform:translate(0,0) scale(1.025); }
  100% { opacity:1; transform:none; }
}

/* The mobile rule and its tip should scale together with the 750-unit layout. */
@media (max-width:600px) {
  .timeline { --step-stroke:2px; }
  .step-content { border-left-width:var(--step-stroke); }
  .step-content:before { border-top-width:var(--step-stroke);border-right-width:var(--step-stroke); }
}

/* The corrected Illustrator chart includes its labels and is centered in its own canvas. */
.shift-figure img { display:block; margin-inline:auto; transform:none; }

/* Let the arm cross the right rule, while keeping the trousers inside it. */
.shift-note { overflow:visible; --shift-arm-overhang:clamp(10px,calc(17 * var(--unit)),16px); }
.shift-note p { width:58%; }
.shift-note img {
  right:calc(-1 * var(--shift-arm-overhang));
  bottom:0;
  z-index:2;
  clip-path:polygon(0 0,100% 0,100% 68%,calc(100% - var(--shift-arm-overhang)) 78%,calc(100% - var(--shift-arm-overhang)) 100%,0 100%);
}

/* Use the same measure for the two adjacent section introductions. */
.business .section-intro { max-width:calc(515 * var(--unit)); }
@media (max-width:600px) {
  .business .section-intro { max-width:100%; }
}

/* Align the first person's axis with its card, and restore the large Topic panel. */
.career-step:first-child .career-icon { transform:translateX(6%); }
@media (max-width:600px) {
  .career-note {
    --topic-unit:.75px;
    width:500px;
    min-width:500px;
    max-width:none;
  }
}

@media (prefers-reduced-motion:reduce) {
  .hero-motion .hero-piece,.hero-motion .hero-piece picture { animation:none;opacity:1;transform:none; }
}