/* ==========================================================================
   L'irréel cafe — 共通コンポーネント
   ①〜⑦のインタラクション仕様を含む
   ========================================================================== */

/* --------------------------------------------------------------------------
   オープニング画面（Figma node 47-10）
   白背景＋中央ロゴ。ロゴがゆっくり浮かび上がる→静止→全体フェードアウトでTOPへ。
   表示は1セッション1回（JS: sessionStorage）。クリックでスキップ可
   -------------------------------------------------------------------------- */
.opening {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--color-white);
  cursor: pointer;
  transition:
    opacity 0.9s var(--ease-soft),
    visibility 0.9s var(--ease-soft);
}

.opening__logo {
  width: clamp(240px, 36.6vw, 527px); /* Figma: 1440中527px */
  aspect-ratio: 527 / 373;
  opacity: 0;
  transform: translateY(16px);
}

.opening__logo img {
  display: block;
  width: 100%;
  height: 100%;
}

.opening.is-playing .opening__logo {
  animation: opening-logo-in 1.6s var(--ease-soft) forwards;
}

.opening.is-leaving {
  opacity: 0;
  visibility: hidden;
}

.opening.is-done {
  display: none;
}

@keyframes opening-logo-in {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .opening__logo {
    opacity: 1;
    transform: none;
  }

  .opening.is-playing .opening__logo {
    animation: none;
  }

  .opening {
    transition-duration: 0.3s;
  }
}

/* --------------------------------------------------------------------------
   セクション見出し（英字 Philosopher ＋ 筆記体 Whisper の重なり）
   例: CONCEPT / Concept, ACCESS / Accès
   -------------------------------------------------------------------------- */
.section-heading {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.section-heading__en {
  font-family: var(--font-en-heading);
  font-size: var(--fs-heading-en);
  font-weight: 700;
  line-height: 1;
  margin-bottom: -12px; /* Figma準拠：筆記体が英字に少し重なる */
}

.section-heading__script {
  font-family: var(--font-script);
  font-size: var(--fs-script);
  font-weight: 400;
  line-height: 1;
}

/* --------------------------------------------------------------------------
   円形ラベル（輪郭だけの円＋中央テキスト）
   -------------------------------------------------------------------------- */
.circle-label {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 322px;
  height: 322px;
  border: 1px solid currentColor;
  border-radius: 50%;
  text-align: center;
}

.circle-label--sm {
  width: 100px;
  height: 100px;
}

/* --------------------------------------------------------------------------
   ② View More ボタン
   仕様: ホバーで線と文字が円の中に入り、円がネイビーに塗られ、
         円に重なった文字は白に反転する
   -------------------------------------------------------------------------- */
.btn-viewmore {
  --vm-circle: 48px;
  --vm-line: 120px; /* 円の左から伸びる線の長さ（セクション側で上書き可） */
  --vm-gap: 18px;   /* 円とテキストの間隔 */
  position: relative;
  display: inline-flex;
  align-items: center;
  height: var(--vm-circle);
  padding-left: calc(var(--vm-circle) + var(--vm-gap));
  font-family: var(--font-en-serif);
  font-size: var(--fs-nav);
  letter-spacing: var(--ls-nav);
  color: var(--color-navy);
  cursor: pointer;
}

/* 円の左から伸びる線（ホバーで円の中へ吸い込まれる） */
.btn-viewmore::after {
  content: "";
  position: absolute;
  left: calc(-1 * var(--vm-line));
  top: 50%;
  width: calc(var(--vm-line) + var(--vm-circle) / 2);
  height: 1px;
  background-color: var(--color-navy);
  transform-origin: right center;
  transition: transform var(--duration-hover) var(--ease-soft);
}

.btn-viewmore:hover::after,
.btn-viewmore:focus-visible::after {
  transform: scaleX(0);
}

/* 円 */
.btn-viewmore::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: var(--vm-circle);
  height: var(--vm-circle);
  border: 1px solid var(--color-navy);
  border-radius: 50%;
  background-color: transparent;
  transition: background-color var(--duration-hover) var(--ease-soft);
}

/* テキスト2層（通常色＋円形クリップの白） */
.btn-viewmore__text {
  position: relative;
  display: inline-block;
  transition: transform var(--duration-hover) var(--ease-soft);
}

/* SP用の短縮ラベル（NEWS帯: View More News → More News — 2026-07-13）。SP側で表示切替 */
.btn-viewmore__text-sp {
  display: none;
}

