/* ============================================================
   NET/YOU prototype — motion layer
   v0 の site.css の上に重ねる。framer-motion の代わりに素の CSS/JS で動かす。
   JS が無効なときは .js が付かないので、全要素がそのまま表示される。
   ============================================================ */

:root {
  --m-ease: cubic-bezier(.2, .85, .2, 1);
  --m-cyan: #00e5ff;
  --m-pink: #ff2e9a;
  --m-yellow: #f7ff3d;
}

/* ---------- scroll reveal ---------- */
.js [data-reveal],
.js .auto-reveal {
  opacity: 0;
  transform: translateY(34px);
  transition:
    opacity .75s var(--m-ease),
    transform .75s var(--m-ease),
    filter .75s var(--m-ease);
  transition-delay: var(--m-delay, 0ms);
}
.js [data-reveal="blur"] {
  filter: blur(10px);
  transform: translateY(22px);
}
.js [data-reveal].is-in,
.js .auto-reveal.is-in {
  opacity: 1;
  transform: none;
  filter: none;
}

/* 曲の行は横からスライドイン */
.js .song-row.auto-reveal { transform: translateX(-28px); }
.js .song-row.auto-reveal.is-in { transform: none; }

/* ---------- 起動ログ（初回の読み込み・ページ遷移で共通） ---------- */
.term {
  position: fixed;
  inset: 0;
  z-index: 10000;
  background: #000;
  display: grid;
  align-content: center;
  justify-items: start;
  gap: 12px;
  padding: 0 12vw;
  font: 500 clamp(13px, 1.35vw, 18px)/1.7 "JetBrains Mono", ui-monospace, monospace;
  color: var(--m-cyan);
  pointer-events: none;
}
.term.is-opening { animation: term-open .11s linear both; }
@keyframes term-open { from { opacity: 0; } to { opacity: 1; } }
.term .ln {
  white-space: pre;
  max-width: 76vw;
  overflow: hidden;
  text-overflow: ellipsis;
  min-height: 1.7em;
}
.term .ln.p { color: var(--m-pink); }
.term .bar {
  width: min(420px, 60vw);
  height: 10px;
  border: 1px solid var(--m-cyan);
  padding: 2px;
}
.term .bar i {
  display: block;
  height: 100%;
  width: 0;
  background: var(--m-cyan);
  box-shadow: 0 0 12px var(--m-cyan);
}
/* 行き先の名前。シアンとマゼンタの複製を左右にずらして重ねる */
.term .big {
  position: relative;
  margin-top: 8px;
  max-width: 80vw;
  font: 400 clamp(30px, 5.4vw, 78px)/1.08 "Archivo Black", "Noto Sans JP", sans-serif;
  letter-spacing: -.02em;
  color: #fff;
  overflow-wrap: anywhere;
}
.term .big::before,
.term .big::after {
  content: attr(data-t);
  position: absolute;
  inset: 0;
  mix-blend-mode: screen;
}
.term .big::before { color: var(--m-cyan); transform: translateX(-.06em); }
.term .big::after  { color: var(--m-pink); transform: translateX(.06em); }
.term .big.is-in { animation: term-big .24s steps(4, end) both; }
@keyframes term-big {
  0%   { opacity: 0; transform: translateX(-6px) skewX(-8deg); }
  40%  { opacity: 1; transform: translateX(5px) skewX(6deg); }
  100% { opacity: 1; transform: none; }
}
/* 画面が中央の一本線に閉じて、下のページが見える */
.term.is-closing { animation: term-close .38s cubic-bezier(.7, 0, .3, 1) forwards; }
@keyframes term-close {
  0%   { clip-path: inset(0 0 0 0); }
  70%  { clip-path: inset(49.6% 0 49.6% 0); }
  100% { clip-path: inset(49.6% 50% 49.6% 50%); }
}

/* 遷移先のページが描画されてから起動ログを重ねるまでの一瞬、中身が見えてしまうのを防ぐ。
   head の先頭で term-arriving が付く。JS が止まっても3秒で必ず外れる */
html.term-arriving body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: #000;
  animation: term-safety 0s linear 3s forwards;
}
@keyframes term-safety { to { visibility: hidden; } }

/* ---------- ヒーローの説明文の幅と、軌道のグラフィックの位置 ----------
   site.css は軌道のグラフィック（.hero-art）に縦位置を指定しておらず、左の文章の下端に置かれていた。
   そのため文章の量しだいで下にずれ、「103 SONGS INDEXED」が「非公認ファンサイト」の表記に重なっていた。
   ヒーローの縦の中央に固定する */
.hero-lede { max-width: 30em; }
.hero-art { top: calc(50% - 200px); }
@media (max-width: 800px) {
  .hero-art { top: calc(50% - 170px); }
}

