/* DEATH DIGITAL DESIGN — 3A WINDMILL / 時間の軸 */

/* ピクセルフォントは PixelMplus12 に統一。
   12 の整数倍（12 / 24 / 36 / 48 / 60 / 96 / 120px）でのみ滲まない。 */
@font-face {
  font-family: "PixelMplus12";
  src: url("../font/PixelMplus12-Regular.ttf") format("truetype");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "PixelMplus12";
  src: url("../font/PixelMplus12-Bold.ttf") format("truetype");
  font-weight: 700; font-style: normal; font-display: swap;
}

:root {
  --bg: #0a0908;
  --ink: #efe7dd;
  --ink-soft: #c4bcb3;
  --mute: #9a9188;
  --dim: #6d665e;
  --line: #23201d;
  --blood: #8f1d12;
  --hover: #ff3b30;
  --plate: rgba(239, 231, 221, .06);

  --pad: 40px;
  --top: 64px;      /* ヘッダーと本文が共有する開始位置（上から） */
  --title-fix: -9px; /* 見出しの字形の上余白ぶん。ヘッダー文字の上端と揃える */

  /* 4つとも同じ書体。使い分けは太さと大きさで行う */
  --f-mono: "PixelMplus12", ui-monospace, monospace;
  --f-pixel: "PixelMplus12", ui-monospace, monospace;
  --f-dot: "PixelMplus12", ui-monospace, monospace;
  --f-jp: "PixelMplus12", ui-monospace, monospace;

  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }

html {
  background: var(--bg);
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  -webkit-font-smoothing: none; /* ピクセルフォントの輪郭をぼかさない */
  font-synthesis: none;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--f-mono);
  font-size: 12px; /* 既定も12の倍数に揃える */
  overflow-x: hidden;
}

h1, h2, h3, p, ul { margin: 0; padding: 0; font-weight: 400; }
ul { list-style: none; }
a { color: inherit; text-decoration: none; }
a:hover { color: var(--hover); }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
button:hover { color: var(--hover); }
:focus-visible { outline: 1px solid var(--hover); outline-offset: 3px; }

/* ---------- 時間の軸：スクロール量に連動した出現 ---------- */
/* .ch / .rv は windmill.js が付ける。JS が動かない環境では全て表示されたまま。 */

.ch { position: relative; opacity: 0; }
.ch.is-on { opacity: 1; }
.ch.is-head::after {
  content: "▌";
  position: absolute; left: 100%; top: 0;
  color: var(--blood);
  pointer-events: none;
  animation: ddd-blink 1s steps(1) infinite;
}
@keyframes ddd-blink { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }

/* 要素はフェードではなく拡縮で現れる。
   出るときは最後に少し行き過ぎてから収まり、時間を巻き戻すと縮んで消える。 */
.rv { transform: scale(0); transition: transform .34s cubic-bezier(.5, 0, .75, 0); }
.rv.is-in {
  transform: scale(1);
  transition: transform .52s cubic-bezier(.18, 1.32, .38, 1);
}

.skip {
  position: fixed; left: 12px; top: -60px; z-index: 20;
  padding: 8px 12px; background: var(--ink); color: var(--bg);
  font-size: 12px; letter-spacing: 2px;
}
.skip:focus { top: 12px; }

.m-only { display: none; }

/* ---------- 背景の風車 ---------- */

.stage {
  position: fixed; inset: 0; z-index: 0;
  height: 100vh; height: 100lvh;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
  pointer-events: none;
}
.stage__logo {
  width: clamp(620px, 75vw, 960px);
  aspect-ratio: 1;
  image-rendering: pixelated;
  opacity: .4;
  will-change: transform;
}
/* JS を使わないページ（404）用。favicon と同じ絵をそのまま拡大する */
.stage__logo--still {
  background: url("../../favicon.svg") center / contain no-repeat;
  opacity: .3;
}
.stage__vignette {
  position: absolute; inset: 0;
  background: radial-gradient(60% 55% at 50% 45%, rgba(10, 9, 8, .18), rgba(10, 9, 8, .84) 80%);
}

