@charset "UTF-8";

/* ==========================================================================
   MODERN PACK v1.5 — BAR 月影
   既存の style.css は一切変更していません。
   このファイル（と modern.js）を読み込むだけで「最近感」を足します。
   戻したい時は index.html の該当2行を消せば元通りです。

   目次
     1. 追加変数
     2. フィルムグレイン（質感）
     3. アンビエントライト（間接照明のゆらぎ）
     4. スクロールプログレス（上部の細い金線）
     5. オープニング演出（暗転 → 灯りが点く）
     6. スクロールリビール（ふわっと浮かび上がる）
     7. ヒーローのスクロール連動
     8. 縦書きの背景文字（和モダン）
     9. カード類のホバー精度上げ
    10. カーソルスポットライト（PCのみ）
    11.5 About の背景画像（v1.1で追加）
    11.6 About と Menu をつなぐ（v1.2で追加）
    11. スクロールバー / 細部
   ========================================================================== */

:root {
  --gold-rgb: 232, 200, 126;
  --ease-out-soft: cubic-bezier(0.22, 0.85, 0.26, 1);
}


/* ==========================================================================
   2. フィルムグレイン
   べたっとした黒を「暗がり」に変える。これだけで質感が一段上がります。
   ========================================================================== */
body::after {
  content: '';
  position: fixed;
  inset: -50%;
  width: 200%;
  height: 200%;
  pointer-events: none;
  z-index: 9000;
  opacity: 0.05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grainShift 8s steps(6) infinite;
}

@keyframes grainShift {
  0%   { transform: translate(0, 0); }
  16%  { transform: translate(-3%, -2%); }
  33%  { transform: translate(2%, -3%); }
  50%  { transform: translate(-2%, 2%); }
  66%  { transform: translate(3%, 1%); }
  83%  { transform: translate(-1%, -1%); }
  100% { transform: translate(0, 0); }
}


/* ==========================================================================
   3. アンビエントライト
   背景でゆっくり動く金色の光。キャンドルの間接照明のイメージ。
   ========================================================================== */
body {
  position: relative;
}

body::before {
  content: '';
  position: fixed;
  inset: -25%;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(38% 34% at 22% 18%, rgba(var(--gold-rgb), 0.10), transparent 70%),
    radial-gradient(32% 30% at 78% 72%, rgba(var(--gold-rgb), 0.07), transparent 70%),
    radial-gradient(45% 40% at 55% 105%, rgba(155, 89, 201, 0.05), transparent 72%);
  animation: ambientDrift 34s ease-in-out infinite alternate;
}

@keyframes ambientDrift {
  0%   { transform: translate3d(0, 0, 0) scale(1);      opacity: 0.85; }
  50%  { transform: translate3d(2%, -1.5%, 0) scale(1.08); opacity: 1; }
  100% { transform: translate3d(-2%, 2%, 0) scale(1.03); opacity: 0.9; }
}

/* 本文を光の上に乗せる */
.main-content,
.site-footer {
  position: relative;
  z-index: 1;
}

/* About は不透明な黒地だったので、光が透けるように背景色を外す
   （body と同色なので見た目の破綻はありません） */
.about {
  background-color: transparent;
}

/* Signature も少しだけ透かして光を通す */
.signature {
  background-color: rgba(18, 14, 12, 0.78);
}


/* ==========================================================================
   4. スクロールプログレス
   CSS スクロール駆動アニメーション（JS不要）。非対応ブラウザでは非表示。
   ========================================================================== */
.scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 2px;
  z-index: 150;
  pointer-events: none;
  transform: scaleX(0);
  transform-origin: 0 50%;
  background: linear-gradient(90deg,
    rgba(var(--gold-rgb), 0) 0%,
    rgba(var(--gold-rgb), 0.55) 45%,
    var(--color-gold) 100%);
}

@supports (animation-timeline: scroll()) {
  .scroll-progress {
    animation: progressGrow linear both;
    animation-timeline: scroll(root block);
  }
  @keyframes progressGrow {
    to { transform: scaleX(1); }
  }
}


/* ==========================================================================
   5. オープニング演出
   暗転から灯りがふわっと点く。1.5秒だけ。JSが無くても必ず消えます。
   ========================================================================== */
