/**
 * Touch — Button Styles
 * 10 visual + animation styles for the main widget trigger button.
 *
 * Applied as .tch-btn-style-{slug} on the root .tch-widget container.
 * Selector pattern: .tch-btn-style-{slug} .tch-widget-button
 *
 * @package Touch
 * @since   1.2.0
 */

/* ============================================================
   Shared keyframes
   ============================================================ */

/* Pulse — single ring expanding outward */
@keyframes tch-btn-pulse {
    0%   { box-shadow: 0 0 0 0   rgba(var(--tch-btn-rgb, 59,130,246), 0.55); }
    70%  { box-shadow: 0 0 0 18px rgba(var(--tch-btn-rgb, 59,130,246), 0);   }
    100% { box-shadow: 0 0 0 0   rgba(var(--tch-btn-rgb, 59,130,246), 0);   }
}

/* Bounce — gentle vertical bounce */
@keyframes tch-btn-bounce {
    0%, 100% { transform: translateY(0); }
    30%       { transform: translateY(-8px); }
    60%       { transform: translateY(-3px); }
}

/* Shake — horizontal attention shake (fires periodically) */
@keyframes tch-btn-shake {
    0%, 100% { transform: translateX(0);   }
    15%       { transform: translateX(-5px); }
    30%       { transform: translateX(5px);  }
    45%       { transform: translateX(-4px); }
    60%       { transform: translateX(4px);  }
    75%       { transform: translateX(-2px); }
    90%       { transform: translateX(2px);  }
}

/* Glow — pulsing coloured shadow */
@keyframes tch-btn-glow {
    0%, 100% { box-shadow: 0 0 8px 2px  rgba(var(--tch-btn-rgb, 59,130,246), 0.4); }
    50%       { box-shadow: 0 0 22px 8px rgba(var(--tch-btn-rgb, 59,130,246), 0.7); }
}

/* Spin icon */
@keyframes tch-btn-spin-icon {
    from { transform: rotate(0deg);   }
    to   { transform: rotate(360deg); }
}

/* Morph border-radius */
@keyframes tch-btn-morph {
    0%, 100% { border-radius: 50%; }
    25%       { border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%; }
    50%       { border-radius: 12px; }
    75%       { border-radius: 70% 30% 30% 70% / 70% 70% 30% 30%; }
}

/* Float — smooth up-down */
@keyframes tch-btn-float {
    0%, 100% { transform: translateY(0);   box-shadow: 0 6px 20px rgba(0,0,0,0.15); }
    50%       { transform: translateY(-8px); box-shadow: 0 14px 28px rgba(0,0,0,0.2); }
}

/* Ring Ping — two sequential rings */
@keyframes tch-btn-ring-1 {
    0%   { opacity: 1; transform: scale(1);   }
    100% { opacity: 0; transform: scale(1.9); }
}
@keyframes tch-btn-ring-2 {
    0%   { opacity: 1; transform: scale(1);   }
    100% { opacity: 0; transform: scale(1.6); }
}

/* ============================================================
   STYLE 1 — Pulse
   Ripple ring expands outward continuously
   ============================================================ */

.tch-btn-style-pulse .tch-widget-button {
    animation: tch-btn-pulse 2s ease-out infinite;
}

.tch-btn-style-pulse .tch-widget-button:hover {
    transform: scale(1.1);
    animation-play-state: paused;
}

/* ============================================================
   STYLE 2 — Bounce
   Button bounces up/down gently on loop
   ============================================================ */

.tch-btn-style-bounce .tch-widget-button {
    animation: tch-btn-bounce 2.4s ease-in-out infinite;
}

.tch-btn-style-bounce .tch-widget-button:hover {
    animation-play-state: paused;
    transform: scale(1.08);
}

/* ============================================================
   STYLE 3 — Shake
   Periodic attention shake every ~4 s
   ============================================================ */

.tch-btn-style-shake .tch-widget-button {
    animation: tch-btn-shake 0.7s ease 0s 1,
               tch-btn-shake 0.7s ease 4s infinite;
}

.tch-btn-style-shake .tch-widget-button:hover {
    animation: none;
    transform: scale(1.08);
}

/* ============================================================
   STYLE 4 — Glow
   Pulsing neon glow shadow
   ============================================================ */

.tch-btn-style-glow .tch-widget-button {
    animation: tch-btn-glow 2s ease-in-out infinite;
}

