@font-face {
  font-family: "Hidra Badge Inter";
  src: url("assets/InterVariable.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
:host {
  --hidra-badge-scale: 0.5204460967;
  display: inline-block;
  width: 140px;
  height: 56.2091px;
  line-height: normal;
}
:host([hidden]) { display: none; }
.hidra-badge__viewport {
  display: block;
  width: 269px;
  height: 108.0017px;
  transform: scale(var(--hidra-badge-scale));
  transform-origin: top left;
}
.hidra-badge, .hidra-badge * { box-sizing: border-box; }
.hidra-badge {
  position: relative;
  display: inline-flex;
  align-items: center;
  flex: none;
  --badge-ease: cubic-bezier(0.77, 0, 0.175, 1);
  --badge-duration: 240ms;
  width: 269px;
  height: 108.0017px;
  padding: 14px 22px 14px 14px;
  gap: 16px;
  overflow: hidden;
  border-radius: 32px;
  background: linear-gradient(122.47956deg, #121212 9.9851%, #0a0a0a 72.639%);
  color: white;
  text-decoration: none;
  font-family: "Hidra Badge Inter", sans-serif;
  font-optical-sizing: none;
  isolation: isolate;
  transform: translateY(0);
  transition: transform var(--badge-duration) var(--badge-ease);
}
.hidra-badge__sheen {
  position: absolute;
  inset: 0;
  z-index: 8;
  padding: 2px;
  border-radius: inherit;
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite: exclude;
  pointer-events: none;
}
.hidra-badge__sheen::before {
  content: "";
  position: absolute;
  top: -34%;
  left: -74px;
  width: 44px;
  height: 168%;
  border-radius: 50%;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgb(190 217 255 / .025) 26%,
    rgb(255 241 204 / .09) 41%,
    rgb(255 255 255 / .26) 48%,
    rgb(255 255 255 / .32) 50%,
    rgb(255 225 147 / .08) 58%,
    rgb(255 255 255 / .018) 72%,
    transparent 100%
  );
  filter: blur(.35px);
  mix-blend-mode: screen;
  opacity: 0;
  transform: translate3d(0, 0, 0) rotate(14deg);
  transform-origin: center;
  will-change: transform, opacity;
  animation: badge-metal-sheen 5.7s linear 1.4s infinite;
}
.hidra-badge::after {
  content: "";
  position: absolute;
  inset: 0;
  padding: 2px;
  border-radius: inherit;
  background: linear-gradient(128.68deg, rgb(255 255 255 / .12), rgb(255 255 255 / .0336));
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite: exclude;
  pointer-events: none;
  opacity: 0.82;
  transition: opacity var(--badge-duration) var(--badge-ease);
}
.hidra-badge:focus-visible { outline: 2px solid #ffc300; outline-offset: 4px; }
.hidra-badge__icon {
  will-change: transform;
  transform-origin: center center;
  transition: transform var(--badge-duration) var(--badge-ease);
}
.hidra-badge__icon {
  position: relative;
  flex: 0 0 80px;
  width: 80px;
  height: 80.0017px;
  border-radius: 20px;
  box-shadow: 0 3px 6px rgb(0 0 0 / .51), 0 10px 10px rgb(0 0 0 / .44), 0 23px 14px rgb(0 0 0 / .26), 0 40px 16px rgb(0 0 0 / .08), 0 63px 18px rgb(0 0 0 / .01);
}
.hidra-badge__art {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: 21.6px;
  background: linear-gradient(#070707, #091021);
  isolation: isolate;
  transition: transform var(--badge-duration) var(--badge-ease);
}
.hidra-badge__stars,
.hidra-badge__comets { position: absolute; inset: 0; z-index: 6; pointer-events: none; }
.hidra-badge__stars { opacity: 0.9; mix-blend-mode: normal; }
.hidra-badge__star {
  position: absolute;
  width: 1.4px;
  height: 1.4px;
  border-radius: 50%;
  background: #ffffff;
  box-shadow: 0 0 6px 0.6px rgb(255 255 255 / 0.72);
  animation: star-pulse 2.4s infinite;
}
.hidra-badge__star--1 { left: 13%; top: 18%; animation-delay: -0.1s; }
.hidra-badge__star--2 { left: 72%; top: 26%; animation-delay: -1.2s; }
.hidra-badge__star--3 { left: 34%; top: 58%; animation-delay: -0.6s; }
.hidra-badge__star--4 { left: 56%; top: 12%; animation-delay: -1.6s; }
.hidra-badge__star--5 { left: 21%; top: 73%; animation-delay: -0.4s; }
.hidra-badge__star--6 { left: 82%; top: 65%; animation-delay: -1.9s; }
.hidra-badge__star--7 { left: 62%; top: 48%; animation-delay: -1.0s; }
.hidra-badge__star--8 { left: 42%; top: 33%; animation-delay: -0.8s; }
.hidra-badge__comets { z-index: 6; }
.hidra-badge__comet {
  position: absolute;
  left: 0;
  top: 50%;
  width: 46px;
  height: 1.5px;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent 0%, rgb(255 255 255 / .18) 18%, #ffffff 82%, transparent 100%);
  filter: blur(0.1px);
  opacity: 0;
  transform: translate3d(-64px, 0, 0);
  transform-origin: center;
  will-change: transform, opacity;
}
.hidra-badge__art::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 0 1.4px .4px white;
  pointer-events: none;
  z-index: 4;
}
.hidra-badge__glow { position: absolute; display: block; width: 82.7px; height: 59.4px; }
.hidra-badge__glow img { position: absolute; display: block; max-width: none; }
.hidra-badge__glow--back { left: -.7px; top: 25.2px; }
.hidra-badge__glow--back img { left: -31.92%; top: -44.44%; width: 163.84%; height: 188.88%; }
.hidra-badge__glow--front { left: -1.4px; top: 34.6px; }
.hidra-badge__glow--front img { left: -29.99%; top: -41.75%; width: 159.98%; height: 183.5%; }
.hidra-badge__glow--light { left: 1px; top: 51px; width: 79.8px; height: 44.8px; mix-blend-mode: plus-lighter; }
.hidra-badge__glow--light img { left: -15.04%; top: -26.79%; width: 130.08%; height: 153.58%; }
.hidra-badge__tint { position: absolute; width: 100px; height: 100px; top: 50%; left: 50%; transform: translate(-50%,-50%); background: #ffc300; mix-blend-mode: color; z-index: 3; }
.hidra-badge__mark { position: absolute; display: block; width: 53.265px; height: 48.76px; left: calc(50% + .03px); top: calc(50% - .02px); transform: translate(-50%,-50%); z-index: 5; }
.hidra-badge__copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  white-space: nowrap;
}
.hidra-badge__label { font-size: 16px; line-height: 19px; font-weight: 500; color: rgb(255 255 255 / .64); }
.hidra-badge__name { font-size: 32px; line-height: normal; font-weight: 700; text-box-trim: trim-both; text-box-edge: cap alphabetic; }

:host([theme="light"]) .hidra-badge {
  padding: 12px 20px 12px 12px;
  border: 2px solid transparent;
  background:
    linear-gradient(122.47956deg, #ffffff 39.487%, #f3f3f3 102.14%) padding-box,
    linear-gradient(128.68deg, rgb(0 0 0 / .125), rgb(0 0 0 / .04)) border-box,
    linear-gradient(122.47956deg, #ffffff 39.487%, #f3f3f3 102.14%) border-box;
  color: #000000;
}

:host([theme="light"]) .hidra-badge::after {
  opacity: 0;
}

:host([theme="light"]) .hidra-badge:hover::after {
  opacity: 0;
}

:host([theme="light"]) .hidra-badge__icon {
  overflow: hidden;
  box-shadow: none;
  filter:
    drop-shadow(0 63px 9px rgb(0 0 0 / .01))
    drop-shadow(0 40px 8px rgb(0 0 0 / .02))
    drop-shadow(0 23px 7px rgb(0 0 0 / .06))
    drop-shadow(0 10px 5px rgb(0 0 0 / .08))
    drop-shadow(0 3px 3px rgb(0 0 0 / .12));
}

:host([theme="light"]) .hidra-badge__label {
  color: rgb(0 0 0 / .64);
}

:host([theme="light"]) .hidra-badge__name {
  color: #000000;
}

@media (hover: hover) and (pointer: fine) {
.hidra-badge:hover {
    transform: scale(0.975);
  }

  .hidra-badge:hover::after {
    opacity: 1;
  }

  .hidra-badge:hover .hidra-badge__art {
    transform: scale(1.045);
  }

  .hidra-badge:hover .hidra-badge__icon {
    transform: scale(1.012) rotate(-2deg);
  }

}

@keyframes star-pulse {
  0%, 100% { opacity: 0.24; }
  50% { opacity: 0.82; }
}

@keyframes badge-metal-sheen {
  0%, 1.5% {
    transform: translate3d(0, 0, 0) rotate(14deg);
    opacity: 0;
  }
  4.5% { opacity: .68; }
  11.5% { opacity: .38; }
  15.5%, 100% {
    transform: translate3d(390px, 0, 0) rotate(14deg);
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hidra-badge,
  .hidra-badge__icon,
  .hidra-badge__art,
  .hidra-badge__copy,
  .hidra-badge::after {
    transition-duration: 1ms;
  }

  .hidra-badge:hover {
    transform: translateY(0);
    box-shadow: none;
  }

  .hidra-badge:hover .hidra-badge__art,
  .hidra-badge:hover .hidra-badge__icon,
  .hidra-badge:hover .hidra-badge__copy {
    transform: none;
  }

  .hidra-badge__star,
  .hidra-badge__comet,
  .hidra-badge__sheen::before,
  .hidra-badge {
    animation: none !important;
  }
}