/* Concept 02: a measured entrance, followed by precise, input-led movement. */
body.concept-02 .personal-call {
  position: relative;
}

body.concept-02 .personal-call::after {
  position: absolute;
  inset-inline: 0;
  bottom: -1px;
  height: 1px;
  background: currentColor;
  content: "";
  transform: scaleX(0);
  transform-origin: left center;
}

@media (prefers-reduced-motion: no-preference) {
  body.concept-02.c02-intro .personal-copy h1 {
    animation: c02NameSettle 900ms cubic-bezier(.2, .7, .2, 1) both;
  }

  body.concept-02.c02-intro .personal-copy h1 > span {
    display: inline-block;
    animation: c02SurnameSettle 1050ms 130ms cubic-bezier(.2, .7, .2, 1) both;
  }

  body.concept-02.c02-intro .personal-hero figure {
    animation: c02PortraitSettle 1400ms cubic-bezier(.2, .7, .2, 1) both;
  }

  body.concept-02.c02-intro .personal-hero figure img {
    animation: c02PortraitLight 1400ms ease-out both;
  }

  body.concept-02.c02-intro .personal-hero figcaption {
    animation: c02CaptionSettle 750ms 350ms cubic-bezier(.2, .7, .2, 1) both;
  }

  body.concept-02 .personal-call::after {
    transition: transform 320ms cubic-bezier(.2, .7, .2, 1);
  }

  body.concept-02 .practice-disclosure .disclosure-icon {
    transition: transform 260ms cubic-bezier(.2, .7, .2, 1);
  }

  body.concept-02 .practice-disclosure summary h3,
  body.concept-02 .practice-disclosure li a > span:first-child {
    transition: transform 240ms cubic-bezier(.2, .7, .2, 1);
  }

  body.concept-02 .practice-disclosure summary:focus-visible h3,
  body.concept-02 .practice-disclosure li a:focus-visible > span:first-child {
    transform: translateX(3px);
  }

  @media (hover: hover) and (pointer: fine) {
    body.concept-02 .practice-disclosure summary:hover h3,
    body.concept-02 .practice-disclosure li a:hover > span:first-child {
      transform: translateX(3px);
    }
  }
}

body.concept-02 .personal-call:focus-visible::after {
  transform: scaleX(1);
}

@media (hover: hover) and (pointer: fine) {
  body.concept-02 .personal-call:hover::after {
    transform: scaleX(1);
  }
}

@keyframes c02NameSettle {
  from { transform: translateY(12px); }
  to { transform: translateY(0); }
}

@keyframes c02SurnameSettle {
  from { transform: translateX(16px); }
  to { transform: translateX(0); }
}

@keyframes c02PortraitSettle {
  from { transform: translateY(10px); }
  to { transform: translateY(0); }
}

@keyframes c02PortraitLight {
  from { filter: brightness(.92); }
  to { filter: brightness(1); }
}

@keyframes c02CaptionSettle {
  from { transform: translateY(5px); }
  to { transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  body.concept-02 .personal-hero *,
  body.concept-02 .practice-disclosure *,
  body.concept-02 .personal-call::after {
    animation: none !important;
    transition: none !important;
  }
}