Abekta

The Encyclopédie of CASSA

User Tools

Site Tools

You are here: root » Courses » AST 100: Our Cosmic History » 0.0. Seven Ages of the Universe
courses:ast100:0

Differences

This shows you the differences between two versions of the page.

Link to this comparison view

Both sides previous revisionPrevious revision
Next revision		Previous revision
courses:ast100:0 [2026/01/26 00:26] – old revision restored (2026/01/26 00:25) asadcourses:ast100:0 [2026/02/01 09:01] (current) – asad
Line 1: Line 1:
-====== Seven Ages of the Universe ======+====== 0.0. Seven Ages of the Universe ======
 Slides: https://drive.google.com/file/d/1DBFDq3OmjU5NfHvFGyoQhV7ZI_SJ2e-j/view Slides: https://drive.google.com/file/d/1DBFDq3OmjU5NfHvFGyoQhV7ZI_SJ2e-j/view
  
Line 11: Line 11:
  
 ===== - Timelines ===== ===== - Timelines =====
-<!DOCTYPE html> +<html> 
-<html lang="en"> +<div id="doku-cosmic-light"> 
-<head> +    <style scoped> 
-    <meta charset="UTF-8"> +        /* SCOPED CSS FOR DOKUWIKI  
-    <meta name="viewport" content="width=device-width, initial-scale=1.0"> +           Container ID: #doku-cosmic-light 
-    <title>Cosmic Evolution Timeline</title> +           Theme: Elegant Light 
-    <style> +        */
-        :root { +
-            --bg-color: #0b0d17; +
-            --card-bg: #15192b; +
-            --text-primary: #e0e6ed; +
-            --text-secondary: #94a3b8; +
-            --accent-particle: #f72585; /* Pink */ +
-            --accent-galactic: #7209b7; /* Purple */ +
-            --accent-stellar: #4361ee; /* Blue */ +
-            --accent-planetary: #4cc9f0; /* Light Blue */ +
-            --accent-chemical: #06d6a0; /* Teal */ +
-            --accent-biological: #ffd166; /* Yellow */ +
-            --accent-cultural: #ef476f; /* Red */ +
-        }+
  
-        * { +        #doku-cosmic-light { 
-            box-sizing: border-box; +            /* Elegant Light Theme Variables */ 
-            margin: 0; +            --bg-color: #ffffff; 
-            padding: 0; +            --panel-bg: #f8f9fa; 
-        } +            --text-primary: #2d3748; 
- +            --text-secondary: #718096; 
-        body { +            --accent-color: #4a5568; /* Slate gray for elegance */ 
-            font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;+            --border-color: #e2e8f0; 
 +            --hover-color: #edf2f7; 
 +            --line-color: #cbd5e0; 
 +             
 +            /* Typography & Layout */ 
 +            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
             background-color: var(--bg-color);             background-color: var(--bg-color);
             color: var(--text-primary);             color: var(--text-primary);
             line-height: 1.6;             line-height: 1.6;
-            padding-bottom: 50px;+            width: 100%; 
 +            display: block; 
 +            margin: 0; 
 +            padding: 10px 0;
         }         }
  
-        header { +        /* Enforce box-sizing */ 
-            text-align: center; +        #doku-cosmic-light * { 
-            padding: 60px 20px; +            box-sizing: border-box;
-            background: radial-gradient(circle at center, #1b2735 0%, #090a0f 100%); +
-            margin-bottom: 40px;+
         }         }
  
-        h1 { +        /* Accordion Section */ 
-            font-size: 2.5rem; +        #doku-cosmic-light .age-section { 
-            margin-bottom: 10px; +            border-bottom: 1px solid var(--border-color); 
-            letter-spacing: 2px; +            background-color: var(--bg-color); 
-            text-transform: uppercase;+            transition: background-color 0.2s ease;
         }         }
  
-        p.subtitle { +        #doku-cosmic-light .age-section:first-child { 
-            color: var(--text-secondary); +            border-top: 1px solid var(--border-color);
-            font-size: 1.1rem; +
-        } +
- +
-        .container { +
-            max-width: 900px; +
-            margin: 0 auto; +
-            padding: 0 20px; +
-        } +
- +
-        /* Age Section Styling */ +
-        .age-section { +
-            margin-bottom: 20px; +
-            border-radius: 8px; +
-            overflow: hidden; +
-            box-shadow: 0 4px 6px rgba(0,0,0,0.3); +
-            background-color: var(--card-bg); +
-            transition: transform 0.2s ease;+
         }         }
  
-        .age-header { +        /* Header Styling */ 
-            padding: 20px 30px;+        #doku-cosmic-light .age-header { 
 +            padding: 20px 15px;
             cursor: pointer;             cursor: pointer;
             display: flex;             display: flex;
             justify-content: space-between;             justify-content: space-between;
             align-items: center;             align-items: center;
-            background-color: rgba(255,255,255,0.05); 
-            border-left: 6px solid transparent; 
             user-select: none;             user-select: none;
 +            position: relative;
         }         }
  
-        .age-header:hover { +        #doku-cosmic-light .age-header:hover { 
-            background-color: rgba(255,255,255,0.1);+            background-color: var(--hover-color);
         }         }
  
-        .age-title { +        #doku-cosmic-light .header-content { 
-            font-size: 1.4rem;+            display: flex; 
 +            flex-direction: column; 
 +        } 
 + 
 +        #doku-cosmic-light .age-title { 
 +            font-size: 1.1rem;
             font-weight: 700;             font-weight: 700;
 +            text-transform: uppercase;
 +            letter-spacing: 1px;
 +            color: var(--text-primary);
 +            margin-bottom: 4px;
         }         }
  
-        .age-meta { +        #doku-cosmic-light .age-period { 
-            font-size: 0.9rem;+            font-size: 0.95rem;
             color: var(--text-secondary);             color: var(--text-secondary);
-            margin-left: 15px;+            font-family: "Georgia", serif; /* Serif for elegant contrast */ 
 +            font-style: italic;
         }         }
  
-        .toggle-icon { +        #doku-cosmic-light .toggle-icon { 
-            font-size: 1.5rem;+            font-size: 1.2rem; 
 +            color: var(--text-secondary);
             transition: transform 0.3s ease;             transition: transform 0.3s ease;
 +            margin-left: 15px;
         }         }
  
-        .age-content {+        /* Content Area */ 
 +        #doku-cosmic-light .age-content {
             max-height: 0;             max-height: 0;
             overflow: hidden;             overflow: hidden;
             transition: max-height 0.5s ease-out;             transition: max-height 0.5s ease-out;
-            background-color: #10121b;+            background-color: var(--panel-bg);
         }         }
  
