/* =========================================================
   LISI · Avatar Section + Conversation Subpage
   Pure additive — touches nothing else.
   ========================================================= */

/* ---------- Avatar grid inside zone-trunk ---------- */
.avatars-wrap {
  margin: 56px auto 0;
  max-width: 1100px;
  width: 100%;
  text-align: center;
  color: #fff8e7;
}

/* Standalone-Variante (z. B. auf der Kontaktseite, ohne den dunklen
   Tree-Background der Hauptseite): das LISI-Wall-Straßenbild als
   atmosphärischer Hintergrund — belebte Straße, Menschen im Gespräch.
   Dunkler Verlauf drüber sorgt dafür, dass die transluzenten Tiles
   und die cremefarbene Typo genauso lesbar bleiben wie auf der Hauptseite. */
.avatars-wrap.avatars-wrap--standalone {
  position: relative;
  background-color: #0f0d0a;
  background-image:
    linear-gradient(180deg, rgba(15, 13, 10, 0.45) 0%, rgba(15, 13, 10, 0.32) 50%, rgba(15, 13, 10, 0.55) 100%),
    url('../img/street-celebration-night-v2.webp?v=1');
  background-size: cover, cover;
  background-position: center, center;
  background-repeat: no-repeat, no-repeat;
  border: 1px solid rgba(244, 207, 126, 0.18);
  border-radius: 24px;
  padding: 40px 22px 32px;
  overflow: hidden;
  box-shadow:
    0 30px 80px -40px rgba(0, 0, 0, 0.55),
    inset 0 1px 0 rgba(244, 207, 126, 0.08);
}
@media (max-width: 540px) {
  .avatars-wrap.avatars-wrap--standalone {
    padding: 22px 12px 18px;
    border-radius: 18px;
  }
}

.avatars-eyebrow {
  font-family: var(--mono, "JetBrains Mono", monospace);
  font-size: 11px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: rgba(244, 207, 126, 0.85);
  margin: 0 0 10px;
}

.avatars-title {
  font-family: var(--serif, "Fraunces", serif);
  font-weight: 300;
  font-size: clamp(26px, 2.6vw, 38px);
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: #fff8e7;
  margin: 0 0 8px;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
}

.avatars-sub {
  font-family: var(--serif, "Fraunces", serif);
  font-weight: 300;
  font-size: clamp(14px, 1.1vw, 16px);
  line-height: 1.55;
  color: rgba(255, 246, 224, 0.78);
  max-width: 56ch;
  margin: 0 auto 28px;
}

.avatars-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  margin: 28px 0 8px;
}

@media (max-width: 900px) {
  .avatars-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
}

/* iPhone 13 (390px) und kleiner: 3 Spalten beibehalten — die Tiles werden
   schmaler aber Namen/Funktionen laufen weiterhin sauber. */
@media (max-width: 540px) {
  .avatars-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
}

.avatar-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 14px 10px 12px;
  background: rgba(15, 10, 4, 0.45);
  backdrop-filter: blur(8px) saturate(1.15);
  -webkit-backdrop-filter: blur(8px) saturate(1.15);
  border: 1px solid rgba(244, 207, 126, 0.28);
  border-radius: 16px;
  text-decoration: none;
  color: #fff8e7;
  text-align: center;
  cursor: pointer;
  transform-origin: center center;
  will-change: transform, opacity, box-shadow;
  transition:
    transform 0.4s cubic-bezier(0.22, 1, 0.36, 1),
    border-color 0.3s ease,
    background 0.3s ease,
    box-shadow 0.3s ease;
}

.avatar-tile:hover,
.avatar-tile:focus-visible {
  transform: translateY(-3px);
  border-color: rgba(244, 207, 126, 0.7);
  background: rgba(15, 10, 4, 0.6);
  box-shadow: 0 18px 40px -20px rgba(0, 0, 0, 0.7);
  outline: none;
}

