/* ============================================================
   人狼 JINRO — 和風書道 × サイバーパンク
   ============================================================ */

:root{
  --c-void:#0A0A0A;
  --c-ink:#141414;
  --c-blood:#8B0000;
  --c-blood-l:#C62828;
  --c-neon:#00E5FF;
  --c-gold:#FFD700;
  --c-white:#F5F5F5;
  --c-silver:#8A8A8A;

  --f-brush:'Yuji Syuku', 'Klee One', 'Hiragino Mincho ProN', 'Yu Mincho', 'YuMincho', 'Noto Serif JP', serif;
  --f-mincho:'Klee One', 'Sawarabi Mincho', 'Hiragino Mincho ProN', 'Yu Mincho', 'YuMincho', 'Noto Serif JP', serif;
  --f-en:'Orbitron', 'Hiragino Mincho ProN', serif;

  --sec-h:220vh; /* 1セクションのスクロール量 */
}

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

html{
  background:var(--c-void);
  scroll-behavior:auto;
  -webkit-text-size-adjust:100%;
}

body{
  margin:0;
  background:var(--c-void);
  color:var(--c-white);
  font-family:var(--f-mincho);
  font-weight:400;
  overflow-x:hidden;
  overscroll-behavior-y:none;
}

body.is-loading{ overflow:hidden; height:100vh; }

img,canvas,svg{ display:block; max-width:100%; }

::selection{ background:rgba(198,40,40,.55); color:#fff; }

/* ============ スクロールバー ============ */
::-webkit-scrollbar{ width:7px; }
::-webkit-scrollbar-track{ background:#050505; }
::-webkit-scrollbar-thumb{
  background:linear-gradient(180deg,var(--c-blood),var(--c-neon));
  border-radius:4px;
}

/* ============================================================
   LOADING — 墨が滲む
   ============================================================ */
#loader{
  position:fixed; inset:0; z-index:9999;
  background:radial-gradient(circle at 50% 45%, #101010 0%, #050505 60%, #000 100%);
  display:flex; align-items:center; justify-content:center;
  transition:opacity 1s ease, visibility 1s ease;
}
#loader.done{ opacity:0; visibility:hidden; pointer-events:none; }

.loader-inner{ text-align:center; width:min(84vw,420px); }

.ink-stack{
  position:relative;
  width:200px; height:200px;
  margin:0 auto 34px;
  display:grid; place-items:center;
}
.ink-blot{
  position:absolute; inset:0; margin:auto;
  border-radius:50%;
  background:radial-gradient(circle, rgba(20,20,20,.95) 0%, rgba(139,0,0,.42) 45%, rgba(0,0,0,0) 72%);
  filter:blur(14px);
  animation:inkBleed 3.4s ease-in-out infinite;
}
.ink-blot--1{ width:190px; height:190px; animation-delay:0s; }
.ink-blot--2{ width:140px; height:140px; animation-delay:.5s;
  background:radial-gradient(circle, rgba(0,229,255,.28) 0%, rgba(0,0,0,0) 70%); }
.ink-blot--3{ width:105px; height:105px; animation-delay:1s;
  background:radial-gradient(circle, rgba(255,215,0,.22) 0%, rgba(0,0,0,0) 70%); }

@keyframes inkBleed{
  0%   { transform:scale(.55) rotate(0deg);   opacity:.25; filter:blur(20px); }
  45%  { transform:scale(1.06) rotate(9deg);  opacity:.95; filter:blur(9px); }
  100% { transform:scale(.55) rotate(0deg);   opacity:.25; filter:blur(20px); }
}

.loader-kanji{
  position:relative; z-index:2;
  font-family:var(--f-brush);
  font-size:76px; line-height:1;
  color:var(--c-white);
  text-shadow:0 0 18px rgba(198,40,40,.85), 0 0 44px rgba(0,229,255,.35);
  animation:kanjiBreath 3.4s ease-in-out infinite;
}
@keyframes kanjiBreath{
  0%,100%{ opacity:.5; filter:blur(2.2px); transform:scale(.97); }
  50%    { opacity:1;  filter:blur(0);     transform:scale(1.03); }
}

.loader-bar{
  width:100%; height:2px;
  background:rgba(245,245,245,.12);
  overflow:hidden;
}
#loader-fill{
  display:block; width:0%; height:100%;
  background:linear-gradient(90deg,var(--c-blood),var(--c-blood-l) 45%,var(--c-neon));
  box-shadow:0 0 12px rgba(0,229,255,.7);
  transition:width .25s ease-out;
}
.loader-label{
  margin:16px 0 4px;
  font-family:var(--f-en);
  font-size:13px; letter-spacing:.22em;
  color:var(--c-silver);
}
.loader-unit{ margin-left:2px; }
.loader-sub{
  margin:0;
  font-family:var(--f-mincho);
  font-size:12px; letter-spacing:.42em;
  color:rgba(138,138,138,.75);
}

/* ============================================================
   STAGE — 固定背景ステージ
   ============================================================ */
#stage{
  position:fixed; inset:0; z-index:0;
  background:var(--c-void);
  pointer-events:none;
  overflow:hidden;
}