-        /* Timeline Items */ +        /* Timeline Styling */ 
-        .timeline {+        #doku-cosmic-light .timeline {
             position: relative;             position: relative;
-            padding: 30px 30px 30px 50px;+            padding: 40px 20px 40px 40px; 
 +            max-width: 800px; 
 +            margin: 0 auto;
         }         }
  
-        .timeline::before {+        /* Vertical Line */ 
 +        #doku-cosmic-light .timeline::before {
             content: '';             content: '';
             position: absolute;             position: absolute;
-            left: 24px; +            left: 19px; /* Aligns with the dot center */ 
-            top: 0; +            top: 45px; 
-            bottom: 0;+            bottom: 45px;
             width: 2px;             width: 2px;
-            background: rgba(255,255,255,0.1);+            background: var(--line-color);
         }         }
  
-        .event-item {+        #doku-cosmic-light .event-item {
             position: relative;             position: relative;
 +            padding-left: 30px;
             margin-bottom: 40px;             margin-bottom: 40px;
         }         }
  
-        .event-item:last-child {+        #doku-cosmic-light .event-item:last-child {
             margin-bottom: 0;             margin-bottom: 0;
         }         }
  
-        .event-dot {+        /* Timeline Dot */ 
 +        #doku-cosmic-light .event-dot {
             position: absolute;             position: absolute;
-            left: -33px; +            left: -26px; /* Adjust based on padding-left */ 
-            top: 5px; +            top: 6px; 
-            width: 14px; +            width: 12px; 
-            height: 14px;+            height: 12px;
             border-radius: 50%;             border-radius: 50%;
             background-color: var(--bg-color);             background-color: var(--bg-color);
-            border: 2px solid #fff; +            border: 2px solid var(--accent-color); 
-            z-index: 1;+            z-index: 2;
         }         }
  
-        .time-badge {+        #doku-cosmic-light .time-badge {
             display: inline-block;             display: inline-block;
             font-size: 0.85rem;             font-size: 0.85rem;
-            font-weight: bold; +            font-weight: 600; 
-            color: var(--text-secondary); +            color: var(--accent-color); 
-            margin-bottom: 5px; +            margin-bottom: 6px; 
-            font-family: monospace; +            background: #e2e8f0;
-            background: rgba(255,255,255,0.05);+
             padding: 2px 8px;             padding: 2px 8px;
             border-radius: 4px;             border-radius: 4px;
         }         }
  
-        .event-title { +        #doku-cosmic-light .event-title { 
-            font-size: 1.2rem; +            font-size: 1.15rem; 
-            margin-bottom: 8px; +            margin: 0 0 8px 0; 
-            color: #fff;+            color: #1a202c; 
 +            font-weight: 700; 
 +            line-height: 1.3;
         }         }
  
-        .event-desc { +        #doku-cosmic-light .event-desc { 
-            color: var(--text-secondary);+            color: #4a5568;
             font-size: 0.95rem;             font-size: 0.95rem;
 +            margin: 0;
 +            line-height: 1.6;
         }         }
  
-        /* Specific Age Colors */ +        /* Math Superscripts */ 
-        .age-particle { border-color: var(--accent-particle); } +        #doku-cosmic-light sup {
-        .age-particle .age-title { color: var(--accent-particle); } +
-        .age-particle .event-dot { border-color: var(--accent-particle); } +
- +
-        .age-galactic { border-color: var(--accent-galactic); } +
-        .age-galactic .age-title { color: var(--accent-galactic); } +
-        .age-galactic .event-dot { border-color: var(--accent-galactic); } +
- +
-        .age-stellar { border-color: var(--accent-stellar); } +
-        .age-stellar .age-title { color: var(--accent-stellar); } +
-        .age-stellar .event-dot { border-color: var(--accent-stellar); } +
- +
-        .age-planetary { border-color: var(--accent-planetary); } +
-        .age-planetary .age-title { color: var(--accent-planetary); } +
-        .age-planetary .event-dot { border-color: var(--accent-planetary); } +
- +
-        .age-chemical { border-color: var(--accent-chemical); } +
-        .age-chemical .age-title { color: var(--accent-chemical); } +
-        .age-chemical .event-dot { border-color: var(--accent-chemical); } +
- +
-        .age-biological { border-color: var(--accent-biological); } +
-        .age-biological .age-title { color: var(--accent-biological); } +
-        .age-biological .event-dot { border-color: var(--accent-biological); } +
- +
-        .age-cultural { border-color: var(--accent-cultural); } +
-        .age-cultural .age-title { color: var(--accent-cultural); } +
-        .age-cultural .event-dot { border-color: var(--accent-cultural); } +
- +
-        /* Utility for math superscripts */ +
-        sup {+
             font-size: 0.7em;             font-size: 0.7em;
             vertical-align: super;             vertical-align: super;
 +            line-height: 0;
         }         }
  
-        /* Responsive */ +        /* Animation States */ 
-        @media (max-width: 600px) { +        #doku-cosmic-light .rotate {
-            .age-header { padding: 15px; } +
-            .timeline { padding: 20px 15px 20px 30px; } +
-            .timeline::before { left: 14px; } +
-            .event-dot { left: -22px; width: 12px; height: 12px; } +
-            .age-meta { display: block; margin-left: 0; margin-top: 5px; font-size: 0.8rem; } +
-            .age-header { flex-wrap: wrap; } +
-            .toggle-icon { margin-left: auto; } +
-        } +
- +
-        .rotate {+
             transform: rotate(180deg);             transform: rotate(180deg);
         }         }
                  
-        .open { +        #doku-cosmic-light .open { 
-            max-height: 2000px; /* Arbitrary large number for transition */+            max-height: 3000px; /* Large enough to fit content */ 
 +            border-bottom: 1px solid var(--border-color);
         }         }
-    </style> 
-</head> 
-<body> 
  
-<header> +        /* Mobile Optimization */ 
-    <h1>Cosmic History</h1> +        @media (max-width: 600px) { 
-    <p class="subtitle">From the Big Bang to the Life Era</p> +            #doku-cosmic-light .age-header { padding: 15px; } 
-</header> +            #doku-cosmic-light .timeline { padding: 30px 15px 30px 30px; } 
- +            #doku-cosmic-light .timeline::before { left: 14px; } 
-<div class="container">+            #doku-cosmic-light .event-dot { left: -22px; width: 10px; height: 10px; } 
 +            #doku-cosmic-light .age-title { font-size: 1rem; } 
 +            #doku-cosmic-light .age-period { font-size: 0.85rem; } 
 +        } 
 +    </style>
  
-    <div class="age-section age-particle">+    <div class="age-section">
         <div class="age-header">         <div class="age-header">
-            <div>+            <div class="header-content">
                 <span class="age-title">1. Particle Age</span>                 <span class="age-title">1. Particle Age</span>
