.header-anim {
  -webkit-animation: wolfBreathe 8s ease-in-out infinite;
  animation: wolfBreathe 8s ease-in-out infinite;
}

@keyframes wolfBreathe {
  0% {
    scale: 1;
    transform: rotate(0);
  }
  25% {
    scale: 0.95;
    transform: rotate(2deg);
  }
  50% {
    scale: 1;
    transform: rotate(0);
  }
  75% {
    scale: 0.95;
    transform: rotate(-2deg);
  }
  100% {
    scale: 1;
    transform: rotate(0);
  }
}

.shutter {
  position:absolute;
  width: 100%;
  height: 100%;
  overflow-y: hidden;
}

.uppershutter {
  position:absolute;
  top: 0;
  left: 0;
  background-color: white;
  clip-path: polygon(100% 0, 100% 40%, 84% 60%, 67% 40%, 50% 60%, 33% 40%, 16% 60%, 0 40%, 0 0);
  height: 100%;
  width: 100%;
  z-index: 111;
}

@keyframes openUpperShutter {
  0% {
    top: 0;
  }
  15% {
    top: -15%;
  }
  30% {
    top: 0;
  }
  45% {
    top: -15%;
  }
  60% {
    top: 0;
  }
  100% {
    top: -60%;
  }
}
.lowershutter {
  position:absolute;
  font-weight: black;
  bottom: 0;
  left: 0;
  background-color: #9400d3;
  clip-path: polygon(100% 100%, 100% 40%, 84% 60%, 67% 40%, 50% 60%, 33% 40%, 16% 60%, 0 40%, 0 100%);
  height: 100%;
  width: 100%;
  z-index: 111;
}

@keyframes openLowerShutter {
  0% {
    clip-path: polygon(100% 100%, 100% 40%, 84% 60%, 67% 40%, 50% 60%, 33% 40%, 16% 60%, 0 40%, 0 100%);
  }
  15% {
    clip-path: polygon(100% 100%, 100% 70%, 84% 80%, 67% 70%, 50% 80%, 33% 70%, 16% 80%, 0 70%, 0 100%);
  }
  30% {
    clip-path: polygon(100% 100%, 100% 40%, 84% 60%, 67% 40%, 50% 60%, 33% 40%, 16% 60%, 0 40%, 0 100%);
  }
  45% {
    clip-path: polygon(100% 100%, 100% 70%, 84% 80%, 67% 70%, 50% 80%, 33% 70%, 16% 80%, 0 70%, 0 100%);
  }
  60% {
    clip-path: polygon(100% 100%, 100% 40%, 84% 60%, 67% 40%, 50% 60%, 33% 40%, 16% 60%, 0 40%, 0 100%);
  }
  100% {
    clip-path: polygon(100% 100%, 100% 100%, 84% 100%, 67% 100%, 50% 100%, 33% 100%, 16% 100%, 0 100%, 0 100%);
  }
}

.loading-text{
  position:absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  /* align-center*/
  display:flex;
  justify-content: center;
  align-items: center;
  /* style*/  
  color: #371645;
  text-align:center;
  font-size: clamp(10px, 10vw, 80px);;
  font-weight: bold;
  text-shadow: 2px 3px 0px rgba(255, 255, 255, 0.9), 4px 4px 0px rgba(50, 0, 73, 1), 6px 6px 0px rgba(130, 0, 186, 1), 8px 8px 0px rgba(150, 0, 213, 1), -2px -2px 0px rgba(255, 255, 255, 0.9);
  transform: skew(-18deg) rotate(-8deg);
  /* size */
  width: 50%;
  height: 50%;
  z-index: 444;
}