*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
body{background:#0D0D0D;color:#E8E0D4;font-family:'IBM Plex Mono',monospace;font-weight:400;font-size:clamp(0.875rem,1.1vw,1.125rem);line-height:1.75;overflow-x:hidden}

.svg-defs{position:absolute;width:0;height:0}

/* Grid overlay */
.grid-overlay{position:fixed;inset:0;z-index:1;pointer-events:none;background:repeating-linear-gradient(90deg,rgba(58,58,58,0.25) 0px,rgba(58,58,58,0.25) 1px,transparent 1px,transparent 60px),repeating-linear-gradient(0deg,rgba(58,58,58,0.25) 0px,rgba(58,58,58,0.25) 1px,transparent 1px,transparent 60px)}

/* Grain layer */
.grain-layer{position:fixed;inset:0;z-index:2;pointer-events:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='0.08'/%3E%3C/svg%3E");opacity:0.04}

.grain-heavy{position:absolute;inset:0;pointer-events:none;background:inherit;z-index:3}
.grain-heavy::after{content:'';position:absolute;inset:0;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='0.12'/%3E%3C/svg%3E");opacity:0.1}
.grain-extra{position:absolute;inset:0;pointer-events:none}
.grain-extra::after{content:'';position:absolute;inset:0;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='0.15'/%3E%3C/svg%3E");opacity:0.12}

/* Scenes */
.scene{min-height:100vh;position:relative;padding:clamp(40px,6vw,80px) clamp(16px,4vw,48px);z-index:5}

.scene-label{font-family:'Orbitron',sans-serif;font-weight:400;font-size:0.75rem;letter-spacing:0.25em;color:#6B6B6B;text-transform:uppercase;display:block;margin-bottom:clamp(16px,3vw,32px)}

/* Data readouts */
.data-readout{position:absolute;z-index:10;font-family:'Orbitron',sans-serif;font-weight:400;font-size:0.65rem;letter-spacing:0.15em;color:#6B6B6B}
.dr-1{bottom:20px;right:20px}
.dr-2{top:20px;right:20px}
.dr-3{bottom:20px;left:20px}

/* INTAKE */
.scene-intake{display:flex;flex-direction:column;justify-content:center;position:relative;background:radial-gradient(ellipse at 30% 40%,#1a0c00 0%,#0D0D0D 60%)}
.intake-content{display:flex;align-items:center;justify-content:space-between;flex:1}
.intake-left{flex:0 0 55%;padding-right:clamp(16px,4vw,48px)}
.hero-title{font-family:'Share Tech Mono',monospace;font-size:clamp(2.5rem,8vw,7rem);letter-spacing:0.15em;text-transform:uppercase;color:#D4620A;line-height:0.95}
.hero-sub{font-family:'IBM Plex Mono',monospace;font-weight:400;font-size:clamp(0.9rem,1.2vw,1.1rem);color:#E8E0D4;margin-top:clamp(12px,2vw,24px);max-width:40ch}

.particle-field{flex:0 0 40%;height:80vh;position:relative;overflow:hidden}
.particle{position:absolute;border-radius:2px;opacity:0.7;animation:particleFall linear infinite}
@keyframes particleFall{0%{transform:translateY(-20px) translateX(0);opacity:0.7}100%{transform:translateY(80vh) translateX(20px);opacity:0}}

.chevron-down{position:absolute;bottom:clamp(40px,6vw,80px);right:clamp(40px,6vw,80px);animation:pulseChevron 2s ease-in-out infinite}
@keyframes pulseChevron{0%,100%{opacity:0.5;transform:translateY(0)}50%{opacity:1;transform:translateY(6px)}}

/* SORT */
.scene-sort{display:flex;flex-direction:column;align-items:center}
.sort-columns{display:flex;gap:2px;width:100%;max-width:1100px;margin-top:clamp(16px,3vw,32px)}
.sort-col{flex:1;min-height:70vh;background:#0D0D0D;border:1px solid #3A3A3A;border-top:3px solid var(--col-accent);padding:clamp(20px,3vw,32px);transition:transform 0.28s cubic-bezier(0.34,1.56,0.64,1),box-shadow 0.28s ease}
.sort-col:hover{transform:scale(1.04);box-shadow:0 0 8px rgba(255,140,0,0.2);z-index:10}
.col-header{font-family:'Orbitron',sans-serif;font-weight:400;font-size:0.75rem;letter-spacing:0.25em;color:var(--col-accent);display:block;margin-bottom:16px;text-transform:uppercase}
.sort-col p{color:#E8E0D4;font-size:clamp(0.85rem,1.1vw,1rem)}

/* TRANSFORM */
.scene-transform{display:flex;flex-direction:column}
.transform-split{display:flex;flex:1;min-height:80vh;position:relative}
.split-raw{flex:1;background:radial-gradient(ellipse at center,#1a0800,#0D0D0D);position:relative;padding:clamp(24px,4vw,48px);display:flex;flex-direction:column;justify-content:space-between}
.split-pure{flex:1;background:linear-gradient(135deg,rgba(212,98,10,0.15),rgba(255,140,0,0.08)),#0D0D0D;padding:clamp(24px,4vw,48px);display:flex;flex-direction:column;justify-content:space-between;align-items:flex-end}
.split-divider{width:2px;background:#FF8C00;box-shadow:0 0 20px #FF8C00,0 0 40px rgba(255,140,0,0.3);flex-shrink:0;transition:margin-left 0.8s ease}
.split-label{font-family:'Share Tech Mono',monospace;font-size:clamp(1rem,2vw,1.5rem);text-transform:uppercase;letter-spacing:0.08em}
.tl{color:#6B6B6B}
.tr{color:#D4620A;font-family:'Orbitron',sans-serif;font-size:clamp(0.85rem,1.4vw,1.1rem);letter-spacing:0.15em}
.bl{color:#E8E0D4;max-width:45ch}
.br{color:#FF8C00;font-family:'Share Tech Mono',monospace;font-size:clamp(1.2rem,2.5vw,2rem);letter-spacing:0.1em;text-shadow:0 0 20px rgba(255,140,0,0.5)}

/* OUTPUT */
.scene-output{display:flex;flex-direction:column}
.output-grid{display:grid;grid-template-columns:3fr 2fr;grid-template-rows:1fr 1fr;gap:2px;flex:1;min-height:80vh}
.output-cell{background:#0D0D0D;border:1px solid #3A3A3A;padding:clamp(20px,3vw,40px);display:flex;align-items:center;justify-content:center;transition:transform 0.28s cubic-bezier(0.34,1.56,0.64,1),box-shadow 0.28s ease;position:relative;overflow:hidden}
.output-cell:hover{transform:scale(1.03);box-shadow:0 0 8px rgba(255,140,0,0.15)}
.cell-bl{grid-column:1;grid-row:2}
.cell-br{grid-column:2;grid-row:2}
.output-statement{font-family:'Share Tech Mono',monospace;font-size:clamp(1.4rem,3vw,2.8rem);text-transform:uppercase;color:#D4620A;letter-spacing:0.06em;line-height:1.2}
.data-block{display:flex;flex-direction:column;gap:8px}
.data-line{font-family:'Orbitron',sans-serif;font-weight:400;font-size:clamp(0.7rem,1vw,0.85rem);letter-spacing:0.12em;color:#D4620A}
.recycle-arrow-bg{position:absolute;opacity:0.1;animation:slowSpin 60s linear infinite}
@keyframes slowSpin{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}

/* CYCLE */
.scene-cycle{display:flex;align-items:center;justify-content:center;background:radial-gradient(ellipse at center,#1a0800,#0D0D0D);position:relative}
.cycle-center{text-align:center}
.cycle-svg{display:block;margin:0 auto clamp(16px,3vw,32px)}
.cycle-arrow{stroke-dasharray:300;stroke-dashoffset:300;transition:stroke-dashoffset 1.5s ease-out}
.cycle-visible .a1{stroke-dashoffset:0;transition-delay:0s}
.cycle-visible .a2{stroke-dashoffset:0;transition-delay:0.4s}
.cycle-visible .a3{stroke-dashoffset:0;transition-delay:0.8s}
.cycle-visible .cycle-svg{animation:slowSpin 60s linear infinite;animation-delay:2s}
.cycle-text{font-family:'Share Tech Mono',monospace;font-size:clamp(1.1rem,2vw,1.5rem);text-transform:uppercase;color:#E8E0D4;letter-spacing:0.08em}

/* Reveal */
[data-reveal]{opacity:0;transform:translateY(16px);transition:opacity 0.6s cubic-bezier(0.25,0.1,0.25,1),transform 0.6s cubic-bezier(0.25,0.1,0.25,1)}
[data-reveal].visible{opacity:1;transform:translateY(0)}

/* Counter */
.counter{font-variant-numeric:tabular-nums}

/* Grid pulse */
@keyframes gridPulse{0%,100%{opacity:0.25}50%{opacity:0.4}}
.scene-intake .grid-overlay{animation:gridPulse 3s ease-in-out infinite}

/* Responsive */
@media(max-width:1024px){
.sort-columns{flex-direction:column;gap:12px}
.sort-col{min-height:auto}
.intake-content{flex-direction:column}
.intake-left{flex:none;padding-right:0;margin-bottom:24px}
.particle-field{height:30vh;flex:none}
.transform-split{flex-direction:column}
.split-divider{width:100%;height:2px}
.output-grid{grid-template-columns:1fr}
.cell-bl{grid-column:auto;grid-row:auto}
.cell-br{grid-column:auto;grid-row:auto}
}
@media(max-width:600px){
.hero-title{font-size:clamp(2rem,12vw,4rem)}
.output-statement{font-size:clamp(1.2rem,5vw,2rem)}
}