/* ============================================================
   KAPSHARE — engagement FX layer (Pixy + Agenio inspired)
   Hero entrance, parallax shapes, proof-stat counters,
   richer card hovers, magnetic buttons, trailing cursor.
   All additive + theme-aware; degrades gracefully w/o JS
   and respects prefers-reduced-motion.
   ============================================================ */

/* ---------- HERO ENTRANCE (staggered rise) ---------- */
/* Hidden start applies only while fx is active (fx is added by an inline
   head script before first paint — so no-JS users always see content).
   The .play class (added when the hero enters view) runs the cascade; it
   re-triggers each time the hero scrolls back into view. */
@media (prefers-reduced-motion: no-preference){
  html.fx .h-rise{ opacity:0; transform:translateY(30px); will-change:transform,opacity; }
  html.fx .hero.play .h-rise{
    animation:hRise .85s cubic-bezier(.16,1,.3,1) forwards;
    animation-delay:calc(var(--i,0) * .09s);
  }
}
@keyframes hRise{ from{ opacity:0; transform:translateY(30px); } to{ opacity:1; transform:none; } }

/* status pill */
.status-pill{
  display:inline-flex; align-items:center; gap:10px;
  padding:9px 16px 9px 13px; border-radius:40px;
  border:1px solid var(--line-strong); background:color-mix(in srgb,var(--fg) 5%,transparent);
  font-size:12.5px; font-weight:600; letter-spacing:.04em; color:var(--fg);
  margin-bottom:26px;
}
.status-pill .live{ position:relative; width:9px; height:9px; }
.status-pill .live::before,
.status-pill .live::after{ content:""; position:absolute; inset:0; border-radius:50%; background:var(--accent); }
@media (prefers-reduced-motion: no-preference){
  .status-pill .live::after{ animation:ping 1.8s cubic-bezier(0,0,.2,1) infinite; }
}
@keyframes ping{ 0%{ transform:scale(1); opacity:.7; } 75%,100%{ transform:scale(2.6); opacity:0; } }
.status-pill b{ color:var(--accent); font-weight:700; }

/* parallax shapes get a smooth follow */
.hero .shape{ transition:transform .5s cubic-bezier(.16,1,.3,1); will-change:transform; }

/* ---------- PROOF STATS (Agenio count-up band) ---------- */
.stats-grid{
  display:grid; grid-template-columns:repeat(4,1fr); gap:0;
  border:1px solid var(--band-line); border-radius:24px; overflow:hidden;
}
@media(max-width:820px){ .stats-grid{ grid-template-columns:repeat(2,1fr); } }
@media(max-width:460px){ .stats-grid{ grid-template-columns:1fr; } }
.stat{
  padding:clamp(30px,4vw,52px) clamp(22px,3vw,40px);
  border-right:1px solid var(--band-line); position:relative;
}
.stat:last-child{ border-right:none; }
@media(max-width:820px){
  .stat:nth-child(2n){ border-right:none; }
  .stat:nth-child(-n+2){ border-bottom:1px solid var(--band-line); }
}
@media(max-width:460px){
  .stat{ border-right:none; border-bottom:1px solid var(--band-line); }
  .stat:last-child{ border-bottom:none; }
}
.stat-num{
  font-family:var(--font-display); line-height:.9;
  font-size:clamp(48px,6.4vw,86px); letter-spacing:-.01em;
  background:var(--grad); -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
  display:flex; align-items:flex-start;
}
.stat-num .suf{ font-size:.5em; margin-top:.35em; -webkit-text-fill-color:var(--accent); }
.stat p{ color:var(--band-fg); opacity:.62; font-size:15px; margin-top:14px; max-width:20ch; line-height:1.35; }
html[data-approach="agenio"] .stat-num{ text-transform:none; }

/* ---------- RICHER CARD HOVERS ---------- */
/* accent line that grows across the top of service cards */
.svc-card{ position:relative; }
.svc-card::after{
  content:""; position:absolute; left:0; top:0; height:3px; width:0;
  background:var(--grad); border-radius:3px 3px 0 0;
  transition:width .5s cubic-bezier(.16,1,.3,1);
}
.svc-card:hover::after{ width:100%; }
.svc-card{ transition:transform var(--tmd), border-color var(--tmd), background var(--tmd), box-shadow var(--tmd); }
.svc-card:hover{ box-shadow:0 24px 50px -28px rgba(0,0,0,.5); }

/* product screenshot zoom + accent wash on hover */
.prod-shot{ overflow:hidden; }
.prod-shot::after{
  content:""; position:absolute; inset:0; z-index:2; pointer-events:none;
  background:linear-gradient(120deg, color-mix(in srgb,var(--accent) 30%,transparent), transparent 55%);
  opacity:0; transition:opacity .5s var(--ease);
}
.prod-card:hover .prod-shot::after{ opacity:1; }
.prod-shot > *{ transition:transform .7s cubic-bezier(.16,1,.3,1); }
.prod-card:hover .prod-shot > *{ transform:scale(1.05); }

/* team avatar pop */
.member .avatar{ transition:transform var(--tmd); }
.member:hover .avatar{ transform:translateY(-3px) rotate(-4deg) scale(1.06); }

/* ---------- MAGNETIC BUTTONS ---------- */
.btn{ will-change:transform; }
.btn .lbl{ display:inline-flex; align-items:center; gap:12px; pointer-events:none; }

/* ---------- TRAILING CURSOR ---------- */
.cursor-ring{
  position:fixed; top:0; left:0; z-index:9998; pointer-events:none;
  width:38px; height:38px; margin:-19px 0 0 -19px; border-radius:50%;
  border:1.5px solid var(--accent);
  transform:translate3d(-100px,-100px,0) scale(1);
  transition:width .25s var(--ease), height .25s var(--ease),
             background .25s var(--ease), opacity .3s var(--ease), border-color .25s var(--ease);
  opacity:0; mix-blend-mode:difference;
}
.cursor-ring.on{ opacity:.9; }
.cursor-ring.hot{ width:64px; height:64px; margin:-32px 0 0 -32px; background:color-mix(in srgb,var(--accent) 18%,transparent); }
@media (hover:none), (pointer:coarse), (prefers-reduced-motion:reduce){
  .cursor-ring{ display:none !important; }
}