/* ══════════════════════════════════════════════════════════════
   LEGACRAFT V5 MOTION — 演出レイヤー（v5-pop.css の上に重ねる）
   - 動きは transform と opacity と translate/rotate/scale だけ（再レイアウトなし）
   - prefers-reduced-motion: reduce の人には何も動かさない
   - このファイルと v5-motion.js を外せば、元の見た目に戻る
   ══════════════════════════════════════════════════════════════ */

/* ── 常に有効（静的な部品）──────────────── */
.scroll-bar{position:fixed;left:0;top:0;z-index:70;width:100%;height:5px;pointer-events:none;
  transform-origin:0 50%;scale:0 1;
  background:linear-gradient(90deg,var(--red),var(--yellow) 33%,var(--green) 66%,var(--blue))}
.hd{transition:box-shadow .25s}
.hd.is-scrolled{box-shadow:0 6px 0 rgba(27,27,47,.08)}
.hero-in,.hero-facts,.final-in{position:relative;z-index:1}

/* 背景に浮かぶおもちゃブロック（JS が .hero と .final に差し込む） */
.deco-b{position:absolute;z-index:0;pointer-events:none;
  width:var(--s);height:calc(var(--s) * .62);
  border:3px solid var(--ink);border-radius:7px;background:var(--c);box-shadow:3px 3px 0 var(--ink);
  rotate:var(--r0)}
.deco-b::before,.deco-b::after{content:"";position:absolute;top:calc(var(--s) * -.17);
  width:calc(var(--s) * .26);height:calc(var(--s) * .17);
  border:3px solid var(--ink);border-bottom:0;border-radius:6px 6px 0 0;background:var(--c)}
.deco-b::before{left:13%} .deco-b::after{right:13%}
.final .deco-b{opacity:.9}

