/*
 * Sticky CTA — a copy of the app's `.sticky-bonus-footer` (fc-qa.notfc.com),
 * using the app's own geometry values.
 *
 *  ≥640px  floating 292×78 card, bottom-right, 16px from the edges.
 *          Gold CTA 147×39 on the left; gift art 152×152 anchored 10px past the
 *          right edge and 53px below the bottom, clipped at the card's bottom edge.
 *  <640px  full-width bar docked to the bottom (390×108 design, scaled by width).
 *
 * The button is the theme's shared .primary-button--gold component. Purple
 * colors are sRGB values sampled from the app screenshot (its lab() values
 * render brighter here than the app looks).
 */
.sticky-cta {
    --sticky-bar-top: #783c9c;
    --sticky-bar-mid: #64297f;
    --sticky-bar-deep: #4f1b6e;
    --sticky-radius: 24px;
    --sticky-art-drop: 3.3125rem;

    position: fixed;
    z-index: 40;
    right: calc(1rem + env(safe-area-inset-right, 0px));
    bottom: calc(1rem + env(safe-area-inset-bottom, 0px));
    left: auto;
    width: 18.25rem;
    max-width: calc(100% - 2rem);
    height: 4.875rem;
    animation: sticky-cta-enter .3s ease-out both;
}

.sticky-cta__bar {
    position: absolute;
    inset: 0;
    display: block;
    color: inherit;
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
}

.sticky-cta__bar:focus { outline: none; }
.sticky-cta__bar:focus-visible {
    outline: 3px solid var(--fw-color-focus, #fff);
    outline-offset: 3px;
    border-radius: var(--sticky-radius);
}

/* Card background (separate layer so the hover brightening doesn't touch the button or art). */
.sticky-cta__bar::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    border-radius: var(--sticky-radius);
    background: radial-gradient(ellipse 100% 100% at 0% 0%, var(--sticky-bar-top) 0%, var(--sticky-bar-mid) 50%, var(--sticky-bar-deep) 100%);
    box-shadow: 0 2px 10px rgba(0, 0, 0, .12), 0 8px 28px rgba(0, 0, 0, .14);
    transition: filter .15s ease-out;
    pointer-events: none;
}

@media (hover: hover) and (pointer: fine) {
    .sticky-cta__bar:hover::before { filter: brightness(1.08); }
}

/* Gold "Claim bonus" button. pointer-events: none (as in the app) so the button's own
   hover/active transforms never fight the vertical-centering transform. */
.sticky-cta .sticky-cta__button.primary-button {
    position: absolute;
    z-index: 2;
    left: .75rem;
    top: 50%;
    box-sizing: border-box;
    width: 9.1875rem;
    min-width: 0;
    max-width: none;
    height: 2.4375rem;
    min-height: 0;
    padding-inline: .75rem;
    transform: translateY(-50%);
    pointer-events: none;
    cursor: inherit;
}

.sticky-cta .sticky-cta__button.primary-button::before {
    box-shadow: 0 0 5px 1px var(--outer-glow-sharp), 0 0 18px 5px var(--outer-glow-mid), 0 0 44px 12px var(--outer-glow-ambient);
}

.sticky-cta .sticky-cta__button .primary-button__label {
    font-size: .875rem;
    letter-spacing: .03125em;
}

/* Gift art: 152px square, 10px past the right edge, 53px below the bottom — the part
   below the card is clipped off along the card's rounded bottom-right corner. */
.sticky-cta__icon {
    position: absolute;
    z-index: 1;
    top: auto;
    right: -.625rem;
    bottom: calc(-1 * var(--sticky-art-drop));
    left: auto;
    width: 9.5rem;
    height: auto;
    aspect-ratio: 1 / 1;
    overflow: visible;
    clip-path: inset(-5rem 0 var(--sticky-art-drop) 0 round 0 0 var(--sticky-radius) 0);
    pointer-events: none;
}

/* Soft dark pool behind the chest. */
.sticky-cta__icon::after {
    content: "";
    position: absolute;
    z-index: 0;
    left: 50%;
    top: 62%;
    width: 78%;
    height: 42%;
    border-radius: 50%;
    background: radial-gradient(ellipse at center, var(--sticky-bar-deep) 0, transparent 72%);
    filter: blur(.75rem);
    transform: translate(-50%, -30%);
    pointer-events: none;
}

.sticky-cta__icon-effect,
.sticky-cta__icon-image {
    position: absolute;
    inset: 0;
    z-index: 1;
    display: block;
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: contain;
    object-position: center;
    user-select: none;
    -webkit-user-drag: none;
}

.sticky-cta__icon-image {
    z-index: 2;
    filter: drop-shadow(0 .375rem .5rem rgba(0, 0, 0, .28));
}

.sticky-cta__close {
    position: absolute;
    top: -10px;
    right: -10px;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: #000;
    color: #fff;
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
}

.sticky-cta__close:hover { background: #333; }

@keyframes sticky-cta-enter {
    from { opacity: 0; transform: translateY(100%); }
    to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
    .sticky-cta { animation: none; }
    .sticky-cta__bar::before { transition: none; }
}

/* ---- Mobile (<640px): the app's full-width docked bar, 390×108 design scaled to width. ---- */
@media (max-width: 639px) {
    .sticky-cta {
        --sticky-radius: 17px;
        right: 0;
        bottom: 0;
        left: 0;
        width: 100%;
        max-width: none;
        height: auto;
        aspect-ratio: 390 / 108;
        padding-bottom: env(safe-area-inset-bottom, 0px);
        clip-path: inset(-160px 0 0);
    }

    .sticky-cta__bar::before {
        top: calc(36 / 108 * 100%);
        border-top: 1px solid #e9cdff;
        border-radius: var(--sticky-radius) var(--sticky-radius) 0 0;
        box-shadow: 0 -15px 32px rgba(0, 0, 0, .2);
    }

    .sticky-cta .sticky-cta__button.primary-button {
        left: calc(31 / 390 * 100%);
        top: calc(52 / 108 * 100%);
        width: calc(183 / 390 * 100%);
        height: calc(40 / 108 * 100%);
        padding-inline: 1rem;
        transform: none;
    }

    .sticky-cta .sticky-cta__button.primary-button::before {
        box-shadow: 0 0 5px 1px var(--outer-glow-sharp), 0 0 18px 5px var(--outer-glow-mid), 0 0 44px 12px var(--outer-glow-ambient);
    }

    .sticky-cta .sticky-cta__button .primary-button__label {
        font-size: clamp(.875rem, 2.8vw, 1.125rem);
        letter-spacing: .04em;
    }

    .sticky-cta__icon {
        right: auto;
        left: calc(232 / 390 * 100%);
        bottom: -57px;
        width: calc(156 / 390 * 100%);
        clip-path: none;
    }

    .sticky-cta__close {
        top: calc(36 / 108 * 100% - 10px);
        right: 8px;
    }

    body:has(.sticky-cta) { padding-bottom: calc(4.5rem + env(safe-area-inset-bottom, 0px)); }
}