/* --------------------------------------------------------------------------
   改行のPC/SP切替ユーティリティ（brやspanに付ける）
   .br-pc = PCのみ表示（SPで消える） / .br-sp = SPのみ表示
   -------------------------------------------------------------------------- */
.br-sp {
  display: none;
}

@media (max-width: 767px) {
  .br-sp {
    display: inline;
  }

  .br-pc {
    display: none;
  }
}

.btn-viewmore__text::before {
  /* 円の内側だけ白く見せるための白文字レイヤー */
  content: attr(data-text);
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  color: var(--color-white);
  clip-path: circle(0px at calc(-1 * (var(--vm-circle) / 2 + var(--vm-gap))) 50%);
  transition: clip-path var(--duration-hover) var(--ease-soft);
}

.btn-viewmore:hover::before,
.btn-viewmore:focus-visible::before {
  background-color: var(--color-navy);
}

.btn-viewmore:hover .btn-viewmore__text,
.btn-viewmore:focus-visible .btn-viewmore__text {
  transform: translateX(calc(-1 * (var(--vm-circle) / 2 + var(--vm-gap))));
}

.btn-viewmore:hover .btn-viewmore__text::before,
.btn-viewmore:focus-visible .btn-viewmore__text::before {
  clip-path: circle(calc(var(--vm-circle) / 2) at calc(-1 * (var(--vm-circle) / 2 + var(--vm-gap)) + var(--vm-circle) / 2 + var(--vm-gap)) 50%);
}

/* 小型バリアント（TOPのNEWS帯用: 円28px＋円の右から出る短い接続線 ─ Figma Group44） */
.btn-viewmore--sm {
  --vm-circle: 28px;
  --vm-gap: 11px;
  font-size: min(12px, 0.833vw);
  letter-spacing: 0.96px;
}

.btn-viewmore--sm::after {
  /* 線を円の右→テキスト方向の短い接続線に変更。ホバーで円へ吸い込まれる */
  left: calc(var(--vm-circle) / 2);
  width: calc(var(--vm-circle) / 2 + var(--vm-gap) + 6px);
  transform-origin: left center;
}

/* 白反転バリアント（ネイビー背景用: TOPの「ドリンクはこちら」等 — 2026-07-11追加）
   ホバーで円が白塗りになり、円に重なった文字はネイビーに反転する */
.btn-viewmore--invert {
  color: var(--color-white);
}

.btn-viewmore--invert::after {
  background-color: var(--color-white);
}

.btn-viewmore--invert::before {
  border-color: var(--color-white);
}

.btn-viewmore--invert:hover::before,
.btn-viewmore--invert:focus-visible::before {
  background-color: var(--color-white);
}

.btn-viewmore--invert .btn-viewmore__text::before {
  color: var(--color-navy);
}

/* --------------------------------------------------------------------------
   2円重なりボタン（共通パターン .circle-duo）
   通常時: 輪郭円（左）＋塗りネイビー円（右）が重なり、テキストは両円にまたがる
           （輪郭円上の文字はネイビー、塗り円上の文字は白）
   ホバー: 輪郭円が塗り円に吸収されてネイビーの丸1つになり、文字は全部白
   使用箇所: ③RESERVE追従ボタン / TOP Contactセクションの見出し
   サイズ・フォントは使用側で --duo-size と font-* を上書きする
   -------------------------------------------------------------------------- */
.circle-duo {
  --duo-size: 90px;   /* 塗り円の直径 */
  --duo-shift: 55%;   /* 通常時に輪郭円が左にズレている量 */
  position: relative;
  display: inline-block;
  width: var(--duo-size);
  height: var(--duo-size);
  border: none; /* button要素のデフォルト枠線を消す */
  border-radius: 50%;
  background-color: var(--color-navy);
  text-decoration: none;
  cursor: pointer;
}

/* 輪郭円: 通常時は左にズレて見えている → ホバーで塗り円に吸収される */
.circle-duo::before {
  content: "";
  position: absolute;
  inset: 0;
  border: 1px solid var(--color-navy);
  border-radius: 50%;
  transform: translateX(calc(-1 * var(--duo-shift)));
  transition: transform var(--duration-hover) var(--ease-soft);
  pointer-events: none;
}

.circle-duo:hover::before,
.circle-duo:focus-visible::before {
  transform: translateX(0); /* 塗り円と同位置＝吸収されて見えなくなる */
}

