/* Gemeinsame Marken-Token für alle drei Entwürfe.
   Bewusst NUR Token und Grundlagen — jede Probe bringt ihre eigene
   Bildsprache mit, sonst vergleicht man am Ende drei Varianten
   desselben Entwurfs statt drei Richtungen. */

:root {
  --orange: #f2704a;
  --lila: #a259b5;
  --navy: #0a152d;
  --navy-tief: #060d1e;
  --tinte: #0a1b33;
  --grau: #64748b;

  /* Tracking ist größenabhängig. Große Schrift zieht optisch auseinander
     und muss zusammengezogen werden, kleine Schrift braucht das Gegenteil. */
  --tr-display: -0.034em;
  --tr-title: -0.022em;
  --tr-lead: -0.008em;

  /* Eine Feder, kritisch gedämpft: kein Überschwingen. Überschwingen gehört
     nur dorthin, wo vorher echter Schwung war (Wurf, Zug) — nicht auf etwas,
     das bloß eingeblendet wird. */
  --feder: cubic-bezier(0.32, 0.72, 0, 1);
  --feder-schnell: cubic-bezier(0.4, 0, 0.2, 1);
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: "Inter", ui-sans-serif, system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  /* `clip` statt `hidden`: beides schneidet waagerecht ab, aber `hidden`
     macht den Körper zum Scrollbehälter — und in so einem Behälter hört
     `position: sticky` auf zu kleben. Genau davon lebt Entwurf C. */
  overflow-x: clip;
}

.display {
  font-family: "Outfit", ui-sans-serif, system-ui, sans-serif;
  font-weight: 500;
  letter-spacing: var(--tr-display);
  line-height: 1.02;
}

.auge {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.2em;
}

/* Die Wortweise Einblendung: jedes Wort kommt aus der Unschärfe nach vorn.
   Die Verzögerung setzt das Skript je Wort, damit der Satz gelesen und
   nicht als Block geworfen wirkt. */
.wort {
  display: inline-block;
  opacity: 0;
  filter: blur(14px);
  transform: translateY(0.42em) scale(0.97);
  animation: wort-an 1.05s var(--feder) forwards;
}
@keyframes wort-an {
  to { opacity: 1; filter: blur(0); transform: none; }
}

/* Reduzierte Bewegung heißt nicht: keine Rückmeldung. Es heißt: die
   sanfte, nicht-vestibuläre Fassung. Alles Räumliche fällt weg, das
   Auf- und Abblenden bleibt. */
@media (prefers-reduced-motion: reduce) {
  .wort { animation: none; opacity: 1; filter: none; transform: none; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.12s !important;
  }
}

@media (prefers-reduced-transparency: reduce) {
  .glas { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
}

/* Das Filmkorn liegt über allem und ist der billigste Weg, den
   Bänderungseffekt großer Verläufe zu brechen. Ohne Korn sieht ein
   weiter Farbverlauf auf 8-Bit-Displays gestreift aus. */
.korn {
  position: fixed;
  inset: -50%;
  pointer-events: none;
  z-index: 9999;
  opacity: 0.035;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)'/%3E%3C/svg%3E");
}