/* BUTTONS — template's sharp, outlined, diagonal-sweep-fill buttons */
.btn {
    display: inline-flex; align-items: center; gap: 12px;
    padding: 15px 30px; border-radius: 0;
    font-family: var(--font-display); font-size: 11px;
    font-weight: 600; letter-spacing: 2px; text-transform: uppercase;
    text-decoration: none; transition: color 0.5s cubic-bezier(1.0, 0.5, 0.8, 1.0);
    cursor: pointer; border: 1px solid var(--text-primary); color: var(--text-primary);
    background: transparent;
    position: relative; z-index: 5; overflow: hidden;
}
.btn::before, .btn::after {
    content: ''; position: absolute; z-index: -1;
    width: 120%; height: 120%; left: 0; top: 0;
    background: var(--text-primary);
    transition: transform 0.7s ease-out;
}
.btn::before { transform: translateX(-100%) rotate(45deg); }
.btn::after  { transform: translateX(100%) rotate(45deg); }
.btn:hover::before { transform: translateX(-10%) rotate(50deg) scale(10); }
.btn:hover::after  { transform: translateX(10%) rotate(50deg) scale(10); }
.btn:hover { color: var(--bg); }


.btn-primary {
    background: var(--text-primary); color: var(--bg);
    border-color: var(--text-primary);
}
.btn-primary::before, .btn-primary::after { background: var(--bg); }
.btn-primary:hover { color: var(--text-primary); }

.btn-secondary {
    background: transparent; color: var(--text-primary);
    border: 1px solid var(--text-primary);
}