/* motion-core.css — web-motion 軽量ランタイム（assets/motion-core.js と対で読む）
   - 初期非表示はすべて html.js でゲートする（JS無効・SSR初期描画で内容が消えない）
   - クラスと変数は wm- プレフィックス。* セレクタは使わない。!important は reduced-motion の解除にだけ使う
   - 動く要素の方向・距離・時間は JS が --wm-* 変数を要素に書き、CSS はそれを読むだけ */

/* ---- reveal / stagger ------------------------------------------------ */
.js [data-wm="reveal"],
.js .wm-stagger-item{
  opacity:0;
  translate:var(--wm-tx,0) var(--wm-ty,0);
  scale:var(--wm-scale,1);
  filter:var(--wm-blur,none);
  transition-property:opacity,translate,scale,filter;
  transition-duration:var(--wm-duration,.7s);
  transition-timing-function:cubic-bezier(.22,1,.36,1);
  transition-delay:var(--wm-delay,0ms);
}
.js [data-wm="reveal"].wm-in,
.js .wm-stagger-item.wm-in{opacity:1;translate:0 0;scale:1;filter:none}

/* ---- parallax: will-change は JS が視界付近に来たときだけ付ける ---- */
.js [data-wm="parallax"]{backface-visibility:hidden}

/* ---- progress: JS が scale を書く。横なら左端、縦なら上端が原点 ---- */
.js [data-wm="progress"]{transform-origin:0 0}

/* ---- theme: body の色を滑らかに切り替える ---- */
.js body.wm-theme{transition:background-color .6s ease,color .6s ease}

/* ---- lines: 子要素をマスク（.wm-line）で包み、中身（.wm-line-inner）を下から上げる ---- */
.js .wm-line{overflow:hidden}
.js .wm-line-inner{translate:0 105%}
.js [data-wm="lines"].wm-in .wm-line-inner{translate:0 0}

/* ---- entrance: WAAPI が終わるまで子要素を隠す（クラスは JS が付け外し） ---- */
.js .wm-entrance-item{opacity:0}

/* ---- typewriter: 点滅カーソル ---- */
.js .wm-cursor{display:inline-block;width:.08em;min-width:2px;height:1em;margin-left:.08em;vertical-align:-.12em;background:currentColor;animation:wm-blink .9s steps(2,start) infinite}
@keyframes wm-blink{to{visibility:hidden}}

/* ---- chars: 1文字（1単語）ずつ立ち上がる。遅延は JS が transition-delay に書く ---- */
.js .wm-char{display:inline-block;opacity:0;translate:0 .6em;transition:opacity .5s ease,translate .6s cubic-bezier(.22,1,.36,1)}
.js [data-wm="chars"].wm-in .wm-char{opacity:1;translate:0 0}

/* ---- scramble: 視界に入るまで隠し、ランダム文字を出した瞬間に表示 ---- */
.js [data-wm="scramble"]:not(.wm-in){opacity:0}

/* ---- marquee: 複製した群を横に流す。群の間隔は --wm-gap で調整 ---- */
.js [data-wm="marquee"]{overflow:hidden;white-space:nowrap}
.js .wm-marquee-track{display:flex;width:max-content;will-change:transform}
.js .wm-marquee-group{display:flex;flex:0 0 auto;align-items:center;gap:var(--wm-gap,2.5rem);padding-right:var(--wm-gap,2.5rem)}

/* ---- rotate: 全単語を同じグリッドセルに重ね、幅は最長語で固定される ---- */
.js .wm-rotate{display:inline-grid;overflow:hidden;vertical-align:bottom;line-height:1.25}
.js .wm-rotate-word{grid-area:1/1;opacity:0;translate:0 100%;transition:translate .55s cubic-bezier(.22,1,.36,1),opacity .4s ease}
.js .wm-rotate-word.wm-active{opacity:1;translate:0 0}
.js .wm-rotate-word.wm-leave{opacity:0;translate:0 -100%}

