/* ==========================================================================
   base.css — 素の要素スタイル（body / a / img / focus ...）
   ========================================================================== */

/* スムーススクロールは Lenis が担当するため CSS 側では指定しない
   （scroll-behavior: smooth は Lenis と競合する） */

/* ルートの font-size は指定しない（ブラウザ既定の 16px のまま）。
   文字サイズの可変は tokens.css の var(--fs-NN) が独自の単位で担うため、
   rem を可変にする必要がない。rem はプロジェクト内で使わない。 */

/* 地色＋テクスチャ（ページ全体）。薄いグレーの上にタイルをリピート。
   Figma のページ地は「乗算 5%」なので multiply で重ねる
   （セクションの main_bg はオーバーレイ 10% で別指定） */
body {
  margin: 0;
  position: relative;
  color: var(--color-text);
  background-color: var(--color-surface);
  font-family: var(--font-base);
  font-size: var(--fs-16);
  line-height: var(--lh-base);
  font-feature-settings: "palt" 1;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
body::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: url("../img/texture.jpg");
  background-repeat: repeat;
  background-size: var(--texture-size);
  mix-blend-mode: multiply;
  opacity: var(--texture-body-opacity);
  pointer-events: none;
}

/* ==========================================================================
   リンクのホバー
   Figma に定義が無いため、実装側で決めた値で確定。テキストリンクは減光、
   面で押せるリンクはごく薄いベールを重ねる。値は tokens.css の --hover-*。
   ========================================================================== */
a {
  color: inherit;
  transition: opacity var(--dur) var(--ease), color var(--dur) var(--ease),
    background-color var(--dur) var(--ease);
}
/* iOS のダブルタップ拡大をサイト全体で止める。ピンチでの拡大は残る。
   touch-action は継承しないが、効き方は祖先との積になるので html 1 か所で
   全要素へ及ぶ。user-scalable=no で止めないのは、ピンチまで奪うため */
html {
  touch-action: manipulation;
}
/* 自前のホバー演出を持つリンクは、この減光の対象から外す（二重にかかるのを
   防ぐ）。c-swap / c-view-more は文字の入れ替え、c-works-card はサムネイル
   画像の拡大で反応させている。ロゴはモーション初期化に成功した場合だけ
   components/logo.css 側で減光を上書きし、失敗時はこのフォールバックを残す。
   :where() は詳細度 0 なので、下のベールなど既存の上書きとの優先順位はこれまでどおり */
/* ホバーは (hover: hover) で包む。iOSはリンクをタップすると別の場所を触るまで
   :hover が残り、減光やベールが張り付いて見えるため（docs/sp-strategy.md 決定8）。
   (pointer: fine) は足さない。トラックパッド併用のiPadで演出まで消す必要はない */
@media (hover: hover) {
  a:hover:where(:not(.c-swap, .c-view-more, .c-works-card)) {
    opacity: var(--hover-opacity);
  }
  /* 面リンク（帯など）は減光ではなくベールで反応させる */
  .c-band-next__block:hover,
  .c-band-contact__link:hover {
    opacity: 1;
    background-color: var(--hover-veil);
  }
}

/* ページ本体。全ページの main が同じ2つを持っていたので地の指定として上げる。
   overflow: clip は、セクションの装飾（星・テクスチャ・はみ出す図版）が
   横スクロールを作らないようにするため。position: relative は、その中の
   absolute 配置の基準。hidden ではなく clip なのは、hidden がスクロール
   コンテナを作り、その中の sticky の基準を奪ってしまうため
   （トップのMVがこれに当たる。詳細は pages/index.css の冒頭）。 */
main {
  position: relative;
  overflow: clip;
}

/* destyle は display を変えないため、画像はブロック＋流動で扱う */
img,
svg,
video,
canvas {
  display: block;
  max-width: 100%;
}

/* キーボードフォーカスの可視化（destyle は outline を残さない） */
:where(:focus-visible) {
  outline: 2px solid var(--color-brand);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* 汎用レイアウト（l-）は採用しない（理由は AGENTS.md のクラス設計）。
   ユーティリティ（u-）は utilities.css にあり、全ページの最後に読み込む。 */

/* ==========================================================================
   SP 横持ちの警告

   横にすると SP レイアウトから外れ、縦持ち前提の組版が崩れたまま表示される。
   閲覧を止めて縦向きを促す。

   判定は 3 条件。どれか 1 つでも外れれば出ない。
   ・幅の下限 … 縦持ちの最大幅は 430px（iPhone 16 Pro Max）、横持ちの最小幅は
     568px（iPhone SE）。480 はその中間。上限（max-width）で切ると 852 / 932px 幅の
     現行機を取りこぼす。幅はブラウザ UI にもソフトキーボードにも URL バーの伸縮にも
     影響されない唯一安定した軸なので、ここを縦横の判定に使う
   ・高さの上限 … iPad 横（768px）と PC を外す
   ・pointer: coarse … 主入力がタッチの端末だけに限る。外すと PC の 200% ズーム
     （1920×1080 なら 960×475）で閲覧不能になる
   ========================================================================== */
@media (min-width: 480px) and (max-height: 500px) and (pointer: coarse) {
  /* 初回イントロは 1 セッションに 1 度しか再生されない（loader.js の
     INDEX_INTRO_KEY）。警告の裏で消化させると縦へ戻しても二度と見られないため、
     幕だけ警告より前へ出す。--z-loader の参照先は loader.css の 1 箇所だけ */
  :root {
    --z-loader: calc(var(--z-orientation) + 1);
  }

  /* touch-action は overflow の保険。iOS 実機では overflow だけでも指のスクロールは
     止まっている（慣性が走っている最中に回転した場合だけ、減衰するまで動く） */
  body {
    overflow: hidden;
    overscroll-behavior: none;
    touch-action: none;
  }

  /* 警告文とアイコンは1枚の画像（assets/img/orientation-notice.svg）に
     まとまっている。画面のレイアウト崩れを伝える内容なのでスクリーンリーダーの
     利用者には無関係。読み上げ用のテキストは持たせない。
     ::before は地のテクスチャで使用中 */
  body::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: var(--z-orientation);
    background-color: var(--color-bg);
    background-image: url("../img/orientation-notice.svg");
    background-repeat: no-repeat;
    background-position: center;
    background-size: auto min(60svh, 216px);
  }

  /* アニメーション版のSVGは @keyframes が外部リソース内で完結しており、
     ::after は別の描画コンテキストになるため、上のグローバルな
     prefers-reduced-motion（このファイル冒頭）が中まで届かない。
     画像ごと静止版へ差し替える */
  @media (prefers-reduced-motion: reduce) {
    body::after {
      background-image: url("../img/orientation-notice-static.svg");
    }
  }
}

/* reCAPTCHA v3 の固定バッジ非表示 */
.grecaptcha-badge {
  visibility: hidden;
}