/**
 * hero-intro.css — Section1 인트로 (Figma desktop 651:1392/1553, mobile 651:1681/1758)
 */

/* ----- 잠금(인트로 중 스크롤 방지) ----- */
html.hero-intro-lock {
  overflow: hidden;
  height: 100%;
}

html.hero-intro-lock body {
  overflow: hidden;
  touch-action: none;
}

/* ----- 헤더 등장 ----- */
/* 스크롤 숨김(.site-header--scroll-hidden)은 components.css transform이 우선되도록 동시 적용 안 함 */
body.hero-intro-active:not(.hero-intro-header-on) .site-header.process-header:not(.site-header--scroll-hidden) {
  opacity: 0;
  transform: translate3d(0, -14px, 0);
  pointer-events: none;
}

body.hero-intro-active.hero-intro-header-on .site-header.process-header:not(.site-header--scroll-hidden) {
  opacity: 1;
  transform: translate3d(0, 0, 0);
  pointer-events: auto;
  transition:
    opacity 0.48s var(--ease-smooth-in-out, ease),
    transform 0.48s var(--ease-smooth-in-out, ease);
}

/* ----- 배경 라임 바닥: 전체 → 하단 밴드 ----- */
.section-hero .hero-ground {
  transition: transform 0.95s var(--ease-smooth-in-out, ease);
}

.section-hero.hero-intro--floor-full .hero-ground {
  transform: translate3d(0, 0, 0);
}

.section-hero:not(.hero-intro--floor-full) .hero-ground {
  transform: translate3d(0, calc(100% - var(--hero-ground-band)), 0);
}

/* ----- 중앙 카피 / 로고 ----- */
.hero-intro-center {
  position: absolute;
  inset: 0;
  z-index: 4;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  pointer-events: none;
  padding: 0 clamp(1rem, 4vw, 2rem);
}

.hero-intro-headline {
  margin: 0;
  text-align: center;
  font-family: "Paperlogy Octin", var(--font-sans);
  font-weight: 800;
  font-size: clamp(1.5rem, 5vw, 5rem);
  line-height: 1.3;
  color: var(--color-brand-navy);
  letter-spacing: 0;
  opacity: 0;
  transform: translate3d(0, clamp(20px, 4vh, 40px), 0);
  transition:
    opacity 0.32s var(--ease-smooth-in-out, ease),
    transform 0.36s var(--ease-smooth-in-out, ease);
}

.hero-intro-headline span {
  display: block;
}

@media (min-width: 769px) {
  .hero-intro-headline {
    font-size: 80px;

    position: absolute;
    left: 50%;
    top: calc(50% - 180px);
    /* 등장: 아래 → 위 (시작값은 양의 translateY) */
    transform: translate3d(-50%, clamp(32px, 6vh, 72px), 0);
    width: min(96vw, 920px);
  }

  .section-hero.hero-intro--show-headline .hero-intro-headline {
    transform: translate3d(-50%, 0, 0);
  }

  /** 퇴장: 아래쪽으로 빠짐 */
  .section-hero.hero-intro--hide-headline .hero-intro-headline {
    transform: translate3d(-50%, clamp(52px, 9vh, 96px), 0);
  }
}

@media (max-width: 768px) {
  /** 하단 공 이미지 높이와 동일한 토큰 — 카피/로고는 그 위 영역 안에 세로 중앙 */
  .section-hero {
    --hero-ground-band: 64px;
    --hero-mobile-balls-visual-h: clamp(160px, 36vh, 400px);
    --hero-mobile-text-gap: clamp(10px, 2vh, 20px);
  }

  .hero-intro-headline {
    font-size: 32px;
    margin: 0;
    position: absolute;
    left: 50%;
    top: max(env(safe-area-inset-top), var(--process-header-height, var(--header-height, 56px)), 52px);
    bottom: calc(
      var(--hero-ground-band) + var(--hero-mobile-balls-visual-h) + var(--hero-mobile-text-gap)
    );
    transform: translate3d(-50%, clamp(28px, 5vh, 52px), 0);
    width: min(92vw, 360px);
    max-width: 92vw;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    flex-direction: column;
    box-sizing: border-box;
    min-height: 0;
  }

  .section-hero.hero-intro--show-headline .hero-intro-headline {
    transform: translate3d(-50%, 0, 0);
  }

  .section-hero.hero-intro--hide-headline .hero-intro-headline {
    transform: translate3d(-50%, clamp(44px, 9vh, 80px), 0);
  }
}

.section-hero.hero-intro--show-headline .hero-intro-headline {
  opacity: 1;
}

.section-hero.hero-intro--hide-headline .hero-intro-headline {
  opacity: 0;
  transition:
    opacity 0.25s var(--ease-smooth-in-out, ease),
    transform 0.28s var(--ease-smooth-in-out, ease);
}

/* 로고 스택 — 등장: 아래에서 위로(최종 -56%); 인트로 후 유지용은 data-intro-state로 고정 */
.hero-intro-logo-stack {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate3d(-50%, calc(-56% + clamp(56px, 10vh, 112px)), 0);
  opacity: 0;
  transition:
    opacity 0.29s var(--ease-smooth-in-out, ease),
    transform 0.32s var(--ease-smooth-in-out, ease);
}

.hero-intro-logo__pair {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(12px, 2.5vw, 28px);
  isolation: isolate;
}