.intro {
  position: fixed;
  inset: 0;
  z-index: 9500;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  background: radial-gradient(circle at 50% 45%, #221a15 0%, var(--bg-ink) 60%);
  animation: introOut 1s var(--ease-out-soft) 1.5s forwards;
}

.intro.skip {
  display: none;
}

.intro-logo {
  max-width: 92px;
  filter: drop-shadow(0 0 0 rgba(var(--gold-rgb), 0));
  animation: introLight 1.6s var(--ease-out-soft) both;
}

.intro-text {
  font-size: 0.72rem;
  letter-spacing: 0.55em;
  text-indent: 0.55em;
  color: var(--color-gold);
  opacity: 0;
  animation: introFade 1.2s ease 0.5s both;
}

@keyframes introLight {
  0%   { opacity: 0; transform: scale(0.9); filter: drop-shadow(0 0 0 rgba(var(--gold-rgb), 0)) brightness(0.4); }
  60%  { opacity: 1; }
  100% { opacity: 1; transform: scale(1); filter: drop-shadow(0 0 22px rgba(var(--gold-rgb), 0.45)) brightness(1); }
}

@keyframes introFade {
  to { opacity: 0.85; }
}

@keyframes introOut {
  to { opacity: 0; visibility: hidden; }
}


/* ==========================================================================
   6. スクロールリビール
   .reveal は JS が付与します（JSが動かない時は普通に全部見えます）。
   ぼかしを混ぜているのがポイント。「暗がりから浮かび上がる」感じになります。
   ========================================================================== */
.reveal {
  opacity: 0;
  transform: translateY(30px);
  filter: blur(8px);
  transition:
    opacity 1s var(--ease-out-soft) var(--d, 0s),
    transform 1s var(--ease-out-soft) var(--d, 0s),
    filter 1s var(--ease-out-soft) var(--d, 0s);
}

.reveal.is-visible {
  opacity: 1;
  transform: none;
  filter: blur(0);
}

/* 見出しの下線は、本体が現れたあとに横へ伸びる */
.reveal.section-title::after {
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 0.9s var(--ease-out-soft) 0.35s;
}

.reveal.section-title.is-visible::after {
  transform: scaleX(1);
}

/* Gallery の写真は「下から現れる」マスク演出 */
.gallery-item.reveal .gallery-img {
  clip-path: inset(0 0 100% 0);
  transition: clip-path 1.2s var(--ease-out-soft) 0.15s,
              transform 0.8s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.gallery-item.reveal.is-visible .gallery-img {
  clip-path: inset(0 0 0 0);
}


/* ==========================================================================
   7. ヒーローのスクロール連動
   ※ グラスの液体キャンバスは座標を実測して描画しているため、
     .hero / .hero-fx には transform をかけていません（ズレるため）。
     コピーのフェードと暗転だけで「入口を抜ける」感じを出します。
   ========================================================================== */
.hero-copy {
  transition: opacity 0.4s linear, transform 0.4s linear;
  will-change: opacity, transform;
}

/* JS がスクロール量に応じて --hero-p (0〜1) を更新します */
.hero-veil {
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  background: var(--bg-ink);
  opacity: calc(var(--hero-p, 0) * 0.75);
}

/* 初回表示時にコピーがゆっくり立ち上がる */
.hero-logo,
.hero-copy .tagline,
.hero-copy .info,
.hero-copy .palette {
  animation: heroRise 1.4s var(--ease-out-soft) both;
}

.hero-logo            { animation-delay: 2.2s; }
.hero-copy .tagline   { animation-delay: 2.45s; }
.hero-copy .info      { animation-delay: 2.65s; }
.hero-copy .palette   { animation-delay: 2.85s; }

@keyframes heroRise {
  from { opacity: 0; transform: translateY(18px); filter: blur(6px); }
  to   { opacity: 1; transform: none; filter: blur(0); }
}

/* 「かき混ぜて」のヒントを静かに呼吸させる（触れる場所だと気づかせる） */
.stir-hint {
  animation: breathe 3.4s ease-in-out 3.2s infinite;
}

@keyframes breathe {
  0%, 100% { opacity: 0.55; }
  50%      { opacity: 1; }
}


/* ==========================================================================
   8. 縦書きの背景文字
   和モダン感が一気に出ます。PC幅のみ、うっすら。
   ========================================================================== */
[data-jp] {
  position: relative;
}

[data-jp]::before {
  content: attr(data-jp);
  position: absolute;
  top: 10%;
  left: max(1.5vw, 10px);
  /* writing-mode: vertical-rl は「縦組みメトリクスを持たないフォント」に
     当たると文字が重なるため使っていません。
     幅を1文字分に絞って自然改行させる方が、どの環境でも確実に縦積みになります。 */
  width: 1.06em;
  word-break: break-all;
  text-align: center;
  font-family: var(--font-serif);
  font-size: clamp(4rem, 10vw, 8.5rem);
  font-weight: 300;
  line-height: 1.14;
  letter-spacing: 0;
  color: var(--color-gold);
  opacity: 0.045;
  pointer-events: none;
  user-select: none;
  z-index: 0;
}

[data-jp] > .container {
  position: relative;
  z-index: 1;
}

@media (max-width: 1100px) {
  [data-jp]::before { display: none; }
}


/* ==========================================================================
   9. カード類のホバー精度上げ
   「拡大するだけ」から「光が当たる」へ。
   ========================================================================== */
.signature-item {
  transition: transform 0.6s var(--ease-out-soft);
}

.signature-image-wrapper {
  position: relative;
  transition: border-color 0.6s ease, box-shadow 0.6s ease;
}

/* 写真の上に、ホバーで斜めに走る淡い光 */
.signature-image-wrapper::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(115deg,
    transparent 35%,
    rgba(255, 255, 255, 0.10) 48%,
    transparent 62%);
  transform: translateX(-120%);
  transition: transform 1.1s var(--ease-out-soft);
}

.signature-item:hover .signature-image-wrapper::after {
  transform: translateX(120%);
}

.signature-item:hover {
  transform: translateY(-6px);
}

.signature-item:hover .signature-image-wrapper {
  border-color: rgba(var(--gold-rgb), 0.35);
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.7),
              0 0 0 1px rgba(var(--gold-rgb), 0.12);
}

