/* ============================================================
   Its Hover: vanilla CSS port
   Source: https://github.com/itshover/itshover (Apache 2.0)
   Original icons são componentes React + motion/react.
   Aqui as animações de hover foram portadas para CSS puro,
   disparadas ao passar o mouse no host (.ih-host:hover).
   ============================================================ */

.ih-svg{display:block}
.ih-svg *{transform-box:fill-box}
.ih-host{ }

@media(prefers-reduced-motion:reduce){
  .ih-host:hover .ih-svg *{animation:none!important;transition:none!important;transform:none!important}
}

/* ---- draw helper (pathLength 0→1) ---- */
.ih-svg [data-draw]{stroke-dasharray:1;stroke-dashoffset:0}
@keyframes ihDraw{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}

/* ---- magnifier : group wiggle ---- */
@keyframes ihMag{
  0%{transform:translate(0,0) rotate(0)}
  25%{transform:translate(1px,-1px) rotate(-5deg)}
  50%{transform:translate(0,-2px) rotate(5deg)}
  75%{transform:translate(-1px,-1px) rotate(-5deg)}
  100%{transform:translate(0,0) rotate(0)}
}
.ih-host:hover [data-anim=magnifier] .p-mag{animation:ihMag 1s ease-in-out;transform-origin:center}

/* ---- filled bell : swing + clapper ---- */
@keyframes ihBellBody{0%{transform:rotate(0)}20%{transform:rotate(-8deg)}40%{transform:rotate(6deg)}60%{transform:rotate(-4deg)}80%{transform:rotate(2deg)}100%{transform:rotate(0)}}
@keyframes ihBellClap{0%{transform:rotate(0)}20%{transform:rotate(20deg)}40%{transform:rotate(-18deg)}60%{transform:rotate(12deg)}80%{transform:rotate(-6deg)}100%{transform:rotate(0)}}
.ih-host:hover [data-anim=bell] .p-bell{animation:ihBellBody .6s ease-in-out;transform-origin:50% 12%}
.ih-host:hover [data-anim=bell] .p-bell-clap{animation:ihBellClap .6s ease-in-out .05s;transform-origin:50% 0%}

/* ---- history-circle : rewind ---- */
.ih-svg[data-anim=history] .p-hist-ring,
.ih-svg[data-anim=history] .p-hist-hand{transition:transform .3s ease;transform-origin:center}
.ih-host:hover [data-anim=history] .p-hist-ring{transform:rotate(-45deg)}
.ih-host:hover [data-anim=history] .p-hist-hand{transform:rotate(-30deg)}

/* ---- target : pulsing rings ---- */
@keyframes ihPulse{0%{transform:scale(1);opacity:1}50%{transform:scale(1.18);opacity:.6}100%{transform:scale(1);opacity:1}}
.ih-host:hover [data-anim=target] .p-ring{animation:ihPulse .6s ease-in-out;transform-origin:center}
.ih-host:hover [data-anim=target] .p-ring.m{animation-delay:.1s}
.ih-host:hover [data-anim=target] .p-ring.i{animation-delay:.2s}

/* ---- message-circle : draw + pop ---- */
@keyframes ihPop{0%{transform:scale(1)}50%{transform:scale(1.06)}100%{transform:scale(1)}}
.ih-host:hover [data-anim=message] .p-msg{animation:ihDraw .6s ease-in-out, ihPop .3s ease-out .6s;transform-origin:center}

