/* =========================================================
   FFF Home Hero — Scroll-driven Flip Card Grid
   ---------------------------------------------------------
   - 6×6 = 36 枚のカードが画面いっぱい
   - 文字 (12) とゴールド背景 (3) はランダム配置（空欄カードあり）
   - PCはホバーで単体フリップ
   - ファーストビューはヘッダー / レール / 装飾を全部隠して没入
   - Phase 1: 黒カードグリッドに横断タイポ「正しさだけでは...」
   - Phase 2: 全カードが裏返り、白カードと言葉が現れる
   - Phase 3: グリッドが上昇し、中央にブランド名（筆記体）
   ========================================================= */

:root {
  --fff-hero-black: #0E0E0E;
  --fff-hero-black-soft: #111111;
  --fff-hero-white: #FFFFFF;
  --fff-hero-text-dark: #111111;
  --fff-hero-text-light: #FFFFFF;
  --fff-hero-gold: #B89B5E;
  --fff-hero-gold-soft: #C9AC72;
  --fff-hero-line-light: rgba(255, 255, 255, 0.12);
  --fff-hero-line-dark: rgba(17, 17, 17, 0.08);
  --fff-hero-gold-line: rgba(184, 155, 94, 0.45);

  /* ---- 調整しやすいパラメータ ---- */
  --fff-hero-cols: 8;          /* デスクトップ列数 */
  --fff-hero-rows: 5;          /* デスクトップ行数 */
  --fff-hero-gap: 1px;         /* カード間 = グレー線 1px */
  --fff-hero-radius: 0px;      /* グリッド連続線にするため角丸なし */
  --fff-hero-grid-line: rgba(128, 128, 128, 0.35);  /* カード間の線色 */
}

/* ============================================
   ヒーロー全体（フルブリード）
   ============================================ */
.fff-hero-flip {
  position: relative;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  /* スクロール余裕：6 viewport heights ぶん
     - build-up: 60% = 約 3 viewport heights ぶん（じっくり見せる）
     - 静止表示（ロゴ＋社名）: 40% = 約 2 viewport heights ぶん（余韻たっぷり） */
  height: 600svh;
  background: var(--fff-hero-black);
  color: var(--fff-hero-text-light);
  overflow: clip;
  isolation: isolate;
  z-index: 5;
}

body.home .fff-hero-flip,
body.page-id-543 .fff-hero-flip {
  margin-top: 0 !important;
}

/* ============================================
   ホーム / 543 ページ：ヒーローを画面最上部から
   始めるためにラッパーの上余白を全部ゼロ化、
   ヘッダーは fixed にしてレイアウトを取らない
   ============================================ */
