/* ════════════════════════════════════
   01-hero.css — 히어로 섹션 (아치문 + 홀로그램 + 줌인 + 벽/바닥 + 나뭇잎 그림자)
   ════════════════════════════════════ */

.hero-wrap {
  position: relative;
  height: 300vh;
  z-index: 1; /* about-mag(z-index:2)보다 항상 아래 */
}
.hero-sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  background: var(
    --bg
  ); /* 줌아웃 시 확대된 zoom-wrap 바깥으로 보일 여백 색상 */
  overflow: hidden;
  /* JS가 opacity 직접 제어 */
}
/* 히어로 전체(벽+바닥+문+텍스트)를 함께 확대시키는 래퍼 */
.hero-zoom-wrap {
  position: absolute;
  inset: 0;
  z-index: 1;
  /* 벽 + 바닥 배경을 여기로 이동 — 줌과 함께 같이 커지도록 */
  background: linear-gradient(
    180deg,
    var(--bg) 0%,
    var(--bg) 82%,
    #e4e0d8 82%,
    #dad5c9 100%
  );
  transform-origin: center center; /* JS가 문 중심 좌표로 동적 재설정 — 초기값은 안전한 기본값 */
  will-change: transform;
}
/* 벽-바닥 경계선 — 은은한 그림자 라인 */
.hero-sticky::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 82%;
  height: 14px;
  background: linear-gradient(
    180deg,
    rgba(26, 23, 20, 0.06) 0%,
    transparent 100%
  );
  pointer-events: none;
  z-index: 1;
}
/* 바닥 위 은은한 반사광(문 빛이 바닥에 비치는 느낌) */
.hero-sticky::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 82%;
  width: 480px;
  height: 18%;
  transform: translateX(-50%);
  background: radial-gradient(
    ellipse 60% 80% at 50% 0%,
    rgba(255, 250, 240, 0.35) 0%,
    transparent 70%
  );
  pointer-events: none;
  z-index: 1;
}

/* ── 나뭇잎 그림자 ── */
@keyframes leafSway {
  0% {
    transform: rotate(0deg) translateX(0) translateY(0);
  }
  25% {
    transform: rotate(1.5deg) translateX(10px) translateY(-4px);
  }
  50% {
    transform: rotate(-1deg) translateX(-7px) translateY(3px);
  }
  75% {
    transform: rotate(1.8deg) translateX(8px) translateY(-2px);
  }
  100% {
    transform: rotate(0deg) translateX(0) translateY(0);
  }
}
/* 바닥 그림자 전용 — 벽보다 회전 각도를 작게 (이동 폭은 동일 유지) */
@keyframes leafSwayFloor {
  0% {
    transform: rotate(0deg) translateX(0) translateY(0);
  }
  25% {
    transform: rotate(0.5deg) translateX(10px) translateY(-4px);
  }
  50% {
    transform: rotate(-0.35deg) translateX(-7px) translateY(3px);
  }
  75% {
    transform: rotate(0.6deg) translateX(8px) translateY(-2px);
  }
  100% {
    transform: rotate(0deg) translateX(0) translateY(0);
  }
}
/* 클리핑 전용 래퍼 — 영역 밖으로 흔들려 나가는 부분을 잘라냄 */
.hero-shadow-clip {
  position: absolute;
  pointer-events: none;
  overflow: hidden; /* 핵심: 여기서 영역 밖을 잘라냄 */
}
.hero-shadow-clip-wall {
  top: 0;
  left: 0;
  width: 100%;
  height: 82%; /* 벽 영역과 정확히 일치 */
  z-index: 1;
}
.hero-shadow-clip-floor {
  bottom: 0;
  left: 0;
  width: 100%;
  height: 18%; /* 바닥 띠와 정확히 일치 */
  z-index: 5; /* floor-cover(4) 위에서 바닥 그림자가 보이도록 */
}
/* 흔들리는 요소 자체 — 클리핑 영역보다 약간 크게 잡아서 흔들려도 빈틈이 안 보이게 */
.hero-leaf-shadow-wall {
  position: absolute;
  top: -3%;
  left: -3%;
  width: 106%;
  height: 106%;
  animation: leafSway 14s ease-in-out infinite;
  transform-origin: top left;
  will-change: transform;
}
.hero-leaf-shadow-floor {
  position: absolute;
  bottom: -3%;
  left: -3%;
  width: 106%;
  height: 106%;
  animation: leafSwayFloor 14s ease-in-out infinite;
  transform-origin: bottom left;
  will-change: transform;
}
.hero-leaf-shadow-wall img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top left;
  display: block;
  opacity: 0.5;
  filter: grayscale(1) brightness(1.15) contrast(0.9);
  /* 마스크 제거 — 이미지가 벽 영역(82%)에 꽉 차서 바닥 경계까지 선명하게 닿음 */
}
.hero-leaf-shadow-floor img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: left top; /* 잎이 위쪽에 몰린 이미지 — 컨테이너 상단(벽-바닥 경계)에 닿도록 */
  display: block;
  opacity: 0.45;
  filter: grayscale(1) brightness(1.1) contrast(0.95);
  /* 가로 마스크는 유지 — 오른쪽으로 갈수록 자연스럽게 사라짐 */
}

