@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;700&family=Noto+Sans+SC:wght@300;400;700&display=swap');

:root {
    --color-background: #050608;
    --color-text: #d1d5db;
    --color-heading: #f3f4f6;
    --color-accent-orange: #f97316;
    --color-accent-blue: #38bdf8;
    --color-accent-cyan: #22d3ee;
    --color-accent-purple: #a78bfa;
    --font-serif: 'Noto Serif SC', serif;
    --font-sans: 'Noto Sans SC', sans-serif;
}

body {
    background-color: var(--color-background);
    color: var(--color-text);
    font-family: var(--font-sans);
}

#main-header {
    background-color: rgba(5, 6, 8, 0.7);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.page-section {
    opacity: 0;
    transition: opacity 0.8s ease-in-out;
    will-change: opacity;
}

.page-section:not(.hidden) {
    opacity: 1;
}

.title-glow {
    text-shadow: 0 0 8px rgba(255, 255, 255, 0.3), 0 0 20px var(--color-accent-orange), 0 0 40px var(--color-accent-orange);
}

.subtitle-glow {
    text-shadow: 0 0 5px rgba(255, 255, 255, 0.2);
}

.nav-link.active {
    font-weight: bold;
    color: white;
    position: relative;
}

.nav-link.active::after {
    content: '';
    position: absolute;
    bottom: -8px;
    left: 50%;
    transform: translateX(-50%);
    width: 60%;
    height: 2px;
    background: linear-gradient(90deg, var(--color-accent-blue), var(--color-accent-cyan));
    border-radius: 2px;
}

.nav-link.active.active-purple::after {
     background: linear-gradient(90deg, var(--color-accent-purple), var(--color-accent-cyan));
}


.prose-custom {
    @apply prose prose-invert max-w-none;
    --tw-prose-body: theme('colors.gray.400');
    --tw-prose-headings: theme('colors.gray.100');
    --tw-prose-lead: theme('colors.gray.300');
    --tw-prose-links: theme('colors.white');
    --tw-prose-bold: theme('colors.white');
    --tw-prose-counters: theme('colors.gray.400');
    --tw-prose-bullets: theme('colors.gray.600');
    --tw-prose-hr: theme('colors.gray.800');
    --tw-prose-quotes: theme('colors.gray.200');
    --tw-prose-quote-borders: var(--color-accent-orange);
    --tw-prose-captions: theme('colors.gray.500');
    --tw-prose-code: theme('colors.white');
    --tw-prose-pre-code: theme('colors.gray.300');
    --tw-prose-pre-bg: rgba(0,0,0,0.2);
    --tw-prose-th-borders: theme('colors.gray.700');
    --tw-prose-td-borders: theme('colors.gray.800');
}

.prose-custom h1, .prose-custom h2, .prose-custom h3 {
    font-family: var(--font-serif);
    letter-spacing: 0.05em;
}

#act1 .prose-custom h1, #act1 .prose-custom h2, #act1 .prose-custom h3 { color: var(--color-accent-orange); }
#act2 .prose-custom h1, #act2 .prose-custom h2, #act2 .prose-custom h3 { color: var(--color-accent-blue); }
#act3 .prose-custom h1, #act3 .prose-custom h2, #act3 .prose-custom h3 { color: var(--color-accent-cyan); }
#deep-dive .prose-custom h1, #deep-dive .prose-custom h2, #deep-dive .prose-custom h3 { color: var(--color-accent-purple); }


.prose-custom table {
    @apply text-sm;
}
.prose-custom thead {
    border-bottom-color: var(--color-accent-blue);
}
.prose-custom thead th {
    color: var(--color-accent-blue);
}

/* Timeline Styles */
.timeline-item {
    opacity: 0;
    transform: translateX(-20px);
    transition: opacity 0.5s ease-out, transform 0.5s ease-out;
}
.timeline-item.visible {
    opacity: 1;
    transform: translateX(0);
}
.timeline-dot {
    transition: transform 0.3s ease;
}
.timeline-item:hover .timeline-dot {
    transform: scale(1.2);
}

/* Deep Dive Accordion */
.deep-dive-item summary::-webkit-details-marker {
  display: none;
}
.deep-dive-item .lucide-icon {
    transition: transform 0.3s ease-in-out;
}