/* テキスト: 通常時は2円の重なりの中央に置き、
   ネイビー文字（ベース）＋塗り円でクリップした白文字の2層で色をまたがせる */
.circle-duo__text {
  position: absolute;
  /* 2円の合体シルエットの中心 = 塗り円中心から左へ shift/2 */
  left: calc(50% - var(--duo-size) * 0.275);
  top: 50%;
  transform: translate(-50%, -50%);
  white-space: nowrap;
  color: var(--color-navy);
  transition: left var(--duration-hover) var(--ease-soft);
}

.circle-duo__text::before {
  content: attr(data-text);
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  color: var(--color-white);
  /* 塗り円の内側だけ白文字を見せる（円中心はテキスト中心の右 0.275×直径） */
  clip-path: circle(calc(var(--duo-size) / 2) at calc(50% + var(--duo-size) * 0.275) 50%);
  transition: clip-path var(--duration-hover) var(--ease-soft);
}

/* ホバー: テキストは塗り円の中央へ移動し、白クリップが全体に広がる */
.circle-duo:hover .circle-duo__text,
.circle-duo:focus-visible .circle-duo__text {
  left: 50%;
}

.circle-duo:hover .circle-duo__text::before,
.circle-duo:focus-visible .circle-duo__text::before {
  clip-path: circle(calc(var(--duo-size) / 2) at 50% 50%);
}

/* --------------------------------------------------------------------------
   ③ RESERVE 追従ボタン（.circle-duo を画面右・縦中央に固定したもの）
   仕様: CONCEPT到達で出現（JS: .is-visible）し、以降ずっと画面中央右に追従
   （2026-07-05 CHUMさん指示: CONCEPTの2円RESERVE=Figma Group43 がそのまま追従する形。
     サイズ76px・Shippori Mincho 13px・塗り円右端はFigma同様ほぼ画面右端）
   マークアップ: <a class="btn-reserve circle-duo">…
   -------------------------------------------------------------------------- */
.btn-reserve {
  --duo-size: 76px;
  position: fixed;
  right: 0.35%; /* Figma: 塗り円右端 1435/1440 */
  top: auto;
  bottom: 24px; /* 右中央→右下へ（2026-07-13 林さんFB: 画面右中央は見にくい） */
  z-index: 100;
  font-family: var(--font-jp);
  font-weight: 400;
  font-size: var(--fs-nav);
  letter-spacing: var(--ls-nav);
  opacity: 0;
  visibility: hidden;
  transform: translateY(16px);
  transition:
    opacity var(--duration-hover) var(--ease-soft),
    visibility var(--duration-hover) var(--ease-soft),
    transform var(--duration-hover) var(--ease-soft);
}

.btn-reserve.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* フッター到達で追従RESERVEを隠す（JS: .is-footer-hidden — 2026-07-13 CHUMさんFB）
   .is-visibleと同特異度のため、必ずこの位置（後）に置く */
.btn-reserve.is-footer-hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

/* ダーク背景の上では白反転（JS: ボタン中心がダークセクション内のとき .is-on-dark） */
.btn-reserve.is-on-dark {
  background-color: var(--color-white);
}

.btn-reserve.is-on-dark::before {
  border-color: var(--color-white);
}

.btn-reserve.is-on-dark .circle-duo__text {
  color: var(--color-white);
}

.btn-reserve.is-on-dark .circle-duo__text::before {
  color: var(--color-navy);
}

.btn-reserve.circle-duo {
  transition:
    opacity var(--duration-hover) var(--ease-soft),
    visibility var(--duration-hover) var(--ease-soft),
    transform var(--duration-hover) var(--ease-soft),
    background-color var(--duration-hover) var(--ease-soft);
}

/* --------------------------------------------------------------------------
   Contactセクションの連絡リンク（お電話にて ／ お問い合わせフォームにて）
   通常時: テキストの下線が右へ伸び、末尾の輪郭円を貫通している（─◯─）
   ホバー: 線が円に吸い込まれ、円がネイビーに塗られる（②View Moreと同じ言語）
   マークアップ: <a class="contact-link">お電話にて<span class="contact-link__circle"></span></a>
   -------------------------------------------------------------------------- */
.contact-link {
  --cl-circle: 28px; /* 末尾の円の直径 */
  --cl-line: 40px;   /* テキスト末尾から円までの線の長さ */
  position: relative;
  display: inline-block;
  padding-bottom: 14px;
  padding-right: calc(var(--cl-line) + var(--cl-circle));
  font-family: var(--font-jp);
  font-weight: 700;
  font-size: var(--fs-body);
  color: var(--color-navy);
  text-decoration: none;
}

