/* Button Collection Base */
.wml-btn-collection {
    display: inline-flex;
    justify-content: center;
    align-items: center;
}

/* Base Button Architecture */
.wml-btn {
    position: relative;
    cursor: pointer;
    border: none;
    outline: none;
    padding: var(--wml-btn-padding, 14px 32px);
    font-size: var(--wml-btn-font-size, 14px);
    font-weight: var(--wml-btn-font-weight, 600);
    border-radius: var(--wml-btn-border-radius, 8px);
    background: var(--wml-btn-bg, #20252e);
    color: var(--wml-btn-color, #fff);
    transition: all 0.4s cubic-bezier(0.7, 0, 0.2, 1);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
    text-decoration: none;
    overflow: visible;
}

.wml-btn:hover {
    background: var(--wml-btn-hover-bg, var(--wml-btn-bg, #20252e));
    color: var(--wml-btn-hover-color, var(--wml-btn-color, #fff));
}

/* B04: THE DUAL REVEAL */
.wml-btn--b04 { overflow: hidden; }
.wml-btn--b04 span { transition: transform 0.5s cubic-bezier(0.7, 0, 0.2, 1); }
.wml-btn--b04::after { 
    content: attr(data-text); 
    position: absolute; 
    top: 100%; 
    left: 0; 
    width: 100%; 
    height: 100%; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    transition: transform 0.5s cubic-bezier(0.7, 0, 0.2, 1); 
    color: var(--wml-btn-b04-hover-text, #fff); 
}
.wml-btn--b04:hover span { transform: translateY(-300%); }
.wml-btn--b04:hover::after { transform: translateY(-100%); }

/* B06: THE PRISM BORDER */
.wml-btn--b06 { 
    background: var(--wml-btn-bg, #0b0e14); 
    padding: var(--wml-btn-border-width, 2px); 
    overflow: hidden; 
}
.wml-btn--b06 .b06-in { 
    background: var(--wml-btn-b06-inner-bg, #11141b); 
    padding: var(--wml-btn-padding, 12px 30px); 
    border-radius: calc(var(--wml-btn-border-radius, 8px) - var(--wml-btn-border-width, 2px)); 
    width: 100%; 
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2; 
    transition: background 0.3s;
}
.wml-btn--b06:hover .b06-in {
    background: var(--wml-btn-hover-bg, var(--wml-btn-b06-inner-bg, #11141b));
}
.wml-btn--b06::after { 
    content: ''; 
    position: absolute; 
    width: 200%; 
    height: 200%; 
    background: conic-gradient(var(--wml-btn-b06-grad1, #6366f1), var(--wml-btn-b06-grad2, #ec4899), var(--wml-btn-b06-grad1, #6366f1)); 
    animation: wml-rot 3s linear infinite; 
    z-index: 1; 
}
@keyframes wml-rot { to { transform: rotate(360deg); } }

/* B10: THE SIGNAL PULSE */
.wml-btn--b10::before { 
    content: ''; 
    position: absolute; 
    width: 8px; 
    height: 8px; 
    background: var(--wml-btn-b10-pulse, #6366f1); 
    border-radius: 50%; 
    opacity: 0; 
    transform: scale(0); 
    transition: 0.4s cubic-bezier(0.7, 0, 0.2, 1); 
    top: 50%;
    left: 50%;
    margin-left: -4px;
    margin-top: -4px;
}
.wml-btn--b10:hover::before { 
    opacity: 1; 
    transform: scale(1) translateY(-35px); 
}

/* B18: THE TARGET LOCK */
.wml-btn--b18::before { 
    content: ''; 
    position: absolute; 
    inset: -4px; 
    border: var(--wml-btn-border-width, 2px) solid var(--wml-btn-b18-border, #6366f1); 
    border-radius: calc(var(--wml-btn-border-radius, 8px) + 4px); 
    transform: scale(1.3); 
    opacity: 0; 
    transition: 0.4s; 
}
.wml-btn--b18:hover::before { 
    transform: scale(1); 
    opacity: 1; 
}

/* B22: THE PHANTOM SWEEP */
.wml-btn--b22:hover { 
    mask-image: linear-gradient(45deg, #000 25%, rgba(0,0,0,0.2) 50%, #000 75%); 
    mask-size: 200%; 
    animation: wml-maskMove 1s infinite linear; 
}
@keyframes wml-maskMove { from { mask-position: 100%; } to { mask-position: -100%; } }

/* B23: THE OFFSET STRIKE */
.wml-btn--b23:hover { 
    outline: var(--wml-btn-border-width, 4px) solid var(--wml-btn-b23-outline, #6366f1); 
    outline-offset: var(--wml-btn-offset, 8px); 
}

/* B24: THE LEAD FOLLOWER */
.wml-btn--b24::before { 
    content: '→'; 
    position: absolute; 
    right: 15px; 
    opacity: 0; 
    transition: 0.3s; 
}
.wml-btn--b24:hover { 
    padding-right: calc(32px + 20px); 
}
.wml-btn--b24:hover::before { 
    opacity: 1; 
    right: 20px; 
}

/* B25: THE NEON HALO */
.wml-btn--b25 { 
    border: 1px solid var(--wml-btn-b25-border, #ec4899); 
    background: var(--wml-btn-bg, transparent); 
    color: var(--wml-btn-b25-text, #ec4899); 
}
.wml-btn--b25:hover { 
    background: var(--wml-btn-hover-bg, #ec4899); 
    color: var(--wml-btn-hover-color, #fff); 
    box-shadow: 0 0 30px var(--wml-btn-b25-glow, #ec4899); 
}

/* B28: THE KINETIC JIGGLE */
.wml-btn--b28:hover { 
    animation: wml-jiggle 0.5s ease-in-out; 
}
@keyframes wml-jiggle { 
    0%, 100% { transform: scale(1); } 
    25% { transform: scale(0.9) rotate(-3deg); } 
    50% { transform: scale(1.1) rotate(3deg); } 
}

/* B30: THE DEEP PRESS */
.wml-btn--b30 { transition: 0.2s; }
.wml-btn--b30:hover { 
    background: var(--wml-btn-hover-bg, #2a2a2a); 
    box-shadow: inset 0 0 10px var(--wml-btn-b30-shadow, rgba(0,0,0,0.5)); 
    transform: scale(0.98); 
}

/* MODERN BUTTON */
.wml-btn--modern {
    gap: 4px;
    border: var(--wml-btn-border-width, 4px) solid transparent;
    background-color: var(--wml-btn-bg, inherit);
    color: var(--wml-btn-modern-primary, greenyellow);
    box-shadow: 0 0 0 calc(var(--wml-btn-border-width, 4px) / 2) var(--wml-btn-modern-primary, greenyellow);
    overflow: hidden;
    transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1);
}

.wml-btn--modern svg {
    position: absolute;
    width: 24px;
    fill: var(--wml-btn-modern-primary, greenyellow);
    z-index: 9;
    transition: all 0.8s cubic-bezier(0.23, 1, 0.32, 1);
}

.wml-btn--modern .arr-1 {
    right: 16px;
}

.wml-btn--modern .arr-2 {
    left: -25%;
}

.wml-btn--modern .circle {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 20px;
    height: 20px;
    background-color: var(--wml-btn-modern-primary, greenyellow);
    border-radius: 50%;
    opacity: 0;
    transition: all 0.8s cubic-bezier(0.23, 1, 0.32, 1);
}

.wml-btn--modern .text {
    position: relative;
    z-index: 1;
    transform: translateX(-12px);
    transition: all 0.8s cubic-bezier(0.23, 1, 0.32, 1);
}

.wml-btn--modern:hover {
    box-shadow: 0 0 0 12px transparent;
    color: var(--wml-btn-hover-color, #212121);
    background-color: transparent;
}

.wml-btn--modern:hover .arr-1 {
    right: -25%;
}

.wml-btn--modern:hover .arr-2 {
    left: 16px;
}

.wml-btn--modern:hover .text {
    transform: translateX(12px);
}

.wml-btn--modern:hover svg {
    fill: var(--wml-btn-hover-color, #212121);
}

.wml-btn--modern:active {
    transform: scale(0.95);
    box-shadow: 0 0 0 var(--wml-btn-border-width, 4px) var(--wml-btn-modern-primary, greenyellow);
}

.wml-btn--modern:hover .circle {
    width: 220px;
    height: 220px;
    opacity: 1;
}