#frame-layer{
  position:absolute; inset:0;
  will-change:transform,opacity,filter;
  transform-origin:50% 42%;
}
#frame-canvas{
  width:100%; height:100%;
  object-fit:cover;
}

/* ── ② ネオンブルーの格子 ───────────────── */
#grid-layer{
  position:absolute; inset:-20%;
  opacity:0;
  background-image:
    linear-gradient(rgba(0,229,255,.30) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,229,255,.30) 1px, transparent 1px);
  background-size:56px 56px;
  transform:perspective(620px) rotateX(58deg) translateY(-6%) scale(1.5);
  mask-image:radial-gradient(ellipse 62% 55% at 50% 48%, #000 25%, transparent 78%);
  -webkit-mask-image:radial-gradient(ellipse 62% 55% at 50% 48%, #000 25%, transparent 78%);
  will-change:opacity,transform;
}

/* ── 走査線 ───────────────── */
#scanline-layer{
  position:absolute; inset:0;
  opacity:0;
  background:repeating-linear-gradient(180deg,
    rgba(0,229,255,.055) 0px, rgba(0,229,255,.055) 1px,
    transparent 1px, transparent 4px);
  mix-blend-mode:screen;
  will-change:opacity;
}

/* ── ② 赤いグリッチ ───────────────── */
#glitch-layer{
  position:absolute; inset:0;
  opacity:0;
  mix-blend-mode:screen;
  will-change:opacity;
}
.glitch-bar{
  position:absolute; left:-10%; width:120%;
  top:var(--t);
  height:calc(4px + 14 * 1px);
  background:linear-gradient(90deg,
    transparent, rgba(198,40,40,.9) 18%, rgba(255,255,255,.55) 42%,
    rgba(0,229,255,.7) 62%, transparent);
  filter:blur(.6px);
  animation:glitchSlide 1.9s steps(2,end) infinite;
  animation-delay:var(--d);
}
@keyframes glitchSlide{
  0%   { transform:translate3d(-14%,0,0) scaleY(.3); opacity:0; }
  6%   { transform:translate3d(4%,0,0) scaleY(1);    opacity:1; }
  11%  { transform:translate3d(-6%,0,0) scaleY(.4);  opacity:.7; }
  16%  { transform:translate3d(9%,0,0) scaleY(1.4);  opacity:.9; }
  22%  { transform:translate3d(0,0,0) scaleY(.2);    opacity:0; }
  100% { transform:translate3d(0,0,0) scaleY(.2);    opacity:0; }
}

/* ── ③ ストロボ（赤／青） ───────────────── */
#strobe-red,#strobe-blue{
  position:absolute; inset:0;
  opacity:0;
  mix-blend-mode:screen;
  will-change:opacity;
}
#strobe-red{ background:radial-gradient(circle at 50% 44%, rgba(198,40,40,.85), rgba(139,0,0,.25) 55%, transparent 78%); }
#strobe-blue{ background:radial-gradient(circle at 50% 44%, rgba(0,229,255,.72), rgba(0,120,180,.22) 55%, transparent 78%); }