/* テキスト部分の下線（常時表示） */
.contact-link::before {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: calc(100% - var(--cl-line) - var(--cl-circle));
  height: 1px;
  background-color: currentColor;
}

/* テキスト末尾から円を貫通する線 → ホバーで円の中心に吸い込まれる */
.contact-link::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  width: calc(var(--cl-line) + var(--cl-circle));
  height: 1px;
  background-color: currentColor;
  transform-origin: calc(100% - var(--cl-circle) / 2) center; /* 円の中心へ */
  transition: transform var(--duration-hover) var(--ease-soft);
}

.contact-link:hover::after,
.contact-link:focus-visible::after {
  transform: scaleX(0);
}

/* 末尾の輪郭円（下線上に中心が乗る）→ ホバーでネイビーに塗られる */
.contact-link__circle {
  position: absolute;
  right: 0;
  bottom: calc(var(--cl-circle) / -2);
  width: var(--cl-circle);
  height: var(--cl-circle);
  border: 1px solid currentColor;
  border-radius: 50%;
  background-color: transparent;
  transition: background-color var(--duration-hover) var(--ease-soft);
}

.contact-link:hover .contact-link__circle,
.contact-link:focus-visible .contact-link__circle {
  background-color: var(--color-navy);
}

/* --------------------------------------------------------------------------
   二重丸の装飾をゆっくり回転させる（呼吸のようなモーション・1周75秒）
   2026-07-05 CHUMさん相談→「光を走らせる」より回転を採用
   -------------------------------------------------------------------------- */
.slow-spin {
  animation: slow-spin 75s linear infinite;
}

.slow-spin--reverse {
  animation-direction: reverse;
}

@keyframes slow-spin {
  to {
    transform: rotate(360deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .slow-spin {
    animation: none;
  }
}

/* --------------------------------------------------------------------------
   汎用「ほわっと」リビール（写真などがぼかし＋浮き上がりで現れる）
   JS: IntersectionObserver で .is-inview を付与。--reveal-delay で時差可
   -------------------------------------------------------------------------- */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  filter: blur(10px);
  transition:
    opacity 1.1s var(--ease-soft),
    transform 1.1s var(--ease-soft),
    filter 1.1s var(--ease-soft);
  transition-delay: var(--reveal-delay, 0s);
}

.reveal.is-inview {
  opacity: 1;
  transform: none;
  filter: none;
}

@media (prefers-reduced-motion: reduce) {
  .reveal {
    transition: none;
    opacity: 1;
    transform: none;
    filter: none;
  }
}

/* --------------------------------------------------------------------------
   ④⑥ セクションの円リビール
   仕様: スクロールで見えたとき、輪郭円→塗り円が重なりながら現れる
   （JS: IntersectionObserver で .is-inview を付与）
   -------------------------------------------------------------------------- */
.circle-reveal {
  position: relative;
}

.circle-reveal .circle-reveal__outline,
.circle-reveal .circle-reveal__fill {
  opacity: 0;
  transition:
    opacity var(--duration-reveal) var(--ease-soft),
    transform var(--duration-reveal) var(--ease-soft);
}

.circle-reveal .circle-reveal__outline {
  transform: translateX(30px);
}

.circle-reveal .circle-reveal__fill {
  transform: translateX(-30px);
  transition-delay: 0.15s;
}

.circle-reveal.is-inview .circle-reveal__outline,
.circle-reveal.is-inview .circle-reveal__fill {
  opacity: 1;
  transform: translateX(0);
}

/* --------------------------------------------------------------------------
   ⑤ 光が流れる縦線（スクロール誘導）
   仕様: Savoury Crepe 下の縦線に、上から下へ光が流れ続ける
   -------------------------------------------------------------------------- */
.scroll-line {
  position: relative;
  width: 1px;
  height: 120px;
  margin: 0 auto;
  /* 線自体は薄く。opacityだと光まで暗くなるので線の色だけ薄める */
  background-color: color-mix(in srgb, currentColor 35%, transparent);
  /* 縦は線の範囲でクリップしつつ、横は光のにじみ分を許す */
  clip-path: inset(0 -6px);
}

/* キラッと光る玉が上から下へ流れる */
.scroll-line::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 26%;
  background: linear-gradient(
    to bottom,
    transparent,
    var(--color-white) 45%,
    var(--color-white) 55%,
    transparent
  );
  filter: drop-shadow(0 0 4px rgba(255, 255, 255, 0.9));
  animation: scroll-line-flow 2.4s ease-in-out infinite;
}

