/* ==========================================================================
   HERO / INTRO — index.css
   CONNECTION 로고만 남긴 미니멀 인트로. 배경은 은은한 컬러 블롭 + 도트 텍스처로
   심심하지 않게 채운다.
   ========================================================================== */

.hero {
  position: relative;
  width: 100%;
  height: 100svh;
  overflow: hidden;
  background: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ---- 배경: 인트로 영상. 퍼즐 인터렉션(#puzzleOverlay)과는 완전히 별개로,
   사이트가 공개된 뒤 보이는 히어로 섹션 배경일 뿐이다. ---- */
.hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  isolation: isolate;
}

.hero__bg-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* ---- 전시 설명 열기 버튼: 영상 상단 중앙에 크게, 살짝 흔들리는 화살표만 남긴다 ---- */
.hero__intro-toggle {
  position: absolute;
  top: calc(var(--nav-height, 84px) + 24px);
  left: 50%;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  padding: 0;
  background: none;
  border: none;
  color: #3FD1E0;
  cursor: pointer;
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%);
  animation: heroIntroChevron 1.8s ease-in-out infinite;
  /* 오프닝(bounce)은 transform만 흔들고, opacity는 여기서 따로 부드럽게
     페이드 인/아웃 되도록 분리한다 — 그래야 표시/숨김 전환이 매끄럽다 */
  transition: opacity .4s var(--ease, ease), visibility .4s;
}
.hero__intro-toggle:hover,
.hero__intro-toggle:focus-visible{
  opacity: 0.8;
}
/* 전시 설명이 내려와 있는 동안에는 화살표를 부드럽게 감춘다 */
.hero.is-intro-open .hero__intro-toggle{
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  animation: none;
}
.hero__intro-chevron{
  width: 100%;
  height: 100%;
  filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.25));
}
@keyframes heroIntroChevron {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50% { transform: translateX(-50%) translateY(8px); }
}

/* ---- 전시 설명 패널: 화살표 클릭 시 영상 프레임(.hero) 안에서만 반투명
   블랙 배경이 위에서 아래로 슬라이드 인 된다 — .hero가 overflow:hidden이라
   프레임 밖(상단 내비게이션 등)으로는 절대 번지지 않고, 배경 영상은 패널
   아래에서 계속 재생된다. ---- */
.hero__intro-panel {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px;
  background: rgba(0, 0, 0, 0.8);
  opacity: 0;
  transform: translateY(-100%);
  pointer-events: none;
  /* 슬라이드(transform)에 살짝 페이드(opacity)를 겹쳐서 더 부드럽게
     내려오고 올라가도록 한다 — easeOutExpo 계열 커브로 감속도 자연스럽게 */
  transition: transform .7s cubic-bezier(.16, 1, .3, 1), opacity .5s ease;
}
.hero__intro-panel.is-open {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.hero__intro-panel-inner {
  max-width: 640px;
  max-height: calc(100% - 120px);
  overflow-y: auto;
  color: #fff;
  font-size: 1rem;
  line-height: 1.85;
  text-align: left;
}

.hero__intro-logo {
  display: block;
  width: min(420px, 82vw);
  height: auto;
  margin: 0 auto 30px;
}
.hero__intro-panel-inner p + p {
  margin-top: 1.3em;
}

/* 닫기 버튼: 상단 화살표(hero__intro-chevron)를 위아래로 뒤집은 모양을
   패널 하단 중앙에 띄워, 누르면 패널이 다시 위로 슬라이드 아웃되게 한다 */
.hero__intro-close {
  position: absolute;
  left: 50%;
  bottom: 32px;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  padding: 0;
  background: none;
  border: none;
  color: #fff;
  cursor: pointer;
  transform: translateX(-50%);
  animation: heroIntroCloseChevron 1.8s ease-in-out infinite;
}
.hero__intro-close:hover,
.hero__intro-close:focus-visible{
  opacity: 0.8;
}
.hero__intro-close-chevron{
  width: 100%;
  height: 100%;
  filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.35));
}
@keyframes heroIntroCloseChevron {
  0%, 100% { transform: translateX(-50%) translateY(0); opacity: 0.75; }
  50% { transform: translateX(-50%) translateY(-8px); opacity: 1; }
}

/* ---- 스크롤 버튼: 뒤판 없이 굵은 글자 + 튀는 화살표로만 강조 ---- */
.hero__scroll {
  position: absolute;
  right: 36px;
  bottom: 32px;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  background: none;
  border: none;
  color: var(--clr-ink, #222);
  font-family: var(--ff-display, sans-serif);
  cursor: pointer;
  opacity: 1;
  visibility: visible;
  animation: heroScrollBob 2.2s ease-in-out infinite;
  /* transform(hover)과 opacity(표시/숨김) 전환을 각각 부드럽게 */
  transition: transform .25s var(--ease, ease), opacity .4s var(--ease, ease), visibility .4s;
}
.hero__scroll:hover,
.hero__scroll:focus-visible{
  transform: translateY(-2px);
}
/* 전시 설명이 내려와 있는 동안에는 Scroll 표시를 부드럽게 감춘다 */
.hero.is-intro-open .hero__scroll{
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  animation: none;
}
.hero__scroll-label{
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.hero__scroll-bar {
  width: 3px;
  height: 34px;
  background: rgba(36, 38, 59, 0.16);
  position: relative;
  overflow: hidden;
  border-radius: 3px;
}
.hero__scroll-bar::after {
  content: '';
  position: absolute;
  top: -100%; left: 0;
  width: 100%; height: 100%;
  background: #3FD1E0;
  box-shadow: 0 0 8px rgba(63, 209, 224, 0.7);
  animation: scrollDrip 1.8s ease-in-out infinite;
}
@keyframes scrollDrip {
  0% { top: -100%; } 60% { top: 100%; } 100% { top: 100%; }
}
@keyframes heroScrollBob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(8px); }
}

@media (max-width: 640px) {
  .hero__intro-toggle{ top: 80px; width: 44px; height: 44px; }
  .hero__intro-panel-inner{ font-size: 0.92rem; }
  .hero__intro-close{ bottom: 20px; width: 40px; height: 40px; }
  .hero__scroll{ right: 20px; bottom: 20px; padding: 12px 10px 10px; gap: 8px; }
  .hero__scroll-bar{ height: 26px; }
}

@media (prefers-reduced-motion: reduce) {
  .hero__intro-toggle, .hero__intro-close{ animation: none; }
  .hero__scroll, .hero__scroll-bar::after { animation: none; }
}


/* ==========================================================================
   RESPONSIVE VIEWPORT HEIGHT
   ========================================================================== */
.hero{
  min-height: 100svh;
}
@supports (height: 100dvh){
  .hero{
    height: 100dvh;
    min-height: 100svh;
  }
}

@media (max-width: 640px){
  .hero__intro-panel{
    padding: max(20px, env(safe-area-inset-top, 20px))
             max(18px, env(safe-area-inset-right, 18px))
             max(72px, env(safe-area-inset-bottom, 72px))
             max(18px, env(safe-area-inset-left, 18px));
  }
  .hero__intro-panel-inner{
    width: min(100%, 640px);
    max-height: calc(100dvh - 150px);
  }
  .hero__intro-logo{
    width: min(420px, 78vw);
    margin-bottom: clamp(18px, 5vw, 30px);
  }
}