:root {
--jade: #006a4e;
--jade-dark: #004d38;
--jade-light: #1e9e78;
--cream: #f3f0e6;
--paper: #fdfdf9;
--ink: #1d1f24;
--accent-gold: #c1a059;
--font-serif: 'Baskerville', serif;
--font-sans: 'Segoe UI', sans-serif;

--millennium-color: #111;
--century-color: #333;
--decade-color: #888;
--tick-width-millennium: 3px;
--tick-width-century: 2px;
--tick-width-decade: 1px;
--entry-icon-size: 32px;
--entry-line-height: 4px;
}

body {
margin: 0;
background-color: var(--cream);
font-family: var(--font-serif);
color: var(--ink);
line-height: 1.6;
overflow-x: hidden;
}

/* Timeline Section */
#timeline-section {
position: relative;
width: 100vw;
height: 80vh;
background-color: var(--paper);
border-top: 100px solid var(--jade);
border-bottom: 4px solid var(--jade-dark);
overflow: hidden;
cursor: grab;
touch-action: pan-x;
}
#timeline-section:active {
cursor: grabbing;
}

/* Canvas */
#timeline-canvas {
position: absolute;
top: 0;
left: 0;
z-index: 2;
height: 100%;
width: 100%;
}

/* Timeline Inner (for dragging) */
#timeline-inner {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
will-change: transform;
transition: transform 0.1s ease-out;
}

/* Labels */
.year-label {
position: absolute;
top: 85px;
left: 0;
z-index: 2;
white-space: nowrap;
pointer-events: none;
font-size: 0.85rem;
transform: translateX(-50%);
color: var(--ink);
font-family: var(--font-serif);
background-color: rgba(255, 255, 255, 0.8);
padding: 0.1rem 0.3rem;
border-radius: 3px;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
transition: opacity 0.3s ease, transform 0.3s ease;
}

/* Banner */
#banner-container {
position: absolute;
top: 1px;
left: 0;
width: 100%;
height: 150px;
z-index: 0;
pointer-events: none;
overflow: visible;
}
#banner {
position: absolute;
top: 0;
left: 0;
height: 250px;
transform-origin: center center;
transform: translateX(0) scale(1);
transition: transform 0.2s ease;
image-rendering: auto;
pointer-events: none;
}

/* Entries */
#entries-container {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 4;
}

.entry-line {
position: absolute;
height: var(--entry-line-height);
background-color: var(--jade-dark);
border-radius: 2px;
bottom: 40px;
left: 0;
}

.entry-icon {
position: absolute;
bottom: 44px;
width: var(--entry-icon-size);
height: var(--entry-icon-size);
border-radius: 50%;
background-color: white;
border: 2px solid var(--jade);
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
transform: translateX(-50%);
pointer-events: auto;
transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.entry-icon:hover {
transform: translateX(-50%) scale(1.1);
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.25);
}

/* Fades */
.timeline-fade {
position: absolute;
top: 0;
width: 100px;
height: 100%;
z-index: 5;
pointer-events: none;
}
#fade-left {
left: 0;
background: linear-gradient(to right, var(--cream), transparent);
}
#fade-right {
right: 0;
background: linear-gradient(to left, var(--cream), transparent);
}

/* Tick Styles */
.tick-millennium {
background-color: var(--millennium-color);
width: var(--tick-width-millennium);
height: 70px;
top: 10px;
}
.tick-century {
background-color: var(--century-color);
width: var(--tick-width-century);
height: 60px;
top: 15px;
}
.tick-decade {
background-color: var(--decade-color);
width: var(--tick-width-decade);
height: 40px;
top: 20px;
}

.tick-visible {
opacity: 1;
}
.tick-hidden {
opacity: 0;
}

/* Zoom Feedback */
#timeline-section::after {
content: '';
position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
pointer-events: none;
background-image: radial-gradient(ellipse at center, transparent 60%, rgba(0, 0, 0, 0.02));
z-index: 10;
}