/* ==========================================================================
   组件与动画 (components.css)
   ========================================================================== */
/* 通用按钮 */
.btn {
    display: inline-flex; align-items: center; justify-content: center;
    padding: 0.75rem 1.5rem; border-radius: 6px; text-decoration: none;
    font-weight: 500; text-align: center; cursor: pointer; border: none; transition: all 0.3s ease;
}
.btn:hover { transform: translateY(-2px); }

.btn-primary {
    background: var(--gradient-primary); color: var(--text-light) !important;
    border-radius: 50px !important; font-weight: 600; box-shadow: 0 4px 15px rgba(147, 51, 234, 0.3);
    position: relative; overflow: hidden;
}
.btn-primary:hover {
    background: var(--gradient-hover); transform: translateY(-3px) scale(1.05);
    box-shadow: 0 8px 25px rgba(147, 51, 234, 0.4);
}
.btn-primary::before {
    content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent); transition: left 0.5s;
}
.btn-primary:hover::before { left: 100%; }
.btn-primary.btn-highlight { font-size: 1.1rem; padding: 0.875rem 2rem; }

.btn-secondary { background-color: var(--color-secondary); color: var(--text-light); }
.btn-secondary:hover { background-color: var(--color-secondary-dark); }
.btn-success { background-color: var(--color-success); color: var(--text-light); }
.btn-success:hover { background-color: var(--color-success-dark); }

/* 星星装饰 */
.star {
    position: absolute; display: block; width: 0; height: 0;
    border-right: 10px solid transparent; border-bottom: 7px solid var(--color-primary); border-left: 10px solid transparent;
    transform: rotate(35deg); opacity: 0.7;
}
.star:before {
    border-bottom: 8px solid var(--color-primary); border-left: 3px solid transparent; border-right: 3px solid transparent;
    position: absolute; height: 0; width: 0; top: -4.5px; left: -6.5px; display: block; content: ''; transform: rotate(-35deg);
}
.star:after {
    position: absolute; display: block; top: 0.3px; left: -10.5px; width: 0; height: 0;
    border-right: 10px solid transparent; border-bottom: 7px solid var(--color-primary); border-left: 10px solid transparent;
    transform: rotate(-70deg); content: '';
}

/* 动画库 */
@keyframes bounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
@keyframes float { 0% { transform: translateY(0px); } 50% { transform: translateY(-10px); } 100% { transform: translateY(0px); } }
@keyframes twinkle { 0% { opacity: 0.3; } 50% { opacity: 1; } 100% { opacity: 0.3; } }
@keyframes pulse { 0% { transform: scale(1); } 50% { transform: scale(1.05); } 100% { transform: scale(1); } }
@keyframes shake { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-5px); } 75% { transform: translateX(5px); } }
@keyframes gradient { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } }