/* 히어로 장면 (T-968 · 부하 A) — #hero 전용. 접두사 hero- 만 쓴다.
   생 WebGL 잉크 배경 + 마스크 분할 키네틱 타이포. 색은 전부 tokens.css 변수. */

.hero {
  position: relative;
  height: 100svh;
  min-height: 480px;
  display: flex;
  align-items: center;
  overflow: hidden;
  isolation: isolate;
  /* 맨 아래 바탕. JS 가 아예 안 돌 때는 이것만 남는다(정지 그라디언트).
     5판 색 흐름과 같은 계열 — 하드코딩 hex 없이 토큰만 섞는다. */
  background:
    radial-gradient(110% 80% at 78% 8%, color-mix(in srgb, var(--grad-1) 26%, transparent) 0%, transparent 62%),
    radial-gradient(100% 78% at 96% 58%, color-mix(in srgb, var(--grad-3) 20%, transparent) 0%, transparent 60%),
    radial-gradient(120% 90% at 52% -18%, color-mix(in srgb, var(--grad-2) 30%, transparent) 0%, transparent 64%),
    var(--bg);
}

/* ── WebGL 캔버스: PC + 컨텍스트 확보 성공 시에만 hero.js 가 보이게 만든다 ── */
.hero-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  display: none;
  pointer-events: none;
}
.hero.has-shader .hero-canvas { display: block; }

/* ── 셰이더를 안 쓰는 경우(폰 · WebGL 없음)의 색 흐름 ────────────
   큰 원 다섯 개를 두 겹에 나눠 담고 **transform 만** 움직인다.
   transform 은 다시 그리지 않고 합성만 하므로 폰에서 제일 가볍다
   (배경 위치나 크기를 애니메이션하면 매 프레임 화면 전체를 다시 그린다).
   hero.js 가 .is-flow 를 붙였을 때만 생긴다. */
.hero.is-flow::before,
.hero.is-flow::after {
  content: "";
  position: absolute;
  z-index: 0;
  inset: -30%;
  pointer-events: none;
  will-change: transform;
}
/* 자리(%)는 이 칸 기준이다. 칸이 히어로보다 사방 30% 크므로
   화면에서 보이는 자리 = -30% + 여기 값 × 1.6 이다. */
.hero.is-flow::before {
  background:
    radial-gradient(56% 40% at 58% 38%,
      color-mix(in srgb, var(--grad-1) 74%, transparent) 0%,
      color-mix(in srgb, var(--grad-1) 24%, transparent) 45%, transparent 72%),
    radial-gradient(50% 36% at 72% 26%,
      color-mix(in srgb, var(--grad-3) 72%, transparent) 0%,
      color-mix(in srgb, var(--grad-3) 20%, transparent) 44%, transparent 70%);
  animation: heroFlowA 31s var(--ease) infinite alternate;
}
.hero.is-flow::after {
  background:
    radial-gradient(60% 42% at 49% 24%,
      color-mix(in srgb, var(--grad-2) 80%, transparent) 0%,
      color-mix(in srgb, var(--grad-2) 26%, transparent) 46%, transparent 72%),
    radial-gradient(42% 30% at 78% 42%,
      color-mix(in srgb, var(--grad-1) 52%, transparent) 0%,
      transparent 64%);
  animation: heroFlowB 43s var(--ease) infinite alternate;
}

@keyframes heroFlowA {
  0%   { transform: translate3d(-5%, -3%, 0) scale(1.00); }
  50%  { transform: translate3d(6%, 6%, 0) scale(1.18); }
  100% { transform: translate3d(-2%, 9%, 0) scale(1.06); }
}
@keyframes heroFlowB {
  0%   { transform: translate3d(6%, 5%, 0) scale(1.12); }
  50%  { transform: translate3d(-7%, -5%, 0) scale(0.94); }
  100% { transform: translate3d(4%, -9%, 0) scale(1.15); }
}

/* 글이 얹히는 왼쪽 아래를 배경색으로 가라앉히는 덮개.
   비어 있는 캔버스 칸을 재활용한다(HTML 은 그대로 둔다). 움직이지 않는다. */
