/* Real-post card interiors. Every animation is bound to .is-active so it
   replays each time a card comes to the front, and stops when it leaves. */

@property --hfn{syntax:'<integer>';initial-value:0;inherits:false}

/* ---- shared entrance ---- */
.hcard.is-active .fx{animation:hfIn .5s var(--ease-out) both;animation-delay:calc(var(--d,0) * 1ms)}
@keyframes hfIn{from{opacity:0;transform:translateY(9px)}to{opacity:1;transform:none}}

/* ---- post chrome shared by IG / FB / YT / email ---- */
.pst{display:flex;flex-direction:column;height:100%;margin:-.9rem -1rem;overflow:hidden}
.pst-h{display:flex;align-items:center;gap:.5rem;padding:.6rem .75rem;flex:none}
.pst-h .av{width:28px;height:28px;border-radius:50%;flex:none;display:grid;place-items:center;
  color:#fff;font-size:.625rem;font-weight:var(--fw-bold);letter-spacing:-.01em}
.pst-h .nm{min-width:0;flex:1;line-height:1.2}
.pst-h .nm b{display:block;font-size:var(--fs-xs);font-weight:var(--fw-bold);color:var(--fg-1)}
.pst-h .nm small{font-size:.625rem;color:var(--fg-3)}
.pst-h .dots{display:flex;gap:2.5px}
.pst-h .dots i{width:3px;height:3px;border-radius:50%;background:var(--fg-4)}
.pst-img{position:relative;width:100%;aspect-ratio:16/10;overflow:hidden;flex:0 1 auto;min-height:0;max-height:38%;background:var(--bg-subtle)}
.pst-img img{width:100%;height:100%;object-fit:cover;display:block}
.pst-b{padding:.55rem .75rem;display:flex;flex-direction:column;gap:.4rem;flex:1;min-height:0;overflow:hidden}

/* ---- instagram ---- */
.ig-acts{display:flex;align-items:center;gap:.85rem;padding:.55rem .75rem .15rem;flex:none}
.ig-acts svg{width:22px;height:22px;stroke:var(--fg-1);fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;display:block;overflow:visible}
.ig-acts .sp{flex:1}
.ig-heart{position:relative;display:block}
.hcard.is-active .ig-heart{animation:hfHeart .5s var(--ease-snap) 1.5s forwards}
@keyframes hfHeart{0%{transform:scale(1)}40%{transform:scale(1.35)}100%{transform:scale(1)}}
.hcard.is-active .ig-heart svg{animation:hfHeartFill .01s linear 1.62s forwards}
@keyframes hfHeartFill{to{fill:#ED4956;stroke:#ED4956}}
.ig-heart::after{content:"";position:absolute;inset:-6px;border-radius:50%;border:2px solid #ED4956;opacity:0}
.hcard.is-active .ig-heart::after{animation:hfBurst .55s var(--ease-out) 1.55s}
@keyframes hfBurst{0%{opacity:.85;transform:scale(.3)}100%{opacity:0;transform:scale(1.5)}}
/* the double-tap heart over the photo */
.ig-tap{position:absolute;inset:0;display:grid;place-items:center;pointer-events:none}
.ig-tap svg{width:64px;height:64px;fill:#fff;opacity:0;filter:drop-shadow(0 3px 12px rgba(0,0,0,.4))}
.hcard.is-active .ig-tap svg{animation:hfTap 1s var(--ease-snap) 1.35s}
@keyframes hfTap{0%{opacity:0;transform:scale(.4)}25%{opacity:.95;transform:scale(1.15)}55%{opacity:.95;transform:scale(1)}100%{opacity:0;transform:scale(1.1)}}

.ig-likes{font-size:var(--fs-xs);font-weight:var(--fw-bold);color:var(--fg-1)}
.ig-likes .n{--hfn:1347;counter-reset:hfn var(--hfn)}
.ig-likes .n::after{content:counter(hfn)}
.hcard.is-active .ig-likes .n{animation:hfLikes 1.6s var(--ease-out) 1.6s forwards}
@keyframes hfLikes{from{--hfn:1284}to{--hfn:1347}}
.ig-cap{font-size:var(--fs-xs);line-height:1.45;color:var(--fg-2)}
.ig-cap b{color:var(--fg-1);font-weight:var(--fw-bold)}

.cmt{display:flex;align-items:flex-start;gap:.4rem;font-size:var(--fs-xs);line-height:1.4}
.cmt .av{width:19px;height:19px;border-radius:50%;flex:none;display:grid;place-items:center;
  color:#fff;font-size:0.625rem;font-weight:var(--fw-bold)}
.cmt .tx{min-width:0;color:var(--fg-2)}
.cmt .tx b{color:var(--fg-1);font-weight:var(--fw-bold);margin-right:.25rem}
.cap-pill{display:inline-flex;align-items:center;gap:.25rem;background:var(--coral-soft);color:var(--coral-deep);
  border-radius:var(--r-pill);padding:.1rem .4rem;font-family:var(--font-mono);font-size:0.625rem;
  letter-spacing:.06em;text-transform:uppercase;font-weight:var(--fw-bold);white-space:nowrap;margin-left:.3rem}
.hcard.is-active .cap-pill{animation:hfPill .45s var(--ease-snap) both;animation-delay:calc(var(--d,0) * 1ms)}
@keyframes hfPill{from{opacity:0;transform:scale(.7)}to{opacity:1;transform:none}}

/* ---- facebook ---- */
.fb-react{display:flex;align-items:center;gap:.35rem;font-size:var(--fs-xs);color:var(--fg-3)}
.fb-react .pips{display:flex}
.fb-react .pips i{width:16px;height:16px;border-radius:50%;border:1.5px solid var(--bg-surface);
  margin-left:-5px;display:grid;place-items:center}
.fb-react .pips i:first-child{margin-left:0}
.fb-react .pips svg{width:9px;height:9px;fill:#fff;display:block}
.fb-react .n{--hfn:241;counter-reset:hfn var(--hfn);font-weight:var(--fw-semibold);color:var(--fg-2)}
.fb-react .n::after{content:counter(hfn)}
.hcard.is-active .fb-react .n{animation:hfFb 1.8s var(--ease-out) 1.2s forwards}
@keyframes hfFb{from{--hfn:186}to{--hfn:241}}
.fb-bar{display:flex;gap:.4rem;border-top:1px solid var(--border-1);padding-top:.4rem;margin-top:.1rem}
.fb-bar span{flex:1;display:flex;align-items:center;justify-content:center;gap:.25rem;
  font-size:.625rem;font-weight:var(--fw-semibold);color:var(--fg-3);padding:.25rem 0;border-radius:var(--r-sm)}
.fb-bar svg{width:12px;height:12px;stroke:currentColor;fill:none;stroke-width:2}

/* ---- google reviews ---- */
.gr-top{display:flex;align-items:center;gap:.7rem;padding:.2rem 0 .5rem}
.gr-score{font-size:2rem;font-weight:var(--fw-extra);color:var(--fg-1);letter-spacing:-.03em;line-height:1;
  counter-reset:hfn var(--hfn)}
.gr-score::after{content:counter(hfn);font-size:1rem;font-weight:var(--fw-bold);vertical-align:.35rem}
.gr-score::before{content:"4."}
.hcard.is-active .gr-score{animation:hfGr 1.4s var(--ease-out) .7s forwards}
@keyframes hfGr{from{--hfn:6}to{--hfn:8}}
.gr-top .mt small{display:block;font-size:.625rem;color:var(--fg-3);font-family:var(--font-mono)}
.gr-rev{display:flex;gap:.5rem;padding:.5rem 0;border-top:1px solid var(--border-1)}
.gr-rev .av{width:24px;height:24px;border-radius:50%;flex:none;display:grid;place-items:center;
  color:#fff;font-size:0.6875rem;font-weight:var(--fw-bold)}
.gr-rev .tx{min-width:0;flex:1}
.gr-rev .tx b{display:block;font-size:var(--fs-xs);font-weight:var(--fw-bold);color:var(--fg-1)}
.gr-rev .tx p{font-size:var(--fs-xs);line-height:1.4;color:var(--fg-2);margin:.15rem 0 0}
.gr-rev .st{color:#FBBC04;font-size:.625rem;letter-spacing:.05em;line-height:1}

/* ---- youtube ---- */
.yt-thumb .dur{position:absolute;right:6px;bottom:9px;background:rgba(0,0,0,.85);color:#fff;
  font-size:0.6875rem;font-weight:var(--fw-semibold);padding:.1rem .3rem;border-radius:3px;letter-spacing:.02em}
.yt-thumb .play{position:absolute;inset:0;display:grid;place-items:center}
.yt-thumb .play i{width:46px;height:32px;border-radius:9px;background:#FF0000;display:grid;place-items:center;
  box-shadow:0 4px 14px -4px rgba(0,0,0,.5)}
.yt-thumb .play svg{width:16px;height:16px;fill:#fff;display:block;margin-left:1px}
.yt-thumb .prog{position:absolute;left:0;right:0;bottom:0;height:3px;background:rgba(255,255,255,.32)}
.yt-thumb .prog i{display:block;width:38%;height:100%;background:#FF0000}
.yt-title{font-size:var(--fs-sm);font-weight:var(--fw-bold);color:var(--fg-1);line-height:1.25;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.yt-meta{font-size:.625rem;color:var(--fg-3);font-family:var(--font-mono);margin-top:-.15rem}
.yt-chan{display:flex;align-items:center;gap:.5rem;padding:.35rem 0;border-block:1px solid var(--border-1)}
.yt-chan .av{width:26px;height:26px;border-radius:50%;flex:none;display:grid;place-items:center;color:#fff;
  font-size:0.6875rem;font-weight:var(--fw-bold);background:linear-gradient(135deg,#FF9F45,#ED7A12)}
.yt-chan .who{flex:1;min-width:0;line-height:1.15}
.yt-chan .who b{display:block;font-size:var(--fs-xs);font-weight:var(--fw-bold);color:var(--fg-1)}
.yt-chan .who small{font-size:0.6875rem;color:var(--fg-3)}
.yt-chan .sub{background:var(--fg-1);color:var(--bg-surface);border-radius:var(--r-pill);
  padding:.25rem .65rem;font-size:.625rem;font-weight:var(--fw-bold);flex:none}
.yt-pills{display:flex;gap:.35rem}
.yt-pills .p{display:inline-flex;align-items:center;gap:.3rem;background:var(--bg-subtle);
  border-radius:var(--r-pill);padding:.25rem .6rem;font-size:.625rem;font-weight:var(--fw-semibold);color:var(--fg-2)}
.yt-pills .p svg{width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:1.9;
  stroke-linejoin:round;display:block}
.yt-meta .n{--hfn:4310;counter-reset:hfn var(--hfn)}
.yt-meta .n::after{content:counter(hfn)}
.hcard.is-active .yt-meta .n{animation:hfYt 1.8s var(--ease-out) 1s forwards}
@keyframes hfYt{from{--hfn:4128}to{--hfn:4310}}

/* ---- email ---- */
.em-sub{font-size:var(--fs-sm);font-weight:var(--fw-bold);color:var(--fg-1);line-height:1.3}
.em-meta{font-family:var(--font-mono);font-size:0.6875rem;letter-spacing:.06em;text-transform:uppercase;color:var(--fg-4)}
.em-stat{display:flex;gap:.5rem}
.em-stat div{flex:1;background:var(--bg-subtle);border-radius:var(--r-md);padding:.45rem .55rem}
.em-stat b{display:block;font-size:var(--fs-lg);font-weight:var(--fw-extra);color:var(--fg-1);letter-spacing:-.02em;
  counter-reset:hfn var(--hfn)}
.em-stat b::after{content:counter(hfn) "%"}
.hcard.is-active .em-stat .o b{animation:hfOp 1.5s var(--ease-out) .9s forwards}
.hcard.is-active .em-stat .c b{animation:hfCl 1.5s var(--ease-out) 1.1s forwards}
@keyframes hfOp{from{--hfn:0}to{--hfn:42}}
@keyframes hfCl{from{--hfn:0}to{--hfn:11}}
.em-stat small{font-family:var(--font-mono);font-size:0.625rem;letter-spacing:.08em;text-transform:uppercase;color:var(--fg-4)}

/* ---- whatsapp: typing, arrival, read receipts, the approve press ---- */
.hcard.is-active .hb{animation:hfBub .42s var(--ease-snap) both;animation-delay:calc(var(--d,0) * 1ms)}
@keyframes hfBub{from{opacity:0;transform:translateY(8px) scale(.97)}to{opacity:1;transform:none}}
.hb .tk{display:inline-flex;gap:1px;margin-left:.3rem;vertical-align:-1px}
.hb .tk svg{width:12px;height:12px;stroke:rgba(255,255,255,.5);fill:none;stroke-width:2.6;display:block}
.hcard.is-active .hb .tk svg{animation:hfRead .01s linear 5.4s forwards}
@keyframes hfRead{to{stroke:#53BDEB}}
.typing{align-self:flex-start;display:flex;gap:3px;background:#1F2C33;border-radius:11px;
  padding:.5rem .6rem;opacity:0}
.typing i{width:5px;height:5px;border-radius:50%;background:#8A9AA3;display:block}
.hcard.is-active .typing{animation:hfTypeIn .3s var(--ease-out) 1.1s forwards,hfTypeOut .3s var(--ease-out) 2.5s forwards}
@keyframes hfTypeIn{to{opacity:1}}
@keyframes hfTypeOut{to{opacity:0;height:0;padding:0;margin-top:-.45rem}}
.hcard.is-active .typing i{animation:hfDot 1.1s ease-in-out 1.1s infinite}
.hcard.is-active .typing i:nth-child(2){animation-delay:1.25s}
.hcard.is-active .typing i:nth-child(3){animation-delay:1.4s}
@keyframes hfDot{0%,60%,100%{opacity:.35;transform:translateY(0)}30%{opacity:1;transform:translateY(-3px)}}
.hcard.is-active .happr{position:relative;animation:hfBub .45s var(--ease-snap) 2.7s both}
.hcard.is-active .happr .ok{animation:hfPress .4s var(--ease-snap) 4.6s}
@keyframes hfPress{0%{transform:scale(1)}45%{transform:scale(.9);background:var(--grass)}100%{transform:scale(1)}}
/* the operator's cursor travelling to the approve button */
/* pinned to the approve button's own face, so the press lands on it whatever
   the card measures */
.wa-cur{position:absolute;left:64px;bottom:14px;width:16px;height:16px;color:#fff;
  opacity:0;z-index:5;filter:drop-shadow(0 2px 4px rgba(0,0,0,.55));pointer-events:none}
.wa-cur svg{width:100%;height:100%;fill:currentColor;display:block}
.hcard.is-active .wa-cur{animation:hfCur 2.4s var(--ease-out) 3.1s forwards}
@keyframes hfCur{
  0%{opacity:0;transform:translate(96px,58px)}
  20%{opacity:1}
  62%{opacity:1;transform:none}
  70%{transform:scale(.82)}
  80%{transform:none}
  100%{opacity:0;transform:none}
}

@media (prefers-reduced-motion:reduce){
  .fx,.hb,.happr,.cap-pill{opacity:1;transform:none;animation:none !important}
  .typing,.wa-cur,.ig-tap{display:none}
  .hcard.is-active .ig-likes .n,.hcard.is-active .fb-react .n,.hcard.is-active .gr-score,
  .hcard.is-active .yt-meta .n,.hcard.is-active .em-stat b{animation:none}
  .ig-likes .n{--hfn:1347}.fb-react .n{--hfn:241}.gr-score{--hfn:8}
  .yt-meta .n{--hfn:4310}.em-stat .o b{--hfn:42}.em-stat .c b{--hfn:11}
  .ig-heart svg{fill:#ED4956;stroke:#ED4956}
}


/* ---- google: a real search, a real click, and what uxjo records from it ---- */
.gpst{padding:.6rem .7rem;gap:.4rem;position:relative;margin:-.9rem -1rem}
.gs-bar{display:flex;align-items:center;gap:.5rem;border:1px solid var(--border-2);border-radius:var(--r-pill);
  padding:.45rem .7rem;box-shadow:var(--sh-xs);flex:none}
.gs-bar .gg{width:16px;height:16px;flex:none}
.gs-bar .q{flex:1;min-width:0;display:flex;align-items:center;font-size:var(--fs-xs);color:var(--fg-1);white-space:nowrap}
.gs-bar .qt{overflow:hidden;white-space:nowrap}
.hcard.is-active .gs-bar .qt{animation:gsType 1.1s steps(21) .25s both}
@keyframes gsType{from{width:0}to{width:8.8em}}
.gs-bar .car{width:1.5px;height:12px;background:var(--fg-1);margin-left:1px;flex:none}
.hcard.is-active .gs-bar .car{animation:gsCar .9s steps(1) infinite,gsOff .01s linear 1.5s forwards}
@keyframes gsCar{50%{opacity:0}}
@keyframes gsOff{to{opacity:0}}
.gs-bar .mag{width:14px;height:14px;stroke:var(--fg-4);fill:none;stroke-width:2;flex:none}
.gs-scroll{position:relative;flex:1;min-height:0;display:flex;flex-direction:column;gap:.35rem;padding-top:.15rem}
.gs-ad{border-bottom:1px solid var(--border-1);padding-bottom:.35rem}
.gs-ad .adl{display:inline-block;font-family:var(--font-mono);font-size:0.625rem;letter-spacing:.08em;
  text-transform:uppercase;color:var(--fg-4);border:1px solid var(--border-2);border-radius:3px;
  padding:0 .25rem;margin-bottom:.2rem}
.gs-ad b{display:block;font-size:var(--fs-xs);color:#1a0dab;font-weight:var(--fw-semibold);line-height:1.3}
.gs-ad small{font-size:0.6875rem;color:var(--grass-deep)}
.gs-biz{display:flex;gap:.55rem;border:1px solid var(--border-2);border-radius:var(--r-md);padding:.5rem}
.gs-biz .th{width:38px;height:38px;border-radius:6px;overflow:hidden;flex:none}
.gs-biz .th img{width:100%;height:100%;object-fit:cover;display:block}
.gs-biz .tx{min-width:0}
.gs-biz b{display:block;font-size:var(--fs-xs);font-weight:var(--fw-bold);color:#1a0dab}
.gs-biz small{display:flex;align-items:center;gap:.25rem;font-size:0.6875rem;color:var(--fg-3);margin-top:.12rem}
.gs-biz .st{color:#FBBC04;letter-spacing:.03em}
.gs-biz .mut{color:var(--fg-4)}
.gs-biz em{display:block;font-style:normal;font-size:0.6875rem;color:var(--grass-deep);
  font-weight:var(--fw-semibold);margin-top:.15rem}
.gpst .gr-score{font-size:0.6875rem;font-weight:var(--fw-semibold);color:var(--fg-2);letter-spacing:0;line-height:inherit}
.gpst .gr-score::after{font-size:inherit;font-weight:inherit;vertical-align:0}
.hcard.is-active .gpst .gr-score{animation-delay:2.2s}
.gs-acts{display:flex;gap:.35rem}
.gs-acts .a{position:relative;flex:1;text-align:center;font-size:.625rem;font-weight:var(--fw-semibold);color:var(--fg-2);
  border:1px solid var(--border-2);border-radius:var(--r-pill);padding:.3rem 0}
.gs-acts .a.p{background:var(--grass-soft);border-color:var(--grass);color:var(--grass-deep)}
.hcard.is-active .gs-acts .a.p{animation:gsPress .45s var(--ease-snap) 4.05s}
@keyframes gsPress{0%{transform:scale(1)}45%{transform:scale(.92);background:var(--grass);color:#fff}100%{transform:scale(1)}}
.gs-out{margin-top:auto;display:flex;flex-direction:column;gap:.35rem}
.gs-chip{display:flex;align-items:center;gap:.45rem;background:var(--bg-subtle);border:1px solid var(--border-2);
  border-radius:var(--r-md);padding:.4rem .5rem}
.gs-chip .bi{width:14px;height:14px;fill:var(--grass-deep);flex:none}
.gs-chip i{width:13px;height:13px;color:var(--violet-deep);flex:none}
.gs-chip b{display:block;font-size:.625rem;font-weight:var(--fw-bold);color:var(--fg-1);line-height:1.2}
.gs-chip small{display:block;font-size:0.625rem;color:var(--fg-3);font-family:var(--font-mono);letter-spacing:.04em}
.hcard.is-active .gs-chip.c-a{animation:hfBub .45s var(--ease-snap) 4.4s both}
.hcard.is-active .gs-chip.c-b{animation:hfBub .45s var(--ease-snap) 5s both}
/* sits on the Message button's own face, so the press always lands on it */
.gs-cur{position:absolute;left:58%;top:62%;width:15px;height:15px;color:var(--fg-1);
  opacity:0;pointer-events:none;filter:drop-shadow(0 2px 3px rgba(0,0,0,.3));z-index:4}
.gs-cur svg{width:100%;height:100%;fill:currentColor;display:block}
.hcard.is-active .gs-cur{animation:gsCur 2s var(--ease-out) 2.4s forwards}
@keyframes gsCur{
  0%{opacity:0;transform:translate(120px,86px)}
  20%{opacity:1}
  72%{opacity:1;transform:none}
  82%{transform:scale(.78)}
  92%{transform:none}
  100%{opacity:0;transform:none}}

@media (prefers-reduced-motion:reduce){
  .gs-bar .qt{width:auto}
  .gs-bar .car,.gs-cur{display:none}
  .gs-chip{opacity:1;transform:none}
  .hcard.is-active .gs-bar .qt,.hcard.is-active .gs-acts .a.p{animation:none}
}


/* Click-to-WhatsApp referral: WhatsApp quotes the ad above the first message,
   which is also the thing uxjo attributes the contact to. */
.hb .ref{display:flex;align-items:center;gap:.45rem;background:rgba(255,255,255,.07);
  border-left:3px solid var(--grass);border-radius:6px;padding:.35rem .45rem;margin-bottom:.4rem}
.hb .ref img{width:38px;height:38px;border-radius:4px;object-fit:cover;flex:none;display:block}
.hb .ref .rt{min-width:0}
.hb .ref b{display:block;font-size:.6875rem;font-weight:var(--fw-semibold);color:#E9EDF0;line-height:1.25;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hb .ref small{display:block;font-size:0.6875rem;color:rgba(255,255,255,.55)}
.hb .ref em{display:block;font-style:normal;font-size:0.625rem;color:#25D366;font-family:var(--font-mono);
  letter-spacing:.06em;text-transform:uppercase;margin-top:.1rem}