/*
    Interactive button animations.
    JavaScript calculates the center of the visible pixels
    and stores it in CSS custom properties so the transform
    zooms around the actual mask center, not the canvas center.
*/

.canvas-button .pixel-layer {
    transform-origin:
        var(--mask-center-x, 50%)
        var(--mask-center-y, 50%);

    transform: scale(1) translateY(0);

    transition:
        transform 180ms cubic-bezier(0.2, 0.8, 0.2, 1),
        filter 180ms ease;
}

/* Hover — zoom around mask center */

.canvas-button.is-hovered .pixel-layer {
    transform:
        scale(1.07)
        translateY(-2px);

    filter: brightness(1.08);
}

/* Press downward */

.canvas-button.is-pressed .pixel-layer {
    transform:
        scale(1.025)
        translateY(4px);

    transition-duration: 70ms;
}

/* Click — brief scale-down, flows through the same transition */

.canvas-button.is-clicked .pixel-layer {
    transform:
        scale(0.92)
        translateY(5px);

    transition:
        transform 90ms ease-out,
        filter 90ms ease;
}

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