/* ── ④ 墨の筆文字 ───────────────── */
#brush-layer{
  position:absolute; inset:0;
  display:grid; place-items:center;
  opacity:0;
  will-change:opacity,transform;
}
#brush-svg{
  width:min(64vmin,540px);
  height:auto;
  filter:drop-shadow(0 0 26px rgba(255,215,0,.28)) drop-shadow(0 0 60px rgba(0,0,0,.9));
}
#brush-svg .bs{
  stroke-dasharray:var(--len,400);
  stroke-dashoffset:var(--len,400);
}
.brush-seal{
  position:absolute;
  right:calc(50% - min(32vmin,270px) + 4px);
  bottom:calc(50% - min(32vmin,270px) + 8px);
  font-family:var(--f-brush);
  font-size:clamp(13px,2.4vmin,20px);
  writing-mode:vertical-rl;
  letter-spacing:.16em;
  color:#fff;
  background:linear-gradient(160deg,var(--c-blood-l),var(--c-blood));
  padding:.5em .34em;
  border-radius:3px;
  box-shadow:0 0 18px rgba(198,40,40,.6);
  opacity:0;
  transition:opacity .7s ease;
}
#brush-layer.seal-on .brush-seal{ opacity:.95; }

/* ── ⑤ サイバー回路 ───────────────── */
#circuit-layer{
  position:absolute; inset:0;
  opacity:0;
  will-change:opacity;
}
#circuit-layer svg{ width:100%; height:100%; }
#circuit-layer .cw{
  stroke-dasharray:6 10;
  filter:drop-shadow(0 0 4px rgba(0,229,255,.85));
  animation:circuitFlow 5.5s linear infinite;
  opacity:.55;
}
@keyframes circuitFlow{ to{ stroke-dashoffset:-320; } }
#circuit-layer .cn{
  filter:drop-shadow(0 0 8px rgba(0,229,255,1));
  animation:nodePulse 2.6s ease-in-out infinite;
}
#circuit-layer .cn:nth-child(2n){ animation-delay:.7s; }
#circuit-layer .cn:nth-child(3n){ animation-delay:1.4s; }
@keyframes nodePulse{
  0%,100%{ opacity:.25; r:2; }
  50%    { opacity:1;   r:4; }
}

/* ── パーティクル ───────────────── */
#fx-canvas{
  position:absolute; inset:0;
  width:100%; height:100%;
}

/* ── ビネット ───────────────── */
#vignette{
  position:absolute; inset:0;
  background:
    radial-gradient(ellipse 78% 70% at 50% 45%, transparent 38%, rgba(0,0,0,.55) 78%, rgba(0,0,0,.88) 100%),
    linear-gradient(180deg, rgba(0,0,0,.6) 0%, transparent 22%, transparent 68%, rgba(0,0,0,.82) 100%);
}

/* ============================================================
   PROGRESS NAV
   ============================================================ */
#progress-nav{
  position:fixed;
  right:clamp(14px,2.4vw,34px);
  top:50%; transform:translateY(-50%);
  z-index:60;
  opacity:0;
  transition:opacity .8s ease;
}
#progress-nav.on{ opacity:1; }

#progress-nav ol{
  list-style:none; margin:0; padding:0;
  display:flex; flex-direction:column; gap:22px;
}
#progress-nav li{
  display:flex; align-items:center; gap:10px;
  flex-direction:row-reverse;
  cursor:pointer;
  pointer-events:auto;
}
#progress-nav .dot{
  width:7px; height:7px; border-radius:50%;
  background:rgba(245,245,245,.22);
  box-shadow:0 0 0 0 rgba(198,40,40,0);
  transition:background .45s ease, box-shadow .45s ease, transform .45s ease;
  flex:0 0 auto;
}
#progress-nav .lbl{
  font-family:var(--f-mincho);
  font-size:11px; letter-spacing:.2em;
  color:rgba(138,138,138,.5);
  white-space:nowrap;
  opacity:0; transform:translateX(6px);
  transition:opacity .45s ease, transform .45s ease, color .45s ease;
}
#progress-nav li:hover .lbl{ opacity:1; transform:translateX(0); color:var(--c-white); }
#progress-nav li.active .dot{
  background:var(--c-blood-l);
  box-shadow:0 0 0 4px rgba(198,40,40,.18), 0 0 14px rgba(198,40,40,.9);
  transform:scale(1.35);
}
#progress-nav li.active .lbl{ opacity:1; transform:translateX(0); color:var(--c-white); }

