/* ══════════════════════════════════════════════════════════════════════
   モーション ── セクションごとに違う「入り方」を与える層

   🔴 古臭く見えていた理由（実測して分かったこと）
      入場の演出が **fade + translateY(28〜38px) の1種類だけ** で、しかも
      IntersectionObserver の入った/入っていないの **二値** で発火していた。
      これは AOS.js が流行った頃（2016年前後）の型そのもので、
      「全部同じ動きで、同じ距離だけ、同じ速さで出てくる」ため、
      どのセクションも同じ顔に見える。背景も真っ黒で動かない。

   🔴 直し方は「派手にする」ではなく **所作を分ける**。
      イージングと時間は揃えたまま、セクションごとに動きの向きと質を変える。
      揃っているから統一感が出て、違うから単調でなくなる。

   🔴 使う道具は transform / opacity / clip-path だけに絞る。
      animation-timeline（スクロール駆動CSS）は iOS Safari に実質まだ来ていない。
      来訪の9割が iPhone なので、そこに賭けない。
   ══════════════════════════════════════════════════════════════════════ */

:root{
  --m-ease:cubic-bezier(.16,1,.3,1);   /* 全部これで揃える。速く出て、静かに止まる */
  --m-slow:1.1s;
  --m-mid:.72s;
  --m-fast:.42s;
}

/* ── 見出し：文字が下から立ち上がる ──────────────────
   1文字ずつマスクの下から上げる。英字の大文字＋広い字間は、
   まとめて出すより1文字ずつのほうが「組まれている」感じが出る。 */
.m-split{display:inline-block;overflow:hidden;vertical-align:bottom}
.m-split > i{display:inline-block;font-style:inherit;
  transform:translateY(102%);opacity:0;
  transition:transform var(--m-mid) var(--m-ease),opacity var(--m-mid) var(--m-ease)}
.m-in .m-split > i{transform:none;opacity:1}

/* 見出しの脇の副題と数字は、文字送りの後ろから薄く入る */
.sh span,.sh .n{opacity:0;transform:translateY(8px);
  transition:opacity var(--m-mid) var(--m-ease) .28s,transform var(--m-mid) var(--m-ease) .28s}
.m-in .sh span,.m-in .sh .n{opacity:1;transform:none}

/* 見出しの下に罫を引く。セクションの硬い border-top をこれに置き換える */
.m-rule{position:relative;height:1px;margin:-6px 0 clamp(18px,3vh,34px);
  background:var(--line);transform:scaleX(0);transform-origin:left;
  transition:transform var(--m-slow) var(--m-ease) .1s}
.m-in .m-rule{transform:scaleX(1)}
.m-rule::after{content:"";position:absolute;left:0;top:0;width:64px;height:1px;
  background:var(--gold-line,var(--gold));opacity:0;
  transition:opacity var(--m-slow) var(--m-ease) .5s}
.m-in .m-rule::after{opacity:1}

/* ── セクションごとの所作 ────────────────────────────
   同じイージング・近い時間。違うのは「どこから来るか」だけ。 */

/* CAST：マスクが開きながら上がる。列ごとにずらす（段差が出て、格子に見えない） */
.m-cast .mk{opacity:0;transform:translateY(26px) scale(.985);
  clip-path:inset(12% 0 0 0);
  transition:opacity var(--m-slow) var(--m-ease),transform var(--m-slow) var(--m-ease),
             clip-path var(--m-slow) var(--m-ease)}
.m-cast .mk.in{opacity:1;transform:none;clip-path:inset(0 0 0 0)}

/* SHOP：写真が寄った状態から収まる。枠は先に出て、絵が後から落ち着く */
.m-shop .shop{opacity:0;transform:translateY(18px);
  transition:opacity var(--m-mid) var(--m-ease),transform var(--m-mid) var(--m-ease)}
.m-shop .shop.in{opacity:1;transform:none}
.m-shop .shop .ph{transform:scale(1.14)}
.m-shop .shop.in .ph{transform:scale(1);
  transition:transform 1.6s var(--m-ease),filter .6s}
.m-shop .shop.in:hover .ph{transform:scale(1.07)}

/* MOVIE：横から差し込む。縦に出るセクションが続いたあとなので向きを変える */
.m-media .mv{opacity:0;transform:translateX(28px);
  transition:opacity var(--m-mid) var(--m-ease),transform var(--m-mid) var(--m-ease)}
.m-media .mv.in{opacity:1;transform:none}

/* 看板（遠隔シャンパン）：中身が奥から手前に来る */
.m-bill .promo,.m-bill .pin{opacity:0;transform:scale(1.04);
  transition:opacity var(--m-slow) var(--m-ease),transform var(--m-slow) var(--m-ease)}
.m-bill.m-in .promo,.m-bill.m-in .pin{opacity:1;transform:none}

