/* 旅館すずり — 動きの層・その2（2026-10-13・安嵐ホテルの転場を参考に）。motion2.js と対。
   トップページだけが読む（セミナー各ページは読まない）。motion.css の後に置くこと。
   ① 開場：紙の上に縦書きの屋号 → 墨がにじむように広がって、ヒーローが現れる（最初の1回だけ）
   ② ヒーローは留まり、続く頁が一枚の紙のように下から重なってくる（左右の余白が詰まりながら）
   ③ 大きな写真は障子が開くように、中央から左右へ開く
   ④ 見出しはぼけた状態から焦点が合う／写真の帯は霧が晴れるように上から現れる
   「動きを減らす」設定では全部止める（末尾）。⚠️ 変えたら index.html の ?v= を上げる。 */

/* 毎フレーム書く変数は子に引き継がせない（引き継ぐと、ページ全体のスタイル再計算が毎フレーム起きる） */
@property --sh{syntax:"<number>";inherits:false;initial-value:0}
@property --cl{syntax:"<number>";inherits:false;initial-value:0}

/* ── ① 開場 ── */
#ink{position:fixed;inset:0;z-index:90;background:var(--paper);display:flex;align-items:center;justify-content:center;
 pointer-events:none}
#ink .ink-mark{writing-mode:vertical-rl;font-family:"Zen Old Mincho",serif;font-size:clamp(26px,3.4vw,40px);
 letter-spacing:.5em;color:var(--ink);line-height:1}
#ink .ink-mark span{display:inline-block;opacity:0;filter:blur(8px);transform:translate3d(0,-.3em,0);
 animation:inkch 1.3s cubic-bezier(.2,.7,.3,1) forwards}
#ink .ink-mark span:nth-child(2){animation-delay:.12s}#ink .ink-mark span:nth-child(3){animation-delay:.24s}
#ink .ink-mark span:nth-child(4){animation-delay:.36s}#ink .ink-mark span:nth-child(5){animation-delay:.48s}
@keyframes inkch{to{opacity:1;filter:blur(0);transform:none}}
/* 墨：紙（#ink）に墨の形の穴が開いて広がる。穴の向こうにヒーローが見える */
#ink.go{-webkit-mask:url(ink.svg) 50% 46%/0 0 no-repeat,linear-gradient(#000,#000);
 -webkit-mask-composite:xor;mask:url(ink.svg) 50% 46%/0 0 no-repeat exclude,linear-gradient(#000,#000);
 -webkit-mask-size:0 0,100% 100%;mask-size:0 0,100% 100%;
 animation:inkgo 2.4s cubic-bezier(.5,0,.2,1) forwards}            /* 最初はじわっと滲み、途中から一気に広がる */
@keyframes inkgo{to{-webkit-mask-size:280vmax 280vmax,100% 100%;mask-size:280vmax 280vmax,100% 100%}}
#ink.go .ink-mark{transition:opacity .7s ease;opacity:0}
#ink.fade{transition:opacity .8s ease;opacity:0}          /* mask が使えない端末の代わり */
/* 開場の間はヒーローの文字を止めておき、墨が広がってから置く */
html.intro .hero h1 span,html.intro .hero .lt,html.intro .hero .tag{animation-play-state:paused}

/* ── ② ヒーローは留まり、頁が紙のように重なってくる ── */
.hero{position:sticky;top:0;z-index:0}
.hero.gone{visibility:hidden}                              /* 覆われきったら描かない（軽くする） */
.hero::after{opacity:calc(var(--sy)*.32)}                 /* 紙色に溶かしすぎない：上の紙と見分ける */
@media (min-width:901px){.hero .cap{filter:blur(calc(var(--sy)*14px))}}   /* 屋号は奥へ沈みながらぼける（スマホは重いのでしない） */
.sheet{position:relative;z-index:2;background:var(--paper);
 clip-path:inset(-80px calc(var(--sh,0)*7%) 0 calc(var(--sh,0)*7%));
 box-shadow:0 -24px 60px -30px rgba(0,0,0,.45)}
.sheet.flat{clip-path:none}
@media (max-width:900px){.sheet{clip-path:inset(-80px calc(var(--sh,0)*4%) 0 calc(var(--sh,0)*4%))}}

/* ── ③ 障子のように開く写真 ── */
.shoji{clip-path:inset(0 calc(var(--cl,0)*18%))}

/* ── ④ 見出しの焦点・写真の帯の霧 ── */
h2.sec.rise{filter:blur(9px);
 transition:opacity 1.1s cubic-bezier(.2,.7,.3,1),transform 1.1s cubic-bezier(.2,.7,.3,1),filter 1.6s cubic-bezier(.2,.7,.3,1)}
h2.sec.rise.in{filter:blur(0)}
.sq a.rise{-webkit-mask-image:linear-gradient(#000 0 42%,transparent 58%);mask-image:linear-gradient(#000 0 42%,transparent 58%);
 -webkit-mask-size:100% 280%;mask-size:100% 280%;-webkit-mask-position:0 100%;mask-position:0 100%;
 transition:opacity 1.1s cubic-bezier(.2,.7,.3,1),transform 1.1s cubic-bezier(.2,.7,.3,1),
  -webkit-mask-position 2s cubic-bezier(.11,.58,.26,1.01),mask-position 2s cubic-bezier(.11,.58,.26,1.01)}
.sq a.rise.in{-webkit-mask-position:0 0;mask-position:0 0}

@media (prefers-reduced-motion:reduce){
 #ink{display:none}
 .hero{position:relative}.hero .cap{filter:none}
 .sheet{clip-path:none;box-shadow:none}
 .shoji{clip-path:none}
 h2.sec.rise{filter:none;transition:none}
 .sq a.rise{-webkit-mask-image:none;mask-image:none}
}