/* =========================================================
   モーション版（プレビュー）
   方向性：レースゲームの疾走感。スピード線・ブースト・星・ポップな登場。
   style.css の上に重ねるだけで、HTMLの構造は変えない。
   動きを減らす設定の端末では、全部オフにして静的版と同じ見た目に戻す。
   ========================================================= */

:root{
  --boost-1:#ff5b26;
  --boost-2:#ffb800;
  --boost-3:#ff2e88;
  --sky:#3fb6ff;
  --ease-pop:cubic-bezier(.34,1.56,.64,1);
  --ease-dash:cubic-bezier(.16,1,.3,1);
}

/* ---------- 上部のブーストメーター（スクロール進捗） ---------- */
.boost-meter{
  position:fixed;left:0;top:0;height:5px;width:100%;z-index:60;pointer-events:none;
  transform-origin:0 50%;transform:scaleX(0);
  background:linear-gradient(90deg,var(--sky),var(--boost-2) 45%,var(--boost-1) 75%,var(--boost-3));
  box-shadow:0 0 12px rgba(255,91,38,.55);
}

/* ---------- FV：流れるスピード線＋星 ---------- */
.fv{isolation:isolate}
.fv::before{animation:fv-spin 60s linear infinite;transform-origin:50% 0}
@keyframes fv-spin{to{transform:rotate(360deg)}}

.speedlines{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.speedlines i{
  position:absolute;right:-40%;height:3px;border-radius:3px;
  background:linear-gradient(90deg,transparent,rgba(255,91,38,.75),rgba(255,184,0,0));
  animation:speed var(--d,1.6s) linear var(--delay,0s) infinite;
}
.speedlines i:nth-child(3n){background:linear-gradient(90deg,transparent,rgba(63,182,255,.7),transparent)}
.speedlines i:nth-child(4n){background:linear-gradient(90deg,transparent,rgba(22,24,29,.25),transparent);height:2px}
@keyframes speed{
  from{transform:translateX(0) skewX(-20deg);opacity:0}
  10%{opacity:1}
  to{transform:translateX(-260vw) skewX(-20deg);opacity:0}
}

.stars{position:absolute;inset:0;z-index:0;pointer-events:none}
.stars b{
  position:absolute;width:var(--s,16px);height:var(--s,16px);
  background:var(--c,var(--boost-2));
  clip-path:polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%);
  animation:twinkle var(--d,2.4s) ease-in-out var(--delay,0s) infinite;
  filter:drop-shadow(0 0 6px rgba(255,184,0,.6));
}
@keyframes twinkle{
  0%,100%{transform:scale(.4) rotate(0deg);opacity:.15}
  50%{transform:scale(1) rotate(72deg);opacity:1}
}

/* FVの登場：見出しが右からダッシュで飛び込む */
.fv-eyebrow{animation:pop-in .6s var(--ease-pop) .1s both}
.fv h1 .ln{display:inline-block;animation:dash-in .75s var(--ease-dash) both}
.fv h1 .ln2{animation-delay:.22s}
.fv h1 em::after{transform-origin:0 50%;animation:swipe .55s var(--ease-dash) .75s both}
.fv-lead{animation:rise .6s var(--ease-dash) .55s both}
.fv-sub{animation:rise .6s var(--ease-dash) .7s both}
.fv .artstrip img{animation:zoom-out 1.2s var(--ease-dash) .2s both}

@keyframes pop-in{from{transform:scale(.3) rotate(-8deg);opacity:0}to{transform:none;opacity:1}}
@keyframes dash-in{
  0%{transform:translateX(70vw) skewX(-28deg);opacity:0;filter:blur(6px)}
  60%{transform:translateX(-14px) skewX(8deg);opacity:1;filter:none}
  80%{transform:translateX(4px) skewX(-2deg)}
  100%{transform:none}
}
@keyframes swipe{from{transform:scaleX(0) skewY(-.7deg)}to{transform:scaleX(1) skewY(-.7deg)}}
@keyframes rise{from{transform:translateY(18px);opacity:0}to{transform:none;opacity:1}}
@keyframes zoom-out{from{transform:scale(1.18);opacity:0}to{transform:none;opacity:1}}

/* ---------- 数字：カウントアップ時に弾む ---------- */
.stat .v.counting{color:var(--boost-1)}
.stat .v.landed{animation:land .5s var(--ease-pop)}
@keyframes land{0%{transform:scale(1.35)}100%{transform:none}}

/* ---------- スクロールで出てくる要素 ---------- */
.rv{opacity:0;transform:translateX(60px) skewX(-12deg);transition:opacity .5s ease, transform .7s var(--ease-dash)}
.rv.rv-up{transform:translateY(36px) scale(.96)}
.rv.in{opacity:1;transform:none}
section h2.rv{transform:translateX(80px) skewX(-18deg);transition:opacity .35s ease, transform .6s var(--ease-pop)}
section h2.rv.in{transform:none}