/* ── 背景に生きた層を敷く ────────────────────────────
   🔴 真っ黒で一切動かないのが平坦さの正体。ただし派手に光らせない。
      不透明度3〜6%の光だまりを **40〜70秒** かけて動かす。
      速いと安っぽく、遅すぎると気づかれない。この幅が「高そう」に見える。 */
/* 🔴 ここにトランジションを付けない。スクロールで毎フレーム書き換えるので、
      付けると遅れて追ってきて気持ち悪くなる。 */
/* 🔴 inset を負にすると、セクションからはみ出して**横スクロールが出る**
      （ハーネスが PC で 173px のはみ出しを検出した）。inset:0 に留め、
      光は自分の overflow:hidden で内側に閉じる。 */
.m-glow{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0;
  transform:translate3d(0,var(--m-par,0px),0)}
.m-glow::before,.m-glow::after{content:"";position:absolute;border-radius:50%;
  filter:blur(90px);will-change:transform}
.m-glow::before{width:58vw;height:58vw;left:-12vw;top:-16vw;
  background:radial-gradient(circle,rgba(176,141,83,.16),rgba(176,141,83,0) 70%);
  animation:m-drift1 64s ease-in-out infinite alternate}
.m-glow::after{width:46vw;height:46vw;right:-10vw;bottom:-14vw;
  background:radial-gradient(circle,rgba(200,53,74,.13),rgba(200,53,74,0) 70%);
  animation:m-drift2 52s ease-in-out infinite alternate}
@keyframes m-drift1{to{transform:translate3d(14vw,10vh,0) scale(1.18)}}
@keyframes m-drift2{to{transform:translate3d(-12vw,-9vh,0) scale(1.22)}}
/* セクションの中身は光だまりより前に置く */
.sec,.bill{position:relative}
.sec > *:not(.m-glow),.bill > *:not(.m-glow){position:relative;z-index:1}

/* 全面の粒子。黒の平坦さを消すのは、光より粒のほうが効く */
.m-grain{position:fixed;inset:0;z-index:1;pointer-events:none;opacity:.05;
  background-image:var(--m-noise);background-size:180px 180px;mix-blend-mode:overlay}

/* ── カーソル（PCだけ）────────────────────────────
   🔴 触る画面には出さない。指で操作している人に丸が付いてくると邪魔なだけ。 */
/* 金の細い十字（10/5）。腕4本＋中心の点。押せるものの上で間が開く */
.m-x{position:fixed;top:0;left:0;z-index:999;pointer-events:none;width:0;height:0;opacity:0;transition:opacity .2s;
  --g:4px;--l:8px;--c:#D8B879;filter:drop-shadow(0 0 1px rgba(0,0,0,.85))}
.m-on .m-x{opacity:1}
.m-x.off{opacity:0!important}
.m-x i{position:absolute;background:var(--c);transition:all .22s var(--m-ease)}
.m-x i:nth-child(1){left:calc(var(--g) * -1 - var(--l));top:-.5px;width:var(--l);height:1px}
.m-x i:nth-child(2){left:var(--g);top:-.5px;width:var(--l);height:1px}
.m-x i:nth-child(3){top:calc(var(--g) * -1 - var(--l));left:-.5px;height:var(--l);width:1px}
.m-x i:nth-child(4){top:var(--g);left:-.5px;height:var(--l);width:1px}
.m-x b{position:absolute;left:-1px;top:-1px;width:2px;height:2px;background:var(--c);transition:opacity .2s}
.m-x.hot{--g:9px;--l:7px;--c:#F0D9A6}
.m-x.hot b{opacity:0}
/* 十字を出している間は普通の矢印を隠す。打つ欄だけは普通のカーソル */
body.m-on,body.m-on *{cursor:none!important}
body.m-on input,body.m-on textarea,body.m-on select,body.m-on [contenteditable=true]{cursor:auto!important}
@media (hover:none),(pointer:coarse){ .m-x{display:none} body.m-on,body.m-on *{cursor:auto!important} }

/* ── ページの出入り ──────────────────────────────
   🔴 View Transitions は iOS Safari 18.0 から。17台がまだ残っているので使わない。
      端末で挙動が割れないよう、全部このフェードで統一する。 */
.m-veil{position:fixed;inset:0;z-index:200;background:var(--sumi);pointer-events:none;
  opacity:0;transition:opacity .34s var(--m-ease)}
.m-veil.on{opacity:1;pointer-events:auto}

/* ── 触られる前提の配慮 ──────────────────────────── */
@media (prefers-reduced-motion:reduce){
  .m-split > i,.sh span,.sh .n{transform:none;opacity:1;transition:none}
  .m-rule{transform:scaleX(1);transition:none}
  .m-rule::after{opacity:1;transition:none}
  .m-cast .mk,.m-shop .shop,.m-media .mv,.m-bill .promo,.m-bill .pin{
    opacity:1;transform:none;clip-path:none;transition:none}
  .m-shop .shop .ph{transform:none}
  .m-glow::before,.m-glow::after{animation:none}
  .m-grain{display:none}
  .m-veil{display:none}
}