/* =========================================================================
   API 투자전략센터 — 메인 히어로
   배경 영상(인트로 1회 → 루프 무한 반복) 위에 왼쪽 카피를 얹는다.
   영상에 알파가 없고 배경이 검정으로 박혀 있어 테마와 무관하게 늘 어둡다.
   ========================================================================= */

/* 히어로 제목에만 쓴다. 다른 화면은 Pretendard 그대로라 여기에서만 선언한다. */
@font-face {
  font-family: "KIMM";
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  src: url("../assets/fonts/KIMM_bold_1.woff") format("woff");
}

.hero-fx {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: flex-start;
  padding: var(--hero-pad-t) 0 60px;
  overflow: hidden;
  isolation: isolate;
  background: var(--hero-bg);

  /* 카피 윗선 — 시안 1920×1080 기준 282px(=26.1svh). 상한에서 멈춘다.
     데스크탑에서는 fullpage.css 가 이 값을 padding-block 으로 다시 쓴다. */
  --hero-pad-t: clamp(160px, 26.1svh, 330px);

  /* 영상은 왼쪽 위 모서리를 기준으로 놓고 오른쪽·아래로 흘려보낸다.
     윗변은 화면 높이와 무관하게 같은 px 자리에 온다. */
  --hero-media-top: 50px;                        /* 시안 실측 — GNB(73px) 아래로 살짝 물린다 */
  --hero-media-left: clamp(0px, 13.28vw, 255px); /* 시안 1920 기준 255px */
  --hero-media-zoom: 1.082;                      /* 오른쪽·아래로 흘려보낼 여유분 */
  /* 카피 왼쪽 시작점 — 시안 1920 기준 184px. GNB 거터(80px)와는 다른 값이다. */
  --hero-pad-l: clamp(20px, 9.6vw, 184px);
}

/* ---------------------------------------------------------------- 영상 */
.hero-fx__media {
  position: absolute;
  inset: var(--hero-media-top) 0 0 var(--hero-media-left);
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}
.hero-fx__poster,
.hero-fx__video {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: left top;
  transform-origin: 0 0;
  transform: scale(var(--hero-media-zoom));
  /* 화면 안으로 들어오는 왼쪽·위 가장자리는 잘린 단면이 보이므로 검정으로 풀어 준다. */
  -webkit-mask-image: linear-gradient(to right, transparent, #000 8%), linear-gradient(to bottom, transparent, #000 10%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to right, transparent, #000 8%), linear-gradient(to bottom, transparent, #000 10%);
  mask-composite: intersect;
  border: 0; /* 전역 CSS 가 video 에 테두리를 주는 사이트가 있다 */
  outline: 0;
}
/* 영상을 못 받았거나 동작을 줄이는 설정이면 포스터만 남는다. 각 영상의 첫 프레임이다. */
.hero-fx__poster {
  background: url(../assets/videos/hero_poster.webp) center / cover no-repeat;
}
:root[data-theme="light"] .hero-fx__poster {
  background-image: url(../assets/videos/hero_poster_light.webp);
}
/* 영상은 포스터 위에 깔린다. */
.hero-fx__video { z-index: 1; }
/* 영상이 돌기 시작하면 포스터를 내린다. 마스크로 페더된 가장자리는 영상이 반투명이라
   그 밑의 정지 이미지가 최대 25% 비쳐 잔상으로 보인다. */
.hero-fx__media[data-playing] .hero-fx__poster { opacity: 0; }

/* 동작 최소화 설정이면 영상을 감추고 포스터만 남긴다. */
@media (prefers-reduced-motion: reduce) {
  .hero-fx__video { display: none; }
  .hero-fx__media[data-playing] .hero-fx__poster { opacity: 1; }
}

/* 루프 구간은 네온이 모두 켜져 왼쪽 아래가 밝아진다 — 카피 쪽만 눌러 준다. */
.hero-fx__scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(
    90deg,
    rgba(0, 0, 4, 0.88) 0%,
    rgba(0, 0, 4, 0.6) 30%,
    rgba(0, 0, 4, 0) 62%
  );
}
/* 라이트 영상은 밝으므로 같은 그라데이션을 밝은 쪽으로 뒤집는다. */
:root[data-theme="light"] .hero-fx__scrim {
  background: linear-gradient(
    90deg,
    rgba(229, 227, 228, 0.92) 0%,
    rgba(229, 227, 228, 0.65) 30%,
    rgba(229, 227, 228, 0) 62%
  );
}

