@charset "UTF-8";
/* =============================================================
   refine.css — ブランド体験の格上げ（4サイト共通・後付け）
   既存の main.css を壊さず、上に重ねて質を上げる層。
   - 入りの演出（オープニング）
   - スクロール連動の繊細な出現・視差
   - 組版の精緻化（禁則・字間・行長）
   - ホバー / カーソルの余韻
   - ページ遷移のフェード
   各サイトのトークン（--ink /--gold 等）を参照する。無い場合に備え既定値を置く。
   ============================================================= */

:root{
  --rf-ink:   var(--ink, #0b0b0c);
  --rf-gold:  var(--gold, #b8964f);
  --rf-goldl: var(--gold-lt, #d9c08a);
  --rf-paper: var(--paper, #f8f5f0);
  --rf-ease:  cubic-bezier(.22,.61,.36,1);
  --rf-ease-out: cubic-bezier(.16,1,.3,1);
}

/* -------------------------------------------------- 1. オープニング演出 */
/* 金の帳が中央から上下に開き、ブランドマークが結ばれて消える */
.rf-intro{
  position:fixed; inset:0; z-index:2000; pointer-events:none;
  display:grid; place-items:center;
}
.rf-intro__panel{
  position:absolute; left:0; right:0; height:50.5%; background:var(--rf-ink);
  transform-origin:center; will-change:transform;
}
.rf-intro__panel--top{ top:0; }
.rf-intro__panel--bottom{ bottom:0; }
.rf-intro__mark{
  position:relative; z-index:1; opacity:0;
  width:clamp(56px,7vw,84px); height:auto;
  filter:drop-shadow(0 6px 30px rgba(0,0,0,.5));
}
.rf-intro__line{
  position:absolute; left:50%; top:50%; width:0; height:1px;
  background:linear-gradient(90deg, transparent, var(--rf-goldl), transparent);
  transform:translate(-50%,-50%);
}
html.rf-intro-run .rf-intro__mark{ animation:rfMark 1.5s var(--rf-ease-out) .15s forwards; }
html.rf-intro-run .rf-intro__line{ animation:rfLine 1.2s var(--rf-ease-out) .5s forwards; }
html.rf-intro-run .rf-intro__panel--top{ animation:rfPanelUp 1.05s var(--rf-ease) 1.15s forwards; }
html.rf-intro-run .rf-intro__panel--bottom{ animation:rfPanelDn 1.05s var(--rf-ease) 1.15s forwards; }
html.rf-intro-done .rf-intro{ display:none; }

@keyframes rfMark{ 0%{opacity:0; transform:scale(.86)} 55%{opacity:1} 100%{opacity:1; transform:scale(1)} }
@keyframes rfLine{ 0%{width:0; opacity:0} 40%{opacity:1} 100%{width:min(340px,60vw); opacity:.9} }
@keyframes rfPanelUp{ to{ transform:translateY(-100%) } }
@keyframes rfPanelDn{ to{ transform:translateY(100%) } }

/* イントロ中は本文スクロールを止め、ヒーローをわずかに沈めて"迫り上がる"印象に */
html.rf-intro-run body{ overflow:hidden; }
html.rf-intro-run .hero__body,
html.rf-intro-run .hero__name-ja,
html.rf-intro-run .hero__title{ opacity:0; transform:translateY(18px); }
html.rf-intro-done .hero__body,
html.rf-intro-done .hero__name-ja,
html.rf-intro-done .hero__title{ transition:opacity 1.2s var(--rf-ease-out), transform 1.2s var(--rf-ease-out); }

/* -------------------------------------------------- 2. スクロール出現の精緻化 */
/* 既存 [data-reveal] に加え、より繊細な線・画像マスクを提供する */
.rf-rise{ opacity:0; transform:translateY(26px); transition:opacity 1.1s var(--rf-ease-out) var(--rf-d,0s), transform 1.1s var(--rf-ease-out) var(--rf-d,0s); }
.rf-rise.rf-in{ opacity:1; transform:none; }

/* 金の細線が横に伸びる（見出し脇の装飾） */
.rf-hairline{ position:relative; }
.rf-hairline::after{
  content:""; position:absolute; left:0; bottom:-10px; height:1px; width:0;
  background:linear-gradient(90deg,var(--rf-gold),transparent);
  transition:width 1.4s var(--rf-ease-out) .2s;
}
.rf-hairline.rf-in::after{ width:64px; }

/* 見出しの文字が一字ずつ立ち上がる（.rf-chars を付けた要素、JSがspan分割） */
.rf-chars span{ display:inline-block; opacity:0; transform:translateY(0.5em) rotate(2deg); }
.rf-chars.rf-in span{ animation:rfChar .9s var(--rf-ease-out) forwards; }
@keyframes rfChar{ to{ opacity:1; transform:none } }

/* -------------------------------------------------- 3. 画像パララックス */
[data-rf-parallax]{ overflow:hidden; }
[data-rf-parallax] > img,
[data-rf-parallax] > picture > img{
  width:100%; height:118%; object-fit:cover;
  will-change:transform; transform:translate3d(0,0,0);
}

/* -------------------------------------------------- 4. 組版の精緻化 */
/* 見出し・リード文の禁則と字間。和文の高級感は組版で決まる */
.hero__title, .hero__name-ja, .h1, .h2, .concept__title, .heritage__year,
.phead h1, .entry h2, .entry h3{
  word-break:normal; line-break:strict; overflow-wrap:break-word;
  font-feature-settings:"palt" 1; text-spacing:trim-start;
}
/* 日本語見出しは行末・行頭の約物を詰めて美しく */
.h2, .concept__title, .phead h1{ font-feature-settings:"palt" 1, "kern" 1; }
/* リード文は行長を最適化（全角40字前後で最も読みやすい） */
.lead, .concept__body, .philo__body, .heritage__text .lead{ max-inline-size:38em; text-wrap:pretty; }
/* 数字・欧文だけ字面を締める */
.hero__since, .eyebrow, .phead__en, time{ font-feature-settings:"tnum" 1; }

/* -------------------------------------------------- 5. ホバー / リンクの余韻 */
/* 本文リンクの金下線が左から引かれる */
.entry a:not(.wp-element-button):not(.wp-block-button__link){
  position:relative; text-decoration:none; background:none;
  background-image:linear-gradient(var(--rf-gold),var(--rf-gold));
  background-size:0% 1px; background-position:0 100%; background-repeat:no-repeat;
  transition:background-size .5s var(--rf-ease-out), color .4s;
}
.entry a:not(.wp-element-button):not(.wp-block-button__link):hover{ background-size:100% 1px; }

/* カード類のホバーで写真がゆっくり沈み込む（既存に無ければ付与） */
.rf-lift{ transition:transform .7s var(--rf-ease-out), box-shadow .7s var(--rf-ease-out); }
.rf-lift:hover{ transform:translateY(-4px); }

/* -------------------------------------------------- 6. カスタムカーソル（PC・繊細な金の円） */
@media (hover:hover) and (pointer:fine){
  html.rf-cursor, html.rf-cursor *{ cursor:none; }
  /* カスタムカーソルは既定で非表示。<html data-rf-cursor> のときだけ JS が有効化する */
  .rf-dot, .rf-ring{ display:none; }
  html.rf-cursor .rf-dot{
    display:block; position:fixed; top:0; left:0; z-index:3000; pointer-events:none;
    width:7px; height:7px; margin:-3.5px 0 0 -3.5px; border-radius:50%;
    background:var(--rf-gold); mix-blend-mode:difference;
    transition:transform .18s var(--rf-ease-out), opacity .3s;
  }
  html.rf-cursor .rf-ring{
    display:block; position:fixed; top:0; left:0; z-index:3000; pointer-events:none;
    width:34px; height:34px; margin:-17px 0 0 -17px; border-radius:50%;
    border:1px solid rgba(184,150,79,.6);
    transition:transform .28s var(--rf-ease-out), width .3s var(--rf-ease-out),
               height .3s var(--rf-ease-out), margin .3s var(--rf-ease-out), opacity .3s, border-color .3s;
  }
  html.rf-cursor .rf-ring.is-hot{ width:56px; height:56px; margin:-28px 0 0 -28px; border-color:var(--rf-goldl); }
  html.rf-cursor .rf-dot.is-hot{ transform:scale(0); }
}

/* -------------------------------------------------- スクロール進捗の金線 */
.rf-progress{
  position:fixed; top:0; left:0; right:0; height:2px; z-index:1500;
  transform:scaleX(0); transform-origin:left; pointer-events:none;
  background:linear-gradient(90deg, var(--rf-gold), var(--rf-goldl));
  will-change:transform;
}

/* -------------------------------------------------- 7. ページ遷移フェード */
.rf-fade{ position:fixed; inset:0; z-index:2500; background:var(--rf-ink); opacity:0; pointer-events:none; }
html.rf-leaving .rf-fade{ opacity:1; transition:opacity .5s var(--rf-ease); pointer-events:all; }

/* -------------------------------------------------- reduced-motion 尊重 */
@media (prefers-reduced-motion:reduce){
  .rf-intro{ display:none !important; }
  html.rf-intro-run body{ overflow:auto; }
  html.rf-intro-run .hero__body, html.rf-intro-run .hero__title, html.rf-intro-run .hero__name-ja{ opacity:1; transform:none; }
  .rf-rise, .rf-chars span{ opacity:1; transform:none; transition:none; animation:none; }
  .rf-hairline::after{ width:64px; transition:none; }
  html.rf-cursor, html.rf-cursor *{ cursor:auto; }
  .rf-dot, .rf-ring{ display:none; }
}