/* MT4/5 Lock System Pro LP ─ スクロールで映像を進める演出（2026-10-16 新設・同日 v3・assets/js/mls-motion.js と対）
   v1／v2 は _旧版/style-motion_2026-10-16_v1.css／_v2.css
   ⛔index.html だけが読む。special.html には入れていない（RevAnchor 発売日の差し替えとぶつけないため）。
   ★html.motion は <head> のスクリプトが付ける（動きを減らす設定なら付かない）。
   ★sticky を使うので overflow:clip が使えるブラウザだけで組み替える。使えなければ今までどおりの静止画。 */

/* ---------- 2026-10-29 画面の縦の単位に上限を付ける ----------
   Google の読み取りは画面の縦をページの長さまで広げる → 「画面の何倍」で決めた区間が伸び続けて読み取りが終わらない
   （RevAnchor LP の Search Console のエラーと同じ）。普通の画面（縦1600px まで）では今までと同じ */
:root{ --vh:min(1vh, 16px); --svh:var(--vh); }
@supports (height:1svh){ :root{ --svh:min(1svh, 16px); } }
.hero{ min-height:calc(100 * var(--svh)); }   /* style.css の 100svh（style.css は触らない決まり） */


/* ---------- 共通（動きがないときは今までどおり） ---------- */
.hero__stage, .hero__stage-in{ position:absolute; inset:0; }
.hero__seq{
  position:absolute; inset:0; width:100%; height:100%;
  display:block; opacity:0; transition:opacity .7s ease;
  filter:brightness(1.15);           /* .hero__bg（style-v4.css）と同じ明るさにそろえる */
}
.hero__scrub{ display:none; }
.hero__seal{ display:none; }

.hero__ai{
  position:absolute; right:clamp(16px,3vw,30px); bottom:14px; z-index:2;
  margin:0; font-size:.66rem; letter-spacing:.04em; color:var(--text-dim); opacity:.75;
}

