/* ═══════════════════════════════════════════════════════════════════
   Akhilius Imagery — kontextpassende Bilder für Dashboard-Bereiche
   ═══════════════════════════════════════════════════════════════════
   Ziel: Bilder verschmelzen mit dem Thema, geben visuelle Beschreibung
   der Funktion. Subtle, nicht reingepastet, professionell.
   ═══════════════════════════════════════════════════════════════════ */

/* ── 1. Login-Screen — Pipe-Smoke→Sparkle als atmospheric backdrop ──── */
#login-screen {
  position: relative;
  background-image: url('img/akhilius/login-hero-pipe-1280.png');
  background-position: 50% 50%;
  background-size: cover;
  background-repeat: no-repeat;
}
#login-screen::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
    var(--bg) 0%,
    rgba(245,239,231,0.85) 25%,
    rgba(245,239,231,0.55) 50%,
    rgba(245,239,231,0.78) 75%,
    var(--bg) 100%
  );
  pointer-events: none;
  z-index: 0;
}
[data-theme="dark"] #login-screen::before {
  background: linear-gradient(180deg,
    var(--bg) 0%,
    rgba(38,32,26,0.86) 25%,
    rgba(38,32,26,0.6) 50%,
    rgba(38,32,26,0.8) 75%,
    var(--bg) 100%
  );
}
#login-screen > * { position: relative; z-index: 1; }
#login-screen h1, #login-screen p {
  text-shadow: 0 1px 8px var(--bg);
}

/* ── 2. Übersicht-Hero — Looking-Up als rechte Bild-Komposition ─────── */
.editorial-hero {
  position: relative;
  isolation: isolate;
  /* BB.10.17 — Hero-Bild ist jetzt dynamisch, gewählt vom Fortune-Endpoint
     passend zum Spruch. Setzbar via JS: el.style.setProperty('--hero-fortune-image', ...) */
  --hero-fortune-image: url('img/akhilius/looking-up-1408x768.png');
}
@media (min-width: 920px) {
  .editorial-hero::after {
    content: '';
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    width: 280px;
    height: 200px;
    background-image: var(--hero-fortune-image);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: right center;
    opacity: 0.42;
    pointer-events: none;
    z-index: -1;
    mask-image: linear-gradient(90deg, transparent, black 40%);
    -webkit-mask-image: linear-gradient(90deg, transparent, black 40%);
    transition: opacity 0.6s ease;
  }
  .editorial-hero.fortune-fading::after { opacity: 0; }
}

/* ── 3. Empty-states pro Kontext — spezifische Bilder ─────────────── */
.empty-state.akh-empty-image {
  padding: 2.5rem 1.5rem 2rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.9rem;
  min-height: 280px;
  justify-content: center;
}
.empty-state.akh-empty-image::before {
  display: block;
  width: 220px;
  height: 130px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  opacity: 0.85;
  filter: none;
  margin: 0 0 0.6rem;
}
.empty-state.akh-empty-image .akh-empty-caption {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 0.95rem;
  color: var(--ink-dim);
  max-width: 28em;
  text-align: center;
  line-height: 1.55;
}

/* Chats — kein Chat ausgewählt: Reading-Close (intimes Lesen) */
.empty-state.akh-empty-chat-pick::before {
  background-image: url('img/akhilius/reading-close.png');
  width: 260px;
  height: 150px;
}

/* Chats — keine Messages: Marginalia (still erwartend) */
.empty-state.akh-empty-no-messages::before {
  background-image: url('img/akhilius/marginalia-1408x768.png');
  width: 280px;
  height: 160px;
  opacity: 0.78;
}

/* Agents — keine Tasks: Empty-Chair */
.empty-state.akh-empty-agents::before {
  background-image: url('img/akhilius/empty-chair-1408x768.png');
  width: 180px;
  height: 200px;
  opacity: 0.8;
}

/* Delivery — leere Queue: Hand-Offering-Spark */
.empty-state.akh-empty-delivery::before {
  background-image: url('img/akhilius/hand-offering-spark.png');
  width: 240px;
  height: 160px;
  opacity: 0.85;
}