.signature-item-title {
  transition: color 0.5s ease;
}

.gallery-image-wrapper {
  transition: border-color 0.6s ease, box-shadow 0.6s ease;
}

.gallery-image-wrapper:hover {
  border-color: rgba(var(--gold-rgb), 0.3);
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.7);
}

/* 入口写真にも同じ品を */
.info-entrance-wrapper {
  transition: border-color 0.6s ease, box-shadow 0.6s ease;
}

.info-entrance-wrapper:hover {
  border-color: rgba(var(--gold-rgb), 0.3);
}


/* ==========================================================================
   10. カーソルスポットライト（PCのみ・JSが要素を作ります）
   ========================================================================== */
.spotlight {
  position: fixed;
  top: 0;
  left: 0;
  width: 560px;
  height: 560px;
  margin: -280px 0 0 -280px;
  border-radius: 50%;
  pointer-events: none;
  z-index: 2;
  mix-blend-mode: screen;
  background: radial-gradient(circle,
    rgba(var(--gold-rgb), 0.13) 0%,
    rgba(var(--gold-rgb), 0.05) 40%,
    transparent 66%);
  opacity: 0;
  transition: opacity 0.6s ease;
  will-change: transform;
}

.spotlight.on {
  opacity: 1;
}


/* ==========================================================================
   11.5 About の背景画像
   酒棚の写真を、見出し＋本文のブロックサイズまで絞り込み、
   周囲を黒に溶かして「文字の裏にボヤッと浮かぶ」状態にします。
   （元は画面幅いっぱいに近い 900px 幅で敷かれていました）
   ========================================================================== */