/* ── 좌/우 텍스트 ── */
.hero-side-l {
  position: absolute;
  left: 2rem;
  top: 50%;
  transform: translateY(-50%) rotate(180deg);
  writing-mode: vertical-rl;
  text-orientation: mixed;
  font-size: 2rem;
  white-space: nowrap;
  letter-spacing: 0.35em;
  text-transform: uppercase;
  color: rgba(26, 23, 20, 0.3);
  display: flex;
  flex-direction: column;
  gap: 2rem;
  z-index: 5;
}
.hero-side-r {
  position: absolute;
  right: 2.5rem;
  top: 50%;
  transform: translateY(-50%);
  text-align: right;
  z-index: 5;
}
.hero-side-r p {
  font-size: 1.5rem;
  color: rgba(26, 23, 20, 0.4);
  line-height: 1.8;
  letter-spacing: 0.05em;
}

/* 코너 */
.hero-corner {
 position: absolute;
  z-index: 5;
  font-size: clamp(0.75rem, 1.7vw, 2rem); /* 뷰포트 폭에 비례해서 자동으로 줄어듦 */
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: rgba(26, 23, 20, 0.25);
  max-width: 42%;         /* 좌우 각각 화면의 42%까지만 차지하게 제한 */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis; /* 그래도 넘치면 …으로 자연스럽게 잘림 */
}
.hero-corner.tl {
  top: 1.8rem;
  left: 2.5rem;
}
.hero-corner.tr {
  top: 1.8rem;
  right: 2.5rem;
  text-align: right;
}

/* ── 아치(문) ── */
.arch-wrap {
  position: absolute;
  left: 50%;
  bottom: 18%; /* 바닥 경계선과 정확히 일치 — 침범하지 않음 */
  width: 500px;
  transform: translateX(-50%);
  z-index: 3;
  /* scale은 부모 hero-zoom-wrap 전체에 걸림 — 여기선 위치 고정만 */
}

/* 바닥 덮개 레이어 — 문(z-index:3) 바로 위
   바닥 영역만 다시 칠해서 문 하단이 바닥과 만나는 지점을 자연스럽게 가림 */
