/* ════════════════════════════════════════════════════════════════
   SCROLL-TO-TOP.CSS — Scroll-to-top Button Component
   Prefix: .stt
   RTL-safe via inset-inline-end logical property
════════════════════════════════════════════════════════════════ */

.stt {
    position: fixed;
    bottom: 1.75rem;
    inset-inline-end: 1.75rem;
    z-index: 999;

    width: 46px; height: 46px;
    display: flex; align-items: center; justify-content: center;

    background: var(--color-primary);
    color: var(--white, #fff);
    border: 1px solid var(--white, #fff);
    border-radius: 50%;
    cursor: pointer;

    box-shadow: 0 4px 18px rgba(var(--color-primary-rgb), .32),
                0 1px  4px rgba(0, 0, 0, .12);

    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: opacity 260ms ease,
                transform 260ms ease,
                background 180ms ease,
                box-shadow 180ms ease,
                visibility 0s 260ms;

    touch-action: manipulation;
    /* GPU-promote the layer so opacity/transform transitions composite off main thread */
    will-change: opacity, transform;
    /* Isolate from surrounding layout — button is fixed and never affects document flow */
    contain: layout style paint;
}

.stt--visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    transition: opacity 260ms ease,
                transform 260ms cubic-bezier(.34,1.56,.64,1),
                background 180ms ease,
                box-shadow 180ms ease,
                visibility 0s 0s;
}

.stt:hover {
    background: var(--color-primary-active);
    box-shadow: 0 6px 24px rgba(var(--color-primary-rgb), .42),
                0 2px  6px rgba(0, 0, 0, .14);
    transform: translateY(-2px) scale(1.06);
}
.stt:active {
    transform: translateY(0) scale(.96);
    box-shadow: 0 2px 10px rgba(var(--color-primary-rgb), .28);
}
.stt:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 3px;
}

@media (max-width: 575px) {
    .stt {
        width: 42px; height: 42px;
        bottom: 1.25rem;
        inset-inline-end: 1rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .stt, .stt--visible { transition: none !important; }
}