.about-bg {
  /* ▼ 輪郭を出さないための重要な条件 ▼
     マスクの半径（下の ellipse ○% ○%）は、この要素の「幅・高さに対する割合」です。
     半径が 50% を超えると、マスクが透明になりきる前に要素の矩形の端に到達し、
     そこで画像がスパッと切れて直線の輪郭が出ます。
     そこで「要素は大きく取り、半径は 50% 未満」にして、
     矩形の端に届く前に必ず完全透明になるようにしています。
     見える範囲の大きさは、要素サイズではなくマスクの各停止位置で調整します。 */
  width: min(96%, 1040px);
  height: 100%;
  top: 50%;

  /* 重ねる順に
       1枚目：下端を Menu の地色へ溶かすグラデーション
       2枚目：全体を暗く落とすグラデーション
       3枚目：写真
     ※ 1枚目の行き先 rgb(19,15,13) は、body(#171210) の上に
       .about / .signature の rgba(18,14,12,.78) が乗った実際の合成色です。
       ここへ完全に溶かすことで「画像の下端」が消え、Menu へ地続きに見えます。 */
  background-image:
    linear-gradient(
      to bottom,
      rgba(19, 15, 13, 0) 78%,
      rgba(19, 15, 13, 0.55) 90%,
      rgb(19, 15, 13) 100%
    ),
    linear-gradient(
      to bottom,
      rgba(var(--bg-ink-rgb), 0.30) 0%,
      rgba(var(--bg-ink-rgb), 0.52) 55%,
      rgba(var(--bg-ink-rgb), 0.68) 100%
    ),
    url('assets/img/about-bg.webp');
  background-size: cover;
  background-position: center 42%, center 42%, center 42%;

  /* ボヤッと感。ピントを外すことで文字が読みやすくなる副次効果もあります */
  filter: blur(4px);

  /* 内側から早めに減衰させて、四隅を完全に黒へ溶かす */
  /* 半径は 46%（= 要素の端に届く前に 0 になる）。
     見える範囲は各停止位置で作っています。 */
  -webkit-mask-image: radial-gradient(
    ellipse 46% 46% at 50% 50%,
    #000 0%,
    rgba(0, 0, 0, 0.9) 22%,
    rgba(0, 0, 0, 0.68) 42%,
    rgba(0, 0, 0, 0.38) 62%,
    rgba(0, 0, 0, 0.14) 82%,
    transparent 100%
  );
  mask-image: radial-gradient(
    ellipse 46% 46% at 50% 50%,
    #000 0%,
    rgba(0, 0, 0, 0.9) 22%,
    rgba(0, 0, 0, 0.68) 42%,
    rgba(0, 0, 0, 0.38) 62%,
    rgba(0, 0, 0, 0.14) 82%,
    transparent 100%
  );
}

@media (max-width: 768px) {
  .about-bg {
    width: 94%;
    height: 100%;
    top: 50%;
    filter: blur(3px);

    /* スマホは画面が狭く、画像が明るいままだと本文が読みにくくなるので
       黒を強めにのせ、輪郭ももう一段やわらかくします。
       下端を地色へ溶かす1枚目は PC と共通の考え方です */
    background-image:
      linear-gradient(
        to bottom,
        rgba(19, 15, 13, 0) 82%,
        rgba(19, 15, 13, 0.55) 92%,
        rgb(19, 15, 13) 100%
      ),
      linear-gradient(
        to bottom,
        rgba(var(--bg-ink-rgb), 0.44) 0%,
        rgba(var(--bg-ink-rgb), 0.68) 55%,
        rgba(var(--bg-ink-rgb), 0.82) 100%
      ),
      url('assets/img/about-bg.webp');
    background-position: center 42%, center 42%, center 42%;

    -webkit-mask-image: radial-gradient(
      ellipse 46% 48% at 50% 50%,
      #000 0%,
      rgba(0, 0, 0, 0.92) 30%,
      rgba(0, 0, 0, 0.72) 52%,
      rgba(0, 0, 0, 0.42) 72%,
      rgba(0, 0, 0, 0.16) 88%,
      transparent 100%
    );
    mask-image: radial-gradient(
      ellipse 46% 48% at 50% 50%,
      #000 0%,
      rgba(0, 0, 0, 0.92) 30%,
      rgba(0, 0, 0, 0.72) 52%,
      rgba(0, 0, 0, 0.42) 72%,
      rgba(0, 0, 0, 0.16) 88%,
      transparent 100%
    );
  }
}