-                <span class="age-meta">Time after Big Bang</span>+                <span class="age-period">[ 0 to 380,000 years ]</span>
             </div>             </div>
             <span class="toggle-icon">▼</span>             <span class="toggle-icon">▼</span>
Line 260: Line 221:
                 </div>                 </div>
                 <div class="event-item">                 <div class="event-item">
-                    <span class="time-badge">10<sup>-35</sup> to 10<sup>-32</sup> s</span>+                    <span class="time-badge">10<sup>-35</sup> to 10<sup>-32</sup> seconds</span>
                     <h3 class="event-title">Cosmic Inflation</h3>                     <h3 class="event-title">Cosmic Inflation</h3>
                     <p class="event-desc">A brief, exponential expansion where the universe swells in size by a factor of roughly 10<sup>50</sup>. This process smoothed out initial irregularities.</p>                     <p class="event-desc">A brief, exponential expansion where the universe swells in size by a factor of roughly 10<sup>50</sup>. This process smoothed out initial irregularities.</p>
Line 266: Line 227:
                 </div>                 </div>
                 <div class="event-item">                 <div class="event-item">
-                    <span class="time-badge">10<sup>-43</sup> to 10<sup>-10</sup> s</span>+                    <span class="time-badge">10<sup>-43</sup> to 10<sup>-10</sup> seconds</span>
                     <h3 class="event-title">Separation of Forces</h3>                     <h3 class="event-title">Separation of Forces</h3>
-                    <p class="event-desc">As the universe cooled, the single unified "superforce" separated into the four fundamental forces: gravity, strong nuclear, weak nuclear, and electromagnetism.</p>+                    <p class="event-desc">As the universe cooled, the single unified "superforce" separated into the four fundamental forces (energies) of nature: gravity, the strong nuclear force, the weak nuclear force, and electromagnetism.</p>
                     <div class="event-dot"></div>                     <div class="event-dot"></div>
                 </div>                 </div>
                 <div class="event-item">                 <div class="event-item">
-                    <span class="time-badge">10<sup>-35</sup> to 1 s</span>+                    <span class="time-badge">10<sup>-35</sup> to 1 second</span>
                     <h3 class="event-title">Particle Creation & Annihilation</h3>                     <h3 class="event-title">Particle Creation & Annihilation</h3>
-                    <p class="event-desc">Energy converted into matter via "pair production". Quarks and leptons emerged. Matter and antimatter collided and annihilated, leaving a slight excess of ordinary matter.</p>+                    <p class="event-desc">Energy converted into matter via "pair production". Quarks and leptons (e.g., electrons) emerged. Matter and antimatter collided and annihilated, leaving a slight excess of ordinary matter.</p>
                     <div class="event-dot"></div>                     <div class="event-dot"></div>
                 </div>                 </div>
                 <div class="event-item">                 <div class="event-item">
-                    <span class="time-badge">3 to 15 mins</span>+                    <span class="time-badge">3 minutes to 15 minutes</span>
                     <h3 class="event-title">Primordial Nucleosynthesis</h3>                     <h3 class="event-title">Primordial Nucleosynthesis</h3>
-                    <p class="event-desc">The universe cooled sufficiently (below 10<sup>9</sup> K) for protons and neutrons to fuse, producing the first atomic nuclei: deuterium, helium, and trace lithium.</p>+                    <p class="event-desc">The universe cooled sufficiently (below 10<sup>9</sup> K) for protons and neutrons to fuse. This "Nuclear Epoch" produced the first atomic nuclei: heavy hydrogen (deuterium), helium, and trace amounts of lithium.</p>
                     <div class="event-dot"></div>                     <div class="event-dot"></div>
                 </div>                 </div>
Line 286: Line 247:
                     <span class="time-badge">50,000 years</span>                     <span class="time-badge">50,000 years</span>
                     <h3 class="event-title">Matter Domination</h3>                     <h3 class="event-title">Matter Domination</h3>
-                    <p class="event-desc">The "crossover point" where the energy density of matter exceeded that of radiation. This marked the end of the "Radiation Era" and the beginning of the "Matter Era".</p>+                    <p class="event-desc">The "crossover point" where the energy density of matter finally exceeded that of radiation (or energy). This marked the end of the "Radiation Era" and the beginning of the "Matter Era," setting the stage for structure formation.</p>
                     <div class="event-dot"></div>                     <div class="event-dot"></div>
                 </div>                 </div>
Line 292: Line 253:
                     <span class="time-badge">300,000 to 380,000 years</span>                     <span class="time-badge">300,000 to 380,000 years</span>
                     <h3 class="event-title">Recombination & Decoupling</h3>                     <h3 class="event-title">Recombination & Decoupling</h3>
-                    <p class="event-desc">Electrons combined with nuclei to form neutral atoms. This neutralized the charged fog, allowing photons to travel freely (observable today as the CMB).</p>+                    <p class="event-desc">Electrons combined with nuclei to form neutral atoms (recombination). This neutralized the charged fog, allowing photons to travel freely (decoupling), observable today as the Cosmic Microwave Background (CMB).</p>
                     <div class="event-dot"></div>                     <div class="event-dot"></div>
                 </div>                 </div>
Line 299: Line 260:
     </div>     </div>
  
-    <div class="age-section age-galactic">+    <div class="age-section">
         <div class="age-header">         <div class="age-header">
-            <div>+            <div class="header-content">
                 <span class="age-title">2. Galactic Age</span>                 <span class="age-title">2. Galactic Age</span>
-                <span class="age-meta">Years after Big Bang</span>+                <span class="age-period">[ 300 ky – 4 Gy ]</span>
             </div>             </div>
             <span class="toggle-icon">▼</span>             <span class="toggle-icon">▼</span>
Line 312: Line 273:
                     <span class="time-badge">300 ky – 200 My</span>                     <span class="time-badge">300 ky – 200 My</span>
                     <h3 class="event-title">The Cosmic Dark Ages</h3>                     <h3 class="event-title">The Cosmic Dark Ages</h3>
-                    <p class="event-desc">The universe was filled with neutral hydrogen and helium but lacked luminous objects. Gravity slowly pulled matter into denser clumps.</p>+                    <p class="event-desc">Following recombination, the universe was filled with neutral hydrogen and helium but lacked luminous objects. Gravity slowly pulled matter into denser clumps within a dark, expanding cosmos.</p>
                     <div class="event-dot"></div>                     <div class="event-dot"></div>
                 </div>                 </div>
Line 318: Line 279:
                     <span class="time-badge">200 My</span>                     <span class="time-badge">200 My</span>
                     <h3 class="event-title">Cosmic Dawn (Reionization)</h3>                     <h3 class="event-title">Cosmic Dawn (Reionization)</h3>
