/* ==========================================================================
   v3 · Meet the team
   Loads on top of director.css and director-b.css. The headline's verbs are
   buttons; each one has the "design team" (four flat shapes) act it out.
   hero-team.js plays one full cycle per mode, so every switch lands at rest.
   ========================================================================== */

/* ---------- verbs in the headline ---------- */
.verb {
  font: inherit; letter-spacing: inherit; line-height: inherit;
  background: none; border: 0; padding: 0; margin: 0; cursor: pointer;
  color: var(--fg-strong);
  transition: color .3s;
}
/* split headings wrap each word in an inline-block, which a parent's underline
   doesn't reach, so the underline goes on the words and the clip makes room */
.verb, .split .verb .w > span {
  text-decoration: underline; text-decoration-color: var(--ul);
  text-decoration-thickness: var(--ulw, 2px); text-underline-offset: .14em;
}
.split .verb { text-decoration: none; }
.split .verb .w { padding-bottom: .26em; margin-bottom: -.26em; }
.verb:hover, .verb[aria-pressed="true"] { --ulw: 5px; }
.verb--team   { --ul: var(--acc-4); }
.verb--ship   { --ul: var(--cyan); }
.verb--scale  { --ul: var(--green); }
.verb--exceed { --ul: var(--wash-3); }
.verb--team[aria-pressed="true"]   { color: var(--acc-4); }
.verb--ship[aria-pressed="true"]   { color: var(--cyan); }
.verb--scale[aria-pressed="true"]  { color: var(--green); }
.verb--exceed[aria-pressed="true"] { color: var(--wash-3); }

/* ---------- the stage ---------- */
.hero { padding-bottom: 150px; }
.team-stage {
  position: relative; height: 125px; margin-top: 56px;
  display: flex; justify-content: center; align-items: flex-end; gap: clamp(8px, 1.5vw, 20px);
}
.team-floor { height: 1px; background: var(--line); }
.team-member { font: inherit; background: none; border: 0; padding: 0; cursor: pointer; display: block; }
.team-member:focus-visible { outline-offset: 6px; }
.team-poke, .team-body, .team-shape { display: block; }
.team-body { position: relative; width: clamp(32px, 3.75vw, 54px); aspect-ratio: 1 / 1; transform-origin: 50% 100%; }
.team-member:nth-of-type(2) .team-body { animation-delay: .12s; }
.team-member:nth-of-type(3) .team-body { animation-delay: .24s; }
.team-member:nth-of-type(4) .team-body { animation-delay: .36s; }
.team-shape { position: absolute; inset: 0; }
.team-shape--circ { background: var(--cyan); border-radius: 50%; }
.team-shape--tri  { background: var(--acc-4); clip-path: polygon(50% 2%, 98% 96%, 2% 96%); }
.team-shape--dia  { background: var(--wash-3); clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%); }
.team-shape--sq   { background: var(--green); }

.team-poke.is-poked { animation: team-nudge .5s var(--ease-out); }
@keyframes team-nudge { 40% { transform: scale(.94); } }

/* every mode starts and ends at rest */
.is-team .team-body { animation: team-hop 1.4s var(--ease-out) 1 both; }
@keyframes team-hop { 0%, 100% { transform: translateY(0); } 40% { transform: translateY(-12px); } }
.is-ship .team-body { animation: team-run 3.4s cubic-bezier(.7, 0, .2, 1) 1 both; }
@keyframes team-run { 0% { transform: translateX(0); } 46% { transform: translateX(1800px); } 46.01% { transform: translateX(-1800px); } 92%, 100% { transform: translateX(0); } }
.is-scale .team-body { animation: team-grow 3s var(--ease-out) 1 both; }
@keyframes team-grow { 0%, 100% { transform: scale(1); } 35%, 70% { transform: scale(1.4); } }
.is-exceed .team-body { animation: team-jump 2.4s cubic-bezier(.45, 0, .25, 1) 2 both; }
@keyframes team-jump { 0%, 15%, 100% { transform: translateY(0); } 55% { transform: translateY(-90px); } 90% { transform: translateY(0); } }

.team-bar {
  position: absolute; left: 50%; bottom: 75px; width: min(320px, 86%);
  border-top: 2px dashed var(--wash-3);
  transform: translateX(-50%) scaleX(0); opacity: 0; pointer-events: none;
  transition: transform .7s var(--ease-out), opacity .4s;
}
.is-exceed .team-bar { transform: translateX(-50%) scaleX(1); opacity: 1; }

/* the stage fades in with the lede */
.js .hero .team-stage, .js .hero .team-floor { opacity: 0; transition: opacity 1.2s var(--ease-out) .8s; }
.loaded .hero .team-stage, .loaded .hero .team-floor { opacity: 1; }

@media (max-width: 700px) {
  .team-stage { margin-top: 40px; }
}
@media (prefers-reduced-motion: reduce) {
  .team-body, .team-poke.is-poked { animation: none !important; }
  .js .hero .team-stage, .js .hero .team-floor { opacity: 1; transition: none; }
}