/**
 * adult-gate.css
 * ----------------------------------------------------------------
 * アダルトチェック（全画面オーバーレイ）スタイル
 *
 * 役割：
 *  - 記事ページ遷移直後に「画面全体を覆う幕＋中央モーダル」を表示する見た目を提供する
 *  - ENTER 押下まで背面の閲覧を不可にする（スクロールロック）
 *  - 既存テーマのデザインを壊さず、“必要最小限”の範囲で閉じたスタイルにする
 *
 * 依存・前提：
 *  - DOM：template-parts/adult-gate.php が .adult-gate / .adult-gate__* を出力する
 *  - 挙動：/js/adult-gate.js が ENTER/LEAVE・Cookie などを制御する
 *  - スクロールバー幅：/js/common.js が --sbw-js を供給する（無い場合は 0px フォールバック）
 *
 * 実装の考え方：
 *  - オーバーレイ表示中は html に `is-adult-gate-open` が付与される想定
 *    （template 側で “初期描画の瞬間から” 付与している）
 *  - ロックは overflow:hidden + padding-right（スクロールバー消失ぶんの横ズレ防止）
 *  - ボタンは “枠（border）を常時表示しない” 方針
 *    → hover / focus-visible のときだけ outline を出して、要件と操作性を両立する
 *
 * 直近の仕様変更（現行）：
 *  1) タイトルを画像（title.png）からサイト名テキストへ変更
 *     → .adult-gate__titleText を新設し、テキストとして“ロゴっぽく”見せる
 *  2) ENTER / LEAVE も画像からテキストへ変更
 *     → .adult-gate__btnText を明朝系 serif で整える
 *  3) 初期状態で枠を出さない（hover / focus-visible のみアウトライン）
 *  4) 追加要件：ENTER / LEAVE の文字サイズをタイトル級に上げる
 *  5) 追加要件：hover 時の translateY（上下移動）演出は廃止（枠＝outline は維持）
 *  6) SP ではボタン列が崩れやすいので、縦積みに切り替えて安定化する
 *
 * ★追加要件（今回）：
 *  7) ENTER ボタン押下でゲートが消える際、「パッと消える」ではなく
 *     “2段演出”で自然に消えるようにする
 *     - 幕（暗転）   ：フェードアウト
 *     - モーダル本体：縮小 + 少し下げ + フェードアウト
 *     ※ 実際の DOM remove は JS 側で transition 完了後に行う
 * ----------------------------------------------------------------
 */

/* =========================================================
 * 0) スクロールロック（ゲート表示中）
 * ======================================================= */

/* オーバーレイ表示中は背面をスクロールできないようにする */
html.is-adult-gate-open,
html.is-adult-gate-open body {
  overflow: hidden !important;
}

/* スクロールバーが消えることで発生する“横ズレ”を padding-right で相殺する */
html.is-adult-gate-open body {
  padding-right: var(--sbw-js, 0px);
}

/* =========================================================
 * 1) ルート要素（全画面オーバーレイ）
 * ======================================================= */

.adult-gate {
  position: fixed;
  inset: 0;
  z-index: 99999; /* 既存のヘッダー/ローダー等より確実に上へ */
  display: grid;
  place-items: center; /* 中央配置 */
  padding: 24px 16px;  /* 画面端に寄り過ぎない保険 */
  box-sizing: border-box;
}

/* 背景幕（暗転） */
.adult-gate__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.92);

  /* ★2段演出（今回）：幕は opacity でフェードアウトできるようにする */
  opacity: 1;
  transition: opacity .28s ease;
  will-change: opacity;
}

/* =========================================================
 * 1-1) 閉じ演出（2段演出：幕フェード + モーダル縮小/下げ/フェード）
 * ======================================================= */

/**
 * JS 側が close 時に .is-closing を付与する想定。
 * - pointer-events を止めて、閉じ始めたら連打/誤操作を無効化
 * - 幕（backdrop）はフェード
 * - モーダルは transform + opacity で“引っ込む”ように消える
 */
.adult-gate.is-closing {
  pointer-events: none;
}