/* ---------- 通し番号を外したぶんのレイアウト調整 ----------
   番号は tools/convert.cjs で HTML から消している。番号のために取っていた列を詰める */
.info-panel { grid-template-columns: 1fr; }
.song-row { grid-template-columns: minmax(230px, 1.5fr) 70px 1.2fr 1.3fr 35px; }
@media (max-width: 800px) {
  .song-row { grid-template-columns: 1fr 45px 22px; }
  /* site.css はスマホで年を3列目、矢印を4列目に置いていた（1列目が番号だった）。1列ずつ左へ詰める */
  .song-row .song-main { grid-column: 1; }
  .song-row .song-year { grid-area: 1 / 2; }
  .song-row .row-arrow { grid-area: 1 / 3; }
  .song-row .song-credit, .song-row .song-role { grid-column: 1; }
  /* site.css はスマホで「2番目」を隠していた（元は SCROLL TO EXPLORE）。
     「01 / 07」を消すと2番目が「非公認ファンサイト」になって隠れてしまうので、隠す対象を付け替える */
  .hero-meta span:nth-child(2) { display: inline; }
  .hero-meta span:first-child { display: none; }
}

/* ---------- 見出しのグリッチ用の複製は選択・コピーさせない ----------
   見た目は1つでも同じ文字が3重に重なっているので、そのままだとコピーすると3回貼り付けられる */
.glitch-channel { -webkit-user-select: none; user-select: none; }
/* 見出しの上の余白（h1 の margin-top）は、本体では外側の箱と相殺されて消えるが、
   浮かせて重ねている複製では消えずに残り、複製だけが 25px 下にずれていた（2026-10-09 に修正）。
   1行の見出しでは下に影が付いたように見えるだけだが、狭い画面で折り返すと文字がばらばらに重なる。
   複製の上の余白を消して、本体とぴったり重ねる。色ずれは左右の数 px だけ（fx.css の fx-rgb-*） */
.glitch-channel > h1 { margin-top: 0; }

/* ---------- periodic glitch (site.css だとホバー時だけだった) ---------- */
.glitch-wrap.is-glitching .glitch-channel {
  animation: .38s steps(2, end) glitch-burst;
}
.glitch-wrap.is-glitching .glitch-main {
  animation: m-shake .38s steps(2, end);
}
@keyframes m-shake {
  0%, 100% { transform: none; }
  30% { transform: translateX(5px) skewX(-3deg); }
  65% { transform: translateX(-4px) skewX(2deg); }
}

/* ---------- cursor-reactive hero ---------- */
/* site.css の光は透明度13%で、ほとんど見えていなかった */
.cursor-hero:before {
  background: radial-gradient(circle,
    rgba(0, 229, 255, .34) 0%,
    rgba(255, 46, 154, .14) 38%,
    transparent 68%) !important;
  transition: transform .09s linear !important;
}
.hero-art {
  transition: transform .35s var(--m-ease);
  will-change: transform;
}

/* ---------- text scramble ---------- */
.is-scrambling { color: var(--m-cyan) !important; }

/* ---------- songs filter (React の代わり) ---------- */
.song-row[hidden] { display: none !important; }
.m-empty {
  padding: 42px 0;
  font: 500 13px/1.9 "Noto Sans JP", sans-serif;
  color: #b8b8b8;
  border-bottom: 1px solid rgba(255, 255, 255, .08);
}
.m-empty b { color: var(--m-cyan); font-weight: 500; }

/* ---------- mobile: 長い見出しがはみ出さないように ---------- */
/* site.css は日本語の見出しに word-break: keep-all を指定している。日本語で keep-all は
   「文字の間で一切改行しない」ので、狭い画面では行が折り返せず、はみ出した分が隠れて
   見出しが途中で切れる（About の「ファンがつくる索引。」が「ファンがつく」になっていた）。
   スマホ幅では文節単位の改行（auto-phrase）に切り替える。未対応ブラウザは normal に戻る。 */
@media (max-width: 800px) {
  .jp-heading,
  .page-intro h1, .page-intro h1 span,
  .help-copy h2, .help-section h2,
  .about-grid h2 {
    white-space: normal !important;
    word-break: normal !important;
    word-break: auto-phrase !important;
    overflow-wrap: break-word !important;
  }
}

/* ---------- reduced motion: 全部止めて、全部見せる ---------- */
@media (prefers-reduced-motion: reduce) {
  .js [data-reveal], .js .auto-reveal {
    opacity: 1 !important; transform: none !important; filter: none !important; transition: none !important;
  }
  .term { display: none !important; }
  html.term-arriving body::after { display: none !important; }
  .glitch-wrap.is-glitching .glitch-channel, .glitch-wrap.is-glitching .glitch-main { animation: none !important; }
}