/* Kopfbereich: Name mit Glitch und das dreidimensionale Hirn.

   Der Halter gibt die Scrollstrecke vor, der Kopf klebt darin fest. So hat das
   Hirn Zeit, sich zu zeigen, statt in einem Wisch vorbeizuziehen. */

/* 160svh heisst 60svh Scrollweg, waehrend der Kopf klebt. Kurze Ruhe, in der
   der Schwarm nur treibt, dann der Flug. Bewusst knapp: die Strecke soll sich
   mit einer Wischbewegung erledigen. */
.kopf-halter{position:relative;height:160svh}

.kopf{
  position:sticky;top:0;height:100svh;
  display:flex;align-items:center;
  /* kein overflow:hidden - das Hirn wandert bewusst ueber den unteren Rand */
}

.kopf-innen{
  width:100%;display:flex;align-items:center;
  gap:clamp(16px,4vw,64px);flex-wrap:wrap;
  padding:0 var(--rand-seite);
}

.titel{flex:1 1 360px;min-width:280px}

.titel h1{
  margin:0;font-family:Anton,sans-serif;text-transform:uppercase;
  font-size:clamp(52px,11.5vw,168px);line-height:.84;letter-spacing:-.02em;
}

.titel .unter{
  margin:clamp(16px,2.6vh,28px) 0 0;
  font-family:'Space Mono',monospace;font-size:11px;
  letter-spacing:.22em;text-transform:uppercase;color:var(--grau);
}
.titel .unter b{
  color:var(--tinte);font-weight:400;
  border-bottom:2px solid var(--saeure);
}

/* ---- Glitch ----
   Zwei Kopien des Worts über dem Original: eine in Akzentfarbe, eine dunkel.
   Beide werden in Scheiben geschnitten und seitlich versetzt. */
.glitch{position:relative;display:inline-block}
.glitch::before,
.glitch::after{
  content:attr(data-text);
  position:absolute;left:0;top:0;width:100%;
  pointer-events:none;opacity:0;
}
.glitch::before{color:var(--saeure);mix-blend-mode:multiply}
.glitch::after{color:var(--tinte)}

.glitch.zuckt::before{opacity:1;animation:risA .38s steps(2,end) 1}
.glitch.zuckt::after{opacity:1;animation:risB .38s steps(3,end) 1}

@keyframes risA{
  0%  {clip-path:inset(12% 0 62% 0);transform:translateX(-7px)}
  30% {clip-path:inset(48% 0 28% 0);transform:translateX(6px)}
  60% {clip-path:inset(72% 0 8% 0); transform:translateX(-4px)}
  100%{clip-path:inset(0 0 100% 0); transform:none}
}
@keyframes risB{
  0%  {clip-path:inset(60% 0 22% 0);transform:translateX(5px)}
  40% {clip-path:inset(20% 0 66% 0);transform:translateX(-6px)}
  100%{clip-path:inset(100% 0 0 0); transform:none}
}

/* ---- Hirn ---- */
/* Die Leinwand deckt das ganze Fenster ab, damit die Punkte ueberallhin
   fliegen koennen. In einer Box neben dem Titel waeren sie eingesperrt.
   Sie liegt hinter der Schrift und nimmt keine Klicks an. */
#hirn{
  position:fixed;inset:0;width:100%;height:100%;
  display:block;z-index:0;pointer-events:none;
  will-change:transform;
}

/* Platzhalter in der Reihe: haelt dem Titel die rechte Haelfte frei, zeichnet
   aber selbst nichts. */
.hirn-feld{
  flex:0 1 min(38vw,440px);aspect-ratio:1/1;min-width:260px;
  position:relative;
}

.hirn-marke{
  position:absolute;right:4px;bottom:2px;
  font-family:'Space Mono',monospace;font-size:9px;
  letter-spacing:.22em;color:var(--leise);text-transform:uppercase;
}

/* Schrift ueber die Leinwand */
.titel,.hirn-marke{position:relative;z-index:1}