/* 幕：フェードアウト */
.adult-gate.is-closing .adult-gate__backdrop {
  opacity: 0;
}

/* =========================================================
 * 2) モーダル本体
 * ======================================================= */

.adult-gate__modal {
  position: relative;
  z-index: 1;
  width: min(720px, 100%);
  box-sizing: border-box;

  /* 透ける黒＋薄い枠：既存テーマの雰囲気に寄せる */
  background: rgba(0,0,0,.35);
  border: 5px solid rgba(255,255,255,.18);
  border-radius: 14px;
  padding: 22px 18px 18px;

  color: #fff;
  text-align: center;

  /* 背景をほんのり“ガラス風”に（非対応環境でも致命的ではない） */
  backdrop-filter: blur(4px);

  /* ★2段演出（今回）：モーダルは transform + opacity で自然に消す */
  opacity: 1;
  transform: translateY(0) scale(1);
  transition:
    opacity .34s ease,
    transform .34s cubic-bezier(.2,.9,.2,1);
  will-change: opacity, transform;
}

/* モーダル：縮小 + 少し下げ + フェードアウト */
.adult-gate.is-closing .adult-gate__modal {
  opacity: 0;
  transform: translateY(8px) scale(.97);
}

/* =========================================================
 * 2-1) タイトル（サイト名テキスト）
 * ======================================================= */

.adult-gate__title {
  margin: 0 0 14px;
}

/* サイト名を“ロゴ”っぽく見せる最小調整 */
.adult-gate__titleText {
  display: inline-block;

  /* 長いサイト名でもモーダルからはみ出しにくいよう上限を設ける */
  max-width: min(320px, 78vw);

  /* 折返しは許可。中央寄せのまま自然に見せる */
  white-space: normal;
  word-break: break-word;
  overflow-wrap: anywhere;

  font-weight: 700;
  letter-spacing: .06em;
  line-height: 1.15;

  /* 画像ロゴ相当の視覚サイズへ寄せる */
  font-size: clamp(22px, 4.6vw, 34px);

  /* 黒背景上の視認性を少しだけ補助 */
  text-shadow: 0 2px 16px rgba(0,0,0,.35);
}

/* 旧互換：もしタイトルに img が残っても破綻しないよう保険 */
.adult-gate__title img {
  display: inline-block;
  max-width: min(320px, 78vw);
  height: auto;
}

/* =========================================================
 * 2-2) 注意文（日本語 / 英語）
 * ======================================================= */

.adult-gate__ja {
  margin: 0 0 10px;
  font-size: 14px;
  line-height: 1.75;
  letter-spacing: .02em;
}

.adult-gate__en {
  margin: 0 0 16px;
  font-size: 12.5px;
  line-height: 1.7;
  opacity: .9;
}

/* =========================================================
 * 3) 操作部（ENTER / confirm / LEAVE）
 * ======================================================= */

.adult-gate__actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  flex-wrap: wrap; /* 画面が狭い場合の崩れを軽減（SPは後段で縦積みへ切替） */
}

/* ボタン本体：面（border/background）は持たせず、枠は hover/focus-visible でだけ出す */
.adult-gate__btn {
  appearance: none;
  border: none;
  background: transparent;
  padding: 0;
  margin: 0;
  cursor: pointer;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  /* 初期表示で UA の outline が出ないように抑制（枠は後段で必要時のみ付与） */
  outline: none;
}

/**
 * ボタン文字（ENTER / LEAVE）
 * - 明朝“っぽさ”を serif で積み、端末差を吸収する
 * - 文字サイズはタイトルと同程度へ（要件）
 * - hover で上下移動（translateY）させない（要件）
 */