/* Identity-Tab Sub-Section Header Illustrations — small ornaments */
.id-sub-header {
  position: relative;
  padding-right: 90px;
}
.id-sub-header::after {
  content: '';
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 72px;
  height: 64px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: right center;
  opacity: 0.55;
  pointer-events: none;
}
.id-sub-header.id-modules::after {
  background-image: url('img/akhilius/telegram-avatar-256.png');
}
.id-sub-header.id-skills::after {
  background-image: url('img/akhilius/spectacle-reflection.png');
  width: 110px;
  opacity: 0.45;
}
.id-sub-header.id-memory-log::after {
  background-image: url('img/akhilius/reading-letter-1408x768.png');
  width: 110px;
  opacity: 0.5;
}

/* ── 4. Docs-Sidebar Header — Book-Hero ──────────────────────────── */
#docs-sidebar > h3:first-of-type,
.docs-sidebar-title {
  position: relative;
  padding-bottom: 1rem;
}
.docs-sidebar-hero {
  display: block;
  width: 100%;
  height: 110px;
  background-image: url('img/akhilius/book-hero-1408x768.png');
  background-size: cover;
  background-position: center 40%;
  background-repeat: no-repeat;
  border-radius: 8px;
  margin-bottom: 1rem;
  opacity: 0.78;
  border: 1px solid var(--border);
}

/* ── 5. System-Tab Section Header — Silhouette-Doorway ───────────── */
.akh-system-banner {
  width: 100%;
  height: 90px;
  background-image: url('img/akhilius/silhouette-doorway.png');
  background-size: cover;
  background-position: center 35%;
  background-repeat: no-repeat;
  border-radius: 8px;
  margin: 0 0 1.25rem;
  opacity: 0.72;
  border: 1px solid var(--border);
  position: relative;
}
.akh-system-banner::after {
  content: 'System · Akhilius beobachtet die Schwellen';
  position: absolute;
  left: 1.25rem;
  bottom: 0.55rem;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 0.82rem;
  color: var(--ink);
  text-shadow: 0 1px 6px var(--bg-card);
  background: var(--bg-card);
  padding: 0.18rem 0.7rem;
  border-radius: 4px;
}

/* ── 6. Dreaming-Widget Header — Closed-Eyes-Listening ───────────── */
#bb1-dreaming-panel .section-title {
  position: relative;
  padding-left: 56px;
}
#bb1-dreaming-panel .section-title::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 28px;
  background-image: url('img/akhilius/closed-eyes-1408x768.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border-radius: 4px;
  opacity: 0.65;
}

/* ── 7. Channels-Tab Cards — Hand-Offering-Spark watermark ───────── */
#tab-channels .v-channel-card {
  position: relative;
  overflow: hidden;
}
#tab-channels .v-channel-card::after {
  content: '';
  position: absolute;
  right: -20px;
  top: -10px;
  width: 110px;
  height: 110px;
  background-image: url('img/akhilius/hand-offering-spark.png');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: right top;
  opacity: 0.06;
  pointer-events: none;
}

/* ── 8. Mobile — quieter, smaller images ─────────────────────────── */
@media (max-width: 720px) {
  .editorial-hero::after { display: none; }
  .empty-state.akh-empty-image::before {
    width: 160px;
    height: 100px;
  }
  .empty-state.akh-empty-image {
    min-height: 220px;
    padding: 1.8rem 1rem 1.4rem;
  }
  .id-sub-header::after { width: 50px; height: 44px; }
  .akh-system-banner { height: 70px; }
  .akh-system-banner::after { font-size: 0.72rem; }
  .docs-sidebar-hero { height: 80px; }
  #login-screen {
    background-position: 60% 50%;
  }
}

/* ── 9. Reduce-motion users — disable parallax-like effects ──────── */
@media (prefers-reduced-motion: reduce) {
  .empty-state.akh-empty-image::before { transition: none; }
}