-                    <p class="event-desc">The first massive stars and protogalaxies ignited. Their UV radiation re-ionized the surrounding hydrogen, ending the Dark Ages.</p>+                    <p class="event-desc">The first massive stars and protogalaxies ignited. Their intense ultraviolet radiation re-ionized the surrounding neutral hydrogen, ending the Dark Ages and making the universe transparent to ultraviolet light.</p>
                     <div class="event-dot"></div>                     <div class="event-dot"></div>
                 </div>                 </div>
Line 324: Line 285:
                     <span class="time-badge">500 My – 1 Gy</span>                     <span class="time-badge">500 My – 1 Gy</span>
                     <h3 class="event-title">Hierarchical Merging</h3>                     <h3 class="event-title">Hierarchical Merging</h3>
-                    <p class="event-desc">Small "pregalactic blobs" collided and merged to build up larger galactic structures in a "bottom-up" process.</p>+                    <p class="event-desc">Small "pregalactic blobs" and dwarf galaxies collided and merged to build up larger galactic structures. This "bottom-up" process created the massive galaxies we see today, including the Milky Way's halo.</p>
                     <div class="event-dot"></div>                     <div class="event-dot"></div>
                 </div>                 </div>
Line 330: Line 291:
                     <span class="time-badge">1 – 2 Gy</span>                     <span class="time-badge">1 – 2 Gy</span>
                     <h3 class="event-title">Rise of Supermassive Black Holes</h3>                     <h3 class="event-title">Rise of Supermassive Black Holes</h3>
-                    <p class="event-desc">Matter collapsed in galaxy centers to form black holes, powering the first quasars which shone with the brightness of a trillion suns.</p>+                    <p class="event-desc">Massive concentrations of matter collapsed in the centers of young galaxies to form black holes. The accretion of matter into these holes powered the first quasars, which shone with the brightness of a trillion suns.</p>
                     <div class="event-dot"></div>                     <div class="event-dot"></div>
                 </div>                 </div>
Line 336: Line 297:
                     <span class="time-badge">2 – 3 Gy</span>                     <span class="time-badge">2 – 3 Gy</span>
                     <h3 class="event-title">Peak Quasar Epoch</h3>                     <h3 class="event-title">Peak Quasar Epoch</h3>
-                    <p class="event-desc">The era of maximum activity for Active Galactic Nuclei. As fuel supplies were consumed, activity subsided, leaving dormant supermassive black holes.</p>+                    <p class="event-desc">The era of maximum activity for Active Galactic Nuclei (AGN; quasars). As galactic cores consumed their fuel supplies, this violent activity eventually subsided, leaving dormant supermassive black holes at the centers of most normal galaxies.</p>
                     <div class="event-dot"></div>                     <div class="event-dot"></div>
                 </div>                 </div>
Line 342: Line 303:
                     <span class="time-badge">3 Gy</span>                     <span class="time-badge">3 Gy</span>
                     <h3 class="event-title">Large-Scale Structure Formation</h3>                     <h3 class="event-title">Large-Scale Structure Formation</h3>
-                    <p class="event-desc">Galaxies organized into sheets, filaments, and clusters separated by voids, creating the "cosmic web".</p>+                    <p class="event-desc">Galaxies organized themselves into vast sheets, filaments, and clusters (such as the Local Group), separated by immense voids, creating the "frothy" bubble-like architecture of the cosmic web.</p>
                     <div class="event-dot"></div>                     <div class="event-dot"></div>
                 </div>                 </div>
Line 348: Line 309:
                     <span class="time-badge">4 Gy</span>                     <span class="time-badge">4 Gy</span>
                     <h3 class="event-title">Birth of Population I Stars</h3>                     <h3 class="event-title">Birth of Population I Stars</h3>
-                    <p class="event-desc">Enrichment by earlier supernovae allowed the formation of metal-rich stars, setting conditions for future planetary systems.</p>+                    <p class="event-desc">Enrichment of the interstellar medium by earlier supernovae allowed the formation of metal-rich stars (Population I) in galactic disks. This marked the transition toward the Stellar Age and set the conditions for future planetary systems.</p>
                     <div class="event-dot"></div>                     <div class="event-dot"></div>
                 </div>                 </div>
Line 355: Line 316:
     </div>     </div>
  
-    <div class="age-section age-stellar">+    <div class="age-section">
         <div class="age-header">         <div class="age-header">
-            <div>+            <div class="header-content">
                 <span class="age-title">3. Stellar Age</span>                 <span class="age-title">3. Stellar Age</span>
-                <span class="age-meta">Years after Big Bang</span>+                <span class="age-period">[ 4 Gy – 9 Gy ]</span>
             </div>             </div>
             <span class="toggle-icon">▼</span>             <span class="toggle-icon">▼</span>
Line 367: Line 328:
                 <div class="event-item">                 <div class="event-item">
                     <span class="time-badge">4 Gy</span>                     <span class="time-badge">4 Gy</span>
-                    <h3 class="event-title">Formation of Milky Way's Thin Disk</h3> +                    <h3 class="event-title">Formation of the Milky Way's Thin Disk</h3> 
-                    <p class="event-desc">The Milky Way flattened into a thin disk, coinciding with the birth of metal-rich Population I stars.</p>+                    <p class="event-desc">Following the earlier formation of the galactic halo, the Milky Way flattened into a thin disk. This structural change coincided with the birth of metal-rich Population I stars, which contained heavy elements produced by earlier generations of stars.</p>
                     <div class="event-dot"></div>                     <div class="event-dot"></div>
                 </div>                 </div>
Line 374: Line 335:
                     <span class="time-badge">4 – 5 Gy</span>                     <span class="time-badge">4 – 5 Gy</span>
                     <h3 class="event-title">Peak Star Formation Rate</h3>                     <h3 class="event-title">Peak Star Formation Rate</h3>
-                    <p class="event-desc">Massive stars acted as "nuclear forges," fusing hydrogen and helium into carbon, oxygen, and iron.</p>+                    <p class="event-desc">The universe experienced its maximum rate of star formation. Massive stars fused hydrogen and helium into heavier elements like carbon, oxygen, and iron, acting as "nuclear forges" to create the building blocks of future complexity.</p>
                     <div class="event-dot"></div>                     <div class="event-dot"></div>
                 </div>                 </div>
                 <div class="event-item">                 <div class="event-item">
                     <span class="time-badge">6 Gy</span>                     <span class="time-badge">6 Gy</span>
