/* ひかえめな動き（2026-10-17 後載せ）。静かだけれど、前を向いている。
   すべて html.anim-on（anim.js が付ける）配下だけで効く。JSが無ければ何も起きない。
   外すとき：anim.css / anim.js と、各HTMLの読み込み2行を消すだけ。 */
:root{--anim-ease:cubic-bezier(.22,1,.36,1);--anim-ease-draw:cubic-bezier(.65,0,.35,1);--anim-dur-intro:1.2s;--anim-dur-reveal:.9s;--anim-dur-hover:.3s;--anim-rise:14px}

/* 1) 開幕：ページの頭だけ、少し下から静かに立ち上がる */
@keyframes anim-rise{from{opacity:0;transform:translateY(var(--anim-rise))}to{opacity:1;transform:none}}
@keyframes anim-fade{from{opacity:0}to{opacity:1}}
.anim-on [data-anim="intro"]{animation:anim-rise var(--anim-dur-intro) var(--anim-ease) backwards}

/* A) 航路の線が左下から右上へ描かれる → 途中で赤い印 → 最後に終点の点 */
@keyframes anim-draw{from{stroke-dasharray:1;stroke-dashoffset:1}to{stroke-dasharray:1;stroke-dashoffset:0}}
.anim-on [data-anim="draw"] [data-anim-draw="0"]{animation:anim-draw 2.2s var(--anim-ease-draw) .5s backwards}
.anim-on [data-anim="draw"] [data-anim-draw="1"]{animation:anim-draw 2.2s var(--anim-ease-draw) .75s backwards}
.anim-on [data-anim="draw"] [data-anim-draw="2"]{animation:anim-fade .01s linear 1.5s backwards}
.anim-on [data-anim="draw"] [data-anim-draw="3"]{animation:anim-draw .45s var(--anim-ease) 1.55s backwards}
.anim-on [data-anim="draw"] [data-anim-draw="end"]{animation:anim-fade .8s var(--anim-ease) 2.5s backwards}

/* D) 見出しの字送り：1文字ずつ下からせり上がる（終わるとJSが包みを外して元の見出しに戻す） */
@keyframes anim-char{from{opacity:0;transform:translateY(.4em)}to{opacity:1;transform:none}}
.anim-on .anim-char{display:inline-block;animation:anim-char .8s var(--anim-ease) backwards;animation-delay:calc(.3s + var(--anim-i,0) * 70ms)}

/* B) 見出しの赤い「。」は字送りのあと、ピントが合うようにそっと置かれる */
@keyframes anim-focus{from{opacity:0;filter:blur(6px)}to{opacity:1;filter:none}}
.anim-on .hero-main[data-anim="intro"] .ten{animation:anim-focus .8s var(--anim-ease) 1.6s backwards}

/* C) 赤い短線が左からすっと伸びる（トップの名前の線・「はじめに読んでほしい話」の線） */
@keyframes anim-line{from{transform:scaleX(0)}to{transform:none}}
.anim-on .hero-main[data-anim="intro"] .eyebrow-line{transform-origin:left center;animation:anim-line .9s var(--anim-ease) .45s backwards}
.anim-on .featured[data-anim="reveal"] .featured-label:before{transform-origin:left center;transform:scaleX(0);transition:transform .9s var(--anim-ease) .35s}
.anim-on .featured[data-anim="reveal"].anim-in .featured-label:before{transform:none}
.anim-on [data-anim="intro"][data-anim-order="1"]{animation-delay:.18s}
.anim-on [data-anim="intro"][data-anim-order="2"]{animation-delay:.36s}

/* 2) スクロール：見えたところから一度だけ、ふわっと出る */
.anim-on [data-anim="reveal"]{opacity:0;transform:translateY(var(--anim-rise));transition:opacity var(--anim-dur-reveal) var(--anim-ease),transform var(--anim-dur-reveal) var(--anim-ease)}
.anim-on [data-anim="reveal"][data-anim-order="1"]{transition-delay:.12s}
.anim-on [data-anim="reveal"][data-anim-order="2"]{transition-delay:.24s}
.anim-on [data-anim="reveal"].anim-in{opacity:1;transform:none}

/* 3) ホバー：矢印が行き先のほうへ少しだけ進む（「この話を読む ↗」と同じ動き） */
.anim-on .post-link:after,.anim-on .hasshin .label:after{transition:transform var(--anim-dur-hover) var(--anim-ease)}
.anim-on .post-link:hover:after,.anim-on .hasshin a:hover .label:after{transform:translate(3px,-3px)}

@media(prefers-reduced-motion:reduce){.anim-on [data-anim]{animation:none!important;opacity:1!important;transform:none!important}}