/* ============================================================
   FV — ファーストビュー
   Figma 基準: PC 1280×832 / 1440×1024(max) / SP 390×844
   ============================================================ */

/* ============================================================
   初期表示アニメーション
   順序: texture(0.2s) → content(1.0s) → gallery(1.8s)
   ============================================================ */

/* opacity + Y 方向の浮き上がり */
@keyframes fv-fade-up {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* opacity のみ（content は transform が別途あるため） */
@keyframes fv-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.fv__texture {
  opacity: 0;
  animation: fv-fade-up 1.2s ease forwards 0.1s;
}

.fv__content {
  opacity: 0;
  animation: fv-fade-in 1.2s ease forwards 0.5s;
}

.fv__gallery-wrapper {
  opacity: 0;
  animation: fv-fade-up 1.2s ease forwards 0.9s;
}

/* ============================================================
   セクション本体
   ============================================================ */
.fv {
  position: relative;
  width: 100%;
  height: 100svh;
  min-height: 600px;
  margin-bottom: clamp(60px, 10vh, 120px); /* 次セクションとの余白（内部レイアウトに影響なし） */
  overflow: hidden;   /* テクスチャの上方向はみ出し＆ギャラリー右端クリップ */
  background: #fff;
}

/* ============================================================
   テクスチャ（bgtexture.svg / 1381×1381 正方形）

   PC  : 右端に配置、上方向に約 19vh はみ出す
         幅 = clamp(390px, 49.5vw, 720px)
         1280px 時: 49.5vw = 634px ≈ 元デザインの 633px ✓
         1440px 上限: 720px でキャップ

   SP  : 左端に配置、上方向に 25vw はみ出す
         幅 = 100vw（SVG が正方形なので高さも 100vw）

   ポイント: wrapper に width/top を持たせ、img は width:100% で追従
   ============================================================ */
.fv__texture {
  --texture-w: clamp(390px, 49.5vw, 720px); /* SVG は正方形なので高さ = 幅 */
  position: absolute;
  right: 0;
  top: calc(var(--texture-w) * -0.25);  /* SVG 高さの 25% 上にずらす */
  width: var(--texture-w);
  pointer-events: none;
  z-index: 0;
}

.fv__texture img {
  display: block;
  width: 100%;
  height: auto;
}

/* ============================================================
   インナーラッパー（max-width: 1512px でセンタリング）
   .fv__content / .fv__gallery-wrapper はこの中で absolute 指定
   ============================================================ */
.fv__inner {
  position: relative;
  height: 100%;
  max-width: 1512px;
  margin-inline: auto;
}

/* ============================================================
   コンテンツ（タグライン・ロゴ・CTA）

   PC  : left = 97px@1280 → 113px@1440  (≈ 7.58vw)
         top  = 189px@1280 → 262px@1024h (≈ 22.7vh)
   SP  : 中央揃え、top = 42vh
   ============================================================ */
.fv__content {
  position: absolute;
  z-index: 1;
  left: clamp(97px, 7.58vw, 113px);
  top: 40%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(28px, 2.75vw, 40px);
  width: clamp(300px, 31.9vw, 462px);
}

/* タグライン */
.fv__tagline {
  margin: 0;
  font-family: 'Zen Kaku Gothic Antique', sans-serif;
  font-weight: 500;
  font-size: clamp(13px, 1.25vw, 16px);
  color: #3d405b;
  text-align: center;
  letter-spacing: 0.37em;
  line-height: 2.1;
  white-space: nowrap;
}

/* ロゴ画像（logo.svg 追加後に .fv__logo-placeholder と差し替え） */
.fv__logo {
  display: block;
  width: 100%;
  height: auto;
}

/* ロゴプレースホルダー（暫定） */
.fv__logo-placeholder {
  margin: 0;
  font-family: 'Zen Kaku Gothic Antique', sans-serif;
  font-weight: 700;
  font-size: clamp(36px, 5vw, 64px);
  color: #3d405b;
  text-align: center;
  line-height: 1.1;
  letter-spacing: 0.05em;
}
.fv__logo-placeholder span {
  display: block;
  font-size: 0.4em;
  letter-spacing: 0.5em;
  font-weight: 500;
  margin-top: 0.3em;
}

/* CTA ボタン */
.fv__cta {
  display: flex;
  align-items: center;
  justify-content: center;
  width: clamp(210px, 22.4vw, 325px);
  height: clamp(49px, 5.25vw, 76px);
  background: #e07a5f;
  border-radius: 80px;
  color: #fff;
  font-family: 'Zen Kaku Gothic Antique', sans-serif;
  font-weight: 700;
  font-size: clamp(13px, 1.41vw, 20px);
  letter-spacing: 0.19em;
  text-decoration: none;
  transition: opacity 0.2s, transform 0.2s;
}
.fv__cta:hover,
.fv__cta:focus-visible {
  opacity: 0.85;
  transform: translateY(-2px);
}

/* ============================================================
   ギャラリー

   初期状態: 4枚目が右端からはみ出てクリップされる
   スライダー JS は後から追加（フック: #fv-gallery）
   ============================================================ */
.fv__gallery-wrapper {
  position: absolute;
  z-index: 1;
  bottom: clamp(20px, 3vh, 44px);
  left: 0;
  right: 0;
}

.fv__gallery {
  display: flex;
  align-items: flex-start;
  flex-wrap: nowrap;
  padding-left: clamp(44px, 14.8vw, 204px);
  gap: clamp(21px, 2.95vw, 43px);
}

/* ============================================================
   ギャラリーカード
   画像サイズ: 772×476px（アスペクト比 ≈ 1.622）
   ============================================================ */
.gallery-card {
  --card-w: clamp(200px, 21.5vw, 312px);
  flex-shrink: 0;
  width: var(--card-w);
  aspect-ratio: 772 / 476;
  overflow: hidden;
  border-radius: 4px;
}

.gallery-card img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ============================================================
   レスポンシブ: ≥ 1440px 上限固定
   ============================================================ */
@media (min-width: 1440px) {
  .fv__texture {
    width: 720px;
  }
  .fv__content {
    left: 113px;
    /* top: 50% + translateY(-50%) はそのまま継承 */
  }
  .fv__gallery {
    padding-left: 204px;
    gap: 43px;
  }
  .gallery-card {
    --card-w: 312px;
  }
}

@media (min-width: 1513px) {
  /* ラッパーをフルワイドのままにし、内側を 1377px に絞ってセンタリング */
  .fv__gallery-wrapper {
    display: flex;
    justify-content: center;
    overflow: hidden;
  }

  .fv__gallery {
    padding-left: 0;
    width: calc(4 * 312px + 3 * 43px); /* 1377px: 4枚 + 3gap */
    flex-shrink: 0;
    overflow: hidden;
  }

  /* ----------------------------------------------------------------
     .fv__inner の max-width を 1512px → 1692px に緩やかに拡大
     計算式: 1512px + (100vw - 1513px) × 180 / 535px
  ---------------------------------------------------------------- */
  .fv__inner {
    max-width: clamp(1512px, calc(1512px + (100vw - 1513px) * (180 / 535)), 1692px);
  }

  /* ----------------------------------------------------------------
     1513px〜2048px: .fv__content と .fv__texture を緩やかにスケール
     scale = 1.0（1513px） → 1.2（2048px）
     計算式: 1 + (100vw - 1513px) × 0.2 / 535px
     clamp で 1.0〜1.2 の範囲に収める
  ---------------------------------------------------------------- */
  .fv {
    --fv-scale: clamp(1, calc(1 + (100vw - 1513px) * 0.2 / 535px), 1.2);
  }

  .fv__texture {
    /* standalone scale プロパティ: animation の transform と競合しない */
    scale: var(--fv-scale);
    transform-origin: top right;
  }

  .fv__content {
    /* transform は translateY(-50%) のまま、scale は独立したプロパティで追加 */
    scale: var(--fv-scale);
  }
}

/* ============================================================
   レスポンシブ: SP（〜 767px）
   ============================================================ */
@media (max-width: 767px) {

  /* テクスチャを左上に移動、幅 100vw */
  .fv__texture {
    right: auto;
    left: 0;
    top: -25vw;
    width: 100vw;
  }

  /* コンテンツを中央揃え */
  .fv__content {
    left: 50%;
    top: 55%;
    transform: translate(-50%, -50%);
    width: clamp(260px, 77vw, 320px);
    gap: 26px;
  }

  .fv__tagline {
    font-size: 14px;
    letter-spacing: 0.14em;
    white-space: normal;
  }

  .fv__cta {
    width: 211px;
    height: 49px;
    font-size: 13.5px;
  }

  /* ギャラリー: 1枚目を画面外左に出し、2〜3枚目が見え、4枚目が右端でクリップ */
  .fv__gallery {
    padding-left: 0;
    margin-left: -160px;
    gap: 21px;
  }

  .gallery-card {
    --card-w: 155px;
  }
}