body.home,
body.page-id-543 {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

body.home #wrapper,
body.home #inner-wrap,
body.home #primary,
body.home .content-area,
body.home article.entry,
body.home .entry-content-wrap,
body.home .entry-content,
body.home .wp-site-blocks,
body.page-id-543 #wrapper,
body.page-id-543 #inner-wrap,
body.page-id-543 #primary,
body.page-id-543 .content-area,
body.page-id-543 article.entry,
body.page-id-543 .entry-content-wrap,
body.page-id-543 .entry-content,
body.page-id-543 .wp-site-blocks {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* ヘッダーを fixed にしてレイアウトから外す（白帯の原因はこれ） */
body.home #masthead,
body.home .site-header,
body.home #mobile-header,
body.home .site-header-wrap,
body.page-id-543 #masthead,
body.page-id-543 .site-header,
body.page-id-543 #mobile-header,
body.page-id-543 .site-header-wrap {
  position: fixed !important;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
}

/* ============================================
   ヘッダー / レール / 装飾の表示制御
   ---------------------------------------------
   ホームページ (body.home / body.page-id-543) では
   デフォルトで隠す。JS が I — APPROACH を検知して
   .fff-hero-revealed を付けた瞬間に表示する。
   ============================================ */
/* グローバル背景 (.fff-global-bg) は最初から表示。隠す対象はヘッダー/レール/スクロールプログレスのみ。 */
body.home :is(
  .site-header,
  #masthead,
  header.site-header,
  .kadence-pro-header,
  .kadence-pro-header-wrap,
  .site-top-header-wrap,
  .site-header-wrap,
  .fff-page-rail,
  .fff-scroll-progress
),
body.page-id-543 :is(
  .site-header,
  #masthead,
  header.site-header,
  .kadence-pro-header,
  .kadence-pro-header-wrap,
  .site-top-header-wrap,
  .site-header-wrap,
  .fff-page-rail,
  .fff-scroll-progress
) {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.55s ease;
}

body.home.fff-hero-revealed :is(
  .site-header,
  #masthead,
  header.site-header,
  .kadence-pro-header,
  .kadence-pro-header-wrap,
  .site-top-header-wrap,
  .site-header-wrap,
  .fff-page-rail,
  .fff-scroll-progress
),
body.page-id-543.fff-hero-revealed :is(
  .site-header,
  #masthead,
  header.site-header,
  .kadence-pro-header,
  .kadence-pro-header-wrap,
  .site-top-header-wrap,
  .site-header-wrap,
  .fff-page-rail,
  .fff-scroll-progress
) {
  opacity: 1;
  pointer-events: auto;
}

/* ヒーロー内側の sticky ステージ
   - 背景色は JS が --fff-hero-stage-bg をスクロール連動で変える
     (Phase 2 で黒 → 白へ滑らかに遷移) */
.fff-hero-flip__stage {
  position: sticky;
  top: 0;
  width: 100%;
  height: 100svh;
  display: grid;
  place-items: center;
  background-color: var(--fff-hero-stage-bg, var(--fff-hero-black));
  overflow: hidden;
  z-index: 1;
  transition: background-color 0.05s linear;
}

/* ============================================
   カードグリッド — 画面いっぱいに敷き詰める
   ============================================ */
.fff-hero-flip__grid {
  position: relative;
  /* JS が hero 全体を viewport ぴったりに揃えるので、grid は 100% で OK */
  width: 100%;
  height: 100svh;
  display: grid;
  grid-template-columns: repeat(var(--fff-hero-cols), 1fr);
  grid-template-rows: repeat(var(--fff-hero-rows), 1fr);
  gap: var(--fff-hero-gap);
  padding: var(--fff-hero-gap);
  box-sizing: border-box;
  /* グリッド背景にグレーを敷くと、gap (1px) からそのまま線が透けて見える
     → 隣接カード境界が確実に 1 本の線に */
  background: var(--fff-hero-grid-line);
  perspective: 2200px;
  perspective-origin: 50% 50%;
  transform: translate3d(0, var(--fff-hero-lift, 0px), 0)
             scale(var(--fff-hero-scale, 1));
  transition: transform 0.05s linear;
  will-change: transform;
}

/* ============================================
   表面の大きめピクトグラム装飾（Phase 1）
   ---------------------------------------------
   黒キャンバスに白線でランダム配置。
   キャプションと一緒にフェードアウト。
   ============================================ */
.fff-hero-flip__front-decor {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  opacity: var(--fff-hero-decor-opacity, 1);
  transition: opacity 0.18s linear;
}

.fff-hero-flip__front-pict {
  position: absolute;
  /* SVG viewBox 200x220 に合わせる */
  aspect-ratio: 200 / 220;
  display: block;
}
.fff-hero-flip__front-pict img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  /* 白線版 SVG（pict-XXw.svg）を直接表示。
     反転フィルターを使わないので、ゴールドはそのまま金色で出る */
  opacity: 0.7;
}

/* 3 ポジション — 軽く見切れる 2 つ + 普通サイズ 1 つ
   （図解が見える範囲を 90% 以上残す） */
.fff-hero-flip__front-pict--pos-1 {
  /* 大：左上、ほんのり見切れる */
  top: -5%;
  left: -3%;
  width: clamp(260px, 34vw, 560px);
}
.fff-hero-flip__front-pict--pos-2 {
  /* 普通サイズ：中右付近 */
  top: 32%;
  right: 5%;
  width: clamp(130px, 15vw, 240px);
}
.fff-hero-flip__front-pict--pos-3 {
  /* 大：右下、ほんのり見切れる */
  bottom: -6%;
  right: -4%;
  width: clamp(280px, 36vw, 600px);
}

/* モバイルもバランス再調整 */
@media (max-width: 640px) {
  .fff-hero-flip__front-pict--pos-1 { width: 48vw; top: -4%;  left: -4%; }
  .fff-hero-flip__front-pict--pos-2 { width: 28vw; top: 38%;  right: 4%; }
  .fff-hero-flip__front-pict--pos-3 { width: 52vw; bottom: -5%; right: -5%; }
  .fff-hero-flip__front-pict img { opacity: 0.45; }
}

/* ============================================
   共有タイポ（Phase 1）— 縁取りで常に読める
   ============================================ */
.fff-hero-flip__caption {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  pointer-events: none;
  z-index: 3;
  padding: 0 4vw;
  text-align: center;
  opacity: var(--fff-hero-caption-opacity, 1);
  transform: translate3d(0, var(--fff-hero-caption-shift, 0px), 0);
  transition: opacity 0.18s linear;
  will-change: opacity, transform;
}

.fff-hero-flip__caption-text {
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 900;
  font-size: clamp(2.4rem, 7vw, 6.8rem);
  line-height: 1.16;
  letter-spacing: 0.01em;
  color: var(--fff-hero-white);
  margin: 0;
  /* 文字に縁取り（フリップ中も読めるように） */
  -webkit-text-stroke: 1.2px var(--fff-hero-black);
  paint-order: stroke fill;
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.4);
}

