/**
 * File: /assets/css/character-timeline.css
 *
 * Purpose:
 * - Timeline/Chronicle styling
 * - "Geschichte" (story) entries with golden glow/highlight
 * - Visual category picker buttons in add form
 * - Icon picker integration
 * - Clickable entries, bg image fade, marker icons
 *
 * Dependencies:
 * - section_timeline.php
 * - character-timeline.js
 * - character-attacks-ui.js (shared detail popup)
 * Load:     index.php
 *
 * Load Order: 9
 * Version: 4.0 — Story category, visual form, improved markers
 * Version:  1.1.0
 */

/* ============================================================================
   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); }

/* ============================================================================
   CATEGORY PICKER (Add Form) — Visual icon buttons
   ============================================================================ */
.tl-cat-picker { gap: .4rem !important; }
.tl-cat-btn {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: .2rem; padding: .5rem .6rem; min-width: 56px;
  border: 2px solid rgba(255,255,255,.12); border-radius: .6rem;
  background: rgba(255,255,255,.04); color: rgba(255,255,255,.6);
  font-size: .65rem; cursor: pointer; transition: all .2s ease;
}
.tl-cat-btn i { font-size: 1.1rem; }
.tl-cat-btn:hover {
  background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.25);
  color: rgba(255,255,255,.9); transform: translateY(-1px);
}
.tl-cat-btn.active {
  background: color-mix(in srgb, var(--active-color, #dc3545) 20%, transparent);
  border-color: var(--active-color, #dc3545);
  color: #fff; box-shadow: 0 0 12px color-mix(in srgb, var(--active-color, #dc3545) 30%, transparent);
}
.tl-cat-btn.active i { filter: drop-shadow(0 0 4px currentColor); }

/* Story button special glow */
.tl-cat-btn[data-cat="story"].active {
  background: linear-gradient(135deg, rgba(212,175,55,.2), rgba(255,215,0,.15));
  border-color: #d4af37;
  box-shadow: 0 0 16px rgba(212,175,55,.3), inset 0 0 8px rgba(212,175,55,.1);
}

/* Auto-only categories (level, quest) — greyed out in add form */
.tl-cat-btn.tl-cat-auto,
.tl-cat-btn[disabled] {
  opacity: 0.3; cursor: not-allowed; pointer-events: none;
  filter: grayscale(1);
}
.tl-cat-btn.tl-cat-auto::after {
  content: '\f023'; font-family: 'Font Awesome 6 Free'; font-weight: 900;
  font-size: .5rem; position: absolute; top: 2px; right: 2px; opacity: .5;
}
.tl-cat-btn.tl-cat-auto { position: relative; }

/* Category warning alerts */
#tlCatWarning, #editTlCatWarning {
  border-radius: .5rem; font-weight: 500;
}
#tlCatWarning.alert-danger, #editTlCatWarning.alert-danger {
  animation: dangerPulse 1.5s ease infinite;
}
@keyframes dangerPulse {
  0%, 100% { box-shadow: 0 0 0 rgba(220,53,69,0); }
  50% { box-shadow: 0 0 12px rgba(220,53,69,.3); }
}

/* ============================================================================
   ICON PREVIEW (Add Form)
   ============================================================================ */
.tl-icon-preview {
  background: rgba(255,255,255,.03); border-color: rgba(255,255,255,.15) !important;
  transition: all .3s ease; min-height: 64px; display: flex; flex-direction: column;
  align-items: center; justify-content: center;
}
.tl-icon-preview:hover { background: rgba(255,255,255,.06); border-color: rgba(93,214,201,.3) !important; }

/* ============================================================================
   FORM INPUTS (#timeline scope)
   ============================================================================ */
#timeline .form-control, #timeline .form-select {
  background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1);
  color: rgba(255,255,255,.9); transition: all .3s ease;
}
#timeline .form-control:focus, #timeline .form-select:focus {
  background: rgba(255,255,255,.08); border-color: rgba(93,214,201,.4);
  box-shadow: 0 0 0 .2rem rgba(93,214,201,.15); color: rgba(255,255,255,1);
}
#timeline .form-control::placeholder { color: rgba(255,255,255,.3); }

