html{line-height:1.15;-webkit-text-size-adjust:100%}body{margin:0}main{display:block}h1{font-size:2em;margin:.67em 0}hr{box-sizing:content-box;height:0;overflow:visible}pre{font-family:monospace,monospace;font-size:1em}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button,input{overflow:visible}button,select{text-transform:none}button,[type=button],[type=reset],[type=submit]{-webkit-appearance:button}button::-moz-focus-inner,[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:.35em .75em .625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{vertical-align:baseline}textarea{overflow:auto}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}@font-face{font-family:Geist Sans;src:url(https://assets.codepen.io/605876/GeistVF.ttf) format("truetype")}*,*:after,*:before{box-sizing:border-box}html{scroll-snap-type:y mandatory}body{min-height:100vh;font-family:Geist Sans,SF Pro Text,SF Pro Icons,AOS Icons,Helvetica Neue,Helvetica,Arial,sans-serif,system-ui;font-weight:80;background:#000;color:#e6e6e6;overflow-x:hidden}p{max-width:40ch}section:nth-of-type(1){scroll-snap-align:center;height:100vh}section:nth-of-type(2){scroll-snap-align:start}article{min-height:100vh}:is(h1,h2){font-weight:70;font-size:clamp(2.5rem,3.35vw + 1rem,8rem);letter-spacing:-.075ch;margin:0}h1{color:#e6e6e6}:is(section,article){position:relative}nav{position:fixed;top:0;width:100%;padding:1rem;z-index:999;display:flex;justify-content:space-between}a:first-of-type{width:48px;aspect-ratio:1;display:grid;place-items:center;color:#fff}a:last-of-type{background:#05ffe2;color:#000;padding:1rem 2rem;border-radius:22px;text-decoration:none;font-weight:120;transition:background .2s}a:last-of-type:is(:hover,:focus-visible){background:#00ccb4}.content{margin:0 auto;width:900px;max-width:100%;height:100%;z-index:2;position:absolute;inset:0;padding:1rem}.fixed img{height:100%;width:150%;-o-object-fit:cover;object-fit:cover;z-index:-1;position:absolute;inset:0 0 0 50%;translate:-50% 0;filter:brightness(.5)}section:first-of-type img{left:50%;translate:-50% 0}section:first-of-type{padding:2rem 1rem;display:grid;align-content:end;justify-content:start}section:first-of-type .fixed{z-index:5}section:first-of-type .fixed .content{margin:0 auto;width:900px;max-width:100%;display:grid;align-content:center;justify-content:start;padding:6rem 2rem;height:100%}section:first-of-type{background:#000}section:first-of-type p{font-size:clamp(1rem,.2vw + 1rem,2rem)}section:nth-of-type(2) article:first-of-type .fixed{z-index:2}section:nth-of-type(2) .content{display:grid;padding:4rem 1rem;align-content:center}section:nth-of-type(2) article:first-of-type .content{align-content:end}section:nth-of-type(2) article:first-of-type .fixed:after{content:"";position:absolute;inset:0;background:#00000040}section:nth-of-type(2) article:first-of-type h2{padding:1rem 0}section:nth-of-type(2) article:nth-of-type(2) .fixed{background:#000;z-index:2}section:nth-of-type(2) article:nth-of-type(3) .content{align-content:start}section:nth-of-type(2) article:nth-of-type(3) .fixed{z-index:2}section:nth-of-type(2) article:nth-of-type(3) img{filter:saturate(.5) brightness(.5)}.text-blocks{max-width:100%;width:40ch;justify-self:end;display:grid;place-items:center;gap:2rem 0}.chat-container{height:100vh;width:100%;position:sticky;top:0;display:grid;place-items:center}.text-blocks p{display:inline-block;border-radius:6px;margin:0;font-size:clamp(1.5rem,.5vw + 1rem,4rem);font-weight:120}.text-blocks p:nth-of-type(2n){justify-self:end;text-align:right;color:#05ffe2}.text-blocks p:nth-of-type(odd){justify-self:start}.filler{display:none}@supports (animation-timeline: scroll()){article{view-timeline:--article}.fixed{position:fixed;inset:0}.static{position:absolute;inset:0;z-index:6}.filler{display:block;width:100%;position:absolute;bottom:30vh;padding:1rem}.text-blocks p{animation:slide-in,fade-in;animation-fill-mode:both;animation-timing-function:linear;animation-timeline:--article}.text-blocks p:nth-of-type(1){animation-range:entry-crossing 50% entry-crossing 55%}.text-blocks p:nth-of-type(2){animation-range:entry-crossing 55% entry-crossing 60%}.text-blocks p:nth-of-type(3){animation-range:entry-crossing 60% entry-crossing 65%}.text-blocks p:nth-of-type(4){animation-range:entry-crossing 65% entry-crossing 70%}.text-blocks p:nth-of-type(5){animation-range:entry-crossing 70% entry-crossing 75%}section:nth-of-type(2) article:last-of-type{z-index:5}section:nth-of-type(2) article:nth-of-type(3){height:400vh}section:nth-of-type(2) article:nth-of-type(3) h2{margin-top:80vh}section:nth-of-type(2) article:last-of-type .fixed{clip-path:ellipse(220% 200% at 50% 300%);animation:unclip both linear;animation-timeline:--article;animation-range:entry 20% entry 80%}.filler h2{animation:fade-away,fade-out;animation-timing-function:linear;animation-fill-mode:both;animation-timeline:--article;animation-range:exit 40% exit 75%,exit 70% exit 90%}.loud-wrap{clip-path:inset(0 0 0 0);animation:unmask both linear;animation-timeline:--article;animation-range:entry 20% entry 80%;-webkit-mask:linear-gradient(white 50%,transparent) 0 100% / 100% 200% no-repeat;mask:linear-gradient(white 50%,transparent) 0 100% / 100% 200% no-repeat}.text-wrap{position:sticky;bottom:4rem;transform-origin:50% 0;animation:fade-away both linear,fade-out both linear;animation-timeline:--article;animation-range:exit 40% exit 75%,exit 70% exit 100%}.text-blocks{animation:fade-out both linear;animation-timeline:--article;animation-range:entry-crossing 75% entry-crossing 100%}section:nth-of-type(2) article:nth-of-type(3) .fixed{animation:fade-in both linear,fade-out both linear;animation-timeline:--article,--article;animation-range:entry 45% exit-crossing 0%,exit 0% exit 15%}section:nth-of-type(2) article:nth-of-type(2) .fixed{animation:fade-in;animation-fill-mode:both;animation-timing-function:linear;animation-timeline:--article;animation-range:entry 60% exit 30%}section:nth-of-type(2) article:nth-of-type(2) h2{animation:slide-in,fade-in,fade-away,fade-out;animation-fill-mode:both;animation-timing-function:linear;animation-timeline:view(),view(),--article,--article;animation-range:entry 100% cover 25%,entry 100% cover 35%,exit 20% exit 40%,exit 40% exit 50%}section:nth-of-type(2) article:first-of-type h2{animation:slide-up both linear;animation-timeline:--article;animation-range:entry 20% entry 80%}section:nth-of-type(2) article:first-of-type img{animation:scale-down both linear;animation-timeline:--article;animation-range:entry}section:nth-of-type(2) article:first-of-type .fixed{clip-path:ellipse(220% 200% at 50% 300%);animation:unclip both linear;animation-timeline:--article;animation-range:entry 0 entry 100%}section:first-of-type{view-timeline:--section}section:first-of-type .fixed{animation:scale-and-move both linear,fade-out both linear;animation-timeline:--section;animation-range:exit 0% exit 50%,exit 0% exit 25%;transform-origin:50% 0}@keyframes slide-in{0%{translate:0 100%}}@keyframes fade-in{0%{opacity:0}}@keyframes slide-up{0%{translate:0 100%}}@keyframes fade-away{to{filter:blur(4rem)}}@keyframes unmask{to{-webkit-mask-position:0 0;mask-position:0 0}}@keyframes scale-down{0%{scale:5}}@keyframes unclip{to{clip-path:ellipse(220% 200% at 50% 175%)}}@keyframes fade-out{to{opacity:0}}@keyframes scale-and-move{to{translate:0 -10%;scale:.35 .5}}}
