#canvas {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
}
:root {
  --card-height: 300px;
  --card-width: calc(var(--card-height) / 1.5);
}
* {
  box-sizing: border-box;
}
body {
  margin: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}
.card {
  width: 100%;
  height: 100vh;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  perspective: 2500px;
}
.cover-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.wrapper {
  transition: all 0.5s;
  position: absolute;
  width: 70%;
  z-index: -1;
}
.card.active .wrapper {
  transform: perspective(900px) translateY(-5%) rotateX(25deg) translateZ(0);
  box-shadow: 2px 35px 32px -8px rgba(0, 0, 0, 0.75);
  -webkit-box-shadow: 2px 35px 32px -8px rgba(0, 0, 0, 0.75);
  -moz-box-shadow: 2px 35px 32px -8px rgba(197, 59, 59, 0.75);
  filter: blur(2px);
}
.card.active #bridge{
  display: none;
}
.wrapper::before {
  top: 0;
  height: 100%;
  background-image: linear-gradient(
    to top,
    transparent 46%,
    rgba(12, 13, 19, 0.5) 68%,
    rgba(12, 13, 19) 97%
  );
}
.wrapper::after {
  bottom: 0;
  opacity: 1;
  background-image: linear-gradient(
    to bottom,
    transparent 46%,
    rgba(12, 13, 19, 0.5) 68%,
    rgba(12, 13, 19) 97%
  );
}
.card.active .wrapper::before,
.wrapper::after {
  opacity: 1;
}

.card.active .wrapper after {
  height: 120px;
}
.title {
  width: 100%;
  transition: transform 0.5s;
}

.character {
  width: 100%;
  opacity: 0;
  transition: all 0.5s;
  position: absolute;
  z-index: -1;
  text-align: center;
}

.card.active .character {
  opacity: 1;
  transform: translate3d(0%, -30%, 100px);
}


#bridge {
	display: block;
	margin: 0 auto;
	background-size: cover;
	width: 70%;
	max-width: 750px;
	height: 960px;
  cursor:  crosshair;
  cursor: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/circular-cursor.png) 53 53, crosshair;
}
#bridgeContainer { 
  text-align: center;
  font-family: Avenir, sans-serif;
}
#bridgeContainer figcaption {   
  margin-top: 2rem; 
}
video {
  position: fixed;
  top: 0;
  left: 0;
}
#card-container{
  width: 100vw;
  display: block;
  height: 100vh;
}

#bridge{
  z-index: 1;
  position: fixed;
}

h2{
  font-family: "Playfair Display", serif;
  color: #84343c;
  font-size: 54px;
  text-shadow: -2px 0 #9e9b9b, 0 2px #e6e6e6, 2px 0 white, 0 -1px white;
  position: fixed;
  width: 100%;
  top: -200px;
}

.pyro {
  position: fixed;
  width: 100vw;
  opacity: 0;
  pointer-events: none;
}

.pyro.active {
  opacity: 1;
}

.pyro > .before,
.pyro > .after {
  position: absolute;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  box-shadow: 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff;
  -moz-animation: 1s bang ease-out infinite backwards, 1s gravity ease-in infinite backwards, 5s position linear infinite backwards;
  -webkit-animation: 1s bang ease-out infinite backwards, 1s gravity ease-in infinite backwards, 5s position linear infinite backwards;
  -o-animation: 1s bang ease-out infinite backwards, 1s gravity ease-in infinite backwards, 5s position linear infinite backwards;
  -ms-animation: 1s bang ease-out infinite backwards, 1s gravity ease-in infinite backwards, 5s position linear infinite backwards;
  animation: 1s bang ease-out infinite backwards, 1s gravity ease-in infinite backwards, 5s position linear infinite backwards;
}