/* ---------- ヘッダー ---------- */

/* ヘッダーは背景を持たない。本文はこの下を通り抜け、開始位置のYだけを共有する。
   透明な帯がクリックを奪わないよう、リンク以外は操作を通す。 */
.bar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 3;
  display: flex; justify-content: flex-end; align-items: flex-start;
  padding: var(--top) var(--pad) 0;
  font-size: 12px; letter-spacing: 2px;
  pointer-events: none;
}
.bar a, .bar button { pointer-events: auto; }
/* 本文と重なっても読めるよう、ナビの下にだけ薄い影を敷く。
   帯にはせず、周囲へ溶ける形にして本文の貫通感を保つ。 */
.bar__nav, .bar__menu { position: relative; }
.bar__nav::before, .bar__menu::before {
  content: "";
  position: absolute; inset: -18px -26px; z-index: -1;
  background: radial-gradient(60% 130% at 50% 50%, rgba(10, 9, 8, .92) 0%, rgba(10, 9, 8, .72) 45%, rgba(10, 9, 8, 0) 100%);
  pointer-events: none;
}
.bar__nav a, .bar__menu {
  text-shadow:
    0 0 6px rgba(10, 9, 8, .95),
    0 0 14px rgba(10, 9, 8, .85),
    0 0 24px rgba(10, 9, 8, .6);
}
.bar__nav { display: flex; gap: 26px; color: var(--mute); }
.bar__brand { display: none; } /* ブランド名はヘッダーに出さない */
.bar__menu { display: none; font-size: 24px; line-height: 1; padding: 6px 0 6px 12px; }

/* ---------- 本文 ---------- */

.content { position: relative; z-index: 2; }

section { scroll-margin-top: var(--top); }

.home {
  min-height: 100vh; min-height: 100svh;
  display: flex; flex-direction: column; justify-content: flex-start;
  padding: calc(var(--top) + var(--title-fix)) var(--pad) 24px;
}
.home__eyebrow { font-size: 12px; letter-spacing: 3px; color: var(--mute); margin-bottom: 28px; }
.home__title {
  font-family: var(--f-dot);
  font-size: 120px; line-height: 112px; letter-spacing: 0;
  font-weight: 700;
}
.home__title .ddd { color: var(--blood); } /* 頭の D だけ赤 */
.home__lead {
  font-family: var(--f-jp);
  font-size: 24px; line-height: 48px; color: var(--ink-soft);
  margin-top: 34px; max-width: 520px;
}
.home__meta {
  display: flex; gap: 20px; align-items: baseline;
  margin-top: 48px;
  font-size: 12px; letter-spacing: 2px; color: var(--dim);
}

/* NEWS（ホーム内） */

.news { margin-top: 52px; max-width: 560px; }
.news__label {
  font-size: 12px; letter-spacing: 2px; color: var(--mute);
  padding-bottom: 12px; border-bottom: 1px solid var(--line);
}
.news__item {
  display: grid; grid-template-columns: 108px minmax(0, 1fr); gap: 16px;
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
}
/* 行の高さを本文と揃え、日付と本文の1行目が同じ高さに来るようにする */
.news__date { font-size: 12px; line-height: 24px; letter-spacing: 1px; color: var(--dim); }
.news__item:first-child .news__date { color: var(--blood); }
.news__text { font-family: var(--f-jp); font-size: 12px; line-height: 24px; color: var(--ink-soft); }

.sec-head {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-bottom: 40px;
  font-size: 12px; letter-spacing: 2px; color: var(--mute);
}
.sec-head h2 { font-size: inherit; }

/* WORKS */

