/* 雨ニモマケズ のページ。生成元 plan_b/_tpl_poem.html → wp/gen_wp.py */
:root{
  --ink:#141414; --paper:#f4f1ea; --dim:#b5b0a6; --deep:#060708;
  --mc:"Zen Old Mincho","Hiragino Mincho ProN","Yu Mincho",serif;
  --gt:"Zen Kaku Gothic New","Hiragino Kaku Gothic ProN","Yu Gothic Medium",Meiryo,sans-serif;
  --e-expo:cubic-bezier(.19,1,.22,1); --e-cubic:cubic-bezier(.33,1,.68,1);
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{font-family:var(--gt);background:var(--deep);color:var(--paper);
  font-size:16.5px;font-weight:500;line-height:2;font-feature-settings:"palt";
  word-break:auto-phrase;overflow:hidden;height:100svh}
img,video{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
.nb{display:inline-block;white-space:nowrap}

/* 案内（黒の上なので白・常に見える） */
.hd{position:fixed;inset:0 0 auto;z-index:40;display:flex;align-items:center;
  justify-content:space-between;gap:20px;color:#fff;
  padding:clamp(13px,1.9vw,20px) clamp(20px,4.2vw,58px)}
.hd b{font:600 15px/1 var(--gt);letter-spacing:.14em}
.hd nav{display:flex;gap:clamp(14px,1.9vw,30px)}
.hd nav a{font:500 13px/1 var(--gt);letter-spacing:.06em;position:relative;padding:6px 0}
.hd nav a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:#fff;
  transform:scaleX(0);transform-origin:left center;transition:transform .42s var(--e-cubic)}
.hd nav a:hover::after{transform:scaleX(1)}
.hd .mnu{display:none;background:none;border:1px solid #fff;color:#fff;
  padding:8px 13px;font:500 12.5px/1 var(--gt);letter-spacing:.08em;cursor:pointer}
@media (max-width:900px){
  .hd nav{position:fixed;inset:0;background:#0b0c0e;flex-direction:column;
    justify-content:center;align-items:center;gap:30px;opacity:0;visibility:hidden;
    transition:opacity .38s var(--e-cubic),visibility .38s;z-index:50}
  .hd nav.open{opacity:1;visibility:visible}
  .hd nav a{font-size:21px;padding:10px 0}
  .hd .mnu{display:block;position:relative;z-index:51}
}

/* ===== 潜る舞台（スクロールなし。クリックで1連ずつ奥へ） ===== */
.stage{position:fixed;inset:0;perspective:1500px;cursor:pointer;overflow:hidden}
.ly{position:absolute;inset:0;display:flex;align-items:center;
  will-change:transform,opacity;pointer-events:none;
  transition:transform 1.25s var(--e-expo),opacity 1.05s var(--e-cubic)}
.ly figure{position:absolute;inset:0;overflow:hidden}
.ly figure img,.ly figure video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* 静止画は絶えずゆっくり動く（寄りと引きを行き来する） */
.ly figure img{animation:kb 26s var(--e-cubic) infinite alternate}
@keyframes kb{
  from{transform:scale(1.06) translate3d(-0.8%,0.5%,0)}
  to{transform:scale(1.16) translate3d(1.2%,-1.2%,0)}
}
.ly:nth-child(odd) figure img{animation-duration:31s;animation-direction:alternate-reverse}
.ly .scrim{position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(6,7,8,.84) 0%,rgba(6,7,8,.6) 36%,rgba(6,7,8,.24) 64%,rgba(6,7,8,.14) 100%)}
.ly .tx{position:relative;z-index:1;width:min(1240px,100% - clamp(22px,4.4vw,64px)*2);
  margin-inline:auto;padding-right:8vw;transition:opacity .8s var(--e-cubic)}
