/* Timeline Component - EXACT implementation from timeline.md */

/* Base utility classes */
.w-full { width: 100%; }
.bg-white { background-color: white; }
.dark-bg-neutral-950 { background-color: #0a0a0a; }
.font-sans { font-family: ui-sans-serif, system-ui, sans-serif; }
.md-px-10 { padding-left: 2.5rem; padding-right: 2.5rem; }
.max-w-7xl { max-width: 80rem; }
.mx-auto { margin-left: auto; margin-right: auto; }
.py-20 { padding-top: 5rem; padding-bottom: 5rem; }
.px-4 { padding-left: 1rem; padding-right: 1rem; }
.md-px-8 { padding-left: 2rem; padding-right: 2rem; }
.lg-px-10 { padding-left: 2.5rem; padding-right: 2.5rem; }

/* Typography */
.text-lg { font-size: 1.125rem; line-height: 1.75rem; }
.md-text-4xl { font-size: 2.25rem; line-height: 2.5rem; }
.mb-4 { margin-bottom: 1rem; }
.text-black { color: #000; }
.dark-text-white { color: #fff; }
.max-w-4xl { max-width: 56rem; }
.text-neutral-700 { color: #404040; }
.dark-text-neutral-300 { color: #d4d4d4; }
.text-sm { font-size: 0.875rem; line-height: 1.25rem; }
.md-text-base { font-size: 1rem; line-height: 1.5rem; }
.max-w-sm { max-width: 24rem; }

/* Layout classes */
.relative { position: relative; }
.pb-20 { padding-bottom: 5rem; }
.flex { display: flex; }
.justify-start { justify-content: flex-start; }
.pt-10 { padding-top: 2.5rem; }
.md-pt-40 { padding-top: 10rem; }
.md-gap-10 { gap: 2.5rem; }

/* Sticky positioning for year labels */
.sticky { position: sticky; }
.flex-col { flex-direction: column; }
.md-flex-row { flex-direction: row; }
.z-40 { z-index: 40; }
.items-center { align-items: center; }
.top-40 { top: 10rem; }
.self-start { align-self: flex-start; }
.max-w-xs { max-width: 20rem; }
.lg-max-w-sm { max-width: 24rem; }
.md-w-full { width: 100%; }

/* Timeline dots */
.h-10 { height: 2.5rem; }
.absolute { position: absolute; }
.left-3 { left: 0.75rem; }
.md-left-3 { left: 0.75rem; }
.w-10 { width: 2.5rem; }
.rounded-full { border-radius: 9999px; }
.bg-white { background-color: white; }
.dark-bg-black { background-color: black; }
.justify-center { justify-content: center; }

.h-4 { height: 1rem; }
.w-4 { width: 1rem; }
.bg-neutral-200 { background-color: #e5e5e5; }
.dark-bg-neutral-800 { background-color: #262626; }
.border { border-width: 1px; }
.border-neutral-300 { border-color: #d4d4d4; }
.dark-border-neutral-700 { border-color: #404040; }

/* Year labels */
.hidden { display: none; }
.md-block { display: block; }
.text-xl { font-size: 1.25rem; line-height: 1.75rem; }
.md-pl-20 { padding-left: 5rem; }
.md-text-5xl { font-size: 3rem; line-height: 1; }
.font-bold { font-weight: 700; }
.text-neutral-500 { color: #737373; }
.dark-text-neutral-500 { color: #737373; }

/* Content area */
.pl-20 { padding-left: 5rem; }
.pr-4 { padding-right: 1rem; }
.md-pl-4 { padding-left: 1rem; }

.md-hidden { display: none; }
.text-2xl { font-size: 1.5rem; line-height: 2rem; }
.text-left { text-align: left; }

/* Timeline content */
.text-neutral-800 { color: #262626; }
.dark-text-neutral-200 { color: #e5e5e5; }
.text-xs { font-size: 0.75rem; line-height: 1rem; }
.md-text-sm { font-size: 0.875rem; line-height: 1.25rem; }
.font-normal { font-weight: 400; }
.mb-8 { margin-bottom: 2rem; }

/* Grid layout for images */
.grid { display: grid; }
.grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.gap-4 { gap: 1rem; }
.rounded-lg { border-radius: 0.5rem; }
.object-cover { object-fit: cover; }
.h-20 { height: 5rem; }
.md-h-44 { height: 11rem; }
.lg-h-60 { height: 15rem; }

/* Timeline shadow effect */
.timeline-shadow {
    box-shadow: 0 10px 25px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    transition: all 0.3s ease;
}

.timeline-shadow:hover {
    transform: translateY(-2px);
    box-shadow: 0 20px 40px -4px rgba(0, 0, 0, 0.15), 0 8px 16px -4px rgba(0, 0, 0, 0.1);
}

/* Animated progress line - EXACT from spec */
.timeline-line {
    position: absolute;
    left: 2rem;
    top: 0;
    overflow: hidden;
    width: 2px;
    background: linear-gradient(to bottom, transparent 0%, #e5e5e5 10%, #e5e5e5 90%, transparent 100%);
    mask-image: linear-gradient(to bottom, transparent 0%, black 10%, black 90%, transparent 100%);
    height: 100%;
}

.timeline-progress {
    position: absolute;
    left: 0;
    top: 0;
    width: 2px;
    background: linear-gradient(to top, #a855f7 0%, #3b82f6 10%, transparent 100%);
    border-radius: 9999px;
    height: 0%;
    transition: height 0.3s ease;
}

/* Responsive design */
@media (min-width: 768px) {
    .md-px-10 { padding-left: 2.5rem; padding-right: 2.5rem; }
    .md-text-4xl { font-size: 2.25rem; line-height: 2.5rem; }
    .md-text-base { font-size: 1rem; line-height: 1.5rem; }
    .md-pt-40 { padding-top: 10rem; }
    .md-gap-10 { gap: 2.5rem; }
    .md-flex-row { flex-direction: row; }
    .md-w-full { width: 100%; }
    .md-left-3 { left: 0.75rem; }
    .md-block { display: block; }
    .md-pl-20 { padding-left: 5rem; }
    .md-text-5xl { font-size: 3rem; line-height: 1; }
    .md-pl-4 { padding-left: 1rem; }
    .md-hidden { display: none; }
    .md-text-sm { font-size: 0.875rem; line-height: 1.25rem; }
    .md-h-44 { height: 11rem; }
}

@media (min-width: 1024px) {
    .lg-px-10 { padding-left: 2.5rem; padding-right: 2.5rem; }
    .lg-max-w-sm { max-width: 24rem; }
    .lg-h-60 { height: 15rem; }
}

/* Mobile responsive */
@media (max-width: 767px) {
    .md-hidden { display: block; }
    .hidden { display: none; }
    .md-block { display: none; }
}

/* Timeline Images - EXACT from spec */
.timeline-image {
    box-shadow: 0 0 24px rgba(34, 42, 53, 0.06),
                0 1px 1px rgba(0, 0, 0, 0.05),
                0 0 0 1px rgba(34, 42, 53, 0.04),
                0 0 4px rgba(34, 42, 53, 0.08),
                0 16px 68px rgba(47, 48, 55, 0.05),
                0 1px 0 rgba(255, 255, 255, 0.1) inset;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.timeline-image:hover {
    transform: scale(1.02);
    box-shadow: 0 0 32px rgba(34, 42, 53, 0.12),
                0 2px 2px rgba(0, 0, 0, 0.1),
                0 0 0 1px rgba(34, 42, 53, 0.08),
                0 0 8px rgba(34, 42, 53, 0.16),
                0 24px 88px rgba(47, 48, 55, 0.1),
                0 1px 0 rgba(255, 255, 255, 0.1) inset;
}

.grid {
    display: grid;
}

.grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.gap-4 {
    gap: 1rem;
}

.min-h-screen {
    min-height: 100vh;
}