/* ============================================
   カード本体
   ============================================ */
/* 外側の .card は「静止」させる — これが hit エリア。
   3D 回転は内側の .card-inner だけに掛けることで、
   90° 付近でカードが消えても hit エリア（外側）は失われない
   → くるくる無限スピン問題の根本対策 */
.fff-hero-flip__card {
  position: relative;
  width: 100%;
  height: 100%;
  cursor: pointer;
  /* transform を持たない＝静止＝hit エリア消えない */
}

/* 3D 回転は内側に */
.fff-hero-flip__card-inner {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  transform: rotateY(var(--fff-hero-card-rot, 0deg));
  transition: transform 0.35s cubic-bezier(0.25, 0.85, 0.3, 1);
  will-change: transform;
}

.fff-hero-flip.is-scrolling .fff-hero-flip__card-inner {
  transition: transform 0.08s linear;
}

/* ホバー反転 — 外側 .card の hover 状態を見て、内側を回転 */
@media (hover: hover) and (pointer: fine) {
  .fff-hero-flip__card:hover:not(.is-clicked-flipped) .fff-hero-flip__card-inner {
    transform: rotateY(180deg);
    transition: transform 0.32s cubic-bezier(0.2, 0.85, 0.3, 1);
  }
}

/* クリック / タップで「反転キープ」遊び心モード */
.fff-hero-flip__card.is-clicked-flipped .fff-hero-flip__card-inner {
  transform: rotateY(180deg);
  transition: transform 0.5s cubic-bezier(0.5, 0.05, 0.2, 1);
}
.fff-hero-flip__card.is-clicked-flipped .fff-hero-flip__face--back {
  /* 「選んだ」感を出す細いゴールドの内側枠 */
  box-shadow: inset 0 0 0 1.5px var(--fff-hero-gold);
}

.fff-hero-flip__face {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--fff-hero-radius);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  overflow: hidden;
  padding: 8%;
  text-align: center;
}

/* 表面 — 黒（個別 border は削除、grid bg で線を統一） */
.fff-hero-flip__face--front {
  background: var(--fff-hero-black-soft);
  color: var(--fff-hero-text-light);
}

/* 裏面 — 白がデフォルト */
.fff-hero-flip__face--back {
  background: var(--fff-hero-white);
  color: var(--fff-hero-text-dark);
  transform: rotateY(180deg);
  flex-direction: column;
  gap: 0.4rem;
}

.fff-hero-flip__back-text {
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 700;
  font-size: clamp(0.7rem, 1vw, 0.95rem);
  line-height: 1.55;
  color: var(--fff-hero-text-dark);
  margin: 0;
  /* Phase 3 でブランド名と被らないように、JS が opacity を 1→0 にする */
  opacity: var(--fff-hero-content-opacity, 1);
  transition: opacity 0.1s linear;
}

/* ============================================
   画像カード（ピクトグラム） — ランダム配置
   ============================================ */
.fff-hero-flip__card--image .fff-hero-flip__face--back {
  padding: 10%;
  /* 画像が真ん中に小さく見えるように余白多め */
  background: var(--fff-hero-white);
}
.fff-hero-flip__back-image {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  display: block;
  /* Phase 3 でブランド名と被らないように、JS が opacity を 1→0 にする */
  opacity: calc(var(--fff-hero-content-opacity, 1) * 0.92);
  transition: opacity 0.1s linear;
  user-select: none;
  pointer-events: none;
}

/* ゴールド背景カードも完全にフェード（ブランドが主役、グリッド線だけ残す） */
.fff-hero-flip__card--gold-bg .fff-hero-flip__face--back {
  opacity: var(--fff-hero-content-opacity, 1);
  transition: opacity 0.1s linear;
}

/* ============================================
   ゴールド背景カード（ランダム）
   ============================================ */
.fff-hero-flip__card--gold-bg .fff-hero-flip__face--back {
  background: var(--fff-hero-gold);
}
.fff-hero-flip__card--gold-bg .fff-hero-flip__back-text {
  color: #FFFFFF;
}

/* ============================================
   ブランドオーバーレイ（Phase 3）
   - 筆記体 (Great Vibes) ゴールド + 縁取り
   ============================================ */
