/* ==========================================================================
   SWELL連携 CTA管理マスターシステム - 共通CSSアニメーション定義シート
   ========================================================================== */

/* ==========================================
   通常時（常時稼働）ボタンアニメーション
========================================== */

/* 1. ぷるぷる揺れる (強めのアピール) */
.anim-purupuru {
    animation: purupuru-cta 1.2s infinite;
}
@keyframes purupuru-cta {
    0%, 100% { transform: scale(1); }
    10%, 20% { transform: scale(0.9) rotate(-3deg); }
    30%, 50%, 70%, 90% { transform: scale(1.1) rotate(3deg); }
    40%, 60%, 80% { transform: scale(1.1) rotate(-3deg); }
}

/* 2. びよーん（上下なめらかな拡大縮小） */
.anim-biyoon {
    animation: biyoon-cta 1.2s infinite ease-in-out;
}
@keyframes biyoon-cta {
    0%, 100% { transform: scaleY(1); }
    50% { transform: scaleY(1.12) scaleX(0.92); }
}

/* 3. キラッと光が走る（プレミアム感を出す反射光） */
.anim-shine {
    position: relative;
    overflow: hidden;
}
.anim-shine::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 50%;
    height: 100%;
    background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,0.4) 50%, rgba(255,255,255,0) 100%);
    transform: skewX(-25deg);
    animation: shine-cta 2s infinite;
}
@keyframes shine-cta {
    0% { left: -100%; }
    100% { left: 100%; }
}

/* 4. ふわふわ浮遊（やさしく上品な動き） */
.anim-float {
    animation: float-cta 2s infinite ease-in-out;
}
@keyframes float-cta {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-6px); }
}

/* 5. ドクドク心拍（脈打つような鼓動） */
.anim-heartbeat {
    animation: heartbeat-cta 1.4s infinite ease-in-out;
}
@keyframes heartbeat-cta {
    0%, 100%, 50% { transform: scale(1); }
    25%, 75% { transform: scale(1.05); }
}

/* 6. ポヨンポヨン跳ねる（リズミカルなバウンド） */
.anim-bounce {
    animation: bounce-cta 2s infinite;
}
@keyframes bounce-cta {
    0%, 100%, 20%, 50%, 80% { transform: translateY(0); }
    40% { transform: translateY(-8px); }
    60% { transform: translateY(-4px); }
}


/* ==========================================
   マウスオーバー時（ホバー）アニメーション
========================================== */

/* A. 上にふわっと浮き上がる（影を深く、立体的に見せる） */
.hover-lift {
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s ease !important;
}
.hover-lift:hover {
    transform: translateY(-4px) !important;
    box-shadow: 0 12px 24px -6px rgba(0, 0, 0, 0.25) !important;
}

/* B. グッと大きくなる（シンプルなフォーカス効果） */
.hover-scale {
    transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
}
.hover-scale:hover {
    transform: scale(1.05) !important;
}

/* C. ボタンの周りがじんわり光る（ネオン発光風） */
.hover-glow {
    transition: box-shadow 0.3s ease !important;
}
.hover-glow:hover {
    box-shadow: 0 0 15px rgba(244, 63, 94, 0.6) !important;
}

/* D. グラデーションがなめらかに横に流れる */
.hover-slide-bg {
    background-size: 200% auto !important;
    transition: background-position 0.4s ease, transform 0.2s ease !important;
}
.hover-slide-bg:hover {
    background-position: right center !important;
    transform: translateY(-1px) !important;
}

/* E. 少し押し込まれて沈む（クリック感を出すフィードバック） */
.hover-sink {
    transition: transform 0.2s ease, box-shadow 0.2s ease !important;
}
.hover-sink:hover {
    transform: translateY(2px) !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
}


/* ==========================================
   コピペステップボット用追加アニメーション
========================================== */

/* 吹き出しのなめらかなぷるぷる浮遊（1pxずつの整数移動でブレを防ぐ設定） */
@keyframes sc-bob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); } 
}
.sc-bwrap {
  display: inline-block;
  position: relative;
  margin-bottom: 0;
  animation: sc-bob 1.8s steps(6) infinite;
  will-change: transform;
}

/* 文字タイピング効果 */
@keyframes sc-typing { 
  from { max-width: 0; } 
  to { max-width: 100%; } 
}