.avatar-photo {
  flex: 0 0 auto;
  /* Foto skaliert mit der Tile-Breite, bleibt aber im sinnvollen Rahmen */
  width: clamp(56px, 22vw, 96px);
  aspect-ratio: 1 / 1;
  height: auto;
  border-radius: 50%;
  background-size: cover;
  background-position: center 25%;
  background-repeat: no-repeat;
  border: 1px solid rgba(244, 207, 126, 0.4);
  box-shadow: inset 0 0 0 2px rgba(255, 246, 224, 0.06);
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

@media (min-width: 901px) {
  .avatar-photo { width: 88px; }
}
@media (max-width: 900px) and (min-width: 541px) {
  .avatar-photo { width: 76px; }
}
@media (max-width: 540px) {
  .avatar-photo { width: clamp(48px, 18vw, 72px); }
}

.avatar-tile:hover .avatar-photo {
  transform: scale(1.04);
}

.avatar-meta {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  width: 100%;
  align-items: center;
  text-align: center;
}

/* Name: bleibt in EINER Zeile, kein Umbruch, kein Ellipsis.
   Schriftgröße skaliert leicht mit Tile-Breite, damit auch der längste Name
   („Dr. Yuki Nakamura") auf iPhone 13 (390px → ~118px Tile) nicht umbricht. */
.avatar-name {
  font-family: var(--serif, "Fraunces", serif);
  font-weight: 400;
  font-size: clamp(11px, 2.6vw, 16px);
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: #fff8e7;
  white-space: nowrap;
  overflow: visible;
  text-overflow: clip;
  max-width: 100%;
}

/* Funktion: bricht in bis zu 2 Zeilen um statt mit „…" abgeschnitten zu werden. */
.avatar-role {
  font-family: var(--mono, "JetBrains Mono", monospace);
  font-size: clamp(8.5px, 1.9vw, 10px);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(244, 207, 126, 0.85);
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  word-break: normal;
  overflow-wrap: anywhere;
  hyphens: none;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  max-width: 100%;
  line-height: 1.3;
  min-height: 2.6em; /* zwei Zeilen reservieren — gleiche Höhe für alle Tiles */
}

/* Auf größeren Bildschirmen wieder horizontal-Layout (Foto links, Text rechts),
   damit die Tiles nicht zu hoch werden. */
@media (min-width: 901px) {
  .avatar-tile {
    flex-direction: row;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    text-align: left;
  }
  .avatar-meta { align-items: flex-start; text-align: left; }
  .avatar-name { font-size: 16px; }
  .avatar-role { font-size: 10px; min-height: auto; }
}

/* ---------- Click-Zoom "Window-Through" transition (dive-9) ---------- */
/* The metaphor: the small photo is a WINDOW. The camera flies forward through
   that window into a virtual room behind it where the avatar lives.

   To achieve this convincingly we need:
   1) Real perspective (CSS 3D): the body gets perspective so translateZ
      produces actual forward-motion parallax, not just uniform scale-up.
   2) The photo doesn't grow uniformly — it expands outward FROM the original
      tile center as the camera dives in, making the edges race past the
      viewer (peripheral motion = strong forward-flight cue).
   3) The home page (everything else) recedes simultaneously with negative
      translateZ + blur so we feel relative motion toward the photo.
   4) A long, smoothly-rising white veil overlaps the late dive so even if
      the 3D illusion isn't perfect, the moment of "passing through" the
      photo plane dissolves into pure white before navigation. The avatar
      page then emerges from that same pure white. No abrupt cut. */

/* Dive viewport: a position:fixed wrapper that holds the perspective.
   Putting perspective on body would break position:fixed for the clone
   (any ancestor with transform/filter/perspective re-anchors fixed). The
   wrapper is its own stacking context and sits over everything. */
.avatar-dive-stage {
  position: fixed;
  inset: 0;
  z-index: 9998;
  pointer-events: none;
  perspective: 1400px;
  perspective-origin: 50% 45%;
  /* preserve-3d so children's translateZ actually moves through space */
  transform-style: preserve-3d;
  /* Stays in DOM only during a dive; JS appends/removes it. */
}

/* White veil. Inline-styled by JS for deterministic per-phase transitions:
   approach (long ease to 0.55), pierce-completion (fast ramp to 1.0),
   arrival fade (medium ease back to 0). Keeping the CSS minimal avoids
   class-toggle ordering surprises across browsers. */
.avatar-zoom-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
  background: #ffffff;
  opacity: 0;
  will-change: opacity;
}

/* The flying photo. Lives inside .avatar-dive-stage which provides perspective.
   We use 3D translateZ to genuinely PULL THE CAMERA THROUGH it — first the
   photo comes toward us (positive Z), then the white veil completes the
   illusion as we cross the picture plane. */
