/* Identity tick badge (static/js/ticks.js + templates/partials/tick.html).
   Small inline badge after a display name; CSS-only tooltip above it.
   Never changes the cursor and never underlines the host name. */
.idtick{display:inline-flex;align-items:center;margin-left:4px;width:.85em;height:.85em;position:relative;vertical-align:-0.08em;cursor:default;-webkit-user-select:none;user-select:none;flex:none}
.idtick-svg{width:100%;height:100%;display:block}

/* Tooltip */
.idtick .idtick-tip{position:absolute;bottom:calc(100% + 6px);left:50%;transform:translateX(-50%);background:#111827;color:#fff;font-size:11px;line-height:1.35;padding:3px 8px;border-radius:6px;white-space:nowrap;opacity:0;visibility:hidden;transition:opacity .15s,visibility .15s;pointer-events:none;z-index:9999}
.idtick:hover .idtick-tip,.idtick:focus-visible .idtick-tip{opacity:1;visibility:visible}

/* ── Effects (only when the fx class is present) ── */

/* glow: pulsing drop-shadow on the svg */
.idtick-fx-glow .idtick-svg{animation:idtick-glow 2s ease-in-out infinite}
@keyframes idtick-glow{0%,100%{filter:drop-shadow(0 0 1px rgba(255,255,255,.25))}50%{filter:drop-shadow(0 0 4px rgba(255,255,255,.85))}}

/* shimmer: rounded gradient sweep over the shape */
.idtick-fx-shimmer{overflow:hidden;border-radius:50%}
.idtick-fx-shimmer::after{content:"";position:absolute;inset:0;background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.75) 50%,transparent 70%);mix-blend-mode:screen;transform:translateX(-120%);animation:idtick-shimmer 2.6s ease-in-out infinite;pointer-events:none}
@keyframes idtick-shimmer{55%,100%{transform:translateX(120%)}}

/* sparkle: tiny gold four-point sparkle at the top-right, twinkling */
.idtick-fx-sparkle::after{content:"";position:absolute;top:-2px;right:-2px;width:32%;height:32%;background:linear-gradient(#fbbf24,#fbbf24) center/100% 16% no-repeat,linear-gradient(#fbbf24,#fbbf24) center/16% 100% no-repeat;filter:drop-shadow(0 0 2px rgba(251,191,36,.8));animation:idtick-twinkle 1.6s ease-in-out infinite;pointer-events:none}
@keyframes idtick-twinkle{0%,100%{opacity:.2;transform:scale(.65) rotate(0deg)}50%{opacity:1;transform:scale(1.05) rotate(18deg)}}

/* pulse: gentle scale breathing */
.idtick-fx-pulse .idtick-svg{animation:idtick-pulse 1.8s ease-in-out infinite}
@keyframes idtick-pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.12)}}

/* fire: golden flames licking off the badge (drop-shadow chain, 1s alternate —
   adapted from the classic text-shadow fire demo, scaled to a 14px badge) */
.idtick-fx-fire .idtick-svg{animation:idtick-fire 1s ease-in-out infinite alternate}
@keyframes idtick-fire{
0%{filter:drop-shadow(0 0 1px #fefcc9) drop-shadow(0 -1px 2px #feec85) drop-shadow(-1px -2px 3px #ffae34) drop-shadow(1px -3px 5px #ec760c) drop-shadow(-1px -5px 8px #cd4606) drop-shadow(0 -7px 10px #973716)}
100%{filter:drop-shadow(0 0 2px #fefcc9) drop-shadow(1px -1px 3px #fefcc9) drop-shadow(-2px -2px 4px #feec85) drop-shadow(2px -4px 6px #ffae34) drop-shadow(-2px -6px 9px #ec760c) drop-shadow(0 -8px 12px #cd4606)}
}

/* whimsical: rainbow hue-cycling with a playful wiggle-and-hop */
.idtick-fx-whimsical .idtick-svg{animation:idtick-whimsy 2.4s ease-in-out infinite}
@keyframes idtick-whimsy{
0%,100%{filter:hue-rotate(0deg) saturate(1.5);transform:rotate(-8deg) scale(1)}
25%{transform:rotate(7deg) scale(1.1) translateY(-1px)}
50%{filter:hue-rotate(180deg) saturate(1.7);transform:rotate(-6deg) scale(1.05)}
75%{transform:rotate(9deg) scale(1.12) translateY(-1px)}
}

/* neon: hot-pink sign glow with an occasional stutter-flicker */
.idtick-fx-neon .idtick-svg{animation:idtick-neon 2.2s linear infinite}
@keyframes idtick-neon{
0%,7%,9%,100%{filter:saturate(1.6) brightness(1.15) drop-shadow(0 0 2px #ff4fd8) drop-shadow(0 0 5px #ff4fd8) drop-shadow(0 0 9px #8b5cf6)}
8%{filter:saturate(.9) brightness(.9) drop-shadow(0 0 1px #ff4fd8)}
54%,56%{filter:saturate(1.6) brightness(1.15) drop-shadow(0 0 2px #ff4fd8) drop-shadow(0 0 5px #ff4fd8) drop-shadow(0 0 9px #8b5cf6)}
55%{filter:saturate(.9) brightness(.9) drop-shadow(0 0 1px #ff4fd8)}
}

/* galaxy: deep space aura breathing + tiny twinkling star specks */
.idtick-fx-galaxy::before{content:"";position:absolute;inset:-30%;pointer-events:none;
 background:radial-gradient(1px 1px at 20% 30%,#fff,transparent 60%),radial-gradient(1px 1px at 70% 18%,#c7d2fe,transparent 60%),radial-gradient(1.5px 1.5px at 82% 68%,#fff,transparent 60%),radial-gradient(1px 1px at 30% 78%,#e0e7ff,transparent 60%);
 animation:idtick-stars 2.2s ease-in-out infinite}
.idtick-fx-galaxy .idtick-svg{animation:idtick-galaxy 2.2s ease-in-out infinite}
@keyframes idtick-galaxy{
0%,100%{filter:drop-shadow(0 0 2px rgba(129,140,248,.8)) drop-shadow(0 0 6px rgba(79,70,229,.55)) saturate(1.2)}
50%{filter:drop-shadow(0 0 3px rgba(165,180,252,.95)) drop-shadow(0 0 9px rgba(124,58,237,.8)) saturate(1.45)}
}
@keyframes idtick-stars{
0%,100%{opacity:.35;transform:scale(.9) rotate(0deg)}
50%{opacity:1;transform:scale(1.06) rotate(12deg)}
}

@media (prefers-reduced-motion:reduce){
  .idtick,.idtick *,.idtick *::before,.idtick *::after{animation:none!important;transition:none!important}
}