.tch-btn-style-glow .tch-widget-button:hover {
    animation-play-state: paused;
    transform: scale(1.08);
}

/* ============================================================
   STYLE 5 — Spin Icon
   Chat icon rotates slowly; pauses on hover
   ============================================================ */

.tch-btn-style-spin-icon .tch-widget-button .tch-button-icon {
    animation: tch-btn-spin-icon 6s linear infinite;
}

.tch-btn-style-spin-icon .tch-widget-button:hover .tch-button-icon {
    animation-play-state: paused;
}

.tch-btn-style-spin-icon .tch-widget-button:hover {
    transform: scale(1.08);
}

/* ============================================================
   STYLE 6 — Morph
   Button shape morphs between circle and square
   ============================================================ */

.tch-btn-style-morph .tch-widget-button {
    animation: tch-btn-morph 5s ease-in-out infinite;
}

.tch-btn-style-morph .tch-widget-button:hover {
    animation-play-state: paused;
    border-radius: 12px;
    transform: scale(1.08);
}

/* ============================================================
   STYLE 7 — Float
   Smooth up-down floating with shadow depth
   ============================================================ */

.tch-btn-style-float .tch-widget-button {
    animation: tch-btn-float 3s ease-in-out infinite;
}

.tch-btn-style-float .tch-widget-button:hover {
    animation-play-state: paused;
    transform: translateY(-10px) scale(1.05);
}

/* ============================================================
   STYLE 8 — Ring Ping
   Two concentric rings ping outward in sequence
   Uses ::before and ::after pseudo-elements
   ============================================================ */

.tch-btn-style-ring-ping .tch-widget-button-wrap {
    position: relative;
}

.tch-btn-style-ring-ping .tch-widget-button::before,
.tch-btn-style-ring-ping .tch-widget-button::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    border: 2.5px solid var(--tch-primary-color);
    pointer-events: none;
    opacity: 0;
}

.tch-btn-style-ring-ping .tch-widget-button::before {
    animation: tch-btn-ring-1 2.2s ease-out 0s infinite;
}

.tch-btn-style-ring-ping .tch-widget-button::after {
    animation: tch-btn-ring-2 2.2s ease-out 0.6s infinite;
}

.tch-btn-style-ring-ping .tch-widget-button:hover {
    transform: scale(1.08);
}

.tch-btn-style-ring-ping .tch-widget-button:hover::before,
.tch-btn-style-ring-ping .tch-widget-button:hover::after {
    animation-play-state: paused;
}

/* ============================================================
   STYLE 9 — Magnetic
   Strong scale + slight tilt on hover (CSS only)
   ============================================================ */

.tch-btn-style-magnetic .tch-widget-button {
    transition: transform 200ms cubic-bezier(0.34, 1.56, 0.64, 1),
                box-shadow 200ms ease !important;
}

.tch-btn-style-magnetic .tch-widget-button:hover {
    transform: scale(1.18) rotate(-6deg) !important;
    box-shadow: 0 12px 32px rgba(0,0,0,0.25);
}

.tch-btn-style-magnetic .tch-widget-button:active {
    transform: scale(0.92) rotate(4deg) !important;
}

/* ============================================================
   STYLE 10 — Minimal
   No idle animation — clean scale on hover only
   ============================================================ */

.tch-btn-style-minimal .tch-widget-button {
    animation: none;
    transition: transform 180ms ease, box-shadow 180ms ease !important;
}

.tch-btn-style-minimal .tch-widget-button:hover {
    transform: scale(1.06);
    box-shadow: 0 6px 18px rgba(0,0,0,0.18);
}

.tch-btn-style-minimal .tch-widget-button:active {
    transform: scale(0.96);
}

/* ============================================================
   Override: stop animations when panel is open
   ============================================================ */

.tch-widget.tch-open .tch-widget-button {
    animation-play-state: paused !important;
}

.tch-widget.tch-open .tch-widget-button .tch-button-icon {
    animation-play-state: paused !important;
}

/* ============================================================
   Reduced motion — disable all button animations
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
    [class*="tch-btn-style-"] .tch-widget-button,
    [class*="tch-btn-style-"] .tch-widget-button::before,
    [class*="tch-btn-style-"] .tch-widget-button::after,
    [class*="tch-btn-style-"] .tch-widget-button .tch-button-icon {
        animation: none !important;
    }
}