/* セクションラベル：ブーストの残像付きで走り込む */
.sec-head .num{position:relative;padding-left:0}
.sec-head .num.in{animation:label-dash .6s var(--ease-dash) both}
.sec-head .num::before{
  content:"";position:absolute;right:100%;top:50%;width:46px;height:2px;margin-right:8px;
  background:linear-gradient(90deg,transparent,var(--boost-1));transform:translateY(-50%) scaleX(0);transform-origin:100% 50%;
}
.sec-head .num.in::before{animation:trail .8s ease-out .1s both}
@keyframes label-dash{from{transform:translateX(-40px);opacity:0;letter-spacing:.6em}to{transform:none;opacity:1}}
@keyframes trail{0%{transform:translateY(-50%) scaleX(0)}40%{transform:translateY(-50%) scaleX(1)}100%{transform:translateY(-50%) scaleX(0);opacity:0}}

/* 見出しのマーカーがスッと引かれる */
h2 .mark{background-size:0% 100%;background-repeat:no-repeat;transition:background-size .7s var(--ease-dash) .25s}
h2.in .mark{background-size:100% 100%}

/* 画像：斜めのワイプで現れる */
.art.rv{transform:none;clip-path:polygon(0 0,0 0,-20% 100%,-20% 100%);transition:clip-path .9s var(--ease-dash), opacity .3s}
.art.rv.in{clip-path:polygon(0 0,120% 0,100% 100%,-20% 100%)}

/* 理由の番号：回転しながら着地 */
.reason .no{display:inline-block}
.reason.in .no{animation:spin-land .8s var(--ease-pop) .15s both}
@keyframes spin-land{from{transform:rotate(-200deg) scale(.2);opacity:0}to{transform:none;opacity:1}}

/* ---------- 手数料の箱：ブースト演出 ---------- */
.fee{transition:box-shadow .4s}
.fee.in{box-shadow:0 0 0 3px var(--boost-2), 0 18px 50px rgba(255,91,38,.35)}
.fee-arrow{position:relative;overflow:visible}
.fee.in .fee-arrow{animation:boost-arrow 1.1s ease-in-out .3s 2 both;color:var(--boost-2)}
@keyframes boost-arrow{
  0%,100%{transform:none;text-shadow:none}
  50%{transform:translateY(8px) scaleY(1.5);text-shadow:0 -10px 0 rgba(255,184,0,.5),0 -20px 0 rgba(255,91,38,.3)}
}
@media(min-width:781px){
  @keyframes boost-arrow{
    0%,100%{transform:none;text-shadow:none}
    50%{transform:translateX(10px) scaleX(1.5);text-shadow:-10px 0 0 rgba(255,184,0,.5),-20px 0 0 rgba(255,91,38,.3)}
  }
}
.fee.in .v.hit{animation:flash 1s ease-out 1.2s both}
@keyframes flash{
  0%{transform:scale(.6);opacity:0}
  50%{transform:scale(1.18);text-shadow:0 0 24px rgba(245,185,61,.9)}
  100%{transform:none;opacity:1;text-shadow:0 0 0 transparent}
}

/* ---------- ボタン：光が走る＋脈打つ ---------- */
.btn,.sticky a{position:relative;overflow:hidden;isolation:isolate}
.btn::before,.sticky a::before{
  content:"";position:absolute;top:0;bottom:0;left:-60%;width:40%;z-index:-1;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);
  transform:skewX(-20deg);animation:sheen 2.6s ease-in-out infinite;
}
@keyframes sheen{0%,55%{left:-60%}100%{left:130%}}
.fv-cta .btn,.sticky a{animation:pulse 2s ease-in-out infinite}
@keyframes pulse{
  0%,100%{box-shadow:0 4px 0 var(--accent-2),0 0 0 0 rgba(255,91,38,.45)}
  50%{box-shadow:0 4px 0 var(--accent-2),0 0 0 12px rgba(255,91,38,0)}
}

/* クリック時に星が弾ける */
.burst{position:fixed;width:14px;height:14px;pointer-events:none;z-index:80;
  background:var(--c,var(--boost-2));
  clip-path:polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%);
  animation:burst .7s var(--ease-dash) forwards}
@keyframes burst{
  from{transform:translate(-50%,-50%) scale(.4) rotate(0)}
  to{transform:translate(calc(-50% + var(--x)),calc(-50% + var(--y))) scale(1.1) rotate(220deg);opacity:0}
}

/* ---------- 作品の帯：スタンプが「ポンッ」と押される ---------- */
.works .stamp{transform:rotate(-6deg) scale(0);transition:none}
.works li.in .stamp{animation:stamp .5s var(--ease-pop) .1s both}
@keyframes stamp{
  0%{transform:rotate(-30deg) scale(2.2);opacity:0}
  60%{transform:rotate(-3deg) scale(.92);opacity:1}
  100%{transform:rotate(-6deg) scale(1)}
}
.works .work{transition:transform .25s var(--ease-pop)}
.works .work:hover{transform:translateY(-6px) rotate(-1deg)}

/* ---------- 動きを減らす設定：すべて静的に戻す ---------- */
@media (prefers-reduced-motion:reduce){
  .speedlines,.stars,.boost-meter,.burst{display:none}
  .rv,.art.rv{opacity:1;transform:none;clip-path:none}
  h2 .mark{background-size:100% 100%}
  .works .stamp{transform:rotate(-6deg)}
  .fv::before,.btn::before,.sticky a::before{animation:none}
}