.adult-gate__btnText {
  display: inline-block;

  font-family:
    "Noto Serif JP",
    "Hiragino Mincho ProN",
    "Yu Mincho",
    "YuMincho",
    "MS PMincho",
    serif;

  font-weight: 600;
  letter-spacing: .12em;

  /* タイトル級に引き上げ（同じ clamp 系） */
  font-size: clamp(22px, 4.6vw, 34px);
  line-height: 1;

  /* “面”は作らず、余白だけでボタンらしさを出す */
  padding: 18px 28px;

  /* border は使わない（要件：最初から表示されている枠＝面の border は不要） */
  border: none;

  /* outline の角と合わせるため角丸だけ持つ（視覚的な破綻防止） */
  border-radius: 10px;

  background: transparent;
  color: #fff;
  text-shadow: 0 2px 14px rgba(0,0,0,.35);

  /* 文字を動かさない：opacity だけ軽く変える */
  transition: opacity .12s ease;
}

/* 旧互換：もし img ボタンが残っていても最低限崩れない */
.adult-gate__btn img {
  display: block;
  height: auto;
}

/* 中央の確認アイコン */
.adult-gate__confirm img {
  display: block;
  height: auto;
}

/* =========================================================
 * 3-1) “枠（outline）”の出し方（要件対応）
 * ======================================================= */

/* hover 可能なデバイスのみ hover 枠を出す（タッチ端末での誤発火を防ぐ） */
@media (hover: hover) and (pointer: fine) {
  .adult-gate__btn:hover {
    outline: 2px solid rgba(255,255,255,.85);
    outline-offset: 4px;
    border-radius: 8px;
  }

  /* 動かさず、視認性だけ少し上げる */
  .adult-gate__btn:hover .adult-gate__btnText {
    opacity: .95;
  }
}

/* キーボード操作時のフォーカスリングは維持（アクセシビリティ） */
.adult-gate__btn:focus-visible {
  outline: 2px solid rgba(255,255,255,.85);
  outline-offset: 4px;
  border-radius: 8px;
}

/* フォーカス時も動かさず、視認性だけ補助 */
.adult-gate__btn:focus-visible .adult-gate__btnText {
  opacity: .95;
}

/* 操作補足テキスト */
.adult-gate__note {
  margin: 14px 0 0;
  font-size: 12px;
  opacity: .85;
}

/* =========================================================
 * 4) レスポンシブ微調整（SP）
 * ======================================================= */

@media (max-width: 480px) {
  .adult-gate {
    padding: 18px 12px;
  }

  .adult-gate__modal {
    padding: 18px 14px 14px;
    border-radius: 12px;
  }

  /* clamp で大枠は維持しつつ、詰まりやすい要素だけ微調整 */
  .adult-gate__titleText {
    letter-spacing: .05em;
  }

  .adult-gate__ja {
    font-size: 13px;
  }

  .adult-gate__en {
    font-size: 12px;
  }

  /**
   * SP 専用：横並びで崩れるのを避けるため、縦積みに切り替える
   * - DOM順（ENTER → confirm → LEAVE）をそのまま縦に積む
   * - LEAVE だけ改行される等の不安定さを、レイアウトで根本回避する
   */
  .adult-gate__actions {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex-wrap: nowrap;
    gap: 12px;
  }

  /* SP：余白だけ少し縮める（文字サイズは clamp に任せる） */
  .adult-gate__btnText {
    padding: 16px 22px;
    border-radius: 10px;
  }

  /* SP でもキーボードフォーカスを想定し、offset を少し詰める */
  .adult-gate__btn:focus-visible {
    outline-offset: 3px;
  }
}

/* =========================================================
 * 5) モーション抑制（アクセシビリティ）
 * ======================================================= */

/**
 * OS設定で「視差/アニメを減らす」が有効な場合：
 * - 閉じ演出を極力抑えて “即時” に近い見え方にする
 * - ただし JS 側が transitionend を待つ構成の場合に備えて、
 *   transition を完全に 0 にするよりも短くする運用もあり得る
 *   （ここは「完全に無効化」方針で統一）
 */
@media (prefers-reduced-motion: reduce) {
  .adult-gate__backdrop,
  .adult-gate__modal {
    transition: none !important;
  }

  .adult-gate.is-closing .adult-gate__backdrop {
    opacity: 0;
  }

  .adult-gate.is-closing .adult-gate__modal {
    opacity: 0;
    transform: none;
  }
}