/* 明るい背景用：光をネイビーに */
.section--light .scroll-line::after {
  background: linear-gradient(
    to bottom,
    transparent,
    var(--color-navy) 50%,
    transparent
  );
}

@keyframes scroll-line-flow {
  0% {
    transform: translateY(-100%);
  }
  100% {
    transform: translateY(350%);
  }
}

/* --------------------------------------------------------------------------
   ⑦ 営業カレンダーボタン（ネイビー背景上・全部白）
   通常時: テキストの左に「白い輪郭円＋右向きの短い線」（◯─ 営業カレンダー）
   ホバー: 円が右へスライドして「営」に重なり、線は消え、
           円は白塗りになり「営」はネイビーに反転
   -------------------------------------------------------------------------- */
.btn-calendar {
  --cal-circle: 32px; /* 輪郭円の直径 */
  --cal-line: 24px;   /* 円から右に伸びる線の長さ */
  --cal-gap: 12px;    /* 線とテキストの間隔 */
  position: relative;
  isolation: isolate; /* ::before(z-index:-1)が背景の下に潜らないように */
  display: inline-block;
  padding: 8px 8px 8px calc(var(--cal-circle) + var(--cal-line) + var(--cal-gap));
  font-family: var(--font-jp);
  font-weight: 700;
  font-size: var(--fs-body);
  color: currentColor;
  cursor: pointer;
  white-space: nowrap;
}

/* 輪郭円: 通常時から見えている → ホバーで「営」の上にスライドして白塗りに */
.btn-calendar::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: var(--cal-circle);
  height: var(--cal-circle);
  border: 1px solid currentColor;
  border-radius: 50%;
  background-color: transparent;
  transform: translateY(-50%);
  transition:
    transform var(--duration-hover) var(--ease-soft),
    background-color var(--duration-hover) var(--ease-soft);
  z-index: -1;
}

.btn-calendar:hover::before,
.btn-calendar:focus-visible::before {
  /* 「営業」(2em)の中心まで移動し、2文字を囲める大きさに拡大
     （2026-07-05 CHUMさん指示: 円は「営業」を囲む） */
  transform: translateY(-50%)
    translateX(calc(var(--cal-line) + var(--cal-gap) + var(--cal-circle) + (2em - var(--cal-circle)) / 2))
    scale(1.5);
  background-color: var(--color-white);
}

/* 円から右に伸びる短い線 → ホバーで消える */
.btn-calendar::after {
  content: "";
  position: absolute;
  left: var(--cal-circle);
  top: 50%;
  width: var(--cal-line);
  height: 1px;
  background-color: currentColor;
  transition: opacity var(--duration-hover) var(--ease-soft);
}

.btn-calendar:hover::after,
.btn-calendar:focus-visible::after {
  opacity: 0;
}

/* 白円と重なる「営業」はネイビーに反転
   マークアップ側で先頭2文字を <span class="btn-calendar__initial">営業</span> で包む */
.btn-calendar__initial {
  position: relative;
  z-index: 1;
  transition: color var(--duration-hover) var(--ease-soft);
}

.btn-calendar:hover .btn-calendar__initial,
.btn-calendar:focus-visible .btn-calendar__initial {
  color: var(--color-navy);
}

/* --------------------------------------------------------------------------
   メニューカード（写真＋料理名＋説明）
   -------------------------------------------------------------------------- */
.menu-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.menu-card__photo {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background-color: var(--color-placeholder);
}

.menu-card__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.menu-card__name {
  font-size: var(--fs-body);
  font-weight: 700;
}

.menu-card__desc {
  font-size: var(--fs-nav);
  font-weight: 400;
  line-height: var(--lh-body);
}

/* --------------------------------------------------------------------------
   グローバルナビ（Cormorant Garamond 13px / 字間2px）
   -------------------------------------------------------------------------- */
.global-nav {
  font-family: var(--font-en-serif);
  font-size: var(--fs-nav);
  letter-spacing: var(--ls-nav);
}

.global-nav a {
  transition: opacity var(--duration-hover) var(--ease-soft);
}

.global-nav a:hover {
  opacity: 0.6;
}