/**
 * File: /HeroX/assets/css/character-timeline.css
 *
 * Purpose:
 * - Timeline/Chronicle styling
 * - Clickable entries (open detail popup)
 * - Background image (right-side fade) on entries with images
 * - Image-type icon support in markers
 * - Category filters, animations
 *
 * Dependencies:
 * - section_timeline.php
 * - character-timeline.js
 * - character-attacks-ui.js (shared detail popup)
 *
 * Load Order: 9
 * Version: 3.0 — Clickable entries, bg image fade, no inline actions
 */

/* ============================================================================
   TIMELINE FILTERS
   ============================================================================ */
.timeline-filters { position:relative; }
.timeline-filter-btn { transition:all .2s ease; border-color:rgba(var(--bs-secondary-rgb),.3); }
.timeline-filter-btn:hover { background:var(--cat-color); border-color:var(--cat-color); color:#fff; transform:translateY(-1px); }
.timeline-filter-btn.active { background:var(--cat-color); border-color:var(--cat-color); color:#fff; box-shadow:0 2px 8px rgba(0,0,0,.2); }

/* ============================================================================
   TIMELINE CONTAINER
   ============================================================================ */
.timeline-container { position:relative; padding-left:2rem; }
.timeline-container::before { content:''; position:absolute; left:.875rem; top:0; bottom:0; width:2px; background:linear-gradient(to bottom,rgba(93,214,201,.5),rgba(93,214,201,.1)); }

/* ============================================================================
   TIMELINE ENTRIES — Clickable
   ============================================================================ */
.timeline-entry { position:relative; padding-bottom:1.5rem; animation:fadeIn .3s ease; cursor:pointer; }
.timeline-entry:last-child { padding-bottom:0; }

/* ============================================================================
   TIMELINE MARKER — FA Icons + Image Icons
   ============================================================================ */
.timeline-marker { position:absolute; left:-2rem; top:.25rem; width:2.5rem; height:2.5rem; border-radius:50%; display:flex; align-items:center; justify-content:center; color:#fff; font-size:1rem; box-shadow:0 2px 8px rgba(0,0,0,.2); z-index:1; overflow:hidden; }
.timeline-marker-img { width:100%; height:100%; object-fit:cover; border-radius:50%; }

/* ============================================================================
   TIMELINE CONTENT CARD — With background image fade
   ============================================================================ */
.timeline-content { background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.1); border-radius:.75rem; padding:1rem; transition:all .2s ease; position:relative; overflow:hidden; }

/* Background Image (right side, fading left) */
.timeline-content-bg { position:absolute; top:0; right:0; bottom:0; width:55%; background-size:cover; background-position:center; background-repeat:no-repeat; z-index:0; pointer-events:none; -webkit-mask-image:linear-gradient(to right,transparent 0%,rgba(0,0,0,.35) 25%,rgba(0,0,0,.75) 100%); mask-image:linear-gradient(to right,transparent 0%,rgba(0,0,0,.35) 25%,rgba(0,0,0,.75) 100%); opacity:.55; transition:opacity .3s ease; }
.timeline-content:hover .timeline-content-bg { opacity:.8; }

/* Content children above bg layer */
.timeline-header,
.timeline-description,
.timeline-data,
.timeline-image { position:relative; z-index:1; }

.timeline-content:hover { background:rgba(255,255,255,.05); border-color:rgba(93,214,201,.3); transform:translateX(2px); box-shadow:0 2px 8px rgba(93,214,201,.2); }

/* Expand hint on hover */
.timeline-content::after { content:'\f065'; font-family:'Font Awesome 6 Free'; font-weight:900; position:absolute; top:.5rem; right:.5rem; z-index:3; width:24px; height:24px; display:flex; align-items:center; justify-content:center; font-size:.6rem; background:rgba(0,0,0,.4); color:rgba(255,255,255,.3); border-radius:50%; opacity:0; transition:opacity .2s ease; pointer-events:none; }
.timeline-content:hover::after { opacity:1; }

/* Header */
.timeline-header { display:flex; justify-content:space-between; align-items:flex-start; gap:1rem; margin-bottom:.5rem; }
.timeline-title { font-weight:600; color:rgba(255,255,255,.95); flex:1; text-shadow:0 1px 3px rgba(0,0,0,.4); }
.timeline-time { font-size:.75rem; color:rgba(255,255,255,.5); white-space:nowrap; }

/* Description */
.timeline-description { font-size:.875rem; color:rgba(255,255,255,.7); line-height:1.5; margin-bottom:.5rem; overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; }

/* Data Badges */
.timeline-data { display:flex; gap:.5rem; flex-wrap:wrap; }
.timeline-data .badge { font-size:.75rem; padding:.25rem .5rem; }

/* ============================================================================
   ANIMATIONS
   ============================================================================ */
@keyframes fadeIn { from{opacity:0;transform:translateX(-10px)} to{opacity:1;transform:translateX(0)} }
@keyframes fadeOut { from{opacity:1;transform:scale(1)} to{opacity:0;transform:scale(.95)} }

.timeline-entry-highlight .timeline-content { animation:highlightPulse 2s ease; }
@keyframes highlightPulse { 0%,100%{background:rgba(255,255,255,.03);box-shadow:none} 50%{background:rgba(93,214,201,.1);box-shadow:0 0 20px rgba(93,214,201,.3)} }

.timeline-empty-filtered { animation:fadeIn .3s ease; }

/* ============================================================================
   RESPONSIVE
   ============================================================================ */
@media (max-width:576px) {
  .timeline-container { padding-left:1.5rem; }
  .timeline-container::before { left:.625rem; }
  .timeline-marker { left:-1.5rem; width:2rem; height:2rem; font-size:.875rem; }
  .timeline-header { flex-direction:column; gap:.25rem; }
  .timeline-time { align-self:flex-start; }
  .timeline-filter-btn span { display:none!important; }
  .timeline-content-bg { width:45%; opacity:.35; }
}

/* ============================================================================
   DARK MODE
   ============================================================================ */
[data-bs-theme="dark"] .timeline-content { background:rgba(255,255,255,.05); border-color:rgba(255,255,255,.15); }
[data-bs-theme="dark"] .timeline-content:hover { background:rgba(255,255,255,.08); border-color:rgba(93,214,201,.4); }

/* ============================================================================
   PRINT
   ============================================================================ */
@media print {
  .timeline-filters, #timelineAddForm, .timeline-content::after { display:none!important; }
  .timeline-container::before { background:#dee2e6!important; }
  .timeline-marker { background:#6c757d!important; box-shadow:none!important; }
  .timeline-content { background:white!important; border:1px solid #dee2e6!important; box-shadow:none!important; page-break-inside:avoid; cursor:default!important; }
  .timeline-content-bg { display:none!important; }
  .timeline-entry { page-break-inside:avoid; cursor:default!important; }
}

/* ============================================================================
   ACCESSIBILITY
   ============================================================================ */
@media (prefers-reduced-motion:reduce) {
  .timeline-entry, .timeline-content, .timeline-content-bg, .timeline-filter-btn { animation:none!important; transition:none!important; }
}