<div class="content">
  <div class="right">
    <div class="door"></div>
  </div>
  <div class="left">
    <div class="stairs">
      <div class="bars"></div>
    </div>
    <div class="nosferatu"></div>
  </div>
  <div class='cinema'>
    <div class="effect">
      <div class="grain"></div>
    </div>
  </div>
</div>

@import url('https://fonts.googleapis.com/css2?family=Creepster&display=swap');

:root {
  --shadow: #0a201b;
  --delay: 1.5s;
}

*, *:before, *:after {
  position: absolute;
}

body {
  margin: 0;
  padding: 0;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #000;
  perspective: 100vmin;
}

body:before, body:after {
  width: 94vmin;
  top: 15vmin;
  text-align: left;
  color: #0e2b25;
  font-family: 'Creepster', cursive;
  white-space: pre-wrap;
  box-sizing: border-box;
  transform: rotatey(45deg) skewY(-13deg);
  z-index: 1;
  content: "NOSFERATU";
  font-size: 12vmin;
  padding-left: 3vmin;
}

body:after {
  content: "A Symphony of Horror        1922 - 2022";
  top: 27vmin;
  font-size: 3.15vmin;
  padding-left: 4vmin;
  opacity: 0.75;
}

.content {
  width: 98vmin;
  height: 73.5vmin;
  position: relative;
  overflow: hidden;
}

.content:after {
  content: "";
  width: 100%;
  height: 100%;
  box-shadow: 0 0 20vmin 0vmin #000 inset, 0 0 3vmin 0.25vmin #000 inset, 0 0 1vmin 1vmin #000;
}

.left {
  width: 75.15vmin;
  height: 73.5vmin;
  background: #2a7362;
  left: 0;
  overflow: hidden;
  clip-path: polygon(0 0, 99.85% 0%, 97.75% 100%, 0% 100%);
}

.stairs {
  width: 56.62vmin;
  height: 34.84vmin;
  bottom: -6.5vmin;
  right: 0;
}

.stairs:before, .stairs:after {
  content: "";
  background: var(--shadow);
  width: 52vmin;
  height: 2.75vmin;
  transform: rotate(-38deg);
  transform-origin: right 0;
  right: 10vmin;
  border-radius: 0.25vmin;
}

.stairs:after {
  width: 15vmin;
  transform: rotate(-165deg);
  right: 10.75vmin;
  top: 2.65vmin;
}

.bars {
  background: var(--shadow);
  width: 1vmin;
  height: 32vmin;
  right: 9vmin;
  top: 1vmin;
  transform: rotate(1deg);
  box-shadow: 2.5vmin 1vmin 0 0 var(--shadow), 5.25vmin 2vmin 0 0 var(--shadow), 8vmin 3vmin 0 0 var(--shadow), -3.5vmin 2vmin 0 0 var(--shadow), -7.5vmin 6vmin 0 0 var(--shadow), -11.75vmin 10vmin 0 0 var(--shadow), -16vmin 13vmin 0 0 var(--shadow), -20vmin 16vmin 0 0 var(--shadow), -24.25vmin 19vmin 0 0 var(--shadow), -28.5vmin 23vmin 0 0 var(--shadow), -33vmin 27vmin 0 0 var(--shadow);
}

