/* ==========================================================================
   TIARA / TIARA ROMAN ─ 店舗テーマ（エメラルドグリーン × ゴールド）
   配置先： /tiara/assets/css/theme-b.css
   共通の site.css より先に読み込み、色と見え方だけをここで定義する。
   変数名は古賀・時空と共通。値だけが案ごとに変わる。

   ========================================================================== */

:root{
  /* ---- 面 ---------------------------------------------------------- */
  --bk:  #0a3a2e;   /* ベース背景 */
  --bk1: #0d4537;   /* セクション交互背景 */
  --bk2: #104e3f;   /* カード */
  --bk3: #145b49;   /* 画像待機面 */

  /* ---- アクセント --------------------------------------------------- */
  --ag1: #fbf0d2;   /* ハイライト */
  --ag2: #d9b978;   /* 標準 */
  --ag3: #bb9a5c;   /* くすみ・小見出し */
  --ag4: #6b5630;   /* 陰 */

  /* 金文字のグラデーション。
     いちばん暗いところを濃い金（#d4ae6a）で止めている。
     ここを --ag4（陰の金）まで落とすと、暗い地と同化して読めなくなるため。 */
  --silver-text: linear-gradient(176deg,#fffaf0 0%,#fbf0d2 14%,#edd49b 34%,
                                 #d4ae6a 52%,#f0dcae 72%,#fbf0d2 92%);
  --silver-fill: linear-gradient(100deg,var(--ag1),var(--ag2) 45%,var(--ag3));
  --silver-rule: linear-gradient(90deg,transparent,rgba(217,185,120,.55),transparent);

  /* ---- 文字 -------------------------------------------------------- */
  --txt:  #f0ebdc;
  --txt2: #c2cec3;
  --txt3: #9aa79d;

  /* ---- 罫線 -------------------------------------------------------- */
  --line:  rgba(217,185,120,.24);
  --line2: rgba(217,185,120,.10);

  /* ---- 書体 -------------------------------------------------------- */
  --serif:"Cormorant Garamond","Times New Roman",serif;
  --min:"Shippori Mincho","Yu Mincho","Hiragino Mincho ProN","MS PMincho",serif;

  /* ---- 字間 -------------------------------------------------------- */
  --ls-body:   .055em;
  --ls-lead:   .20em;
  --ls-head:   .24em;
  --ls-eyebrow:.55em;
  --ls-nav:    .34em;

  /* ---- 余白 -------------------------------------------------------- */
  --gutter:      clamp(20px,5vw,72px);
  --sec-pad:     clamp(84px,12vw,168px);
  --max:         1180px;

  /* ---- モーション -------------------------------------------------- */
  --ease: cubic-bezier(.2,.7,.2,1);
  --dur:  1.25s;

  /* ---- 案の識別 ---------------------------------------------------- */
  --theme-color:#0a3a2e;
  --theme-name:"TIARA";

  /* ==== 面・被膜トークン ============================================= */
  --hd-veil:   linear-gradient(180deg,rgba(10,58,46,.92),rgba(10,58,46,0));
  --hd-bg:     rgba(10,58,46,.93);
  --drawer-bg: rgba(10,58,46,.985);

  --hero-veil: radial-gradient(ellipse at 50% 45%,rgba(10,58,46,.28),rgba(10,58,46,.86) 72%),
               linear-gradient(180deg,rgba(10,58,46,.78),transparent 30%,rgba(10,58,46,.93));
  --phero-veil:linear-gradient(180deg,rgba(10,58,46,.9),rgba(10,58,46,.55) 55%,var(--bk));
  --hairline-v:linear-gradient(180deg,rgba(217,185,120,.6),transparent);

  --logo-filter:none;
  --logo-glow:  drop-shadow(0 0 30px rgba(217,185,120,.26));
  --mark-filter:none;
  --mark-op:  .055;
  --mark-op2: .085;

  --img-filter:      saturate(.84) brightness(.86);
  --img-filter-hover:saturate(1) brightness(1);
  --map-filter:      none;   /* 地図はカラー表示 */

  --cap-txt:   rgba(255,255,255,.80);
  --cell-veil: linear-gradient(180deg,transparent 55%,rgba(0,0,0,.62));
  --lb-bg:     rgba(10,58,46,.97);
  --lb-nav-bg: rgba(10,58,46,.6);
  --spcta-bg:  rgba(10,58,46,.96);
  --modal-bg:  rgba(10,58,46,.94);
  --note-bg:   rgba(10,58,46,.95);
  --on-silver: #0a3a2e;   /* アクセントのベタ面にのせる文字色 */

  /* 写真プレースホルダ（写真データ納品後に削除） */
  --pl-bg:
    linear-gradient(135deg,rgba(217,185,120,.05),rgba(217,185,120,0) 42%),
    repeating-linear-gradient(45deg,rgba(217,185,120,.028) 0 1px,transparent 1px 11px),
    radial-gradient(ellipse at 50% 40%,#145b49,#0d4537 72%);
  --pl-i: rgba(255,255,255,.30);
  --pl-b: rgba(255,255,255,.16);
}

/* 文字にアクセント色のグラデーションを乗せるユーティリティ
   （共通の site.css は .silver という名前で参照する） */
.silver{
  background:var(--silver-text);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}

/* ヘアライン罫 */
.rule  { height:1px; border:0; background:var(--silver-rule); }
.rule-v{ width:1px; height:70px; margin:0 auto; background:var(--hairline-v); }

/* ボタン（下からアクセント色が満ちる） */
.btn{
  font-family:var(--serif); font-size:12px; letter-spacing:var(--ls-nav);
  text-transform:uppercase; padding:18px 46px;
  border:1px solid var(--line); color:var(--ag2);
  position:relative; overflow:hidden; background:none; cursor:pointer;
  transition:color .45s, border-color .45s;
}
.btn > span{ position:relative; z-index:2 }
.btn::before{
  content:""; position:absolute; inset:0; z-index:1;
  background:var(--silver-fill);
  transform:translateY(101%); transition:transform .5s var(--ease);
}
.btn:hover{ color:var(--on-silver); border-color:var(--ag2) }
.btn:hover::before{ transform:none }

/* ==========================================================================
   ヒーローの店名ロゴ
   Tiara と Tiara Roman を左右に並べる。どちらかが上にならないよう、
   筆記体「Tiara」の大きさを揃えた画像を、同じ幅で並列に置いている。
   （画像は提供PDFから白インクで書き出した透過PNG）
   ========================================================================== */
.hero-pair{
  display:flex; align-items:center; justify-content:center;
  gap:clamp(18px,4.5vw,56px);
}
.hero-logo{
  width:min(38vw,330px); height:auto; flex:0 0 auto;
  filter:var(--logo-glow);
  opacity:0; animation:fadeUp 1.9s .4s forwards var(--ease);
}
.hero-logo.b{ animation-delay:.4s }      /* 2枚とも同時に出す（優劣をつけない） */
.hero-pair-rule{
  flex:0 0 auto; width:1px; height:clamp(56px,9vw,118px);
  background:var(--hairline-v);
  opacity:0; animation:fadeUp 1.9s .9s forwards var(--ease);
}

/* 写真が未入稿の節に出す「Coming Soon」 */
.coming{
  margin:0; text-align:center;
  font-family:var(--serif); font-weight:300;
  font-size:clamp(26px,4.6vw,46px); letter-spacing:.34em; text-indent:.34em;
  text-transform:uppercase; color:var(--ag3);
}
.coming::after{
  content:""; display:block; width:64px; height:1px; margin:26px auto 0;
  background:var(--silver-rule);
}

/* ==========================================================================
   写真スロット
   HTML側には <div class="img" style="background-image:url(...)"> を仕込んである。
   assets/img/photos/ に所定の名前で画像を置けば表示され、
   無いあいだは site.js がその枠ごと取り除く。
   ※ .gcell .img（ギャラリー）は共通の site.css 側で定義済み。
   ========================================================================== */
.hero .slide .img,
.ph .img{
  position:absolute; inset:0; z-index:1;
  background-size:cover; background-position:center;
}
.ph .img{
  filter:var(--img-filter);
  transition:transform 1.4s var(--ease), filter 1.4s var(--ease);
}
.shop:hover .ph .img{ transform:scale(1.05); filter:var(--img-filter-hover) }

/* 地図スロット（Googleマップの埋め込みコードをそのまま貼れば収まる） */
.ph.map{ background:var(--bk3) }
.ph.map iframe,
.mapbox iframe{
  position:absolute; inset:0; z-index:1;
  width:100%  !important; height:100% !important;
  max-width:none !important; border:0 !important; display:block;
  filter:var(--map-filter);
}

/* ライトボックス：拡大時は切り抜かず全体を見せる */
.lb .shot .img{
  position:absolute; inset:0;
  background-size:contain; background-repeat:no-repeat; background-position:center;
}

/* スクロールリビール */
.rv{ opacity:0; transform:translateY(30px);
     transition:opacity var(--dur) var(--ease), transform var(--dur) var(--ease) }
.rv.in{ opacity:1; transform:none }
.rv.d1{ transition-delay:.12s } .rv.d2{ transition-delay:.24s } .rv.d3{ transition-delay:.36s }

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.01ms!important; transition-duration:.01ms!important }
  .rv{ opacity:1; transform:none }
  .hero-logo,.hero-pair-rule,.hero-cap{ opacity:1!important }
}