*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
body{background:#1A1A1A;color:#E0E0E0;font-family:'Source Serif 4',serif;font-weight:400;font-size:clamp(1rem,1.6vw,1.125rem);line-height:1.78;overflow:hidden;letter-spacing:0.005em;height:100vh}

/* Left Panel */
.left-panel{position:fixed;top:0;left:0;width:38.2vw;height:100vh;background:#2E2E2E;z-index:10;display:flex;flex-direction:column;justify-content:space-between;padding:clamp(2rem,4vh,4rem) clamp(1rem,2vw,2rem);border-right:1px solid #787878;overflow:hidden}

.title-fragments{font-family:'Instrument Serif',serif;font-size:clamp(3rem,8vw,7.5rem);color:#F5F5F5;letter-spacing:-0.03em;line-height:0.92;position:relative;left:-1.5vw;overflow:hidden}
.frag{display:inline-block;animation:fragPulse 12s ease-in-out infinite}
.frag-a{animation-delay:1s}.frag-n{animation-delay:2.5s}.frag-s{animation-delay:4s}.frag-o{animation-delay:5.5s}.frag-dot{animation-delay:7s}.frag-d{animation-delay:8s}.frag-a2{animation-delay:9.5s}.frag-y{animation-delay:11s}
@keyframes fragPulse{0%,100%{color:#F5F5F5;opacity:1}50%{color:#787878;opacity:0.6}}

/* Timeline */
.timeline{flex:1;display:flex;align-items:center;padding:2rem 0}
.timeline-track{position:relative;width:1px;height:80%;background:#4A4A4A;margin-left:clamp(1rem,3vw,3rem)}
.timeline-line{position:absolute;top:0;left:0;width:1px;height:0;background:#F5F5F5;transition:height 1.2s cubic-bezier(0.22,1,0.36,1)}
.timeline-tick{position:absolute;left:-6px;width:13px;height:1px;background:#787878}
.tick-1{top:0}.tick-2{top:33%}.tick-3{top:66%}.tick-4{top:100%}
.tick-label{position:absolute;left:20px;top:-6px;font-family:'Space Grotesk',sans-serif;font-weight:500;font-size:clamp(0.625rem,1vw,0.75rem);text-transform:uppercase;letter-spacing:0.14em;color:#787878;white-space:nowrap;opacity:0.4;transition:opacity 0.6s ease-out,transform 0.6s ease-out,color 0.6s}
.tick-label.active{opacity:1;color:#F5F5F5;transform:translateY(-2px)}

/* Atom Wireframe */
.atom-wireframe{position:relative;width:80px;height:80px;margin-bottom:1rem}
.orbit{position:absolute;border:0.5px solid #787878;border-radius:50%;animation:orbitSpin 20s linear infinite}
.orbit-1{width:80px;height:40px;top:20px;left:0;transform:rotateX(60deg)}
.orbit-2{width:70px;height:35px;top:22px;left:5px;transform:rotateX(60deg) rotateZ(60deg);animation-duration:25s;animation-direction:reverse}
.orbit-3{width:60px;height:30px;top:25px;left:10px;transform:rotateX(60deg) rotateZ(120deg);animation-duration:30s}
.nucleus{position:absolute;width:6px;height:6px;background:#F5F5F5;border-radius:50%;top:37px;left:37px}
@keyframes orbitSpin{to{transform:rotateX(60deg) rotateZ(360deg)}}

/* Right Panel */
.right-panel{position:relative;width:61.8vw;margin-left:38.2vw;height:100vh;overflow-y:auto;background-color:#1A1A1A;transition:background-color 1.8s cubic-bezier(0.22,1,0.36,1);
background-image:
    repeating-linear-gradient(0deg,rgba(74,74,74,0.15) 0px,rgba(74,74,74,0.15) 0.5px,transparent 0.5px,transparent 60px),
    repeating-linear-gradient(90deg,rgba(74,74,74,0.15) 0px,rgba(74,74,74,0.15) 0.5px,transparent 0.5px,transparent 60px),
    repeating-linear-gradient(0deg,rgba(74,74,74,0.25) 0px,rgba(74,74,74,0.25) 0.5px,transparent 0.5px,transparent 300px),
    repeating-linear-gradient(90deg,rgba(74,74,74,0.25) 0px,rgba(74,74,74,0.25) 0.5px,transparent 0.5px,transparent 300px)}

/* Phases */
.phase{min-height:100vh;padding:clamp(2rem,6vh,8rem) clamp(1.5rem,4vw,4rem);position:relative}
.phase-content{max-width:52ch}
.phase-heading{font-family:'Instrument Serif',serif;font-weight:400;font-size:clamp(3rem,8vw,7.5rem);color:#F5F5F5;letter-spacing:-0.03em;line-height:0.92;margin-bottom:2rem}
.phase-body{color:#E0E0E0;max-width:52ch;margin-bottom:1.5rem}
.phase-label{font-family:'Space Grotesk',sans-serif;font-weight:500;font-size:clamp(0.625rem,1vw,0.75rem);text-transform:uppercase;letter-spacing:0.14em;color:#787878;display:block;margin-top:3rem}

.section-rule{border:none;height:1px;background:#4A4A4A;width:23.6%;margin:0;margin-top:2rem;margin-bottom:0}

/* Phase-specific spacing */
.phase-diamond{padding-top:15vh}
.phase-fullerene{padding-top:35vh}
.phase-graphite{padding-top:10vh}
.phase-void{padding-top:30vh}

/* Fullerene tilt */
.fullerene-tilt{transform:rotate(2.5deg)}

/* Molecule Renders */
.render-container{margin:2rem 0;opacity:0;transform:scale(1.15);filter:blur(6px);transition:opacity 1.4s cubic-bezier(0.16,1,0.3,1),transform 1.4s cubic-bezier(0.16,1,0.3,1),filter 1.4s cubic-bezier(0.16,1,0.3,1)}
.render-container.visible{opacity:1;transform:scale(1);filter:blur(0)}
.molecule-render{width:100%;max-width:400px;height:auto}
.render-diamond{mix-blend-mode:screen;opacity:0}
.render-diamond.visible{opacity:0.4}

.render-fullerene{position:relative;left:-15vw;width:140%}
.fullerene-svg{max-width:none;width:100%}

.render-graphene .molecule-render{max-width:600px;width:100%}

/* Phase backgrounds */
.right-panel.bg-diamond{background-color:#1A1A1A}
.right-panel.bg-fullerene{background-color:#2E2E2E}
.right-panel.bg-graphite{background-color:#0A0A0A}
.right-panel.bg-void{background-color:#0A0A0A}

/* Phase text adjustments */
.phase-fullerene .phase-heading{color:#E0E0E0}
.phase-graphite .phase-heading{color:#B0B0B0}
.phase-void .phase-heading{color:#4A4A4A}
.void-text{color:#4A4A4A}

/* Overlay text on graphene */
.overlay-text{position:relative;z-index:2;color:#F5F5F5}

/* Reveals */
[data-reveal]{opacity:0;transform:translateY(20px);transition:opacity 0.7s ease-out,transform 0.7s ease-out}
[data-reveal].visible{opacity:1;transform:translateY(0)}
.fullerene-tilt [data-reveal].visible{transform:translateY(0)}

/* Coda */
.coda{min-height:60vh;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;padding:clamp(2rem,6vh,8rem) clamp(1.5rem,4vw,4rem)}
.coda-text{font-family:'Instrument Serif',serif;font-size:clamp(2rem,5vw,4rem);color:#4A4A4A;letter-spacing:-0.03em}
.coda-stamp{font-family:'Space Grotesk',sans-serif;font-weight:500;font-size:clamp(0.625rem,1vw,0.75rem);text-transform:uppercase;letter-spacing:0.14em;color:#4A4A4A;margin-top:1rem}

/* Mobile */
@media(max-width:960px){
    body{overflow:auto;height:auto}
    .left-panel{position:sticky;top:0;width:100vw;height:30vh;border-right:none;border-bottom:1px solid #787878;z-index:10;flex-direction:row;align-items:center;gap:2rem}
    .title-fragments{font-size:clamp(1.5rem,5vw,2.5rem)}
    .timeline{height:auto;padding:0}
    .timeline-track{height:60px;margin-left:1rem}
    .atom-wireframe{display:none}
    .right-panel{width:100vw;margin-left:0;height:auto;overflow-y:visible}
    .render-fullerene{left:0;width:100%}
}