-                    <h3 class="event-title">Emergence of Galactic Habitable Zone</h3> +                    <h3 class="event-title">Emergence of the Galactic Habitable Zone</h3> 
-                    <p class="event-desc">A region emerged where metallicity was sufficient for planets and supernovae frequency was low enough to allow safe orbits.</p>+                    <p class="event-desc">A region within the galaxy emerged where conditions favored the development of complex life. By this time, metallicity (heavy element abundance) had spread outward, and the frequency of sterilizing supernovae in the inner galaxy had decreased sufficiently to allow safe orbits for planets.</p>
                     <div class="event-dot"></div>                     <div class="event-dot"></div>
                 </div>                 </div>
                 <div class="event-item">                 <div class="event-item">
                     <span class="time-badge">Ongoing (4 – 9 Gy)</span>                     <span class="time-badge">Ongoing (4 – 9 Gy)</span>
-                    <h3 class="event-title">Stellar Nucleosynthesis & Supernovae</h3> +                    <h3 class="event-title">Stellar Nucleosynthesis</h3> 
-                    <p class="event-desc">Stars fused elements up to iron. Core-collapse explosions enriched the interstellar medium and synthesized heavy elements (gold, uranium).</p>+                    <p class="event-desc">Main-sequence stars fused hydrogen into helium, while massive evolved stars fused helium into carbon, neon, oxygen, silicon, and finally iron in their cores. This process created the chemical complexity required for planetary bodies.</p> 
 +                    <div class="event-dot"></div> 
 +                </div> 
 +                <div class="event-item"> 
 +                    <span class="time-badge">Ongoing (4 – 9 Gy)</span> 
 +                    <h3 class="event-title">Supernova Enrichment</h3> 
 +                    <p class="event-desc">Massive stars died in core-collapse explosions, scattering chemically enriched material into the interstellar medium. These explosions also synthesized elements heavier than iron (such as gold and uranium) via the r-process (rapid neutron capture).</p>
                     <div class="event-dot"></div>                     <div class="event-dot"></div>
                 </div>                 </div>
Line 392: Line 359:
                     <span class="time-badge">7 Gy</span>                     <span class="time-badge">7 Gy</span>
                     <h3 class="event-title">Acceleration of Cosmic Expansion</h3>                     <h3 class="event-title">Acceleration of Cosmic Expansion</h3>
-                    <p class="event-desc">Expansion began to accelerate due to "dark energy," transitioning the universe to a dark-energy-dominated era.</p>+                    <p class="event-desc">The expansion of the universe began to accelerate due to the influence of repulsive "dark energy." This marked the transition from a matter-dominated era to a dark-energy-dominated era, influencing the formation of large-scale structures.</p>
                     <div class="event-dot"></div>                     <div class="event-dot"></div>
                 </div>                 </div>
Line 398: Line 365:
                     <span class="time-badge">9 Gy</span>                     <span class="time-badge">9 Gy</span>
                     <h3 class="event-title">Solar Nebula Collapse</h3>                     <h3 class="event-title">Solar Nebula Collapse</h3>
-                    <p class="event-desc">Collapse of an interstellar cloud initiated the formation of the Sun and Solar System approx. 4.6 billion years ago.</p>+                    <p class="event-desc">The Stellar Age concluded with the gravitational collapse of a chemically enriched interstellar cloud in our region of the Milky Way. Triggered perhaps by a nearby supernova, this event initiated the formation of the Sun and the Solar System about 4.6 billion years ago.</p>
                     <div class="event-dot"></div>                     <div class="event-dot"></div>
                 </div>                 </div>
Line 405: Line 372:
     </div>     </div>
  
-    <div class="age-section age-planetary">+    <div class="age-section">
         <div class="age-header">         <div class="age-header">
-            <div>+            <div class="header-content">
                 <span class="age-title">4. Planetary Age</span>                 <span class="age-title">4. Planetary Age</span>
-                <span class="age-meta">Years after Big Bang</span>+                <span class="age-period">[ 9.1 Gy – 11 Gy ]</span>
             </div>             </div>
             <span class="toggle-icon">▼</span>             <span class="toggle-icon">▼</span>
Line 418: Line 385:
                     <span class="time-badge">9.1 Gy</span>                     <span class="time-badge">9.1 Gy</span>
                     <h3 class="event-title">Accretion of Planetesimals</h3>                     <h3 class="event-title">Accretion of Planetesimals</h3>
-                    <p class="event-desc">Dust grains collided to form planetesimals, which coalesced into the protoplanets of the Solar System.</p>+                    <p class="event-desc">Following the solar nebula collapse, dust grains in the disk collided and stuck together via electrostatic forces and gravity to form "planetesimals." These kilometer-sized objects further coalesced to form the protoplanets of the inner and outer Solar System.</p>
                     <div class="event-dot"></div>                     <div class="event-dot"></div>
                 </div>                 </div>
Line 424: Line 391:
                     <span class="time-badge">9.1 Gy</span>                     <span class="time-badge">9.1 Gy</span>
                     <h3 class="event-title">The T-Tauri Solar Wind</h3>                     <h3 class="event-title">The T-Tauri Solar Wind</h3>
-                    <p class="event-desc">The young Sun's intense winds swept away remaining nebular gas, halting Jovian planet growth and stripping early atmospheres.</p>+                    <p class="event-desc">The young Sun entered a highly active "T-Tauri" phase, generating intense solar winds. This stream of charged particles swept away the remaining nebular gas and dust, halting the growth of the Jovian planets and stripping the primordial atmospheres from the inner planets.</p> 
 +                    <div class="event-dot"></div> 
 +                </div> 
 +                <div class="event-item"> 
 +                    <span class="time-badge">9.2 Gy</span> 
 +                    <h3 class="event-title">Planetary Differentiation</h3> 
 +                    <p class="event-desc">Intense heat from accretion and radioactive decay caused the early Earth to melt. Heavy elements like iron and nickel sank to the center to form the metallic core (generating the magnetic field), while lighter silicates rose to form the mantle and crust.</p>
                     <div class="event-dot"></div>                     <div class="event-dot"></div>
                 </div>                 </div>
                 <div class="event-item">                 <div class="event-item">
                     <span class="time-badge">9.2 Gy</span>                     <span class="time-badge">9.2 Gy</span>
-                    <h3 class="event-title">Planetary Differentiation & Moon Formation</h3> +                    <h3 class="event-title">Formation of the Moon</h3> 
-                    <p class="event-desc">Earth melted; heavy metals sank to form the core. A massive collision created the debris ring that formed the Moon.</p>+                    <p class="event-desc">A Mars-sized protoplanet collided with the newly differentiated Earth. The debris from this cataclysmic impact formed a ring around Earth, which rapidly accreted to form the Moon.</p>
                     <div class="event-dot"></div>                     <div class="event-dot"></div>
                 </div>                 </div>
