/* ╭─────────────────────────────────────────────────────────────╮
   │  GOVA Animated Credit Badge — reference CSS                 │
   │  Lift values into your host codebase's component system.    │
   │  Don't copy this file verbatim into production — recreate.  │
   ╰─────────────────────────────────────────────────────────────╯ */

/* ── Tokens (override at any scope) ───────────────────────── */
.gv-credit-anim {
  --gv-ink:    #0E0E10;
  --gv-paper:  #FFFFFF;
  --gv-mute:   #6B6B70;
  --gv-rule:   #E6E2D8;
  --gv-accent: #0046FF;
  --gv-display: 'Space Grotesk', system-ui, -apple-system, sans-serif;
  --gv-mono:    'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;
}

/* Dark theme — add class="on-dark" */
.gv-credit-anim.on-dark {
  --gv-ink:   #F5F2EC;
  --gv-paper: #0E0E10;
  --gv-mute:  #8A8A8F;
  --gv-rule:  #2A2A2E;
}

/* ── The badge ────────────────────────────────────────────── */
.gv-credit-anim {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px 12px 14px;
  background: var(--gv-paper);
  color: var(--gv-ink);
  border: 1px solid var(--gv-rule);
  border-radius: 999px;
  font-family: var(--gv-display);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: -0.01em;
  box-shadow: 0 2px 14px -6px rgba(14, 14, 16, 0.18);
  text-decoration: none;
  line-height: 1;
}

/* ── Mark (the dark square on the left) ───────────────────── */
.gv-credit-anim .gv-mk-anim {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: var(--gv-ink);
  color: var(--gv-paper);
  display: grid;
  place-items: center;
  position: relative;
  flex-shrink: 0;
  overflow: hidden;
}

/* Spinning conic sweep behind the mark */
.gv-credit-anim .gv-mk-anim::after {
  content: '';
  position: absolute;
  inset: -50%;
  background: conic-gradient(
    from 0deg,
    transparent 0deg,
    var(--gv-accent) 70deg,
    transparent 140deg
  );
  animation: gv-spin 3.6s linear infinite;
}

/* Inner dark square that masks the sweep into a ring */
.gv-credit-anim .gv-mk-anim::before {
  content: '';
  position: absolute;
  inset: 2px;
  background: var(--gv-ink);
  border-radius: 6px;
  z-index: 1;
}

/* The G-arrow glyph itself — rendered via CSS mask so it inherits color */
.gv-credit-anim .gv-glyph {
  position: relative;
  z-index: 2;
  width: 70%;
  height: 70%;
  background: currentColor;
  -webkit-mask: url('assets/gova-mark.png') no-repeat center / contain;
          mask: url('assets/gova-mark.png') no-repeat center / contain;
  display: block;
  transition: transform 0.4s cubic-bezier(0.7, 0, 0.3, 1);
}

/* Hover: rotate the mark 360° */
.gv-credit-anim:hover .gv-glyph {
  transform: rotate(360deg);
}

/* ── Text stack ───────────────────────────────────────────── */
.gv-credit-anim .gv-stack {
  display: flex;
  flex-direction: column;
  line-height: 1;
  gap: 3px;
  min-width: 88px;
}

.gv-credit-anim .gv-by {
  font: 500 9px/1 var(--gv-mono);
  color: var(--gv-mute);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  display: flex;
  align-items: center;
  gap: 4px;
}

/* Pulse dot inside the eyebrow */
.gv-credit-anim .gv-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--gv-accent);
  animation: gv-pulse 1.6s ease-in-out infinite;
}

.gv-credit-anim .gv-nm {
  font-weight: 800;
  font-size: 14px;
  letter-spacing: -0.02em;
}

/* ── Keyframes ────────────────────────────────────────────── */
@keyframes gv-spin {
  to { transform: rotate(360deg); }
}

@keyframes gv-pulse {
  0%, 100% {
    box-shadow: 0 0 0 0 currentColor;
    opacity: 1;
  }
  50% {
    box-shadow: 0 0 0 4px transparent;
    opacity: 0.4;
  }
}

/* ── Reduced motion ───────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .gv-credit-anim .gv-mk-anim::after,
  .gv-credit-anim .gv-dot {
    animation: none !important;
  }
  .gv-credit-anim:hover .gv-glyph {
    transform: none;
  }
}