/* ============================================================
   BISTRO AOKI — motion.css（モーションエンジン）
   0.3s ease / scrub視差 / 単語分割reveal / 遷移フェード0.6s / scrubマーキー帯
   詳細度の罠対策: 初期状態も発火状態も html.js-ready ゲートで同詳細度
   ============================================================ */

/* ---------- reveal 基本形（IntersectionObserver → .is-in 付与） ---------- */
html.js-ready [data-animate] {
  opacity: 0;
  transform: translateY(34px);
  transition: opacity .9s var(--ease-out), transform .9s var(--ease-out);
  will-change: opacity, transform;
}
html.js-ready [data-animate].is-in {
  opacity: 1;
  transform: translateY(0);
  will-change: auto;
}

/* バリエーション */
html.js-ready [data-animate="fade"] { transform: none; }
html.js-ready [data-animate="left"] { transform: translateX(-40px); }
html.js-ready [data-animate="right"] { transform: translateX(40px); }
html.js-ready [data-animate="left"].is-in,
html.js-ready [data-animate="right"].is-in { transform: translateX(0); }

/* stagger（親に data-stagger、子が順に遅れる） */
html.js-ready [data-stagger] > * {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity .85s var(--ease-out), transform .85s var(--ease-out);
}
html.js-ready [data-stagger].is-in > * { opacity: 1; transform: translateY(0); }
html.js-ready [data-stagger].is-in > :nth-child(1) { transition-delay: .05s; }
html.js-ready [data-stagger].is-in > :nth-child(2) { transition-delay: .15s; }
html.js-ready [data-stagger].is-in > :nth-child(3) { transition-delay: .25s; }
html.js-ready [data-stagger].is-in > :nth-child(4) { transition-delay: .35s; }
html.js-ready [data-stagger].is-in > :nth-child(5) { transition-delay: .45s; }
html.js-ready [data-stagger].is-in > :nth-child(6) { transition-delay: .55s; }
html.js-ready [data-stagger].is-in > :nth-child(7) { transition-delay: .65s; }
html.js-ready [data-stagger].is-in > :nth-child(8) { transition-delay: .75s; }

/* ---------- 行マスクreveal（見出し用。line-height>=1.1厳守） ---------- */
html.js-ready [data-lines] .line {
  display: block;
  overflow: hidden;
}
html.js-ready [data-lines] .line-inner {
  display: block;
  transform: translateY(110%);
  transition: transform 1.05s var(--ease-out);
}
html.js-ready [data-lines].is-in .line-inner { transform: translateY(0); }
html.js-ready [data-lines].is-in .line:nth-child(2) .line-inner { transition-delay: .12s; }
html.js-ready [data-lines].is-in .line:nth-child(3) .line-inner { transition-delay: .24s; }
html.js-ready [data-lines].is-in .line:nth-child(4) .line-inner { transition-delay: .36s; }

/* ---------- 単語分割reveal（ヒーロー用。アンカーword-inner方式） ---------- */
html.js-ready [data-words] .word {
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
  padding-bottom: .06em;  /* ディセンダー見切れ防止 */
  margin-bottom: -.06em;
}
html.js-ready [data-words] .word-inner {
  display: inline-block;
  transform: translateY(112%);
  transition: transform 1.1s var(--ease-out);
}
html.js-ready [data-words].is-in .word-inner { transform: translateY(0); }

/* ---------- 写真のカーテンreveal（額装感） ---------- */
html.js-ready [data-unveil] {
  position: relative;
}
html.js-ready [data-unveil]::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--bg);
  transform: scaleY(1);
  transform-origin: top;
  transition: transform 1.1s var(--ease-out);
  z-index: 2;
  pointer-events: none;
}
html.js-ready [data-unveil].is-in::after { transform: scaleY(0); }
html.js-ready [data-unveil] img {
  transform: scale(1.12);
  transition: transform 1.4s var(--ease-out);
}
html.js-ready [data-unveil].is-in img { transform: scale(1); }
html.js-ready .band--cream [data-unveil]::after { background: var(--cream); }

/* ---------- scrub視差（JSが --par を毎フレーム更新） ---------- */
.parallax .bleed__media,
.parallax .page-hero__media {
  transform: translate3d(0, var(--par, 0px), 0);
}

/* ---------- マーキー帯（GEM実測: scrub横流しの巨大文字） ---------- */
.marquee {
  overflow: hidden;
  padding-block: clamp(2rem, 4vw, 4rem);
  border-block: 1px solid var(--hairline);
}
.marquee__track {
  display: flex;
  gap: 1.2em;
  white-space: nowrap;
  width: max-content;
  transform: translate3d(var(--mx, 0px), 0, 0);
}
.marquee__text {
  font-family: var(--font-display);
  font-size: clamp(4rem, 11vw, 10rem);
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: .02em;
  color: transparent;
  -webkit-text-stroke: 1px rgba(201, 169, 110, .55);
}
.marquee__text--fill { color: var(--head); -webkit-text-stroke: 0; }
.marquee__dot {
  align-self: center;
  width: .18em;
  height: .18em;
  background: var(--gold);
  border-radius: 50%;
  font-size: clamp(4rem, 11vw, 10rem);
}
.band--cream .marquee__text { -webkit-text-stroke-color: rgba(26, 20, 18, .4); }
.band--cream .marquee__text--fill { color: var(--cream-ink); }

/* ---------- ヒーロー入場（ページロード時） ---------- */
html.js-ready .hero__scroll,
html.js-ready .hero__cta-wrap {
  opacity: 0;
  transition: opacity 1s var(--ease) 1.1s;
}
html.js-ready .is-loaded .hero__scroll,
html.js-ready .is-loaded .hero__cta-wrap { opacity: 1; }

/* スクロールインジケーター（金線sweep・旧サイト継承） */
.hero__scroll-line {
  display: block;
  width: 1px;
  height: 64px;
  margin-inline: auto;
  background: rgba(201, 169, 110, .25);
  position: relative;
  overflow: hidden;
}
.hero__scroll-line::after {
  content: "";
  position: absolute;
  left: 0; top: -100%;
  width: 100%; height: 100%;
  background: var(--gold);
  animation: scroll-sweep 2.2s var(--ease) infinite;
}
@keyframes scroll-sweep {
  0% { top: -100%; }
  55% { top: 0; }
  100% { top: 100%; }
}

/* Ken Burns（動画フォールバック/静止画帯用） */
@keyframes kenburns {
  0% { transform: scale(1.02); }
  100% { transform: scale(1.14); }
}
.kenburns img, .kenburns video { animation: kenburns 16s var(--ease) alternate infinite; }

/* ---------- ページ遷移（アンカー実測: opacity 0.6s ease-in-out） ---------- */
.page-fader {
  position: fixed;
  inset: 0;
  z-index: 400;
  background: var(--bg);
  opacity: 0; /* 既定は透明＝JS無効環境で幕が残らない */
  pointer-events: none;
  transition: opacity .6s ease-in-out;
}
html.js-ready .page-fader { opacity: 1; }
html.js-ready .is-loaded .page-fader { opacity: 0; }
html.js-ready body.is-leaving .page-fader { opacity: 1; pointer-events: auto; }

/* JS無効環境: すべて即時表示（js-readyが付かない＝初期不可視なし・幕も出ない） */