/* ============================================================
   動きの強化室 — HAZUMU 後載せアニメーション（非破壊）
   参照デモ: collage-desk（Signature 2 Hover float / washi-tape sway）
   外すとき: このファイルと anim.js、index.html の読み込み2行を削除するだけ
   掟: 既存クラス・transformを上書きしない（data属性＋独立プロパティのみ）
   ============================================================ */

/* ① ステッカーのそよぎ + ホバーフロート（collage-desk S2 実測値）
      対象: anim.js が data-anim-sway を付与したステッカーバッジ */
@keyframes animSway {
  0%, 100% { rotate: calc(var(--tilt, -2.5deg) - 1.4deg); }
  50%      { rotate: calc(var(--tilt, -2.5deg) + 1.4deg); }
}
[data-anim-sway] {
  animation: animSway var(--anim-sway-dur, 6.4s) ease-in-out infinite;
  transition: translate 0.32s cubic-bezier(0.33, 1, 0.68, 1), scale 0.32s cubic-bezier(0.33, 1, 0.68, 1);
}
[data-anim-sway]:hover {
  translate: 0 -10px;
  scale: 1.045;
  animation-play-state: paused;
  rotate: calc(var(--tilt, -2.5deg) * 0.6); /* 60%だけ姿勢を起こす（collage-desk準拠） */
}

/* ② 斜めリボン帯のスクロール視差
      rotateはtailwindのtransformが持つため、独立プロパティ translate で共存させる */
[data-anim-ribbon='a'] { translate: calc(var(--anim-scroll, 0) * -0.05px) 0; }
[data-anim-ribbon='b'] { translate: calc(var(--anim-scroll, 0) * 0.04px) 0; }

/* ③ 主要CTAの squash & stretch（「飛び込む」を動きで体現） */
@keyframes animSquash {
  0%   { scale: 1 1; }
  38%  { scale: 1.06 0.92; }
  70%  { scale: 0.97 1.04; }
  100% { scale: 1 1; }
}
[data-anim-cta]:hover {
  animation: animSquash 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) 1;
}

/* 動きを減らす設定の尊重: すべて停止 */
@media (prefers-reduced-motion: reduce) {
  [data-anim-sway] { animation: none; transition: none; }
  [data-anim-sway]:hover { translate: none; scale: none; rotate: var(--tilt, -2.5deg); }
  [data-anim-ribbon='a'], [data-anim-ribbon='b'] { translate: none; }
  [data-anim-cta]:hover { animation: none; }
}