@supports (overflow:clip){

  /* ---------- ヒーロー ----------
     [背景の層：画面に貼りつく] の上を、[映像と行の区間 .hero__scrub] → [本文] の順に流す */
  .motion .hero{ display:block; overflow:clip; min-height:0; padding:0 0 calc(92px + calc(18 * var(--vh))); }
  .motion .hero__stage-in{ position:sticky; inset:auto; top:0; height:calc(100 * var(--vh)); }
  .motion .hero.seq-ready .hero__seq{ opacity:1; }
  /* 映像が出たら、静止画は最後に重ねるためだけに使う（ゆっくり動くアニメは止める＝最後のコマと構図をそろえる）。
     ★v3：鎖の付いた門（紋章の中は空）の静止画。MT5／MT4 どちらでも同じ絵で、ロゴ（MT4/5 Lock System）は .hero__seal で重ねる */
  .motion .hero.seq-ready .hero__bg{ animation:none; transform:none; opacity:0; background-image:url("assets/img/hero-fortress-mt45-gate.webp"); background-position:right center; }
  /* ロゴ：門の紋章の上に重ねる本物の画像（位置と大きさは JS が絵に合わせて入れる） */
  .motion .hero.seq-ready .hero__seal{
    display:block; position:absolute; height:auto; max-width:none; opacity:0; pointer-events:none;
    filter:drop-shadow(0 0 18px rgba(255,190,90,.7)) drop-shadow(0 0 54px rgba(255,140,40,.45));
    will-change:opacity, transform;
  }

  .motion .hero__scrub{ display:block; position:relative; z-index:2; height:calc(360 * var(--vh)); }
  .motion .hero__lines{ position:sticky; top:0; height:calc(100 * var(--vh)); pointer-events:none; }
  /* 行が出ているあいだだけ、行の側を暗くする（--lv：0→1。JS が入れる）。門番に文字が重なっても読めるように */
  .motion .hero__lines::before{
    content:""; position:absolute; inset:0; opacity:var(--lv, 0);
    background:linear-gradient(90deg, rgba(4,4,6,.86) 0%, rgba(4,4,6,.72) 42%, rgba(4,4,6,.18) 72%, transparent 100%);
  }
  .motion .hero__line{
    position:absolute; top:50%; margin:0; opacity:0;
    left:max(22px, calc((100vw - 1400px) / 2 + 22px)); width:min(46vw, 640px);
    font-family:var(--serif); font-weight:700; font-size:clamp(22px, 2.6vw, 40px); line-height:1.7; letter-spacing:.06em;
    color:#fff; text-shadow:0 2px 24px rgba(0,0,0,.95), 0 0 2px rgba(0,0,0,.9);
    will-change:opacity, transform;
  }
  .motion .hero__line strong{ color:var(--gold-hi); font-weight:700; }
  .motion .hero__lines .hero__scroll{ transition:opacity .4s; }

  .motion .hero__inner{ padding-top:calc(12 * var(--vh)); }
  .motion .hero__sub{ display:none; }          /* 行として先に見せたので、本文では繰り返さない */
  .motion .hero__content > *{ opacity:0; transform:translateY(30px); transition:opacity .9s ease, transform .9s cubic-bezier(.2,.7,.2,1); }
  .motion .hero__content > .is-in{ opacity:1; transform:none; }

  /* ---------- 07 三重の門（画面いっぱいに止めて見せる） ---------- */
  .motion .gates-pin.on{ position:relative; height:calc(380 * var(--vh)); margin-inline:calc(50% - 50vw); }
  .motion .gates-pin.on .gates-head{
    position:sticky; top:0; height:calc(100 * var(--vh)); border-radius:0;
    display:flex; flex-direction:column; justify-content:center; align-items:center;
    padding:90px 22px 60px; opacity:1; transform:none;
  }
  .gates-head .head-seq, .mech-head .head-seq{
    position:absolute; inset:0; z-index:-2; width:100%; height:100%;
    display:block; opacity:0; transition:opacity .6s ease;
  }
  .motion .gates-head.seq-ready .head-seq{ opacity:1; }
  .motion .gates-head.seq-ready::before{ opacity:0; }

  /* ---------- 06 The Mechanism（v3）：画面いっぱいに止めて、図面が描き上がる → 左から本物の門に変わる → 今の絵で止めを解く。
     見出しは左の黒い所に乗るので、ずっと出したまま ---------- */
  .motion .mech-pin.on{ position:relative; height:calc(300 * var(--vh)); margin-inline:calc(50% - 50vw); }
  .motion .mech-pin.on .mech-head{
    position:sticky; top:0; height:calc(100 * var(--vh)); border-radius:0;
    display:flex; flex-direction:column; justify-content:center; align-items:center;
    padding:90px 22px 60px; opacity:1; transform:none;
  }
  .motion .mech-head.seq-ready .head-seq{ opacity:1; }
  .motion .mech-head.seq-ready::before{ opacity:0; }
  /* 暗幕と文字は、鎖が巻きついたあとに（--txt：0→1。JS が入れる） */
  .motion .gates-head.seq-ready::after{ opacity:calc(.15 + .85 * var(--txt, 1)); }
  .motion .gates-head.seq-ready > :not(canvas){ opacity:var(--txt, 1); }
}

@media (max-width:720px){
  .hero__ai{ right:16px; bottom:10px; font-size:.62rem; }
  @supports (overflow:clip){
    .motion .hero{ padding-bottom:calc(72px + calc(12 * var(--vh))); }
    .motion .hero.seq-ready .hero__bg{ background-position:86% center; }   /* スマホのコマの切り出し位置(横の中心0.763＝紋章)と同じ所を見せる */
    .motion .hero__scrub{ height:calc(330 * var(--vh)); }
    .motion .hero__line{ left:22px; right:22px; width:auto; text-align:center; font-size:clamp(19px, 5.6vw, 24px); }
    .motion .hero__lines::before{ background:linear-gradient(180deg, rgba(4,4,6,.2) 0%, rgba(4,4,6,.82) 35%, rgba(4,4,6,.82) 65%, rgba(4,4,6,.2) 100%); }
    .motion .hero__inner{ padding-top:calc(10 * var(--vh)); }
    .motion .gates-pin.on .gates-head{ padding:76px 16px 40px; }
    .motion .mech-pin.on .mech-head{ padding:76px 16px 40px; }
  }
}

/* ---------- 06 PART 01／02 のカードの人物（伝令兵・門番）をスクロールで動かす（v3・2026-10-16） ----------
   今の絵（style-mls45.css の .layer--ea::after／.layer--app::after）と同じ場所・同じ大きさにキャンバスを重ね、
   コマが読めたら ::after を消す。コマは黒地なので lighten で重ねる（黒はカードの地の色に溶ける）。
   最後のコマ＝今の絵（スクロールし終わると今と同じ絵で止まる） */
