/* ===== GodSparx icon system — sizing, states, and the click life ===== */

.gsi{width:1.15em;height:1.15em;display:inline-block;vertical-align:-.22em;flex:none;
  color:inherit;transform-origin:50% 50%;
  transition:transform .2s cubic-bezier(.34,1.56,.64,1),color .18s ease,opacity .18s ease}
.gsi.sm{width:1em;height:1em;vertical-align:-.16em}
.gsi.lg{width:1.5em;height:1.5em;vertical-align:-.32em}
.gsi.xl{width:22px;height:22px;vertical-align:middle}
.gsi.grad use{fill:url(#gsiGrad);stroke:url(#gsiGrad)}

button:hover > .gsi,a:hover > .gsi{transform:translateY(-1px) scale(1.06)}

@keyframes gsiPop{
  0%{transform:scale(1)}
  22%{transform:scale(.8) rotate(-4deg)}
  55%{transform:scale(1.2) rotate(3deg)}
  78%{transform:scale(.96)}
  100%{transform:scale(1)}
}
.gsi-pop > .gsi,.gsi-pop .gsi,.gsi-pop.gsi{animation:gsiPop .46s cubic-bezier(.34,1.4,.5,1)}

@keyframes gsiRing{
  0%{opacity:.45;transform:translate(-50%,-50%) scale(.55)}
  100%{opacity:0;transform:translate(-50%,-50%) scale(1.5)}
}
.gsi-pop{position:relative}
.gsi-pop::after{content:"";position:absolute;left:50%;top:50%;width:100%;height:100%;
  border-radius:inherit;border:2px solid currentColor;pointer-events:none;
  animation:gsiRing .5s ease-out forwards}

@keyframes gsiBit{
  0%{opacity:0;transform:translate(-50%,-50%) scale(.3)}
  18%{opacity:1;transform:translate(calc(-50% + var(--dx)*.42),calc(-50% + var(--dy)*.42)) scale(1.1)}
  100%{opacity:0;transform:translate(calc(-50% + var(--dx)),calc(-50% + var(--dy))) scale(.25)}
}
.gsi-spark-bit{position:absolute;width:7px;height:7px;border-radius:2px;
  background:linear-gradient(135deg,#818CF8,#C084FC);
  box-shadow:0 0 10px rgba(139,92,246,.85);
  animation:gsiBit .62s cubic-bezier(.2,.7,.3,1) forwards}

@media (prefers-reduced-motion:reduce){
  .gsi,.gsi-pop > .gsi{transition:none;animation:none}
  .gsi-pop::after,.gsi-spark-bit{display:none}
}

/* ===== Verified human — testimonies only ===== */
.gs-verify{display:inline-flex;align-items:center;gap:7px;border-radius:999px;
  font:800 12px var(--font);letter-spacing:.01em;padding:6px 12px;white-space:nowrap;
  color:#5B4BD6;background:#F2EFFF;border:1px solid #DED6FF}
.gs-verify .gsi{width:15px;height:15px;color:#7C6BF0}
.gs-verify.dark{color:#E9E4FF;background:linear-gradient(135deg,rgba(99,102,241,.24),rgba(168,85,247,.24));
  border-color:rgba(167,139,250,.45)}
.gs-verify.dark .gsi{color:#C4B5FD}
.gs-verify.mini{font-size:11px;padding:4px 9px;gap:5px}
.gs-verify.mini .gsi{width:13px;height:13px}
/* the shield gets a slow shimmer so it reads as a live seal, not a sticker */
@keyframes gsVerify{0%,100%{opacity:1}50%{opacity:.62}}
.gs-verify .gsi{animation:gsVerify 3.4s ease-in-out infinite}
@media (prefers-reduced-motion:reduce){.gs-verify .gsi{animation:none}}
.gs-verify > span{display:inline-flex;line-height:0}

/* ===== account badges (also used by the app shell) ===== */
.gs-tag{display:inline-flex;align-items:center;gap:5px;border-radius:999px;padding:3px 9px;
  font:800 10.5px var(--font,Inter,system-ui);letter-spacing:.04em;text-transform:uppercase;
  white-space:nowrap;vertical-align:2px;line-height:1.35}
.gs-tag .gsi{width:13px;height:13px;animation:none;flex:none}
.gs-tag.founder{background:linear-gradient(135deg,#4B46E5,#A855F7);color:#fff;box-shadow:0 3px 10px rgba(99,102,241,.35)}
.gs-tag.team{background:#EEF2FF;color:#4338CA;border:1px solid #C7D2FE}
/* app is dark by default */
.app .gs-verify,.tv-page .gs-verify{color:#E9E4FF;background:linear-gradient(135deg,rgba(99,102,241,.24),rgba(168,85,247,.24));border-color:rgba(167,139,250,.45)}
.app .gs-verify .gsi,.tv-page .gs-verify .gsi{color:#C4B5FD}