/* ──────────────────────────────────────────────────────────
   FictionX – Floating Feedback / Site-Rating Button
   Used on the home page (`.fx-feedback-btn`).
   Replaces the old inline `.login-btn` styles with a polished,
   accessible, animated side-tab.
   ────────────────────────────────────────────────────────── */

/* ===== Base button (legacy + new classes share the look) =====
   Anchored at the BOTTOM-RIGHT of the viewport, sitting next to
   the back-to-top arrow (#to-top: 40×40 @ right:0; bottom:0).
   Detached from edges → full pill shape with rounded corners.
*/
.fx-feedback-btn,
.login-btn{
    position:fixed;
    right:50px;                    /* 40px arrow + 10px gap */
    left:auto;
    top:auto;
    bottom:0;                      /* aligned with arrow baseline */
    transform:translateY(0);
    z-index:99;                    /* same stack level as #to-top */

    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;

    height:40px;                   /* match the arrow's 40px height */
    min-width:54px;
    padding:0 18px;
    font-family:inherit;
    font-size:12.5px;
    font-weight:600;
    letter-spacing:.2px;
    line-height:1;
    text-align:center;
    text-decoration:none !important;
    text-shadow:none !important;
    white-space:nowrap;

    color:#fff !important;
    background:linear-gradient(135deg,#e22a25 0%,#b91612 100%);
    background-size:200% 200%;
    background-position:0% 50%;
    border:0;
    /* Detached from edges → full pill */
    border-radius:4px 0 0 4px;

    box-shadow:none;

    cursor:pointer;
    overflow:hidden;
    isolation:isolate;
    transition:
        transform .3s cubic-bezier(.22,.61,.36,1),
        background-position .6s ease,
        padding .25s ease;
}

/* ===== Icon (auto-inserted if not present in markup) ===== */
.fx-feedback-btn .fx-fb-icon,
.login-btn .fx-fb-icon{
    width:18px;height:18px;
    display:inline-flex;
    align-items:center;justify-content:center;
    color:#fff;
    font-size:14px;
    transition:transform .45s cubic-bezier(.22,.61,.36,1);
}

/* Fallback: if no icon span is provided, prepend a star via CSS */
.fx-feedback-btn:not(:has(.fx-fb-icon)):not(:has(i))::before,
.login-btn:not(:has(.fx-fb-icon)):not(:has(i))::before{
    content:"\f005"; /* fa star */
    font-family:"FontAwesome","Font Awesome 5 Free","Font Awesome 6 Free";
    font-weight:900;
    font-size:14px;
    color:#fff;
    transition:transform .45s cubic-bezier(.22,.61,.36,1);
    display:inline-block;
}

/* Subtle attention pulse via scale instead of shadow */
@keyframes fxFbPulse{
    0%,100% {transform:translateY(0) scale(1);}
    50%     {transform:translateY(0) scale(1.04);}
}
.fx-feedback-btn,
.login-btn{
    animation:fxFbPulse 2.6s ease-in-out 1.5s infinite;
}

/* Diagonal shine sweep across the button periodically */
.fx-feedback-btn::after,
.login-btn::after{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(120deg,
        transparent 30%,
        rgba(255,255,255,.28) 50%,
        transparent 70%);
    transform:translateX(-120%);
    pointer-events:none;
    z-index:1;
}
@keyframes fxFbShine{
    0%   {transform:translateX(-120%);}
    60%  {transform:translateX(120%);}
    100% {transform:translateX(120%);}
}
.fx-feedback-btn::after,
.login-btn::after{
    animation:fxFbShine 5s ease-in-out 3s infinite;
}

/* ===== Hover / focus interaction ===== */
.fx-feedback-btn:hover,
.fx-feedback-btn:focus-visible,
.login-btn:hover,
.login-btn:focus-visible{
    transform:translateY(-2px);
    padding:0 22px;
    background-position:100% 50%;
    animation-play-state:paused;
}

.fx-feedback-btn:hover .fx-fb-icon,
.login-btn:hover .fx-fb-icon,
.fx-feedback-btn:hover::before,
.login-btn:hover::before{
    transform:rotate(72deg) scale(1.15);
}

.fx-feedback-btn:active,
.login-btn:active{
    transform:translateY(-1px) scale(.97);
    transition-duration:.15s;
}

.fx-feedback-btn:focus-visible,
.login-btn:focus-visible{
    outline:3px solid rgba(255,255,255,.6);
    outline-offset:2px;
}

/* ===== Responsive ===== */
@media (max-width:768px){
    .fx-feedback-btn,
    .login-btn{
        right:48px;
        height:38px;
        padding:0 14px;
        font-size:11.5px;
    }
}

@media (max-width:480px){
    .fx-feedback-btn,
    .login-btn{
        right:44px;
        height:36px;
        padding:0 12px;
        font-size:11px;
        gap:6px;
    }
}

/* ===== Reduced motion ===== */
@media (prefers-reduced-motion:reduce){
    .fx-feedback-btn,
    .login-btn,
    .fx-feedback-btn::after,
    .login-btn::after{
        animation:none !important;
        transition:transform .2s ease;
    }
}