*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
body{background:#0B0E14;color:#C8C0B8;font-family:'Lora',serif;font-weight:400;font-size:clamp(1rem,1.6vw,1.125rem);line-height:1.65;overflow-x:hidden;letter-spacing:0.01em}

/* Floating atoms layer */
.floating-layer{position:fixed;inset:0;z-index:1;pointer-events:none;overflow:hidden}
.atom{position:absolute;width:8px;height:8px;background:#2ABFAA;border-radius:50%;opacity:0.15;animation:atomDrift linear infinite}
.electron-orbit{position:absolute;top:-4px;left:-4px;width:16px;height:16px;border:0.5px solid rgba(42,191,170,0.2);border-radius:50%}
.atom-1{top:12%;left:8%;animation-duration:35s;opacity:0.2}.atom-2{top:30%;right:15%;animation-duration:28s;opacity:0.12}
.atom-3{top:55%;left:25%;animation-duration:40s;opacity:0.18}.atom-4{top:75%;right:8%;animation-duration:32s;opacity:0.1}
.atom-5{top:20%;left:60%;animation-duration:45s;opacity:0.15}.atom-6{top:85%;left:45%;animation-duration:30s;opacity:0.08}
@keyframes atomDrift{0%{transform:translate(0,0)}25%{transform:translate(15px,-20px)}50%{transform:translate(-10px,15px)}75%{transform:translate(20px,5px)}100%{transform:translate(0,0)}}

.bond-frag{position:absolute;width:20px;height:1px;background:#2ABFAA;opacity:0.08;animation:atomDrift linear infinite}
.bond-frag-1{top:40%;left:30%;animation-duration:38s;transform:rotate(30deg)}
.bond-frag-2{top:60%;right:20%;animation-duration:42s;transform:rotate(-45deg)}
.bond-frag-3{top:15%;left:70%;animation-duration:36s;transform:rotate(60deg)}

main{position:relative;z-index:2}

/* Hex grid background */
.hex-grid-bg{position:absolute;inset:0;z-index:0;pointer-events:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='280' height='162'%3E%3Cpolygon points='140,0 280,40.5 280,121.5 140,162 0,121.5 0,40.5' fill='none' stroke='%232A3040' stroke-width='0.5'/%3E%3C/svg%3E");background-size:280px 162px;opacity:0.4}
.hex-grid-relaxed{background-size:320px 185px;opacity:0.3}
.hex-grid-dim{opacity:0.15}

/* Gradient meshes */
.gradient-mesh{position:absolute;inset:0;z-index:0;pointer-events:none}
.mesh-diamond{background:radial-gradient(ellipse at 30% 40%,rgba(123,94,167,0.08),transparent 60%),radial-gradient(ellipse at 70% 60%,rgba(0,229,204,0.06),transparent 50%)}
.mesh-graphene{background:radial-gradient(ellipse at 60% 30%,rgba(42,191,170,0.08),transparent 50%),radial-gradient(ellipse at 20% 70%,rgba(232,164,53,0.05),transparent 50%)}
.mesh-fullerene{background:radial-gradient(ellipse at 50% 50%,rgba(123,94,167,0.1),transparent 60%),radial-gradient(ellipse at 80% 20%,rgba(232,164,53,0.06),transparent 50%)}
.mesh-nanotube{background:radial-gradient(ellipse at 40% 80%,rgba(212,86,122,0.04),transparent 50%),radial-gradient(ellipse at 70% 20%,rgba(123,94,167,0.05),transparent 50%)}

/* Scenes */
.scene{position:relative;min-height:90vh;padding:clamp(4rem,8vh,8rem) clamp(1.5rem,4vw,4rem);overflow:hidden}

/* Scene 1: Birth */
.scene-birth{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center}
.birth-center{text-align:center;position:relative;z-index:2}
.hex-title-cell{display:inline-flex;align-items:center;justify-content:center;clip-path:polygon(25% 0%,75% 0%,100% 50%,75% 100%,25% 100%,0% 50%);background:#161B2E;padding:clamp(2rem,4vw,4rem) clamp(3rem,6vw,6rem);border:1px solid rgba(42,191,170,0.3)}
.hero-title{font-family:'Playfair Display',serif;font-weight:700;font-size:clamp(2.5rem,6vw,5rem);color:#F0ECE4;letter-spacing:0.02em}
.hero-tag{font-family:'IBM Plex Mono',monospace;font-weight:400;font-size:0.8rem;letter-spacing:0.06em;text-transform:uppercase;color:#2ABFAA;margin-top:1.5rem}

/* Section heading */
.section-heading{font-family:'Playfair Display',serif;font-weight:700;font-size:clamp(1.5rem,3vw,2.2rem);color:#F0ECE4;letter-spacing:0.02em;margin-bottom:1rem}
.section-heading:hover{text-shadow:1px 1px 0 #00E5CC}
.body-text{color:#C8C0B8;max-width:50ch;margin-bottom:1rem}
.hex-caption{font-family:'IBM Plex Mono',monospace;font-weight:400;font-size:0.75rem;letter-spacing:0.06em;text-transform:uppercase;color:#2ABFAA;display:block;margin-top:1.5rem}

/* Pixel art SVGs */
.pixel-svg{image-rendering:pixelated;image-rendering:crisp-edges}
.pixel-svg rect,.pixel-svg path,.pixel-svg circle{shape-rendering:crispEdges}

/* Scene 2: Diamond */
.diamond-layout{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,4vw,4rem);max-width:900px;margin:0 auto;align-items:center;position:relative;z-index:2}
.diamond-art{display:flex;justify-content:center}
.diamond-art .pixel-svg{width:clamp(160px,20vw,280px);height:auto}

/* Scene 3: Graphene */
.graphene-layout{display:grid;grid-template-columns:1fr;gap:clamp(2rem,4vh,3rem);max-width:800px;margin:0 auto;position:relative;z-index:2}
.graphene-art{display:flex;justify-content:center}
.pixel-wide{width:clamp(240px,50vw,500px);height:auto}

/* Scene 4: Fullerene */
.fullerene-layout{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,4vw,4rem);max-width:900px;margin:0 auto;align-items:center;position:relative;z-index:2}
.fullerene-art{display:flex;justify-content:center}
.pixel-bucky{width:clamp(100px,15vw,200px);height:auto;animation:buckyRotate 8s steps(1) infinite}
@keyframes buckyRotate{0%{transform:rotate(0deg)}25%{transform:rotate(5deg)}50%{transform:rotate(0deg)}75%{transform:rotate(-5deg)}100%{transform:rotate(0deg)}}

/* Scene 5: Nanotube */
.nanotube-layout{display:grid;grid-template-columns:auto 1fr;gap:clamp(2rem,4vw,4rem);max-width:800px;margin:0 auto;align-items:center;position:relative;z-index:2}
.nanotube-art{display:flex;justify-content:center}
.pixel-tube{width:clamp(60px,8vw,100px);height:auto}

/* Scene 6: Synthesis */
.scene-synthesis{text-align:center}
.synthesis-mosaic{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(12px,2vw,24px);max-width:600px;margin:0 auto clamp(2rem,4vh,4rem);position:relative;z-index:2}
.mosaic-cell{clip-path:polygon(25% 0%,75% 0%,100% 50%,75% 100%,25% 100%,0% 50%);background:#161B2E;border:1px solid #2A3040;padding:clamp(1.5rem,2vw,2rem);display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:clamp(100px,12vw,140px);transition:border-color 0.3s,box-shadow 0.3s}
.mosaic-cell:hover{border-color:#2ABFAA;box-shadow:0 0 20px rgba(42,191,170,0.3)}
.mini-pixel{width:48px;height:48px;margin-bottom:0.5rem}
.cell-label{font-family:'IBM Plex Mono',monospace;font-weight:400;font-size:0.6rem;letter-spacing:0.06em;text-transform:uppercase;color:#C8C0B8}
.synthesis-text{font-family:'Lora',serif;font-weight:400;font-size:clamp(1.1rem,2vw,1.4rem);color:#F0ECE4;margin-bottom:1rem;position:relative;z-index:2}
.synthesis-stamp{font-family:'IBM Plex Mono',monospace;font-weight:400;font-size:0.8rem;letter-spacing:0.06em;text-transform:uppercase;color:#2ABFAA;position:relative;z-index:2}

/* Pulse animation on hex cells */
.hex-title-cell,.mosaic-cell{animation:hexPulse 3s ease-in-out infinite}
.mosaic-cell:nth-child(2){animation-delay:0.5s}.mosaic-cell:nth-child(3){animation-delay:1s}.mosaic-cell:nth-child(4){animation-delay:1.5s}
@keyframes hexPulse{0%,100%{border-color:#2A3040}50%{border-color:rgba(42,191,170,0.4)}}

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

/* Responsive */
@media(max-width:768px){
    .diamond-layout,.fullerene-layout,.nanotube-layout{grid-template-columns:1fr;text-align:center}
    .synthesis-mosaic{grid-template-columns:repeat(2,1fr)}
    .mosaic-cell{clip-path:none;border-radius:4px}
}