.pyro > .after {
  -moz-animation-delay: 1.25s, 1.25s, 1.25s;
  -webkit-animation-delay: 1.25s, 1.25s, 1.25s;
  -o-animation-delay: 1.25s, 1.25s, 1.25s;
  -ms-animation-delay: 1.25s, 1.25s, 1.25s;
  animation-delay: 1.25s, 1.25s, 1.25s;
  -moz-animation-duration: 1.25s, 1.25s, 6.25s;
  -webkit-animation-duration: 1.25s, 1.25s, 6.25s;
  -o-animation-duration: 1.25s, 1.25s, 6.25s;
  -ms-animation-duration: 1.25s, 1.25s, 6.25s;
  animation-duration: 1.25s, 1.25s, 6.25s;
}

@-webkit-keyframes bang {
  to {
    box-shadow: 211px -215.6666666667px #0400ff, 30px -334.6666666667px #00ff15, -231px -88.6666666667px #1500ff, 232px -279.6666666667px #1aff00, 145px -88.6666666667px #0095ff, 194px -72.6666666667px #009dff, -221px -34.6666666667px #1a00ff, -63px 29.3333333333px deepskyblue, 113px -386.6666666667px #00b3ff, -24px -41.6666666667px #00ff84, -98px -50.6666666667px #95ff00, 88px -137.6666666667px #ff00dd, -130px -88.6666666667px red, 209px -265.6666666667px #00ffd0, 96px -232.6666666667px #ffc800, 218px -380.6666666667px #ff2600, 22px -42.6666666667px #ff004d, 140px -356.6666666667px #ffb300, 42px -342.6666666667px #d0ff00, -65px -27.6666666667px #0091ff, 24px -36.6666666667px #f7ff00, -82px 74.3333333333px #ff006f, -126px -385.6666666667px #00ffbf, -208px -251.6666666667px #1a00ff, 249px -392.6666666667px #fb00ff, -40px 77.3333333333px #00f2ff, 250px -52.6666666667px #00ff6a, -102px -9.6666666667px #5500ff, 228px -80.6666666667px aqua, -175px -313.6666666667px #2fff00, 29px -290.6666666667px #48ff00, 195px -305.6666666667px #ffd900, 83px -86.6666666667px #00aeff, -204px -374.6666666667px #ffcc00, -49px -120.6666666667px #8cff00, -131px -95.6666666667px #00ff1e, -135px 24.3333333333px #ff4400, 2px -368.6666666667px #8000ff, -124px 44.3333333333px #9500ff, 89px -333.6666666667px #0040ff, -92px 37.3333333333px #ffcc00, 1px -4.6666666667px #ff4800, 127px -135.6666666667px #15ff00, -172px -414.6666666667px #00aeff, 177px -380.6666666667px #ff4000, -177px -331.6666666667px #ff001a, 43px -300.6666666667px #ddff00, -245px 74.3333333333px #005eff, -248px -271.6666666667px #ff000d, -173px -280.6666666667px aqua, -151px -90.6666666667px deepskyblue;
  }
}
@-moz-keyframes bang {
  to {
    box-shadow: 211px -215.6666666667px #0400ff, 30px -334.6666666667px #00ff15, -231px -88.6666666667px #1500ff, 232px -279.6666666667px #1aff00, 145px -88.6666666667px #0095ff, 194px -72.6666666667px #009dff, -221px -34.6666666667px #1a00ff, -63px 29.3333333333px deepskyblue, 113px -386.6666666667px #00b3ff, -24px -41.6666666667px #00ff84, -98px -50.6666666667px #95ff00, 88px -137.6666666667px #ff00dd, -130px -88.6666666667px red, 209px -265.6666666667px #00ffd0, 96px -232.6666666667px #ffc800, 218px -380.6666666667px #ff2600, 22px -42.6666666667px #ff004d, 140px -356.6666666667px #ffb300, 42px -342.6666666667px #d0ff00, -65px -27.6666666667px #0091ff, 24px -36.6666666667px #f7ff00, -82px 74.3333333333px #ff006f, -126px -385.6666666667px #00ffbf, -208px -251.6666666667px #1a00ff, 249px -392.6666666667px #fb00ff, -40px 77.3333333333px #00f2ff, 250px -52.6666666667px #00ff6a, -102px -9.6666666667px #5500ff, 228px -80.6666666667px aqua, -175px -313.6666666667px #2fff00, 29px -290.6666666667px #48ff00, 195px -305.6666666667px #ffd900, 83px -86.6666666667px #00aeff, -204px -374.6666666667px #ffcc00, -49px -120.6666666667px #8cff00, -131px -95.6666666667px #00ff1e, -135px 24.3333333333px #ff4400, 2px -368.6666666667px #8000ff, -124px 44.3333333333px #9500ff, 89px -333.6666666667px #0040ff, -92px 37.3333333333px #ffcc00, 1px -4.6666666667px #ff4800, 127px -135.6666666667px #15ff00, -172px -414.6666666667px #00aeff, 177px -380.6666666667px #ff4000, -177px -331.6666666667px #ff001a, 43px -300.6666666667px #ddff00, -245px 74.3333333333px #005eff, -248px -271.6666666667px #ff000d, -173px -280.6666666667px aqua, -151px -90.6666666667px deepskyblue;
  }
}
@-o-keyframes bang {
  to {
    box-shadow: 211px -215.6666666667px #0400ff, 30px -334.6666666667px #00ff15, -231px -88.6666666667px #1500ff, 232px -279.6666666667px #1aff00, 145px -88.6666666667px #0095ff, 194px -72.6666666667px #009dff, -221px -34.6666666667px #1a00ff, -63px 29.3333333333px deepskyblue, 113px -386.6666666667px #00b3ff, -24px -41.6666666667px #00ff84, -98px -50.6666666667px #95ff00, 88px -137.6666666667px #ff00dd, -130px -88.6666666667px red, 209px -265.6666666667px #00ffd0, 96px -232.6666666667px #ffc800, 218px -380.6666666667px #ff2600, 22px -42.6666666667px #ff004d, 140px -356.6666666667px #ffb300, 42px -342.6666666667px #d0ff00, -65px -27.6666666667px #0091ff, 24px -36.6666666667px #f7ff00, -82px 74.3333333333px #ff006f, -126px -385.6666666667px #00ffbf, -208px -251.6666666667px #1a00ff, 249px -392.6666666667px #fb00ff, -40px 77.3333333333px #00f2ff, 250px -52.6666666667px #00ff6a, -102px -9.6666666667px #5500ff, 228px -80.6666666667px aqua, -175px -313.6666666667px #2fff00, 29px -290.6666666667px #48ff00, 195px -305.6666666667px #ffd900, 83px -86.6666666667px #00aeff, -204px -374.6666666667px #ffcc00, -49px -120.6666666667px #8cff00, -131px -95.6666666667px #00ff1e, -135px 24.3333333333px #ff4400, 2px -368.6666666667px #8000ff, -124px 44.3333333333px #9500ff, 89px -333.6666666667px #0040ff, -92px 37.3333333333px #ffcc00, 1px -4.6666666667px #ff4800, 127px -135.6666666667px #15ff00, -172px -414.6666666667px #00aeff, 177px -380.6666666667px #ff4000, -177px -331.6666666667px #ff001a, 43px -300.6666666667px #ddff00, -245px 74.3333333333px #005eff, -248px -271.6666666667px #ff000d, -173px -280.6666666667px aqua, -151px -90.6666666667px deepskyblue;
  }
}
@-ms-keyframes bang {
  to {
    box-shadow: 211px -215.6666666667px #0400ff, 30px -334.6666666667px #00ff15, -231px -88.6666666667px #1500ff, 232px -279.6666666667px #1aff00, 145px -88.6666666667px #0095ff, 194px -72.6666666667px #009dff, -221px -34.6666666667px #1a00ff, -63px 29.3333333333px deepskyblue, 113px -386.6666666667px #00b3ff, -24px -41.6666666667px #00ff84, -98px -50.6666666667px #95ff00, 88px -137.6666666667px #ff00dd, -130px -88.6666666667px red, 209px -265.6666666667px #00ffd0, 96px -232.6666666667px #ffc800, 218px -380.6666666667px #ff2600, 22px -42.6666666667px #ff004d, 140px -356.6666666667px #ffb300, 42px -342.6666666667px #d0ff00, -65px -27.6666666667px #0091ff, 24px -36.6666666667px #f7ff00, -82px 74.3333333333px #ff006f, -126px -385.6666666667px #00ffbf, -208px -251.6666666667px #1a00ff, 249px -392.6666666667px #fb00ff, -40px 77.3333333333px #00f2ff, 250px -52.6666666667px #00ff6a, -102px -9.6666666667px #5500ff, 228px -80.6666666667px aqua, -175px -313.6666666667px #2fff00, 29px -290.6666666667px #48ff00, 195px -305.6666666667px #ffd900, 83px -86.6666666667px #00aeff, -204px -374.6666666667px #ffcc00, -49px -120.6666666667px #8cff00, -131px -95.6666666667px #00ff1e, -135px 24.3333333333px #ff4400, 2px -368.6666666667px #8000ff, -124px 44.3333333333px #9500ff, 89px -333.6666666667px #0040ff, -92px 37.3333333333px #ffcc00, 1px -4.6666666667px #ff4800, 127px -135.6666666667px #15ff00, -172px -414.6666666667px #00aeff, 177px -380.6666666667px #ff4000, -177px -331.6666666667px #ff001a, 43px -300.6666666667px #ddff00, -245px 74.3333333333px #005eff, -248px -271.6666666667px #ff000d, -173px -280.6666666667px aqua, -151px -90.6666666667px deepskyblue;
  }
}
@keyframes bang {
  to {
    box-shadow: 211px -215.6666666667px #0400ff, 30px -334.6666666667px #00ff15, -231px -88.6666666667px #1500ff, 232px -279.6666666667px #1aff00, 145px -88.6666666667px #0095ff, 194px -72.6666666667px #009dff, -221px -34.6666666667px #1a00ff, -63px 29.3333333333px deepskyblue, 113px -386.6666666667px #00b3ff, -24px -41.6666666667px #00ff84, -98px -50.6666666667px #95ff00, 88px -137.6666666667px #ff00dd, -130px -88.6666666667px red, 209px -265.6666666667px #00ffd0, 96px -232.6666666667px #ffc800, 218px -380.6666666667px #ff2600, 22px -42.6666666667px #ff004d, 140px -356.6666666667px #ffb300, 42px -342.6666666667px #d0ff00, -65px -27.6666666667px #0091ff, 24px -36.6666666667px #f7ff00, -82px 74.3333333333px #ff006f, -126px -385.6666666667px #00ffbf, -208px -251.6666666667px #1a00ff, 249px -392.6666666667px #fb00ff, -40px 77.3333333333px #00f2ff, 250px -52.6666666667px #00ff6a, -102px -9.6666666667px #5500ff, 228px -80.6666666667px aqua, -175px -313.6666666667px #2fff00, 29px -290.6666666667px #48ff00, 195px -305.6666666667px #ffd900, 83px -86.6666666667px #00aeff, -204px -374.6666666667px #ffcc00, -49px -120.6666666667px #8cff00, -131px -95.6666666667px #00ff1e, -135px 24.3333333333px #ff4400, 2px -368.6666666667px #8000ff, -124px 44.3333333333px #9500ff, 89px -333.6666666667px #0040ff, -92px 37.3333333333px #ffcc00, 1px -4.6666666667px #ff4800, 127px -135.6666666667px #15ff00, -172px -414.6666666667px #00aeff, 177px -380.6666666667px #ff4000, -177px -331.6666666667px #ff001a, 43px -300.6666666667px #ddff00, -245px 74.3333333333px #005eff, -248px -271.6666666667px #ff000d, -173px -280.6666666667px aqua, -151px -90.6666666667px deepskyblue;
  }
}
@-webkit-keyframes gravity {
  to {
    transform: translateY(200px);
    -moz-transform: translateY(200px);
    -webkit-transform: translateY(200px);
    -o-transform: translateY(200px);
    -ms-transform: translateY(200px);
    opacity: 0;
  }
}
@-moz-keyframes gravity {
  to {
    transform: translateY(200px);
    -moz-transform: translateY(200px);
    -webkit-transform: translateY(200px);
    -o-transform: translateY(200px);
    -ms-transform: translateY(200px);
    opacity: 0;
  }
}
@-o-keyframes gravity {
  to {
    transform: translateY(200px);
    -moz-transform: translateY(200px);
    -webkit-transform: translateY(200px);
    -o-transform: translateY(200px);
    -ms-transform: translateY(200px);
    opacity: 0;
  }
}
@-ms-keyframes gravity {
  to {
    transform: translateY(200px);
    -moz-transform: translateY(200px);
    -webkit-transform: translateY(200px);
    -o-transform: translateY(200px);
    -ms-transform: translateY(200px);
    opacity: 0;
  }
}
@keyframes gravity {
  to {
    transform: translateY(200px);
    -moz-transform: translateY(200px);
    -webkit-transform: translateY(200px);
    -o-transform: translateY(200px);
    -ms-transform: translateY(200px);
    opacity: 0;
  }
}
@-webkit-keyframes position {
  0%, 19.9% {
    margin-top: 10%;
    margin-left: 40%;
  }
  20%, 39.9% {
    margin-top: 40%;
    margin-left: 30%;
  }
  40%, 59.9% {
    margin-top: 20%;
    margin-left: 70%;
  }
  60%, 79.9% {
    margin-top: 30%;
    margin-left: 20%;
  }
  80%, 99.9% {
    margin-top: 30%;
    margin-left: 80%;
  }
}
@-moz-keyframes position {
  0%, 19.9% {
    margin-top: 10%;
    margin-left: 40%;
  }
  20%, 39.9% {
    margin-top: 40%;
    margin-left: 30%;
  }
  40%, 59.9% {
    margin-top: 20%;
    margin-left: 70%;
  }
  60%, 79.9% {
    margin-top: 30%;
    margin-left: 20%;
  }
  80%, 99.9% {
    margin-top: 30%;
    margin-left: 80%;
  }
}
@-o-keyframes position {
  0%, 19.9% {
    margin-top: 10%;
    margin-left: 40%;
  }
  20%, 39.9% {
    margin-top: 40%;
    margin-left: 30%;
  }
  40%, 59.9% {
    margin-top: 20%;
    margin-left: 70%;
  }
  60%, 79.9% {
    margin-top: 30%;
    margin-left: 20%;
  }
  80%, 99.9% {
    margin-top: 30%;
    margin-left: 80%;
  }
}
@-ms-keyframes position {
  0%, 19.9% {
    margin-top: 10%;
    margin-left: 40%;
  }
  20%, 39.9% {
    margin-top: 40%;
    margin-left: 30%;
  }
  40%, 59.9% {
    margin-top: 20%;
    margin-left: 70%;
  }
  60%, 79.9% {
    margin-top: 30%;
    margin-left: 20%;
  }
  80%, 99.9% {
    margin-top: 30%;
    margin-left: 80%;
  }
}
@keyframes position {
  0%, 19.9% {
    margin-top: 10%;
    margin-left: 40%;
  }
  20%, 39.9% {
    margin-top: 40%;
    margin-left: 30%;
  }
  40%, 59.9% {
    margin-top: 20%;
    margin-left: 70%;
  }
  60%, 79.9% {
    margin-top: 30%;
    margin-left: 20%;
  }
  80%, 99.9% {
    margin-top: 30%;
    margin-left: 80%;
  }
}