/* ============================================================
   pb-card-wall — Tile-Kartenwand im Agent-Intro (28.08.)
   ------------------------------------------------------------
   Echte Freelancer-Tiles als Kulisse (Daten: TALENTS-Roster,
   Verläufe: .pb-catgrad aus talent-card.css). Sieben Reihen in
   die Tiefe — die Karten bleiben aufrecht (kein rotateX, kaum
   Draufsicht), Tiefe entsteht über scale, die Kamera-Krümmung
   je Karte (translateZ/rotateY unter der Wand-Perspektive) und
   den Falloff (entsättigt + abgedunkelt, KEINE Transparenz).
   Die vorderste Reihe ist so weit versenkt, dass nur Banner +
   Avatar herausspitzen. Hover hebt die Karte, die Rückkehr
   federt zurück in die Reihe.

   Beide Themes: im Dunklen dunkelt der Falloff Richtung --bg ab,
   im Hellen wäscht er leicht aus — der bg-Nebel nutzt das Token
   und stimmt damit in beiden Welten.
   ============================================================ */

pb-card-wall {
  display: block;
  /* Das Meer beginnt an der ECHTEN Unterkante des Viewports — nicht an
     der Sektionskante. Der Legal-Fuß (normaler Fluss, malt später)
     schwebt an unveränderter Position darüber. */
  position: fixed;
  inset: auto 0 0 0;
  height: 22rem;
  overflow: hidden;
  pointer-events: none;
  z-index: -1; /* hinter Hero/Promptbar; .pba.is-intro isoliert den Kontext */
  /* Kürzere Kameradistanz = tiefere Perspektive */
  perspective: 42rem;
  /* Kamera auf Kartenhöhe — leichte Draufsicht in die Reihen (29.08.:
     von 85% zurück, das Meer soll wieder etwas Fläche zeigen) */
  perspective-origin: 50% 62%;
  /* Wächst mit der Fensterhöhe (Design „Neu“ #6, 01.10.2026): pb-card-wall.js
     setzt --wall-k (1 … 1.8); die Unterkante bleibt, die Avatare sichtbar. */
  transform: scale(var(--wall-k, 1));
  transform-origin: 50% 100%;
}
/* Tiefen-Nebel in exakt der Seitengrund-Farbe: eine DECKENDE
   bg-Schicht, die nach oben (= nach hinten) zunimmt — so laufen die
   fernen Reihen im Hintergrund aus, ohne je dunkler als --bg zu
   werden (die Reihen-Helligkeit selbst ist im JS auf 0.7 geklemmt). */
pb-card-wall::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  /* Nebel nach hinten + Vignette an den Seiten — alles in --bg */
  background:
    linear-gradient(to right, var(--bg) 0%, transparent 16%),
    linear-gradient(to left, var(--bg) 0%, transparent 16%),
    linear-gradient(to top, transparent 0%, transparent 22%, var(--bg) 58%);
}
.pba.is-intro { position: relative; isolation: isolate; }

/* ---- Rein/Raus-Choreografie (28.08.) ----
   Beim Aufbau steigen die Karten gestaffelt von unten ins Bild
   (hinten zuerst — das Meer rollt auf die Kamera zu). Beim Wechsel in
   den Gesprächszustand (.pba.is-chat) blendet die Wand als Ganzes aus.
   Delays --d/--do je Karte aus dem Markup. */
.pbw-card {
  animation: pbw-in 0.45s var(--ease) backwards;
  animation-delay: var(--d, 0ms);
}
/* Wartende Karten (delay, fill backwards) stünden sonst 135% tiefer
   sichtbar zwischen den Reihen — der kurze opacity-Auftakt blendet
   sie erst mit dem Losfahren ein („abgeschnittene" Karten weg). */