/* ==========================================================================
   11.6 About と Menu をつなぐ
   About の「酒棚画像ではない部分」の地色を Menu と同じにして、
   2つのセクションの境目を消します。
   ========================================================================== */
.about {
  /* §3 で transparent にしていたものを、Menu と同じ地色に変更。
     半透明のままなので、背景のアンビエントライトは引き続き透けます */
  background-color: rgba(18, 14, 12, 0.78);
}

/* ==========================================================================
   11.7 About — 写真を残したシネマティックパネル
   中央の酒棚はぼかさず見せ、外側だけを黒へ溶かします。
   ========================================================================== */
.about {
  /* 文字を落としたぶん、パネルの高さも詰める（元: clamp(620px, 68vw, 820px)）。
     中身は約380pxなので、上下に余裕を持たせて 560px を上限に。 */
  min-height: clamp(460px, 40vw, 560px);
  display: grid;
  place-items: center;
  isolation: isolate;
  background: #080706;
}

.about::before,
.about::after {
  content: "";
  position: absolute;
  z-index: -1;
  background: rgba(92, 69, 54, 0.09);
  pointer-events: none;
}

.about::before {
  inset: 9% 4% 8% 12%;
}

.about::after {
  top: 18%;
  right: -2%;
  width: 18%;
  height: 64%;
  background: rgba(106, 78, 58, 0.10);
}

.about-bg {
  top: 50%;
  width: min(72vw, 1120px);
  /* パネルを詰めたぶん、画像の占める割合を上げる（元: min(70%, 650px)） */
  height: min(84%, 620px);
  /* 元の写真自体が暗いので、覆いを薄くするだけでは足りません。
     写真そのものも少し持ち上げます。 */
  filter: brightness(1.18) saturate(1.06);
  background-image:
    linear-gradient(
      to right,
      rgba(8, 7, 6, 0.70) 0%,
      rgba(8, 7, 6, 0.06) 13%,
      rgba(8, 7, 6, 0.06) 87%,
      rgba(8, 7, 6, 0.70) 100%
    ),
    linear-gradient(
      to bottom,
      rgba(8, 7, 6, 0.40) 0%,
      rgba(8, 7, 6, 0.08) 45%,
      rgba(8, 7, 6, 0.48) 100%
    ),
    url('assets/img/about-bg.webp');
  background-size: cover;
  background-position: center;
  -webkit-mask-image: linear-gradient(
    to bottom,
    transparent 0%,
    #000 9%,
    #000 89%,
    transparent 100%
  );
  mask-image: linear-gradient(
    to bottom,
    transparent 0%,
    #000 9%,
    #000 89%,
    transparent 100%
  );
}

.about .container.small {
  width: min(100%, 1100px);
}

.about .section-title {
  /* 他セクションの見出し（最大 2.6rem）に対して、Aboutだけ少し大きい程度に。
     元は 4.2rem = 67.2px あり、他の 1.6倍で完全に別スケールになっていました。 */
  font-size: clamp(2.1rem, 3.6vw, 3rem);
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

.about-text {
  /* 元は 1.35rem = 21.6px。他セクションの本文が 14〜15px なので 1.4倍あり、
     8行の文章を読ませるサイズとしては大きすぎました。
     「リード文なので少し大きい」程度の 17.6px に。
     字間も一緒に詰めています。大きい字に広い字間を残すと間延びが倍になるため。 */
  margin-top: clamp(52px, 5.5vw, 76px);
  font-size: clamp(0.95rem, 1.25vw, 1.1rem);
  line-height: 2.25;
  letter-spacing: 0.12em;
  opacity: 1;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.92);
}