/* ============================================================================
   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
   ============================================================================ */
.timeline-entry { position:relative; padding-bottom:1.5rem; animation:fadeIn .3s ease; cursor:pointer; }
.timeline-entry:last-child { padding-bottom:0; }

/* ============================================================================
   TIMELINE MARKER
   ============================================================================ */
.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 i { font-size: .9rem; }
.timeline-marker-img { width:100%; height:100%; object-fit:cover; border-radius:50%; }

/* Story marker — golden ring + glow */
.timeline-marker-story {
  box-shadow: 0 0 12px rgba(212,175,55,.4), 0 0 24px rgba(212,175,55,.15);
  border: 2px solid rgba(212,175,55,.6);
}

/* ============================================================================
   TIMELINE CONTENT CARD
   ============================================================================ */
.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) + Ken Burns pan */
.timeline-content-bg {
  position: absolute; top: 0; right: 0; bottom: 0; left: 40%; height: 100%;
  background-size: 140%; background-position: center; background-repeat: no-repeat;
  z-index: 0; pointer-events: none; opacity: 0.6;
  transition: opacity 0.4s ease, left 0.5s ease;
  animation: tlKenBurns 25s ease-in-out infinite alternate;
}
.timeline-content-bg::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(to right, rgba(33,37,41,1) 0%, rgba(33,37,41,0.6) 40%, transparent 80%);
  pointer-events: none;
}
.timeline-content:hover .timeline-content-bg {
  opacity: 0.9; left: 20%;
  animation-play-state: paused;
}

/* Ken Burns slow pan — reveals hidden parts of the image */
@keyframes tlKenBurns {
  0%   { background-position: 30% 20%;  background-size: 140%; }
  33%  { background-position: 70% 50%;  background-size: 150%; }
  66%  { background-position: 50% 80%;  background-size: 145%; }
  100% { background-position: 80% 30%;  background-size: 140%; }
}

/* Stagger animation start per entry to avoid synchronized movement */
.timeline-entry:nth-child(2n) .timeline-content-bg  { animation-delay: -8s; }
.timeline-entry:nth-child(3n) .timeline-content-bg  { animation-delay: -16s; }
.timeline-entry:nth-child(5n) .timeline-content-bg  { animation-delay: -12s; }
.timeline-entry:nth-child(7n) .timeline-content-bg  { animation-delay: -4s; }

/* Content children above bg layer */
.timeline-header, .timeline-description, .timeline-data, .timeline-image, .timeline-story-badge, .timeline-level-badge, .timeline-quest-badge { 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; }

/* ============================================================================
   STORY ENTRY — Golden highlight, special styling
   ============================================================================ */
.timeline-entry-story .timeline-content-story {
  background: linear-gradient(135deg, rgba(212,175,55,.06), rgba(255,215,0,.03));
  border-color: rgba(212,175,55,.3);
  box-shadow: 0 0 16px rgba(212,175,55,.08);
}
.timeline-entry-story .timeline-content-story:hover {
  border-color: rgba(212,175,55,.5);
  box-shadow: 0 2px 12px rgba(212,175,55,.2);
  background: linear-gradient(135deg, rgba(212,175,55,.1), rgba(255,215,0,.05));
}

/* Story badge */
.timeline-story-badge {
  display: inline-flex; align-items: center; gap: .35rem;
  font-size: .7rem; font-weight: 600; text-transform: uppercase; letter-spacing: .05em;
  color: #d4af37; margin-bottom: .5rem;
  padding: .2rem .6rem; background: rgba(212,175,55,.1); border-radius: .3rem;
  border: 1px solid rgba(212,175,55,.2);
}
.timeline-story-badge i { font-size: .6rem; }