Line 436: Line 409:
                     <span class="time-badge">9.4 Gy</span>                     <span class="time-badge">9.4 Gy</span>
                     <h3 class="event-title">Formation of Atmosphere and Oceans</h3>                     <h3 class="event-title">Formation of Atmosphere and Oceans</h3>
-                    <p class="event-desc">Volcanic outgassing and comets created a secondary atmosphere and the first oceans as Earth cooled.</p>+                    <p class="event-desc">As Earth cooled, volcanic activity outgassed volatiles (water vapor, carbon dioxide) from the interior to form a secondary atmosphere. As temperatures dropped further, this water vapor condensed to form the first oceans, augmented by water delivered by comets.</p>
                     <div class="event-dot"></div>                     <div class="event-dot"></div>
                 </div>                 </div>
Line 442: Line 415:
                     <span class="time-badge">9.6 Gy – 10 Gy</span>                     <span class="time-badge">9.6 Gy – 10 Gy</span>
                     <h3 class="event-title">Late Heavy Bombardment</h3>                     <h3 class="event-title">Late Heavy Bombardment</h3>
-                    <p class="event-desc">Intense asteroid/comet impacts pulverized the early crust, keeping the surface hostile.</p>+                    <p class="event-desc">A period of intense asteroid and comet impacts scarred planetary surfaces and pulverized the early crust. This "cleaning up" of leftover solar system debris kept Earth's surface molten and hostile for millions of years.</p>
                     <div class="event-dot"></div>                     <div class="event-dot"></div>
                 </div>                 </div>
Line 448: Line 421:
                     <span class="time-badge">10 Gy – 11 Gy</span>                     <span class="time-badge">10 Gy – 11 Gy</span>
                     <h3 class="event-title">Stabilization of the Lithosphere</h3>                     <h3 class="event-title">Stabilization of the Lithosphere</h3>
-                    <p class="event-desc">Earth's crust stabilized, and the first continents formed, creating a stable environment for chemical evolution.</p>+                    <p class="event-desc">The Planetary Age concluded with the stabilization of Earth's solid crust and the formation of the first continents (such as the Vaalbara supercontinent). This transformed Earth from a chaotic, molten "battlefield" into a stable environment capable of sustaining complex chemical evolution.</p>
                     <div class="event-dot"></div>                     <div class="event-dot"></div>
                 </div>                 </div>
Line 455: Line 428:
     </div>     </div>
  
-    <div class="age-section age-chemical">+    <div class="age-section">
         <div class="age-header">         <div class="age-header">
-            <div>+            <div class="header-content">
                 <span class="age-title">5. Chemical Age</span>                 <span class="age-title">5. Chemical Age</span>
-                <span class="age-meta">Years after Big Bang</span>+                <span class="age-period">[ 10.5 Gy – 12.5 Gy ]</span>
             </div>             </div>
             <span class="toggle-icon">▼</span>             <span class="toggle-icon">▼</span>
Line 468: Line 441:
                     <span class="time-badge">10.5 – 11 Gy</span>                     <span class="time-badge">10.5 – 11 Gy</span>
                     <h3 class="event-title">Synthesis of Prebiotic Molecules</h3>                     <h3 class="event-title">Synthesis of Prebiotic Molecules</h3>
-                    <p class="event-desc">Gases, lightning, and UV radiation synthesized amino acids and nucleotide bases.</p>+                    <p class="event-desc">In the energy-rich environment of the early Earth, simple atmospheric gases (like methane and ammonia) interacted with lightning and UV radiation to synthesize the building blocks of life: amino acids and nucleotide bases.</p>
                     <div class="event-dot"></div>                     <div class="event-dot"></div>
                 </div>                 </div>
                 <div class="event-item">                 <div class="event-item">
                     <span class="time-badge">11 Gy</span>                     <span class="time-badge">11 Gy</span>
-                    <h3 class="event-title">Protocells & The "RNA World"</h3> +                    <h3 class="event-title">Formation of Protocells</h3> 
-                    <p class="event-desc">Formation of proteinoid microspheres. RNA likely served as both genetic carrier and catalyst.</p>+                    <p class="event-desc">Organic molecules concentrated in water to form "proteinoid microspheres" or droplets with semi-permeable membranes. These prebiotic structures displayed primitive metabolism and growth but lacked true hereditary mechanisms.</p> 
 +                    <div class="event-dot"></div> 
 +                </div> 
 +                <div class="event-item"> 
 +                    <span class="time-badge">11 Gy</span> 
 +                    <h3 class="event-title">The "RNA World"</h3> 
 +                    <p class="event-desc">Before the dominance of DNA and proteins, RNA likely served a dual role as both the carrier of genetic information and the catalyst for chemical reactions (ribozymes), bridging the gap between non-living chemistry and true biology.</p>
                     <div class="event-dot"></div>                     <div class="event-dot"></div>
                 </div>                 </div>
Line 480: Line 459:
                     <span class="time-badge">11.5 Gy</span>                     <span class="time-badge">11.5 Gy</span>
                     <h3 class="event-title">Emergence of Prokaryotes</h3>                     <h3 class="event-title">Emergence of Prokaryotes</h3>
-                    <p class="event-desc">First true living cells (heterotrophic bacteria) appeared, likely in hydrothermal vents.</p>+                    <p class="event-desc">The first true living cells appeared, likely as heterotrophic bacteria in hydrothermal vents. These simple, single-celled organisms (lacking a nucleus) fed on the organic "soup" of the early oceans.</p>
                     <div class="event-dot"></div>                     <div class="event-dot"></div>
                 </div>                 </div>
Line 486: Line 465:
                     <span class="time-badge">12 Gy</span>                     <span class="time-badge">12 Gy</span>
                     <h3 class="event-title">Invention of Photosynthesis</h3>                     <h3 class="event-title">Invention of Photosynthesis</h3>
-                    <p class="event-desc">Bacteria (e.g., cyanobacteria) converted sunlight into food, allowing life to spread globally.</p>+                    <p class="event-desc">Certain bacteria (autotrophs), such as cyanobacteria, evolved the ability to use sunlight to convert carbon dioxide and water into food. This reduced life's dependence on scarce organic molecules and allowed life to spread globally.</p>
                     <div class="event-dot"></div>                     <div class="event-dot"></div>
                 </div>                 </div>
Line 492: Line 471:
                     <span class="time-badge">12.2 Gy</span>                     <span class="time-badge">12.2 Gy</span>
                     <h3 class="event-title">The Oxygen Crisis</h3>                     <h3 class="event-title">The Oxygen Crisis</h3>
