/* ============================================================
   DER RESEARCH-AGENT · Anflug statt Drehung

   Randlos und gepinnt. Das Gerät fährt herein, klappt auf, über dem
   Schirm steht AI-AGENTS, und dann kommen die Inhalte aus der Tiefe
   auf uns zu. Dieselbe Flugmechanik wie bei den Werkproben, mit einem
   Unterschied: dort fliegen Fotos vorbei, hier fliegt Text, und Text
   braucht einen Haltepunkt. Jeder Kasten bremst auf Lesegröße ab,
   steht, und zieht dann seitlich vorbei.

   Zwei Trennungen, die den Umbau später billig machen:
   1. Das Gerät ist austauschbar. Bühne, Typo und Flug wissen nichts
      davon, ob darunter ein CSS-Gerät oder ein Video liegt.
   2. Die Typo liegt über dem Schirm, nicht darin. Sie bleibt Schrift.
   ============================================================ */

#agenten {
  position: relative;
  min-height: 100svh;
  overflow: hidden;
  display: grid;
  align-content: center;
}
.ag-buehne {
  position: relative;
  width: 100%;
  height: 100svh;
  display: grid;
  place-items: center;
  perspective: 1500px;
  perspective-origin: 50% 46%;
}

/* ---------- 1 Das Gerät ----------
   In Echtzeit gerechnet, siehe js/geraet3d.js. Die Leinwand ist
   durchsichtig, deshalb steht hier kein Freisteller und kein
   Blendmodus: der Verlauf der Seite läuft einfach dahinter durch.
   ------------------------------------------------------------------ */
.ag-schein {
  position: absolute;
  left: 50%; top: 48%;
  width: min(62vw, 900px);
  height: min(58vh, 620px);
  transform: translate(-50%, -50%);
  pointer-events: none;
  background:
    radial-gradient(46% 52% at 50% 50%, color-mix(in srgb, var(--c-blau) 40%, transparent), transparent 74%),
    radial-gradient(64% 46% at 24% 38%, color-mix(in srgb, var(--c-pink) 24%, transparent), transparent 78%),
    radial-gradient(56% 44% at 78% 64%, color-mix(in srgb, var(--c-cyan) 22%, transparent), transparent 78%),
    radial-gradient(70% 34% at 50% 86%, color-mix(in srgb, var(--c-peach) 14%, transparent), transparent 80%);
  filter: blur(30px);
  will-change: opacity, transform;
}
.ag-raum {
  position: relative;
  width: min(94vw, 1560px);
  aspect-ratio: 16 / 8;
}
.ag-leinwand {
  display: block;
  width: 100%;
  height: 100%;
  will-change: transform;
}

/* ---------- 2 Die Typo über dem Schirm ---------- */
.ag-typo {
  position: absolute;
  left: 50%; top: 44%;
  transform: translate(-50%, -50%);
  z-index: 3;
  margin: 0;
  font-family: var(--font-headline);
  font-weight: 400;
  font-size: clamp(1.6rem, 4.4vw, 4rem);
  letter-spacing: -0.02em;
  text-transform: uppercase;
  white-space: nowrap;
  background: var(--gradient-spektrum);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  pointer-events: none;
}

/* ---------- 3 Die Glaskästen ----------
   Liquid Glass heißt hier: eine echte Fläche, eine helle Kante oben,
   eine Brechung an der Unterkante und ein Lichtstreifen, der langsam
   darüberzieht. Nicht durchsichtig, sondern lichtleitend. */
.ag-flug {
  position: absolute; inset: 0;
  z-index: 6;
  transform-style: preserve-3d;
  pointer-events: none;
}
.agf {
  position: absolute;
  left: 50%; top: 50%;
  width: min(32ch, 26vw);
  padding: clamp(1.1rem, 1.6vw, 1.6rem) clamp(1.2rem, 1.8vw, 1.8rem);
  border-radius: 26px;
  background:
    linear-gradient(155deg, rgba(255,255,255,.10) 0%, rgba(255,255,255,.03) 42%, rgba(255,255,255,0) 70%),
    rgba(13, 13, 16, 0.82);
  backdrop-filter: blur(30px) saturate(190%);
  -webkit-backdrop-filter: blur(30px) saturate(190%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.24),
    inset 0 -1px 0 rgba(255,255,255,.07),
    inset 0 0 0 1px rgba(255,255,255,.07),
    0 40px 90px rgba(0,0,0,.62);
  opacity: 0;
  overflow: hidden;
  will-change: transform, opacity;
}
/* Der Lichtstreifen. Er wandert mit dem Anflug, nicht in einer Schleife:
   das Glas reagiert dadurch auf die Bewegung statt vor sich hin zu
   glitzern. */