@keyframes pbw-in {
  0%   { transform: translateY(135%); opacity: 0; }
  30%  { opacity: 1; }
  100% { transform: none; opacity: 1; }
}
/* Raus: EINE Ebene statt 200 Einzelanimationen — die Karten-Stagger
   beim Abgang stotterte mitten im Barba-Crossfade (29.08.). Seit
   03.10.2026 blendet suche.js (enterChat) die Wand noch im Ruhezustand
   aus; im Gespräch ist sie weg. Ein CSS-Ausblenden nach dem Wechsel ließ
   Safari die 3D-Wand neu zeichnen (~0,5 s Standbild, die Pille sprang). */
.pba.is-chat pb-card-wall { display: none; }
@media (prefers-reduced-motion: reduce) {
  .pbw-card { animation: none; }
}

/* ---- Reihen: vorn versenkt, nach hinten gekippt + Falloff ---- */
.pbw-row {
  position: absolute;
  left: 50%;
  bottom: var(--b);
  display: flex;
  align-items: flex-end;
  gap: 1rem;
  transform: translateX(calc(-50% + var(--dx, 0rem))) scale(var(--s, 1));
  transform-origin: bottom center;
  transform-style: preserve-3d; /* die Slots krümmen sich IN der Perspektive */
  /* KEIN opacity-Fade: nach hinten entsättigt + leicht AUFGEHELLT
     Richtung hellem Seitengrund; den Rest macht der bg-Nebel oben.
     (--br kommt dunkel-getunt aus dem JS und wird hier je Theme
     interpretiert — hell kehrt die Richtung sanft um.) */
  filter: saturate(var(--sat, 1)) brightness(calc(1 + (1 - var(--br, 1)) * 0.25));
}
/* Dark: abdunkeln Richtung --bg (brightness min 0.7 — nie darunter) */
[data-theme="dark"] .pbw-row {
  filter: saturate(var(--sat, 1)) brightness(var(--br, 1));
}
/* Die Reihen-Geometrie (--s/--b/--sat/--br/--dx) kommt als Formel
   aus pb-card-wall.js — Reihenzahl dort über ROWS. */

/* ---- Kamera-Krümmung: die Reihenmitte ist der Kamera am nächsten,
        die Ränder weichen nach HINTEN zurück und drehen sich weg —
        echtes 3D (translateZ/rotateY) unter der Wand-Perspektive.
        --k = Abstand zur Reihenmitte (aus dem Markup). ---- */
.pbw-slot {
  flex: none;
  display: block;
  transform:
    translateZ(calc(var(--k) * var(--k) * -0.45rem))
    rotateY(calc(var(--k) * -2.25deg));
}

/* ---- Karte: hochformatige Tile wie .pb-fcard, nur Kopfbereich sichtbar ---- */
.pbw-card {
  display: block;
  position: relative;
  /* Kartei-Ordnung: EINE Breite für alle Karten (= CARD_PX im JS) */
  width: 10.5rem;
  height: 12.5rem;
  /* Schmaler Rand + fast konzentrische Rundung: außen knapp unter
     Banner-Radius (r-md 0.5625rem) + Rand (0.375rem). */
  padding: 0.375rem;
  border-radius: 0.875rem;
  background: var(--surface);
  pointer-events: auto;
  /* Kipp-Anker für den Hover: unten Mitte — die Karte neigt sich wie
     aus dem Karteikasten gezogen (--rot je Karte aus dem Markup). */
  transform-origin: bottom center;
  /* Rückweg: Overshoot-Kurve — die Karte fällt zurück und federt ein */
  transition: transform 0.55s var(--ease);
}
.pbw-card:hover {
  transform: translateY(-1.25rem) rotate(var(--rot, 0deg));
  /* Hinweg: knackig nach oben */
  transition: transform 0.16s var(--ease);
}
@media (prefers-reduced-motion: reduce) {
  .pbw-card, .pbw-card:hover { transform: none; transition: none; }
}

/* Banner-Verlauf oben, eingerückt wie bei der echten Tile (r-md in r-lg).
   Verlauf kommt aus .pb-catgrad[data-cat] (talent-card.css) bzw. der
   Fallback-Palette unten. Dark-Dämpfung wie die echte Tile. */