@media (prefers-reduced-motion:no-preference){

  /* ── キーフレーム ── */
  @keyframes m-pop{0%{opacity:0;scale:.55;translate:0 16px}60%{opacity:1;scale:1.07}100%{opacity:1;scale:1;translate:0 0}}
  @keyframes m-up{0%{opacity:0;translate:0 30px}100%{opacity:1;translate:0 0}}
  @keyframes m-drop{0%{opacity:0;translate:0 -46px}65%{opacity:1;translate:0 8px}100%{opacity:1;translate:0 0}}
  @keyframes m-bob{0%,100%{translate:0 0}50%{translate:0 -10px}}
  @keyframes m-sway{0%,100%{rotate:-4deg}50%{rotate:4deg}}
  @keyframes m-wiggle{0%,100%{rotate:0deg}20%{rotate:-10deg}45%{rotate:8deg}70%{rotate:-4deg}}
  @keyframes m-card{0%{opacity:0;transform:translateY(34px) scale(.92)}100%{opacity:1;transform:none}}
  @keyframes m-chip{0%{opacity:0;transform:translateY(18px) scale(.6) rotate(-8deg)}100%{opacity:1;transform:none}}
  @keyframes m-deco{0%,100%{translate:0 0}50%{translate:0 -18px}}
  @keyframes m-shine{0%,62%{translate:-160% 0}100%{translate:360% 0}}
  @keyframes m-pulse{0%{box-shadow:var(--sh),0 0 0 0 rgba(6,199,85,.6)}80%,100%{box-shadow:var(--sh),0 0 0 20px rgba(6,199,85,0)}}
  @keyframes m-nudge{0%,100%{translate:0 0}50%{translate:5px 0}}
  @keyframes m-bounce{0%,100%{translate:0 0}50%{translate:0 10px}}
  @keyframes m-slide-in{0%{opacity:0;translate:140% 0}100%{opacity:1;translate:0 0}}
  @keyframes m-glow{0%,100%{text-shadow:3px 3px 0 #fff}50%{text-shadow:3px 3px 0 #fff,0 0 22px rgba(255,255,255,.9)}}

  /* ── ファーストビュー：順番に飛び出す ── */
  .hero-badges .badge{animation:m-pop .55s cubic-bezier(.34,1.56,.64,1) backwards}
  .hero-badges .badge:nth-child(1){animation-delay:.05s}
  .hero-badges .badge:nth-child(2){animation-delay:.15s}
  .hero-badges .badge:nth-child(3){animation-delay:.25s}
  .hero-h .l{animation:m-up .55s cubic-bezier(.22,1,.36,1) backwards}
  .hero-h .l:nth-child(1){animation-delay:.12s}
  .hero-h .l:nth-child(2){animation-delay:.22s}
  .hero-h .l:nth-child(3){animation-delay:.32s}
  .hero-h .big,.hero-h .num{display:inline-block;animation:m-pop .7s cubic-bezier(.34,1.56,.64,1) .45s backwards,m-glow 3.2s ease-in-out 1.6s infinite}
  .hero-lead{animation:m-up .6s cubic-bezier(.22,1,.36,1) .5s backwards}
  .hero-price{animation:m-pop .65s cubic-bezier(.34,1.56,.64,1) .65s backwards}
  .hero-cta{animation:m-up .6s cubic-bezier(.22,1,.36,1) .8s backwards}
  .hero-visual{transition:translate .35s ease-out;translate:calc(var(--px,0) * -14px) calc(var(--py,0) * -10px)}
  .hero-visual .mock{animation:m-drop .85s cubic-bezier(.34,1.56,.64,1) .25s backwards,m-bob 6s ease-in-out 1.3s infinite}
  .hero-visual .phone{animation:m-drop .85s cubic-bezier(.34,1.56,.64,1) .45s backwards,m-bob 5s ease-in-out 1.5s infinite}
  .hero-visual .owner{animation:m-pop .75s cubic-bezier(.34,1.56,.64,1) .8s backwards,m-bob 4.4s ease-in-out 1.7s infinite}
  .stk.hero-stk{animation:m-pop .6s cubic-bezier(.34,1.56,.64,1) 1s backwards,m-sway 3.2s ease-in-out 1.7s infinite}
  .hero-facts .fact{animation:m-up .6s cubic-bezier(.22,1,.36,1) backwards}
  .hero-facts .fact:nth-child(1){animation-delay:.95s}
  .hero-facts .fact:nth-child(2){animation-delay:1.05s}
  .hero-facts .fact:nth-child(3){animation-delay:1.15s}

  .deco-b{animation:m-deco var(--t,6s) ease-in-out var(--dl,0s) infinite;
    transform:translate(calc(var(--px,0) * var(--d,16) * 1px),calc(var(--py,0) * var(--d,16) * 1px));
    transition:transform .4s ease-out}

  /* ── 見出し：キッカーが跳ねて、マーカーが左から引かれる ── */
  .sec-head.rv .kicker{display:inline-block}
  .sec-head.rv.in .kicker{animation:m-pop .55s cubic-bezier(.34,1.56,.64,1) .1s backwards}
  .sec-head.rv .h2 .mk{background-repeat:no-repeat;background-size:0% 100%;
    transition:background-size .9s cubic-bezier(.22,1,.36,1) .35s}
  .sec-head.rv.in .h2 .mk{background-size:100% 100%}
  .sec-ill,.final-ill{animation:m-bob 5s ease-in-out infinite}

  /* ── カード群：1枚ずつ弾んで出る（JS が .stg と --i を付ける）── */
  .rv.stg{opacity:1;transform:none}
  .rv.stg > *{opacity:0}
  .rv.stg.in > *{opacity:1;animation:m-card .7s cubic-bezier(.34,1.56,.64,1) backwards;animation-delay:calc(var(--i,0) * 90ms)}
  .chips.rv.stg.in > *{animation-name:m-chip;animation-duration:.5s;animation-delay:calc(var(--i,0) * 40ms)}
  .faq.rv.stg.in > *{animation-duration:.55s;animation-delay:calc(var(--i,0) * 55ms)}

  /* ── カードのホバー：持ち上がって、絵がくすぐったそうに揺れる ── */
  @media (hover:hover){
    .pt,.merit,.rk,.rs,.st,.sp,.woe,.tl{transition:translate .28s cubic-bezier(.34,1.56,.64,1),box-shadow .28s}
    .pt:hover,.merit:hover,.rk:hover,.rs:hover,.st:hover,.sp:hover,.woe:hover,.tl:hover{translate:-3px -6px;box-shadow:9px 11px 0 var(--ink)}
    .pt:hover .pt-ill,.merit:hover .ic-img,.rk:hover .rk-ill,.rs:hover .no img,.st:hover .st-ill,
    .sp:hover .ic-img,.woe:hover .woe-ill{animation:m-wiggle .6s ease-in-out}
    .chips li{transition:translate .2s cubic-bezier(.34,1.56,.64,1),rotate .2s}
    .chips li:hover{translate:0 -4px;rotate:-3deg}
  }

  /* ── 流れの矢印・お悩みの矢印 ── */
  .st::after{animation:m-nudge 1.2s ease-in-out infinite}
  .woes-arrow{animation:m-bounce 1.4s ease-in-out infinite}

  /* ── LINEボタン：光が走る、右下のボタンは波紋 ── */
  .btn.line{position:relative;overflow:hidden;isolation:isolate}
  .btn.line::after{content:"";position:absolute;top:-4px;bottom:-4px;left:0;width:38%;z-index:-1;pointer-events:none;
    background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);
    animation:m-shine 3.8s ease-in-out infinite}
  .float-line{animation:m-slide-in .7s cubic-bezier(.34,1.56,.64,1) 1.4s backwards}
  .float-line .btn{animation:m-pulse 2.4s ease-out 2.2s infinite}
  .float-line .btn:hover{animation-play-state:paused}

  /* クリックではじけるブロック（JS が生成） */
  .burst{position:fixed;z-index:80;width:12px;height:12px;border:2px solid var(--ink);border-radius:3px;pointer-events:none}
}

@media (max-width:700px){
  .final .deco-b{display:none}
  .hero .deco-b{--s:30px !important}
}

/* ══ 第2弾：ワクワク演出 ═════════════════════════════════════ */
@media (prefers-reduced-motion:no-preference){
  @keyframes m-char{0%{opacity:0;translate:0 -70px;rotate:-25deg;scale:.4}60%{opacity:1;translate:0 8px;rotate:6deg;scale:1.1}100%{opacity:1;translate:0 0;rotate:0deg;scale:1}}
  @keyframes m-stamp{0%{opacity:0;scale:3.2;rotate:-18deg}55%{opacity:1;scale:.86;rotate:3deg}75%{scale:1.08}100%{opacity:1;scale:1;rotate:0deg}}
  @keyframes m-shake{0%,100%{translate:0 0}20%{translate:-6px 3px}40%{translate:5px -3px}60%{translate:-3px 2px}80%{translate:2px -1px}}
  @keyframes m-spin-pop{0%{opacity:0;scale:.2;rotate:-270deg}70%{opacity:1;scale:1.15;rotate:15deg}100%{opacity:1;scale:1;rotate:0deg}}
  @keyframes m-swing{0%,100%{rotate:-6deg}50%{rotate:6deg}}
  @keyframes m-qwob{0%,100%{rotate:0deg;scale:1}40%{rotate:-14deg;scale:1.12}70%{rotate:10deg}}
  @keyframes m-faq{0%{opacity:0;translate:0 -10px}100%{opacity:1;translate:0 0}}
  @keyframes m-logo{0%{opacity:0;translate:0 -30px;rotate:-12deg}60%{opacity:1;translate:0 4px;rotate:4deg}100%{opacity:1;translate:0 0;rotate:0deg}}

  /* ファーストビュー「制作費0円」：1文字ずつ空から落ちてくる（JS が .ch に分割） */
  .hero-h .big{animation:m-glow 3.2s ease-in-out 1.8s infinite}
  .hero-h .big .ch{display:inline-block;animation:m-char .7s cubic-bezier(.34,1.56,.64,1) backwards;animation-delay:calc(.35s + var(--ci) * 85ms)}

  /* ロゴ：落ちてきて、触るとぴょこっと */
  .brand img{animation:m-logo .7s cubic-bezier(.34,1.56,.64,1) backwards}
  @media (hover:hover){.brand:hover img{animation:m-wiggle .6s ease-in-out}}

  /* 料金「0円」：ハンコを押すようにドン！ カードごと揺れる */
  .plan.rv .pp .v.red{display:inline-block}
  .plan.rv.in .pp .v.red{animation:m-stamp .6s cubic-bezier(.34,1.56,.64,1) .45s backwards}
  .plan.rv.in{animation:m-shake .35s ease-out .8s}

  /* 5ステップ：番号がくるっと回って登場 */
  .steps.rv.stg.in .st .sn{animation:m-spin-pop .7s cubic-bezier(.34,1.56,.64,1) backwards;animation-delay:calc(var(--i,0) * 90ms + .25s)}

  /* 失敗ランキングの王冠がゆらゆら、お悩みの「?」がときどき首をかしげる */
  .rk .crown{transform-origin:50% 120%;animation:m-swing 2.6s ease-in-out infinite}
  .rk:nth-child(2) .crown{animation-delay:-.9s} .rk:nth-child(3) .crown{animation-delay:-1.7s}
  .woe::before{animation:m-qwob 3.4s ease-in-out infinite;animation-delay:calc(var(--i,0) * .45s)}

  /* よくある質問：開いた答えがすっと出る */
  .faq details[open] .fa{animation:m-faq .35s cubic-bezier(.22,1,.36,1)}
  .faq summary::after{transition:rotate .3s cubic-bezier(.34,1.56,.64,1)}
  .faq details[open] summary::after{rotate:180deg}

  /* 制作例のマーキー：カードを少しずつ傾けて、触ると前に出る */
  .marq .mock{transition:scale .3s cubic-bezier(.34,1.56,.64,1),rotate .3s}
  .marq .mock:nth-child(odd){rotate:-2deg} .marq .mock:nth-child(even){rotate:2deg}
  @media (hover:hover){.marq .mock:hover{scale:1.08;rotate:0deg;z-index:2}}

  /* 制作例・ポイントのカードはマウスに合わせて立体的に傾く（JS） */
  .tilt{transform-style:preserve-3d;will-change:transform}

  /* マウスの軌跡に出る星（JS、ファーストビュー内だけ） */
  .spark{position:fixed;z-index:75;width:16px;height:16px;pointer-events:none;
    clip-path:polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%)}

  /* 最後のセクションに来たら紙吹雪（JS） */
  .confetti{position:fixed;z-index:85;top:-20px;pointer-events:none;width:10px;height:16px;border:2px solid var(--ink);border-radius:3px}
}