/* Menú del botón «+» de la portada (Subir foto / Nuevo post). Se carga siempre que la portada pinta el botón; no depende del microblog. */
/* Detalles:
   El botón sigue siendo .upload-fab (así conserva todos sus estilos y los de las paletas); los
   iconos del menú copian su color en JS (assets/js/fab-menu.js) mediante --fab-bg, --fab-fg y --fab-border. */
.upload-fab svg { transition: transform .5s cubic-bezier(.34, 1.56, .64, 1); }
.upload-fab { cursor: pointer; font: inherit; }
.fab-menu.is-open .upload-fab svg { transform: rotate(135deg); }
.fab-menu__scrim {
    position: fixed; inset: 0; z-index: 948; background: rgba(0, 0, 0, .38);
    backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
    opacity: 0; pointer-events: none; transition: opacity .35s ease;
}
.fab-menu.is-open .fab-menu__scrim { opacity: 1; pointer-events: auto; }
.fab-menu__items {
    --n: 2;
    position: fixed; z-index: 949; right: clamp(16px, 3vw, 38px); bottom: calc(20px + 54px + 16px + env(safe-area-inset-bottom));
    display: flex; flex-direction: column-reverse; align-items: flex-end; gap: .85rem; pointer-events: none;
}
.fab-menu.is-open .fab-menu__items { pointer-events: auto; }
.fab-menu__item {
    display: flex; align-items: center; gap: .8rem; color: var(--fg); text-decoration: none; background: none; border: 0; padding: 0; font: inherit; cursor: pointer; text-align: left;
    opacity: 0; transform: translateY(28px) scale(.55); transform-origin: right bottom;
    transition: opacity .22s ease, transform .4s cubic-bezier(.5, 0, .75, 0);
    transition-delay: calc((var(--n) - 1 - var(--i)) * 45ms);
}
.fab-menu.is-open .fab-menu__item {
    opacity: 1; transform: none;
    transition: opacity .3s ease, transform .55s cubic-bezier(.34, 1.56, .64, 1);
    transition-delay: calc(var(--i) * 80ms);
}
.fab-menu__label {
    padding: .5rem 1rem; border: 1px solid var(--line); border-radius: 999px; background: var(--bg-card); color: var(--fg);
    font: 500 .8rem/1 var(--sans); letter-spacing: .03em; white-space: nowrap; box-shadow: 0 8px 24px #0006;
    transform: translateX(18px); transition: transform .5s cubic-bezier(.34, 1.56, .64, 1); transition-delay: inherit;
}
.fab-menu.is-open .fab-menu__label { transform: none; }
.fab-menu__icon {
    display: grid; place-items: center; width: 50px; height: 50px; border-radius: 50%;
    border: 1px solid var(--fab-border, var(--accent)); background: var(--fab-bg, var(--accent)); color: var(--fab-fg, var(--bg));
    box-shadow: 0 8px 24px #0007, 0 0 20px var(--accent-soft);
    transition: transform .3s cubic-bezier(.34, 1.56, .64, 1);
}
.fab-menu__icon svg { width: 22px; height: 22px; }
.fab-menu__item:hover .fab-menu__icon, .fab-menu__item:focus-visible .fab-menu__icon { transform: scale(1.12) rotate(-6deg); }
.fab-menu__item:focus-visible { outline: none; }
.fab-menu__item:focus-visible .fab-menu__label { outline: 2px solid var(--accent); outline-offset: 2px; }

body.photo-immersive-open .fab-menu,
html.deck-engaged .fab-menu { display: none !important; }

@media (max-width: 768px) {
    .fab-menu__items { right: 16px; bottom: calc(18px + 56px + 16px + env(safe-area-inset-bottom)); }
}

@media (prefers-reduced-motion: reduce) {
    .fab-menu__item, .fab-menu.is-open .fab-menu__item, .fab-menu__label, .upload-fab svg { transition-duration: .01ms; transition-delay: 0s; }
}