/* Local Dive 個別化スポットライト
 * 1) ロード時の業種コンセプト名アニメーション (控えめに、トンマナに合わせ)
 * 2) ヘッダー左上の屋号 (個別化要素) を 3 倍サイズで表示
 */

/* ============================================================
 * (1) ロード時オーバーレイ — 大きすぎず、雰囲気を壊さないサイズに
 * ============================================================ */
#ld-shop-spotlight{
  position:fixed;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(20, 18, 14, 0.94);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  z-index:99999;
  pointer-events:none;
  animation:ld-spot-fade 2400ms ease-out forwards;
}
#ld-shop-spotlight.--done{display:none;}

#ld-shop-spotlight .ld-spot-inner{
  text-align:center;
  transform:scale(0.85);
  opacity:0;
  animation:ld-spot-pop 2400ms cubic-bezier(.2,.8,.2,1) forwards;
}

#ld-shop-spotlight .ld-spot-name{
  display:block;
  font-family: 'Cormorant Garamond','EB Garamond','Shippori Mincho','Noto Serif JP','Hiragino Mincho ProN', serif;
  font-size: clamp(28px, 5.5vw, 64px);   /* 旧: clamp(48,14vw,200) → ~半分 */
  font-weight: 400;
  letter-spacing: 0.10em;
  color: #f4ead4;
  text-shadow: 0 2px 14px rgba(217, 174, 92, 0.18);
  line-height:1.2;
  margin:0 0 14px;
}
#ld-shop-spotlight .ld-spot-tagline{
  display:block;
  font-family: 'Cormorant Garamond','EB Garamond', serif;
  font-size: clamp(10px, 1.1vw, 14px);
  letter-spacing: 0.42em;
  text-transform: uppercase;
  color: rgba(217, 174, 92, 0.7);
  margin:0;
}

@keyframes ld-spot-pop{
   0%   { transform:scale(0.85); opacity:0; }
  18%   { transform:scale(1.04); opacity:1; }
  35%   { transform:scale(1.0);  opacity:1; }
  75%   { transform:scale(1.0);  opacity:1; }
 100%   { transform:scale(1.02); opacity:0; }
}
@keyframes ld-spot-fade{
   0% { opacity:1; }
  75% { opacity:1; }
 100% { opacity:0; visibility:hidden; }
}

@media (max-width:760px){
  #ld-shop-spotlight .ld-spot-name{
    font-size: clamp(22px, 7vw, 44px);
    letter-spacing: 0.06em;
  }
  #ld-shop-spotlight .ld-spot-tagline{
    font-size: 9.5px;
    letter-spacing: 0.36em;
  }
}

@media (prefers-reduced-motion: reduce){
  #ld-shop-spotlight{animation-duration: 1ms;}
  #ld-shop-spotlight .ld-spot-inner{animation-duration: 1ms;}
}

/* ============================================================
 * (2) ヘッダー左上の屋号を 3 倍サイズに
 * 各 HP で class 名がバラバラ (.nav-logo / .nav-shop / .nav-brand /
 * .brand / .brand-ja / .header__logo / .ec-logo / .logo etc.)。
 * 統合用 .ld-shop-brand-large は spotlight.js が JS で付与する。
 * ============================================================ */
/* ヘッダー左上の屋号を 2.5 倍化。誤爆を避けるため、各 HP 業種別の 1 セレクタだけを target。
 * agritourism の `.ec-logo` / 旅館・茶・酒の `.brand-ja` / 和菓子の `.nav-shop` / 陶芸・納豆の `.nav-logo`
 * を業種別 body[data-industry] スコープで bump する (他要素の誤巻き込みを防ぐ)。
 */
/* agritourism は template の .ec-logo 自体を 2.6rem に直接拡大済み (ec-logo 内 span は inherit) — override 不要 */
body[data-industry="ryokan"] .brand-ja,
body[data-industry="ryokan"] .nav-logo,
body[data-industry="ryokan"] .brand-name{
  font-size: 1.85em !important;
  font-weight: 600 !important;
  letter-spacing: 0.04em !important;
}
body[data-industry="sake"] .brand-ja,
body[data-industry="sake"] .brand{
  font-size: 1.85em !important;
  font-weight: 600 !important;
}
body[data-industry="tea"] .brand,
body[data-industry="tea"] .nav-brand{
  font-size: 1.85em !important;
  font-weight: 600 !important;
}
body[data-industry="wagashi"] .nav-shop{
  font-size: 1.85em !important;
  font-weight: 600 !important;
}
body[data-industry="tougei"] .nav-logo{
  font-size: 1.85em !important;
  font-weight: 600 !important;
}
body[data-industry="nattou"] .nav-logo{
  font-size: 1.85em !important;
  font-weight: 600 !important;
}

@media (max-width: 760px){
  body[data-industry="ryokan"] .brand-ja,
  body[data-industry="ryokan"] .nav-logo,
  body[data-industry="ryokan"] .brand-name,
  body[data-industry="sake"] .brand-ja,
  body[data-industry="sake"] .brand,
  body[data-industry="tea"] .brand,
  body[data-industry="tea"] .nav-brand,
  body[data-industry="wagashi"] .nav-shop,
  body[data-industry="tougei"] .nav-logo,
  body[data-industry="nattou"] .nav-logo{
    font-size: 1.5em !important;
  }
}

/* ============================================================
 * (3) Fallback: brand 要素が一切見つからない HP のためのフロート
 * spotlight.js が判定して .ld-injected-brand を body に注入する
 * ============================================================ */
/* fixed top-left の fallback brand 注入は廃止 (常時表示が煩わしいとの森指摘) */
.ld-injected-brand{ display: none !important; }