/*
 * アマルガム 全画面のメンバー紹介（2026-10-29）
 * TOP比較のH案（1つずつ画面ぜんぶが塗り替わる）を、5人の名乗りに使う。
 * 1人＝1画面。背景は挿絵の背景色（上→床）をそのまま延ばして、絵と画面の境目を消す。
 * 最後に5色がそろって「やっと一人前」。変身のルール（5人そろって初めて色が入る）を、画面の動きで見せる。
 */
html { scroll-snap-type: y proximity; }

/* 入口 */
.roll { position: relative; }
.roll__intro { padding: 100px 20px 90px; text-align: center; }
.roll__intro .work-section__en { --sec: var(--fuji); }
.roll__intro .work-section__title::before { display: none; }
.roll__lead { margin: 22px 0 0; font-family: var(--font-tv); font-size: clamp(18px, 2.2vw, 26px); line-height: 1.7; }
.roll__hint { margin: 26px 0 0; color: var(--text-dim); font-size: 13px; letter-spacing: 0.1em; animation: hint 2s ease-in-out infinite; }
@keyframes hint { 50% { transform: translateY(6px); opacity: 0.6; } }

/* 1人＝1画面 */
.hs {
	position: relative; min-height: 100svh; display: grid; align-items: center; overflow: hidden; scroll-snap-align: start;
	background: linear-gradient(180deg, var(--top) 0%, var(--floor) 100%); color: var(--ink);
	padding: 90px clamp(20px, 5vw, 80px) 40px;
}
.hs__ghost { /* 背景に、色の名前を大きく白抜きで */
	position: absolute; left: -2vw; bottom: -8vh; font-family: var(--font-tv); font-size: 62vh; line-height: 1; white-space: nowrap;
	color: transparent; -webkit-text-stroke: 2px color-mix(in srgb, var(--ink) 22%, transparent); pointer-events: none;
}
.hs__inner { position: relative; display: grid; grid-template-columns: 1fr 1.05fr; gap: 3vw; align-items: center; width: min(1280px, 100%); margin-inline: auto; }
.hs__inner > * { min-width: 0; }
.hs__no { margin: 0; font-size: 12px; font-weight: 700; letter-spacing: 0.24em; opacity: 0.85; }
.hs__no b { font-family: "Bebas Neue", sans-serif; font-weight: 400; font-size: 16px; letter-spacing: 0.12em; }
.hs__color {
	display: inline-block; margin: 14px 0 0; padding: 4px 18px; font-family: var(--font-tv); font-size: clamp(18px, 2vw, 24px); letter-spacing: 0.2em;
	background: var(--ink); color: var(--top); transform: skewX(-12deg); box-shadow: 5px 5px 0 rgb(0 0 0 / 0.35);
}
.hs__name { margin: 14px 0 0; font-family: var(--font-tv); font-weight: 400; font-size: clamp(44px, 6.4vw, 96px); line-height: 1.1; letter-spacing: 0.02em; text-shadow: 0 4px 0 rgb(0 0 0 / 0.18); }
.hs__age { margin-left: 0.4em; font-family: "Zen Kaku Gothic New", sans-serif; font-weight: 700; font-size: 0.24em; letter-spacing: 0.1em; opacity: 0.85; }
.hs__quote { margin: 22px 0 0; font-family: var(--font-tv); font-size: clamp(22px, 2.8vw, 38px); line-height: 1.4; }
.hs__desc { margin: 20px 0 0; max-width: 30em; font-size: clamp(14px, 1.2vw, 16px); font-weight: 700; line-height: 2; opacity: 0.92; }
.hs__lack { display: inline-block; margin: 20px 0 0; padding: 8px 16px; border: 2px solid currentColor; border-radius: 999px; font-size: 14px; font-weight: 700; }
.hs__lack b { font-family: var(--font-tv); font-weight: 400; font-size: 1.25em; }
.hs__art { display: grid; place-items: center; }
.hs__art img {
	width: min(100%, 86svh); height: auto; aspect-ratio: 1;
	/* 絵の四隅を背景に溶かす */
	-webkit-mask: radial-gradient(closest-side, #000 78%, transparent 100%);
	mask: radial-gradient(closest-side, #000 78%, transparent 100%);
}

/* 画面に入ったら、名乗りが順に出る（amalgam-h.js が .is-in を付ける） */
.hs__text > *, .hs__art { opacity: 0; transform: translateY(36px); transition: opacity 0.7s ease, transform 0.8s cubic-bezier(.2, .8, .2, 1); }
.hs__art { transform: translateX(60px) scale(0.96); }
.hs.is-in .hs__text > *, .hs.is-in .hs__art { opacity: 1; transform: none; }
.hs.is-in .hs__text > :nth-child(2) { transition-delay: 0.06s; }
.hs.is-in .hs__text > :nth-child(3) { transition-delay: 0.12s; }
.hs.is-in .hs__text > :nth-child(4) { transition-delay: 0.22s; }
.hs.is-in .hs__text > :nth-child(5) { transition-delay: 0.3s; }
.hs.is-in .hs__text > :nth-child(6) { transition-delay: 0.36s; }
.hs.is-in .hs__art { transition-delay: 0.08s; }
.hs__ghost { transition: transform 1.4s cubic-bezier(.2, .8, .2, 1); transform: translateX(-6%); }
.hs.is-in .hs__ghost { transform: none; }

/* 朱は右へ走っているので、絵を左に置いて走る先に文字を */
.hs--shu .hs__inner { grid-template-columns: 1.05fr 1fr; }
.hs--shu .hs__art { order: -1; transform: translateX(-60px) scale(0.96); }
.hs--shu .hs__ghost { left: auto; right: -2vw; }

/* 右の目次 */
.roll__dots { position: fixed; right: clamp(12px, 2vw, 28px); top: 50%; translate: 0 -50%; z-index: 60; display: grid; gap: 10px; opacity: 0; pointer-events: none; transition: opacity 0.4s; }
.roll__dots.is-on { opacity: 1; pointer-events: auto; }
.roll__dots a { display: flex; align-items: center; justify-content: flex-end; gap: 8px; text-decoration: none; color: #fff; font-size: 12px; font-weight: 700; text-shadow: 0 1px 3px rgb(0 0 0 / 0.5); }
.roll__dots span { opacity: 0; transition: opacity 0.3s; }
.roll__dots a::after { content: ""; width: 10px; height: 10px; border-radius: 999px; background: var(--c); border: 2px solid #fff; transition: width 0.3s; }
.roll__dots a.is-on span { opacity: 1; }
.roll__dots a.is-on::after { width: 30px; }

/* 5人そろう */
.roll__final { position: relative; min-height: 100svh; display: grid; place-items: center; overflow: hidden; scroll-snap-align: start; background: #140d1d; }
.roll__bars { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(5, 1fr); }
.roll__bars i { background: var(--c); transform: translateY(var(--from, 100%)); transition: transform 0.9s cubic-bezier(.7, 0, .2, 1); }
.roll__bars i:nth-child(odd) { --from: -100%; }
.roll__bars i:nth-child(2) { transition-delay: 0.08s; }
.roll__bars i:nth-child(3) { transition-delay: 0.16s; }
.roll__bars i:nth-child(4) { transition-delay: 0.24s; }
.roll__bars i:nth-child(5) { transition-delay: 0.32s; }
.roll__final.is-in .roll__bars i { transform: none; }
.roll__final-inner { position: relative; text-align: center; opacity: 0; transform: scale(0.8); transition: opacity 0.6s 0.7s, transform 0.8s 0.7s cubic-bezier(.3, 1.6, .5, 1); }
.roll__final.is-in .roll__final-inner { opacity: 1; transform: none; }
.roll__emblem { width: clamp(160px, 22vw, 280px); margin: 0 auto; filter: drop-shadow(0 10px 0 rgb(0 0 0 / 0.35)); }
.roll__together {
	margin: 24px 0 0; font-family: var(--font-tv); font-size: clamp(36px, 6vw, 84px); line-height: 1.25; color: #fff;
	-webkit-text-stroke: 2px #1d1428; paint-order: stroke; text-shadow: 0 6px 0 #000;
}

/* スマホ：絵を上、名乗りを下に */
@media (max-width: 860px) {
	.hs { min-height: auto; padding: 70px 22px 56px; align-items: start; }
	.hs__inner, .hs--shu .hs__inner { grid-template-columns: 1fr; gap: 8px; }
	.hs__art, .hs--shu .hs__art { order: -1; }
	.hs__art img { width: min(100%, 420px); }
	.hs__ghost { font-size: 46vh; bottom: auto; top: 10vh; }
	.hs__name { font-size: 13vw; }
	.roll__dots { display: none; }
	.roll__final { min-height: 80svh; }
}
@media (prefers-reduced-motion: reduce) {
	.roll__hint { animation: none; }
	.hs__text > *, .hs__art, .hs__ghost, .roll__bars i, .roll__final-inner { opacity: 1; transform: none; transition: none; }
}