.layer__seq{ display:none; }
.motion .layer.seq-ready > .layer__seq{
  display:block; position:absolute; top:0; right:0; bottom:0; width:34%; height:100%; z-index:-1;
  mix-blend-mode:lighten; pointer-events:none;
  -webkit-mask-image:linear-gradient(90deg, transparent 0%, #000 22%);
          mask-image:linear-gradient(90deg, transparent 0%, #000 22%);
}
.motion .layer.seq-ready::after{ opacity:0; }
/* ★カードも止めて進める（v3）：JS がカードを .layer-pin で包み、包みの高さ＝カード＋70vh にして、カードを画面に貼りつける */
.motion .layer-pin.on > .layer{ position:sticky; }
@media (max-width:720px){
  .motion .layer.seq-ready > .layer__seq{
    top:auto; width:100%; height:200px;
    -webkit-mask-image:linear-gradient(180deg, transparent 0%, #000 22%);
            mask-image:linear-gradient(180deg, transparent 0%, #000 22%);
  }
}

/* ---------- 「MT4/5 Lock System Pro　一定条件で新規エントリーを…」の背景の半透明ロゴを MT4/5 版に（v3・2026-10-16） ----------
   style-v4.css／style-mls45.css は special.html と共用なので、index.html だけが読むこのファイルで上書きする */
body .mls-plate-banner::before,
body[data-ver] .mls-plate-banner::before{
  background-image:url("assets/img/mls45-logo.webp");
  width:340px; height:186px; right:-24px; bottom:-14px;
}
@media (max-width:720px){
  body .mls-plate-banner::before,
  body[data-ver] .mls-plate-banner::before{ width:230px; height:126px; right:-14px; bottom:-8px; }
}

/* ---------- 09 3つのロックのスタンプ（v3・2026-10-17）：動きは JS が transform で入れる。
   大きくしたスタンプで横スクロールが出ないよう、この節だけはみ出しを切る ---------- */
.motion #locks{ overflow:clip; }
.motion #locks .card > img{ will-change:transform, opacity; transform-origin:50% 50%; }

/* ---------- 13 金庫の絵・最後の不死鳥の絵：見えている間だけ動くループ（v3・2026-10-16） ----------
   絵（img）の真上に同じ大きさで重ね、再生が始まってから表示する（読めない・動きを減らす設定なら今の静止画のまま）。
   上下左右を黒へ溶かす .bleed-figure::after はこの上に乗る */
.fig-loop{
  position:absolute; top:0; left:0; width:100%; height:100%; object-fit:cover;
  opacity:0; transition:opacity .8s ease; pointer-events:none;
}
.fig-loop.is-on{ opacity:1; }

/* ---------- GATE カード ---------- */
.gate{ transition:border-color .5s ease, box-shadow .5s ease; }
.gate.is-shut{
  border-color:rgba(226,188,98,.75);
  box-shadow:0 0 0 1px rgba(226,188,98,.18), 0 0 38px rgba(255,140,40,.16);
}
.gate.is-shut .gate__no{ text-shadow:0 0 10px rgba(255,170,60,.7); }

@media (prefers-reduced-motion: reduce){
  .hero__seq, .head-seq, .hero__seal, .layer__seq, .fig-loop{ display:none !important; }
}

/* ---------- 2026-10-29 指で触る端末（iPhone など）：重い描き方をやめる ----------
   RevAnchor LP で iPhone の Safari が落ちた原因（動く物・大きな面へのフィルター、3D、すりガラス）と同じ書き方をやめる。
   パソコンの見た目は変えない。ヒーローの文のぼかし・ロゴの光は mls-motion.js が付けない */
@media (pointer:coarse){
  .site-header.is-stuck, .sticky-cta{ -webkit-backdrop-filter:none; backdrop-filter:none; }   /* 地はもともとほぼ不透明 */
  .hero__seq{ filter:none; }                               /* 明るさは mls-motion.js がキャンバスに描くときに足す */
  .motion .hero.seq-ready .hero__seal{ filter:none; }      /* 大きさを変えながら出すロゴ */
  #locks .card img{ filter:none; }                         /* 4倍から回しながら落とすスタンプ */
  .doc-cover, .doc-cover:hover{ transform:none; }          /* 立体の傾き */
}

/* ---------- 2026-10-29c 指で触る端末：will-change を外す ----------
   出てくる部品（.reveal）128 個などに will-change が付いたままで、iPhone の Safari はその全部を別の描き置きにする。
   直った RevAnchor LP には will-change が1つも無い。下へ送るほど描き置きが増え、14章の辺り・最下部で落ちた（10-29b の後の録画） */
@media (pointer:coarse){
  .js .reveal,
  .motion .hero.seq-ready .hero__seal,
  .motion .hero__line,
  .motion #locks .card > img{ will-change:auto; }
}