/* ---- chart-line : draw line + grow base ---- */
@keyframes ihScaleX{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.ih-host:hover [data-anim=chart] .p-chart{animation:ihDraw .6s ease-in-out}
.ih-host:hover [data-anim=chart] .p-base{animation:ihScaleX .4s ease-out;transform-origin:left center}

/* ---- shield-check : pulse + draw check ---- */
@keyframes ihPulse2{0%{transform:scale(1)}50%{transform:scale(1.05)}100%{transform:scale(1)}}
.ih-host:hover [data-anim=shield] .p-shield{animation:ihPulse2 .35s ease-out;transform-origin:center}
.ih-host:hover [data-anim=shield] .p-shield-check{animation:ihDraw .3s ease-in-out .25s both}

/* ---- sliders-horizontal : handles slide (loop on hover) ---- */
@keyframes ihSlideA{0%{transform:translateX(0)}50%{transform:translateX(-4px)}100%{transform:translateX(0)}}
@keyframes ihSlideB{0%{transform:translateX(0)}50%{transform:translateX(4px)}100%{transform:translateX(0)}}
.ih-host:hover [data-anim=sliders] .p-sl1{animation:ihSlideA 2s ease-in-out infinite}
.ih-host:hover [data-anim=sliders] .p-sl2{animation:ihSlideB 2s ease-in-out infinite .2s}
.ih-host:hover [data-anim=sliders] .p-sl3{animation:ihSlideA 2s ease-in-out infinite .4s}

/* ---- home : roof drop, house pop, door grow ---- */
@keyframes ihRoof{from{transform:translateY(-2px);opacity:.6}to{transform:translateY(0);opacity:1}}
@keyframes ihHouse{from{transform:scale(.95)}to{transform:scale(1)}}
@keyframes ihDoor{from{transform:scaleY(0)}to{transform:scaleY(1)}}
.ih-host:hover [data-anim=home] .p-roof{animation:ihRoof .4s ease-out}
.ih-host:hover [data-anim=home] .p-house{animation:ihHouse .3s ease-out;transform-origin:center}
.ih-host:hover [data-anim=home] .p-door{animation:ihDoor .3s ease-out .25s both;transform-origin:center bottom}

/* ---- heart : heartbeat ---- */
@keyframes ihBeat{0%{transform:scale(1)}25%{transform:scale(1.15)}50%{transform:scale(1)}75%{transform:scale(1.25)}100%{transform:scale(1)}}
.ih-host:hover [data-anim=heart] .p-heart{animation:ihBeat .6s ease-out;transform-origin:center}

/* ---- sparkles : spin trio ---- */
@keyframes ihSparkMain{0%{transform:rotate(0) scale(1)}50%{transform:rotate(90deg) scale(1.2)}100%{transform:rotate(180deg) scale(1)}}
@keyframes ihSparkTop{0%{transform:rotate(0) scale(1);opacity:1}50%{transform:rotate(-45deg) scale(.8);opacity:.6}100%{transform:rotate(-90deg) scale(1.1);opacity:1}}
@keyframes ihSparkBottom{0%{transform:rotate(0) scale(1);opacity:1}50%{transform:rotate(45deg) scale(1.15);opacity:.7}100%{transform:rotate(90deg) scale(.9);opacity:1}}
.ih-host:hover [data-anim=sparkles] .p-spark-main{animation:ihSparkMain .6s ease-in-out both;transform-origin:center}
.ih-host:hover [data-anim=sparkles] .p-spark-top{animation:ihSparkTop .5s ease-in-out .1s both;transform-origin:center}
.ih-host:hover [data-anim=sparkles] .p-spark-bottom{animation:ihSparkBottom .5s ease-in-out .05s both;transform-origin:center}

/* ---- rosette check : badge wobble + draw check ---- */
@keyframes ihWobble{0%{transform:rotate(0) scale(1)}30%{transform:rotate(-5deg) scale(1.05)}60%{transform:rotate(5deg) scale(1.02)}100%{transform:rotate(0) scale(1)}}
.ih-host:hover [data-anim=rosette] .p-rosette{animation:ihWobble .5s ease-in-out;transform-origin:center}
.ih-host:hover [data-anim=rosette] .p-rosette-check{animation:ihDraw .4s ease-out .15s both}

/* ---- bookmark : squish ---- */
.ih-svg[data-anim=bookmark] .p-bm{transition:transform .18s ease;transform-origin:50% 20%}
.ih-host:hover [data-anim=bookmark] .p-bm{transform:scaleY(.9) translateY(2px)}

/* ---- moon : tilt + grow ---- */
@keyframes ihMoon{0%{transform:rotate(0) scale(1)}50%{transform:rotate(-15deg) scale(1.1)}100%{transform:rotate(0) scale(1)}}
.ih-host:hover [data-anim=moon] .p-moon{animation:ihMoon .5s ease-in-out;transform-origin:center}

/* ---- sun : center pulse + rays flicker ---- */
@keyframes ihSunC{0%{transform:scale(1)}50%{transform:scale(.8)}100%{transform:scale(1)}}
@keyframes ihSunR{0%{opacity:1}50%{opacity:.4}100%{opacity:1}}
.ih-host:hover [data-anim=sun] .p-sun-c{animation:ihSunC .4s ease-in-out;transform-origin:center}
.ih-host:hover [data-anim=sun] .p-sun-r{animation:ihSunR .5s ease-in-out}