.works { padding: 120px var(--pad) 140px; }
.work {
  display: grid;
  grid-template-columns: minmax(0, 62%) minmax(0, 1fr);
  gap: 44px; align-items: center;
  padding: 40px 0;
  border-top: 1px solid var(--line);
}
.work__art {
  aspect-ratio: 16 / 9;
  background: var(--plate); border: 1px solid var(--line);
  display: flex; align-items: flex-end; padding: 14px;
  font-size: 12px; color: var(--dim);
}
.work__art img { display: block; width: 100%; height: 100%; object-fit: cover; }
.work__title { font-family: var(--f-dot); font-size: 48px; line-height: 56px; font-weight: 700; }
.work__meta { font-size: 12px; color: var(--mute); margin-top: 12px; }

/* DESIGNERS */

.designers { padding: 0 var(--pad) 140px; }
.crew { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.crew__card { background: rgba(10, 9, 8, .7); border: 1px solid var(--line); padding: 20px; }
.crew__portrait {
  aspect-ratio: 1; background: var(--plate);
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; color: var(--dim);
}
.crew__portrait img { display: block; width: 100%; height: 100%; object-fit: cover; }
.crew__handle { font-family: var(--f-pixel); font-size: 24px; line-height: 28px; font-weight: 700; margin-top: 16px; }
.crew__role { font-family: var(--f-jp); font-size: 12px; line-height: 20px; color: var(--mute); margin-top: 6px; }

/* SUPPORTER — crew より一回り小さいカード */

.supporter {
  display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px;
  margin-top: 20px;
}
.supporter .crew__card { padding: 12px; }
.supporter .crew__portrait { font-size: 12px; }
.supporter .crew__handle { font-family: var(--f-jp); font-size: 12px; line-height: 16px; margin-top: 10px; overflow-wrap: anywhere; }
.supporter .crew__role { font-family: var(--f-mono); font-size: 12px; line-height: 16px; margin-top: 4px; }

/* FOOTER */

.foot {
  position: relative; z-index: 2;
  display: flex; justify-content: space-between; gap: 16px;
  padding: 20px var(--pad);
  border-top: 1px solid var(--line);
  background: rgba(10, 9, 8, .86);
  font-size: 12px; letter-spacing: 1px; color: var(--dim);
}

/* ---------- サムネイルのグリッチ ---------- */
/* .thumb / --img / 走査線の要素は windmill.js が付ける */

.thumb { position: relative; overflow: hidden; isolation: isolate; }

/* 画像がある場合だけ、色をずらした複製を重ねる */
.thumb::before, .thumb::after {
  content: ""; position: absolute; inset: 0; z-index: 2;
  background-image: var(--img); background-size: cover; background-position: center;
  mix-blend-mode: screen; opacity: 0; pointer-events: none;
}
.thumb::before {
  filter: hue-rotate(-38deg) saturate(2.4) brightness(1.1);
  animation: glitch-a 5.3s steps(1, end) infinite var(--glitch-delay, 0s);
}
.thumb::after {
  filter: hue-rotate(155deg) saturate(2.2) brightness(1.05);
  animation: glitch-b 7.1s steps(1, end) infinite var(--glitch-delay, 0s);
}

/* 走査線。画像のないプレースホルダにも掛かる */
/* CRT 風。横の走査線と縦の格子を重ね、四隅を軽く落として管面に見せる */
.thumb__scan {
  position: absolute; inset: 0; z-index: 3; pointer-events: none;
  background:
    repeating-linear-gradient(0deg, rgba(10, 9, 8, .3) 0 1px, rgba(10, 9, 8, 0) 1px 3px),
    repeating-linear-gradient(90deg, rgba(10, 9, 8, .3) 0 1px, rgba(10, 9, 8, 0) 1px 3px),
    radial-gradient(130% 130% at 50% 50%, rgba(10, 9, 8, 0) 52%, rgba(10, 9, 8, .5) 100%),
    linear-gradient(180deg, rgba(239, 231, 221, .06), rgba(10, 9, 8, .12));
  opacity: .6;
  animation: glitch-scan 6.7s linear infinite var(--glitch-delay, 0s);
}

/* 出現した瞬間だけ強く走らせる */
.rv.is-in .thumb__scan { animation: glitch-flash .42s steps(1, end) 1, glitch-scan 6.7s linear infinite .42s; }

@keyframes glitch-a {
  0%, 90%, 100% { opacity: 0; transform: none; clip-path: inset(0 0 100% 0); }
  91% { opacity: .9; transform: translate3d(-7px, 0, 0); clip-path: inset(10% 0 70% 0); }
  93% { opacity: .8; transform: translate3d(8px, 0, 0); clip-path: inset(54% 0 30% 0); }
  95% { opacity: .65; transform: translate3d(-4px, 1px, 0); clip-path: inset(76% 0 10% 0); }
  96% { opacity: 0; }
}
@keyframes glitch-b {
  0%, 82%, 100% { opacity: 0; transform: none; clip-path: inset(0 0 100% 0); }
  83% { opacity: .75; transform: translate3d(7px, 0, 0); clip-path: inset(24% 0 58% 0); }
  85% { opacity: .7; transform: translate3d(-9px, -1px, 0); clip-path: inset(62% 0 22% 0); }
  87% { opacity: .5; transform: translate3d(3px, 0, 0); clip-path: inset(4% 0 84% 0); }
  88% { opacity: 0; }
}
@keyframes glitch-scan {
  0% { background-position: 0 0, 0 0, 0 0, 0 0; }
  100% { background-position: 0 42px, 0 0, 0 0, 0 0; }
}
@keyframes glitch-flash {
  0% { opacity: .95; transform: translate3d(-6px, 0, 0); }
  30% { opacity: .35; transform: translate3d(5px, 0, 0); }
  60% { opacity: .8; transform: translate3d(-2px, 0, 0); }
  100% { opacity: .55; transform: none; }
}

/* ---------- 読み込み時の確認 ---------- */

.gate {
  position: fixed; inset: 0; z-index: 30;
  display: flex; align-items: center; justify-content: center;
  padding: var(--pad);
  background: rgba(10, 9, 8, .92);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
.gate[hidden] { display: none; }
.gate__box {
  width: min(460px, 100%);
  padding: 32px;
  border: 1px solid var(--line);
  background: rgba(10, 9, 8, .86);
}
.gate__label { font-size: 12px; letter-spacing: 3px; color: var(--blood); }
.gate__title {
  font-family: var(--f-dot);
  font-size: 24px; line-height: 32px; font-weight: 700;
  margin-top: 14px;
}
.gate__text {
  font-family: var(--f-jp);
  font-size: 12px; line-height: 24px; color: var(--mute);
  margin-top: 14px;
}
.gate__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }

@media (max-width: 800px) {
  .gate__box { padding: 22px; }
  .gate__title { font-size: 24px; }
}

/* ---------- 操作ボタン（音 / 自動送り） ---------- */

.controls { display: none; }
.js .controls {
  position: fixed; right: var(--pad); bottom: 20px; z-index: 4;
  display: flex; gap: 10px;
}
.ctl {
  display: flex; align-items: center; gap: 8px;
  padding: 9px 14px;
  border: 1px solid var(--line);
  background: rgba(10, 9, 8, .82);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  font-size: 12px; letter-spacing: 2px; color: var(--mute);
}
.ctl[hidden] { display: none; }
.ctl:hover, .ctl[aria-pressed="true"] { border-color: #3a2420; }
.ctl[aria-pressed="true"] { color: var(--ink); }
.ctl:disabled { opacity: .45; cursor: default; }
.ctl:disabled:hover { color: var(--mute); border-color: var(--line); }
.ctl__icon { font-size: 12px; color: var(--blood); }

/* ---------- メニュー（モバイル） ---------- */

.menu {
  position: fixed; inset: 0; z-index: 10;
  display: flex; flex-direction: column;
  padding: 18px;
  background: var(--bg);
  overflow: hidden;
}
.menu[hidden] { display: none; }
.menu__logo {
  position: absolute; left: 50%; top: 58%;
  transform: translate(-50%, -50%);
  width: 520px; height: 520px;
  pointer-events: none;
}
.menu__logo canvas { width: 100%; height: 100%; image-rendering: pixelated; opacity: .22; }
.menu__head {
  position: relative;
  display: flex; justify-content: space-between; align-items: center;
  padding-bottom: 56px;
  font-size: 12px; letter-spacing: 2px; color: var(--mute);
}
.menu__close { font-size: 12px; padding: 4px 0 4px 12px; }
.menu__list a {
  position: relative;
  display: flex; justify-content: space-between; align-items: baseline;
  padding: 26px 0;
  border-bottom: 1px solid var(--line);
}
.menu__jp { font-family: var(--f-pixel); font-size: 36px; line-height: 42px; font-weight: 700; }
.menu__en { font-size: 12px; letter-spacing: 2px; color: var(--dim); }
.menu__foot { position: relative; margin-top: auto; font-size: 12px; letter-spacing: 2px; color: var(--dim); }

/* ---------- 中間幅 ---------- */

@media (max-width: 1200px) {
  .home__title { font-size: 96px; line-height: 88px; }
}

@media (max-width: 1080px) {
  .work { grid-template-columns: minmax(0, 58%) minmax(0, 1fr); gap: 28px; padding: 32px 0; }
  .work__title { font-size: 36px; line-height: 44px; }
}

/* ---------- モバイル ---------- */

@media (max-width: 800px) {
  :root { --pad: 18px; --top: 18px; --title-fix: -5px; }

  .d-only { display: none; }
  .m-only { display: inline; }

  .stage__logo { opacity: .36; }
  .stage__vignette {
    background: radial-gradient(70% 50% at 50% 42%, rgba(10, 9, 8, .15), rgba(10, 9, 8, .88) 78%);
  }

  .bar { font-size: 12px; letter-spacing: 2px; background: rgba(10, 9, 8, .85); }
  .bar__nav { display: none; }
  .bar__menu { display: block; }

  .home__title { font-size: 60px; line-height: 56px; }
  .home__lead { font-size: 24px; line-height: 44px; margin-top: 24px; }
  .home__meta { gap: 16px; margin-top: 34px; font-size: 12px; letter-spacing: 2px; }

  .news { margin-top: 32px; }
  .news__label { padding-bottom: 10px; }
  .news__item { grid-template-columns: 1fr; gap: 4px; padding: 10px 0; }

  .sec-head { margin-bottom: 26px; }

  .works { padding: 80px var(--pad) 90px; }
  .work { display: block; padding: 22px 0; }
  .work__art { padding: 0; }
  .work__title { font-size: 24px; line-height: 32px; margin-top: 14px; }
  .work__meta { font-size: 12px; margin-top: 6px; }

  .designers { padding: 0 var(--pad) 90px; }
  .crew { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .crew__card { padding: 14px; }
  .crew__handle { margin-top: 12px; }
  .crew__role { margin-top: 5px; }

  .supporter { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 12px; }
  .supporter .crew__card { padding: 8px; }
  .supporter .crew__handle { margin-top: 8px; }
  .supporter .crew__role { margin-top: 3px; }

  .js .controls { bottom: 14px; gap: 8px; }
  .ctl { padding: 8px 12px; }


  .foot { padding: 16px var(--pad); }
}

@media (min-width: 801px) {
  .menu { display: none !important; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .ch, .rv { opacity: 1 !important; transform: none !important; transition: none !important; }
  .thumb::before, .thumb::after, .thumb__scan, .rv.is-in .thumb__scan { animation: none; }
  .thumb::before, .thumb::after { opacity: 0; }
  [data-auto] { display: none !important; } /* 音は動きではないので SOUND は残す */
  .ch.is-head::after { display: none; }
}