/* Story title */
.timeline-entry-story .timeline-title {
  color: rgba(255,223,107,.95);
  text-shadow: 0 1px 4px rgba(212,175,55,.3);
}

/* Story description — show more lines */
.timeline-desc-story {
  -webkit-line-clamp: 4;
  font-style: italic;
  color: rgba(255,255,255,.75);
}

/* Story line connector — golden segment */
.timeline-entry-story::before {
  content: ''; position: absolute;
  left: calc(-2rem + .875rem - 1px); top: 0; bottom: -1.5rem; width: 2px;
  background: linear-gradient(to bottom, rgba(212,175,55,.6), rgba(212,175,55,.1));
  z-index: 0;
}

/* ============================================================================
   LEVEL ENTRY — Blue highlight, special styling
   ============================================================================ */
.timeline-entry-level .timeline-content-level {
  background: linear-gradient(135deg, rgba(77,163,255,.08), rgba(59,130,246,.03));
  border-color: rgba(77,163,255,.35);
  box-shadow: 0 0 16px rgba(77,163,255,.1);
}
.timeline-entry-level .timeline-content-level:hover {
  border-color: rgba(77,163,255,.55);
  box-shadow: 0 2px 12px rgba(77,163,255,.25);
  background: linear-gradient(135deg, rgba(77,163,255,.12), rgba(59,130,246,.06));
}

/* Level marker — blue ring + glow */
.timeline-marker-level {
  box-shadow: 0 0 12px rgba(77,163,255,.5), 0 0 24px rgba(77,163,255,.2);
  border: 2px solid rgba(77,163,255,.6);
}

/* Level badge */
.timeline-level-badge {
  display: inline-flex; align-items: center; gap: .35rem;
  font-size: .7rem; font-weight: 600; text-transform: uppercase; letter-spacing: .05em;
  color: #4da3ff; margin-bottom: .5rem;
  padding: .2rem .6rem; background: rgba(77,163,255,.1); border-radius: .3rem;
  border: 1px solid rgba(77,163,255,.25);
}
.timeline-level-badge i { font-size: .6rem; }

/* Level title */
.timeline-entry-level .timeline-title {
  color: rgba(130,190,255,.95);
  text-shadow: 0 1px 4px rgba(77,163,255,.3);
}

/* Level description */
.timeline-desc-level {
  -webkit-line-clamp: 3;
  color: rgba(255,255,255,.75);
}

/* Level line connector — blue segment */
.timeline-entry-level::before {
  content: ''; position: absolute;
  left: calc(-2rem + .875rem - 1px); top: 0; bottom: -1.5rem; width: 2px;
  background: linear-gradient(to bottom, rgba(77,163,255,.6), rgba(77,163,255,.1));
  z-index: 0;
}

/* ============================================================================
   QUEST ENTRY — Yellow/amber highlight, special styling
   ============================================================================ */
.timeline-entry-quest .timeline-content-quest {
  background: linear-gradient(135deg, rgba(230,184,0,.07), rgba(255,193,7,.03));
  border-color: rgba(230,184,0,.3);
  box-shadow: 0 0 16px rgba(230,184,0,.08);
}
.timeline-entry-quest .timeline-content-quest:hover {
  border-color: rgba(230,184,0,.5);
  box-shadow: 0 2px 12px rgba(230,184,0,.2);
  background: linear-gradient(135deg, rgba(230,184,0,.1), rgba(255,193,7,.05));
}

/* Quest marker — amber ring + glow */
.timeline-marker-quest {
  box-shadow: 0 0 12px rgba(230,184,0,.45), 0 0 24px rgba(230,184,0,.15);
  border: 2px solid rgba(230,184,0,.6);
}

