/* ============================================================
   ANTHELUS — App UI polish (feed, forms, cards, micro-motion)
   ============================================================ */

/* ── Feed filter pills (replaces washed-out ghost buttons) ── */
.ft-pills{display:flex;gap:8px;overflow-x:auto;padding:2px 2px 12px;margin-bottom:4px;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.ft-pills::-webkit-scrollbar{display:none}
.ft-pill{flex-shrink:0;padding:8px 18px;border-radius:999px;font-size:.82rem;font-weight:700;text-decoration:none;white-space:nowrap;border:1.5px solid var(--border);background:var(--bg-card);color:var(--text-2);transition:all .18s ease}
.ft-pill:hover{border-color:var(--blue);color:var(--blue);transform:translateY(-1px)}
.ft-pill.active{background:var(--blue);border-color:var(--blue);color:#fff;box-shadow:0 4px 14px rgba(29,78,216,.3)}

/* ── Feed cards: entrance + hover ── */
.feed-card{animation:feedIn .35s ease both;transition:box-shadow .2s ease,transform .2s ease}
.feed-card:hover{box-shadow:0 8px 28px rgba(15,23,42,.09)}
@keyframes feedIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.feed-card:nth-child(2){animation-delay:.04s}
.feed-card:nth-child(3){animation-delay:.08s}
.feed-card:nth-child(4){animation-delay:.12s}
.feed-card:nth-child(5){animation-delay:.16s}

/* ── Post action buttons ── */
.post-action{flex:1;display:flex;align-items:center;justify-content:center;gap:6px;padding:8px 4px;border:none;background:transparent;border-radius:10px;font-size:.85rem;color:var(--text-muted);cursor:pointer;transition:background .15s ease,color .15s ease,transform .1s ease}
.post-action:hover{background:var(--bg-2);color:var(--blue)}
.post-action:active{transform:scale(.92)}
.post-action.liked{color:#DC2626}
.post-action .bi{font-size:1.05rem}
@keyframes likePop{0%{transform:scale(1)}40%{transform:scale(1.45)}100%{transform:scale(1)}}
.post-action.pop .bi{animation:likePop .35s ease}

/* ── Composer ── */
.ft-composer{transition:box-shadow .2s ease,border-color .2s ease;border:1.5px solid var(--border)}
.ft-composer:focus-within{border-color:var(--blue);box-shadow:0 0 0 4px rgba(29,78,216,.08)}
.ft-composer textarea{transition:min-height .2s ease}
.ft-composer textarea:focus{min-height:72px}

/* ── Comment bubbles ── */
.comment-item{background:var(--bg-2);border-radius:12px;padding:8px 12px;animation:feedIn .25s ease both}

/* ── Cards & buttons everywhere: subtle motion ── */
.card{transition:box-shadow .2s ease,transform .2s ease,border-color .2s ease}
a.card:hover{transform:translateY(-3px);box-shadow:0 10px 30px rgba(15,23,42,.1);border-color:var(--blue)!important}
.btn{transition:all .18s ease}
.btn:active{transform:scale(.96)}
.btn-primary{box-shadow:0 4px 14px rgba(29,78,216,.25)}
.btn-primary:hover{transform:translateY(-1px);box-shadow:0 6px 20px rgba(29,78,216,.35)}

/* ── Form inputs ── */
.form-input{transition:border-color .18s ease,box-shadow .18s ease}
.form-input:focus{border-color:var(--blue);box-shadow:0 0 0 4px rgba(29,78,216,.08);outline:none}

/* ── Selection chips (join/create forms) ── */
.join-chip span{transition:all .16s ease}
.join-chip:hover span{border-color:var(--blue);color:var(--blue);transform:translateY(-1px)}
.join-chip input:checked + span{box-shadow:0 4px 12px rgba(29,78,216,.28);transform:translateY(-1px)}

/* ── Avatars ── */
.avatar{transition:transform .18s ease}
a:hover > .avatar{transform:scale(1.06)}

/* ── Smooth page scroll ── */
html{scroll-behavior:smooth}

/* ── Stat cards on dashboard ── */
.stat-card{transition:transform .2s ease,box-shadow .2s ease}
.stat-card:hover{transform:translateY(-3px);box-shadow:0 10px 26px rgba(15,23,42,.1)}

/* ── Sliders ── */
input[type=range].form-range{height:6px;border-radius:999px;appearance:none;background:linear-gradient(90deg,var(--blue),#60A5FA);cursor:pointer}
input[type=range].form-range::-webkit-slider-thumb{appearance:none;width:22px;height:22px;border-radius:50%;background:#fff;border:3px solid var(--blue);box-shadow:0 2px 8px rgba(29,78,216,.4);transition:transform .15s ease}
input[type=range].form-range::-webkit-slider-thumb:hover{transform:scale(1.15)}

/* ── Toast (replaces alert()) ── */
.app-toast{position:fixed;bottom:90px;left:50%;transform:translateX(-50%) translateY(20px);background:var(--text);color:var(--bg-card);padding:10px 22px;border-radius:999px;font-size:.85rem;font-weight:600;z-index:99999;opacity:0;transition:all .25s ease;pointer-events:none;box-shadow:0 8px 24px rgba(0,0,0,.25)}
.app-toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

/* ── Reduce motion for accessibility ── */
@media (prefers-reduced-motion: reduce){
  .feed-card,.comment-item{animation:none}
  *{transition-duration:.01ms!important}
}