/* ============================================================
   HET WOORDMERK — STAAL
   ============================================================
   Eén bron voor het woordmerk op de hele site. Het stond eerder in acht
   losse stukken code (kopbalk, vaste balk, menu, voetnoot, tegelpagina's,
   legal, ledger, generatoren) en liep daardoor uit elkaar: de balk had een
   andere maat, een andere randdikte en een andere T dan de kop.

   Uit de merkgids: het woordmerk is tekst met een staalvulling, geen
   afbeelding. Twee lagen over elkaar — de fijne strepen op 94 graden zijn de
   borstelrichting, het verloop op 176 graden is het licht dat erop valt. De
   dunne contour van .55px houdt de letters los van de achtergrond.

   De T heeft geen eigen kleur meer. In staal hoort hij vanzelf bij het
   geheel, dus er is geen getekende T meer en geen rood in het merk.
   ============================================================ */

.jwt-merk{
  font-family: 'Archivo', 'Inter', system-ui, sans-serif;
  font-weight: 900;
  text-transform: uppercase;
  line-height: 1;
  white-space: nowrap;
  /* Zonder steun voor background-clip blijft dit staan: een massieve
     lichtgrijze letter in plaats van een onzichtbaar logo. */
  color: #C9C3BD;
}

@supports ((-webkit-background-clip: text) or (background-clip: text)){
  .jwt-merk{
    /* De drie lagen apart, zodat een maatvariant alleen het verloop hoeft
       te vervangen en de rest ongemoeid laat. */
    --jwt-veeg: linear-gradient(104deg,
      transparent 38%, rgba(255,255,255,.72) 48%, transparent 58%);
    --jwt-borstel: repeating-linear-gradient(94deg,
      rgba(255,255,255,.085) 0 1px,
      rgba(0,0,0,.14)        1px 2px,
      rgba(255,255,255,.03)  2px 4px);
    --jwt-tint: linear-gradient(176deg,
      #8F8B87 0%, #CFC9C3 22%, #6E6A66 48%, #B4AEA8 70%, #55524F 100%);

    -webkit-text-fill-color: transparent;
    -webkit-background-clip: text;
            background-clip: text;
    -webkit-text-stroke: .55px rgba(255,255,255,.22);
    background-image: var(--jwt-veeg), var(--jwt-borstel), var(--jwt-tint);
    background-size: 260% 100%, auto, auto;
    background-position: 128% 0, 0 0, 0 0;
    background-repeat: no-repeat, repeat, no-repeat;
  }

  /* ======== MAATVARIANT VOOR KLEIN ========
     Op 15 tot 18px valt de donkerste stop uit de gids (#55524F) weg: die
     haalt 2,55:1 tegen onze grond #0A0A0B, en in de kopbalk ligt daar ook
     nog de herofoto achter. Dit verloop heeft hetzelfde kleurkarakter met
     de donkere kant opgetild — de donkerste stop haalt 4,46:1.
     Alleen --jwt-tint wordt vervangen; de borstel en de veeg blijven. */
  .jwt-merk--klein{
    --jwt-tint: linear-gradient(176deg,
      #A8A39E 0%, #E8E3DD 22%, #8A8681 48%, #C9C3BD 70%, #7B7773 100%);
  }

  /* ======== DE GLANS ========
     Eén veeg per 7 seconden, zoals het BUILD-watermerk in de app. Dit
     verving de neonflikker die hier eerst stond: de gids zegt dat niets
     knippert, en een trage veeg laat juist zien dat het metaal is. */
  .jwt-merk--glans{
    animation: jwtVeeg 7s ease-in-out infinite;
  }
  @keyframes jwtVeeg{
    0%,  10%  { background-position: 128% 0, 0 0, 0 0; }
    62%, 100% { background-position: -28% 0, 0 0, 0 0; }
  }
  /* Stilgezet parkeert de veeg náást de letters. Blijft hij in het midden
     staan, dan ziet een stilstaand logo eruit als een witte streep eroverheen. */
  @media (prefers-reduced-motion: reduce){
    .jwt-merk--glans{
      animation: none;
      background-position: 128% 0, 0 0, 0 0;
    }
  }

  /* Op een foto is staal zwakker dan massief wit: de lichtste pixel achter
     de kopbalk is rgb(73,70,70) en daartegen zakken de donkere stops naar
     2,1:1. Deze schaduw vangt dat op. Alleen waar het merk op beeld staat. */
  .jwt-merk--opfoto{
    text-shadow: 0 1px 10px rgba(0,0,0,.85), 0 0 26px rgba(0,0,0,.6);
  }
}