/* Floating “back to top” rocket — public site (left side) */
.af-back-top {
    --af-back-top-size: 3rem;
    --af-back-top-left: max(0.85rem, env(safe-area-inset-left, 0px));
    --af-back-top-bottom: max(1rem, env(safe-area-inset-bottom, 0px));
    position: fixed;
    left: var(--af-back-top-left);
    right: auto;
    bottom: var(--af-back-top-bottom);
    z-index: 100;
    width: var(--af-back-top-size);
    height: var(--af-back-top-size);
    padding: 0;
    border: none;
    border-radius: 9999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--af-cta, #c62828);
    color: #fff;
    box-shadow: 0 8px 24px rgb(198 40 40 / 0.38), 0 2px 6px rgb(15 23 42 / 0.12);
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(0.75rem) scale(0.88);
    transition:
        opacity 0.28s ease,
        transform 0.28s cubic-bezier(0.34, 1.4, 0.64, 1),
        visibility 0.28s,
        background 0.15s,
        box-shadow 0.15s,
        bottom 0.28s ease;
}

.af-back-top.is-visible {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0) scale(1);
    animation: af-back-top-bob 2.4s ease-in-out infinite;
}

.af-back-top:hover {
    background: var(--af-cta-hover, #b71c1c);
    box-shadow: 0 10px 28px rgb(198 40 40 / 0.48), 0 2px 8px rgb(15 23 42 / 0.16);
}

.af-back-top:focus-visible {
    outline: 2px solid var(--af-accent, #43a047);
    outline-offset: 3px;
}

.af-back-top:active {
    transform: translateY(0.1rem) scale(0.96);
}

.af-back-top.is-launching {
    animation: af-back-top-launch 0.55s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.af-back-top__svg {
    width: 1.45rem;
    height: 1.45rem;
    display: block;
    overflow: visible;
}

.af-back-top__flame {
    transform-origin: 12px 20px;
    animation: af-back-top-flame 0.55s ease-in-out infinite alternate;
}

.af-back-top__arrow {
    animation: af-back-top-arrow 1.2s ease-in-out infinite;
}

/* Sit above the mini-player when present */
body.has-global-player .af-back-top {
    --af-back-top-bottom: calc(5.75rem + 0.75rem);
}

/*
 * Cookie banner is also bottom-left — lift the rocket above it so they don’t stack.
 * Banner ~ text + button + padding ≈ 8.5–10.5rem depending on viewport.
 */
body:has(#cookie-consent:not(.hidden)) .af-back-top {
    --af-back-top-bottom: max(10.75rem, calc(env(safe-area-inset-bottom, 0px) + 10.75rem));
}

body.has-global-player:has(#cookie-consent:not(.hidden)) .af-back-top {
    --af-back-top-bottom: calc(5.75rem + 10.75rem);
}

@media (min-width: 640px) {
    .af-back-top {
        --af-back-top-size: 3.25rem;
        --af-back-top-left: max(1.25rem, env(safe-area-inset-left, 0px));
        --af-back-top-bottom: max(1.35rem, env(safe-area-inset-bottom, 0px));
    }

    body.has-global-player .af-back-top {
        --af-back-top-bottom: calc(6.25rem + 0.85rem);
    }

    body:has(#cookie-consent:not(.hidden)) .af-back-top {
        --af-back-top-bottom: max(8.5rem, calc(env(safe-area-inset-bottom, 0px) + 8.5rem));
    }

    body.has-global-player:has(#cookie-consent:not(.hidden)) .af-back-top {
        --af-back-top-bottom: calc(6.25rem + 8.5rem);
    }
}

@keyframes af-back-top-bob {
    0%,
    100% {
        transform: translateY(0) scale(1);
    }
    50% {
        transform: translateY(-0.35rem) scale(1);
    }
}

@keyframes af-back-top-flame {
    from {
        opacity: 0.7;
        transform: scaleY(0.85) translateY(0.5px);
    }
    to {
        opacity: 1;
        transform: scaleY(1.15) translateY(0);
    }
}

@keyframes af-back-top-arrow {
    0%,
    100% {
        transform: translateY(0);
        opacity: 0.85;
    }
    50% {
        transform: translateY(-1.25px);
        opacity: 1;
    }
}

@keyframes af-back-top-launch {
    0% {
        transform: translateY(0) scale(1);
        opacity: 1;
    }
    70% {
        transform: translateY(-2.5rem) scale(1.08);
        opacity: 0.85;
    }
    100% {
        transform: translateY(-4rem) scale(0.9);
        opacity: 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .af-back-top,
    .af-back-top.is-visible,
    .af-back-top.is-launching {
        animation: none;
        transition: opacity 0.2s ease, visibility 0.2s, bottom 0.2s ease;
    }

    .af-back-top__flame,
    .af-back-top__arrow {
        animation: none;
    }

    .af-back-top.is-visible {
        transform: none;
    }
}