.fff-hero-flip__brand {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate3d(-50%, calc(-50% + var(--fff-hero-brand-shift, 24px)), 0);
  text-align: center;
  z-index: 4;
  pointer-events: none;
  opacity: var(--fff-hero-brand-opacity, 0);
  transition: opacity 0.25s ease, transform 0.25s ease;
  width: min(94vw, 1000px);
}

/* ブランドマーク（大型ロゴ） */
.fff-hero-flip__brand-mark {
  width: clamp(180px, 26vmin, 360px);
  height: clamp(180px, 26vmin, 360px);
  margin: 0 auto 1.8rem;
  color: var(--fff-hero-black);
}
.fff-hero-flip__brand-mark .fff-mark {
  width: 100%;
  height: 100%;
}

.fff-hero-flip__brand-name {
  /* エディトリアル系セリフ — 黒で映える */
  font-family: 'Playfair Display', 'Cormorant Garamond', 'Times New Roman', serif;
  font-weight: 900;
  /* 1行で収まるサイズに（"Feel Free to Feeling" 16文字想定） */
  font-size: clamp(2rem, 8vw, 6.4rem);
  letter-spacing: -0.005em;
  line-height: 1.02;
  color: var(--fff-hero-black);
  margin: 0 0 1.1rem 0;
  white-space: nowrap;
  overflow: visible;
  /* 白背景に乗せるので縁取り不要 */
  -webkit-text-stroke: 0;
  text-shadow: none;
}

.fff-hero-flip__brand-line {
  display: inline-block;
  width: 56px;
  height: 1px;
  background: var(--fff-hero-gold);
  margin: 1.2rem auto;
  opacity: 0.95;
}

.fff-hero-flip__brand-lead {
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 500;
  font-size: clamp(1rem, 1.4vw, 1.25rem);
  line-height: 1.85;
  letter-spacing: 0.08em;
  color: var(--fff-hero-black);
  margin: 0;
  -webkit-text-stroke: 0;
  text-shadow: none;
}

/* ============================================
   レスポンシブ
   ============================================ */
@media (max-width: 1023px) {
  .fff-hero-flip {
    --fff-hero-cols: 5;
    --fff-hero-rows: 6;
    --fff-hero-gap: 1px;
    height: 560svh;
  }
  .fff-hero-flip__back-text {
    font-size: clamp(0.65rem, 1.4vw, 0.85rem);
  }
}

@media (max-width: 640px) {
  .fff-hero-flip {
    --fff-hero-cols: 4;
    --fff-hero-rows: 7;
    --fff-hero-gap: 1px;
    height: 500svh;
  }
  .fff-hero-flip__caption-text {
    font-size: clamp(1.6rem, 7vw, 2.6rem);
    line-height: 1.32;
    -webkit-text-stroke: 0.8px var(--fff-hero-black);
  }
  .fff-hero-flip__back-text {
    font-size: 0.78rem;
    line-height: 1.5;
  }
  .fff-hero-flip__brand-name {
    /* スマホで横幅きついので少し小さめ＋nowrap */
    font-size: clamp(1.7rem, 8.2vw, 3rem);
  }
  .fff-hero-flip__brand-lead {
    font-size: clamp(0.85rem, 3.4vw, 1.05rem);
  }
  .fff-hero-flip__brand-mark {
    width: clamp(140px, 38vw, 220px);
    height: clamp(140px, 38vw, 220px);
    margin-bottom: 1.2rem;
  }
}

/* タッチデバイス：ホバーフリップ無効 */
@media (hover: none), (pointer: coarse) {
  .fff-hero-flip__card {
    cursor: default;
  }
  .fff-hero-flip__card.is-hover-flipped {
    transform: rotateY(var(--fff-hero-card-rot, 0deg));
  }
}

/* スクリーンリーダー用 */
.fff-hero-flip__sr {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* 動きを減らす */
@media (prefers-reduced-motion: reduce) {
  .fff-hero-flip {
    height: auto;
    min-height: 100svh;
  }
  .fff-hero-flip__stage {
    position: relative;
    height: auto;
    min-height: 100svh;
    padding: 6rem 0;
  }
  .fff-hero-flip__card,
  .fff-hero-flip__grid,
  .fff-hero-flip__caption,
  .fff-hero-flip__brand {
    transform: none !important;
    transition: none !important;
  }
  .fff-hero-flip__caption { opacity: 1 !important; }
  .fff-hero-flip__brand {
    opacity: 1 !important;
    position: static;
    transform: none !important;
    margin: 3rem auto 0;
  }
}