/*
 * No.01 グリッチャー：壊れかけた「検査記録」。
 * 真っ黒な画面に明朝の文字。水晶に浮かんだ「誤」が、ときどき色ずれして裂ける。
 * 見出しや札は、古い端末のドット文字。問いかけの帯だけ、白黒が反転する。
 */
.theme-glitcher {
	--bg: #040507; --bg-2: #0a0c11; --card: #07080c;
	--line: #1a1e2a; --text: #e4e6ee; --text-dim: #868ea4;
	--accent-1: #00e5ff; --accent-2: #ff2bd6; --gold: #00e5ff;
	--font: "Shippori Mincho", "Yu Mincho", "YuMincho", "Hiragino Mincho ProN", serif;
	--font-dot: "DotGothic16", "Consolas", monospace;
	--radius: 0px;
}
.theme-glitcher .logo__mark { border-color: var(--accent-1); color: var(--accent-1); }
.theme-glitcher ::selection { background: var(--accent-2); color: #000; }

/* 走査線を画面全体にうっすら */
.theme-glitcher::before {
	content: ""; position: fixed; inset: 0; z-index: 50; pointer-events: none;
	background: repeating-linear-gradient(to bottom, rgb(255 255 255 / 0.03) 0 1px, transparent 1px 3px);
}

/* ---- 看板 ---- */
.theme-glitcher .work-hero {
	min-height: 640px; display: flex; align-items: center;
	background:
		radial-gradient(520px 420px at 76% 50%, rgb(0 229 255 / 0.10), transparent 70%),
		radial-gradient(420px 320px at 86% 70%, rgb(255 43 214 / 0.10), transparent 70%);
}
.theme-glitcher .work-hero::before { content: none; } /* 大きな番号のかわりに「誤」を置く */
.theme-glitcher .work-hero__no,
.theme-glitcher .work-hero__en { font-family: var(--font-dot); }
.theme-glitcher .work-hero__en { letter-spacing: 0.5em; font-size: 16px; }
.theme-glitcher .work-hero__title { position: relative; display: inline-block; font-weight: 800; }
.theme-glitcher .work-hero__title::before,
.theme-glitcher .work-hero__title::after { content: attr(data-text); position: absolute; inset: 0; opacity: 0; }
.theme-glitcher .work-hero__title::before { color: var(--accent-1); animation: glitch-a 3.5s infinite steps(1); }
.theme-glitcher .work-hero__title::after { color: var(--accent-2); animation: glitch-b 3.5s infinite steps(1); }
.theme-glitcher .work-hero__type { border-radius: 0; font-family: var(--font-dot); }
.theme-glitcher .work-hero__catch { font-weight: 500; }

/* 水晶と「誤」 */
.crystal {
	position: absolute; right: 8%; top: 50%; translate: 0 -50%;
	width: min(34vw, 340px); aspect-ratio: 200 / 260;
	display: grid; place-items: center;
	pointer-events: none;
}
.crystal__frame { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.crystal__frame * { fill: none; stroke: rgb(0 229 255 / 0.35); stroke-width: 1; vector-effect: non-scaling-stroke; }
.crystal__frame polygon { fill: rgb(0 229 255 / 0.04); stroke: rgb(0 229 255 / 0.6); }
.crystal__kanji {
	position: relative; margin-top: 8%;
	font-family: var(--font); font-weight: 800; font-size: min(22vw, 220px); line-height: 1;
	color: #f4f6fb;
	text-shadow: -4px 0 rgb(0 229 255 / 0.85), 4px 0 rgb(255 43 214 / 0.85);
	animation: kanji-shake 5s infinite steps(1);
}
.crystal__kanji::before, .crystal__kanji::after {
	content: attr(data-text); position: absolute; inset: 0; opacity: 0;
}
.crystal__kanji::before { color: var(--accent-1); animation: kanji-slice-a 5s infinite steps(1); }
.crystal__kanji::after { color: var(--accent-2); animation: kanji-slice-b 5s infinite steps(1); }
.crystal__log {
	position: absolute; left: 50%; bottom: -34px; translate: -50% 0; white-space: nowrap;
	font-family: var(--font-dot); font-size: 13px; letter-spacing: 0.12em; color: var(--accent-2);
	animation: blink 1.2s steps(1) infinite;
}
@keyframes kanji-shake {
	0%, 84%, 100% { transform: none; }
	86% { transform: translate(-6px, 2px) skewX(-8deg); }
	88% { transform: translate(5px, -2px); }
	90% { transform: none; }
}
@keyframes kanji-slice-a {
	0%, 84%, 100% { opacity: 0; }
	86% { opacity: 1; transform: translate(-14px, 0); clip-path: inset(18% 0 58% 0); }
	88% { opacity: 1; transform: translate(10px, 0); clip-path: inset(62% 0 14% 0); }
	90% { opacity: 0; }
}
@keyframes kanji-slice-b {
	0%, 85%, 100% { opacity: 0; }
	87% { opacity: 1; transform: translate(12px, 0); clip-path: inset(40% 0 38% 0); }
	89% { opacity: 1; transform: translate(-8px, 0); clip-path: inset(6% 0 80% 0); }
	91% { opacity: 0; }
}
@keyframes blink { 50% { opacity: 0; } }

/* ---- 問いかけ：ここだけ白黒が反転する ---- */
.theme-glitcher .work-question {
	background: #f1f2f6; color: #050608; border: 0;
	background-image: repeating-linear-gradient(to bottom, rgb(0 0 0 / 0.04) 0 1px, transparent 1px 4px);
}
.theme-glitcher .work-question p { font-weight: 800; }
.theme-glitcher .work-question p::before, .theme-glitcher .work-question p::after { color: #050608; opacity: 0.18; }
.theme-glitcher .work-question .shift {
	position: relative; display: inline-block;
	text-shadow: -3px 0 rgb(0 229 255 / 0.9), 3px 0 rgb(255 43 214 / 0.9);
	animation: kanji-shake 4s infinite steps(1);
}

/* ---- 章の見出し：端末のコマンドふう ---- */
.theme-glitcher .work-section + .work-section { border-top: 1px dashed var(--line); }
.theme-glitcher .work-section__en {
	font-family: var(--font-dot); font-size: clamp(22px, 3vw, 30px); line-height: 1.3; letter-spacing: 0.12em;
	color: var(--accent-1); -webkit-text-stroke: 0;
}
.theme-glitcher .work-section__en::before { content: "> "; color: var(--accent-2); }
.theme-glitcher .work-section__en::after { content: "_"; animation: blink 1s steps(1) infinite; }
.theme-glitcher .work-section__title { font-weight: 800; font-size: clamp(22px, 2.8vw, 28px); }
.theme-glitcher .work-section__title::before { background: var(--accent-2); height: 1px; }

/* あらすじ：左に一本の線。明朝でゆっくり読ませる */
.theme-glitcher .work-story { padding-left: 24px; border-left: 1px solid var(--line); }
.theme-glitcher .work-story p { font-size: 17px; line-height: 2.2; }

/* カード：四隅だけの角かっこ。ふれると色ずれ */
.theme-glitcher .work-term,
.theme-glitcher .work-cast__item,
.theme-glitcher .work-media__item,
.theme-glitcher .work-portrait {
	position: relative; border-radius: 0; border-color: transparent; background: var(--card);
	background-image:
		linear-gradient(var(--accent-1), var(--accent-1)), linear-gradient(var(--accent-1), var(--accent-1)),
		linear-gradient(var(--accent-1), var(--accent-1)), linear-gradient(var(--accent-1), var(--accent-1)),
		linear-gradient(var(--accent-2), var(--accent-2)), linear-gradient(var(--accent-2), var(--accent-2)),
		linear-gradient(var(--accent-2), var(--accent-2)), linear-gradient(var(--accent-2), var(--accent-2));
	background-repeat: no-repeat;
	background-size: 14px 1px, 1px 14px, 14px 1px, 1px 14px, 14px 1px, 1px 14px, 14px 1px, 1px 14px;
	background-position: 0 0, 0 0, 100% 0, 100% 0, 0 100%, 0 100%, 100% 100%, 100% 100%;
}
.theme-glitcher .work-term:hover,
.theme-glitcher .work-cast__item:hover,
.theme-glitcher .work-media__item:hover { box-shadow: -3px 0 0 rgb(0 229 255 / 0.5), 3px 0 0 rgb(255 43 214 / 0.5); border-color: transparent; }
.theme-glitcher .work-term__name, .theme-glitcher .work-cast__name, .theme-glitcher .work-media__title { font-weight: 800; }
.theme-glitcher .work-cast__role, .theme-glitcher .work-media__kind { font-family: var(--font-dot); }
.theme-glitcher .work-quote { font-weight: 800; border-left-color: var(--accent-2); }
.theme-glitcher .work-profile li { border-bottom-style: dashed; }
.theme-glitcher .buy { border-radius: 0; font-family: var(--font-dot); font-weight: 400; }

/* 主人公の絵（紡の上半身）は、枠の下にぴったり付ける */
.theme-glitcher .work-portrait { place-items: end center; background: radial-gradient(circle at 50% 35%, rgb(0 229 255 / 0.12), transparent 65%), var(--card); }
.theme-glitcher .work-portrait img { width: 96%; }

/* ほかのヒーローのカード */
.theme-glitcher .hero-mini { border-radius: 0; background: var(--card); }
.theme-glitcher .slider__arrow { border-radius: 0; }

@media (max-width: 760px) {
	.theme-glitcher .work-hero { min-height: 0; padding-top: 300px; }
	.crystal { top: 40px; right: 50%; translate: 50% 0; width: 180px; }
	.crystal__kanji { font-size: 120px; }
	.crystal__log { font-size: 11px; bottom: -26px; }
	.theme-glitcher .work-story { padding-left: 16px; }
	.theme-glitcher .work-story p { font-size: 16px; }
}
@media (prefers-reduced-motion: reduce) {
	.theme-glitcher .work-hero__title::before, .theme-glitcher .work-hero__title::after,
	.crystal__kanji, .crystal__kanji::before, .crystal__kanji::after, .crystal__log,
	.theme-glitcher .work-question .shift, .theme-glitcher .work-section__en::after { animation: none; }
}

/* =========================================================
 * キャラクター（2026-10-28）
 * 看板の紡は背景を抜いた立ち絵。ときどき色ずれの影が裂ける。
 * ほかの人物は「検査記録」の一枚として、紙のまま見せる。右上の印は検査文字。
 * ========================================================= */

/* ---- 看板の紡 ---- */
.hero-char {
	position: absolute; right: 4%; bottom: -40px; z-index: 0;
	width: min(36vw, 430px); aspect-ratio: 760 / 1140;
	pointer-events: none;
	animation: char-in 1.2s cubic-bezier(.2, .7, .2, 1) both;
}
.hero-char img { width: 100%; height: auto; display: block; }
.hero-char__main { position: relative; animation: char-glitch 5s infinite steps(1) 1.3s; }
/* 同じ絵をもう一枚重ね、一段だけ横にずらす */
.hero-char__slice { position: absolute; inset: 0; opacity: 0; animation: char-slice 5s infinite steps(1) 1.3s; }
@keyframes char-glitch {
	0%, 85%, 100% { filter: drop-shadow(0 0 36px rgb(0 229 255 / 0.16)); transform: none; }
	86% { filter: drop-shadow(-6px 0 0 rgb(0 229 255 / 0.85)) drop-shadow(6px 0 0 rgb(255 43 214 / 0.85)); transform: translateX(-4px); }
	88% { filter: drop-shadow(5px 0 0 rgb(0 229 255 / 0.8)) drop-shadow(-5px 0 0 rgb(255 43 214 / 0.8)); transform: translateX(3px); }
	90% { filter: drop-shadow(0 0 36px rgb(0 229 255 / 0.16)); transform: none; }
}
@keyframes char-slice {
	0%, 85%, 100% { opacity: 0; }
	86% { opacity: 1; transform: translateX(-18px); clip-path: inset(14% 0 74% 0); filter: drop-shadow(-4px 0 0 rgb(0 229 255 / 0.9)); }
	88% { opacity: 1; transform: translateX(14px); clip-path: inset(48% 0 40% 0); filter: drop-shadow(4px 0 0 rgb(255 43 214 / 0.9)); }
	90% { opacity: 0; }
}
/* 足もとは闇に溶かす */
.theme-glitcher .work-hero::after {
	content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 160px; z-index: 1; pointer-events: none;
	background: linear-gradient(to top, var(--bg), transparent);
}
/* 水晶は紡の手の先、少し奥へ */
.theme-glitcher .crystal { right: calc(4% + min(36vw, 430px) * 0.8); width: min(22vw, 230px); opacity: 0.9; z-index: 2; }
.theme-glitcher .crystal__kanji { font-size: min(14vw, 150px); }
.theme-glitcher .work-hero__inner { z-index: 2; }
@keyframes char-in {
	0% { opacity: 0; transform: translateX(24px); filter: blur(6px); clip-path: inset(0 0 100% 0); }
	40% { opacity: 1; clip-path: inset(0 0 40% 0); }
	100% { opacity: 1; transform: none; filter: none; clip-path: inset(0); }
}

/* ---- 検査記録（共通） ---- */
.dossier {
	position: relative; margin: 0; overflow: hidden; isolation: isolate;
	aspect-ratio: 3 / 4; background: #e9e2d6;
}
.dossier img {
	position: absolute; inset: 0; width: 100%; height: 100%;
	object-fit: cover; object-position: 50% 8%;
	filter: sepia(0.12) contrast(1.04);
	transition: transform 0.6s cubic-bezier(.2, .7, .2, 1);
}
/* 走査線と、四隅を闇に落とすかげ */
.dossier::before {
	content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
	background:
		repeating-linear-gradient(to bottom, rgb(0 0 0 / 0.06) 0 1px, transparent 1px 3px),
		radial-gradient(120% 90% at 50% 35%, transparent 55%, rgb(4 5 7 / 0.55) 100%);
}
/* ふれると、絵の一段が横にずれる */
.dossier::after {
	content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: 0;
	background: var(--img) 50% 8% / cover no-repeat;
	mix-blend-mode: difference;
}
.dossier__head, .dossier__foot {
	position: absolute; left: 0; right: 0; z-index: 3;
	display: flex; justify-content: space-between; gap: 8px;
	padding: 6px 10px; font-family: var(--font-dot); font-size: 11px; letter-spacing: 0.14em;
	color: var(--accent-1); background: rgb(4 5 7 / 0.82);
}
.dossier__head { top: 0; }
.dossier__foot { bottom: 0; color: var(--accent-2); }
.dossier__stamp {
	position: absolute; right: 12px; top: 38px; z-index: 3;
	display: grid; place-items: center; width: 52px; height: 52px;
	font-family: var(--font); font-weight: 800; font-size: 32px; line-height: 1;
	color: #b3122e; border: 2px solid #b3122e; border-radius: 4px;
	rotate: 8deg; opacity: 0.85; mix-blend-mode: multiply;
}
.work-cast__item:hover .dossier img, .dossier--hero:hover img, .pursuer:hover .dossier img { transform: scale(1.04); }
.work-cast__item:hover .dossier::after, .dossier--hero:hover::after, .pursuer:hover .dossier::after { animation: file-glitch 0.9s steps(1) infinite; }
@keyframes file-glitch {
	0% { opacity: 0.55; clip-path: inset(22% 0 66% 0); transform: translateX(-10px); }
	20% { opacity: 0.5; clip-path: inset(58% 0 30% 0); transform: translateX(8px); }
	40% { opacity: 0; }
	70% { opacity: 0.45; clip-path: inset(8% 0 84% 0); transform: translateX(6px); }
	85%, 100% { opacity: 0; }
}

/* ---- 主人公の欄 ---- */
.theme-glitcher .work-hero-profile { grid-template-columns: minmax(240px, 340px) 1fr; }
.dossier--hero { box-shadow: -4px 0 0 rgb(0 229 255 / 0.6), 4px 0 0 rgb(255 43 214 / 0.6); }
.dossier--hero .dossier__stamp { width: 64px; height: 64px; font-size: 40px; }

/* ---- 登場人物：絵が上、文字が下 ---- */
.theme-glitcher .work-cast--files { grid-template-columns: repeat(3, 1fr); gap: 20px; }
.theme-glitcher .work-cast--files .work-cast__item { padding: 0 0 22px; }
.theme-glitcher .work-cast--files .dossier { margin-bottom: 18px; }
.theme-glitcher .work-cast--files .work-cast__name,
.theme-glitcher .work-cast--files .work-cast__role,
.theme-glitcher .work-cast--files .work-cast__text { padding: 0 20px; }
.theme-glitcher .work-cast--files .work-cast__name { font-size: 19px; }

/* ---- 追う者：ここだけ警告の赤 ---- */
.pursuer {
	--alert: #ff3b2f;
	position: relative; margin-top: 40px; overflow: hidden;
	display: grid; grid-template-columns: minmax(220px, 300px) 1fr; gap: 36px; align-items: center;
	padding: 28px; border: 1px solid rgb(255 59 47 / 0.45);
	background:
		repeating-linear-gradient(-45deg, rgb(255 59 47 / 0.06) 0 12px, transparent 12px 24px),
		radial-gradient(600px 300px at 20% 50%, rgb(255 59 47 / 0.12), transparent 70%),
		var(--card);
}
.pursuer::before {
	content: "PURSUER"; position: absolute; right: 18px; bottom: -10px;
	font-family: var(--font-en); font-size: clamp(56px, 9vw, 120px); line-height: 1; letter-spacing: 0.04em;
	color: transparent; -webkit-text-stroke: 1px rgb(255 59 47 / 0.28); pointer-events: none;
}
.dossier--alert .dossier__head { color: var(--alert); }
.dossier--alert { box-shadow: 0 0 0 1px rgb(255 59 47 / 0.6), 0 0 40px rgb(255 59 47 / 0.25); }
.pursuer__body { position: relative; }
.pursuer__alert {
	display: inline-block; margin: 0; padding: 4px 10px;
	font-family: var(--font-dot); font-size: 13px; letter-spacing: 0.14em;
	color: #000; background: var(--alert);
	animation: blink 1.4s steps(1) infinite;
}
.pursuer__name { margin: 14px 0 0; font-weight: 800; font-size: clamp(34px, 4.6vw, 52px); line-height: 1.1;
	text-shadow: -3px 0 rgb(255 59 47 / 0.75); }
.pursuer__name span { margin-left: 12px; font-family: var(--font-dot); font-size: 15px; font-weight: 400; letter-spacing: 0.2em; color: var(--text-dim); text-shadow: none; }
.pursuer__role { margin: 6px 0 0; font-family: var(--font-dot); font-size: 13px; letter-spacing: 0.1em; color: var(--alert); }
.pursuer__text { margin: 18px 0 0; font-size: 16px; line-height: 2; color: var(--text); }

@media (max-width: 960px) {
	.theme-glitcher .work-cast--files { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 760px) {
	.theme-glitcher .work-hero { padding-top: 400px; }
	.hero-char { right: 50%; translate: 50% 0; top: 10px; bottom: auto; width: 250px; }
	.theme-glitcher .crystal { right: 6%; top: 40px; translate: 0 0; width: 120px; }
	.theme-glitcher .crystal__kanji { font-size: 80px; }
	.theme-glitcher .crystal__log { left: auto; right: 0; translate: 0 0; font-size: 9px; }
	.theme-glitcher .work-hero-profile { grid-template-columns: 1fr; }
	.dossier--hero { max-width: 320px; }
	.theme-glitcher .work-cast--files { grid-template-columns: 1fr 1fr; gap: 12px; }
	.theme-glitcher .work-cast--files .work-cast__name,
	.theme-glitcher .work-cast--files .work-cast__role,
	.theme-glitcher .work-cast--files .work-cast__text { padding: 0 12px; }
	.theme-glitcher .work-cast--files .work-cast__text { font-size: 13px; }
	.dossier__stamp { width: 40px; height: 40px; font-size: 24px; top: 32px; right: 8px; }
	.dossier__head { font-size: 9px; padding: 5px 8px; }
	.pursuer { grid-template-columns: 1fr; gap: 20px; padding: 18px; }
	.pursuer .dossier { max-width: 300px; }
}
@media (prefers-reduced-motion: reduce) {
	.hero-char, .hero-char__main, .hero-char__slice, .pursuer__alert { animation: none; }
	.work-cast__item:hover .dossier::after, .dossier--hero:hover::after, .pursuer:hover .dossier::after { animation: none; }
}