-                    <p class="event-desc">Accumulation of free oxygen was toxic to anaerobic organisms but enabled efficient respiration.</p>+                    <p class="event-desc">As a byproduct of photosynthesis, free oxygen accumulated in the atmosphere. This "Oxygen Holocaust" was toxic to many early anaerobic organisms but paved the way for more efficient energy production via respiration.</p>
                     <div class="event-dot"></div>                     <div class="event-dot"></div>
                 </div>                 </div>
Line 498: Line 477:
                     <span class="time-badge">12.5 Gy</span>                     <span class="time-badge">12.5 Gy</span>
                     <h3 class="event-title">Eukaryotic Symbiosis</h3>                     <h3 class="event-title">Eukaryotic Symbiosis</h3>
-                    <p class="event-desc">Symbiosis between large cells and bacteria (mitochondria/chloroplasts) created complex eukaryotes.</p>+                    <p class="event-desc">Large cells ingested smaller specialized bacteria (which became mitochondria and chloroplasts) without digesting them. This symbiosis led to the first eukaryotes: complex cells with distinct nuclei and organelles that became the ancestors of all plants and animals.</p>
                     <div class="event-dot"></div>                     <div class="event-dot"></div>
                 </div>                 </div>
Line 505: Line 484:
     </div>     </div>
  
-    <div class="age-section age-biological">+    <div class="age-section">
         <div class="age-header">         <div class="age-header">
-            <div>+            <div class="header-content">
                 <span class="age-title">6. Biological Age</span>                 <span class="age-title">6. Biological Age</span>
-                <span class="age-meta">Years Ago (from present)</span>+                <span class="age-period">[ 1 Gy – 5 My ago ]</span>
             </div>             </div>
             <span class="toggle-icon">▼</span>             <span class="toggle-icon">▼</span>
Line 518: Line 497:
                     <span class="time-badge">1 Gy</span>                     <span class="time-badge">1 Gy</span>
                     <h3 class="event-title">Rise of Multicellularity</h3>                     <h3 class="event-title">Rise of Multicellularity</h3>
-                    <p class="event-desc">Single-celled eukaryotes cooperated, leading to cell specialization and complexity.</p>+                    <p class="event-desc">Single-celled eukaryotes began to cluster and cooperate, leading to the first true multicellular organisms. This transition involved a division of labor among cells, allowing for specialization and increased complexity beyond simple colonial living.</p>
                     <div class="event-dot"></div>                     <div class="event-dot"></div>
                 </div>                 </div>
Line 524: Line 503:
                     <span class="time-badge">540 – 600 My</span>                     <span class="time-badge">540 – 600 My</span>
                     <h3 class="event-title">The Cambrian Explosion</h3>                     <h3 class="event-title">The Cambrian Explosion</h3>
-                    <p class="event-desc">"Biology's big bang": rapid burst of diversification, hard shells, and predator-prey dynamics.</p>+                    <p class="event-desc">A rapid burst of biological diversification often called "biology's big bang." This period saw the emergence of most modern animal body plans, the development of hard shells and skeletons, and a sophisticated predator-prey "arms race".</p>
                     <div class="event-dot"></div>                     <div class="event-dot"></div>
                 </div>                 </div>
Line 530: Line 509:
                     <span class="time-badge">400 – 475 My</span>                     <span class="time-badge">400 – 475 My</span>
                     <h3 class="event-title">Colonization of Land</h3>                     <h3 class="event-title">Colonization of Land</h3>
-                    <p class="event-desc">Life migrated to continents. Plants, arthropods, and early amphibians adapted to gravity and desiccation.</p>+                    <p class="event-desc">Life migrated from the oceans to the barren continents. Simple plants (like mosses) were the first to adapt to the harsh terrestrial environment, followed by arthropods and early amphibians, which required major adaptations to survive gravity and desiccation.</p>
                     <div class="event-dot"></div>                     <div class="event-dot"></div>
                 </div>                 </div>
Line 536: Line 515:
                     <span class="time-badge">300 My</span>                     <span class="time-badge">300 My</span>
                     <h3 class="event-title">Dominance of Reptiles</h3>                     <h3 class="event-title">Dominance of Reptiles</h3>
-                    <p class="event-desc">Watertight skin and amniotic eggs allowed reptiles to dominate Pangea.</p>+                    <p class="event-desc">Reptiles evolved watertight skin and amniotic eggs with hard shells, allowing them to reproduce on dry land without returning to water. This adaptation enabled them to spread across the supercontinent Pangea and dominate the planet.</p>
                     <div class="event-dot"></div>                     <div class="event-dot"></div>
                 </div>                 </div>
Line 542: Line 521:
                     <span class="time-badge">200 My</span>                     <span class="time-badge">200 My</span>
                     <h3 class="event-title">Emergence of Mammals</h3>                     <h3 class="event-title">Emergence of Mammals</h3>
-                    <p class="event-desc">Small, warm-blooded mammals appeared, developing fur, milk production, and larger brains.</p>+                    <p class="event-desc">The first small, warm-blooded (endothermic) mammals appeared during the Triassic period. While overshadowed by dinosaurs for millions of years, they developed key traits like fur, milk production, and larger brains relative to body size.</p>
                     <div class="event-dot"></div>                     <div class="event-dot"></div>
                 </div>                 </div>
Line 548: Line 527:
                     <span class="time-badge">65 My</span>                     <span class="time-badge">65 My</span>
                     <h3 class="event-title">K-T Mass Extinction</h3>                     <h3 class="event-title">K-T Mass Extinction</h3>
-                    <p class="event-desc">Asteroid impact wiped out dinosaurs, allowing mammals to dominate the Cenozoic era.</p>+                    <p class="event-desc">A massive asteroid impact (likely at Chicxulub, Mexico) caused global climatic upheaval, wiping out the dinosaurs and roughly half of all plant species. This catastrophic event cleared ecological niches, allowing mammals to radiate and dominate the Cenozoic era.</p>
                     <div class="event-dot"></div>                     <div class="event-dot"></div>
                 </div>                 </div>
Line 554: Line 533:
                     <span class="time-badge">5 – 7 My</span>                     <span class="time-badge">5 – 7 My</span>
                     <h3 class="event-title">Divergence of Hominids</h3>                     <h3 class="event-title">Divergence of Hominids</h3>
-                    <p class="event-desc">Human ancestors separated from great apes. Bipedalism began, setting the stage for the Cultural Age.</p>+                    <p class="event-desc">In response to changing climates and shrinking forests in Africa, the ancestors of humans separated from the lineage of great apes. This period marked the beginning of bipedalism (walking upright), setting the stage for the Cultural Age.</p>
                     <div class="event-dot"></div>                     <div class="event-dot"></div>
                 </div>                 </div>
Line 561: Line 540:
     </div>     </div>
  
-    <div class="age-section age-cultural">+    <div class="age-section">
         <div class="age-header">         <div class="age-header">
