/* ショップの「手触り」 feel.css（2026-09-03）。仕組みは js/feel.js。作法は 2nd-Brain/03_知識ベース/手触りの作法.md */
.feel-taps { position: fixed; inset: 0; pointer-events: none; z-index: 5000; }
.feel-ring {
  position: absolute; width: 26px; height: 26px; margin: -13px 0 0 -13px; border-radius: 50%;
  border: 1.5px solid rgba(201, 161, 84, .85); box-shadow: 0 0 10px rgba(201, 161, 84, .45), inset 0 0 8px rgba(201, 161, 84, .25);
  animation: feel-ring .55s cubic-bezier(.2, .9, .3, 1) forwards;
}
@keyframes feel-ring { 0% { transform: scale(.35); opacity: .9; } 100% { transform: scale(2.1); opacity: 0; } }
.feel-hl {
  position: absolute; pointer-events: none;
  background: linear-gradient(135deg, rgba(201, 161, 84, .16), rgba(201, 161, 84, .05));
  box-shadow: 0 0 0 1px rgba(201, 161, 84, .55), 0 0 14px rgba(201, 161, 84, .3);
  animation: feel-hl .5s cubic-bezier(.2, 1.3, .3, 1) forwards;
}
@keyframes feel-hl { 0% { transform: scale(.97); opacity: 1; } 55% { transform: scale(1.02); opacity: .75; } 100% { transform: scale(1); opacity: 0; } }
/* カートに入れた瞬間の火花（釦の中心から） */
.feel-spark {
  position: absolute; width: 5px; height: 5px; margin: -2px 0 0 -2px; border-radius: 50%;
  background: radial-gradient(circle, #fff3cf, #c9a154 60%, transparent); box-shadow: 0 0 6px rgba(239, 212, 138, .8);
  animation: feel-spark .9s ease-out forwards;
}
@keyframes feel-spark { 0% { transform: translate(0, 0) scale(1); opacity: 1; } 100% { transform: translate(var(--dx), var(--dy)) scale(.2); opacity: 0; } }
/* 釦そのものは少しだけ弾む（app.js の :active scale(.98) と同じ transform を使うので安全） */
.add-to-cart-btn.feel-pop, .product-add-btn.feel-pop, .variant-option-btn.feel-pop { animation: feel-pop .45s cubic-bezier(.2, 1.3, .3, 1); }
@keyframes feel-pop { 0% { transform: scale(.96); } 60% { transform: scale(1.03); } 100% { transform: scale(1); } }
/* 音の切り替え（カートの見出し・印だけ） */
.feel-sound {
  margin-left: auto; margin-right: 6px; padding: 4px 6px; border: 0; background: transparent; cursor: pointer;
  font-size: 15px; line-height: 1; opacity: .55; transition: opacity .2s, transform .15s;
}
.feel-sound:hover { opacity: 1; }
.feel-sound:active { transform: scale(.9); }
.feel-sound.off { opacity: .35; }
@media (prefers-reduced-motion: reduce) { .feel-ring, .feel-hl, .feel-spark, .add-to-cart-btn.feel-pop, .product-add-btn.feel-pop, .variant-option-btn.feel-pop { animation: none; } }