/* ==========================================================================
 * stage/hero.css — 씬 1 · 히어로
 * ==========================================================================
 * 헤드라인을 두 벌 겹치고 그 사이에 영상을 낀다. 위 벌(크림)을 영상 박스 모양으로
 * 잘라내면 영상 위에서는 크림 글자, 크림 배경 위에서는 잉크 글자로 저절로 갈라진다.
 * blend mode 없이 완벽한 대비를 얻는 방식이다.
 *
 * ── 이 파일이 정하는 것 / 안 정하는 것 ─────────────────────────────────────
 *  정한다   두 벌의 겹침 좌표 · 색 · 궤도 상자(.hero__bg) · 단어 span · 스크롤 안내
 *  안 정한다
 *    · 쌓임 순서(z-index)      → css/stage/stack.css. 씬 파일이 각자 정하면 깨진다.
 *      특히 .scene--hero 에 z-index 를 주면 안 된다 — 로고(.hero__overlay)가 씬의
 *      형제라서, 씬이 쌓임 맥락을 만들면 로고가 영상 밑으로 들어간다.
 *    · 타이틀 규격(크기·서체·정렬) → css/layout.css 의 .hero__title 을 그대로 쓴다.
 *      인트로가 올려놓은 그 글자를 무대가 이어받는 것이라, 규격이 1px 이라도 다르면
 *      인계 순간에 글자가 튄다. 그래서 원본의 영문 3줄 규격(Saans 500 / 139px /
 *      왼쪽 정렬)은 여기서 걷어냈다. 한국어 두 줄은 계속 Pretendard 다.
 *
 * ── 두 시스템이 같은 DOM 을 쓴다 ───────────────────────────────────────────
 *   인트로 js/mod-hero-video.js   시간 기반. [data-hero-title] 안의 .hero__title-line
 *   무대   js/stage/scenes/hero.js 스크롤 기반. 그 줄을 단어로 쪼개 켜고 끈다.
 * ========================================================================== */

/* 궤도 변환만 받는 투명 사각형. 화면에는 아무것도 그리지 않는다.
   (지금 구현은 박스를 수식으로 직접 계산하므로 이 요소는 있어도 그만 없어도 그만이다) */
.scene--hero .hero__rect {
  position: absolute;
  inset: 0;
}

/* ── 타이틀 두 벌 ──────────────────────────────────────────────────────────
 * 두 벌이 완전히 겹쳐야 한다. 좌표가 어긋나면 색 갈라짐이 이중으로 보인다.
 * 감싸는 .hero__titles 는 stack.css 에서 position:static 으로 못 박혀 있다
 * (거기에 position 이나 z-index 가 생기면 두 벌이 한 덩어리로 묶여 영상이
 *  사이에 못 낀다). 그래서 이 두 벌의 기준은 #scene-hero 다. */
.scene--hero .hero__inner {
  position: absolute;
  inset: 0;
}