-            <div>+            <div class="header-content">
                 <span class="age-title">7. Cultural Age</span>                 <span class="age-title">7. Cultural Age</span>
-                <span class="age-meta">Years Ago (from present)</span>+                <span class="age-period">[ 1 My ago – Future ]</span>
             </div>             </div>
             <span class="toggle-icon">▼</span>             <span class="toggle-icon">▼</span>
Line 574: Line 553:
                     <span class="time-badge">1 My – 500 ky</span>                     <span class="time-badge">1 My – 500 ky</span>
                     <h3 class="event-title">Control of Fire</h3>                     <h3 class="event-title">Control of Fire</h3>
-                    <p class="event-desc">Use of fire allowed for higher energy intake and brain growth.</p>+                    <p class="event-desc">Humans mastered the use of fire for warmth, protection, and cooking. This "technological" advance predated modern brain size and acted as an external digestive system, allowing for higher energy intake and brain growth.</p>
                     <div class="event-dot"></div>                     <div class="event-dot"></div>
                 </div>                 </div>
                 <div class="event-item">                 <div class="event-item">
                     <span class="time-badge">200 – 300 ky</span>                     <span class="time-badge">200 – 300 ky</span>
-                    <h3 class="event-title">Emergence of Humans</h3> +                    <h3 class="event-title">Emergence of humans</h3> 
-                    <p class="event-desc">Modern humans appeared in Africa with superior potential for communication and adaptation.</p>+                    <p class="event-desc">Modern humans appeared in Africa. While genetically similar to ancestors, they possessed superior potential for communication and technological adaptation, marking the biological start of the Cultural Age.</p>
                     <div class="event-dot"></div>                     <div class="event-dot"></div>
                 </div>                 </div>
Line 586: Line 565:
                     <span class="time-badge">50 ky</span>                     <span class="time-badge">50 ky</span>
                     <h3 class="event-title">The "Cultural Explosion"</h3>                     <h3 class="event-title">The "Cultural Explosion"</h3>
-                    <p class="event-desc">"Culture's big bang": tool kits, cave art, and symbolic language.</p>+                    <p class="event-desc">A sudden flowering of behavioral modernity characterized by sophisticated tool kits, cave art (e.g., Lascaux), and the full development of symbolic language. This period is often called "culture's big bang."</p>
                     <div class="event-dot"></div>                     <div class="event-dot"></div>
                 </div>                 </div>
Line 592: Line 571:
                     <span class="time-badge">10 ky</span>                     <span class="time-badge">10 ky</span>
                     <h3 class="event-title">The Agricultural Revolution</h3>                     <h3 class="event-title">The Agricultural Revolution</h3>
-                    <p class="event-desc">Shift to farming and animal domestication led to population surges and settled life.</p>+                    <p class="event-desc">Following the last ice age, humans shifted from hunter-gatherer lifestyles to farming and animal domestication. This ability to harvest increased solar energy led to population surges and settled village life.</p>
                     <div class="event-dot"></div>                     <div class="event-dot"></div>
                 </div>                 </div>
Line 598: Line 577:
                     <span class="time-badge">5 ky</span>                     <span class="time-badge">5 ky</span>
                     <h3 class="event-title">Rise of Civilization and State</h3>                     <h3 class="event-title">Rise of Civilization and State</h3>
-                    <p class="event-desc">Complex hierarchies, city-states, and the invention of writing (recorded history).</p>+                    <p class="event-desc">The emergence of dense populations, complex social hierarchies, and the invention of writing (e.g., Sumerian cuneiform). This marked the transition from prehistory to recorded history and the formation of the first city-states.</p>
                     <div class="event-dot"></div>                     <div class="event-dot"></div>
                 </div>                 </div>
                 <div class="event-item">                 <div class="event-item">
-                    <span class="time-badge">250 years ago</span>+                    <span class="time-badge">250 years</span>
                     <h3 class="event-title">The Industrial Revolution</h3>                     <h3 class="event-title">The Industrial Revolution</h3>
-                    <p class="event-desc">Exploitation of fossil fuels mechanized production and globalized society.</p>+                    <p class="event-desc">Humanity learned to exploit energy stored in fossil fuels (coal and oil), increasing per capita energy use by nearly a factor of 100. This transition powered machines, mechanizing production and globalizing human society.</p>
                     <div class="event-dot"></div>                     <div class="event-dot"></div>
                 </div>                 </div>
Line 610: Line 589:
                     <span class="time-badge">Present / Future</span>                     <span class="time-badge">Present / Future</span>
                     <h3 class="event-title">The "Life Era"</h3>                     <h3 class="event-title">The "Life Era"</h3>
-                    <p class="event-desc">Technological life manipulates matter and genetic evolution. Humans potentially leave Earth to dominate cosmic matter.</p>+                    <p class="event-desc">A potential new phase of cosmic evolution where technological life begins to manipulate matter and genetic evolution itself. Humans have become agents of change, capable of leaving Earth and potentially dominating matter on a cosmic scale.</p>
                     <div class="event-dot"></div>                     <div class="event-dot"></div>
                 </div>                 </div>
Line 617: Line 596:
     </div>     </div>
  
-</div>+    <script> 
 +        (function() { 
 +            const wrapper = document.getElementById('doku-cosmic-light'); 
 +            if (!wrapper) return;
  
-<script> +            const headers = wrapper.querySelectorAll('.age-header');
-    document.addEventListener('DOMContentLoaded', () => { +
-        const headers = document.querySelectorAll('.age-header');+
  
-        headers.forEach(header => { +            headers.forEach(header => { 
-            header.addEventListener('click', () => { +                header.addEventListener('click', () => { 
-                const content = header.nextElementSibling; +                    const content = header.nextElementSibling; 
-                const icon = header.querySelector('.toggle-icon');+                    const icon = header.querySelector('.toggle-icon');
  
-                // Toggle class for animation +                    // Toggle class for animation 
-                content.classList.toggle('open'); +                    content.classList.toggle('open'); 
-                icon.classList.toggle('rotate'); +                    icon.classList.toggle('rotate'); 
- +                });
-                // Optional: Close others (Accordion style) - currently disabled to allow multiple open +
-                // headers.forEach(otherHeader => { +
-                //     if (otherHeader !== header) { +
-                //         otherHeader.nextElementSibling.classList.remove('open'); +
-                //         otherHeader.querySelector('.toggle-icon').classList.remove('rotate'); +
-                //     } +
-                // });+
             });             });
-        }); +        })(); 
-    }); +    </script> 
-</script> +</div>
- +
-</body>+
 </html> </html>
courses/ast100/0.1769412386.txt.gz · Last modified: by asad
Donate Powered by PHP Valid HTML5 Valid CSS Driven by DokuWiki