/* =========================================================================
   2026-09-26 殺風景の解消：色と背景レイヤーの見本
   layers.html 専用。style.css → motif.css → type.css → palette.css の後に読み込み、追加のレイヤーだけを書く。

   守ること（過去の指摘から）
   - 文字はクリーンなまま（かすれで削らない）。
   - ペイント・手書きは「読む文字」（日本語の見出し・本文・ボタン・ラベル）に重ねない。
     置くのは画面の端・人物や写真の背後・英字見出しの下だけ。
   - 手書きは紙の上にぽつんと置かず、帯・写真の端・パネルの「土台」に重ねる。1セクション最大1つ。
   - ライムはアクセント：FV の人物の背後の払い・EVOLVE の帯・FINAL の「NEXT」まで。
     青（SPORT BLUE）はペイント・帯として面で使う。赤は FV 左上の小さな引っかき1か所だけ。
   ========================================================================= */

:root {
  --blue: #175CFF; /* SPORT BLUE（palette の上書き後に再定義。写真の青い照明と合わせる） */
  --f-script: 'Kaushan Script', 'Brush Script MT', cursive;
  --ly-panel: clamp(120px, 11vw, 180px); /* ROLES 右端の紙のパネルの幅 */
}

/* ---------- 共通：手書き ---------- */
.ly-script { font-family: var(--f-script); font-weight: 400; line-height: 1.04; letter-spacing: 0.01em; white-space: nowrap; }

/* ---------- 共通：箱（.ly-draw）が画面に入ると、中身が左から描かれる（is-in は js/layers.js） ---------- */
.js .ly-draw > * { clip-path: inset(-15% 101% -15% -15%); transition: clip-path 0.9s var(--ease-cut); }
.js .ly-draw > * + * { transition-delay: 0.35s; }
.js .ly-draw.is-in > * { clip-path: inset(-15% -15% -15% -15%); }

/* ---------- 共通：手書きの土台になる青い帯（ベタの帯＋はみ出すドライブラシ） ---------- */
.ly-band {
  position: absolute; inset: -14% -9% -18% -7%; display: block; pointer-events: none; background: var(--blue);
  -webkit-mask: url('../assets/img/brush-band.png') center / 100% 100% no-repeat, url('../img/mk-scrape.png') 45% 50% / 116% 190% no-repeat;
  mask: url('../assets/img/brush-band.png') center / 100% 100% no-repeat, url('../img/mk-scrape.png') 45% 50% / 116% 190% no-repeat;
}

/* =========================================================================
   HERO（黒）
   ========================================================================= */
/* ライムの払い：人物の背後（背景写真より手前）。左下（左肩の後ろ）→右上（首の右・顔の右の空き）へ。
   人物（右端 83vw・幅 69.3vh）を基準に置き、始点は日本語の見出し「次のステージへ、」の右端
   （左余白＋約8字）より必ず右にする＝見出し・リード・ボタンにかけない */
.hero__slash {
  --hF: clamp(30px, min(4.3vw, 7.4vh), 68px); /* .hero__title の字の大きさ（style.css と同じ式） */
  left: max(calc(83vw - 58.9vh), calc(var(--gutter) + var(--rail) + var(--hF) * 8 + 40px));
  top: 35vh; width: 65vh; height: 33.5vh; max-width: none; max-height: none;
}
.hero__slash i {
  inset: 0; background: var(--lime);
  -webkit-mask: url('../assets/img/brush-slash.png') center / 100% 100% no-repeat;
  mask: url('../assets/img/brush-slash.png') center / 100% 100% no-repeat;
  transform: rotate(-5deg);
}

/* 胸元の手書き（人物の上に重ねる）。描画・スクロールでの退場は main.js の .hero__script の仕組み */
.hero__script { color: var(--lime); font-family: var(--f-script); line-height: 1.02; transform: rotate(-14deg); }

