/* ────────────────────────────────────────────
   B·Tr · Fluid Mask (liquid curtain transition)
   波打つ液体カーテンが覆う→差し替え→引く遷移
   Pure CSS + JS、外部依存ゼロ、WebGL なし
   ──────────────────────────────────────────── */

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:where(html,body){line-break:strict;word-break:normal;overflow-wrap:break-word}
:where(h1,h2,h3,h4){text-wrap:balance}
:where(p,li){text-wrap:pretty}

:root{
  --bg:#f4f3ee;
  --ink:#0a0a0a;
  --muted:#6a6a6a;
  --line:#d8d6cc;
  --paper:#fff;
  --hi:#ff2d55;
  --alt:#0066ff;
  --font:'DM Sans','Noto Sans JP',sans-serif;
  --mono:'JetBrains Mono',monospace;
  --fm-stage-h:min(78vh,620px);
}

html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--ink);font-family:var(--font);font-weight:400;line-height:1.65;min-height:100vh}
a{color:inherit;text-decoration:none}

/* ─── HEADER ─── */
header.site{
  position:sticky;top:0;z-index:50;background:var(--bg);
  padding:1rem clamp(1.2rem,4vw,3rem);
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  border-bottom:1px solid var(--ink);
}
.back{font-family:var(--mono);font-size:.78rem;letter-spacing:.18em;display:inline-flex;align-items:center;gap:.6em}
.back .arrow{transition:transform .25s}
.back:hover .arrow{transform:translateX(-.3em)}
.cell-marker{font-family:var(--mono);font-size:.78rem;letter-spacing:.22em;color:var(--hi)}

/* ────────────────────────────────────────────
   COMPONENT: .fluid
   ──────────────────────────────────────────── */
.fluid{max-width:1200px;margin:clamp(1.5rem,4vw,3rem) auto 0;padding:0 clamp(1.2rem,4vw,3rem)}

.fm-stage{
  position:relative;height:var(--fm-stage-h);
  border:1px solid var(--ink);overflow:hidden;
}
.fm-panel{
  position:absolute;inset:0;
  display:none;flex-direction:column;align-items:flex-start;justify-content:flex-end;
  padding:clamp(2rem,5vw,4rem);
  color:#fff;overflow:hidden;
}
.fm-panel.is-active{display:flex}

/* 各スライドの内容を簡易実装した背景 */
.fm-art{position:absolute;inset:0;z-index:0;overflow:hidden}
.fm-art::after{content:"";position:absolute;inset:0;z-index:3;background:linear-gradient(to top,rgba(0,0,0,.5),transparent 58%);pointer-events:none}

