/* ===================================================================
   PROFILE OVERLAY EFFECT (Final)
   - 인물 PNG 오버레이: 스크롤 진입 시 0.5초 대기 후 등장
   - 배경 프로필 이미지에 은은한 어두운 오버레이 추가
   - 플로팅 애니메이션 제거, 하단에 고정
   =================================================================== */

/* 프로필 이미지 컨테이너 상대 위치 */
.about-image { position: relative; }
.about-image > img { display:block; width:100%; height:auto; }

/* 배경 어둡게 오버레이 (기본은 투명) */
.about-image::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0);       /* 초기 = 투명 */
  transition: background 0.7s ease;
  pointer-events: none;
}
.about-image.in-view::after {
  background: rgba(0,0,0,0.15);    /* 인물 등장 시 배경을 살짝 어둡게 (0.1~0.2 사이 추천) */
}

/* 인물 PNG 오버레이 */
.about-image .person-overlay {
  position: absolute;
  right: 15px;
  bottom: 0;
  height: 100%;        /* 프로필 이미지 높이에 맞춤 */
  width: auto;
  pointer-events: none;
  filter: drop-shadow(0 10px 18px rgba(0,0,0,.25));
  opacity: 0;
  transform: translateY(12px) scale(.98);
  animation: none; /* 기본 상태에서는 애니메이션 없음 */
}

/* 등장 애니메이션 */
@keyframes person-in {
  to { opacity: 1; transform: translateY(0) scale(1); }
}

/* in-view 상태에서만 페이드업 등장 */
.about-image.in-view .person-overlay {
  animation: person-in .3s ease-out .1s forwards; /* 0.5초 지연 후 등장 */
}

/* 모바일 조정 */
@media (max-width: 480px){
  .about-image .person-overlay{ transform-origin: bottom right; }
}

/* 모션 최소화 사용자 대응 */
@media (prefers-reduced-motion: reduce){
  .about-image .person-overlay{ animation: none; opacity:1; transform:none; }
  .about-image::after{ background: rgba(0,0,0,0); }
}


/* === Layering & Overflow fix === */
.about-image{
  position: relative;
  overflow: visible;   /* allow person to exceed image bounds */
  z-index: 0;          /* create a local stacking context baseline */
}

/* darkening overlay UNDER the person */
.about-image::after{
  position: absolute;
  z-index: 1;          /* below the person */
}

/* person always on top of the dark overlay */
.about-image .person-overlay{
  position: absolute;
  z-index: 2;          /* above ::after */
}

/* PC 전용: 프로필 사진 블록을 살짝 아래로 */
@media (min-width: 768px) {
  #profile .about-image {
    margin-top: 40px; /* 필요 시 20~60px로 조절 */
  }
}