/* Botones pill con cursor magnético + inclinación 3D */
.svc-instagram__cta-wrap--pair,
.svc-instagram__cta-wrap:has(.svc-instagram__btn),
.portfolio-gallery-closing__actions,
.portfolio-index__cta {
    perspective: 1100px;
    perspective-origin: center center;
}

.svc-instagram__btn,
.portfolio-gallery-closing__btn,
.portfolio-gallery-closing__link {
    --mag-x: 0px;
    --mag-y: 0px;
    --mag-rx: 0deg;
    --mag-ry: 0deg;
    --mag-scale: 1;
    transform-style: preserve-3d;
    backface-visibility: hidden;
    transform:
        perspective(820px)
        translate3d(var(--mag-x), var(--mag-y), 0)
        rotateX(var(--mag-rx))
        rotateY(var(--mag-ry))
        scale(var(--mag-scale));
    will-change: transform;
}

.svc-instagram__btn {
    transition:
        color 0.25s ease,
        background 0.25s ease,
        border-color 0.25s ease,
        --mag-scale 0.28s cubic-bezier(0.22, 1, 0.36, 1) !important;
}

.portfolio-gallery-closing__btn,
.portfolio-gallery-closing__link {
    transition:
        color 0.25s ease,
        background 0.25s ease,
        border-color 0.25s ease,
        --mag-scale 0.28s cubic-bezier(0.22, 1, 0.36, 1);
}

.svc-instagram__btn:hover,
.portfolio-gallery-closing__btn:hover,
.portfolio-gallery-closing__link:hover {
    --mag-scale: 1.06;
}

.svc-instagram__btn:active,
.portfolio-gallery-closing__btn:active,
.portfolio-gallery-closing__link:active {
    --mag-scale: 1.02;
}

.svc-instagram__btn.cursor-magnetic--bounce,
.portfolio-gallery-closing__btn.cursor-magnetic--bounce,
.portfolio-gallery-closing__link.cursor-magnetic--bounce {
    transition:
        color 0.25s ease,
        background 0.25s ease,
        border-color 0.25s ease,
        --mag-scale 0.45s cubic-bezier(0.34, 1.45, 0.64, 1) !important;
    --mag-scale: 1;
}

@media (prefers-reduced-motion: reduce) {
    .svc-instagram__btn,
    .portfolio-gallery-closing__btn,
    .portfolio-gallery-closing__link {
        transform: none !important;
        will-change: auto;
        transform-style: flat;
    }

    .svc-instagram__cta-wrap--pair,
    .svc-instagram__cta-wrap:has(.svc-instagram__btn),
    .portfolio-gallery-closing__actions,
    .portfolio-index__cta {
        perspective: none;
    }
}