/* ==========================================================================
   CLUB KOGA クラブ古賀 ─ 店舗テーマ
   配置先： /koga/assets/css/theme.css
   共通の site.css より先に読み込み、色・書体・ロゴの見え方だけをここで定義する。
   （時空・天空など他店舗と同じ構造。変数名は共通、値だけが店舗ごとに変わる）

   この店舗の指定：黒ベース × 金アクセント
   ※ 変数名の --ag1〜4 は accent（時空では銀／古賀では金）を指す共通トークン。
     site.css は色を一切持たないため、名前は変えずに値だけ差し替えている。
   ========================================================================== */

:root{
  /* ---- 黒（わずかに暖色に振り、金と馴染ませる） -------------------- */
  --bk:  #0a0908;   /* ベース背景 */
  --bk1: #100e0b;   /* セクション交互背景 */
  --bk2: #16130f;   /* カード */
  --bk3: #1d1913;   /* 画像待機面 */

  /* ---- 金（アクセント） -------------------------------------------- */
  --ag1: #fbf0d2;   /* ハイライト（淡いシャンパン） */
  --ag2: #d9b978;   /* 標準の金 */
  --ag3: #a3854c;   /* くすみ金・小見出し */
  --ag4: #6b5630;   /* 陰 */

  /* 金属質グラデーション（見出し・ボタン・罫線に使用） */
  --silver-text: linear-gradient(178deg,#fffaf0 0%,var(--ag1) 15%,var(--ag2) 38%,
                                 var(--ag4) 57%,var(--ag2) 75%,var(--ag1) 92%);
  --silver-fill: linear-gradient(100deg,var(--ag1),var(--ag2) 45%,var(--ag3));
  --silver-rule: linear-gradient(90deg,transparent,rgba(217,185,120,.55),transparent);

  /* ---- 文字（黒×金に合わせた温かいグレー） ------------------------- */
  --txt:  #dcd6c9;
  --txt2: #9d9487;
  --txt3: #6f6a60;

  /* ---- 罫線 -------------------------------------------------------- */
  --line:  rgba(217,185,120,.24);
  --line2: rgba(217,185,120,.10);

  /* ---- 書体 --------------------------------------------------------
     欧文：Cormorant Garamond（ディドー系セリフ）
     和文：Shippori Mincho（明朝／筆文字ロゴと相性が良い）
     ------------------------------------------------------------------ */
  --serif:"Cormorant Garamond","Times New Roman",serif;
  --min:"Shippori Mincho","Yu Mincho","Hiragino Mincho ProN","MS PMincho",serif;

  /* ---- 字間（高級感の要。広めに取る） ------------------------------ */
  --ls-body:   .055em;
  --ls-lead:   .20em;
  --ls-head:   .24em;
  --ls-eyebrow:.55em;
  --ls-nav:    .34em;

  /* ---- 余白 -------------------------------------------------------- */
  --gutter:      clamp(20px,5vw,72px);
  --sec-pad:     clamp(84px,12vw,168px);
  --max:         1180px;

  /* ---- モーション -------------------------------------------------- */
  --ease: cubic-bezier(.2,.7,.2,1);
  --dur:  1.25s;

  /* ---- 店舗識別 ---------------------------------------------------- */
  --theme-color:#0a0908;
  --theme-name:"KOGA";

  /* ==== 面・被膜トークン ============================================== */
  --hd-veil:   linear-gradient(180deg,rgba(10,9,8,.92),rgba(10,9,8,0));
  --hd-bg:     rgba(10,9,8,.93);
  --drawer-bg: rgba(10,9,8,.985);

  --hero-veil: radial-gradient(ellipse at 50% 45%,rgba(10,9,8,.28),rgba(10,9,8,.86) 72%),
               linear-gradient(180deg,rgba(10,9,8,.78),transparent 30%,rgba(10,9,8,.93));
  --phero-veil:linear-gradient(180deg,rgba(10,9,8,.9),rgba(10,9,8,.55) 55%,var(--bk));
  --hairline-v:linear-gradient(180deg,rgba(217,185,120,.6),transparent);

  /* ロゴPNG（金）の見え方調整 */
  --logo-filter:none;
  --logo-glow:  drop-shadow(0 0 30px rgba(212,168,88,.26));
  --mark-filter:none;                 /* 透かしは金ロゴをそのまま薄く敷く */
  --mark-op:  .055;   /* .watermark */
  --mark-op2: .085;   /* .phero .bgmark */

  --img-filter:      sepia(.14) saturate(.78) brightness(.82);
  --img-filter-hover:sepia(.04) saturate(.95) brightness(1);
  --map-filter:      none;

  --cap-txt:   rgba(251,240,210,.68);
  --cell-veil: linear-gradient(180deg,transparent 55%,rgba(0,0,0,.62));
  --lb-bg:     rgba(7,6,5,.97);
  --lb-nav-bg: rgba(10,9,8,.6);
  --spcta-bg:  rgba(13,11,9,.96);
  --modal-bg:  rgba(7,6,5,.94);
  --note-bg:   rgba(14,12,10,.95);
  --on-silver: #100c04;   /* 金ベタ面にのせる文字色 */

  /* 写真プレースホルダ（写真データ納品後に削除） */
  --pl-bg:
    linear-gradient(135deg,rgba(217,185,120,.05),rgba(217,185,120,0) 42%),
    repeating-linear-gradient(45deg,rgba(217,185,120,.028) 0 1px,transparent 1px 11px),
    radial-gradient(ellipse at 50% 40%,#26211a,#131110 72%);
  --pl-i: rgba(251,240,210,.32);
  --pl-b: rgba(251,240,210,.17);
}

/* ==========================================================================
   ロゴ素材（/koga/assets/img/）
   logo_koga_full.png … 筆文字「クラブ古賀」横型ロックアップ（約3.7:1）ヘッダー用
   logo_koga.png      … 筆文字「古賀」（約1.7:1）フッター・SNS用
   logo_ko.png        … 筆文字「古」  ／ logo_ga.png … 筆文字「賀」（ヒーロー・透かし）
   logo_club.png      … 筆文字「クラブ」（予備）
   mark_*_w.png       … 上記の白ベタ版（別配色で使う場合の予備）
   favicon.png        … 512px 正方
   ※ すべて提供PDF（Illustrator原稿）のパスから書き出した金グラデーション付き透過PNG。
     ベクター版（SVG）が必要になった場合も、元PDFから同じ手順で差し替えれば全ページに反映される。
   ========================================================================== */

/* 金文字ユーティリティ（共通CSSは .silver 名で参照する） */
.silver,.gold{
  background:var(--silver-text);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}

/* ヘアライン罫 */
.rule  { height:1px; border:0; background:var(--silver-rule); }
.rule-v{ width:1px; height:70px; margin:0 auto;
         background:linear-gradient(180deg,transparent,rgba(217,185,120,.6),transparent); }

/* ボタン（下から金が満ちる） */
.btn{
  font-family:var(--serif); font-size:12px; letter-spacing:var(--ls-nav);
  text-transform:uppercase; padding:18px 46px;
  border:1px solid var(--line); color:var(--ag2);
  position:relative; overflow:hidden; background:none; cursor:pointer;
  transition:color .45s, border-color .45s;
}
.btn > span{ position:relative; z-index:2 }
.btn::before{
  content:""; position:absolute; inset:0; z-index:1;
  background:var(--silver-fill);
  transform:translateY(101%); transition:transform .5s var(--ease);
}
.btn:hover{ color:var(--on-silver); border-color:var(--ag2) }
.btn:hover::before{ transform:none }

/* ==========================================================================
   写真スロット
   HTML側にはすでに <div class="img" style="background-image:url(...)"> を
   全箇所ぶん仕込んである。assets/img/photos/ に所定のファイル名で画像を置けば
   自動的に表示され、まだ無いあいだは下に敷いた仮枠（.pl）がそのまま見える。
   ※ .gcell .img（ギャラリー）は共通の site.css 側で定義済み。
   ========================================================================== */
.hero .slide .img,
.ph .img{
  position:absolute; inset:0; z-index:1;
  background-size:cover; background-position:center;
}
.ph .img{
  filter:var(--img-filter);
  transition:transform 1.4s var(--ease), filter 1.4s var(--ease);
}
.shop:hover .ph .img{ transform:scale(1.05); filter:var(--img-filter-hover) }

/* ==========================================================================
   地図スロット（.ph.map）
   Googleマップの「地図を埋め込む」で出てくる <iframe> を、そのまま貼れば収まる。
   先方のコードに付いてくる width / height / style は、ここで打ち消している。
   ========================================================================== */
.ph.map{ background:var(--bk3) }
.ph.map iframe{
  position:absolute; inset:0; z-index:1;
  width:100%  !important;
  height:100% !important;
  max-width:none !important;
  border:0 !important;
  display:block;
  filter:var(--map-filter);      /* カラー表示（--map-filter: none） */
}

/* access.html の横長マップも、貼り付けたコードの寸法指定を打ち消しておく */
.mapbox iframe{
  width:100% !important; height:100% !important;
  max-width:none !important; border:0 !important;
}

/* ライトボックス：拡大時は切り抜かず全体を見せる */
.lb .shot .img{
  position:absolute; inset:0;
  background-size:contain; background-repeat:no-repeat; background-position:center;
}

/* ヒーローのロゴ
   時空は「時」「空」を1文字ずつ時間差で出すが、古賀は「古賀」2文字を
   1枚のPNGで扱い、一体でゆっくり浮かび上がらせる。
   （共通の site.css は .ch を1文字想定で組んでいるため、横幅ぶんだけ大きく取り直す） */
.hero .hero-lock img.ch{
  height:clamp(112px,17.5vw,225px);
  animation-duration:2.4s; animation-delay:.45s;
}

/* ヒーローのワードマーク（古賀はロゴPNGではなく欧文で組む） */
.hero-word-txt{
  margin:34px 0 0; font-family:var(--serif); font-weight:300;
  font-size:clamp(19px,3.2vw,34px); letter-spacing:.5em; text-transform:uppercase;
  text-indent:.5em; line-height:1.3;
  opacity:0; animation:fadeUp 1.9s 1.35s forwards var(--ease);
}
.hero-word-txt::after{
  content:""; display:block; width:56px; height:1px; margin:26px auto 0;
  background:var(--silver-rule);
}

/* スクロールリビール */
.rv{ opacity:0; transform:translateY(30px);
     transition:opacity var(--dur) var(--ease), transform var(--dur) var(--ease) }
.rv.in{ opacity:1; transform:none }
.rv.d1{ transition-delay:.12s } .rv.d2{ transition-delay:.24s } .rv.d3{ transition-delay:.36s }

/* 動きを減らす設定への配慮 */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.01ms!important; transition-duration:.01ms!important }
  .rv{ opacity:1; transform:none }
  .hero-lock img.ch,.hero-word-txt,.hero-cap{ opacity:1!important }
}