/* ---- magnetic / tilt: transform は JS が合成して書く。tilt の戻りだけ CSS で滑らかに ---- */
.js [data-wm="tilt"]{transition:transform .6s cubic-bezier(.22,1,.36,1);transform-style:preserve-3d}
.js [data-wm="tilt"].wm-hover{transition:transform .12s ease-out}
.js .wm-glare{position:absolute;inset:0;pointer-events:none;border-radius:inherit;opacity:0;transition:opacity .3s ease;
  background:radial-gradient(circle at var(--wm-x,50%) var(--wm-y,50%),var(--wm-glare-color,rgba(255,255,255,.28)),transparent 62%)}
.js [data-wm="tilt"].wm-hover .wm-glare{opacity:1}

/* ---- spotlight: カーソル位置 --wm-x/--wm-y（px）を中心にラジアル光 ---- */
.js .wm-spot{position:absolute;inset:0;pointer-events:none;border-radius:inherit;opacity:0;transition:opacity .35s ease;
  background:radial-gradient(var(--wm-size,300px) circle at var(--wm-x,50%) var(--wm-y,50%),var(--wm-spot-color,rgba(255,255,255,.14)),transparent 70%)}
.js [data-wm="spotlight"]:hover .wm-spot{opacity:1}

/* ---- header: 80px 超で .is-scrolled、hide=true なら下スクロールで .is-hidden ---- */
.js [data-wm="header"]{transition:translate .35s ease,background-color .35s ease,box-shadow .35s ease,padding .35s ease}
.js [data-wm="header"].is-hidden{translate:0 -100%}

/* ---- grain: SVG feTurbulence のノイズを敷く。body なら fixed、要素なら absolute ---- */
.wm-grain{position:absolute;inset:0;pointer-events:none;z-index:2;background-size:220px 220px;background-repeat:repeat;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.wm-grain-fixed{position:fixed;z-index:9990}
.wm-grain-animate{animation:wm-grain .8s steps(5) infinite}
@keyframes wm-grain{0%{background-position:0 0}20%{background-position:-60px 40px}40%{background-position:30px -70px}60%{background-position:-80px -20px}80%{background-position:50px 60px}100%{background-position:0 0}}

/* ---- cursor: ドット（即追従）＋リング（遅れて追従）。a/button/[data-wm-cursor-hover] で拡大 ---- */
.wm-cursor-dot,.wm-cursor-ring{position:fixed;top:0;left:0;pointer-events:none;z-index:10000;border-radius:50%;opacity:0;
  transition:opacity .25s ease,width .25s ease,height .25s ease,margin .25s ease,background-color .25s ease;mix-blend-mode:difference}
.wm-cursor-dot{width:8px;height:8px;margin:-4px 0 0 -4px;background:var(--wm-cursor-color,#fff)}
.wm-cursor-ring{width:36px;height:36px;margin:-18px 0 0 -18px;border:1.5px solid var(--wm-cursor-color,#fff)}
.wm-cursor-dot.is-on,.wm-cursor-ring.is-on{opacity:1}
.wm-cursor-ring.is-hover{width:60px;height:60px;margin:-30px 0 0 -30px;background:rgba(255,255,255,.18)}
.wm-cursor-active,.wm-cursor-active a,.wm-cursor-active button,.wm-cursor-active [data-wm-cursor-hover]{cursor:none}

/* ---- reduced-motion: 動きを止めて即表示。!important はここだけ ---- */
@media (prefers-reduced-motion:reduce){
  .js [data-wm="reveal"],.js .wm-stagger-item,.js .wm-char,.js .wm-line-inner,.js [data-wm="scramble"],.js .wm-entrance-item,.js .wm-rotate-word.wm-active{
    opacity:1!important;translate:none!important;scale:none!important;filter:none!important;transition:none!important}
  .js [data-wm="draw"] :is(path,line,circle,polyline,polygon,rect,ellipse){stroke-dashoffset:0!important;transition:none!important}
  .js body.wm-theme,.js [data-wm="header"],.js [data-wm="tilt"]{transition:none!important}
  .js .wm-cursor,.wm-grain-animate{animation:none!important}
  .js .wm-marquee-track{transform:none!important}
}