.nosferatu {
  width: 38.15vmin;
  height: 59.88vmin;
  left: -35vmin; 
  bottom: -37vmin;
  background: var(--shadow);
  box-sizing: border-box;
  clip-path: polygon(75% 100%, 69% 95%, 66% 90%, 62% 87%, 60% 82%, 58% 79%, 57% 75%, 57% 73%, 58% 68%, 59% 67%, 59% 65%, 59% 64%, 59% 62%, 60% 60%, 60% 59%, 61% 58%, 61% 58%, 61% 57%, 62% 55.75%, 67% 54.25%, 70% 53.5%, 73% 52%, 75% 50.75%, 77.5% 50%, 78% 50%, 79.5% 49%, 79.5% 48.75%, 82.5% 47.75%, 83% 47.9%, 84% 48%, 86.25% 49%, 88% 49.5%, 90% 51%, 89% 49%, 88% 48%, 86% 47%, 84% 46%, 83% 46%, 83.5% 45.5%, 85% 45.5%, 88% 46%, 89% 46.5%, 90% 47%, 91% 48%, 91% 49%, 91.5% 47%, 91.5% 47%, 91% 46%, 89% 44.75%, 86% 44%, 83.5% 43.75%, 83% 43.25%, 84.15% 42.75%, 86% 42.75%, 89% 43.65%, 90% 43.75%, 91% 43.75%, 92% 44.25%, 92.5% 45%, 92.5% 46.5%, 93.5% 44%, 92.75% 43%, 90% 41.75%, 88% 40.5%, 85% 39.5%, 84% 39.5%, 82% 39.75%, 81% 40%, 80% 40%, 79% 40.5%, 78% 41%, 77% 41.25%, 76% 41.35%, 74.5% 42.25%, 72% 43%, 69.5% 44%, 70% 43%, 70.5% 42%, 71% 41%, 71.75% 40%, 72% 39%, 71.75% 38%, 71.5% 37%, 72% 36%, 72.2% 35%, 72.5% 33%, 73.25% 32%, 74% 31%, 74% 31%, 75% 30%, 76.5% 28.5%, 78% 30%, 78.5% 30.5%, 79.2% 29%, 79.5% 28%, 79.6% 26%, 79.25% 25%, 79.1% 24%, 80% 23%, 80.2% 22%, 80% 21%, 81% 21%, 81.35% 20.35%, 80.95% 19.75%, 80.5% 19.25%, 80.4% 19%, 80.5% 18.7%, 80.65% 16%, 80.5% 15%, 79.75% 13%, 78.75% 11%, 78% 10%, 76.75% 9%, 74% 7%, 73% 6.25%, 71% 5.35%, 69% 5%, 68% 5%, 67% 5.5%, 66% 6%, 65% 7%, 64.75% 7.5%, 64.5% 7.75%, 64% 7.5%, 63.25% 7.2%, 62% 7%, 61.25% 7.5%, 60.5% 8%, 59.5% 9%, 58.5% 9.5%, 57.5% 9.2%, 56% 9.35%, 55% 9.5%, 52% 9%, 50% 8.9%, 47% 9%, 44% 9.2%, 42.5% 9.65%, 41% 9.25%, 40.5% 9.25%, 39.5% 9.25%, 38.5% 10%, 36.5% 12%, 35.25% 13%, 34% 15%, 33.75% 17%, 33.25% 18%, 32.5% 20%, 30.5% 22%, 29.5% 23%, 27.25% 25%, 27% 25.25%, 25.75% 26%, 24.7% 27%, 23.8% 28%, 23% 28.6%, 22.25% 29.2%, 20.7% 30.8%, 20.1% 31.5%, 20% 32%, 19% 33%, 18% 35%, 17.25% 36%, 17% 37%, 17% 41%, 18% 46%, 18% 49%, 18% 50%, 18% 51%, 19% 57%, 19% 53%, 19% 55%, 18.7% 57%, 18.6% 59%, 19% 61%, 19% 62%, 19.5% 65%, 19.7% 68%, 19.6% 70%, 19.5% 71%, 18% 73%, 17% 74%, 15% 75%, 14% 76%, 12% 77%, 11% 78%, 10% 79%, 9% 80%, 8% 81%, 7% 83%, 7% 84.5%, 8.3% 83%, 9.3% 82%, 10.75% 81%, 12.2% 80%, 14% 79%, 15% 78%, 17% 77.2%, 18% 77.25%, 17.5% 78%, 16.5% 79%, 15.25% 80%, 14.5% 81%, 13.5% 82%, 13% 83%, 12.25% 84%, 11.7% 85%, 11% 86%, 11% 86%, 9.27% 88%, 9% 89%, 9% 90%, 10% 89%, 11.55% 88%, 12.5% 87%, 13.5% 86%, 15.3% 84%, 16% 83%, 18% 81%, 20% 80%, 19.75% 81%, 19.5% 81.25%, 19% 82%, 18% 84%, 16.7% 86%, 15.7% 87%, 15% 88%, 15% 89%, 16% 88%, 18% 87%, 19% 86%, 20% 84%, 21% 83.25%, 22% 82%, 22% 82%, 23% 81%, 26% 76%, 29% 69%, 30% 61%, 29% 57%, 29% 56%, 29% 54%, 28.75% 51%, 29% 48%, 28.8% 46%, 29% 44%, 29.6% 43.5%, 30% 41.5%, 29% 43%, 31% 41%, 32% 40%, 32.8% 39.25%, 34.5% 38.75%, 33.25% 45%, 33% 49%, 32% 53%, 31.8% 55%, 30.2% 59%, 29% 68%, 27% 74%, 25% 80%, 22.65% 85%, 19.85% 91%, 19.5% 93%, 18.25% 96%, 16.75% 100%); 
  animation: move 7s cubic-bezier(0.25, 0.15, 0.71, 0.8) var(--delay) infinite, step 7s linear var(--delay) infinite;
  animation-fill-mode: forwards;

}