#progress-nav .rail{
  position:absolute; right:3px; top:-14px; bottom:-14px;
  width:1px; background:rgba(245,245,245,.1);
  z-index:-1;
}
#rail-fill{
  display:block; width:100%; height:0%;
  background:linear-gradient(180deg,var(--c-blood-l),var(--c-neon));
  box-shadow:0 0 8px rgba(0,229,255,.6);
}

/* ============================================================
   TRACK / SECTIONS
   ============================================================ */
#track{ position:relative; z-index:10; }

.sec{ height:var(--sec-h); position:relative; }

.sticky{
  position:sticky; top:0;
  height:100vh; height:100svh;
  display:grid; place-items:center;
  overflow:hidden;
}

.copy{
  width:min(92vw,1180px);
  padding:0 clamp(16px,4vw,48px);
  will-change:transform,opacity;
}
.copy--center{ text-align:center; }
.copy--left{ text-align:left; }
.copy--right{ text-align:right; }

/* ── アニメーション対象の初期状態 ── */
[data-anim]{
  opacity:0;
  transition:opacity .8s ease, transform .8s ease, filter .8s ease;
  will-change:opacity,transform,filter;
}

/* ── 見出し ───────────────── */
.eyebrow{
  font-family:var(--f-mincho);
  font-size:clamp(10px,1.5vw,13px);
  letter-spacing:.44em;
  color:var(--c-silver);
  margin:0 0 clamp(14px,2.4vh,26px);
  text-transform:none;
}
.eyebrow .en{
  font-family:var(--f-en);
  font-size:.86em; letter-spacing:.3em;
  color:rgba(0,229,255,.72);
  margin-left:.6em;
}

.title-main{
  font-family:var(--f-brush);
  font-size:clamp(88px,26vw,300px);
  line-height:.92;
  margin:0;
  letter-spacing:.06em;
  color:var(--c-white);
  text-shadow:
    0 0 12px rgba(245,245,245,.4),
    0 0 34px rgba(198,40,40,.75),
    0 0 78px rgba(139,0,0,.6),
    0 0 140px rgba(0,229,255,.24);
}

.sub-lead{
  font-family:var(--f-mincho);
  font-size:clamp(14px,2.6vw,26px);
  letter-spacing:.3em;
  margin:clamp(18px,3vh,34px) 0 0;
  color:rgba(245,245,245,.9);
  text-shadow:0 0 16px rgba(0,229,255,.4);
}

.title-sec{
  font-family:var(--f-brush);
  font-size:clamp(30px,6.4vw,88px);
  line-height:1.34;
  margin:0;
  letter-spacing:.1em;
  color:var(--c-white);
  text-shadow:
    0 0 10px rgba(245,245,245,.35),
    0 0 30px rgba(198,40,40,.6),
    0 0 70px rgba(0,229,255,.28);
}
.title-sec--big{ font-size:clamp(34px,7.6vw,104px); }

.title-final{
  font-family:var(--f-brush);
  font-size:clamp(28px,6vw,80px);
  line-height:1.3;
  margin:0;
  letter-spacing:.12em;
  color:var(--c-white);
  text-shadow:
    0 0 10px rgba(245,245,245,.4),
    0 0 30px rgba(255,215,0,.42),
    0 0 66px rgba(0,229,255,.34);
}

.body-text{
  font-family:var(--f-mincho);
  font-size:clamp(13px,1.9vw,20px);
  line-height:2.15;
  letter-spacing:.14em;
  color:rgba(245,245,245,.8);
  margin:clamp(20px,3.4vh,38px) 0 0;
  text-shadow:0 2px 14px rgba(0,0,0,.9);
}