/* Quest badge */
.timeline-quest-badge {
  display: inline-flex; align-items: center; gap: .35rem;
  font-size: .7rem; font-weight: 600; text-transform: uppercase; letter-spacing: .05em;
  color: #e6b800; margin-bottom: .5rem;
  padding: .2rem .6rem; background: rgba(230,184,0,.1); border-radius: .3rem;
  border: 1px solid rgba(230,184,0,.2);
}
.timeline-quest-badge i { font-size: .6rem; }

/* Quest title */
.timeline-entry-quest .timeline-title {
  color: rgba(255,215,64,.95);
  text-shadow: 0 1px 4px rgba(230,184,0,.3);
}

/* Quest description */
.timeline-desc-quest {
  -webkit-line-clamp: 3;
  color: rgba(255,255,255,.75);
}

/* Quest line connector — amber segment */
.timeline-entry-quest::before {
  content: ''; position: absolute;
  left: calc(-2rem + .875rem - 1px); top: 0; bottom: -1.5rem; width: 2px;
  background: linear-gradient(to bottom, rgba(230,184,0,.6), rgba(230,184,0,.1));
  z-index: 0;
}

/* ============================================================================
   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-marker i { font-size: .75rem; }
  .timeline-header { flex-direction:column; gap:.25rem; }
  .timeline-time { align-self:flex-start; }
  .timeline-filter-btn span { display:none!important; }
  .timeline-content-bg { left:50%; opacity:0.4; animation-duration: 18s; }

  /* Category picker compact */
  .tl-cat-btn { min-width: 44px; padding: .4rem .5rem; font-size: .6rem; }
  .tl-cat-btn i { font-size: .9rem; }
  .tl-cat-btn span { display: none; }
}

/* ============================================================================
   DARK / LIGHT 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); }
[data-bs-theme="dark"] .timeline-content-bg::after { background:linear-gradient(to right,rgba(33,37,41,1) 0%,rgba(33,37,41,0.6) 40%,transparent 80%); transition:background .5s ease; }
[data-bs-theme="dark"] .timeline-content:hover .timeline-content-bg::after { background:linear-gradient(to right,rgba(33,37,41,1) 0%,rgba(33,37,41,0.4) 30%,transparent 70%); }
[data-bs-theme="light"] .timeline-content-bg::after { background:linear-gradient(to right,rgba(255,255,255,1) 0%,rgba(255,255,255,0.6) 40%,transparent 80%); transition:background .5s ease; }
[data-bs-theme="light"] .timeline-content:hover .timeline-content-bg::after { background:linear-gradient(to right,rgba(255,255,255,1) 0%,rgba(255,255,255,0.4) 30%,transparent 70%); }

/* ============================================================================
   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; }
  .timeline-entry-story .timeline-content-story { border-color:#d4af37!important; }
  .timeline-entry-story::before { background:#d4af37!important; }
  .timeline-entry-level .timeline-content-level { border-color:#4da3ff!important; }
  .timeline-entry-level::before { background:#4da3ff!important; }
  .timeline-entry-quest .timeline-content-quest { border-color:#e6b800!important; }
  .timeline-entry-quest::before { background:#e6b800!important; }
}

/* ============================================================================
   ACCESSIBILITY
   ============================================================================ */
@media (prefers-reduced-motion:reduce) {
  .timeline-entry, .timeline-content, .timeline-content-bg, .timeline-filter-btn,
  .tl-cat-btn, .tl-icon-preview { animation:none!important; transition:none!important; }
}
/* System-generated entries */
.timeline-system-badge {
  display: inline-block;
  font-size: .65rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .05em;
  padding: .15rem .5rem;
  border-radius: .25rem;
  background: rgba(108, 117, 125, .2);
  color: rgba(255, 255, 255, .5);
  margin-bottom: .25rem;
}
.timeline-entry-system {
  opacity: .85;
}
.timeline-entry-system .timeline-content {
  border-left: 2px solid rgba(108, 117, 125, .3);
}