/* PL2 home (index.html)
   피그마: PL2 Production (전달) > Home (node 2345:59569), 1920x1080
   - 전체 화면 히어로: 2026-10-07 부터 분야 티커 (피그마 Home 3109:33780, PC 피드백_1007).
     예전 영상 히어로(home-hero.mp4 / home-main.mp4)는 더 쓰지 않는다
   - 메뉴바(GNB) 없음. 화면 전체가 Works 링크 (PC 피드백_1007) */

.hm-body {
  min-height: 100dvh;
  overflow: hidden;
}

/* ── 히어로: 분야 슬롯 (PC 피드백_1015, 피그마 Home 3394:72204) ─────────
   흰 바탕에 썸네일 행(120)과 단어 행(100)이 번갈아 14개, 간격 40 → 행 중심 간격 150.
   2.2초마다 모든 행이 한 칸(150) 위로 올라가고, 화면 가운데(y 540)에 온 행만 또렷해진다.
   위치는 assets/home.js 가 행마다 --s(칸 번호)로 넘긴다.
   --u = 피그마 1px. 화면 "높이" 기준이다 (1080 에서 1px) — 맥북처럼 16:9 보다 세로가 긴
   화면에서도 피그마 프레임과 같은 줄 수가 보이도록. 가로는 가운데 정렬이고, 내용이 가운데
   약 700 폭 안에 있어서 좁은 화면에서도 잘리지 않게 100vw / 700 을 상한으로 둔다. */
.hm-hero {
  --u: min(100dvh / 1080, 100vw / 700);
  position: relative;
  display: block; /* 홈 전체가 Works 로 가는 링크(<a>)다 */
  color: inherit;
  text-decoration: none;
  cursor: pointer;
  width: 100%;
  height: 100dvh;
  background-color: var(--pl2-white);
  overflow: hidden;
}

/* 피그마 1920x1080 프레임. 화면 가운데에 둔다 (세로가 남으면 위아래로 행이 더 보인다) */
.hm-stage {
  position: absolute;
  top: 50%;
  left: 50%;
  width: calc(var(--u) * 1920);
  height: calc(var(--u) * 1080);
  translate: -50% -50%;
}

/* 행: 중심 y = 90 + 150 x 칸 번호(--s). 칸 3(y 540)이 초점 자리 */
.hm-row {
  --s: 0;
  position: absolute;
  top: calc(var(--u) * (90 + 150 * var(--s)));
  left: 0;
  width: 100%;
  translate: 0 -50%;
  /* PC 피드백_1026: 행 자체에는 블러가 없다. 흐림은 위아래 딤(.hm-dim)의 배경 블러로만 준다 */
  /* 피그마 키프레임: 이동 1.8초 cubic-bezier(.16,.8,.24,1) */
  transition: top 1.8s cubic-bezier(0.16, 0.8, 0.24, 1);
  will-change: top;
}


/* 맨 위로 빠진 행을 맨 아래로 옮길 때는 움직임 없이 */
.hm-row.is-wrapping {
  transition: none;
}

/* 썸네일: 피그마 노란 바탕(#FADC38) + radius 12, 가로 위치·폭은 행마다 다르다 */
.hm-tile {
  position: relative;
  width: calc(var(--u) * var(--w));
  height: calc(var(--u) * 120);
  margin-left: calc(var(--u) * var(--x));
  border-radius: calc(var(--u) * 12);
  background: #fadc38;
  overflow: hidden;
}

.hm-tile-media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}


/* 단어: Tannakone Medium 110 / 행간 100, 검정. 행마다 가운데 x(--cx)가 다르다 */
.hm-word {
  height: calc(var(--u) * 100);
  margin-left: calc(var(--u) * var(--cx));
  translate: -50% 0;
  width: max-content;
  color: var(--pl2-black);
  font-family: var(--pl2-font-display);
  font-size: calc(var(--u) * 110);
  font-weight: 500;
  line-height: calc(var(--u) * 100);
  white-space: nowrap;
}

/* 위아래 딤 (PC 피드백_1026, 피그마 Dim 1920x320 두 장).
   흰색 2% + 가장자리 흰색 100% → 안쪽 320 에서 투명한 그라디언트에,
   가장자리 25 → 안쪽 0 으로 줄어드는 점진 배경 블러(PROGRESSIVE)를 겹친다.
   CSS 에는 점진 블러가 없어서 블러 층(::before)을 같은 방향 마스크로 흐려 흉내 낸다.
   피그마 블러 반경은 CSS 값의 2배라 25 → 12.5 */
.hm-dim {
  position: absolute;
  left: 0;
  right: 0;
  z-index: 1;
  height: calc(var(--u) * 320);
  pointer-events: none;
}

.hm-dim::before {
  content: "";
  position: absolute;
  inset: 0;
  backdrop-filter: blur(calc(var(--u) * 12.5));
  -webkit-backdrop-filter: blur(calc(var(--u) * 12.5));
}

.hm-dim--top {
  top: 0;
  background: linear-gradient(#fff, rgba(255, 255, 255, 0)), rgba(255, 255, 255, 0.02);
}

.hm-dim--top::before {
  mask-image: linear-gradient(#000, transparent);
  -webkit-mask-image: linear-gradient(#000, transparent);
}

.hm-dim--bottom {
  bottom: 0;
  background: linear-gradient(to top, #fff, rgba(255, 255, 255, 0)), rgba(255, 255, 255, 0.02);
}

.hm-dim--bottom::before {
  mask-image: linear-gradient(to top, #000, transparent);
  -webkit-mask-image: linear-gradient(to top, #000, transparent);
}

@media (prefers-reduced-motion: reduce) {
  .hm-row {
    transition: none;
  }
}