.hero.is-flow.has-veil .hero-canvas {
  display: block;
  z-index: 1;
  background:
    radial-gradient(115% 88% at 20% 52%,
      var(--bg) 0%,
      color-mix(in srgb, var(--bg) 66%, transparent) 44%,
      transparent 78%),
    linear-gradient(to top,
      var(--bg) 0%,
      color-mix(in srgb, var(--bg) 55%, transparent) 20%,
      transparent 44%);
}

/* 움직임 줄이기 · GSAP 없음 · WebGL 없음 → 정지 그라디언트 */
.hero.is-static::before,
.hero.is-static::after { animation: none; }

.hero-inner {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: var(--gap-4);
  width: 100%;
}

.hero-kicker {
  margin: 0 0 var(--gap-4);
  font-family: var(--font-mono);
  color: var(--accent);
  font-size: var(--t-small);
  letter-spacing: .18em;
  text-transform: uppercase;
}

/* ── 큰 글자 세 줄: --wrap(1180px) 제약을 깨고 화면 폭에 거의 붙는다 ── */
.hero-title {
  margin: 0 0 var(--gap-6);
  width: 100vw;
  margin-left: calc(50% - 50vw);
  padding: 0 var(--pad-side);
  /* 폭만 보면 세로 낮은 노트북(1568×740 등)에서 세 줄이 넘친다 → 화면 높이로도 막는다 */
  font-size: min(var(--t-mega), 14.5svh);
  font-weight: 700;
  line-height: 1.04;
  letter-spacing: -0.02em;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.hero-line { display: block; will-change: transform; }
.hero-line-cursor { display: block; will-change: transform; }
/* 한글은 줄상자(line-height)보다 글자 잉크가 위아래로 더 나온다. 마스크를 줄상자에
   딱 맞추면 받침과 윗점이 잘린다 — 위아래로 여유를 주고 그만큼 음수 여백으로 당겨
   줄 간격은 그대로 둔다. */
.hero-line-mask { display: block; overflow: hidden; padding-block: .16em; margin-block: -.14em; }
.hero-line-inner { display: block; white-space: nowrap; }
.hero-char { display: inline-block; will-change: transform; }

/* 진입 전 숨김 상태 — html.js 아래에서만. JS 가 안 돌면(또는 js 클래스가 없으면)
   이 규칙 자체가 안 걸려서 글자는 처음부터 다 보인다. */
html.js .hero-char { transform: translateY(140%); }

/* 안전판: 움직임 줄이기 / GSAP 없음이면 CSS 만으로도 확실히 다 보이게 한다.
   (hero.js 가 인라인 style 로도 같은 일을 하지만 이중으로 막는다) */
html.no-gsap .hero-char { transform: none; }
@media (prefers-reduced-motion: reduce) {
  html.js .hero-char { transform: none; }
}

.hero-sub {
  margin: 0;
  font-size: var(--t-big);
  color: var(--text);
  max-width: 46ch;
}
.hero-note {
  margin: var(--gap-2) 0 0;
  font-size: var(--t-small);
  color: var(--muted);
  max-width: 56ch;
}

/* ── 스크롤 유도 ───────────────────────────────────────── */
.hero-scroll {
  position: absolute;
  left: 50%;
  bottom: var(--gap-8);
  transform: translateX(-50%);
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: var(--t-tiny);
  letter-spacing: .14em;
  transition: opacity .4s var(--ease), transform .4s var(--ease);
}
.hero-scroll.is-hidden {
  opacity: 0;
  transform: translateX(-50%) translateY(8px);
}
.hero-scroll-line {
  position: relative;
  width: 1px;
  height: 42px;
  background: var(--border);
  overflow: hidden;
}
.hero-scroll-line::after {
  content: "";
  position: absolute;
  left: 0; top: -40%;
  width: 100%; height: 40%;
  background: linear-gradient(var(--accent), transparent);
  animation: heroScrollFlow 1.8s ease-in-out infinite;
}
@keyframes heroScrollFlow {
  0%   { transform: translateY(-20%); }
  100% { transform: translateY(260%); }
}

@media (max-width: 480px) {
  /* 6글자 줄("만들어집니다")이 --t-mega 최댓값 근처에서 폭을 넘기지 않게 폰만 살짝 낮춘다 */
  .hero-title { font-size: clamp(2.4rem, 13.2vw, 6rem); }
}