/* Floating “back to top” rocket — public site (left side) */
.af-back-top {
    --af-back-top-size: 4.5rem;
    --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-surface-elevated, #1e293b);
    color: #fff;
    box-shadow: 0 8px 24px rgb(15 23 42 / 0.45), 0 2px 6px rgb(15 23 42 / 0.2);
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    overflow: visible;
    transform: translate3d(0, 0.75rem, 0) 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.22s ease,
        box-shadow 0.22s ease,
        bottom 0.28s ease,
        width 0.38s cubic-bezier(0.34, 1.2, 0.64, 1),
        height 0.38s cubic-bezier(0.34, 1.2, 0.64, 1),
        border-radius 0.38s cubic-bezier(0.34, 1.2, 0.64, 1);
}

.af-back-top.is-visible {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translate3d(0, 0, 0) scale(1);
}

.af-back-top:hover {
    background: var(--af-surface-hover, #273549);
    box-shadow: 0 10px 28px rgb(15 23 42 / 0.55), 0 0 0 1px rgb(47 93 80 / 0.22);
}

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

.af-back-top:active:not(.is-ascending):not(.is-liftoff) {
    transform: translate3d(0, 0.1rem, 0) scale(0.96);
}

/* —— Craft (rocket) wrapper —— */
.af-back-top__craft {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    transform: translate3d(0, 0, 0);
    transition: opacity 0.2s ease;
    backface-visibility: hidden;
}

/* Idle bob lives on craft — never swap this animation on scroll/thrust */
.af-back-top.is-visible:not(.is-liftoff) .af-back-top__craft {
    animation: af-back-top-bob 2.4s ease-in-out infinite;
}

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

/* —— Launch pad (hidden until liftoff) —— */
.af-back-top__pad {
    position: absolute;
    inset: 0;
    z-index: 1;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.28s ease;
}

.af-back-top__pad-deck {
    position: absolute;
    left: 8%;
    right: 8%;
    bottom: 18%;
    height: 42%;
    border-radius: 50% / 55%;
    background:
        radial-gradient(ellipse 70% 55% at 50% 40%, #ef9a9a 0%, transparent 70%),
        linear-gradient(180deg, #64748b 0%, #475569 55%, #334155 100%);
    box-shadow:
        inset 0 1px 0 rgb(255 255 255 / 0.28),
        inset 0 -3px 6px rgb(0 0 0 / 0.18);
}

.af-back-top__pad-tower {
    position: absolute;
    bottom: 42%;
    width: 0.4rem;
    height: 1.35rem;
    border-radius: 2px 2px 0 0;
    background: linear-gradient(180deg, #94a3b8 0%, #334155 100%);
    opacity: 0.9;
    box-shadow: 0 0 0 1px rgb(255 255 255 / 0.12);
    transform-origin: bottom center;
}

.af-back-top__pad-tower--l {
    left: 18%;
    transform: rotate(-45deg);
}

.af-back-top__pad-tower--r {
    right: 18%;
    transform: rotate(45deg);
}

.af-back-top__pad-mark {
    position: absolute;
    left: 50%;
    bottom: 28%;
    width: 28%;
    height: 0.14rem;
    transform: translateX(-50%);
    border-radius: 9999px;
    background: rgb(255 255 255 / 0.35);
    box-shadow: 0 0 0 0.35rem rgb(255 255 255 / 0.08);
}

.af-back-top__flame {
    transform-box: fill-box;
    transform-origin: 50% 0%;
    animation: af-back-top-flame 0.45s ease-in-out infinite alternate;
}

.af-back-top__flame-core {
    transform-box: fill-box;
    transform-origin: 50% 0%;
    animation: af-back-top-flame-core 0.32s ease-in-out infinite alternate;
}

/* Thrust / ascend / liftoff: only flame intensity changes (no button bob restart) */
.af-back-top.is-thrusting .af-back-top__flame,
.af-back-top.is-ascending .af-back-top__flame,
.af-back-top.is-liftoff .af-back-top__flame {
    animation: af-back-top-flame-thrust 0.22s ease-in-out infinite alternate;
}

.af-back-top.is-thrusting .af-back-top__flame-core,
.af-back-top.is-ascending .af-back-top__flame-core,
.af-back-top.is-liftoff .af-back-top__flame-core {
    animation: af-back-top-flame-core-thrust 0.18s ease-in-out infinite alternate;
}

/* Phase 1: scrolling up — FAB stays; stronger craft bob once (not every scroll frame) */
.af-back-top.is-ascending {
    pointer-events: none;
    /* Don't fight keyframed motion with transform transitions */
    transition:
        opacity 0.28s ease,
        visibility 0.28s,
        background 0.22s ease,
        box-shadow 0.22s ease,
        bottom 0.28s ease,
        width 0.38s cubic-bezier(0.34, 1.2, 0.64, 1),
        height 0.38s cubic-bezier(0.34, 1.2, 0.64, 1),
        border-radius 0.38s cubic-bezier(0.34, 1.2, 0.64, 1);
}

.af-back-top.is-ascending .af-back-top__craft {
    animation: af-back-top-bob-thrust 0.7s ease-in-out infinite;
}

/* Phase 2: at top — morph into launch pad; rocket flies away */
.af-back-top.is-liftoff {
    width: 5.6rem;
    height: 1.65rem;
    border-radius: 9999px / 70%;
    background: transparent;
    box-shadow: none;
    pointer-events: none;
    overflow: visible;
    transition:
        width 0.38s cubic-bezier(0.34, 1.2, 0.64, 1),
        height 0.38s cubic-bezier(0.34, 1.2, 0.64, 1),
        border-radius 0.38s cubic-bezier(0.34, 1.2, 0.64, 1),
        background 0.22s ease,
        box-shadow 0.22s ease;
    animation: af-back-top-pad-settle 0.4s cubic-bezier(0.34, 1.3, 0.64, 1) both;
}

.af-back-top.is-liftoff .af-back-top__pad {
    opacity: 1;
}

.af-back-top.is-liftoff .af-back-top__craft {
    will-change: transform, opacity;
    animation: af-back-top-rocket-fly 1.55s cubic-bezier(0.25, 0.1, 0.2, 1) forwards;
}

.af-back-top.is-liftoff:hover {
    background: transparent;
    box-shadow: none;
}

/* Pad lingers, then fades out */
.af-back-top.is-pad-fade {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translate3d(0, 0.35rem, 0) scale(0.96);
    transition:
        opacity 0.4s ease,
        visibility 0.4s,
        transform 0.4s ease;
}

.af-back-top.is-pad-fade .af-back-top__craft {
    /* Keep fly animation fill (forwards) — animation:none snaps craft to FAB origin */
    will-change: auto;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

/* 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: 4.85rem;
        --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));
    }

    .af-back-top__svg {
        width: 2.75rem;
        height: 3.8rem;
    }

    .af-back-top.is-liftoff {
        width: 6.1rem;
        height: 1.75rem;
    }

    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: translate3d(0, 0, 0);
    }
    50% {
        transform: translate3d(0, -0.35rem, 0);
    }
}

@keyframes af-back-top-bob-thrust {
    0%,
    100% {
        transform: translate3d(0, 0, 0) scale(1);
    }
    50% {
        transform: translate3d(0, -0.5rem, 0) scale(1.02);
    }
}

@keyframes af-back-top-flame {
    from {
        opacity: 0.72;
        transform: scaleY(0.82) scaleX(0.92) translateY(1px);
    }
    to {
        opacity: 1;
        transform: scaleY(1.12) scaleX(1.05) translateY(0);
    }
}

@keyframes af-back-top-flame-core {
    from {
        opacity: 0.75;
        transform: scaleY(0.88) translateY(0.5px);
    }
    to {
        opacity: 1;
        transform: scaleY(1.18) translateY(0);
    }
}

@keyframes af-back-top-flame-thrust {
    from {
        opacity: 0.85;
        transform: scaleY(1.05) scaleX(0.95) translateY(0);
    }
    to {
        opacity: 1;
        transform: scaleY(1.55) scaleX(1.12) translateY(2px);
        filter: drop-shadow(0 0 4px rgb(255 193 7 / 0.7));
    }
}

@keyframes af-back-top-flame-core-thrust {
    from {
        opacity: 0.9;
        transform: scaleY(1) translateY(0);
    }
    to {
        opacity: 1;
        transform: scaleY(1.45) translateY(1.5px);
    }
}

@keyframes af-back-top-pad-settle {
    0% {
        transform: translate3d(0, 0, 0) scale(1, 1);
    }
    55% {
        transform: translate3d(0, 0, 0) scale(1.06, 0.92);
    }
    100% {
        transform: translate3d(0, 0, 0) scale(1, 1);
    }
}

/* One continuous fly-away — evenly spaced, GPU transform only */
@keyframes af-back-top-rocket-fly {
    0% {
        transform: translate3d(0, 0, 0) scale(1);
        opacity: 1;
    }
    10% {
        transform: translate3d(0, -0.5rem, 0) scale(1.04);
        opacity: 1;
    }
    30% {
        transform: translate3d(0, -18vh, 0) scale(1);
        opacity: 1;
    }
    55% {
        transform: translate3d(0, -48vh, 0) scale(0.92);
        opacity: 0.92;
    }
    80% {
        transform: translate3d(0, -85vh, 0) scale(0.8);
        opacity: 0.45;
    }
    100% {
        transform: translate3d(0, -120vh, 0) scale(0.68);
        opacity: 0;
    }
}

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

    .af-back-top.is-visible:not(.is-liftoff) .af-back-top__craft,
    .af-back-top.is-ascending .af-back-top__craft,
    .af-back-top.is-liftoff .af-back-top__craft {
        animation: none;
    }

    .af-back-top__flame,
    .af-back-top__flame-core,
    .af-back-top.is-thrusting .af-back-top__flame,
    .af-back-top.is-ascending .af-back-top__flame,
    .af-back-top.is-liftoff .af-back-top__flame,
    .af-back-top.is-thrusting .af-back-top__flame-core,
    .af-back-top.is-ascending .af-back-top__flame-core,
    .af-back-top.is-liftoff .af-back-top__flame-core {
        animation: none;
    }

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

    .af-back-top.is-liftoff {
        width: var(--af-back-top-size);
        height: var(--af-back-top-size);
        border-radius: 9999px;
    }

    .af-back-top.is-liftoff .af-back-top__craft {
        animation: none;
        opacity: 0;
        will-change: auto;
    }

    .af-back-top.is-liftoff .af-back-top__pad {
        opacity: 0;
    }
}