/* ===========================================================================
   "Website door invoker" — de signature van het bureau in de voet van een
   klantsite. Framework-onafhankelijk; werkt met de HTML-snippet én de React-
   variant in deze map.

   Instelbaar via custom properties op .invoker-signature:
     --invoker-sig-h        hoogte van het woordmerk (default 0.82rem)
     --invoker-sig-label    fontgrootte van het label (default 0.64rem)
     --invoker-sig-font     font van het label (default: erven van de site)
     --invoker-sig-rust     kleur in rust (default: erven van de site)
     --invoker-sig-actief   kleur van het label bij hover/focus

   DE TWEE MATEN DIE ERTOE DOEN
   ----------------------------
   De bijgesneden viewBox van het woordmerk is 89,2 eenheden hoog. Daarvan:
     · 9      eenheden zitten ONDER de basislijn  (de staart van het $-teken)
     · 53,4   eenheden zijn de x-hoogte           (de kleine letters "invoker")

   1. SCHALEN op de x-hoogte, niet op de totale hoogte. Het $-teken reikt veel
      hoger dan de letters; schaal je op de totale hoogte, dan worden de kleine
      letters van "invoker" optisch veel groter dan de tekst ernaast.
      Vuistregel: --invoker-sig-h ≈ kapitaalhoogte van je label / 0,6.

   2. UITLIJNEN op de basislijn, niet op het midden. Om diezelfde reden ligt het
      optische midden van het merk lager dan dat van kapitalen ernaast.
      Let op: een browser neemt de ónderrand van een SVG als basislijn, en dat is
      de staart van het $-teken. Het merk staat daardoor precies die staarthoogte
      te hoog; vandaar de `translate` hieronder. Een negatieve marge werkt hier
      niet, want die telt niet mee voor de basislijn van een flex-item.
   =========================================================================== */

.invoker-signature {
  --invoker-groen: #00ff9c;
  --invoker-sig-h: 0.82rem;
  --invoker-sig-label: 0.64rem;
  --invoker-sig-font: inherit;
  --invoker-sig-rust: currentColor;
  --invoker-sig-actief: currentColor;

  --_staart: calc(var(--invoker-sig-h) * 9 / 89.2);
  --_x-hoogte: calc(var(--invoker-sig-h) * 53.4 / 89.2);

  display: inline-flex;
  align-items: baseline;
  gap: 0.5rem;
  text-decoration: none;
  color: var(--invoker-sig-rust);
  padding: 0.4rem 0;
  transition: color 180ms cubic-bezier(0.4, 0, 0.2, 1);
}

.invoker-signature__label {
  font-family: var(--invoker-sig-font);
  font-size: var(--invoker-sig-label);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  white-space: nowrap;
}

.invoker-signature__merk {
  height: var(--invoker-sig-h);
  width: auto;
  color: var(--invoker-sig-rust);
  translate: 0 var(--_staart);
  transition:
    color 180ms cubic-bezier(0.4, 0, 0.2, 1),
    filter 420ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* Blokcursor op de basislijn, op de hoogte van de kleine letters. Hij hoort
   dicht tegen het woordmerk aan, dus de flex-gap wordt hier teruggenomen. */
.invoker-signature__cursor {
  margin-left: -0.22rem;
  width: 0.36rem;
  height: var(--_x-hoogte);
  background: var(--invoker-groen);
  opacity: 0;
  transition: opacity 180ms cubic-bezier(0.4, 0, 0.2, 1);
}

.invoker-signature:hover .invoker-signature__label,
.invoker-signature:focus-visible .invoker-signature__label {
  color: var(--invoker-sig-actief);
}

.invoker-signature:hover .invoker-signature__merk,
.invoker-signature:focus-visible .invoker-signature__merk {
  color: var(--invoker-groen);
  filter: drop-shadow(0 0 10px color-mix(in srgb, var(--invoker-groen) 55%, transparent));
}

.invoker-signature:hover .invoker-signature__cursor,
.invoker-signature:focus-visible .invoker-signature__cursor {
  opacity: 1;
  animation: invoker-knipper 1.05s steps(1, end) infinite;
}

@keyframes invoker-knipper {
  0%,
  50% {
    opacity: 1;
  }
  50.01%,
  100% {
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .invoker-signature:hover .invoker-signature__cursor,
  .invoker-signature:focus-visible .invoker-signature__cursor {
    animation: none;
    opacity: 1;
  }
}