/* Feed likes + comments in the hepays style (2026-11-12): heart that pops with a sparkle burst, a count that bumps,
   liker faces that pop in, bubble comments with indented replies, and a pill reply box whose send button lights up.
   Loaded after social.css (file name order). JS: assets/js/parts/socialfx.js. Prefix: sx-. */

/* ── like + comment buttons ── */
.post-foot .chip-btn[data-like],.post-foot .chip-btn[data-cmt-toggle]{border-color:transparent;background:#F4F1E8;gap:4px;padding:4px 14px 4px 5px;min-height:40px;transition:background .15s,color .15s,transform .1s}
.post-foot .chip-btn[data-like] i,.post-foot .chip-btn[data-cmt-toggle] i{display:grid;place-items:center;width:32px;height:32px;border-radius:50%;font-size:15px;transition:background .15s,color .15s,box-shadow .15s}
.post-foot .chip-btn[data-like] span,.post-foot .chip-btn[data-cmt-toggle] span{display:inline-block;min-width:14px;text-align:center;font-weight:800;font-size:14px}
.post-foot .chip-btn[data-like]:hover,.post-foot .chip-btn[data-cmt-toggle]:hover{border-color:transparent;background:#EFEBDF}
.post-foot .chip-btn[data-like]:hover i{background:#fff;color:#E11D48}
.post-foot .chip-btn[data-cmt-toggle]:hover i{background:#fff;color:var(--leaf-2)}
.post-foot .chip-btn[data-like]:active,.post-foot .chip-btn[data-cmt-toggle]:active{transform:scale(.95)}
.post-foot .chip-btn[data-like]:focus-visible,.post-foot .chip-btn[data-cmt-toggle]:focus-visible{outline:none;box-shadow:0 0 0 2px var(--leaf)}
.post-foot .chip-btn[data-like].on{background:#FFF1F2;border-color:transparent;color:#BE123C}
.post-foot .chip-btn[data-like].on i{background:#E11D48;color:#fff;box-shadow:0 4px 14px rgba(225,29,72,.35)}
.post-foot .chip-btn[data-like].pop-anim i{animation:sxPop .45s cubic-bezier(.3,1.6,.5,1)}
.post-foot .chip-btn[data-cmt-toggle][aria-expanded="true"]{background:#F0FDF4;border-color:transparent;color:var(--forest)}
.post-foot .chip-btn[data-cmt-toggle][aria-expanded="true"] i{background:var(--leaf);color:#fff}
.sx-bump{animation:sxBump .4s ease}
@keyframes sxPop{0%{transform:scale(.7)}60%{transform:scale(1.25)}100%{transform:scale(1)}}
@keyframes sxBump{0%{transform:translateY(0)}40%{transform:translateY(-5px);opacity:.6}100%{transform:translateY(0)}}
.sx-spark{position:fixed;z-index:99999;width:6px;height:6px;border-radius:50%;pointer-events:none;transform:translate(-50%,-50%);animation:sxSpark .75s cubic-bezier(.2,.7,.3,1) forwards;font-style:normal;font-size:12px;line-height:1}
.sx-spark.star{width:auto;height:auto}
@keyframes sxSpark{0%{opacity:1;transform:translate(-50%,-50%) scale(.6)}70%{opacity:1}100%{opacity:0;transform:translate(calc(-50% + var(--dx)),calc(-50% + var(--dy))) scale(1.1) rotate(90deg)}}

/* ── "Liked by" faces ── */
.pl-faces img,.pl-faces .avatar{width:26px!important;height:26px!important;margin-left:-8px;box-shadow:0 0 0 2px #fff,0 2px 6px rgba(20,40,25,.15);transition:transform .15s}
.pl-line:hover .pl-faces>*{transform:translateY(-2px)}
.pl-faces>.sx-new{animation:sxAvIn .6s cubic-bezier(.3,1.6,.5,1);box-shadow:0 0 0 2px #BEF264,0 0 14px rgba(190,242,100,.9)!important}
@keyframes sxAvIn{0%{transform:scale(0) rotate(-20deg);opacity:0}100%{transform:scale(1) rotate(0);opacity:1}}

/* ── comments ── */
.comments .comment{gap:10px;padding:6px 0}
.comments .comment .bubble{background:#F4F1E8;border-radius:18px;padding:8px 14px;line-height:1.45}
.comments .comment.sx-nested{margin-left:46px;position:relative}
.comments .comment.sx-nested:before{content:"";position:absolute;left:-27px;top:-8px;width:17px;height:30px;border-left:2px solid var(--line);border-bottom:2px solid var(--line);border-bottom-left-radius:12px}
.comments .comment.sx-nested .bubble{background:#FAF8F1}
.comments .comment.sx-nested .bubble p:first-of-type>a.mention:first-child{background:none;padding:0;color:var(--leaf-2);font-weight:700}
.comments .comment.sx-hide{display:none}
.comments .comment.sx-flash .bubble{box-shadow:0 0 0 2px #A3E635}
.comments .comment.cmt-new{animation:sxIn .4s cubic-bezier(.3,1.4,.5,1)}
@keyframes sxIn{from{opacity:0;transform:translateY(8px) scale(.97)}to{opacity:1;transform:none}}
.sx-earlier{display:block;margin:2px 0;padding:6px 2px;border:0;background:none;font:700 13px var(--ui);color:var(--leaf-2);cursor:pointer}
.sx-earlier:hover{text-decoration:underline}
.sc-c-meta{gap:2px 14px;padding:4px 14px 0;font-weight:600;flex-wrap:wrap}
.sc-c-meta .linkbtn{font-weight:700}
.sc-c-meta .cu-helped{padding:3px 9px;transition:background .15s,border-color .15s,transform .1s}
.sc-c-meta .cu-helped:active{transform:scale(.9)}
.sc-c-meta .cu-helped .cu-h-ico{display:inline-block}
.sc-c-meta .cu-helped.cu-pop .cu-h-ico{animation:sxHeart .5s cubic-bezier(.3,1.7,.5,1)}
.sc-c-meta .cu-helped.cu-pop .cu-h-n{display:inline-block;animation:sxBump .4s ease}
@keyframes sxHeart{0%{transform:scale(.4)}55%{transform:scale(1.35)}100%{transform:scale(1)}}

/* ── reply box: one pill, the send button sits inside and lights up when there is text ── */
.sc-c-form{position:relative;align-items:flex-end;gap:10px;padding:8px 16px 14px;border-top:0;background:transparent}
.sc-c-form>.avatar,.sc-c-form>img{margin-bottom:4px}
.sc-c-form textarea{flex:1;min-width:0;min-height:44px;border:1px solid transparent;border-radius:22px;background:#F4F1E8;padding:11px 52px 11px 16px;box-shadow:none;line-height:1.4;transition:background .15s,border-color .15s,box-shadow .15s;scrollbar-width:none}
.sc-c-form textarea::-webkit-scrollbar{display:none}
.sc-c-form textarea:focus{outline:none;background:#fff;border-color:#BBF7D0;box-shadow:0 0 0 3px rgba(22,163,74,.1)}
.sc-c-form .btn{position:absolute;right:20px;bottom:18px;width:36px;min-width:36px;height:36px;min-height:36px;padding:0;border-radius:50%;opacity:.4;transform:scale(.9);transition:opacity .15s,transform .15s,box-shadow .15s}
.sc-c-form.has-text .btn{opacity:1;transform:none;box-shadow:0 4px 12px rgba(22,163,74,.35)}
.sc-c-form.has-text .btn:active{transform:scale(.9)}
@media (max-width:560px){.comments .comment.sx-nested{margin-left:30px}.comments .comment.sx-nested:before{left:-19px;width:12px}}
@media (prefers-reduced-motion:reduce){.sx-spark{display:none}.post-foot .chip-btn[data-like].pop-anim i,.sx-bump,.pl-faces>.sx-new,.comments .comment.cmt-new,.sc-c-meta .cu-helped.cu-pop .cu-h-ico,.sc-c-meta .cu-helped.cu-pop .cu-h-n{animation:none}}