.avatar-zoom-clone {
  position: absolute;  /* relative to .avatar-dive-stage */
  z-index: 10000;
  pointer-events: none;
  border-radius: 16px;
  overflow: hidden;
  background-size: cover;
  background-position: center 22%;
  background-repeat: no-repeat;
  box-shadow:
    0 30px 80px -20px rgba(0, 0, 0, 0.55),
    0 0 0 1px rgba(244, 207, 126, 0.28);
  filter: blur(0) brightness(1);
  transform-style: preserve-3d;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  transition:
    transform 0.85s cubic-bezier(0.18, 0.7, 0.25, 1),
    border-radius 0.6s cubic-bezier(0.22, 0.85, 0.3, 1),
    box-shadow 0.6s ease-out,
    filter 0.6s ease-out,
    opacity 0.2s ease-out;
  will-change: transform, filter, opacity;
}
.avatar-zoom-clone img {
  image-rendering: -webkit-optimize-contrast;
  image-rendering: high-quality;
}
/* When approached, the photo has reached the viewport. */
.avatar-zoom-clone.is-approached {
  border-radius: 0;
  box-shadow: 0 0 0 rgba(0,0,0,0);
}
/* PIERCE: the camera continues forward THROUGH the photo plane. We push
   translateZ further (camera physically passes the picture plane) and add
   a directional motion-blur. The white veil rises over this so the photo
   visually dissolves into light at the moment of penetration. */
.avatar-zoom-clone.is-piercing {
  transition:
    transform 0.55s cubic-bezier(0.55, 0.05, 0.85, 0.4),
    filter 0.55s cubic-bezier(0.55, 0.05, 0.85, 0.4),
    opacity 0.35s ease-in;
  filter: blur(6px) saturate(1.1) brightness(1.15);
}

/* Home recedes during the dive: a slight scale + heavy blur + dim so we
   feel relative motion. We don't use translateZ here because the home
   has no perspective ancestor (we keep perspective only in the dive stage
   so position:fixed works elsewhere). The blur+dim alone sells "falling
   into the background" effectively. */
body.home-tree.is-diving .stage,
body.home-tree.is-diving #treeWorld,
body.home-tree.is-diving main {
  transform: scale(1.08);
  filter: blur(10px) brightness(0.7);
  transition:
    transform 1s cubic-bezier(0.4, 0, 0.65, 1),
    filter 0.9s cubic-bezier(0.4, 0, 0.65, 1);
  transform-origin: center center;
  will-change: transform, filter;
}

/* ---------- Avatar conversation subpage ----------
   Layout follows the product subpage pattern:
   eyebrow + display name + italic role + bio (left-aligned, max-w-6xl)
   → hairline → centered live-avatar stage → hairline → back button.
   Padding & max-width come from utility classes in the markup. */
.avatar-stage-section {
  position: relative;
  min-height: 100vh;
  background: #ffffff;
  color: #1a1612;
}

/* Arrival animation: subpage comes toward the viewer (reverse zoom from
   slightly oversized + blurred + bright → to natural). Triggered by
   body.is-arriving-avatar which is added by the router when this subpage
   mounts immediately after a dive transition. */
body.is-arriving-avatar .avatar-stage-section {
  animation: avatarArrival 0.95s cubic-bezier(0.16, 0.84, 0.3, 1) both;
}
body.is-arriving-avatar .avatar-stage-section > * {
  animation: avatarArrivalContents 1.1s cubic-bezier(0.16, 0.84, 0.3, 1) both;
}
@keyframes avatarArrival {
  0%   { transform: scale(1.12); filter: blur(10px) brightness(1.45); opacity: 0; }
  35%  { opacity: 1; }
  100% { transform: scale(1);    filter: blur(0)    brightness(1);    opacity: 1; }
}
@keyframes avatarArrivalContents {
  0%   { transform: translateY(8px) scale(0.985); opacity: 0; }
  40%  { opacity: 0; }
  100% { transform: translateY(0)   scale(1);     opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  body.is-arriving-avatar .avatar-stage-section,
  body.is-arriving-avatar .avatar-stage-section > * {
    animation: none !important;
  }
}

.avatar-back {
  position: absolute;
  top: 22px;
  left: 22px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border: 1px solid rgba(20, 14, 6, 0.12);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.75);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  font-family: var(--mono, "JetBrains Mono", monospace);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #4a3d33;
  text-decoration: none;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
  z-index: 5;
}

