/*
 * ヒーローのもやい結びアニメーション。
 * ロープの中心線を少しずつ描いて「結ばれていく」ように見せる。
 * 交差のすき間は、あらかじめ分割した線＋「橋」で表現する（マスクは使わない）。
 */

.msb-knot {
	/* 左右の水平線を画面の端まで届かせるため、親の余白を打ち消して全幅にする */
	width: 100vw;
	margin-left: calc( 50% - 50vw );
	margin-top: var( --msb-mt, 1.6rem );
	margin-bottom: var( --msb-mb, 1.6rem );
	height: var( --msb-h, 66px );
	pointer-events: none;
	position: relative;
}

.msb-knot svg {
	display: block;
	width: 100%;
	height: 100%;
	overflow: visible;
	opacity: var( --msb-rope-op, 1 );
	/* 独立レイヤーに分離：線の描画中に、背景写真ごと塗り直されるのを防ぐ */
	transform: translateZ( 0 );
	will-change: transform;
}

.msb-knot .msb-rope {
	fill: none;
	stroke: var( --msb-rope-color, #fff );
	stroke-width: var( --msb-rope-w, 4.75 );
	stroke-linecap: butt;
	stroke-linejoin: round;
}

/* 描き始める前は見えない状態にしておく（--l はJSが入れる実長）。
 * アニメーションの名前・時間はJSが要素ごとに入れるが、.is-on が付くまでは
 * 「一時停止」で待たせる。途中で設定を切り替えると線の位置が一瞬跳ぶため、
 * ここで最初から全部そろえておき、合図では再生状態だけを変える。 */
.msb-knot .msb-draw {
	/* --l はJSが線の実長を測って入れる。
	 * 入る前（＝ページが出た直後の一瞬）に指定が無いと、線が全部見えてしまい、
	 * 「結び目が一瞬出てから描き直される」ように見える。
	 * どの線より長い値を仮に入れておき、最初から隠しておく。 */
	stroke-dasharray: var( --l, 9999 );
	stroke-dashoffset: var( --l, 9999 );
	/* 進み方はJSが要素ごとに入れる（緩急はロープ全体で配分する）。既定は等速。 */
	animation-timing-function: linear;
	animation-fill-mode: forwards;
	animation-play-state: paused;
}

/* 再生の合図 */
.msb-knot.is-on .msb-draw {
	animation-play-state: running;
}

/* 線を引く */
@keyframes msbKnotDraw {
	to { stroke-dashoffset: 0; }
}

/* 橋を消す（--dir で消える向きを、上を通るロープの進行方向に合わせる） */
@keyframes msbKnotErase {
	from { stroke-dashoffset: 0; }
	to   { stroke-dashoffset: calc( var( --l ) * var( --dir, -1 ) ); }
}

/* タブレット */
@media ( max-width: 1023px ) {
	.msb-knot {
		height: var( --msb-h, 56px );
		margin-top: var( --msb-mt, 1.3rem );
		margin-bottom: var( --msb-mb, 1.3rem );
	}
}

/* スマホ */
@media ( max-width: 640px ) {
	.msb-knot {
		height: var( --msb-h, 44px );
		margin-top: var( --msb-mt, 1rem );
		margin-bottom: var( --msb-mb, 1rem );
	}
}

/* OSで「視差効果を減らす」を選んでいる人には動かさず、完成形だけ見せる */
@media ( prefers-reduced-motion: reduce ) {
	.msb-knot .msb-draw { stroke-dashoffset: 0 !important; animation: none !important; }
	.msb-knot .msb-bridge { display: none; }
}

/*
 * 動かさない表示（ホーム編集画面のプレビュー用）。
 * 描き終わった形だけを出す。
 * 橋は「上のロープが来るまでの埋め線」なので、完成形では出さない。
 */
.msb-knot.is-static .msb-draw { stroke-dashoffset: 0 !important; animation: none !important; }
.msb-knot.is-static .msb-bridge { display: none; }