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}*,*:after,*:before{box-sizing:border-box}body{display:grid;place-items:center;min-height:100vh;background:#e6e6e6;color:#1a1a1a;font-family:Libre Baskerville,SF Pro Text,SF Pro Icons,AOS Icons,Helvetica Neue,Helvetica,Arial,sans-serif,system-ui}body:before{--size: 60px;--line: hsl(0 0% 10% / .5);content:"";height:100vh;width:100vw;position:fixed;background:linear-gradient(90deg,var(--line) 1px,transparent 1px var(--size)) 50% 50% / var(--size) var(--size),linear-gradient(var(--line) 1px,transparent 1px var(--size)) 50% 50% / var(--size) var(--size);-webkit-mask:linear-gradient(-15deg,transparent 50%,white);mask:linear-gradient(-15deg,transparent 50%,white);top:0;transform-style:flat;pointer-events:none;z-index:-1}h1{position:relative;font-size:clamp(2rem,3vw + 1rem,8rem)}h2,p{margin:0}:root{--lower: 150px;--upper: 290px;--mid: 40vmin;--ratio: .075;--gap: clamp( var(--lower) * var(--ratio), var(--mid) * var(--ratio), var(--upper) * var(--ratio) )}section,article{height:100%;position:relative;width:100%;max-width:40ch}header{height:50vh;display:grid;place-items:end}body>section{height:25vh}main>section{height:80vh}h1 span{font-size:.5em;display:block;text-align:center;font-variant:small-caps}h1:after{content:"™";position:absolute;top:0;left:100%;font-size:.75em}.centered{display:grid;place-items:center;width:100%;max-width:100%}.centered h2{font-size:clamp(1.5rem,2vw + 1rem,6rem)}.tiles{width:clamp(var(--lower),var(--mid),var(--upper));display:flex;flex-direction:column-reverse;justify-self:center;translate:0 calc(50% + (var(--gap)))}.tile{height:var(--gap);position:relative}hr{height:2px;width:100%}@media(min-width:768px){hr{width:calc(100% + 4rem);translate:-4rem 0}.tiles{justify-self:end}}.tile:after,.tile:before{content:"";background-image:url(/demos/assets/translucent-panel.DkrnUqK_.png);position:absolute;width:100%;aspect-ratio:1160 / 521;background-size:cover;top:50%;left:50%;translate:-50% -50%}.tile:after{opacity:0;background-image:url(/demos/assets/color-panel.Dh9_qfbe.png);filter:hue-rotate(var(--r, 0deg))}.tile:nth-of-type(1):after{background-image:url(/demos/assets/bottom-panel.CmrkS4dh.png);filter:hue-rotate(var(--r, 0deg)) brightness(2)}.tile:nth-of-type(4):after{opacity:1}.content{min-height:100vh;display:grid;grid-template:1fr 1fr / 1fr;place-items:center;gap:4rem;position:sticky;top:0;margin-bottom:50vh;padding:2rem}article{display:grid;position:absolute;height:100%;grid-template-rows:auto auto 1fr;top:0;left:0;font-weight:300}article p{color:#333}footer{padding:2rem}.title-wrap{align-self:end}.content-wrap{align-self:start}:is(.title-wrap,.content-wrap){line-height:1.5;-webkit-mask:linear-gradient(transparent,white 10px calc(100% - 10px),transparent);mask:linear-gradient(transparent,white 10px calc(100% - 10px),transparent)}@media(min-width:768px){article{grid-template-rows:1fr auto 1fr}.content{grid-template:1fr / 1fr 1fr}}@supports (animation-timeline: scroll()){:root{timeline-scope:--section-one,--section-two,--section-three,--section-four}.tiles{--orig: 0;--dest: calc(-100% + var(--gap));animation:translate both linear;animation-timeline:--main;animation-range:entry 150vh exit -100vh}@media(max-width:768px){.tiles{--orig: 200%;--dest: 0%;align-self:center}}main{view-timeline-name:--main;width:100%}.section--one{view-timeline-name:--section-one}.section--two{view-timeline-name:--section-two}.section--three{view-timeline-name:--section-three}.section--four{view-timeline-name:--section-four}.section--five{height:50vh}article :is(h2,p),.tile,.tile:before,.tile:after{animation:journey both linear}article :is(h2,p),.tile,.tile:after,.tile:before{animation-range:entry 20% entry 120%}article:nth-of-type(1) :is(h2,p),.tile:nth-of-type(4):after,.tile:nth-of-type(4):before{animation-range:entry -80% entry 20%}.tile:after,.tile:before{--start: 0;--end: 0;--origin: -50% -50%;--destination: -50% -50%;--via: -50% -50%}.tile:before{--start: 1;--mid: 1;--end: .5}.tile:nth-of-type(4):after{--start: 1}.tile:nth-of-type(4){--origin: 0 -150%}.tile:nth-of-type(1):after{--start: 0;--mid: 1;--end: 1}article :is(h2,p){--origin: 0 100%;--via: 0 0;--destination: 0 -100%;--start: 0;--mid: 1;--end: 0}article:nth-of-type(4) :is(h2,p){--destination: 0 0;--end: 1}article:nth-of-type(1) :is(h2,p){--origin: 0 0;--via: 0 0;--destination: 0 -100%;--start: 1;--end: 0}.tile{--origin: 0 0;--via: 0 -150%;--destination: 0 -150%}.tile:nth-of-type(3),.tile:nth-of-type(3):after,.tile:nth-of-type(4),.tile:nth-of-type(4):after,article:nth-of-type(1) :is(h2,p),article:nth-of-type(2) :is(h2,p){animation-timeline:--section-two}.tile:nth-of-type(2),.tile:nth-of-type(2):after,article:nth-of-type(3) :is(h2,p){animation-timeline:--section-three}.tile:nth-of-type(1),.tile:nth-of-type(1):after,article:nth-of-type(4) :is(h2,p){animation-timeline:--section-four}@keyframes translate{0%{transform:translateY(var(--orig))}to{transform:translateY(var(--dest))}}@keyframes journey{0%{translate:var(--origin, 0 0);opacity:var(--start, 1)}15%,85%{translate:var(--via, 0 0);opacity:var(--mid, 1)}to{translate:var(--destination, 0 0);opacity:var(--end, 1)}}}.bear-link{color:canvasText;position:fixed;top:2rem;right:2rem;width:48px;aspect-ratio:1;display:grid;place-items:center;opacity:.8}:where(.x-link,.bear-link):is(:hover,:focus-visible){opacity:1}.bear-link svg{width:75%}