.hero-floor-cover {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 18%;
  background: linear-gradient(180deg, #e4e0d8 0%, #dad5c9 100%);
  z-index: 4; /* 문(3) 바로 위 */
  pointer-events: none;
}

/* 아치 프레임 — 독립 stacking context (자식 z-index가 여기 기준으로 쌓임) */
.arch-frame {
  position: relative;
  width: 100%;
  padding-bottom: 130%; /* 세로 아치 비율 */
  z-index: 0;
}
/* 아치 외부 흰 프레임 — 입체감(엠보싱) */
.arch-outer {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(
    145deg,
    #fdfcfa 0%,
    #f8f6f2 55%,
    #ede9e1 100%
  ); /* 좌상단이 밝고 우하단이 살짝 어두운 광원 느낌 */
  border-radius: 50% 50% 0 0 / 30% 30% 0 0; /* 하단 radius 제거 — 바닥과 닿는 부분 깔끔하게 */
  box-shadow:
    0 16px 32px rgba(26, 23, 20, 0.16),
    /* 문이 벽에서 살짝 떠 보이는 외부 그림자 */ 0 4px 10px
      rgba(26, 23, 20, 0.1),
    /* 바닥에 가까운 짧은 그림자 */ inset 0 3px 0 rgba(255, 255, 255, 0.95),
    /* 위쪽 테두리 하이라이트 — 빛이 위에서 들어오는 느낌 */ inset 0 -4px 8px
      rgba(26, 23, 20, 0.14),
    /* 아래쪽 안쪽 그림자 — 프레임 두께감 */ inset 4px 0 8px
      rgba(26, 23, 20, 0.07),
    /* 좌측 안쪽 그림자 */ inset -4px 0 8px rgba(26, 23, 20, 0.07); /* 우측 안쪽 그림자 */
  z-index: 0;
}

/* 문 테두리 위로 걸치는 나뭇잎 그림자 — arch-outer 위, arch-inner 아래
   벽 그림자와 같은 이미지를 문의 절대좌표에 맞춰 투영해서 이어져 보이게 함 */
.arch-frame-shadow {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 50% 50% 0 0 / 30% 30% 0 0;
  overflow: hidden;
  z-index: 1; /* arch-outer(0) 위, arch-inner(2) 아래 */
  pointer-events: none;
}
.arch-frame-shadow img {
  position: absolute;
  /* 벽 그림자(.hero-leaf-shadow-wall img)와 완전히 같은 이미지를,
     같은 화면 좌표에 겹치도록 위치를 계산해서 배치 (JS 없이 순수 CSS calc).
     기준값: hero-zoom-wrap ≈ 100vw × 100vh
             벽 그림자 박스 = left:-3%, top:-3%(of 82vh), width:106%, height:106%(of 82vh)
             문(arch-wrap) = left:50vw-210px, top:82vh-546px, width:420px, height:546px
     → 문 로컬 좌표 = 벽 그림자 좌표 - 문 좌표 */
  left: calc(-53vw + 210px);
  top: calc(-84.46vh + 546px);
  width: 106vw;
  height: 86.92vh;
  object-fit: cover;
  object-position: top left;
  display: block;
  opacity: 0.5;
  filter: grayscale(1) brightness(1.15) contrast(0.9);
  animation: leafSway 14s ease-in-out infinite; /* 벽 그림자와 이름·주기·시작시점이 같아 자동으로 동기화됨 */
  transform-origin: top left;
}

/* 홀로그램 내부 */
.arch-inner {
  position: absolute;
  top: 18px;
  left: 18px;
  right: 18px;
  bottom: 0; /* 하단은 outer와 동일하게 꽉 채움 */
  border-radius: 50% 50% 0 0 / 28% 28% 0 0;
  z-index: 2;
  background: linear-gradient(
    135deg,
    #e8d5ff,
    #c8e8ff,
    #c8f5e8,
    #fff5c8,
    #ffd5e8,
    #e8d5ff
  );
  background-size: 300% 300%;
  animation: holoFlow 6s ease infinite;
  overflow: hidden;
  /* 안쪽으로 들어간 느낌의 inner shadow — 외곽 흰 프레임이 더 도드라져 보이도록 */
  box-shadow:
    inset 0 4px 16px rgba(26, 23, 20, 0.18),
    inset 4px 0 12px rgba(26, 23, 20, 0.08),
    inset -4px 0 12px rgba(26, 23, 20, 0.08);
}
/* 홀로그램 빛 반사 */
.arch-inner::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(
    ellipse at 30% 30%,
    rgba(255, 255, 255, 0.45) 0%,
    transparent 60%
  );
  pointer-events: none;
}
.arch-inner::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(
    ellipse at 70% 70%,
    rgba(200, 240, 255, 0.3) 0%,
    transparent 50%
  );
  pointer-events: none;
}

