/* =========================================================
   ARAM MIZURI ARCHITECTURE — engage.css
   What the homepage and the standalone pages share: the floating WhatsApp
   button (engage.js), and the hearts and share icons (saved.js). Colours
   are literals so they render the same under either page's stylesheet.
   ========================================================= */

.wa-fab {
    position: fixed; z-index: 790;               /* under the nav (900) and every overlay */
    bottom: max(20px, env(safe-area-inset-bottom));
    inset-inline-end: 20px;
    display: inline-flex; align-items: center; gap: 0;
    height: 56px; min-width: 56px; padding: 0 16px; border-radius: 100px;
    background: #25D366; color: #fff; text-decoration: none;
    box-shadow: 0 10px 30px rgba(37,211,102,.32), 0 2px 8px rgba(0,0,0,.35);
    opacity: 0; transform: translateY(16px) scale(.9);
    transition: opacity .45s, transform .45s cubic-bezier(.16,1,.3,1), gap .35s, box-shadow .3s;
}
.wa-fab.is-ready { opacity: 1; transform: none; }
.wa-fab.is-away  { opacity: 0; transform: translateY(16px) scale(.9); pointer-events: none; }
.wa-fab svg { flex: none; width: 24px; height: 24px; }

/* The label opens out on hover (pointer devices only): the button says what
   it does without having to sit on the page as a wide pill. */
.wa-fab__label {
    max-width: 0; overflow: hidden; white-space: nowrap;
    font: 500 13px/1 'Inter', 'Vazirmatn', sans-serif;
    transition: max-width .4s cubic-bezier(.16,1,.3,1);
}
@media (hover: hover) {
    .wa-fab:hover { gap: 10px; box-shadow: 0 14px 38px rgba(37,211,102,.42), 0 2px 8px rgba(0,0,0,.35); }
    .wa-fab:hover .wa-fab__label { max-width: 220px; }
}
.wa-fab:focus-visible { outline: 2px solid #F5C518; outline-offset: 3px; }

@media (prefers-reduced-motion: reduce) {
    .wa-fab, .wa-fab__label { transition: none; }
}

/* ---- Hearts and share icons (saved.js, engage.js) --------------
   Shared by every page that has them. A heart is an outline until its
   project is saved, then filled gold, with a small pop as it turns on;
   "Saved (n)" in a top bar gives a nudge when the list grows. */
.icon-heart {
    flex: none; width: 16px; height: 16px;
    fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linejoin: round;
    transition: fill .25s, stroke .25s;
}
.is-saved .icon-heart { fill: #F5C518; stroke: #F5C518; }
.is-pop .icon-heart { animation: heartPop .45s cubic-bezier(.16,1,.3,1); }
@keyframes heartPop { 40% { transform: scale(1.4); } }
.icon-share { flex: none; width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.6; }
[data-saved-link][hidden] { display: none !important; }
.is-bump { animation: savedBump .5s cubic-bezier(.16,1,.3,1); }
@keyframes savedBump { 40% { transform: scale(1.14); } }

@media (prefers-reduced-motion: reduce) {
    .is-pop .icon-heart, .is-bump { animation: none; }
}