/* 잉크 벌 — 자르지 않는다. 영상 박스 "밖"(크림 배경)에서만 보인다. */
.scene--hero .hero__inner--ink {
  color: var(--ink, #12110e);
}

/* 크림 벌 — 영상 박스 모양으로 잘린다. 박스 "안"에서만 보인다.
   기본값이 inset(0)(=안 자름)인 게 중요하다. 인트로 동안에는 영상이 전체화면이라
   이 벌이 통째로 보여야 하고, 무대가 켜지는 순간부터 JS 가 매 프레임 값을 넣는다.
   (색은 stack.css 가 --color-ink-quiet 로 한 번 더 덮는다 — 인트로 인상 유지용) */
.scene--hero .hero__inner--masked {
  color: var(--cream, #fafbf8);
  clip-path: inset(0);
}

/* 규격은 layout.css(+stack.css)가 쥔다. 여기서는 색만 벌에서 물려받게 뚫어 준다 —
   layout.css 의 .hero__title 이 color 를 직접 박고 있어서, 그대로 두면 두 벌이
   같은 색이 돼 색 갈라짐이 통째로 사라진다. */
.scene--hero .hero__title {
  color: inherit;
}

/* 단어 단위로 켜고 끄기 위한 span. js/stage/scenes/hero.js 가 붙인다.
   두 경로가 있다.
     · 보통은 인트로(SplitText)가 만든 .word 를 그대로 물려받고 이 클래스만 더 붙인다.
       그래야 인계되는 프레임에 줄 상자 높이가 안 바뀌어 타이틀이 한 픽셀도 안 튄다.
     · SplitText 가 없으면 hero.js 가 원문에서 직접 만든다. 이때는 공백을 span 안에
       넣으므로 white-space:pre 여야 폭이 원문과 같아진다. */
.scene--hero .hero__word {
  display: inline-block;
  white-space: pre;
}

/* 원본 마크업(.hero__line)으로도 돌아가게 하는 보험.
   layout.css 의 .hero__line 은 캔버스 히어로용 초대형 타이포(36vw · position:absolute)라
   무대 안에서 그대로 걸리면 화면이 글자로 뒤덮인다. 무대 안에서만 무력화한다. */
.scene--hero .hero__line {
  position: static;
  top: auto;
  font: inherit;
  letter-spacing: inherit;
  white-space: normal;
}

/* ── 궤도 상자 ─────────────────────────────────────────────────────────────
 * js/stage/scenes/hero.js 가 매 프레임 translate / width / height 를 px 로 넣는다.
 * 아래는 무대가 켜지기 전(=인트로 동안)의 상태 — 화면을 꽉 채운다. */
.scene--hero .hero__bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.scene--hero .hero__video,
.scene--hero .hero__poster {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 포스터는 원본에서도 안 보인다(영상이 못 뜰 때를 위한 자리).
   <video poster="…"> 가 이미 같은 일을 하므로 지금 마크업에는 없다. */
.scene--hero .hero__poster {
  opacity: 0;
}

/* ── 하단 스크롤 안내 ──────────────────────────────────────────────────────
 * 지금 index.html 에서는 hidden 으로 꺼 뒀다. 되살리려면 hidden 만 떼면 된다.
 * 그리드 폭 기준으로 잡고 왼쪽 끝에 붙인다(원본과 같다). */
/* 원본은 이 띠 안에서 안내를 왼쪽에 붙였다(그래서 margin-left 로 살짝 당겼다).
   여기서는 화면 가운데 아래에 둔다 — 그래서 띠를 flex 로 만들어 안쪽을 가운데 정렬하고,
   왼쪽 정렬용이던 margin-left 보정은 뺐다. */
.scene--hero .hero__cta {
  position: absolute;
  bottom: 2.4rem;
  left: 50%;
  width: var(--grid-width);
  transform: translateX(calc(var(--grid-width) * -0.5));
  height: 30px;
  z-index: 6;
  display: flex;
  justify-content: center;
}

/* 원본은 48em 이었다. em 은 브라우저 기본 글꼴 크기를 타므로 무대 JS 의 768px 판정과
   어긋난다 — 자세한 이유는 css/stage/swirl.css 의 같은 자리 주석에 적어 뒀다. */
@media only screen and (width < 768px) {
  .scene--hero .hero__cta {
    bottom: unset;
    /* ★ 스크롤 안내 위치 ★ 화면 아래끝에서 이만큼 위 (2026-08-30 채린 요청 39 → **80px**)
       ⚠ 100svh 가 아니라 **--vh100**(js/boot.js 가 굳혀 넣는 px)을 쓴다.
         카카오 인앱 브라우저는 svh 도 툴바를 따라 바꿔서, 뷰포트 단위를 쓰면 이 안내가
         스크롤할 때마다 위아래로 흔들린다. */
    top: calc(var(--vh100, 100svh) - 80px);
  }
}

.scene--hero .hero__cta-inner {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  width: fit-content;
  height: 30px;
  color: var(--cream, #fafbf8);
  font-family: var(--sans);
  font-weight: 400;
  font-size: var(--text-base);
  line-height: 1.15em;
}

.scene--hero .hero__cta-icon {
  width: 1.3rem;
  height: 1.3rem;
  margin-top: -0.1rem;
  rotate: 135deg;
  fill: currentColor;
  /* ★ 화살표 까딱임 ★ 아래로 내려갔다 돌아온다.
     ★ 조절 ★ 1.6s = 한 번 왕복하는 시간(느리게 하려면 키운다)
              아래 keyframes 의 5px = 내려가는 거리 */
  animation: hero-cta-bob 1.6s ease-in-out infinite;
}

/* ⚠ transform 이 아니라 translate 를 쓴다.
   이 아이콘은 방향을 잡으려고 rotate: 135deg 를 이미 쓰고 있는데, transform 으로
   움직이면 그 회전을 덮어써서 화살표가 엉뚱한 방향을 가리킨다.
   translate / rotate 는 서로 독립된 속성이라 같이 걸어도 안 부딪힌다. */
@keyframes hero-cta-bob {
  0%,
  100% {
    translate: 0 0;
  }
  50% {
    translate: 0 5px;
  }
}

/* 동작 줄이기를 켠 사용자에게는 멈춰 세운다 — 스크롤과 무관하게 계속 움직이는 것이라
   이 설정에서 꺼야 하는 종류다(js/stage/core/stage.js 의 prefersReducedMotion 과 같은 취지). */
@media (prefers-reduced-motion: reduce) {
  .scene--hero .hero__cta-icon {
    animation: none;
  }
}