.agf::after {
  content: '';
  position: absolute;
  top: -60%; bottom: -60%;
  width: 42%;
  left: calc(var(--f, 0) * 165% - 45%);
  background: linear-gradient(100deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.09) 50%, rgba(255,255,255,0) 100%);
  transform: rotate(8deg);
  pointer-events: none;
}
.agf > * { position: relative; z-index: 1; }
.agf-marke {
  display: block;
  font-family: var(--font-mono);
  font-size: clamp(0.62rem, 0.74vw, 0.72rem);
  letter-spacing: 0.17em;
  text-transform: uppercase;
  color: var(--af, var(--c-cyan));
  margin-bottom: clamp(0.6rem, 1.2vh, 0.9rem);
}
.agf h3 {
  font-family: var(--font-headline);
  font-weight: 400;
  font-size: clamp(0.95rem, 1.4vw, 1.24rem);
  text-transform: uppercase;
  line-height: 1.1;
  letter-spacing: -0.014em;
}
.agf p {
  margin-top: clamp(0.45rem, 1vh, 0.7rem);
  font-size: clamp(0.84rem, 1vw, 0.96rem);
  line-height: 1.5;
  color: rgba(243,241,237,.66);
}

/* ---------- 4 Was sich in den Kästen bewegt ----------
   Alle vier zeigen einen Vorgang, keine Messung. Ein Balken, der
   durchläuft, sagt "wird abgearbeitet". Ein Balken mit Zahl daneben
   würde etwas behaupten, das wir nicht belegen können. */
.agf-kanaele, .agf-seite, .agf-sortieren, .agf-preise {
  margin-top: clamp(0.9rem, 1.8vh, 1.3rem);
  display: grid;
  gap: 7px;
}

/* 01 Vier Kanäle, einer nach dem anderen durchsucht */
.agf-kanaele span {
  position: relative;
  height: 22px;
  border-radius: 6px;
  background: rgba(255,255,255,.05);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.06);
  overflow: hidden;
}
.agf-kanaele span::before {
  content: attr(data-k);
  position: absolute; left: 9px; top: 50%;
  transform: translateY(-50%);
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: .11em;
  text-transform: uppercase;
  color: rgba(243,241,237,.5);
  z-index: 1;
}
/* Jeder Kanal startet etwas später als der vorige. Der Versatz steht
   als --d am Element, der Rest rechnet sich aus dem Fortschritt. */
.agf-kanaele span:nth-child(1) { --d: 0; }
.agf-kanaele span:nth-child(2) { --d: 0.16; }
.agf-kanaele span:nth-child(3) { --d: 0.32; }
.agf-kanaele span:nth-child(4) { --d: 0.48; }
.agf-kanaele span::after {
  content: '';
  position: absolute; inset: 0;
  transform-origin: 0 50%;
  transform: scaleX(clamp(0, (var(--f, 0) - var(--d, 0)) * 3.2, 1));
  background: linear-gradient(90deg,
    color-mix(in srgb, var(--af) 34%, transparent),
    color-mix(in srgb, var(--af) 8%, transparent));
}

/* 02 Eine Seite als Zeilenraster, zwei Zeilen sind neu */
.agf-seite { gap: 6px; }
.agf-seite span {
  height: 7px;
  border-radius: 3px;
  background: rgba(255,255,255,.07);
}
.agf-seite span:nth-child(2) { width: 78%; }
.agf-seite span:nth-child(4) { width: 62%; }
.agf-seite span:nth-child(6) { width: 84%; }
.agf-seite .treffer {
  background: color-mix(in srgb, var(--af) calc(var(--f, 0) * 70%), rgba(255,255,255,.07));
  box-shadow: 0 0 calc(var(--f, 0) * 14px) color-mix(in srgb, var(--af) 45%, transparent);
}

