/* Immersify – Buttons
   .button-primary – the neon gradient, black text, glow that lifts on hover
   .button-ghost   – violet hairline that lights up cyan on hover
   .button-sm      – the compact size used in the header */

.button {
    position:        relative;
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    gap:             var(--space-sm);
    padding:         14px 28px;
    border:          1px solid transparent;
    border-radius:   var(--radius-md);
    font:            var(--text-11pr);
    letter-spacing:  0.06em;
    text-transform:  uppercase;
    text-align:      center;
    text-decoration: none;
    cursor:          pointer;
    transition:      background-position var(--transition-slow), box-shadow var(--transition-base), color var(--transition-base), border-color var(--transition-base), transform var(--transition-fast);

    &:active {
        transform: translateY(1px);
    }
}

.button-primary {
    color:               var(--color-black);
    background:          var(--gradient-neon);
    background-size:     200% 100%;
    background-position: 0% 0%;
    box-shadow:          var(--glow-button);

    &:hover,
    &:focus-visible {
        color:               var(--color-black);
        background-position: 100% 0%;
        box-shadow:          var(--glow-button-hover);
    }
}

.button-ghost {
    color:        var(--color-snow);
    background:   transparent;
    border-color: var(--color-violet-18);

    &:hover,
    &:focus-visible {
        color:        var(--color-cyan);
        border-color: var(--color-cyan);
        background:   rgb(0 191 255 / 5%);
        box-shadow:   var(--glow-cyan);
        text-shadow:  0 0 8px rgb(0 191 255 / 70%);
    }
}

.button-sm {
    padding: 10px 18px;
}

.button-group {
    display:     flex;
    flex-wrap:   wrap;
    align-items: center;
    gap:         var(--space-sm) 12px;
}

@media (prefers-reduced-motion: reduce) {
    .button {
        transition: none;
    }
}

/* Pixel icons (immersify_icon()) – 1em square, centred on the text by the
   inline-flex parents, nudging forward/back on hover */
.icon {
    width:      1em;
    height:     1em;
    flex:       none;
    transition: transform var(--transition-base);
}

a:hover .icon--arrow-right,
a:focus-visible .icon--arrow-right {
    transform: translateX(3px);
}

a:hover .icon--arrow-left,
a:focus-visible .icon--arrow-left {
    transform: translateX(-3px);
}

a:hover .icon--arrow-up-right,
a:focus-visible .icon--arrow-up-right {
    transform: translate(2px, -2px);
}