@property --reveal{syntax:"<percentage>";inherits:true;initial-value:0%}.hgi-morph{color:inherit;--reveal:0%;transition:--reveal .38s cubic-bezier(.4,0,.2,1);display:inline-block;position:relative}@layer base{:where(.hgi-morph){width:1.5rem;height:1.5rem}}.hgi-morph:hover,.hgi-morph[data-active=true],.group:hover .hgi-morph,.group:focus-visible .hgi-morph,.group[data-active=true] .hgi-morph,.group[aria-current=page] .hgi-morph{--reveal:100%}.hgi-morph>svg{width:100%;height:100%;position:absolute;inset:0}.hgi-fill{-webkit-mask:radial-gradient(circle at 50% 50%, #fff var(--reveal), transparent var(--reveal));-webkit-mask:radial-gradient(circle at 50% 50%, #fff var(--reveal), transparent var(--reveal));mask:radial-gradient(circle at 50% 50%, #fff var(--reveal), transparent var(--reveal))}.hgi-base{-webkit-mask:radial-gradient(circle at 50% 50%, transparent var(--reveal), #fff var(--reveal));-webkit-mask:radial-gradient(circle at 50% 50%, transparent var(--reveal), #fff var(--reveal));mask:radial-gradient(circle at 50% 50%, transparent var(--reveal), #fff var(--reveal))}@media (prefers-reduced-motion:reduce){.hgi-morph{transition:none}}