/*
 * The reveal-on-scroll states. The JS adds is-revealed; these say what that looks like.
 *
 * Edit this file. It is served as it is — nothing compiles it, and the
 * order it loads in is set in resources/css/order.php.
 */

[class*=js-reveal--] {
  opacity:0;
  transition:transform 1s cubic-bezier(.4,0,.2,1),opacity 1s cubic-bezier(.4,0,.2,1),-webkit-clip-path 1s cubic-bezier(.4,0,.2,1);
  transition:transform 1s cubic-bezier(.4,0,.2,1),opacity 1s cubic-bezier(.4,0,.2,1),clip-path 1s cubic-bezier(.4,0,.2,1);
  transition:transform 1s cubic-bezier(.4,0,.2,1),opacity 1s cubic-bezier(.4,0,.2,1),clip-path 1s cubic-bezier(.4,0,.2,1),-webkit-clip-path 1s cubic-bezier(.4,0,.2,1);
  will-change:transform,opacity,clip-path;
}

.js-reveal--opacity {
  opacity:0;
}

.js-reveal--opacity.is-revealed {
  opacity:1;
}

.js-reveal--mask {
  -webkit-clip-path:inset(0 100% 0 0);
  clip-path:inset(0 100% 0 0);
}

.js-reveal--mask.is-revealed {
  -webkit-clip-path:inset(0 0 0 0);
  clip-path:inset(0 0 0 0);
  opacity:1;
}

.js-reveal--transform-y {
  transform:translateY(10%);
}

.js-reveal--transform-y.is-revealed {
  opacity:1;
  transform:translateY(0);
}

.js-reveal--transform-xy {
  transform:translate(-10%,10%);
}

.js-reveal--transform-xy.is-revealed {
  opacity:1;
  transform:translate(0);
}

.js-reveal--transform-xy-invert {
  transform:translate(20%,-20%);
}

.js-reveal--transform-xy-invert.is-revealed {
  opacity:1;
  transform:translate(0);
}

.js-reveal--scroll {
  opacity:1;
  transform:translateY(10%);
  transition:transform .3s ease-out,opacity .3s ease-out;
}

.js-reveal--scroll.is-revealed {
  opacity:1;
  transform:translateY(0);
}

.no-clip-path {
  -webkit-clip-path:none!important;
  clip-path:none!important;
}

@supports(scrollbar-width:thin) {

  * {
    scrollbar-color:#e1251b #0000;
    scrollbar-width:thin;
  }
}

@supports selector(*::-webkit-scrollbar) {

  * {
    scrollbar-color:revert;
    scrollbar-width:revert;
  }
}

::-webkit-scrollbar {
  background-color:#e1251b03;
  height:8px;
  width:8px;
}

::-webkit-scrollbar-thumb {
  background-color:#e1251b;
}

html.no-scroll {
  overflow:hidden;
  padding-right:var(--scrollbar-width,0);
}

@media screen and (max-width:1199px) {

  html.no-scroll {
    padding-right:0;
  }
}

body {
  -webkit-tap-highlight-color:rgba(0,0,0,0);
  background-color:#f1ede4;
  color:#181818;
  display:flex;
  flex-direction:column;
  font-family:Satoshi,sans-serif;
  min-height:calc(var(--mobile-vh)*100);
}