/* 右端の青いペイント（画面の端に沿って縦）。edge-brush のギザギザ側を内側（左）へ向ける。
   上端は画面の上のほうから始め、約120pxかけてかすれさせる（まっすぐな切り口を見せない）。下端は画面の外（.hero__stage で切れる） */
.ly-heroBlue { position: absolute; right: -6px; top: 14vh; width: clamp(40px, 4.2vw, 72px); height: 90vh; z-index: 4; pointer-events: none; }
.ly-heroBlue i {
  position: absolute; left: 50%; top: 50%; width: 90vh; height: clamp(40px, 4.2vw, 72px); background: var(--blue);
  /* rotate(-90deg) で要素の右端＝画面の上。右端から 18% をかすれさせる */
  -webkit-mask: url('../img/edge-brush.png') center / 100% 100% no-repeat, linear-gradient(to left, transparent 0, #000 18%);
  -webkit-mask-composite: source-in;
  mask: url('../img/edge-brush.png') center / 100% 100% no-repeat, linear-gradient(to left, transparent 0, #000 18%);
  mask-composite: intersect;
  transform: translate(-50%, -50%) rotate(-90deg);
  transition: clip-path 1s var(--ease-cut);
}
/* 左上の角に赤の小さな引っかき（ロゴと欄外の単語の間）。z-index を付けず、DOM の順で英字の「ARE YOU READY?」の背後に置く */
.ly-heroScratch { position: absolute; left: -26px; top: 54px; width: 126px; height: 42px; pointer-events: none; }
.ly-heroScratch i {
  position: absolute; inset: 0; background: var(--red);
  -webkit-mask: url('../img/scratch.png') center / 100% 100% no-repeat;
  mask: url('../img/scratch.png') center / 100% 100% no-repeat;
  transition: clip-path 0.7s var(--ease-cut) 0.2s;
}
/* イントロの間は隠し、イントロが終わった瞬間に描く */
.is-intro .ly-heroBlue i,
.is-intro .ly-heroScratch i { clip-path: inset(0 100% 0 0); }

/* =========================================================================
   MISSION（紙）
   ========================================================================= */
.mission__grid { position: relative; }
.mission__tag { display: none; } /* 同じ文言の注記を右上の欄外へ移したため、写真の上のタグは出さない */

/* EVOLVE. の背後：黒い色面をやめ、ライムのドライブラシの帯。文字は黒 */
.mission__title em { color: var(--black); }
.mission__hl {
  inset: -0.46em -0.24em -0.66em -0.22em; background: var(--lime); /* 帯（画像の高さの約27〜69%）が字面の上下を包む位置 */
  -webkit-mask: url('../img/mk-scrape.png') center / 100% 100% no-repeat;
  mask: url('../img/mk-scrape.png') center / 100% 100% no-repeat;
}

/* 右上：写真（少し傾け、下辺は破れた紙の縁＋薄い影）。上端を「01 | MISSION」のラベル（.mission__grid の上端）にそろえ、
   「WE PLAY」の右の空白から埋める（カンプと同じく、写真の上端＝見出しの1行目より上） */
.ly-mPhoto {
  position: absolute; right: 14%; top: 6px; width: clamp(240px, 24vw, 400px); pointer-events: none;
}
.ly-mPhoto__fig { margin: 0; transform: rotate(-4deg); filter: drop-shadow(0 12px 14px rgba(10, 10, 10, 0.3)); }
.ly-mPhoto__fig img {
  width: 100%; aspect-ratio: 5 / 4; object-fit: cover; object-position: 50% 28%;
  /* ベタの範囲（上から72%）を破れ線（写真の高さの約73〜75%）より上で止め、下辺を破れ縁の形にする */
  -webkit-mask: url('../img/torn-edge.png') center bottom / 100% auto no-repeat, linear-gradient(#000 0 0) center top / 100% 72% no-repeat;
  mask: url('../img/torn-edge.png') center bottom / 100% auto no-repeat, linear-gradient(#000 0 0) center top / 100% 72% no-repeat;
}
/* 青の手書き：1行目の上半分を写真の暗い部分（左下〜中央下の壁と上着）に重ね、2行目は破れ縁から紙へ垂らす。
   写真の右下は照明の明るい青で字が沈むので、右下には重ねない */
.ly-mScript { position: absolute; right: auto; left: 8%; top: calc(100% - 100px); }
.ly-mScript p { color: var(--blue); font-size: clamp(30px, 2.8vw, 46px); transform: rotate(-12deg); }
/* 欄外の小さな英語の注記（写真の右、写真の上端にそろえる） */
.ly-mAnno {
  position: absolute; right: var(--gutter); top: 4px; text-align: right; color: var(--black); /* .wrap の左右の余白の内側 */
}

/* =========================================================================
   DO / DO / DO（黒）：右上の画面端に青の払いを1つ
   ========================================================================= */
.ly-dosFlick { position: absolute; right: -3vw; top: 3vh; width: clamp(150px, 16vw, 280px); aspect-ratio: 647 / 608; pointer-events: none; }
.ly-dosFlick i {
  position: absolute; inset: 0; background: var(--blue);
  -webkit-mask: url('../assets/img/brush-flick.png') center / contain no-repeat;
  mask: url('../assets/img/brush-flick.png') center / contain no-repeat;
}

/* 背景のトーン（色なしのチャコール）：黒のベタの中に「奥の層」をつくる。色は増やさない */
.ly-tone { position: absolute; display: block; pointer-events: none; background: #1C1D21; }
/* DO：輪郭の DODODO の下半分の背後に、右へはみ出す帯。青・紙のパネル（.dos__panel--2/3）の下に置くので、色が変わると隠れる。
   左下の「昨日の自分より、一歩先へ。」（左 0〜30vw）にはかけない */
.ly-doTone {
  left: 42vw; top: 56vh; width: 70vw; height: 24vh; transform: rotate(-3deg);
  -webkit-mask: url('../assets/img/brush-band.png') center / 100% 100% no-repeat;
  mask: url('../assets/img/brush-band.png') center / 100% 100% no-repeat;
}

/* =========================================================================
   ROLES（黒）：右端にグレーの紙の縦パネル（形は motif.css の .roles__panel）
   カードの列の最後にパネル幅の余白を足し、最後のカードがパネルの手前で止まるようにする
   パネルはカードの列より奥（z-index:1 < .roles__viewport の 2）。カードが紙の上を通り、隠れるのは手書き（装飾）だけ。
   上下はヘッダー（mix-blend-mode: difference）の下に入らないよう空け、上辺・下辺も破る＝「破った紙の短冊」
   ========================================================================= */
.roles__viewport { z-index: 2; }
.roles__panel {
  z-index: 1; pointer-events: none; width: var(--ly-panel); top: 104px; bottom: 56px;
  clip-path: polygon(14% 3%, 45% 0, 72% 2%, 100% 0, 100% 100%, 80% 98.4%, 52% 100%, 26% 97.8%, 8% 100%, 12% 91%, 4% 83%, 10% 74%, 2% 63%, 9% 54%, 3% 43%, 11% 33%, 5% 21%, 12% 11%);
}
.roles__panel p { font-size: clamp(26px, 2.3vw, 38px); line-height: 1.02; margin-left: 14%; }
@media (min-width: 900px) {
  .roles__track { padding-right: var(--ly-panel); }
}
/* カードの間と上下からだけ見えるチャコールのドライブラシ（カードの列・パネルより奥）。左の導入文（0〜30vw）には入れない */
.ly-rolesTone {
  z-index: 0; left: 34vw; top: 22vh; width: 70vw; height: 44vh; transform: rotate(-4deg);
  -webkit-mask: url('../img/mk-scrape.png') center / 100% 100% no-repeat;
  mask: url('../img/mk-scrape.png') center / 100% 100% no-repeat;
}

/* =========================================================================
   TEAM（紙）：見出しの右上に青いドライブラシの帯＋白の手書き
   ========================================================================= */
.ly-teamScript {
  position: absolute; left: 190px; top: -84px; z-index: 2;
  padding: 0.4em 0.75em 0.5em; font-size: clamp(20px, 1.8vw, 30px); transform: rotate(-7deg); pointer-events: none;
}
.ly-teamScript p { position: relative; color: var(--paper); }

/* =========================================================================
   MEMBERS（全画面スライド）：ステージの右側の空き（人物の右・番号の下・サブ写真の上）に青の帯＋手書き。
   カンプと同じく右側に置き、TEAM（見出しの左上）と違う型にする。スライドが始まる（is-live）と描かれる
   ========================================================================= */
.ly-memScript {
  position: absolute; right: calc(var(--gutter) + 10px); top: 37vh; z-index: 30;
  padding: 0.4em 0.75em 0.5em; font-size: clamp(20px, 1.7vw, 28px); transform: rotate(-6deg); pointer-events: none;
}
.ly-memScript p { position: relative; color: var(--paper); }
.ly-memScript > * { transition: clip-path 0.8s var(--ease-cut) 0.05s; }
.ly-memScript > p { transition-delay: 0.3s; }
.js .ly-memScript > * { clip-path: inset(-15% 101% -15% -15%); }
.js .members.is-live .ly-memScript > * { clip-path: inset(-15% -15% -15% -15%); }

/* =========================================================================
   FLOW（黒）：英字見出しの下に青の大きな払い。見出しの中に置き、字の大きさ（em）基準で位置を決める
   ＝どの画面幅でも「STARTS HERE.」の右下から右上へ抜け、1行目（グレー）・ステップ・FAQ にかからない
   z-index:-1 で見出しの文字の背後（.flow .wrap の重なりの中）に回す
   ========================================================================= */
/* FINAL の太い下線を後半の山場にするため、FLOW は「細く速い線」。
   180度回して（左下→右上の向きは保ったまま）飛沫を左下の端へ移し、HERO の払いと形をそろえない。
   左右反転だけだと右下がりになり、1行目「YOUR NEXT STAGE」（グレー）の背後を通るため、回転にする */
.flow__title { position: relative; }
.ly-flowSlash { position: absolute; left: 4.48em; top: 0.55em; width: 7.4em; height: 1.05em; z-index: -1; display: block; pointer-events: none; }
.ly-flowSlash i {
  position: absolute; inset: 0; display: block; background: var(--blue);
  -webkit-mask: url('../assets/img/brush-slash.png') center / 100% 100% no-repeat;
  mask: url('../assets/img/brush-slash.png') center / 100% 100% no-repeat;
  transform: rotate(174deg);
}
/* 回しているので、左から描くには「要素の右端（＝画面の左）」から見せ始める */
.js .ly-flowSlash > i { clip-path: inset(-15% -15% -15% 101%); }

/* 黒と黒の境目（MEMBERS→FLOW、FLOW→FINAL）：チャコールのかすれた縁で区切りを見せる */
.ly-seam {
  position: absolute; left: -2vw; right: -2vw; height: clamp(40px, 4.8vw, 80px); display: block; pointer-events: none;
  background: var(--charcoal);
  -webkit-mask: url('../img/edge-brush.png') center / 100% 100% no-repeat, linear-gradient(#000 35%, transparent);
  -webkit-mask-composite: source-in;
  mask: url('../img/edge-brush.png') center / 100% 100% no-repeat, linear-gradient(#000 35%, transparent);
  mask-composite: intersect;
}
.ly-seam--top { top: 0; }
.ly-seam--bottom { bottom: 0; transform: scaleY(-1); }

/* =========================================================================
   FINAL（黒）：「NEXT」をライムに戻す。「NEXT STAGE.」の下に青のペイント（描画は main.js の .final__underline）
   位置は見出しの字の大きさ（em）基準なので、どの画面幅でも2行目の下に来る
   ========================================================================= */
.final__title em { color: var(--lime); }
.final__underline {
  position: absolute; display: block; pointer-events: none;
  left: 0.36em; top: 1.44em; width: 5.2em; height: 0.5em; background: var(--blue);
  -webkit-mask: url('../assets/img/brush-band.png') center / 100% 100% no-repeat;
  mask: url('../assets/img/brush-band.png') center / 100% 100% no-repeat;
  transform: rotate(-3deg); transform-origin: left center;
}
html:not(.js) .final__underline { clip-path: none; }

/* =========================================================================
   SP
   ========================================================================= */
@media (max-width: 899px) {
  /* FV：払いは顔の左の空きから右上へ（見出し「NEXT PLAYER WANTED.」より上で止める） */
  .hero__slash { left: -6vw; top: 31vh; width: 104vw; height: 22vh; }
  .hero__slash i { transform: rotate(-6deg); }
  /* 胸元が日本語の見出しと重なる幅なので、スマホでは手書きを出さない */
  .hero__script { display: none; }
  /* 右端の青は、画面に出せる幅（リードの行末まで約40px）では細い線にしか見えず描画の不具合に見えるので、スマホでは出さない */
  .ly-heroBlue { display: none; }
  .ly-heroScratch { left: -18px; top: 50px; width: 96px; height: 32px; }

  /* スマホは見出しの横に空きがないので、本文の下の右に置く（手書きは写真の左の縁にかける） */
  .ly-mPhoto { position: relative; right: auto; top: auto; width: 46vw; margin: 7vh 2vw 0 auto; }
  /* 1行目は「More」を写真の左の紙から入れ、「Than」の上半分を写真の下辺（暗い上着）にかける。右下の明るい青には重ねない。2行目は紙へ */
  .ly-mScript { left: -22%; top: calc(100% - 52px); }
  .ly-mScript p { font-size: 26px; }
  .ly-mAnno { display: none; }

  .ly-dosFlick { width: 30vw; right: -6vw; top: 8vh; }
  /* 縦に積む並びでは、輪郭の DODODO と英字の「BETTER.」の背後に置く（下の日本語の行にはかけない） */
  .ly-doTone { left: 30vw; top: 46vh; width: 90vw; height: 9vh; }

  .ly-teamScript { left: auto; right: -2vw; top: -14px; font-size: 18px; }

  /* 直前の TEAM と同じ型になるうえ、ラベルと番号の間に置き場がないので出さない */
  .ly-memScript { display: none; }
  /* ROLES はスマホでは縦に積む並びでカードの奥に回れないので、トーンは出さない */
  .ly-rolesTone { display: none; }

  /* 1行目「YOUR NEXT STAGE」（グレー）にはかけず、2行目「HERE.」の下から右上の画面の端へ抜ける */
  .ly-flowSlash { left: 2.4em; top: 1.3em; width: 6.2em; height: 1em; }
}

/* =========================================================================
   動きを減らす設定：描く動きをなくし、最初から表示
   ========================================================================= */
@media (prefers-reduced-motion: reduce) {
  .ly-draw > *, .ly-memScript > *, .ly-heroBlue i, .ly-heroScratch i { clip-path: none !important; transition: none !important; }
  .final__underline { clip-path: none !important; }
  /* スライドを縦に並べる配置（style.css）では、見出しの行の右に置く（1枚目のスライドにはかけない） */
  .ly-memScript { top: 11vh; }
  /* ROLES を縦に積む配置では紙の短冊が縦に長くなり、中央の手書きがカードの列の奥に隠れたままになるので、上寄せにする */
  .roles__panel { align-items: start; padding-top: 72px; }
}