/* ---------------------------------------------------------------- 카피 */
.hero-fx__copy {
  position: relative;
  z-index: 2;
  width: 100%;
  padding-left: var(--hero-pad-l);
  padding-right: var(--gutter);
}
.hero-fx__title {
  margin: 0;
  font-family: "KIMM", var(--font-sans);
  font-weight: 700;
  font-size: clamp(34px, 3.34vw, 64px);
  line-height: 1.25;
  letter-spacing: -0.02em;
  color: var(--hero-title);
}
.hero-fx__title .accent { color: var(--hero-title-accent); }

.hero-fx__sub {
  margin: 17px 0 0;
  max-width: 420px;
  font-size: clamp(15px, 1.05vw, 20px);
  line-height: 1.6;
  letter-spacing: -0.01em;
  color: var(--hero-sub);
}

/* 시안 220×65. 색만 히어로 전용 값으로 갈아 끼우고 나머지는 .btn-primary 그대로 쓴다. */
.hero-fx__cta {
  --btn-primary-bg: var(--hero-cta-bg);
  margin-top: 50px;
  min-width: 220px;
  height: 65px;
  padding: 0 34px;
  font-size: 18px;
  line-height: 1.2;
  color: #fff;
}
.hero-fx__cta:hover { --btn-primary-bg: var(--hero-cta-bg-hover); }

/* ---------------------------------------------------------- 스크롤 힌트 */
.hero-fx__scroll {
  position: absolute; left: var(--hero-pad-l); bottom: 28px; z-index: 3;
  display: inline-flex; align-items: center; gap: 9px;
  font-size: var(--fs-code-chip); line-height: var(--lh-code-chip); color: var(--text-dim); letter-spacing: 0.04em;
}
.hero-fx__scroll .mouse { width: 20px; height: 32px; border: 1.5px solid var(--text-inactive); border-radius: 12px; position: relative; }
.hero-fx__scroll .mouse::after { content: ""; position: absolute; left: 50%; top: 6px; width: 3px; height: 6px; border-radius: 3px; background: var(--accent-cyan); transform: translateX(-50%); animation: mscroll 1.6s ease-in-out infinite; }
@keyframes mscroll { 0%,100% { opacity: 0; transform: translate(-50%, 0); } 40% { opacity: 1; } 80% { opacity: 0; transform: translate(-50%, 9px); } }

/* 라이트 테마에는 밝은 배경 영상이 깔리므로, 히어로 위 GNB·스크롤 힌트도
   :root 의 라이트 값을 그대로 쓴다 — 여기서 따로 손댈 것이 없다. */

/* ---------------------------------------------------------------- 반응형 */
@media (max-width: 980px) {
  /* 시안 360×800 — 위쪽은 가운데 정렬 카피, 아래쪽 373px(=46.6%)은 영상 블록.
     글자가 영상 위에 얹히지 않으므로 스크림도 필요 없다. */
  .hero-fx {
    display: block;
    min-height: 100svh;
    padding: 0;
    --hero-media-zoom: 1;
  }
  .hero-fx__media { inset: 53.4% 0 0 0; }
  .hero-fx__poster,
  .hero-fx__video {
    /* 시안은 664×373 영상을 왼쪽으로 200px 내보내 자른다 → 슬랙(304px)의 65.8% 지점 */
    object-position: 65.8% center;
    /* 블록 위쪽 단면으로 파란 레일이 잘려 보이므로 그 변만 풀어 준다. */
    -webkit-mask-image: linear-gradient(to bottom, transparent, #000 11%);
    mask-image: linear-gradient(to bottom, transparent, #000 11%);
    -webkit-mask-composite: source-over;
    mask-composite: add;
  }
  .hero-fx__scrim { display: none; }
  .hero-fx__brk { display: none; }

  .hero-fx__copy {
    padding: 15.4svh var(--gutter) 0;
    text-align: center;
  }
  .hero-fx__title { font-size: clamp(24px, 7.78vw, 34px); line-height: 1.35; }
  .hero-fx__sub {
    margin: 12px auto 0;
    /* 시안 360 폭에서 246px — 폰트가 커지는 태블릿에서도 같은 비율로 줄이 끊기게 한다. */
    max-width: min(68.3vw, 420px);
    font-size: clamp(13px, 3.9vw, 16px);
    line-height: 1.4;
    letter-spacing: -0.02em;
  }
  .hero-fx__cta {
    margin-top: 30px;
    min-width: 0;
    height: 46px;
    padding: 0 36px;
    font-size: 14px;
  }
  .hero-fx__scroll { display: none; }
}