body {
  margin: 0;
  font-family: sans-serif;
    background-color: black;

}

.banner {
  height: 100vh;
  background-color: black;
  display: flex;
  justify-content: center;
  align-items: center;
  background: none;
  overflow: hidden;
  position: absolute;
  inset: 0;
  z-index: 9999;
  transition: opacity 1s ease;
  cursor: pointer;
}
.banner.background-fade-out::before,
.banner.background-fade-out::after {
  opacity: 0;
  visibility: hidden;
  transition: opacity 1s ease, visibility 1s ease;
}

@keyframes svgMoveIn {
  from {
    transform: scale(1);
  }
  to {
    transform: scale(0.5);
  }
}

svg path {
  fill: transparent;
  stroke: white;
  stroke-width: 0.1;
  stroke-dasharray: 50;
  stroke-dashoffset: 50;
  animation: textAnimation 4s ease-in-out 1 forwards;
}

@keyframes textAnimation {
  0%   { stroke-dashoffset: 50; }
  80%  { fill: transparent; }
  100% { fill: #fff; stroke-dashoffset: 0; }
}

main {
  display: none;
  padding: 50px;
  text-align: center;
}

.banner::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url('img/ningyu-tb49PTdW1ZM-unsplash.jpg');
  background-size: cover;
  background-position: center;
  transform: scale(1.2);
  animation: none;
  z-index: -1;
  pointer-events: none;
}
.banner::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url('img/after.png');
  background-size: cover;
  background-position: top;
  transform: scale(1); 
  animation: none;
  z-index: -1;
  pointer-events: none;
}

.banner.animation-started::before {
  animation: bgZoomIn 4s ease-in-out 1 forwards;
}

.banner.animation-started::after {
  animation: bgZoomOut 4s ease-in-out 1 forwards;
}
@keyframes bgZoomIn {
  from {
    transform: scale(1.2);
  } to {
    transform: scale(1);
  }
}
@keyframes bgZoomOut {
  from {
    transform: scale(1);
  } to {
    transform: scale(2);
  }
}

svg path {
  fill: transparent;
  stroke: black;
  stroke-width: 0.1;
  stroke-dasharray: 50;
  stroke-dashoffset: 50;
  animation: textAnimation 4s ease-in-out 1 forwards;
}
@keyframes textAnimation {
  0% {
    stroke-dashoffset: 50;
  }
  80% {
    fill: transparent;
  }
  100% {
    fill: #fff;
    stroke-dashoffset: 0;
  }
}


/* Main.php */

@font-face {
    font-family: 'JAPAN RAMEN';
    src: url('JAPANRAMEN.woff2') format('woff2'),
        url('JAPANRAMEN.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}



.spacer {
  height: 320px;
}
.space2 {
  height: 110px; 
}

.cf-turnstile {
  min-height: 80px;
  border: 1px solid red; 
}