@media (max-width: 768px) {
  .about {
    min-height: 620px;   /* 元: 760px */
    padding: 88px 0;
  }

  .about::before {
    inset: 7% 4% 7% 4%;
  }

  .about::after {
    display: none;
  }

  .about-bg {
    width: 94%;
    height: 78%;
    filter: brightness(1.15) saturate(1.05);
    background-image:
      linear-gradient(
        to right,
        rgba(8, 7, 6, 0.62) 0%,
        rgba(8, 7, 6, 0.12) 14%,
        rgba(8, 7, 6, 0.12) 86%,
        rgba(8, 7, 6, 0.62) 100%
      ),
      linear-gradient(
        to bottom,
        rgba(8, 7, 6, 0.46) 0%,
        rgba(8, 7, 6, 0.14) 45%,
        rgba(8, 7, 6, 0.54) 100%
      ),
      url('assets/img/about-bg.webp');
    background-position: center;
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 7%, #000 91%, transparent 100%);
    mask-image: linear-gradient(to bottom, transparent 0%, #000 7%, #000 91%, transparent 100%);
  }

  .about .section-title {
    font-size: clamp(2.35rem, 12vw, 3.4rem);
  }

  /* ▼ はみ出しの修正
     .nobr は inline-block + white-space:nowrap なので、
     中の文が画面幅を超えても折り返さずにそのまま突き抜けます。
     「100種類以上のドリンクをご用意しています。」が 368px あり、
     表示領域 335px からはみ出して句点が画面外で切れていました。
     body に overflow-x:hidden があるため横スクロールバーも出ず、
     文字だけが静かに消えている状態でした。

     スマホでは nowrap を解除し、折り返しはブラウザに任せます。
     word-break: auto-phrase が文節を判定して改行するので、
     語の途中で切れることもありません。 */
  /* style.css が 768px 以下で <br> を消していますが、それを戻します。
     <br> は「文の切れ目」に打たれているので、消すと5つの文が
     ひと繋がりのブロックになり、どこで文が終わるのか分からなくなります。
     <br> は残したまま、.nobr の nowrap だけ解除するのが正解です。
       <br>   … 文の区切り（ここで必ず改行）
       .nobr … 節の区切り（長ければブラウザが折り返す） */
  .about-text br {
    display: inline;
  }

  .about-text .nobr {
    display: inline;
    white-space: normal;
  }

  .about-text {
    margin-top: 44px;
    padding: 0 14px;
    font-size: 0.95rem;
    line-height: 2.2;
    letter-spacing: 0.08em;
    word-break: auto-phrase;
    line-break: strict;
    text-wrap: pretty;
  }
}

/* About と地続きにするため、Menu 側の上の罫線を消す */
.signature {
  border-top: none;
}

/* AboutとMenuの地色を完全に統一し、装飾用の矩形レイヤーを外す */
.about,
.signature {
  background: #13100d;
}

.about::before,
.about::after {
  display: none;
}

/* Aboutの酒棚画像のみ25%の濃さで表示 */
.about-bg {
  opacity: 0.65;
  -webkit-mask-image: radial-gradient(
    ellipse 50% 50% at center,
    #000 0%,
    #000 66%,
    rgba(0, 0, 0, 0.82) 76%,
    rgba(0, 0, 0, 0.42) 88%,
    transparent 100%
  );
  mask-image: radial-gradient(
    ellipse 50% 50% at center,
    #000 0%,
    #000 66%,
    rgba(0, 0, 0, 0.82) 76%,
    rgba(0, 0, 0, 0.42) 88%,
    transparent 100%
  );
}


/* ==========================================================================
   11. スクロールバー / 細部
   ========================================================================== */
html {
  scrollbar-color: rgba(var(--gold-rgb), 0.35) transparent;
  scrollbar-width: thin;
}

::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: rgba(var(--gold-rgb), 0.28);
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover { background: rgba(var(--gold-rgb), 0.5); }

::selection {
  background: rgba(var(--gold-rgb), 0.25);
  color: var(--text-main);
}

.section-title,
.gallery-item-title,
.signature-item-title {
  text-wrap: balance;
}


/* ==========================================================================
   モーション軽減設定への配慮
   OS側で「視差効果を減らす」がONの人には、動きを全部止めます。
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  .intro { display: none; }
  body::after { animation: none; }
  body::before { animation: none; }
  .stir-hint { animation: none; opacity: 0.9; }
  .hero-logo,
  .hero-copy .tagline,
  .hero-copy .info,
  .hero-copy .palette { animation: none; }
  .reveal,
  .reveal.section-title::after,
  .gallery-item.reveal .gallery-img {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    clip-path: none !important;
    transition: none !important;
  }
  .spotlight { display: none; }
  .signature-image-wrapper::after { display: none; }
}