/* 03 Fünf Meldungen, die sich nach Gewicht sortieren */
/* Luft unten, sonst schiebt die Sortierbewegung den letzten Balken
   in die beschnittene Kante. */
.agf-sortieren { gap: 6px; padding-bottom: 30px; }
.agf-sortieren span {
  height: 9px;
  border-radius: 4px;
  background: linear-gradient(90deg,
    color-mix(in srgb, var(--af) 40%, transparent),
    color-mix(in srgb, var(--af) 10%, transparent));
  /* Vom Ausgangsplatz auf den Sortierplatz, Weg mal Fortschritt */
  transform: translateY(calc((var(--r) - var(--i)) * 15px * var(--f, 0)));
  will-change: transform;
  width: calc(96% - var(--r) * 13%);
}

/* 04 Zwei Schienen, auf denen sich eine Marke verschiebt */
.agf-preise { gap: 12px; }
.agf-preise .schiene {
  position: relative;
  height: 3px;
  border-radius: 2px;
  background: rgba(255,255,255,.08);
}
.agf-preise .schiene i {
  position: absolute; top: 50%;
  width: 11px; height: 11px;
  margin-top: -5.5px; margin-left: -5.5px;
  border-radius: 50%;
  background: var(--af);
  box-shadow: 0 0 16px color-mix(in srgb, var(--af) 65%, transparent);
}
.agf-preise .schiene:nth-child(1) i { left: calc(22% + var(--f, 0) * 46%); }
.agf-preise .schiene:nth-child(2) i { left: calc(74% - var(--f, 0) * 21%); }

/* ---------- 5 Die Beschriftung ---------- */
.ag-schrift {
  position: absolute;
  left: 50%;
  bottom: clamp(2rem, 7vh, 5rem);
  transform: translateX(-50%);
  z-index: 4;
  max-width: 46ch;
  text-align: center;
  pointer-events: none;
}
.ag-augenbraue {
  display: block;
  font-family: var(--font-mono);
  font-size: clamp(0.68rem, 0.85vw, 0.8rem);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--c-cyan);
  margin-bottom: clamp(0.6rem, 1.4vh, 1rem);
}
.ag-satz {
  font-size: clamp(0.95rem, 1.2vw, 1.14rem);
  line-height: 1.55;
  color: rgba(243,241,237,.74);
}

/* ---------- 6 Schmale Schirme ----------
   Kein Pinnen, kein Flug. Das Gerät steht offen, die Kästen stapeln
   sich darunter. Ein Anflug auf 390 Punkten ist nur Gedränge. */
@media (max-width: 899px) {
  #agenten { min-height: auto; padding-block: var(--r-5); }
  .ag-buehne {
    height: auto;
    display: grid;
    place-items: stretch;
    gap: clamp(1.6rem, 4vh, 2.4rem);
    padding-inline: clamp(1.1rem, 5vw, 2rem);
    perspective: 1000px;
  }
  .ag-raum { justify-self: center; width: 100%; }
  .ag-typo {
    position: static;
    transform: none;
    text-align: center;
    font-size: clamp(1.5rem, 8vw, 2.4rem);
    order: -1;
  }
  .ag-flug {
    position: static;
    display: grid;
    gap: clamp(0.8rem, 2vh, 1.1rem);
    transform-style: flat;
  }
  .agf {
    position: static;
    width: auto;
    opacity: 1;
    --f: 1;
  }
  .agf-kanaele span::after { transform: scaleX(1); }
  .ag-schrift { position: static; transform: none; max-width: none; text-align: left; }
}

/* ---------- 7 Ohne Bewegungswunsch ---------- */
@media (prefers-reduced-motion: reduce) {
  .ag-raum { transform: none !important; }
  .agf { opacity: 1 !important; transform: none !important; --f: 1; }
  .agf-kanaele span::after { transform: scaleX(1); }
}