/* Infografia — sistema de motion compartido */

:root {
  --ease-fluid: cubic-bezier(.22, 1, .36, 1);
  --ease-spring: cubic-bezier(.34, 1.56, .64, 1);
  --ease-out-soft: cubic-bezier(.16, 1, .3, 1);
}

/* ── Timeline ── */
.tl-wrap {
  border-top: 1px solid #222;
  background: #060606;
  padding: 8px 14px 10px;
  flex-shrink: 0;
  min-width: 0;
  width: 100%;
  transition: background .6s var(--ease-fluid);
}
.tl-wrap.era-shift { animation: tlWrapGlow .75s var(--ease-fluid); }

.tl-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: #1a1a1a; border: 1px solid #444;
  flex-shrink: 0; cursor: pointer; position: relative;
  transform: scale(1);
  transition: transform .6s var(--ease-spring), background .5s var(--ease-fluid),
              border-color .5s, box-shadow .6s var(--ease-fluid);
}
.tl-dot::before { content: ''; position: absolute; inset: -10px; }
.tl-dot:hover { background: #666; border-color: #888; transform: scale(1.15); }
.tl-dot.active {
  background: #bbb; border-color: #ddd;
  box-shadow: 0 0 12px rgba(220, 220, 220, 0.5);
  transform: scale(1.5);
}
.tl-dot.active::after {
  content: ''; position: absolute; inset: -5px; border-radius: 50%;
  border: 1px solid rgba(210, 210, 210, 0.4);
  animation: dotRing 1.4s var(--ease-out-soft) 2;
  pointer-events: none;
}
.tl-dot.dot-bump { animation: dotBump .6s var(--ease-spring); }

.tl-periods-row { display: flex; }

/* Columnas: punto + segmento + etiqueta comparten el mismo ancho */
.tl-columns { display: flex; width: 100%; }
.tl-col { flex: 1; min-width: 0; }
.tl-dot-track {
  display: flex;
  align-items: center;
  height: 14px;
  margin-bottom: 5px;
}

.tl-era {
  cursor: pointer; padding: 0 3px; min-width: 0;
  opacity: .42; overflow: hidden;
  transition: opacity .55s var(--ease-fluid);
}
.tl-era.active { opacity: 1; }

.tl-era-name {
  font-size: 9px; color: #555; letter-spacing: 0.06em; text-transform: uppercase;
  line-height: 1.2; font-weight: 500;
  transition: color .5s var(--ease-fluid);
  overflow: hidden; text-overflow: ellipsis;
}
.tl-era.active .tl-era-name { color: #ddd; font-weight: 600; }
.tl-era-years {
  font-size: 8px; color: #444; letter-spacing: 0.04em; margin-top: 1px;
  transition: color .5s var(--ease-fluid), opacity .5s;
  white-space: nowrap;
}
.tl-era.active .tl-era-years { color: #888; }
.tl-era:hover .tl-era-name { color: #aaa; }
.tl-era:hover .tl-era-years { color: #666; }

.tl-seg {
  flex: 1;
  min-width: 0;
  height: 1px;
  background: #2a2a2a;
  position: relative;
  transition: height .45s var(--ease-fluid), box-shadow .55s var(--ease-fluid);
}
.tl-seg::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(90deg, #3a3a3a, #7a7a7a, #3a3a3a);
  transform: scaleX(0); transform-origin: left center; border-radius: 1px;
  transition: transform .75s var(--ease-out-soft) var(--seg-delay, 0ms), box-shadow .55s;
}
.tl-seg.active { height: 2px; box-shadow: 0 0 5px rgba(160, 160, 160, 0.15); }
.tl-seg.active::after {
  transform: scaleX(1);
  box-shadow: 0 0 6px rgba(180, 180, 180, 0.35);
}

.tl-years-row {
  position: relative; height: 16px; margin-bottom: 4px; overflow: hidden;
  contain: layout style;
  transition: opacity .4s var(--ease-fluid), transform .4s var(--ease-fluid);
}
.tl-years-row.is-updating { opacity: 0; transform: translateY(5px); }

.tl-year-mark {
  position: absolute; left: 0; top: 0;
  font-size: 9px; color: #999; letter-spacing: 0.05em;
  white-space: nowrap; font-weight: 500;
  transition: transform .6s var(--ease-out-soft), opacity .5s var(--ease-fluid), color .4s;
}
.tl-year-mark.motion-will-change { will-change: transform, opacity; }
.tl-year-mark.tl-year-enter { opacity: 0; }
.tl-year-mark.tl-year-enter.anchor-left { transform: translate3d(var(--year-x, 0), 8px, 0) scale(.92); }
.tl-year-mark.tl-year-enter.anchor-center { transform: translate3d(var(--year-x, 0), 8px, 0) scale(.92); }
.tl-year-mark.tl-year-enter.anchor-right { transform: translate3d(var(--year-x, 0), 8px, 0) scale(.92); }
.tl-year-mark.tl-year-show { opacity: 1; color: #bbb; }
.tl-year-mark.tl-year-show.anchor-left { transform: translate3d(var(--year-x, 0), 0, 0) scale(1); }
.tl-year-mark.tl-year-show.anchor-center { transform: translate3d(var(--year-x, 0), 0, 0) scale(1); }
.tl-year-mark.tl-year-show.anchor-right { transform: translate3d(var(--year-x, 0), 0, 0) scale(1); }
.tl-year-mark.anchor-left { transform: translate3d(var(--year-x, 0), 0, 0); }
.tl-year-mark.anchor-center { transform: translate3d(var(--year-x, 0), 0, 0); }
.tl-year-mark.anchor-right { transform: translate3d(var(--year-x, 0), 0, 0); }

/* ── Barra móvil de era ── */
.mobile-era-bar {
  overflow: hidden; max-height: 0; opacity: 0; transform: translateY(8px);
  transition: max-height .55s var(--ease-fluid), opacity .5s var(--ease-fluid),
              transform .5s var(--ease-fluid), padding .5s var(--ease-fluid);
}
.mobile-era-bar.has-era { max-height: 120px; opacity: 1; transform: translateY(0); }

/* ── Tooltips y stats ── */
.tooltip-box {
  transition: opacity .4s var(--ease-fluid), transform .5s var(--ease-spring);
}
.tooltip-box.tip-in { animation: tipIn .6s var(--ease-spring) forwards; }
.tooltip-box.tip-out { animation: tipOut .35s var(--ease-fluid) forwards; }

.stat-side-year, .stat-side-note { transition: opacity .4s, transform .4s; }
.stat-side-year.stat-in { animation: statIn .6s var(--ease-out-soft) forwards; }
.stat-side-note.stat-in { animation: statIn .65s var(--ease-out-soft) .1s forwards both; }

.mobile-era-year, .mobile-era-note { transition: opacity .3s, transform .3s; }
.mobile-era-year.stat-in, .mobile-era-note.stat-in { animation: statIn .4s ease forwards; }

/* ── Mapa ── */
.map-area { position: relative; contain: layout style; }
.map-area.motion-target::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.07);
  opacity: 0;
  pointer-events: none;
  z-index: 5;
}
.map-area.era-pulse::after {
  animation: mapPulseOverlay .85s var(--ease-out-soft);
}

/* will-change temporal durante animaciones */
.motion-will-change { will-change: transform, opacity; }
.motion-will-change-filter { will-change: filter; }

/* ── Keyframes ── */
@keyframes dotRing {
  0% { transform: scale(.8); opacity: .9; }
  70% { transform: scale(2.2); opacity: 0; }
  100% { transform: scale(2.2); opacity: 0; }
}
@keyframes dotBump {
  0% { transform: scale(1); }
  45% { transform: scale(1.9); }
  100% { transform: scale(1.5); }
}
@keyframes tlWrapGlow {
  0% { background: #060606; }
  35% { background: #0c0c0c; }
  100% { background: #060606; }
}
@keyframes tipIn {
  from { opacity: 0; transform: translateY(-10px) scale(.94); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes tipOut {
  from { opacity: 1; transform: translateY(0) scale(1); }
  to { opacity: 0; transform: translateY(6px) scale(.96); }
}
@keyframes statIn {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes mapPulseOverlay {
  0% { opacity: 0; }
  30% { opacity: 1; }
  100% { opacity: 0; }
}

/* Modo ligero: sin blur SVG pesado (activar con class perf-lite en body) */
.perf-lite .region-glow { display: none; }
.perf-lite .route-line { filter: none !important; }
.perf-lite .era-glow { filter: none !important; }

/* ── Desktop: timeline a ancho completo ── */
@media (min-width: 769px) {
  .tl-scroll { overflow-x: hidden; }
  .tl-inner { width: 100%; }
  .tl-columns {
    position: relative;
    width: 100%;
  }
  .tl-columns::before {
    content: '';
    position: absolute;
    left: 3px;
    right: 0;
    top: 7px;
    height: 1px;
    background: #2a2a2a;
    pointer-events: none;
    z-index: 0;
  }
  .tl-dot-track { position: relative; z-index: 1; }
  .tl-col:last-child .tl-seg-tail { flex: 1; min-width: 0; }
  .tl-years-row { height: 18px; margin-bottom: 6px; }
  .tl-year-mark { font-size: 10px; letter-spacing: 0.04em; }
  .tl-era-name { white-space: nowrap; }
  .stat-side-note { line-height: 1.55; }
}

/* ── Móvil: overrides de timeline ── */
@media (max-width: 768px) {
  .mobile-era-bar {
    display: block;
    padding: 0 12px;
    border-bottom: 1px solid transparent;
    transition: max-height .4s ease, opacity .35s ease, transform .35s ease,
                padding .35s ease, border-color .35s ease;
  }
  .mobile-era-bar.has-era {
    padding: 8px 12px 6px;
    border-bottom: 1px solid #1a1a1a;
    background: #080808;
  }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}