/* ① Tidal Drift — 引き波で現れる砂紋 */
.fm-p1 .fm-art{background:linear-gradient(160deg,#2a73b8,#06243f)}
.fm-p1 .fm-art::before{
  content:"";position:absolute;inset:-10%;z-index:1;
  background:repeating-linear-gradient(7deg,rgba(255,255,255,.12) 0 2px,transparent 2px 17px);
  background-size:220% 100%;
  animation:tide-drift 9s linear infinite, tide-pulse 5.5s ease-in-out infinite;
}
@keyframes tide-drift{to{background-position:220% 0}}
@keyframes tide-pulse{0%,100%{opacity:.2}45%{opacity:.65}}

/* ② Ember Fields — 夕暮れの草地・逆光（低い太陽 + 光芒 + 揺れる草）+ グレイン */
.fm-p2 .fm-art{background:linear-gradient(168deg,#ff9a5b 0%,#ff4d68 38%,#6a1330 100%)}
.fm-ember-sun,.fm-ember-rays,.fm-ember-grain{position:absolute;z-index:1}
.fm-ember-sun{
  inset:0;
  background:radial-gradient(circle at 62% 56%,rgba(255,236,188,.98),rgba(255,196,140,.34) 22%,transparent 46%);
  animation:ember-sun 4.5s ease-in-out infinite;
}
@keyframes ember-sun{0%,100%{opacity:.74;transform:scale(1)}50%{opacity:1;transform:scale(1.07)}}
.fm-ember-rays{
  inset:0;transform-origin:62% 56%;mix-blend-mode:screen;
  background:repeating-conic-gradient(from 0deg at 62% 56%,rgba(255,232,188,.16) 0 2.5deg,transparent 2.5deg 11deg);
  -webkit-mask:radial-gradient(circle at 62% 56%,#000 5%,transparent 55%);
          mask:radial-gradient(circle at 62% 56%,#000 5%,transparent 55%);
  animation:ember-rays 26s linear infinite;
}
@keyframes ember-rays{to{transform:rotate(1turn)}}
/* 逆光に沈む草原のシルエット（JS が path を生成、風に揺れる） */
.fm-grass{position:absolute;left:0;right:0;bottom:0;width:100%;height:46%;z-index:2;display:block}
.fm-grass path{
  fill:#220812;
  transform-box:fill-box;transform-origin:center bottom;
  animation:grass-sway ease-in-out infinite;
}
@keyframes grass-sway{0%,100%{transform:rotate(-2.4deg)}50%{transform:rotate(2.4deg)}}
.fm-ember-grain{
  inset:-50%;opacity:.3;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='150'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:ember-grain .8s steps(5) infinite;
}
@keyframes ember-grain{
  0%{transform:translate(0,0)}20%{transform:translate(-3%,2%)}40%{transform:translate(2%,-3%)}
  60%{transform:translate(-2%,-2%)}80%{transform:translate(3%,1%)}100%{transform:translate(0,0)}
}

/* ③ Moss Protocol — canvas 粒子（JS）。背景はグラデのみ */
.fm-p3 .fm-art{background:linear-gradient(160deg,#1c7a52,#06301d)}
.fm-canvas{position:absolute;inset:0;z-index:1;width:100%;height:100%}

/* ④ Noct Suite — 光の筋 + 都市スカイライン */
.fm-p4 .fm-art{background:linear-gradient(160deg,#1a1a2e,#070710)}
.fm-p4 .fm-art::before{
  content:"";position:absolute;inset:0;z-index:1;
  background:repeating-linear-gradient(115deg,
    rgba(120,180,255,0) 0 40px,rgba(120,180,255,.12) 42px 44px,rgba(120,180,255,0) 46px 92px);
  background-size:220% 100%;
  animation:noct-streak 7s linear infinite;
}
@keyframes noct-streak{to{background-position:220% 0}}
.fm-sky{position:absolute;left:0;right:0;bottom:0;width:100%;height:56%;z-index:2}
.fm-sky-line{
  fill:rgba(159,208,255,.05);stroke:#9fd0ff;stroke-width:2.5;
  filter:drop-shadow(0 0 7px rgba(120,180,255,.9));
  stroke-dasharray:4200;stroke-dashoffset:4200;
  animation:noct-draw 7s ease-in-out infinite alternate;
}
@keyframes noct-draw{to{stroke-dashoffset:0}}

/* キャプション */
.fm-cap{position:relative;z-index:1;max-width:38em;display:flex;flex-direction:column;gap:.5rem}
.fm-cap-no{font-family:var(--mono);font-size:.8rem;letter-spacing:.3em;opacity:.8}
.fm-title{font-weight:700;font-size:clamp(2.4rem,8vw,5rem);line-height:1;letter-spacing:-.02em}
.fm-meta{font-family:var(--mono);font-size:.8rem;letter-spacing:.12em;opacity:.85}
.fm-desc{font-size:clamp(.92rem,1.3vw,1.08rem);max-width:32em;opacity:.92;line-height:1.8;margin-top:.3rem}

/* カーテン通過後にキャプションが立ち上がる */
.fm-cap>*{opacity:0;transform:translateY(20px);transition:opacity .6s ease,transform .6s cubic-bezier(.2,.7,.2,1)}
.fm-panel.is-revealed .fm-cap>*{opacity:1;transform:none}
.fm-panel.is-revealed .fm-cap>*:nth-child(1){transition-delay:.04s}
.fm-panel.is-revealed .fm-cap>*:nth-child(2){transition-delay:.12s}
.fm-panel.is-revealed .fm-cap>*:nth-child(3){transition-delay:.20s}
.fm-panel.is-revealed .fm-cap>*:nth-child(4){transition-delay:.28s}

/* 液体カーテン（path は JS が毎フレーム生成） */
.fm-veil{
  position:absolute;inset:0;width:100%;height:100%;
  z-index:10;pointer-events:none;
}
.fm-veil path{fill:var(--fm-veil-color,#0a0a0a)}

/* controls */
.fm-ui{display:flex;align-items:center;justify-content:center;gap:1.3rem;margin-top:1.3rem}
.fm-btn{
  width:3rem;height:3rem;flex:none;border:1px solid var(--ink);background:var(--paper);
  font-family:var(--mono);font-size:1.1rem;color:var(--ink);cursor:pointer;
  transition:transform .2s,box-shadow .2s;
}
.fm-btn:hover{transform:translate(-2px,-2px);box-shadow:4px 4px 0 var(--hi)}
/* サムネイル・ナビ */
.fm-thumbs{display:flex;flex-wrap:wrap;gap:.5rem;justify-content:center}
.fm-thumb{
  display:flex;align-items:center;gap:.5em;
  padding:.4em .7em .4em .5em;background:var(--paper);border:1px solid var(--ink);color:var(--ink);
  font-family:var(--mono);font-size:.72rem;letter-spacing:.06em;cursor:pointer;
  transition:transform .18s,box-shadow .18s;
}
.fm-thumb:hover{transform:translate(-1px,-1px);box-shadow:3px 3px 0 var(--ink)}
.fm-thumb-sw{width:1.1em;height:1.1em;background:var(--c);border:1px solid rgba(0,0,0,.25)}
.fm-thumb[aria-current="true"]{background:var(--ink);color:#fff}
.fm-thumb[aria-current="true"] .fm-thumb-sw{box-shadow:0 0 0 2px var(--hi)}

.fm-foot{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:.6rem;margin-top:.9rem}
.fm-count{font-family:var(--mono);font-size:.74rem;letter-spacing:.25em;color:var(--ink)}
.fm-hint{font-family:var(--mono);font-size:.72rem;letter-spacing:.18em;color:var(--muted)}
/* END COMPONENT */


/* ─── NOTES ─── */
.notes{max-width:1100px;margin:0 auto;padding:clamp(3rem,5vw,4.5rem) clamp(1.5rem,4vw,3rem)}
.shou{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;flex-wrap:wrap;padding-bottom:1rem;border-bottom:1px solid var(--ink);margin-bottom:2.5rem}
.shou h2{font-size:clamp(1.3rem,2vw,1.7rem);font-weight:700;letter-spacing:.04em}
.shou .no{font-family:var(--mono);font-size:.78rem;letter-spacing:.25em;color:var(--muted)}
.notes-grid{display:grid;grid-template-columns:1fr;gap:1.2rem;margin-bottom:3rem}
@media(min-width:780px){.notes-grid{grid-template-columns:repeat(3,1fr)}}
.note{position:relative;background:var(--paper);border:1px solid var(--ink);padding:1.5rem 1.4rem 1.4rem}
.note-no{position:absolute;top:1rem;right:1rem;font-family:var(--mono);font-size:.7rem;letter-spacing:.2em;color:var(--muted)}
.note h3{font-size:1.02rem;font-weight:700;margin-bottom:.7rem;letter-spacing:.02em}
.note p{font-size:.86rem;color:var(--muted);line-height:1.8}
.note code,.var span code{font-family:var(--mono);font-size:.85em;background:var(--bg);padding:.1em .35em;border:1px solid var(--line)}
.sub-h{font-size:1rem;font-weight:700;letter-spacing:.04em;margin:2rem 0 1rem;padding-bottom:.7rem;border-bottom:1px dashed var(--ink)}
.vars{display:grid;grid-template-columns:1fr;gap:0;border:1px solid var(--ink);background:var(--paper)}
.var{display:grid;grid-template-columns:minmax(9rem,auto) 1fr auto;gap:1rem;padding:.8rem 1rem;border-bottom:1px solid var(--line);align-items:center}
.var:last-child{border-bottom:none}
.var code{font-family:var(--mono);font-size:.82rem;color:var(--hi);font-weight:500}
.var span{font-size:.85rem;color:var(--muted);line-height:1.5}
.var em{font-family:var(--mono);font-size:.78rem;font-style:normal;color:var(--ink);background:var(--bg);padding:.15em .55em;border:1px solid var(--line);white-space:nowrap}
@media(max-width:680px){.var{grid-template-columns:1fr;gap:.3rem;padding:.9rem 1rem}.var em{justify-self:start}}

/* ─── FOOTER ─── */
footer{
  padding:2rem clamp(1.2rem,4vw,3rem) 1.5rem;
  display:flex;flex-wrap:wrap;gap:1rem;justify-content:space-between;align-items:center;
  font-family:var(--mono);font-size:.72rem;letter-spacing:.2em;color:var(--muted);
  border-top:1px solid var(--ink);
}
footer a{color:var(--ink)}

/* Reduced motion: 液体カーテン無しで即時切替（JS が判定）+ 背景エフェクトも停止 */
@media (prefers-reduced-motion: reduce){
  .fm-p1 .fm-art::before,
  .fm-ember-sun,.fm-ember-rays,.fm-ember-grain,.fm-grass path,
  .fm-p4 .fm-art::before,.fm-sky-line{animation:none}
}