/* 奥や手前のレイヤーは絵だけ見せる（文字は重ねない） */
.ly.next .tx,.ly.far .tx,.ly.gone .tx{opacity:0}
.ly p{font:400 clamp(19px,2.4vw,32px)/2.2 var(--mc);letter-spacing:.12em}
/* text-wrap:balance は外した＝Safari は文節を知らず「問／い」「未来の思い出／を、」で割る（2026-09-06 河原さん iPhone）。行は <br> と .nb で決める */
@media (max-width:900px){.ly p{font-weight:600;color:#fff}}   /* 細い明朝が暗い写真の上で読みにくい（同・河原さん） */
/* スマホだけの改行。<br class="sp"> は 480px 以下でだけ効く（文節で割る＝Safari は auto-phrase を知らない） */
.sp{display:none}
@media (max-width:480px){.sp{display:inline}}
/* 行末の「。」「、」は右半分が空白＝中心が左にずれる（2026-09-06 河原さん・iPhone 実測 14〜19px）。
   palt はこの書体（Zen）に効かない（実測＝幅が変わらない）ので、行末の句読点の右 0.5em を詰める。
   .spo（<br class="sp"> の直前）は 480px 以下でだけ行末になる */
.pu{margin-right:-.8em}   /* 0.5em では墨の中心がまだ 0.25em 左（実測 7px）。0.8em＝「。」の墨の分だけ残して詰める */
.pu.spo{margin-right:0}
@media (max-width:480px){.pu.spo{margin-right:-.8em}}


/* 進み具合ごとの置き場：奥に次がうっすら見えている */
.ly.far {transform:translate3d(0,0,-1700px);opacity:0}
.ly.next{transform:translate3d(0,0,-850px);opacity:.34}
.ly.cur {transform:translate3d(0,0,0);opacity:1;pointer-events:auto}
.ly.gone{transform:translate3d(0,0,620px);opacity:0}

/* 題字（入口） */
.ly.t0{text-align:center}
.ly.t0 .tx{padding-right:0}
.ly.t0 h1{font:600 clamp(32px,4.8vw,60px)/1.5 var(--mc);letter-spacing:.24em}
.ly.t0 .go{margin-top:clamp(30px,5vh,48px);font:500 13px/1 var(--gt);
  letter-spacing:.22em;color:var(--dim);animation:pulse 2.6s var(--e-cubic) infinite}
@keyframes pulse{0%,100%{opacity:.55}50%{opacity:1}}

/* 結び */
.ly.end{text-align:center;background:var(--deep)}
.ly.end .tx{padding-right:0}
.ly.end .p2{font:700 clamp(30px,5vw,66px)/1.5 var(--gt);letter-spacing:.02em;color:#fff}
.ly.end .btns{margin-top:clamp(38px,6vh,58px);display:flex;gap:16px;justify-content:center;flex-wrap:wrap}
.btn{display:inline-block;padding:17px 40px;border:1.5px solid #fff;border-radius:999px;
  font-size:15.5px;font-weight:500;letter-spacing:.04em;color:#fff;
  transition:transform .45s var(--e-cubic),background-color .45s var(--e-cubic),color .45s var(--e-cubic)}
.btn:hover{background:#fff;color:var(--deep);transform:translate3d(0,-3px,0)}
.btn.g{border-color:rgba(255,255,255,.44);color:#c9cfd8}
.btn.g:hover{background:rgba(255,255,255,.12);color:#fff;border-color:#fff}

/* 進み具合の点 */
.dots{position:fixed;right:clamp(14px,2.6vw,34px);top:50%;transform:translateY(-50%);
  z-index:30;display:flex;flex-direction:column;gap:12px;pointer-events:none}
.dots i{width:5px;height:5px;border-radius:50%;background:#4a4e55;
  transition:background-color .5s var(--e-cubic),transform .5s var(--e-cubic)}
.dots i.on{background:#fff;transform:scale(1.5)}

/* 雨（常に降っている） */
canvas.rain{position:fixed;inset:0;z-index:20;pointer-events:none}

/* 戻る */
.back{position:fixed;left:clamp(16px,3vw,40px);bottom:clamp(16px,3vh,32px);z-index:30;
  font:500 12.5px/1 var(--gt);letter-spacing:.14em;color:var(--dim);
  display:inline-flex;align-items:center;gap:10px;opacity:0;visibility:hidden;
  transition:opacity .5s var(--e-cubic),visibility .5s;cursor:pointer;background:none;border:0}
.back.on{opacity:1;visibility:visible}
.back i{width:26px;height:1px;background:var(--dim)}
.back:hover{color:#fff}
.back:hover i{background:#fff}

/* 動きが苦手な人・JS が無い時＝縦に静かに読める形 */
@media (prefers-reduced-motion:reduce){
  .ly figure img{animation:none}
  .ly{transition:none}
  canvas.rain{display:none}
}
html:not(.js) body{overflow:auto;height:auto}
html:not(.js) .stage{position:static;perspective:none}
html:not(.js) .ly{position:relative;min-height:78svh;opacity:1!important;transform:none!important}
html:not(.js) .dots,html:not(.js) .back{display:none}