/* =================================================================
   AJ03 Floating Download Button — aj03-floating-button.css
   Brand: Gold #D1AE52 | Dark #1A1A18
   ================================================================= */

/* Entrance: button slides up from bottom on page load */
@keyframes aj03-fab-enter {
    from {
        opacity: 0;
        transform: translateY(32px) scale(0.85);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* Gold pulse ring around logo */
@keyframes aj03-fab-pulse {
    0%   {
        box-shadow: 0 0 0 3px #D1AE52,
                    0 8px 22px rgba(209, 174, 82, 0.4);
        transform: scale(1);
    }
    50%  {
        box-shadow: 0 0 0 7px rgba(209, 174, 82, 0.25),
                    0 10px 28px rgba(209, 174, 82, 0.55);
        transform: scale(1.06);
    }
    100% {
        box-shadow: 0 0 0 3px #D1AE52,
                    0 8px 22px rgba(209, 174, 82, 0.4);
        transform: scale(1);
    }
}

/* ── Wrapper ── */
.aj03-fab-wrap {
    position: fixed;
    bottom: 28px;
    right: 22px;
    z-index: 99999;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    animation: aj03-fab-enter 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) 1.2s both;
    transition: opacity 0.3s ease, transform 0.3s ease;
}

/* Hidden state (after close) */
.aj03-fab-wrap.aj03-fab-hidden {
    opacity: 0;
    transform: scale(0.7) translateY(20px);
    pointer-events: none;
}

/* ── Close button ── */
.aj03-fab-close {
    background: #1A1A18;
    color: #D1AE52;
    border: 1.5px solid rgba(209, 174, 82, 0.4);
    border-radius: 50%;
    width: 26px;
    height: 26px;
    font-size: 13px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.45);
    align-self: flex-end;
    margin-right: 2px;
    padding: 0;
    transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
    font-family: inherit;
}

.aj03-fab-close:hover {
    background: #D1AE52;
    color: #1A1A18;
    border-color: #D1AE52;
}

/* ── Link wrapper ── */
.aj03-fab-link {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    text-decoration: none;
    outline: none;
}

/* ── Logo image ── */
.aj03-fab-img {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    object-fit: cover;
    display: block;
    animation: aj03-fab-pulse 2.2s ease-in-out infinite;
    transition: transform 0.2s ease;
}

.aj03-fab-link:hover .aj03-fab-img,
.aj03-fab-link:focus .aj03-fab-img {
    animation: none;
    transform: scale(1.1);
    box-shadow: 0 0 0 4px #D1AE52,
                0 10px 28px rgba(209, 174, 82, 0.55);
}

/* ── Label pill ── */
.aj03-fab-label {
    background: #D1AE52;
    color: #1A1A18;
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: 0.6px;
    padding: 3px 11px;
    border-radius: 20px;
    text-transform: uppercase;
    box-shadow: 0 3px 10px rgba(209, 174, 82, 0.45);
    font-family: inherit;
    white-space: nowrap;
    transition: background 0.2s ease, color 0.2s ease;
}

.aj03-fab-link:hover .aj03-fab-label,
.aj03-fab-link:focus .aj03-fab-label {
    background: #1A1A18;
    color: #D1AE52;
}

/* ── Mobile ── */
@media (max-width: 768px) {
    .aj03-fab-wrap {
        bottom: 16px;
        right: 12px;
        gap: 4px;
    }

    .aj03-fab-img {
        width: 62px;
        height: 62px;
    }

    .aj03-fab-close {
        width: 28px;
        height: 28px;
        font-size: 14px;
    }

    .aj03-fab-label {
        font-size: 10px;
        padding: 3px 9px;
    }
}