/*
 * button.css — Piconisseur signature button (button-078)
 * Kleuren gekoppeld aan variables.css i.p.v. hardcoded hex-waarden.
 * Standaardvariant: oranje. Modifier .button-078--dark: zwarte variant.
 */

:root {
    --button-078-color: var(--color-accent);
    --button-078-color-background: var(--color-primary);
    --button-078-border-color: var(--color-secondary);
    --button-078-color-focus: var(--color-secondary);
    --button-078-border-radius: var(--radius-full);
    --button-078-padding: 0.75em 1.5em;
    --button-078-translate-y: 0.25em;
    --button-078-focus-inset: -0.25em;
    --button-078-click-scale: 0.955 0.925;
    --button-078-ease-hover: cubic-bezier(0.38, 0.005, 0.215, 1);
    --button-078-ease-click: cubic-bezier(0.4, 0, 0.2, 1);
    --button-078-ease-focus: cubic-bezier(0.32, 0.72, 0, 1);
}

.button-078--dark {
    --button-078-color: var(--color-accent);
    --button-078-color-background: var(--color-secondary);
    --button-078-border-color: var(--color-secondary);
    --button-078-color-focus: var(--color-primary);
}

.button-078 {
    color: var(--button-078-color);
    -webkit-user-select: none;
    user-select: none;
    background-color: #0000;
    outline-style: none;
    border: none;
    padding: 0;
    line-height: 1;
    text-decoration: none;
    font-family: var(--font-primary);
    font-weight: 600;
    display: inline-grid;
    position: relative;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    -webkit-tap-highlight-color: transparent;
}

.button-078::before {
    content: '';
    display: block;
    position: absolute;
    inset: 0;
    background-color: var(--button-078-border-color);
    border-radius: var(--button-078-border-radius);
    translate: 0 calc(var(--button-078-translate-y) * 0.5);
}

.button-078::after {
    content: '';
    display: block;
    position: absolute;
    inset: var(--button-078-focus-inset);
    border-radius: var(--button-078-border-radius);
    transition: box-shadow 0.3s var(--button-078-ease-focus);
    pointer-events: none;
    z-index: 1;
}

.button-078:is(:focus-visible)::after {
    box-shadow: 0 0 0 0.125em var(--button-078-color-focus);
}

.button-078__place {
    pointer-events: none;
    width: 100%;
    height: 100%;
    translate: 0 calc(var(--button-078-translate-y) * .5);
    grid-area: 1 / 1;
    padding: 0;
    position: relative;
}

.button-078__container {
    z-index: 1;
    grid-area: 1 / 1;
    width: 100%;
    height: 100%;
    display: grid;
    position: relative;
    transition: translate 0.25s var(--button-078-ease-hover), transform 0.1s var(--button-078-ease-click);
}

.button-078__bg {
    border-radius: var(--button-078-border-radius);
    border-style: solid;
    border-width: .125em;
    border-top-color: var(--button-078-border-color);
    border-right-color: var(--button-078-border-color);
    background-color: var(--button-078-color-background);
    border-bottom-color: var(--button-078-border-color);
    border-left-color: var(--button-078-border-color);
    grid-area: 1 / 1;
    width: 100%;
    height: 100%;
    padding: 0;
}

.button-078__inner {
    width: 100%;
    height: 100%;
    padding: var(--button-078-padding);
    grid-area: 1 / 1;
    display: flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
}

.button-078__spark {
    position: absolute;
    width: 0.25em;
    height: 0.1875em;
    border-radius: 0.25em;
    background: var(--button-078-border-color);
    pointer-events: none;
    z-index: 1;
}

@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
    .button-078:is(:hover, :focus-visible) .button-078__container,
    [data-hover]:is(:hover, :focus-visible) .button-078 .button-078__container {
        translate: 0 calc(var(--button-078-translate-y) * -0.5);
    }

    .button-078:active .button-078__container {
        transform: translateY(var(--button-078-translate-y));
    }
}

@media (hover: none) and (pointer: coarse) and (prefers-reduced-motion: no-preference) {
    .button-078:active .button-078__container {
        transform: translateY(calc(var(--button-078-translate-y) * 0.5));
    }

    .button-078::before {
        translate: 0 var(--button-078-translate-y);
    }
}

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