:root{--black:#050505;--white:#f2f0eb;--acid:#d8ff3e}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--black);color:var(--white);font-family:Manrope,sans-serif;overflow-x:hidden}.noir{height:240vh;background:#050505}.noir__stage{position:sticky;top:0;height:100vh;overflow:hidden;isolation:isolate;background:#111}.noir__video{position:absolute;inset:-4%;width:108%;height:108%;object-fit:cover;filter:grayscale(1) contrast(1.07);transform:scale(var(--video-scale,1));transition:filter .5s}.noir__veil{position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.25),transparent 43%,rgba(0,0,0,.46)),linear-gradient(0deg,rgba(0,0,0,.58),transparent 42%,rgba(0,0,0,.12));z-index:1}.noir__smoke{position:absolute;inset:0;width:100%;height:100%;z-index:4;pointer-events:none;mix-blend-mode:multiply}.noir__grain{position:absolute;inset:-60%;z-index:5;opacity:.12;pointer-events:none;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.7'/%3E%3C/svg%3E");animation:grain .18s steps(2) infinite}.noir__nav{position:absolute;z-index:8;top:0;left:0;right:0;height:82px;padding:0 4vw;display:grid;grid-template-columns:1fr 1fr 1fr;align-items:center;border-bottom:1px solid rgba(255,255,255,.22);font:400 9px DM Mono;letter-spacing:.14em;text-transform:uppercase}.noir__logo{color:#fff;text-decoration:none;font:500 14px Manrope;letter-spacing:.16em}.noir__logo i{display:inline-block;width:8px;height:8px;margin-right:12px;border-radius:50%;background:var(--acid);box-shadow:0 0 18px var(--acid)}.noir__logo span{margin-left:8px;color:#aaa;font-weight:300}.noir__nav p{text-align:center}.noir__sound{justify-self:end;border:0;background:transparent;color:#fff;text-transform:uppercase;font:inherit;cursor:pointer}.noir__scene{position:absolute;z-index:7;inset:82px 0 0;padding:8vh 6vw;transition:opacity .25s,transform .35s;pointer-events:none}.noir__scene--one{display:flex;flex-direction:column;justify-content:center;align-items:flex-end;text-align:right;opacity:calc(1 - var(--scene-one,0));transform:translate3d(calc(var(--scene-one,0)*-7vw),0,0)}.noir__scene--two{display:flex;flex-direction:column;justify-content:center;opacity:var(--scene-two,0);transform:translate3d(calc((1 - var(--scene-two,0))*8vw),0,0)}.noir__kicker{font:500 9px DM Mono;letter-spacing:.2em;text-transform:uppercase;color:var(--acid)}.noir__kicker:before{content:"";display:inline-block;width:46px;height:1px;margin:0 12px 3px 0;background:currentColor}.noir h1,.noir h2{margin:16px 0;line-height:.78;letter-spacing:-.075em;font-weight:500}.noir h1{font-size:clamp(70px,10.5vw,190px)}.noir h1 span,.noir h1 strong{display:block}.noir h1 strong{font-weight:300;color:transparent;-webkit-text-stroke:1px rgba(255,255,255,.8)}.noir h2{font-size:clamp(64px,9vw,154px)}.noir h2 em{font-family:Georgia,serif;font-weight:400;color:var(--acid)}.noir__copy{font:300 12px/1.75 DM Mono;color:#c7c7c7}.noir__cta{pointer-events:auto;width:270px;margin-top:25px;padding:16px 18px;display:flex;justify-content:space-between;align-items:center;border:1px solid rgba(255,255,255,.6);border-radius:100px;color:#fff;text-decoration:none;font:500 10px DM Mono;text-transform:uppercase;transition:.3s}.noir__cta:hover{background:var(--acid);border-color:var(--acid);color:#080808}.noir__coords{position:absolute;z-index:7;left:4vw;bottom:30px;display:flex;gap:18px;font:400 8px DM Mono;letter-spacing:.14em}.noir__hint{position:absolute;z-index:7;right:4vw;bottom:26px;display:flex;align-items:center;gap:12px;font:400 8px/1.5 DM Mono;letter-spacing:.1em;text-transform:uppercase}.noir__hint i{width:32px;height:32px;border:1px solid rgba(255,255,255,.55);border-radius:50%;position:relative}.noir__hint i:after{content:"";position:absolute;width:4px;height:4px;background:var(--acid);border-radius:50%;left:13px;top:13px;animation:pulse 1.7s infinite}.noir__progress{position:absolute;z-index:8;left:0;bottom:0;width:100%;height:2px;background:rgba(255,255,255,.12)}.noir__progress i{display:block;width:calc(var(--progress,0)*100%);height:100%;background:var(--acid)}.after{min-height:100vh;padding:10vw 7vw;display:flex;flex-direction:column;justify-content:center;background:#e9e5dc;color:#121212}.after p{font:500 10px DM Mono;letter-spacing:.16em}.after h2{margin:35px 0;font-size:clamp(54px,8vw,130px);line-height:.9;letter-spacing:-.07em;font-weight:400}.after h2 em{font-family:Georgia,serif;font-weight:400}.after a{width:230px;padding:16px 18px;border:1px solid #222;border-radius:90px;color:#111;text-decoration:none;display:flex;justify-content:space-between;font:500 10px DM Mono;text-transform:uppercase}.after a:hover{background:#111;color:#fff}@keyframes grain{0%{transform:translate(0)}25%{transform:translate(3%,-2%)}50%{transform:translate(-2%,3%)}75%{transform:translate(2%,2%)}100%{transform:translate(-3%,-3%)}}@keyframes pulse{50%{transform:scale(3);opacity:0}}@media(max-width:760px){.noir{height:210vh}.noir__nav{height:65px;padding:0 20px;grid-template-columns:1fr 1fr}.noir__nav p{display:none}.noir__scene{inset:65px 0 0;padding:9vh 22px;justify-content:flex-end!important;padding-bottom:120px}.noir__scene--one{align-items:flex-start;text-align:left}.noir h1{font-size:18vw}.noir h2{font-size:17vw}.noir__copy{font-size:10px}.noir__coords{left:22px}.noir__hint{right:22px}.noir__hint span{display:none}.noir__video{inset:0;width:100%;height:100%;object-position:42% center}.after{padding:100px 24px}}
@media(prefers-reduced-motion:reduce){.noir__grain{animation:none}.noir__scene{transition:none}}