.pbw-banner {
  display: block;
  height: 3.25rem;
  border-radius: var(--r-md);
  background:
    var(--cat-grad,
      var(--wg,
        radial-gradient(130% 130% at 80% 12%, #e4dcec 0%, transparent 55%),
        linear-gradient(120deg, #a6c0b4, #aeabde)));
  overflow: hidden;
}
[data-theme="dark"] .pbw-banner { filter: saturate(0.94) brightness(0.82); }

/* Echter Avatar (Bild) bzw. Initialen — zieht sich wie beim Original
   über die Bannerkante (.pb-fcard-body .pb-avatar). */
.pbw-av {
  display: grid;
  place-items: center;
  position: relative;
  z-index: 1;
  width: 2.875rem;
  height: 2.875rem;
  margin: -1.45rem 0 0 0.5rem;
  border-radius: 50%;
  overflow: hidden;
  background: var(--avatar);
  box-shadow: 0 0 0 0.25rem var(--surface);
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 0.8125rem;
  letter-spacing: var(--track-body);
  color: var(--text-soft);
}
.pbw-av img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Fallback-Palette (Gast/leerer Roster) = --cat-grad-Spektrum */
.pbw-banner[data-g="1"] { --wg: radial-gradient(140% 150% at 22% 18%, #7fd49a 0%, #e6ddec 52%, #aeabde 100%); }
.pbw-banner[data-g="2"] { --wg: radial-gradient(140% 150% at 22% 18%, #aeabde 0%, #e6ddec 52%, #f2cd78 100%); }
.pbw-banner[data-g="3"] { --wg: radial-gradient(140% 150% at 22% 18%, #f2cd78 0%, #aeabde 52%, #7fd49a 100%); }
.pbw-banner[data-g="4"] { --wg: radial-gradient(140% 150% at 22% 18%, #f2cd78 0%, #f0763c 52%, #ef8f66 100%); }
.pbw-banner[data-g="5"] { --wg: radial-gradient(140% 150% at 22% 18%, #a6c0b4 0%, #e6ddec 52%, #f2cd78 100%); }
.pbw-banner[data-g="6"] { --wg: radial-gradient(140% 150% at 22% 18%, #a6c0b4 0%, #7fd49a 52%, #e6ddec 100%); }
.pbw-banner[data-g="7"] { --wg: radial-gradient(140% 150% at 22% 18%, #ef8f66 0%, #dd83c2 52%, #aeabde 100%); }
.pbw-banner[data-g="8"] { --wg: radial-gradient(140% 150% at 22% 18%, #7fd49a 0%, #aeabde 52%, #e6ddec 100%); }

/* Handy (Mathias 05.10.2026: „bei Mobile wird die Freelancer-Wand nicht
   unten angezeigt“): bis dahin ausgeblendet, jetzt dieselbe Wand, kleiner
   (pb-card-wall.js: --wall-k 0,55 … 0,8 nach Fensterhöhe, 7 statt 12
   Reihen). Unter 1 verkleinert würde die Box schmaler als das Fenster —
   sie wird deshalb um 1/k breiter angelegt und mittig verkleinert, so
   reicht das Meer weiter von Rand zu Rand. */
@media (max-width: 767.98px) {
  pb-card-wall {
    left: 50%;
    right: auto;
    width: calc(100% / var(--wall-k, 1));
    transform: translateX(-50%) scale(var(--wall-k, 1));
  }
  /* Die Rechtslinks stehen hier fest am unteren Rand (agent.css) — die
     Reihen rücken um ihre Höhe nach oben, damit die Avatare der vordersten
     Reihe über den Links stehen und nicht dahinter. */
  .pbw-row { bottom: calc(var(--b) + 3.5rem); }
  /* … und der Nebel weicht entsprechend nach oben, sonst schluckt er die
     hinteren Reihen (die Box ist auf dem Handy kaum höher als die Wand). */
  pb-card-wall::after {
    background:
      linear-gradient(to right, var(--bg) 0%, transparent 16%),
      linear-gradient(to left, var(--bg) 0%, transparent 16%),
      linear-gradient(to top, transparent 0%, transparent 34%, var(--bg) 76%);
  }
}