/* 水切り MIZUKIRI — ロゴ
   index.html と about.html の両方が読む。

   ロゴの元データは image/mizukiri.svg。HTMLへSVGを直接書き込んでいるのは、
   色を currentColor で追従させ、輪郭を描いてから塗るアニメーションを
   CSSで持たせるため（<img> で読むと中のパスへ手が届かない）。
   ロゴを差し替えるときは image/mizukiri.svg と、両HTMLの中身を揃えること。

   線の長さは pathLength="1" で正規化してあるので、
   実際のパス長を測らずに stroke-dashoffset を 1 → 0 で動かせる。 */

.logo{
  display:block;
  margin:0 auto;
  width:min(64vw, var(--logo-w, 360px));
  height:auto;
  color:var(--ink);
  overflow:visible;
}
.logo path{
  fill:currentColor;
  fill-opacity:0;
  stroke:currentColor;
  stroke-width:.85;
  stroke-linejoin:round;
  stroke-linecap:round;
  stroke-dasharray:1;
  stroke-dashoffset:1;
}

/* .on が付いたときだけ動く。付け直せば何度でも再生できる */
.logo.on path{
  animation:logoDraw 1.15s cubic-bezier(.35,0,.2,1) forwards,
            logoFill .85s ease forwards;
}
.logo.on path:nth-of-type(1){animation-delay:.20s, 1.15s}
.logo.on path:nth-of-type(2){animation-delay:.40s, 1.35s}
.logo.on path:nth-of-type(3){animation-delay:.60s, 1.55s}

@keyframes logoDraw{ to{ stroke-dashoffset:0 } }
@keyframes logoFill{ to{ fill-opacity:1; stroke-opacity:0 } }

/* 動きを減らす設定のときは、最初から塗った状態で出す */
@media (prefers-reduced-motion:reduce){
  .logo path{fill-opacity:1;stroke-opacity:0;stroke-dashoffset:0}
  .logo.on path{animation:none}
}