/* ── グリッチテキスト（②） ───────────────── */
.glitch-text{ position:relative; }
.glitch-text::before,
.glitch-text::after{
  content:attr(data-text);
  position:absolute; inset:0;
  pointer-events:none;
  opacity:0;
}
.sec.glitching .glitch-text::before{
  color:var(--c-blood-l);
  text-shadow:none;
  animation:gt1 .42s steps(2,end) infinite;
}
.sec.glitching .glitch-text::after{
  color:var(--c-neon);
  text-shadow:none;
  animation:gt2 .38s steps(2,end) infinite;
}
@keyframes gt1{
  0%{ opacity:0; transform:translate(0,0); clip-path:inset(0 0 90% 0); }
  20%{ opacity:.85; transform:translate(-4px,-2px); clip-path:inset(10% 0 62% 0); }
  40%{ opacity:.6; transform:translate(5px,1px); clip-path:inset(48% 0 22% 0); }
  60%{ opacity:.8; transform:translate(-3px,2px); clip-path:inset(70% 0 6% 0); }
  80%,100%{ opacity:0; transform:translate(0,0); }
}
@keyframes gt2{
  0%{ opacity:0; transform:translate(0,0); clip-path:inset(60% 0 20% 0); }
  25%{ opacity:.75; transform:translate(4px,2px); clip-path:inset(24% 0 52% 0); }
  50%{ opacity:.55; transform:translate(-5px,-1px); clip-path:inset(66% 0 10% 0); }
  75%{ opacity:.7; transform:translate(3px,-2px); clip-path:inset(4% 0 78% 0); }
  90%,100%{ opacity:0; transform:translate(0,0); }
}

/* ── スクロールヒント ───────────────── */
.scroll-hint{
  margin-top:clamp(34px,6vh,72px);
  display:inline-flex; flex-direction:column; align-items:center; gap:10px;
}
.scroll-hint span{
  font-family:var(--f-en);
  font-size:10px; letter-spacing:.4em;
  color:rgba(138,138,138,.85);
}
.scroll-hint i{
  display:block; width:1px; height:56px;
  background:linear-gradient(180deg,rgba(198,40,40,.95),rgba(0,229,255,0));
  animation:hintPulse 2.4s ease-in-out infinite;
  transform-origin:top;
}
@keyframes hintPulse{
  0%,100%{ transform:scaleY(.25); opacity:.35; }
  50%    { transform:scaleY(1);   opacity:1; }
}

/* ============================================================
   CTA
   ============================================================ */
