/* ==========================================================================
   BUTTONS — the .btn family (primary / ghost / sm): animated gradient,
   glow, press feedback and the click-ripple.
   ========================================================================== */

.btn {
    position: relative;
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    padding: .9rem 1.7rem;
    border-radius: 100px;
    font-weight: 600;
    font-size: .95rem;
    border: 1px solid transparent;
    transition: transform .3s var(--ease), box-shadow .4s var(--ease), border-color .35s, background-position .6s var(--ease-soft);
    white-space: nowrap;
}
.btn i { font-size: .85em; transition: transform .3s var(--ease); }
.btn:hover i { transform: translate(3px, -3px); }
.btn:active { transform: scale(.96); transition-duration: .12s; }

/* energy-ripple burst, spawned at the click point by js/modules/ripple.js */
.btn-ripple {
    position: absolute;
    border-radius: 50%;
    background: rgba(255,255,255,.55);
    transform: translate(-50%, -50%) scale(0);
    pointer-events: none;
    animation: rippleAnim .6s ease-out forwards;
}
@keyframes rippleAnim { to { transform: translate(-50%, -50%) scale(1); opacity: 0; } }

.btn--primary {
    color: #06070c;
    background: linear-gradient(120deg, var(--accent), var(--accent-2), var(--accent-3), var(--accent-2), var(--accent));
    background-size: 250% 100%;
    background-position: 0% 50%;
    box-shadow: 0 8px 26px -8px rgba(var(--accent-rgb), .55);
}
.btn--primary:hover {
    background-position: 100% 50%;
    box-shadow: 0 14px 38px -8px rgba(var(--accent-rgb), .8);
    transform: translateY(-2px);
}
.btn--primary:active { transform: translateY(-2px) scale(.96); }

.btn--ghost {
    color: var(--text);
    border-color: var(--border);
    background: var(--panel);
}
.btn--ghost:hover {
    border-color: rgba(var(--accent-rgb), .55);
    color: var(--accent);
    box-shadow: 0 0 0 1px rgba(var(--accent-rgb), .18), 0 10px 26px -12px rgba(var(--accent-rgb), .5);
}
.btn--sm { padding: .6rem 1.2rem; font-size: .82rem; }