/* GOTTA — Mood Index sticky button (handoff §9)
 *
 * Single fixed-position pill that links to /moods.html. Positioned bottom-LEFT
 * so it doesn't collide with the PDP Quiz Sticky CTA (bottom-right).
 *
 * Hidden on home (locked), quiz, coming-soon, 404, and moods.html itself.
 */

.mood-cta {
    position: fixed;
    left: clamp(0.75rem, 2vw, 1.25rem);
    bottom: clamp(0.75rem, 2vw, 1.25rem);
    z-index: 80;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.7rem 1.1rem;
    background: rgba(10, 10, 10, 0.85);
    border: 1px solid rgba(201, 165, 104, 0.4);
    color: var(--color-crown-gold);
    font-family: var(--ff-text);
    font-size: 0.65rem;
    font-weight: 600;
    letter-spacing: 0.26em;
    text-transform: uppercase;
    text-decoration: none;
    border-radius: 999px;
    backdrop-filter: blur(8px) saturate(120%);
    -webkit-backdrop-filter: blur(8px) saturate(120%);
    transition: background 0.25s var(--ease-quiet, ease),
                color 0.25s var(--ease-quiet, ease),
                border-color 0.25s var(--ease-quiet, ease),
                transform 0.3s var(--ease-quiet, ease),
                letter-spacing 0.3s var(--ease-quiet, ease),
                opacity 0.35s var(--ease-quiet, ease);
}
.mood-cta:hover,
.mood-cta:focus-visible {
    background: rgba(201, 165, 104, 0.16);
    color: var(--color-ivory);
    border-color: var(--color-crown-gold);
    outline: none;
    transform: translateY(-2px);
    letter-spacing: 0.30em;
}

.mood-cta__arrow {
    display: inline-block;
    font-family: var(--ff-display);
    font-size: 0.9rem;
    line-height: 1;
    transform: translateX(0);
    transition: transform 0.3s var(--ease-quiet, ease);
}
.mood-cta:hover .mood-cta__arrow,
.mood-cta:focus-visible .mood-cta__arrow { transform: translateX(3px); }

/* Hide on locked / immersive / redundant pages */
body.page-home .mood-cta,
body.page-quiz .mood-cta,
body.page-coming-soon .mood-cta,
body.page-moods .mood-cta,
body[data-no-mood-index] .mood-cta {
    display: none !important;
}

/* Mobile */
@media (max-width: 560px) {
    .mood-cta {
        padding: 0.6rem 0.85rem;
        font-size: 0.58rem;
        letter-spacing: 0.22em;
    }
}

@media (prefers-reduced-motion: reduce) {
    .mood-cta, .mood-cta__arrow { transition: none; }
}