/* 動きの共通部品（docs/Webデザイン_動き_設計_20261015.md）。transform・opacity だけ。節ごとの動きは lp.css。
   .has-motion は theme.js（head で同期）、.motion-ready は motion.js が付ける（JS が来ないときは全部見えたまま） */
:root{--dur-1:120ms;--dur-2:220ms;--dur-3:480ms;--dur-4:1200ms;--ease-out:cubic-bezier(.2,.8,.2,1);--ease-spring:cubic-bezier(.34,1.4,.64,1);--rise:12px}
[data-i="1"]{--i:1}[data-i="2"]{--i:2}[data-i="3"]{--i:3}[data-i="4"]{--i:4}[data-i="5"]{--i:5}
[data-count]{display:inline-block}
@keyframes m-rise{from{opacity:0;transform:translateY(var(--rise))}}
@keyframes m-pop{from{opacity:0;transform:scale(.8)}}
@keyframes m-in{from{transform:scaleX(0)}}
@keyframes m-grow{to{transform:scaleX(1)}}
@keyframes m-ring{from{opacity:.55;transform:scale(1)}to{opacity:0;transform:scale(1.12,1.45)}}
@keyframes m-shine{from{transform:translateX(-120%)}to{transform:translateX(120%)}}
/* 出現（1 回だけ。--i の順に 70ms ずつ）と、線のアイコンを描く */
.motion-ready [data-reveal]:not(.is-in){opacity:0}
.motion-ready [data-reveal].is-in{animation:m-rise var(--dur-3) var(--ease-out) calc(var(--i,0)*70ms) backwards}
.motion-ready [data-reveal] .ico>*{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset .65s var(--ease-out) calc(var(--i,0)*70ms + .15s)}
.motion-ready [data-reveal].is-in .ico>*{stroke-dashoffset:0}
/* 主ボタンの静かな脈（見えてから 3 回だけ） */
.btn[data-pulse]{position:relative}
.btn[data-pulse]::after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:0 0 0 2px var(--brand);opacity:0;pointer-events:none}
.motion-ready .btn[data-pulse].is-in::after{animation:m-ring 2.6s var(--ease-out) .6s 3}
/* 押した・指を置いた反応（タッチ端末は持ち上げない） */
.btn{transition:background-color var(--dur-2) var(--ease-out),transform var(--dur-1)}
.str,.feat,.plan,.exam-card,.ex-card,.only-card,.abroad-card,.pt-tile{transition:transform var(--dur-2) var(--ease-out),box-shadow var(--dur-2) var(--ease-out),border-color var(--dur-2)}
@media (hover:hover){.btn:hover{transform:translateY(-1px)}:is(.str,.feat,.plan,.exam-card,.ex-card,.only-card,.abroad-card,.pt-tile):hover{transform:translateY(-3px);box-shadow:var(--shadow);border-color:var(--brand)}}
.btn:active{transform:translateY(1px)}
:is(.exam-card,.ex-card,.only-card,.pt-tile):active{transform:translateY(1px) scale(.995);transition-duration:var(--dur-1)}
.icon-btn:active{transform:scale(.94)}
/* タブが裏にある間は壁紙の層を止める（motion.js が html[data-hidden] を付け外し） */
html[data-hidden] :is(#ep-hotaru,#ep-season,#ep-hikari) i{animation-play-state:paused!important}
/* 動きを減らす（端末の設定・アプリの設定）: 全部止めて、最後の形で見せる */
@media (prefers-reduced-motion:reduce){[data-reveal],[data-reveal] .ico>*{animation:none!important;transition:none!important;opacity:1;transform:none;stroke-dashoffset:0}.btn[data-pulse]::after{content:none}}
[data-reduce-motion="true"] :is([data-reveal],[data-reveal] .ico>*){animation:none!important;transition:none!important;opacity:1;transform:none;stroke-dashoffset:0}
[data-reduce-motion="true"] .btn[data-pulse]::after{content:none}