/* 아치 안 텍스트 — JS로 opacity 페이드 */
.arch-content {
  position: absolute;
  inset: 18px;
  border-radius: 50% 50% 2px 2px / 28% 28% 2px 2px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.8rem;
  z-index: 2;
  overflow: hidden; /* 안전장치 — 어떤 경우에도 텍스트가 문 밖으로 삐져나가지 않고 문 모양대로 잘리게 함 */
  /* JS로 opacity 제어 */
}
.arch-star {
  font-size: 3rem;
  color: rgba(26, 23, 20, 0.5);
  line-height: 1;
}
.arch-name {
  font-family: "Cormorant Garamond", serif;
  font-size: clamp(3rem, 8vw, 8rem);
  font-weight: 600;
  letter-spacing: 0.04em;
  color: rgba(26, 23, 20, 0.85);
  text-align: center;
  line-height: 1;
}
.arch-role {
  font-size: clamp(0.8rem, 4vw, 1.5rem); /* 화면이 좁아질수록 점점 작아짐(600px 이상에서는 기존과 동일하게 1.5rem 고정) */
  letter-spacing: 0.35em;
  text-transform: uppercase;
  color: rgba(26, 23, 20, 0.6);
  text-align: center; /* 좁은 화면에서 2줄로 줄바꿈될 때도 가운데 정렬 유지 */
}
.arch-divider {
  width: 1px;
  height: 40px;
  background: rgba(26, 23, 20, 0.25);
}
.arch-tagline {
  font-family: "Cormorant Garamond", serif;
  font-size: 2rem;
  font-weight: 600;
  font-style: italic;
  color: rgba(26, 23, 20, 0.55);
  text-align: center;
  line-height: 1.5;
}
.arch-enter {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 1.5rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: rgba(26, 23, 20, 0.5);
  position: relative;
  top: 2rem; /* 다른 텍스트는 그대로 두고 ENTER만 아래로 시각적 이동 */
  border-bottom: 1px solid rgba(26, 23, 20, 0.25);
  padding-bottom: 0.3rem;
  cursor: pointer;
  text-decoration: none;
}


/* 반응형 */
@media (max-width: 1024px) {
  /* Hero: 순수 1화면(100vh) + About이 덮으며 올라올 여유 구간(40vh) */
  .hero-wrap {
    height: 140vh;
  }

  /* JS가 넣는 zoom/opacity 값 전부 무시 — 모바일에선 항상 정적인 상태 유지 */
  #hero-zoom-wrap {
    transform: none !important;
  }
  .arch-content {
    opacity: 1 !important;
  }
  #hero-sticky {
    opacity: 1 !important;
    pointer-events: auto !important;
  }

  /* 사이드/코너 텍스트는 기존에 드린 대로 계속 숨김 처리 */
  .hero-side-l,
  .hero-side-r {
    display: none;
  }

  /* 문(arch-wrap)이 고정 500px라서, 모바일 실제 화면(주소창/하단바로
     실제 보이는 높이가 100vh보다 줄어드는 기기)에서 문 상단이 화면
     밖으로 잘려 보이던 문제 → 화면 폭/높이에 비례해 더 작게 축소 */
  .arch-wrap {
    width: min(70vw, 50vh, 320px);
  }

  /* 문이 작아지면서 태그라인 폰트가 상대적으로 커서 답답해 보이는 것 축소 */
  .arch-tagline {
    font-size: 1.3rem;
  }

  /* ENTER→ 버튼이 데스크톱 문 크기 기준의 top:2rem 오프셋 때문에
     작아진 모바일 문 밖으로 밀려나던 것 → 오프셋을 줄여서 문 안에 유지 */
  .arch-enter {
    top: 0;
  }

  /* 문이 작아진 만큼 안쪽 콘텐츠 간격/크기도 함께 줄여서
     작은 화면에서도 여유 있게 문 안에 다 들어오게 함 */
  .arch-content {
    gap: 0.5rem;
  }
  .arch-star {
    font-size: 2rem;
  }
  .arch-divider {
    height: 24px;
  }

  /* 문(arch-wrap) 크기가 화면마다 달라지면서, 데스크톱 벽 그림자와 정확히
     이어붙게 계산했던 vw/vh 고정 calc 값이 안 맞아 그림자 이미지의
     경계선이 문 안쪽에 그대로 보이던 문제.
     모바일에서는 벽 그림자와의 이음새를 맞출 필요가 없으므로,
     문 컨테이너 기준 %로 훨씬 크게 잡고 중앙에 배치해서
     이미지 경계가 항상 문 바깥으로 밀려나게 함 */
  .arch-frame-shadow img {
    left: -150%;
    top: -150%;
    width: 400%;
    height: 400%;
    object-position: center;
  }
}
@media (max-width: 900px) {
  .hero-corner {
    display: none; /* 900px 이하에서 코너 텍스트 완전히 숨김 */
  }
}