/**
 * Back to Top Button — 全站「回到頂部」按鈕(玻璃感樣式)
 *
 * 不綁 Design Token,全站固定統一風格。
 * 所有可調參數集中於下方 .hz-back-to-top 第一段 CSS variables,
 * 改參數只需動最上面那組 var,不必碰下面的 layout/animation 規則。
 *
 * @package Hauzii\Canvas
 */

.hz-back-to-top {
    /* ─── 設計參數(改這裡就好) ─── */
    --bt-size: 44px;
    --bt-icon-size: 18px;
    --bt-offset: 24px;
    --bt-bg: rgba(255, 255, 255, 0.65);
    --bt-bg-hover: rgba(255, 255, 255, 0.85);
    --bt-blur: 8px;
    --bt-icon-color: #1a1a1a;
    --bt-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    --bt-shadow-hover: 0 4px 12px rgba(0, 0, 0, 0.18);
    --bt-radius: 50%;
    --bt-transition: 200ms ease;
    --bt-z-index: 999;

    /* ─── Layout / Style(以下用上面的變數,一般不需要動) ─── */
    position: fixed;
    bottom: var(--bt-offset);
    right: var(--bt-offset);
    width: var(--bt-size);
    height: var(--bt-size);
    border-radius: var(--bt-radius);
    border: none;
    background: var(--bt-bg);
    backdrop-filter: blur(var(--bt-blur));
    -webkit-backdrop-filter: blur(var(--bt-blur));
    box-shadow: var(--bt-shadow);
    color: var(--bt-icon-color);
    cursor: pointer;
    z-index: var(--bt-z-index);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;

    /* 預設隱藏 — JS 加 .is-visible class 才出現 */
    opacity: 0;
    transform: translateY(10px);
    visibility: hidden;
    transition:
        opacity var(--bt-transition),
        transform var(--bt-transition),
        background var(--bt-transition),
        box-shadow var(--bt-transition),
        visibility 0s linear var(--bt-transition);
}

.hz-back-to-top svg {
    width: var(--bt-icon-size);
    height: var(--bt-icon-size);
    color: inherit;
}

.hz-back-to-top.is-visible {
    opacity: 1;
    transform: translateY(0);
    visibility: visible;
    transition:
        opacity var(--bt-transition),
        transform var(--bt-transition),
        background var(--bt-transition),
        box-shadow var(--bt-transition);
}

.hz-back-to-top:hover {
    background: var(--bt-bg-hover);
    box-shadow: var(--bt-shadow-hover);
}

.hz-back-to-top.is-visible:hover {
    transform: translateY(0) scale(1.05);
}

.hz-back-to-top:focus-visible {
    outline: 2px solid var(--bt-icon-color);
    outline-offset: 3px;
}

/* Mobile (< 768px) — 縮小 + 收緊邊距 */
@media (max-width: 767px) {
    .hz-back-to-top {
        --bt-size: 40px;
        --bt-offset: 16px;
        --bt-icon-size: 16px;
    }
}