/* ==========================================================================
   Premium Buttons (Magnetic style base)
   ========================================================================== */

.btn-premium {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 1rem 2.5rem;
    background: var(--color-white);
    color: var(--color-black);
    border-radius: 100px; /* Pill shape */
    font-weight: 600;
    font-size: 0.875rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), background 0.3s ease, color 0.3s ease;
    overflow: hidden;
    position: relative;
    border: 1px solid transparent;
}

.btn-premium::before {
    content: '';
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background: var(--color-black);
    transform: scaleY(0);
    transform-origin: bottom;
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    z-index: -1;
}

.btn-premium:hover {
    color: var(--color-white);
    border-color: var(--color-white);
}

.btn-premium:hover::before {
    transform: scaleY(1);
}

.btn-outline-premium {
    background: transparent;
    color: var(--color-white);
    border: 1px solid var(--color-white);
}

.btn-outline-premium::before {
    background: var(--color-white);
}

.btn-outline-premium:hover {
    color: var(--color-black);
}

/* Generic magnetic wrapper for GSAP */
.magnetic-wrap {
    display: inline-block;
}

/* Apple-Grade Tactile Elastic Feedback for Mobile & Desktop */
.btn, 
.btn-premium, 
.btn-hero-pill, 
.coach-tab-btn, 
.btn-profile-gradient, 
.menu-toggle {
    transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.25s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
    -webkit-user-select: none;
    user-select: none;
    will-change: transform;
}

.btn:active, 
.btn-premium:active, 
.btn-hero-pill:active, 
.coach-tab-btn:active, 
.btn-profile-gradient:active,
.menu-toggle:active {
    transform: scale(0.965) !important;
}