/* ===========================================================================
   SolutionsCoding -- NAL's AI character "Avatar" as decoration (as on
   SolutionsDataHub, at most three poses per page):
   - peek over the backlog (チームでの活用): lives in coding-team.css/.js,
     rises from behind the タスク分解 lane when the board story ends;
   - carrying the box of skills, beside the 初日から使える装備 heading
     (mirrored so it walks toward the content);
   - waving, beside the 導入フロー heading.
   Sources: NAL-picture/Solution/Avatar_coding_mascot_*.png (cut out from
   Phong's renders; *_raw.png = the originals). Shown from 1024px only, in
   space that is already empty, so the page does not get longer; decorative:
   alt="" + aria-hidden, never in the way of a click. Enters once (latch);
   no JS / reduced motion = in place.
   =========================================================================== */
.cd-mascot { display: none; pointer-events: none; }
.cd-mascot img { display: block; width: auto; height: 100%; }
@media (min-width: 1024px) {
  .cd-has-mascot { position: relative; }
  .cd-mascot { position: absolute; z-index: 1; right: var(--gutter); display: block; }
  .cd-mascot--skills { top: -28px; height: clamp(124px, 12vw, 176px); }
  .cd-mascot--wave { top: -36px; height: clamp(112px, 9.5vw, 140px); }
}
html.cd-motion .cd-mascot[data-cd-latch]:not(.cd-seen) img { opacity: 0; transform: translateY(14px); }
.cd-mascot.cd-seen img { transition: opacity 0.6s var(--ease-out) 0.2s, transform 0.7s var(--ease-out) 0.2s; }
.cd-mascot.cd-now img { transition: none; }