:root{--ink: #17140f;--paper: #ede8df;--paper-bright: #fbfaf5;--safelight: #cf3a25;--ink-soft: rgba(23, 20, 15, .62)}*{margin:0;padding:0;box-sizing:border-box}body{font-family:DM Mono,monospace;background-color:var(--paper);color:var(--ink)}p{font-family:DM Mono,monospace;font-size:14px}img{width:100%;height:100%;object-fit:cover}section{position:relative;width:100vw;height:100svh;padding:2em}.kicker{font-size:12px;font-weight:500;text-transform:uppercase;letter-spacing:.18em;color:var(--safelight)}.hero{background:url(/c/image-explosion-scroll-animation/hero.jpg) no-repeat 50% 35%;background-size:cover;display:flex;flex-direction:column;justify-content:space-between}.site-head{display:flex;justify-content:space-between;align-items:baseline}.wordmark{font-family:Anton,sans-serif;font-size:1.4rem;text-transform:uppercase;letter-spacing:.04em;color:var(--ink);text-decoration:none}.site-nav{display:flex;gap:1.75em}.site-nav a{font-size:12px;text-transform:uppercase;letter-spacing:.12em;color:var(--ink);text-decoration:none}.site-nav a:hover{color:var(--safelight)}.hero-copy{max-width:620px;display:grid;gap:1em;justify-items:start}.hero-copy .kicker{background:#fbfaf5e0;padding:.5em .75em}.hero-copy h1{font-family:Anton,sans-serif;font-weight:400;font-size:clamp(3rem,7.5vw,6.5rem);line-height:.92;text-transform:uppercase;letter-spacing:.01em}.hero-sub{max-width:40ch;line-height:1.6;color:var(--ink-soft)}.about{color:var(--ink);background-color:var(--paper);display:flex;justify-content:center;align-items:center}.about-inner{width:min(680px,100%);display:grid;gap:1.4em}.about h2{font-family:Anton,sans-serif;font-weight:400;font-size:clamp(2.4rem,5vw,4rem);line-height:1;text-transform:uppercase}.about-body{font-size:15px;line-height:1.75;color:var(--ink-soft)}.process{list-style:none;margin-top:1em}.process li{display:flex;align-items:baseline;gap:1.25em;padding:.85em 0;border-top:1px solid rgba(23,20,15,.18);font-size:13px;text-transform:uppercase;letter-spacing:.08em}.process li:last-child{border-bottom:1px solid rgba(23,20,15,.18)}.process li span{font-weight:500;color:var(--safelight)}.outro{background:url(/c/image-explosion-scroll-animation/outro.jpg) no-repeat 50% 50%;background-size:cover;display:flex;align-items:flex-end}.outro-caption{font-size:12px;text-transform:uppercase;letter-spacing:.12em;color:#fbfaf5d9}footer{position:relative;width:100vw;height:75svh;background-color:#14110d;color:var(--paper-bright);padding:2em;display:flex;flex-direction:column;justify-content:space-between;align-items:center;overflow:hidden}footer h1{text-transform:uppercase;font-family:Anton,sans-serif;font-size:clamp(3rem,11vw,10rem);font-weight:400;line-height:.9;text-align:center;max-width:9em}.copyright-info{width:100%;display:flex;justify-content:space-between;gap:1em}.copyright-info p{font-size:12px;text-transform:uppercase;letter-spacing:.1em;color:#fbfaf5a8}.explosion-container{position:absolute;bottom:0;left:0;width:100%;height:200%;pointer-events:none}.explosion-particle-img{position:absolute;bottom:-200px;left:50%;width:150px;height:auto;object-fit:cover;transform:translate(-50%);will-change:transform;border:6px solid var(--paper-bright);background:var(--paper-bright);box-shadow:0 6px 22px #0006}@media(max-width:768px){section{padding:1.25em}.site-nav{gap:1em}.site-nav a:nth-child(n+3){display:none}.hero{background-position:62% 30%}.hero-copy h1{font-size:clamp(2.6rem,13vw,4rem)}.about-inner{width:100%}.about-body{font-size:14px}.process li{font-size:12px;letter-spacing:.05em}footer{padding:1.25em;height:70svh}footer h1{font-size:clamp(2.4rem,15vw,4.5rem)}.copyright-info{flex-direction:column;gap:.35em;align-items:flex-start}.explosion-particle-img{width:110px!important;border-width:4px}}