/* =========================================================
   AI参謀 サンプルサイト共通の「動き」 fx.css
   使い方は fx.js の先頭コメントを参照
   ========================================================= */

/* ---------- 1. スクロールで入ってくる ---------- */
.fx-on [data-reveal]{transition:opacity .9s cubic-bezier(.2,.7,.2,1) var(--fx-delay,0ms),translate .9s cubic-bezier(.2,.7,.2,1) var(--fx-delay,0ms),scale .9s cubic-bezier(.2,.7,.2,1) var(--fx-delay,0ms),filter .9s cubic-bezier(.2,.7,.2,1) var(--fx-delay,0ms)}
.fx-on [data-reveal]:not(.fx-in){opacity:0;translate:0 32px}
.fx-on [data-reveal="left"]:not(.fx-in){translate:-44px 0}
.fx-on [data-reveal="right"]:not(.fx-in){translate:44px 0}
.fx-on [data-reveal="zoom"]:not(.fx-in){translate:none;scale:.92}
.fx-on [data-reveal="blur"]:not(.fx-in){translate:0 16px;filter:blur(10px)}
.fx-on [data-reveal="fade"]:not(.fx-in){translate:none}

/* 見出しを1文字ずつ */
.fx-ch{display:inline-block;transition:opacity .7s cubic-bezier(.2,.7,.2,1),translate .7s cubic-bezier(.2,.7,.2,1),filter .7s cubic-bezier(.2,.7,.2,1);transition-delay:calc(var(--i,0) * 38ms + var(--fx-delay,0ms))}
.fx-on [data-split]:not(.fx-in) .fx-ch{opacity:0;translate:0 .55em;filter:blur(8px)}

/* 数字 */
[data-count]{font-variant-numeric:tabular-nums}

/* ---------- 2. ポインターで傾く（カード・画像） ---------- */
.fx-tilt{transition:transform .6s cubic-bezier(.2,.7,.2,1),box-shadow .5s ease,border-color .4s ease,background-color .4s ease,color .4s ease,filter .4s ease;transform-style:preserve-3d;will-change:transform}
.fx-tilt.fx-hover{transition:transform .14s linear,box-shadow .5s ease,border-color .4s ease,background-color .4s ease,color .4s ease,filter .4s ease}
.fx-tilt.fx-hover.fx-shadow{box-shadow:0 26px 50px -24px rgba(0,0,0,.38)}
.fx-glare{position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:5;opacity:0;transition:opacity .45s ease;
  background:radial-gradient(circle at var(--fx-gx,50%) var(--fx-gy,50%),rgba(255,255,255,.55),rgba(255,255,255,0) 58%);mix-blend-mode:soft-light}
[data-glare="bright"] > .fx-glare{mix-blend-mode:screen;background:radial-gradient(circle at var(--fx-gx,50%) var(--fx-gy,50%),rgba(255,255,255,.22),rgba(255,255,255,0) 55%)}
.fx-tilt.fx-hover > .fx-glare{opacity:1}

/* 画像がふわっと寄る */
[data-zoom]{overflow:hidden}
[data-zoom] img{transition:scale 1.1s cubic-bezier(.2,.7,.2,1)}
[data-zoom]:hover img,a:hover [data-zoom] img,.fx-hover [data-zoom] img{scale:1.07}

/* ---------- 3. ボタンが吸い付く ---------- */
[data-magnetic]{transition:translate .45s cubic-bezier(.2,.7,.2,1),scale .2s ease,box-shadow .3s ease,border-color .3s ease,background-color .3s ease,color .3s ease,filter .3s ease}
[data-magnetic].fx-hover{transition:translate .12s linear,scale .2s ease,box-shadow .3s ease,border-color .3s ease,background-color .3s ease,color .3s ease,filter .3s ease}
[data-magnetic]:active{scale:.96}

/* ---------- 4. アイコンが動く ---------- */
[data-icon]{display:inline-block}
[data-icon="float"]{animation:fx-float 3.6s ease-in-out infinite}
[data-icon="sway"]{animation:fx-sway 4.2s ease-in-out infinite;transform-origin:50% 90%}
:is(a,button,label,.fx-tilt,[data-icon-trigger]):hover [data-icon="wiggle"],[data-icon="wiggle"]:hover{animation:fx-wiggle .75s ease}
:is(a,button,label,.fx-tilt,[data-icon-trigger]):hover [data-icon="spin"],[data-icon="spin"]:hover{animation:fx-spin .8s cubic-bezier(.3,.7,.3,1)}
:is(a,button,label,.fx-tilt,[data-icon-trigger]):hover [data-icon="bounce"],[data-icon="bounce"]:hover{animation:fx-bounce .7s ease}
:is(a,button,label,.fx-tilt,[data-icon-trigger]):hover [data-icon="pop"],[data-icon="pop"]:hover{animation:fx-pop .6s ease}
:is(a,button,label,.fx-tilt,[data-icon-trigger]):hover [data-icon="nudge"],[data-icon="nudge"]:hover{animation:fx-nudge .9s ease-in-out infinite}
:is(a,button,label,.fx-tilt,[data-icon-trigger]):hover [data-icon="float"],[data-icon="float"]:hover{animation:fx-pop .6s ease}
:is(a,button,label,.fx-tilt,[data-icon-trigger]):hover [data-icon="sway"],[data-icon="sway"]:hover{animation:fx-wiggle .75s ease}
@keyframes fx-wiggle{0%,100%{rotate:0deg}20%{rotate:-14deg}40%{rotate:10deg}60%{rotate:-6deg}80%{rotate:3deg}}
@keyframes fx-spin{from{rotate:0deg}to{rotate:360deg}}
@keyframes fx-bounce{0%,100%{translate:0 0}35%{translate:0 -8px}65%{translate:0 2px}}
@keyframes fx-pop{0%,100%{scale:1}40%{scale:1.25}70%{scale:.94}}
@keyframes fx-nudge{0%,100%{translate:0 0}50%{translate:7px 0}}
@keyframes fx-float{0%,100%{translate:0 0}50%{translate:0 -5px}}
@keyframes fx-sway{0%,100%{rotate:-5deg}50%{rotate:5deg}}

/* ---------- 5. 横に流れるカード ---------- */
.fx-carousel{display:flex!important;flex-wrap:nowrap!important;overflow-x:auto!important;overflow-y:hidden;overscroll-behavior-x:contain;scroll-behavior:auto!important;scrollbar-width:none;cursor:grab;
  padding-block:18px!important;margin-block:-18px!important;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 3.5%,#000 96.5%,transparent 100%);mask-image:linear-gradient(90deg,transparent 0,#000 3.5%,#000 96.5%,transparent 100%)}
.fx-carousel::-webkit-scrollbar{display:none}
.fx-carousel.fx-dragging{cursor:grabbing;user-select:none;-webkit-user-select:none}
.fx-carousel > *{flex:0 0 min(var(--fx-card-w,300px),80vw)!important;max-width:none!important;min-width:0}
.fx-carousel img{-webkit-user-drag:none}

/* ---------- 6. スクロールで画像がずれる（奥行き） ---------- */
[data-parallax]{will-change:transform}