/* Various grain blobs and variations */

.grain {
  position: absolute;
  z-index: -1;
  pointer-events: none;
  width: 54vh; /* height times 0.54 */
  height: 100vh;
  max-height: 1024px;
  max-width: 100vw;
  overflow: hidden;
}
.grain.var-t, .grain.var-bl, .grain.var-br {
  width: 65vw;
  height: 65vw;
}
.grain.var-l, .grain.var-r {
  width: 40.5vh; /* height times 0.54 */
  height: 75vh;
}
@media (min-width: 992px) {
  .grain {
    width: 81vh; /* height times 0.54 */
    height: 150vh;
    max-height: 2048px;
  }
  .grain.var-t, .grain.var-bl, .grain.var-br {
    width: 54vh; /* height times 0.54 */
    height: 100vh;
  }
  .grain.var-l, .grain.var-r {
    width: 54vh; /* height times 0.54 */
    height: 100vh;
  }
}
.grain .inner {
  position: relative;
}
.grain img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.grain .trigger {
  position: absolute;
  top: calc(50% - 10rem); left: 0; right: 0;
  height: 10rem;
  z-index: 2;
}

/*
.grain .trigger.enter ~ .inner img {
  will-change: transform;
}
*/

/* Variations (responsive) */

/* Top left */
.grain.var-tl {
  top: calc( -3rem - var(--logo-height) );
  left: 0;
}
@media (min-width: 768px) {
  .grain.var-tl {
    top: calc( -4rem - var(--logo-height) );
  }
}
.grain.var-tl .inner {
  transform: translate3d(-25%, -15%, 0);
}


/* Top right */
.grain.var-tr {
  top: calc( -3rem - var(--logo-height) );
  right: 0;
}
@media (min-width: 768px) {
  .grain.var-tr {
    top: calc( -4rem - var(--logo-height) );
  }
}
.grain.var-tr .inner {
  transform: translate3d(35%, -15%, 0);
}


/* Top */
.grain.var-t {
  top: calc( -3rem - var(--logo-height) );
  left: 0;
  transform: scaleY(-1);
}
@media (min-width: 768px) {
  .grain.var-t {
    top: calc( -4rem - var(--logo-height) );
    left: -2rem;
    transform-origin: right;
    transform: rotate(90deg);
  }
  .grain.var-t .inner {
    transform: translate3d(-25%, 15%, 0);
  }
}


/* Left */
.grain.var-l {
  top: 25vh;
  left: -10%;
}
.grain.var-l .inner {
  transform: translate3d(-35%, 0, 0);
}
@media (min-width: 768px) {
  .grain.var-l  {
    left: 0;
  }
}


/* Right */
.grain.var-r {
  top: 15vh;
  right: 0;
}
.grain.var-r .inner {
  transform: translate3d(35%, 0, 0);
}


/* Center left */
.grain.var-cl {
  top: 50%;
  transform: translate3d(0, -50%, 0);
  left: 0;
}
.grain.var-cl .inner {
  transform: translate3d(-35%, 0, 0);
}


/* Center right */
.grain.var-cr  {
  top: 60%;
  transform: translate3d(0, -50%, 0);
  right: 0;
}
.grain.var-cr .inner {
  transform: translate3d(35%, 0, 0);
}
@media (min-width: 768px) {
  .grain.var-cr  {
    top: 50%;
  }
}


/* Bottom left */
.grain.var-bl {
  bottom: 0;
  left: 0;
}

@media (min-width: 992px) {
  .grain.var-bl {
    left: -2rem;
    transform-origin: right;
    transform: rotate(270deg);
  }
  .grain.var-bl .inner {
    transform: translate3d(-25%, -15%, 0);
  }
}


/* Bottom right */
.grain.var-br {
  bottom: 0;
  right: 0;
}
@media (min-width: 992px) {
  .grain.var-br {
    right: -1rem;
    transform-origin: left;
    transform: rotate(90deg);
  }
  .grain.var-br .inner {
    transform: translate3d(25%, 0, 0);
  }
}