*,::after,::before{box-sizing:border-box}:root{font-size:15px}body{margin:0;--color-frame-bg:#b23326;--color-text:#fff;--color-bg:#181819;--color-link:#00C;--color-link-hover:#fff;--color-menu:#fff;--color-menu-hover:#00c;--color-menu-deco:#ffffff;color:var(--color-text);background-color:var(--color-bg);--cursor-stroke:none;--cursor-fill:#00c;--cursor-stroke-width:0px;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:futura-pt,sans-serif}.js .loading::after,.js .loading::before{content:'';position:fixed;z-index:1000}.js .loading::before{top:0;left:0;width:100%;height:100%;background:var(--color-bg)}.js .loading::after{top:50%;left:50%;width:60px;height:60px;margin:-30px 0 0 -30px;opacity:1;background:#fff;animation:loaderAnim .7s linear infinite alternate forwards}@keyframes loaderAnim{to{opacity:1;transform:scale3d(.5,.5,1)}}a{text-decoration:none;color:var(--color-link);outline:0;cursor:pointer}a:focus,a:hover{color:var(--color-link-hover);outline:0}main{width:100%;overflow-x:hidden}.frame{position:relative;padding:1rem 1.5rem;width:100%;display:flex;z-index:1000;justify-content:space-between}.frame__title{font-size:2.5rem;margin:0;font-weight:400}.frame__title-wrap a{margin-left:30px;color:#fff}.frame__demos,.frame__links{margin:.5rem 0}.frame__demos a{border-bottom:1px solid currentColor;transition:.2s border-color}.frame__demos a:focus,.frame__demos a:hover{border-color:transparent}.frame__demos a:not(:last-child),.frame__links a:not(:last-child){margin-right:1rem}a.frame__demo--current{border-color:transparent;color:var(--color-text)}.fix__title{position:fixed;bottom:-20px;left:-10px;opacity:.1;font-size:25em;line-height:.8;z-index:-1;pointer-events:none;margin:0;font-weight:100}.menu{padding:35vh 4em 50vh 0;width:100vw;position:relative;display:flex;flex-direction:column;-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;counter-reset:menucounter;background:linear-gradient(var(--color-bg),#8e8e84)}.menu__item{flex:none;display:flex;justify-content:flex-end;position:relative;padding-left:5rem;margin-bottom:4em}.menu__item::before{counter-increment:menucounter;content:counters(menucounter, ".", decimal-leading-zero);position:absolute;left:0;color:var(--color-menu-deco);border-left:3px solid currentColor;top:20%;height:60%;padding-left:1rem;display:flex;align-items:center;line-height:1;opacity:0;font-weight:200;font-size:clamp(2rem,6vw,4.5rem);transform:translateX(-1rem);transition:transform .3s,opacity .3s}.menu__item:hover::before{color:var(--color-menu-deco);opacity:1;transform:translateX(0)}.menu__item-text{position:relative;cursor:pointer;display:block;overflow:hidden;font-size:clamp(7rem,5vw,5.5rem)}.menu__item-textinner{display:block;font-family:futura-pt-bold,sans-serif;font-weight:700;text-transform:uppercase;color:var(--color-menu);text-align:right;word-break:break-word;line-height:.8}.js .menu__item-textinner{transform:translateY(100%)}.menu__item:hover .menu__item-textinner{color:var(--color-menu-hover);mix-blend-mode:difference}.menu__item-sub{display:none;font-weight:200;font-size:clamp(1rem,2vw,2rem);white-space:nowrap;align-items:center;position:relative;margin-left:1rem;padding-left:3.25rem;color:var(--color-menu-deco);opacity:0;transform:translateX(-1rem);transition:transform .3s,opacity .3s;mix-blend-mode:difference}.menu__item:hover .menu__item-sub{color:var(--color-menu-deco);opacity:1;transform:translateX(0)}.menu__item-sub::before{content:'';position:absolute;left:0;top:50%;width:3rem;height:1px;background:currentColor;transform-origin:0 100%;transform:scale3d(0,1,1);transition:transform .3s}.menu__item:hover .menu__item-sub::before{transform:scale3d(1,1,1)}.hover-reveal{position:absolute;z-index:-1;width:70%;aspect-ratio:16/9;top:0;left:0;pointer-events:none;opacity:0;will-change:transform,filter}.hover-reveal__inner{overflow:hidden;transform-origin:30% 50%}.hover-reveal__img,.hover-reveal__inner{width:100%;height:100%;position:relative}.hover-reveal__img{transform-origin:70% 50%}.hover-reveal__img{background-size:contain;background-position:50% 50%;background-repeat:no-repeat}.cursor{display:none}.cursor.active{width:200px;height:200px;margin:-75px 0 0 -75px}.credits{align-self:flex-start;padding:5rem 0 0 0}.credits a{text-decoration:underline}@media screen and (min-width:53em){.frame{pointer-events:none;background:0 0}.frame__title-wrap{pointer-events:auto}.frame__demos{margin:.5rem 0 0;justify-self:start}.frame__demos a{margin-right:.5rem}.menu__item{padding-left:10vw}.menu__item-sub{display:flex}}@media (any-pointer:fine){.cursor{position:fixed;top:0;left:0;display:block;pointer-events:none}.cursor__inner{fill:var(--cursor-fill);stroke:var(--cursor-stroke);stroke-width:var(--cursor-stroke-width);opacity:.7}.credits{padding-left:25vw}}/*! locomotive-scroll v3.5.4 | MIT License | https://github.com/locomotivemtl/locomotive-scroll */html.has-scroll-smooth{overflow:hidden}html.has-scroll-dragging{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.has-scroll-smooth body{overflow:hidden}.has-scroll-smooth [data-scroll-container]{min-height:100vh}.c-scrollbar{position:absolute;right:0;top:0;width:11px;height:100vh;transform-origin:center right;transition:transform .3s,opacity .3s;opacity:0}.c-scrollbar:hover{transform:scaleX(1.45)}.c-scrollbar:hover,.has-scroll-dragging .c-scrollbar,.has-scroll-scrolling .c-scrollbar{opacity:1}.c-scrollbar_thumb{position:absolute;top:0;right:0;background-color:#000;opacity:.5;width:7px;border-radius:10px;margin:2px;cursor:-webkit-grab;cursor:grab}.has-scroll-dragging .c-scrollbar_thumb{cursor:-webkit-grabbing;cursor:grabbing}@media(max-width:768px){.frame__title{font-size:1em}.frame{padding:1em;position:fixed;top:0}span.menu__item-text{font-size:2em}nav.menu{padding-right:1em}.menu__item::before{opacity:1}a.menu__item{margin-bottom:1em;padding-left:3em;flex-direction:column;align-items:end}h3.fix__title{font-size:10em}.hover-reveal{position:relative!important;opacity:1!important;z-index:1}.hover-reveal__img{background-position:100% 0}.hover-reveal__inner{opacity:1!important;transform:scale(1)!important}span.menu__item-sub{display:block;opacity:1;transform:translate(0,0)}}.noise{position:fixed;z-index:9999;top:-300%;left:-150%;height:600%;width:600%;-webkit-animation:grain 7s steps(10) infinite;animation:grain 7s steps(10) infinite;background-image:url(img/bg/noise.png);background-size:120px;background-repeat:repeat;opacity:.25;pointer-events:none}@-webkit-keyframes grain{0%,100%{-webkit-transform:translate(0);transform:translate(0)}10%{-webkit-transform:translate(-5%,-10%);transform:translate(-5%,-10%)}20%{-webkit-transform:translate(-15%,5%);transform:translate(-15%,5%)}30%{-webkit-transform:translate(7%,-25%);transform:translate(7%,-25%)}40%{-webkit-transform:translate(-5%,25%);transform:translate(-5%,25%)}50%{-webkit-transform:translate(-15%,10%);transform:translate(-15%,10%)}60%{-webkit-transform:translate(15%);transform:translate(15%)}70%{-webkit-transform:translateY(15%);transform:translateY(15%)}80%{-webkit-transform:translate(3%,35%);transform:translate(3%,35%)}90%{-webkit-transform:translate(-10%,10%);transform:translate(-10%,10%)}}@keyframes grain{0%,100%{-webkit-transform:translate(0);transform:translate(0)}10%{-webkit-transform:translate(-5%,-10%);transform:translate(-5%,-10%)}20%{-webkit-transform:translate(-15%,5%);transform:translate(-15%,5%)}30%{-webkit-transform:translate(7%,-25%);transform:translate(7%,-25%)}40%{-webkit-transform:translate(-5%,25%);transform:translate(-5%,25%)}50%{-webkit-transform:translate(-15%,10%);transform:translate(-15%,10%)}60%{-webkit-transform:translate(15%);transform:translate(15%)}70%{-webkit-transform:translateY(15%);transform:translateY(15%)}80%{-webkit-transform:translate(3%,35%);transform:translate(3%,35%)}90%{-webkit-transform:translate(-10%,10%);transform:translate(-10%,10%)}}