/* =========================================================
   TACHIREAD — PULSANTE TORNA SU
   ========================================================= */

.scroll-top-button {
    position: fixed;
    right: 26px;
    bottom: 26px;
    z-index: 1200;

    display: grid;
    place-items: center;
    width: 56px;
    height: 56px;
    padding: 0;

    border: 1px solid rgba(255, 255, 255, 0.5);
    border-radius: 50%;
    background: linear-gradient(145deg, #2f8cff 0%, #0753d6 54%, #f50057 145%);
    color: #ffffff;

    box-shadow:
        0 14px 28px rgba(7, 83, 214, 0.25),
        0 24px 42px rgba(245, 0, 87, 0.14),
        inset 0 1px 0 rgba(255, 255, 255, 0.35);

    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(16px) scale(0.86);

    transition:
        opacity 0.2s ease,
        visibility 0.2s ease,
        transform 0.22s ease,
        box-shadow 0.18s ease;

    -webkit-tap-highlight-color: transparent;
}

.scroll-top-button.is-visible {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0) scale(1);
}

.scroll-top-button:hover {
    transform: translateY(-4px) scale(1.04);
    box-shadow:
        0 18px 34px rgba(7, 83, 214, 0.29),
        0 28px 48px rgba(245, 0, 87, 0.17),
        inset 0 1px 0 rgba(255, 255, 255, 0.4);
}

.scroll-top-button:active {
    transform: translateY(-1px) scale(0.97);
}

.scroll-top-button:focus-visible {
    outline: 4px solid rgba(7, 83, 214, 0.24);
    outline-offset: 5px;
}

.scroll-top-button svg {
    width: 25px;
    height: 25px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

@media (max-width: 600px) {
    .scroll-top-button {
        right: 16px;
        bottom: 16px;
        width: 50px;
        height: 50px;
    }

    .scroll-top-button svg {
        width: 22px;
        height: 22px;
    }
}

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