/* Ver5: preserve the approved PNG's proportions and the 2023 layout anchors.
   PNG: 772 x 2037. Nontransparent bounds: x=167, y=21, w=434, h=1834.
   Crop transparent padding in CSS only; do not resample or change the PNG. */
.kv .kv-main-container .kv-contents .kv-content-01 .kv-content-01-man {
  --kirin-height: 331px;
  bottom: 130px;
}

.home-contact .home-contact-man {
  --kirin-height: 164px;
}

:is(.kv .kv-main-container .kv-contents .kv-content-01 .kv-content-01-man,
    .home-contact .home-contact-man .boxes .box)
:is(.man, .kirin-l, .kirin-r, .man-shadow) {
  width: calc(var(--kirin-height) * 434 / 1834);
  height: var(--kirin-height);
  background-size: auto calc(var(--kirin-height) * 2037 / 1834);
  background-position: calc(var(--kirin-height) * -167 / 1834)
                       calc(var(--kirin-height) * -21 / 1834);
  background-repeat: no-repeat;
  pointer-events: none;
}

:is(.kv .kv-main-container .kv-contents .kv-content-01 .kv-content-01-man,
    .home-contact .home-contact-man .boxes .box)
:is(.man, .kirin-l, .kirin-r) {
  z-index: 1;
}

.kv .kv-main-container .kv-contents .kv-content-01 .kv-content-01-man
:is(.man, .man-shadow) {
  bottom: 0;
  left: calc(-2.5px - var(--kirin-height) * 217 / 1834);
}

.home-contact .home-contact-man .boxes .box-phone :is(.kirin-l, .man-shadow) {
  bottom: 15px;
  left: 50%;
  right: auto;
  margin-left: calc(143.5px - var(--kirin-height) * 217 / 1834);
}

.home-contact .home-contact-man .boxes .box-mail :is(.kirin-r, .man-shadow) {
  bottom: 15px;
  left: 50%;
  right: auto;
  margin-left: calc(-153.5px - var(--kirin-height) * 217 / 1834);
}

/* Derive the cast shadow from the same approved silhouette.
   The 2023 hero shadow is about 306/474 as tall as its figure;
   the contact shadows are approximately full-height and lean right. */
:is(.kv .kv-main-container .kv-contents .kv-content-01 .kv-content-01-man,
    .home-contact .home-contact-man .boxes .box) .man-shadow {
  background-image: none;
  overflow: visible;
  z-index: 0;
}

:is(.kv .kv-main-container .kv-contents .kv-content-01 .kv-content-01-man,
    .home-contact .home-contact-man .boxes .box) .man-shadow::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, .20),
    rgba(0, 0, 0, .11) 48%, rgba(255, 255, 255, .20));
  -webkit-mask-image: url(/assets/images/home/kv/kv-01/pc_kirin_kv01.png);
  mask-image: url(/assets/images/home/kv/kv-01/pc_kirin_kv01.png);
  -webkit-mask-size: auto calc(var(--kirin-height) * 2037 / 1834);
  mask-size: auto calc(var(--kirin-height) * 2037 / 1834);
  -webkit-mask-position: calc(var(--kirin-height) * -167 / 1834)
                         calc(var(--kirin-height) * -21 / 1834);
  mask-position: calc(var(--kirin-height) * -167 / 1834)
                 calc(var(--kirin-height) * -21 / 1834);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  transform-origin: center bottom;
  transform: skewX(-14deg);
}

.kv .kv-main-container .kv-contents .kv-content-01 .kv-content-01-man .man-shadow::before {
  transform: skewX(-18deg) scaleY(.64556962);
}

@media screen and (min-width: 769px) {
  .kv .kv-main-container .kv-contents .kv-content-01 .kv-content-01-man {
    --kirin-height: 474px;
    bottom: 90px;
  }

  .kv .kv-main-container .kv-contents .kv-content-01 .kv-content-01-man
  :is(.man, .man-shadow) {
    left: calc(-2px - var(--kirin-height) * 217 / 1834);
  }

  .home-contact .home-contact-man {
    --kirin-height: 328px;
  }

  .home-contact .home-contact-man .boxes .box-phone :is(.kirin-l, .man-shadow) {
    bottom: -30px;
    left: auto;
    right: calc(494px - var(--kirin-height) * 217 / 1834);
    margin-left: 0;
  }

  .home-contact .home-contact-man .boxes .box-mail :is(.kirin-r, .man-shadow) {
    bottom: -30px;
    left: calc(498px - var(--kirin-height) * 217 / 1834);
    right: auto;
    margin-left: 0;
  }
}

/* Restore the original one-time contact entrance for the renamed figures. */
.home-contact .boxes .box .man-wrapper :is(.kirin-l, .kirin-r) {
  opacity: 0;
  transform: rotateX(90deg);
  transform-origin: bottom;
  transform-style: preserve-3d;
  transition: opacity 0.25s cubic-bezier(0.215, 0.61, 0.355, 1),
              transform 0.5s cubic-bezier(0.215, 0.61, 0.355, 1);
  transition-delay: .3s;
}

.home-contact.scroll-in .boxes .box .man-wrapper :is(.kirin-l, .kirin-r) {
  opacity: 1;
  transform: rotateX(0deg);
}