/* ===== ROOT & RESET ===== */
  .tl-root { max-width:1500px; margin:0 auto; padding:0 1rem 3rem; font-family:'Inter',sans-serif; color:#1a1a2e; }
  .tl-root *,.tl-root *::before,.tl-root *::after { box-sizing:border-box; }


  /* ===== ERA NAV ===== */
  .era-nav { display:flex; flex-wrap:wrap; justify-content:center; gap:0.5rem; margin-bottom:2.5rem; padding:0.8rem 0; border-bottom:1px solid #eee; }
  .era-btn {
    padding:0.55rem 1.3rem; border:2px solid #ddd; border-radius:2rem; background:#fff; color:#444;
    font-size:0.85rem; font-weight:600; cursor:pointer; transition:all 0.25s ease; display:flex; align-items:center; gap:0.4rem;
  }
  .era-btn:hover { border-color:#ff6b35; color:#ff6b35; transform:translateY(-1px); box-shadow:0 4px 12px rgba(255,107,53,0.15); }
  .era-btn.active { border-color:#ff6b35; background:#ff6b35; color:#fff; box-shadow:0 4px 12px rgba(255,107,53,0.3); }
  .era-btn .icon { font-size:1.1rem; }

  /* ===== SECTIONS ===== */
  .era-section { display:none; }
  .era-section.active { display:block; animation:slideUp 0.5s ease; }
  @keyframes slideUp { from{opacity:0;transform:translateY(20px)} to{opacity:1;transform:translateY(0)} }

  /* ===== ERA HEADER ===== */
  .era-hdr { text-align:center; margin-bottom:2rem; }
  .era-hdr h2 { font-family:'Playfair Display',serif; font-size:2.2rem; font-weight:800; margin:0 0 0.3rem; }
  .era-hdr .era-range { font-size:1rem; font-weight:700; color:#ff6b35; margin-bottom:0.5rem; display:inline-block; padding:0.2rem 1rem; background:#fff5f0; border-radius:2rem; }
  .era-hdr p { color:#555; font-size:1rem; max-width:750px; margin:0.5rem auto 0; line-height:1.7; }

  /* ===== CHART CONTAINER ===== */
  .chart-box {
    background:linear-gradient(135deg,#fafbfc,#f0f2f5); border:1px solid #e0e0e0;
    border-radius:16px; padding:2rem 1.5rem; margin-bottom:2rem; overflow-x:auto;
    box-shadow:0 2px 20px rgba(0,0,0,0.04);
  }
  .chart-box .mermaid { display:flex; justify-content:center; }
  .chart-box .mermaid svg { max-width:100%; height:auto; }

  /* Make mermaid nodes clickable */
  .chart-box .mermaid .node { cursor:pointer; transition:filter 0.2s; }
  .chart-box .mermaid .node:hover { filter:brightness(1.1) drop-shadow(0 2px 8px rgba(0,0,0,0.15)); }

  /* ===== VERTICAL TIMELINE ===== */
  .vtl { position:relative; padding:1rem 0 2rem; }
  .vtl::before { content:''; position:absolute; left:50%; top:0; bottom:0; width:3px; background:linear-gradient(to bottom,#ff9933,#fff,#138808); transform:translateX(-50%); border-radius:3px; }
  .vtl-item { position:relative; width:50%; padding:0 2.5rem 2rem; }
  .vtl-item:nth-child(odd) { left:0; text-align:right; padding-right:3rem; }
  .vtl-item:nth-child(even) { left:50%; padding-left:3rem; }
  .vtl-item::before {
    content:''; position:absolute; top:1.2rem; width:16px; height:16px;
    background:#ff6b35; border:3px solid #fff; border-radius:50%; z-index:2;
    box-shadow:0 0 0 3px #ff6b35;
    animation:pulse 2s ease-in-out infinite;
  }
  .vtl-item:nth-child(odd)::before { right:-8px; }
  .vtl-item:nth-child(even)::before { left:-8px; }
  @keyframes pulse { 0%,100%{box-shadow:0 0 0 3px #ff6b35} 50%{box-shadow:0 0 0 6px rgba(255,107,53,0.3)} }

  /* Timeline card */
  .vtl-card {
    background:#fff; border-radius:14px; padding:1.2rem; border:1px solid #e8e8e8;
    box-shadow:0 4px 15px rgba(0,0,0,0.05); transition:all 0.3s ease; cursor:pointer; position:relative; overflow:hidden;
  }
  .vtl-card:hover { transform:translateY(-3px); box-shadow:0 8px 30px rgba(0,0,0,0.1); }
  .vtl-card .card-img { width:100%; height:160px; object-fit:cover; border-radius:10px; margin-bottom:0.8rem; }
  .vtl-card .yr-badge { display:inline-block; padding:0.2rem 0.7rem; border-radius:2rem; font-size:0.75rem; font-weight:700; color:#fff; margin-bottom:0.4rem; }
  .vtl-card h4 { font-size:1.05rem; font-weight:700; color:#16213e; margin:0.2rem 0 0.4rem; line-height:1.3; }
  .vtl-card p { font-size:0.88rem; color:#555; line-height:1.6; margin:0; }
  .vtl-card .figures { display:flex; flex-wrap:wrap; gap:0.3rem; margin-top:0.5rem; }
  .vtl-card .figure-tag { font-size:0.72rem; padding:0.15rem 0.5rem; background:#f0f0f0; border-radius:1rem; color:#555; font-weight:500; }
  .vtl-card .click-hint { position:absolute; bottom:0.5rem; right:0.7rem; font-size:0.7rem; color:#aaa; }

  /* Era color variants */
  .era-mughal .yr-badge { background:linear-gradient(135deg,#5D4037,#8D6E63); }
  .era-mughal .vtl-item::before { background:#5D4037; box-shadow:0 0 0 3px #5D4037; }
  .era-colonial .yr-badge { background:linear-gradient(135deg,#8B6914,#D4A843); }
  .era-colonial .vtl-item::before { background:#8B6914; box-shadow:0 0 0 3px #8B6914; }
  .era-revolt .yr-badge { background:linear-gradient(135deg,#c0392b,#e74c3c); }
  .era-revolt .vtl-item::before { background:#c0392b; box-shadow:0 0 0 3px #c0392b; }
  .era-awakening .yr-badge { background:linear-gradient(135deg,#e67e22,#f39c12); }
  .era-awakening .vtl-item::before { background:#e67e22; box-shadow:0 0 0 3px #e67e22; }
  .era-gandhi .yr-badge { background:linear-gradient(135deg,#1e8449,#27ae60); }
  .era-gandhi .vtl-item::before { background:#1e8449; box-shadow:0 0 0 3px #1e8449; }
  .era-freedom .yr-badge { background:linear-gradient(135deg,#1565c0,#42a5f5); }
  .era-freedom .vtl-item::before { background:#1565c0; box-shadow:0 0 0 3px #1565c0; }
  .era-republic .yr-badge { background:linear-gradient(135deg,#6a1b9a,#ab47bc); }
  .era-republic .vtl-item::before { background:#6a1b9a; box-shadow:0 0 0 3px #6a1b9a; }

  /* ===== OVERVIEW TIMELINE ===== */
  .overview-section-title { text-align:center; font-family:'Playfair Display',serif; font-size:1.5rem; font-weight:800; margin:2.5rem 0 0.5rem; color:#16213e; }
  .overview-section-subtitle { text-align:center; font-size:0.9rem; color:#777; margin-bottom:1.5rem; }

  /* Overview reuses .vtl but adds era banners + fork dots on spine */
  .overview-vtl .vtl-item::before { background:#ff6b35; box-shadow:0 0 0 3px #ff6b35; }
  .overview-vtl .era-label { display:inline-block; font-size:0.65rem; font-weight:700; text-transform:uppercase; letter-spacing:0.5px; padding:0.15rem 0.5rem; border-radius:0.8rem; margin-bottom:0.3rem; color:#fff; }

  /* Era banner — sits on the center spine */
  .ovw-era-banner { position:relative; z-index:3; text-align:center; margin:1.5rem 0 0.5rem; clear:both; }
  .ovw-era-banner .era-tag {
    display:inline-block; padding:0.4rem 1.4rem; border-radius:2rem; color:#fff;
    font-size:0.82rem; font-weight:700; letter-spacing:0.5px;
    box-shadow:0 3px 12px rgba(0,0,0,0.15); position:relative; z-index:3;
  }
  .ovw-era-banner .era-years { display:block; font-size:0.7rem; color:#888; margin-top:0.2rem; }

  /* Fork indicator — pulsing dot on spine */
  .ovw-fork { position:relative; z-index:3; text-align:center; margin:0.3rem 0; }
  .ovw-fork .fork-dot {
    display:inline-block; width:24px; height:24px; border-radius:50%;
    background:linear-gradient(135deg,#ff6b35,#ff9933); border:3px solid #fff;
    box-shadow:0 0 0 3px #ff6b35, 0 4px 12px rgba(255,107,53,0.3);
    position:relative; z-index:3; animation:pulse 2s ease-in-out infinite;
  }
  .ovw-fork .fork-label {
    display:block; font-size:0.65rem; color:#999; margin-top:0.15rem;
    text-transform:uppercase; letter-spacing:0.5px; font-weight:600;
  }

  /* Badge colors for overview cards */
  .overview-vtl .yr-badge.badge-mughal { background:linear-gradient(135deg,#5D4037,#8D6E63); }
  .overview-vtl .yr-badge.badge-colonial { background:linear-gradient(135deg,#8B6914,#D4A843); }
  .overview-vtl .yr-badge.badge-revolt { background:linear-gradient(135deg,#c0392b,#e74c3c); }
  .overview-vtl .yr-badge.badge-awakening { background:linear-gradient(135deg,#e67e22,#f39c12); }
  .overview-vtl .yr-badge.badge-gandhi { background:linear-gradient(135deg,#1e8449,#27ae60); }
  .overview-vtl .yr-badge.badge-freedom { background:linear-gradient(135deg,#1565c0,#42a5f5); }
  .overview-vtl .yr-badge.badge-republic { background:linear-gradient(135deg,#6a1b9a,#ab47bc); }
  .overview-vtl .yr-badge.badge-crisis { background:linear-gradient(135deg,#e53935,#ef5350); }

  /* ===== KEY FIGURES GALLERY ===== */
  .figures-gallery { display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:1rem; margin:1.5rem 0 2.5rem; }
  .figure-card { text-align:center; padding:1rem 0.5rem; background:#fff; border-radius:12px; border:1px solid #eee; transition:all 0.3s; }
  .figure-card:hover { transform:translateY(-3px); box-shadow:0 8px 20px rgba(0,0,0,0.08); }
  .figure-card img { width:80px; height:80px; border-radius:50%; object-fit:cover; border:3px solid #ff6b35; margin-bottom:0.5rem; }
  .figure-card .fig-name { font-size:0.82rem; font-weight:700; color:#16213e; }
  .figure-card .fig-role { font-size:0.72rem; color:#888; margin-top:0.1rem; }

  /* ===== SCROLL ANIMATIONS ===== */
  .anim-in { opacity:0; transform:translateY(30px); transition:all 0.6s ease; }
  .anim-in.visible { opacity:1; transform:translateY(0); }

  /* Staggered entrance for timeline items */
  .vtl-item:nth-child(1) .vtl-card { transition-delay:0s; }
  .vtl-item:nth-child(2) .vtl-card { transition-delay:0.1s; }
  .vtl-item:nth-child(3) .vtl-card { transition-delay:0.2s; }
  .vtl-item:nth-child(4) .vtl-card { transition-delay:0.3s; }
  .vtl-item:nth-child(5) .vtl-card { transition-delay:0.4s; }
  .vtl-item:nth-child(6) .vtl-card { transition-delay:0.5s; }
  .vtl-item:nth-child(7) .vtl-card { transition-delay:0.6s; }
  .vtl-item:nth-child(8) .vtl-card { transition-delay:0.7s; }
  .vtl-item:nth-child(9) .vtl-card { transition-delay:0.8s; }
  .vtl-item:nth-child(10) .vtl-card { transition-delay:0.9s; }

  /* ===== HERO PARTICLES ===== */
  .tl-hero .particle {
    position:absolute; border-radius:50%; opacity:0; pointer-events:none;
    animation:floatParticle 6s ease-in-out infinite;
  }
  @keyframes floatParticle {
    0% { opacity:0; transform:translateY(0) scale(0); }
    20% { opacity:0.6; }
    80% { opacity:0.3; }
    100% { opacity:0; transform:translateY(-120px) scale(1.5); }
  }
  .tl-hero .particle:nth-child(1) { width:6px;height:6px;background:#ff9933;left:10%;bottom:20%;animation-delay:0s; }
  .tl-hero .particle:nth-child(2) { width:4px;height:4px;background:#fff;left:25%;bottom:10%;animation-delay:1s; }
  .tl-hero .particle:nth-child(3) { width:8px;height:8px;background:#138808;left:40%;bottom:30%;animation-delay:2s; }
  .tl-hero .particle:nth-child(4) { width:5px;height:5px;background:#ff9933;left:60%;bottom:15%;animation-delay:3s; }
  .tl-hero .particle:nth-child(5) { width:7px;height:7px;background:#fff;left:75%;bottom:25%;animation-delay:4s; }
  .tl-hero .particle:nth-child(6) { width:4px;height:4px;background:#138808;left:88%;bottom:18%;animation-delay:5s; }

  /* ===== SHIMMER BADGE ===== */
  .vtl-card .yr-badge {
    position:relative; overflow:hidden;
  }
  .vtl-card .yr-badge::after {
    content:''; position:absolute; top:0; left:-100%; width:50%; height:100%;
    background:linear-gradient(90deg,transparent,rgba(255,255,255,0.3),transparent);
    animation:shimmer 3s ease-in-out infinite;
  }
  @keyframes shimmer { 0%{left:-100%} 50%{left:150%} 100%{left:150%} }

  /* ===== ANIMATED EVENT SCENE ===== */
  .evt-scene {
    position:relative; width:100%; height:180px; border-radius:12px; overflow:hidden;
    margin-bottom:0.8rem; background:linear-gradient(135deg,#1a1a2e,#16213e);
  }
  .evt-scene .scene-title {
    position:absolute; bottom:0; left:0; right:0; padding:0.8rem;
    background:linear-gradient(transparent,rgba(0,0,0,0.8));
    color:#fff; font-size:0.85rem; font-weight:600; z-index:3;
  }

  /* Battle scene */
  .scene-battle { background:linear-gradient(135deg,#2c1810,#4a2c2a,#1a0f0a); }
  .scene-battle .cannon {
    position:absolute; bottom:30px; width:60px; height:25px; background:#555; border-radius:5px;
    animation:cannonRecoil 2s ease-in-out infinite;
  }
  .scene-battle .cannon::after {
    content:''; position:absolute; right:-15px; top:5px; width:20px; height:15px;
    background:#666; border-radius:0 8px 8px 0;
  }
  .scene-battle .cannon.left { left:15%; }
  .scene-battle .cannon.right { right:15%; transform:scaleX(-1); }
  @keyframes cannonRecoil { 0%,100%{transform:translateX(0)} 50%{transform:translateX(-5px)} }
  .scene-battle .smoke {
    position:absolute; border-radius:50%; background:rgba(200,200,200,0.4);
    animation:smokeRise 3s ease-out infinite;
  }
  @keyframes smokeRise { 0%{opacity:0.8;transform:scale(0.3) translateY(0)} 100%{opacity:0;transform:scale(2) translateY(-80px)} }

  /* March scene */
  .scene-march { background:linear-gradient(135deg,#f5e6ca,#d4a574,#c4956a); }
  .scene-march .marcher {
    position:absolute; bottom:20px; width:12px; height:30px; background:#333;
    border-radius:6px 6px 2px 2px; animation:march 4s linear infinite;
  }
  .scene-march .marcher::before {
    content:''; position:absolute; top:-8px; left:1px; width:10px; height:10px;
    background:#555; border-radius:50%;
  }
  @keyframes march { 0%{transform:translateX(-50px)} 100%{transform:translateX(calc(100vw + 50px))} }

  /* Flag scene */
  .scene-flag { background:linear-gradient(135deg,#0a1628,#1a2a4a,#0f1f3a); }
  .scene-flag .flag-pole {
    position:absolute; left:50%; bottom:20px; width:4px; height:100px; background:#ccc;
    transform:translateX(-50%);
  }
  .scene-flag .flag-cloth {
    position:absolute; left:calc(50% + 2px); bottom:90px; width:60px; height:40px;
    background:linear-gradient(to bottom,#ff9933 33%,#fff 33%,#fff 66%,#138808 66%);
    animation:flagWave 2s ease-in-out infinite; transform-origin:left center;
    border-radius:0 2px 2px 0;
  }
  @keyframes flagWave { 0%,100%{transform:skewY(0deg) scaleX(1)} 25%{transform:skewY(2deg) scaleX(0.95)} 75%{transform:skewY(-2deg) scaleX(1.02)} }
  .scene-flag .star-burst {
    position:absolute; width:4px; height:4px; background:#ffd700; border-radius:50%;
    animation:starBurst 2s ease-in-out infinite;
  }
  @keyframes starBurst { 0%,100%{opacity:0.3;transform:scale(1)} 50%{opacity:1;transform:scale(2)} }

  /* Fire scene */
  .scene-fire { background:linear-gradient(135deg,#1a0000,#330000,#1a0000); }
  .scene-fire .flame {
    position:absolute; bottom:10px; border-radius:50% 50% 50% 50% / 60% 60% 40% 40%;
    animation:flicker 0.8s ease-in-out infinite alternate;
  }
  @keyframes flicker {
    0%{transform:scaleY(1) scaleX(1) translateY(0);opacity:0.9}
    100%{transform:scaleY(1.2) scaleX(0.8) translateY(-5px);opacity:1}
  }

  /* Scroll scene */
  .scene-scroll { background:linear-gradient(135deg,#f5f0e8,#e8ddd0,#d4c4a8); }
  .scene-scroll .quill {
    position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
    font-size:3rem; animation:quillWrite 3s ease-in-out infinite;
  }
  @keyframes quillWrite { 0%,100%{transform:translate(-50%,-50%) rotate(-5deg)} 50%{transform:translate(-30%,-50%) rotate(5deg)} }
  .scene-scroll .ink-line {
    position:absolute; top:55%; left:30%; width:0; height:2px; background:#333;
    animation:inkDraw 3s ease-in-out infinite;
  }
  @keyframes inkDraw { 0%{width:0} 50%{width:40%} 100%{width:40%;opacity:0} }

  /* ===== QUOTE BLOCK ===== */
  .evt-quote {
    position:relative; margin:1rem 0; padding:1rem 1.2rem 1rem 2.5rem;
    background:linear-gradient(135deg,#fff8f0,#fff3e6); border-left:4px solid #ff6b35;
    border-radius:0 10px 10px 0; font-style:italic; color:#444; font-size:0.9rem; line-height:1.7;
  }
  .evt-quote::before {
    content:'\201C'; position:absolute; left:0.5rem; top:0; font-size:2.5rem;
    font-family:'Playfair Display',serif; color:#ff6b35; opacity:0.5; line-height:1;
  }
  .evt-quote .quote-attr { display:block; margin-top:0.3rem; font-style:normal; font-weight:700; font-size:0.8rem; color:#888; }

  /* ===== IMPACT STATS BAR ===== */
  .impact-stats {
    display:flex; gap:0.8rem; flex-wrap:wrap; margin:0.8rem 0;
  }
  .impact-stat {
    flex:1; min-width:100px; text-align:center; padding:0.6rem 0.4rem;
    background:linear-gradient(135deg,#f8f9fa,#e9ecef); border-radius:10px;
    border:1px solid #dee2e6;
  }
  .impact-stat .imp-num { display:block; font-size:1.1rem; font-weight:800; color:#ff6b35; }
  .impact-stat .imp-label { font-size:0.65rem; color:#888; text-transform:uppercase; letter-spacing:0.5px; }

  /* ===== GOVERNANCE INFO BLOCK ===== */
  .gov-info {
    margin:0.8rem 0; padding:0.8rem 1rem; border-radius:10px;
    background:linear-gradient(135deg,#f0f4ff,#e8eeff); border:1px solid #c5d5f5;
    font-size:0.82rem; line-height:1.7; color:#333;
  }
  .gov-info .gov-title {
    font-weight:700; font-size:0.72rem; text-transform:uppercase; letter-spacing:0.8px;
    color:#1565c0; margin-bottom:0.3rem; display:flex; align-items:center; gap:0.3rem;
  }
  .gov-info .gov-row {
    display:flex; flex-wrap:wrap; gap:0.2rem 0.8rem; margin:0.15rem 0;
  }
  .gov-info .gov-label { font-weight:600; color:#555; min-width:90px; }
  .gov-info .gov-val { color:#222; }
  .gov-info .gov-arrow { color:#1565c0; font-weight:700; margin:0 0.2rem; }

  /* Parallel events block */
  .parallel-events {
    margin:0.6rem 0; padding:0.6rem 0.8rem; border-radius:8px;
    background:linear-gradient(135deg,#fef9e7,#fef3cd); border:1px solid #f0d78c;
    font-size:0.78rem; line-height:1.6; color:#5a4e2c;
  }
  .parallel-events .par-title {
    font-weight:700; font-size:0.7rem; text-transform:uppercase; letter-spacing:0.8px;
    color:#b7950b; margin-bottom:0.2rem;
  }
  .parallel-events ul { margin:0; padding-left:1.2rem; }
  .parallel-events li { margin:0.1rem 0; }

  /* ===== TIMELINE CONNECTOR GLOW ===== */
  .vtl::before {
    box-shadow:0 0 15px rgba(255,153,51,0.15), 0 0 30px rgba(19,136,8,0.1);
  }

  /* ===== CARD IMAGE OVERLAY ===== */
  .vtl-card .card-img-wrap {
    position:relative; width:100%; height:160px; border-radius:10px; overflow:hidden; margin-bottom:0.8rem;
  }
  .vtl-card .card-img-wrap img { width:100%; height:100%; object-fit:cover; transition:transform 0.5s ease; }
  .vtl-card:hover .card-img-wrap img { transform:scale(1.05); }
  .vtl-card .card-img-wrap .img-overlay {
    position:absolute; inset:0; background:linear-gradient(transparent 50%,rgba(0,0,0,0.6));
    opacity:0; transition:opacity 0.3s; pointer-events:none;
  }
  .vtl-card:hover .card-img-wrap .img-overlay { opacity:1; }


  /* ===== RESPONSIVE ===== */
  @media(max-width:768px) {
    .vtl::before { left:20px; }
    .vtl-item { width:100% !important; left:0 !important; padding:0 0 1.5rem 3rem !important; text-align:left !important; }
    .vtl-item::before { left:12px !important; right:auto !important; }
    .era-hdr h2 { font-size:1.5rem; }
    .figures-gallery { grid-template-columns:repeat(auto-fill,minmax(110px,1fr)); }
  }