.avatar-back:hover {
  background: #ffffff;
  border-color: rgba(20, 14, 6, 0.3);
  color: #1a1612;
}

.avatar-stage {
  position: relative;
  width: 100%;
  max-width: 1200px;
  aspect-ratio: 16 / 9;
  margin: 0 auto;
  background: #fafafa;
  border: 1px solid var(--line, rgba(20, 14, 6, 0.08));
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 30px 80px -30px rgba(20, 14, 6, 0.18);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Back button at bottom of avatar subpage — inherits .btn .btn-cream
   styles; this rule only ensures the SVG aligns nicely with the label. */
.avatar-back-btn {
  display: inline-flex;
  align-items: center;
}

.avatar-iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

.avatar-placeholder {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(180deg, #fafafa 0%, #f3f1ec 100%);
}

.avatar-placeholder-photo {
  width: clamp(240px, 36%, 420px);
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  background-size: cover;
  background-position: center 25%;
  background-repeat: no-repeat;
  box-shadow: 0 30px 60px -25px rgba(20, 14, 6, 0.28);
  filter: saturate(0.96);
}

.avatar-placeholder-badge {
  position: absolute;
  bottom: 32px;
  left: 50%;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 18px;
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid rgba(20, 14, 6, 0.1);
  border-radius: 999px;
  font-family: var(--mono, "JetBrains Mono", monospace);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #4a3d33;
  box-shadow: 0 10px 30px -10px rgba(20, 14, 6, 0.18);
}

/* CTA-Button auf dem Avatar-Porträt */
.avatar-cta {
  position: absolute;
  bottom: 32px;
  left: 50%;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 13px 24px;
  background: var(--leaf, #4a6b32);
  color: #faf6ee;
  border: 0;
  border-radius: 999px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.01em;
  cursor: pointer;
  box-shadow: 0 14px 36px -12px rgba(20, 14, 6, 0.32);
  transition: transform 0.18s cubic-bezier(.2,.7,.2,1), box-shadow 0.18s ease, background 0.18s ease;
}
.avatar-cta:hover {
  transform: translateX(-50%) translateY(-2px);
  box-shadow: 0 18px 44px -12px rgba(20, 14, 6, 0.38);
  background: #3d5828;
}
.avatar-cta:focus-visible {
  outline: 2px solid var(--terra, #d97757);
  outline-offset: 3px;
}
.avatar-cta-icon {
  display: inline-flex;
  align-items: center;
  opacity: 0.92;
}

.avatar-pulse {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #d97757;
  box-shadow: 0 0 0 0 rgba(217, 119, 87, 0.6);
  animation: avatar-pulse 1.6s cubic-bezier(0.22, 1, 0.36, 1) infinite;
}

@keyframes avatar-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(217, 119, 87, 0.6); }
  100% { box-shadow: 0 0 0 14px rgba(217, 119, 87, 0); }
}

.avatar-card {
  margin-top: 28px;
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 18px 24px;
  background: #ffffff;
  border: 1px solid rgba(20, 14, 6, 0.08);
  border-radius: 18px;
  max-width: 720px;
  width: 100%;
  box-shadow: 0 10px 30px -20px rgba(20, 14, 6, 0.18);
}

.avatar-card-photo {
  flex: 0 0 auto;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background-size: cover;
  background-position: center 25%;
  background-repeat: no-repeat;
  border: 1px solid rgba(20, 14, 6, 0.08);
}

.avatar-card-meta {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.avatar-card-role {
  font-family: var(--mono, "JetBrains Mono", monospace);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #6b5d52;
  margin: 0;
}

.avatar-card-name {
  font-family: var(--serif, "Fraunces", serif);
  font-weight: 300;
  font-size: clamp(20px, 1.8vw, 26px);
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: #1a1612;
  margin: 0;
}

.avatar-card-bio {
  font-family: var(--serif, "Fraunces", serif);
  font-weight: 300;
  font-size: 14px;
  line-height: 1.5;
  color: #4a3d33;
  margin: 4px 0 0;
  max-width: 60ch;
}

@media (max-width: 600px) {
  .avatar-card { flex-direction: column; align-items: flex-start; }
  .avatar-back { top: 14px; left: 14px; }
}

/* When hash already contains avatar route, hide tree-world background
   visual leftovers that might persist for a frame */
body:not(.home-tree) .avatar-zoom-overlay { display: none; }