.hero-intro-logo__pair--mobile {
  display: none;
}

.hero-intro-logo__pair img {
  display: block;
  height: auto;
  width: clamp(174px, 46vw, 436px);
  max-width: 92vw;
  object-fit: contain;
  vertical-align: top;
  /* 서브픽셀 레이어링: SVG 경계 헤어라인·배경 비침 완화 */
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.hero-intro-logo__pair .hero-intro-logo__10 {
  width: clamp(173px, 46vw, 433px);
}

@media (max-width: 768px) {
  .hero-intro-logo-stack {
    top: max(env(safe-area-inset-top), var(--process-header-height, var(--header-height, 56px)), 52px);
    bottom: calc(
      var(--hero-ground-band) + var(--hero-mobile-balls-visual-h) + var(--hero-mobile-text-gap)
    );
    left: 50%;
    width: min(92vw, 380px);
    max-width: 92vw;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transform: translate3d(-50%, clamp(64px, 11vh, 112px), 0);
  }

  .hero-intro-logo__pair--desktop {
    display: none;
  }

  .hero-intro-logo__pair--mobile {
    display: flex;
    gap: 10px;
  }

  .hero-intro-logo__pair--mobile .hero-intro-logo__word {
    width: 184px;
    max-width: 49vw;
  }

  .hero-intro-logo__pair--mobile .hero-intro-logo__10 {
    width: 183px;
    max-width: 49vw;
  }
}

.section-hero.hero-intro--show-logo .hero-intro-logo-stack {
  opacity: 1;
}

@media (min-width: 769px) {
  .section-hero.hero-intro--show-logo .hero-intro-logo-stack {
    transform: translate3d(-50%, -56%, 0);
  }

  /* 인트로 종료 후에도 로고 퇴장/페이드 없이 유지 */
  html[data-intro-state="done"] #hero-intro-logo {
    opacity: 1;
    transform: translate3d(-50%, -56%, 0);
  }
}

@media (max-width: 768px) {
  .section-hero.hero-intro--show-logo .hero-intro-logo-stack {
    transform: translate3d(-50%, clamp(18px, 3vh, 32px), 0);
  }

  html[data-intro-state="done"] #hero-intro-logo {
    opacity: 1;
    transform: translate3d(-50%, clamp(18px, 3vh, 32px), 0);
  }
}

/* ----- 공 정적 이미지: z-index가 노랑 바닥보다 낮음 → 전면이 내려갈 때 같은 프레임 안에 이미 있던 것처럼 보임 ----- */
.hero-balls-visual__frame {
  position: absolute;
  overflow: hidden;
  pointer-events: none;
  box-sizing: border-box;
}

.hero-balls-visual__media {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  pointer-events: none;
}

/* 모바일용 프레임: 데스크에서 숨김 */
.hero-balls-visual__frame--mobile {
  display: none;
}

@media (min-width: 769px) {
  .section-hero {
    --hero-ground-band: 120px;
    --hero-balls-side-width: clamp(240px, 37vw, 560px);
  }

  .hero-balls-visual__frame--desk {
    bottom: var(--hero-ground-band);
    top: max(env(safe-area-inset-top, 0px), var(--process-header-height, var(--header-height, 64px)), 56px);
  }

  /* 중앙 타이포와 겹치지 않게 너비 상한 */
  .hero-balls-visual__frame--left.hero-balls-visual__frame--desk {
    left: 0;
    width: min(var(--hero-balls-side-width), calc(50vw - clamp(72px, 10vw, 140px)));
  }

  /* cover + 앵커: 좌측 프레임은 이미지를 right bottom에 맞춰 잘림, 우측은 left bottom */
  .hero-balls-visual__frame--left .hero-balls-visual__media {
    object-position: right bottom;
  }

  .hero-balls-visual__frame--right.hero-balls-visual__frame--desk {
    right: 0;
    left: auto;
    width: min(var(--hero-balls-side-width), calc(50vw - clamp(72px, 10vw, 140px)));
  }

  .hero-balls-visual__frame--right .hero-balls-visual__media {
    object-position: left bottom;
  }
}

@media (max-width: 768px) {
  .hero-balls-visual__frame--desk {
    display: none;
  }

  .hero-balls-visual__frame--mobile {
    display: block;
    left: 0;
    right: 0;
    bottom: var(--hero-ground-band);
    top: auto;
    height: var(--hero-mobile-balls-visual-h);
  }

  .hero-balls-visual__frame--mobile .hero-balls-visual__media {
    object-position: center bottom;
  }
}

@media (prefers-reduced-motion: reduce) {
  .section-hero .hero-ground,
  .hero-intro-headline,
  .hero-intro-logo-stack {
    transition-duration: 0.01ms;
    transition-delay: 0ms;
  }

  .section-hero:not(.hero-intro--floor-full) .hero-ground {
    transform: translate3d(0, calc(100% - var(--hero-ground-band)), 0);
  }

  html.hero-intro-lock {
    overflow: visible;
    height: auto;
  }

  html.hero-intro-lock body {
    overflow: visible;
    touch-action: auto;
  }

  body.hero-intro-active:not(.hero-intro-header-on) .site-header.process-header:not(.site-header--scroll-hidden) {
    opacity: 1;
    transform: none;
    pointer-events: auto;
  }
}