* { margin: 0; padding: 0; box-sizing: border-box; }

body { background-color: #000; color: #fff; font-family: 'Georgia', serif; scroll-behavior: smooth; }

#intro-screen { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: #000; display: flex; flex-direction: column; align-items: center; justify-content: center; z-index: 999; }

#intro-screen h1 { font-size: 2rem; letter-spacing: 0.2rem; margin-bottom: 1rem; text-align: center; padding: 0 40px; color: #fff; }

#intro-screen p { font-size: 1rem; margin-bottom: 40px; color: #aaa; text-align: center; padding: 0 40px; }

#start-button { padding: 14px 36px; font-size: 1rem; background: transparent; border: 1px solid #fff; color: #fff; font-family: 'Georgia', serif; letter-spacing: 0.2rem; cursor: pointer; transition: all 0.3s ease; }

#start-button:hover { background: #fff; color: #000; }

.chapter { min-height: 100vh; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; padding: 60px 80px; text-align: left; position: relative; opacity: 0; transform: translateY(40px); transition: opacity 1s ease, transform 1s ease; }

.chapter.visible { opacity: 1; transform: translateY(0); }

.chapter::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.6); z-index: 0; pointer-events: none; }

.chapter::after { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.08'/%3E%3C/svg%3E"); opacity: 0.15; z-index: 0; pointer-events: none; }

.chapter h1 { position: relative; z-index: 1; font-size: 0.85rem; letter-spacing: 0.4rem; color: #aaa; margin-bottom: 1rem; }

.chapter h2 { position: relative; z-index: 1; font-size: 2.5rem; color: #fff; margin-bottom: 1.5rem; }

.chapter p { position: relative; z-index: 1; font-size: 1.1rem; max-width: 600px; line-height: 1.8; color: #ddd; margin-bottom: 1rem; }

.chapter-title { position: relative; z-index: 1; font-size: 3rem; color: #fff; text-shadow: 0 0 20px rgba(255,255,255,0.8), 0 0 40px rgba(200,150,255,0.6); letter-spacing: 0.3rem; }

#singularity-1 { background-image: url('STScI-01JQCE78E6DK196HZYF5KCVEYT.jpg'); background-size: cover; background-position: center; }

#singularity { background-image: url('Big Bang galaxies.gif'); background-size: cover; background-position: center; }

#Expansion { background-image: url('images/expansion.jpg'); background-size: cover; background-position: center; }

#Darkness { background-image: url('images/darkness.jpg'); background-size: cover; background-position: center; }

#Stars { background-image: url('m31.jpg'); background-size: cover; background-position: center; }

#Recombination { background-image: url('STScI-01HTFZ25Q530VPXWR5KAZCKYEH.jpg'); background-size: cover; background-position: center; }

#Galaxies { background-image: url('GSFC_20171208_Archive_e001915~orig.jpg'); background-size: cover; background-position: center; }

#today { background-image: url('5de4bdd4d3a313dfd821f8a13d19681d.jpg'); background-size: cover; background-position: center; }


#progress-bar { position: fixed; top: 0; left: 0; height: 4px; background-color: #fff; width: 0%; z-index: 1000; transition: width 0.1s ease; }

footer { background-color: #000; color: #aaa; text-align: center; padding: 40px 20px; font-size: 0.9rem; line-height: 2; }

footer a { color: #fff; text-decoration: none; }

footer a:hover { text-decoration: underline; }

@keyframes fadeIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }

.chapter-video { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }