@charset "UTF-8";

/* ============================================================
   top.css（英語版）— トップページ専用
   1. ヒーロー
   2. About
   3. Featured Projects
   4. Latest News / Recent Publications
   ============================================================ */

/* ============================================================
   1. ヒーロー
   ============================================================ */
/* ファーストビューはウィンドウの高さにフィット（SP はアドレスバー表示時の高さ = svh 基準でガタつかせない） */
.top-hero {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100svh;
  padding: var(--header-h) var(--side-s) var(--side-s);
  background: var(--neutral-200);

  @media (max-width: 840px) {
    padding: var(--header-h) var(--gap-s) var(--gap-s);
  }
}

.top-hero-panel {
  position: relative;
  display: flex;
  align-items: center;
  flex: 1;
  min-height: 480px; /* 低いウィンドウでもコピーが収まる高さは確保 */
  padding: var(--tb-l) var(--side);
  overflow: hidden;
  color: var(--neutral-0);
  background: var(--neutral-1000);
  border-radius: var(--radius);

  /* SP は下揃え */
  @media (max-width: 840px) {
    align-items: flex-end;
    min-height: 400px;
  }
}

/* 背景アニメーション（動画）: パネル全面に敷き、ループ再生する */
.top-hero-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}

.top-hero-copy {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.top-hero-title {
  font-size: var(--title-xxl);
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0; /* Figma: このタイトルのみトラッキングなし */
}

.top-hero-lead {
  font-size: var(--text-p);
  line-height: 1.5;

  @media (max-width: 840px) {
    font-size: var(--text-p-s);
    line-height: 1.4;
  }
}

/* ============================================================
   2. About
   ============================================================ */
.top-about {
  position: relative;
  display: flex;
  height: 800px;
  padding: var(--side-s);
  overflow: hidden;
  /* 背景が拡大しきるまでの余白はヒーロー外側と同色 */
  background: var(--neutral-200);

  @media (max-width: 840px) {
    height: 560px;
  }
}

/* 背景画像: --about-progress（0 → 1）に合わせて 85% → 100% に拡大。
   JS 無効時は 1（拡大済み）で表示 */
.top-about-bg {
  position: absolute;
  inset: 0;
  background: var(--blue-1000) url("/en/common/images/bg_about.jpg") center / cover no-repeat;
  transform: scale(calc(0.85 + 0.15 * var(--about-progress, 1)));
  will-change: transform;

  /* SP は PC 用の書き出し（1440×800 で切り抜き済み）だと拡大されすぎるため、元画像で Figma と同じ画角にする */
  @media (max-width: 840px) {
    background-image: url("/en/common/images/bg_about_sp.jpg");
  }
}

.top-about-glass {
  position: relative;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  padding: var(--tb-l) var(--side);
  background: rgb(255 255 255 / 0.06);
  border-radius: var(--radius);
  backdrop-filter: blur(8px);

  @media (max-width: 840px) {
    backdrop-filter: blur(3px);
  }

  /* 背景が広がりきったら表示（top.js が .top-about に .is-active を付与） */
  .js & {
    opacity: 0;
    transition: opacity 1.2s var(--ease-out-expo);
  }

  .js .top-about.is-active & {
    opacity: 1;
  }
}

.top-about-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  /* Figma では PC / SP とも 56px 固定 */
  gap: 56px;
  width: 100%;
  color: var(--neutral-0);
  text-align: center;
}

.top-about-main {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--gap-l);
  width: 100%;
}

.top-about-label {
  font-size: var(--title-s);
  font-weight: 600;
  line-height: 1.3;
}

.top-about-brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 39px;
  width: 100%;
}

.top-about-logo {
  width: 359px;
  height: auto;
}

.top-about-text {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--gap-s);
}

.top-about-name {
  font-size: var(--title-xl);
  font-weight: 700;
  line-height: 1.2;
}

.top-about-desc {
  max-width: 414px;
  font-size: var(--title-s);
  font-weight: 600;
  line-height: 1.3;
}

.top-about-line {
  display: block;
  width: 56px;
  height: 1px;
  background: var(--neutral-0);

  @media (max-width: 840px) {
    width: 32px;
  }
}

/* ============================================================
   3. Featured Projects
   ============================================================ */
.top-projects {
  padding: var(--side-s);
  background: var(--neutral-0);
}

.top-projects-box {
  display: flex;
  flex-direction: column;
  gap: var(--gap-l);
  padding: var(--tb-m) var(--side-s);
  background: var(--neutral-0);
  border-radius: var(--radius);
  filter: drop-shadow(0 0 6px #e4e4e4);

  /* Figma SP: 左右 24px（カード幅 280px） */
  @media (max-width: 840px) {
    padding-inline: var(--side);
  }
}

/* カードは Figma（画面幅 1440px）の幅を上限に、それ以上は広げず中央寄せ */
.top-projects-box > .card-grid {
  width: 100%;
  max-width: 1344px;
  margin-inline: auto;
}

/* ============================================================
   4. Latest News / Recent Publications
   ============================================================ */
.top-news,
.top-pubs {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--gap-l);
  padding: var(--tb-m) var(--side);
  overflow: hidden;
  background: var(--neutral-150);

  > * {
    width: 100%;
    max-width: var(--content-max);
  }
}

/* News と Publications の区切り線 */
.top-divider {
  height: 1px;
  margin: 0;
  background: var(--neutral-200);
  border: 0;
}

/* SP は先頭 3 件のみ表示（PHP の出力件数は変えない） */
.top-grid {
  > li:nth-child(n + 4) {
    @media (max-width: 840px) {
      display: none;
    }
  }
}

/* Publications のタイトルは黒（Figma: Neutral/1000） */
/* 背景のロゴアイコン（Figma: 左 -181px / 上 279px / 1000×759） */
.top-pubs::before {
  content: "";
  position: absolute;
  top: 279px;
  left: -181px;
  width: 1000px;
  height: 759px;
  background: url("/en/common/images/bg_icn-logo.svg") center / contain no-repeat;
  pointer-events: none;

  /* Figma SP: 左 -220px / 上 719px / 653×496 */
  @media (max-width: 840px) {
    top: 719px;
    left: -220px;
    width: 653px;
    height: 496px;
  }
}

.top-pubs > * {
  position: relative;
}

.top-pubs .section-head-title {
  color: var(--neutral-1000);
}