@keyframes move {
  0% { left: -35vmin; bottom: -37vmin; width: 45vmin;}
  20% { left: -6vmin; bottom: -24vmin; }
  50% { left: 28vmin; bottom: -0.5vmin; width: 38.15vmin;}
  70%, 100% { left: 72vmin; bottom: 0vmin; width: 38.15vmin;}
}
@keyframes step {
  0%, 15%, 25%, 35%, 45%, 55% { transform:translateY(0vmin) } 
  10%, 20%, 30%, 40%, 50%, 60%, 100% { transform:translateY(1vmin) }
}

.right {
  width: 24.5vmin;
  height: 73.5vmin;
  right: 0;
  background: 
    linear-gradient(89.5deg, #fff0 0 19.5vmin, #153f35 calc(19.5vmin + 1px) 100%), 
    linear-gradient(90.5deg, #fff0 0 11.5vmin, #0c2620 calc(11.5vmin + 1px) 100%),
    linear-gradient(90deg, #1c4c3f calc(1.5vmin + 1px) 100%);
}

.door {
  width: 100%;
  height: 100%;
  background: 
    conic-gradient(from 180deg at 19% 50.5%, #fff0 0 0.5deg, #16372e 0.75deg 85deg, #fff0 85.75deg 100%),
    conic-gradient(from 180deg at 21% 50.5%, #fff0 0 0.5deg, #1b473b 0.75deg 85deg, #fff0 85.75deg 100%),
    conic-gradient(from 180deg at 22% 50%, #fff0 0 0.5deg, #010e0b 0.75deg 110deg, #fff0 110.75deg 100%),
    conic-gradient(from 180deg at 39% 48%, #fff0 0 0.5deg, #0e2a21 0.75deg 110deg, #fff0 110.75deg 100%),
    conic-gradient(from 180deg at 49% 45%, #fff0 0 0.5deg, #337363 0.75deg 112deg, #fff0 112.75deg 100%);
}

/*
Cinema Effect inspired by this pen by Brad Colthurst:
https://codepen.io/bullerb/pen/BzKzvK 
*/

.cinema, .effect {
  width: 98vmin;
  height: 73.5vmin;
  filter: blur(0.45px) drop-shadow(0px 0px 0px #fff1);
  z-index: 2;
}

.effect {
    background-color: #0002;
}

.cinema:after, .effect:after {
  content: '';
  width: 120%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  padding-left: 100px;
  opacity: 0.5;
  animation: cinema-scratch 0.45s steps(1) infinite;
  background: repeating-linear-gradient(90deg, #fff3 1px, transparent 2px 37vmin);
}

.effect:after {
  left: 30%;
  animation: effect-scratch 2s infinite;
}

.grain {
  width: 100%;
  height: 100%;
}

.grain:after {
  content: '';
  width: 110%;
  height: 110%;
  position: absolute;
  top: -5%;
  left: -5%;
  opacity: .25;
  background-image: 
    repeating-conic-gradient(#FFF8 0%, transparent .0003%, transparent .0075%, transparent .0085%),
    repeating-conic-gradient(#FFF 0%, transparent .0005%, transparent 0.0015%, transparent 0.065%);
  animation: grain 0.5s steps(1) infinite;
}

@keyframes grain {
  0%, 100% { transform: translate(0, 0); }
  10% { transform: translate(-1%, -1%); }
  20% { transform: translate(1%, 1%); }
  30% { transform: translate(-2%, -2%); }
  40% { transform: translate(3%, 3%); }
  50% { transform: translate(-3%, -3%); }
  60% { transform: translate(4%, 4%); }
  70% { transform: translate(-4%, -4%); }
  80% { transform: translate(2%, 2%); }
  90% { transform: translate(-3%, -3%); }
}

@keyframes cinema-scratch {
  0%, 100% { transform: translateX(0); opacity: 0.5; }
  10% { transform: translateX(-1%); }
  20% { transform: translateX(1%); }
  30% { transform: translateX(-2%); opacity: 0.75; }
  40% { transform: translateX(3%); }
  50% { transform: translateX(-3%); opacity: 0.5; }
  60% { transform: translateX(8%); }
  70% { transform: translateX(-3%); }
  80% { transform: translateX(10%); opacity: 0.25; }
  90% { transform: translateX(-2%); }
}

@keyframes effect-scratch {
  0% { transform: translateX(0); opacity: 0.75; }
  10% { transform: translateX(-1%); }
  20% { transform: translateX(1%); }
  30% { transform: translateX(-2%); }
  40% { transform: translateX(3%); }
  50% { transform: translateX(-3%); opacity: 0.5; }
  60% { transform: translateX(8%); }
  70% { transform: translateX(-3%); }
  80% { transform: translateX(10%); opacity: 0.25; }
  90% { transform: translateX(20%); }
  100% { transform: translateX(30%); }
}