.cta{
  position:relative;
  display:inline-flex; align-items:center; justify-content:center;
  margin-top:clamp(32px,5.2vh,58px);
  padding:clamp(15px,2.2vh,22px) clamp(28px,5vw,62px);
  font-family:var(--f-mincho);
  font-size:clamp(14px,2.1vw,21px);
  letter-spacing:.24em;
  color:var(--c-white);
  text-decoration:none;
  border:1px solid rgba(198,40,40,.75);
  border-radius:2px;
  overflow:hidden;
  isolation:isolate;
  background:rgba(10,10,10,.55);
  backdrop-filter:blur(3px);
  box-shadow:0 0 22px rgba(198,40,40,.42), inset 0 0 18px rgba(139,0,0,.3);
  transition:color .5s ease, border-color .5s ease, box-shadow .5s ease, transform .35s ease, letter-spacing .5s ease;
  animation:ctaGlow 3s ease-in-out infinite;
}
@keyframes ctaGlow{
  0%,100%{ box-shadow:0 0 18px rgba(198,40,40,.35), inset 0 0 14px rgba(139,0,0,.26); }
  50%    { box-shadow:0 0 40px rgba(198,40,40,.8), inset 0 0 26px rgba(198,40,40,.42); }
}
.cta-bg{
  position:absolute; inset:0; z-index:-1;
  background:linear-gradient(110deg,var(--c-blood) 0%,var(--c-blood-l) 40%,#0077A8 72%,var(--c-neon) 100%);
  opacity:0;
  transform:translateX(-24%) skewX(-8deg) scaleX(1.35);
  transition:opacity .55s ease, transform .55s cubic-bezier(.2,.9,.2,1);
}
.cta-label{ position:relative; z-index:1; white-space:nowrap; }

.cta:hover,.cta:focus-visible{
  color:#fff;
  border-color:rgba(0,229,255,.9);
  letter-spacing:.3em;
  transform:translateY(-3px);
  box-shadow:0 0 46px rgba(0,229,255,.7), 0 0 90px rgba(198,40,40,.45), inset 0 0 26px rgba(0,229,255,.3);
  animation:none;
  outline:none;
}
.cta:hover .cta-bg,.cta:focus-visible .cta-bg{
  opacity:.92;
  transform:translateX(0) skewX(0) scaleX(1);
}
.cta:active{ transform:translateY(-1px) scale(.985); }

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer{
  margin-top:clamp(40px,7vh,86px);
  padding-top:clamp(18px,3vh,28px);
  border-top:1px solid rgba(245,245,245,.09);
}
.footer-link-row{ margin:0 0 10px; }
.footer-link-row a{
  font-family:var(--f-en);
  font-size:clamp(10px,1.4vw,13px);
  letter-spacing:.22em;
  color:rgba(0,229,255,.8);
  text-decoration:none;
  border-bottom:1px solid rgba(0,229,255,.28);
  padding-bottom:2px;
  transition:color .35s ease, border-color .35s ease, text-shadow .35s ease;
}
.footer-link-row a:hover{
  color:var(--c-gold);
  border-color:rgba(255,215,0,.6);
  text-shadow:0 0 14px rgba(255,215,0,.7);
}
.copyright{
  margin:0;
  font-family:var(--f-mincho);
  font-size:clamp(9px,1.2vw,11px);
  letter-spacing:.22em;
  color:rgba(138,138,138,.6);
}
.copyright .en{ font-family:var(--f-en); letter-spacing:.16em; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:900px){
  :root{ --sec-h:190vh; }
  #grid-layer{ background-size:42px 42px; }
  #progress-nav .lbl{ display:none; }
}

@media (max-width:640px){
  :root{ --sec-h:180vh; }

  .copy--left,.copy--right{ text-align:center; }

  /* タイトル「人狼」を縦組に */
  .title-main{
    writing-mode:vertical-rl;
    text-orientation:upright;
    margin:0 auto;
    font-size:clamp(76px,23vw,150px);
    line-height:1;
    letter-spacing:.08em;
  }
  .sub-lead{
    font-size:clamp(12px,3.6vw,17px);
    letter-spacing:.24em;
  }
  .title-sec{ font-size:clamp(24px,7.4vw,42px); line-height:1.5; letter-spacing:.08em; }
  .title-sec--big{ font-size:clamp(26px,8.4vw,46px); }
  .title-final{ font-size:clamp(23px,7vw,40px); line-height:1.5; }
  .body-text{ font-size:clamp(12px,3.4vw,15px); line-height:2; letter-spacing:.1em; }
  .eyebrow{ letter-spacing:.34em; }
  .cta{ letter-spacing:.16em; padding:15px 24px; }
  .cta-label{ white-space:normal; }
  #progress-nav{ right:9px; }
  #progress-nav ol{ gap:16px; }
  .brush-seal{ right:6vw; bottom:14vh; }
}

@media (max-height:520px) and (orientation:landscape){
  :root{ --sec-h:260vh; }
  .title-main{ font-size:clamp(56px,14vh,110px); }
  .scroll-hint i{ height:32px; }
}

/* ============ アクセシビリティ ============ */
@media (prefers-reduced-motion:reduce){
  .ink-blot,.loader-kanji,.glitch-bar,.scroll-hint i,.cta,
  #circuit-layer .cw,#circuit-layer .cn{ animation:none !important; }
  [data-anim]{ transition-duration:.25s; }
  #glitch-layer,#strobe-red,#strobe-blue{ display:none; }
}

.cta:focus-visible,#progress-nav li:focus-visible,.footer-link-row a:focus-visible{
  outline:2px solid var(--c-neon);
  outline-offset:4px;
}