body {
  margin: 0;
  background: black;
  color: #feda4a;
  font-family: "Arial", sans-serif;
  overflow: hidden;
}

.stars {
    position: fixed;
    top: 0;
    left: 0;
    width: 200%;
    height: 200%;
    background-repeat: repeat;
    background-size: 600px 600px; /* Pattern-Größe */
    z-index: -1;
    animation-name: starsMove;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}

.stars-back {
    background-image:
    radial-gradient(1px 1px at 408px 419px, white, transparent),
    radial-gradient(1px 1px at 234px 382px, white, transparent),
    radial-gradient(1px 1px at 24px 153px, white, transparent),
    radial-gradient(1px 1px at 253px 147px, white, transparent),
    radial-gradient(1px 1px at 298px 286px, white, transparent),
    radial-gradient(1px 1px at 60px 130px, white, transparent),
    radial-gradient(1px 1px at 76px 360px, white, transparent),
    radial-gradient(1px 1px at 161px 308px, white, transparent),
    radial-gradient(1px 1px at 238px 37px, white, transparent),
    radial-gradient(1px 1px at 67px 84px, white, transparent),
    radial-gradient(1px 1px at 369px 313px, white, transparent),
    radial-gradient(1px 1px at 284px 94px, white, transparent),
    radial-gradient(1px 1px at 457px 187px, white, transparent),
    radial-gradient(1px 1px at 5px 50px, white, transparent),
    radial-gradient(1px 1px at 302px 416px, white, transparent),
    radial-gradient(1px 1px at 127px 380px, white, transparent),
    radial-gradient(1px 1px at 282px 180px, white, transparent),
    radial-gradient(1px 1px at 362px 358px, white, transparent),
    radial-gradient(1px 1px at 219px 101px, white, transparent),
    radial-gradient(1px 1px at 181px 459px, white, transparent);
    opacity: 1;
    animation-duration: 300s;
    animation-name: starsMoveBack;
}

@keyframes starsMoveBack {
    from {
        transform: translate(0, 0);
    }
    to {
        transform: translate(200px, 400px);
    }
}

.stars-mid {
  background-image:
  radial-gradient(2px 2px at 137px 436px, white, transparent),
  radial-gradient(2px 2px at 113px 348px, white, transparent),
  radial-gradient(2px 2px at 87px 252px, white, transparent),
  radial-gradient(3px 3px at 197px 124px, white, transparent),
  radial-gradient(3px 3px at 324px 289px, white, transparent),
  radial-gradient(2px 2px at 444px 147px, white, transparent),
  radial-gradient(3px 3px at 462px 35px, white, transparent),
  radial-gradient(2px 2px at 464px 387px, white, transparent),
  radial-gradient(3px 3px at 408px 78px, white, transparent),
  radial-gradient(2px 2px at 476px 422px, white, transparent),
  radial-gradient(2px 2px at 227px 161px, white, transparent),
  radial-gradient(3px 3px at 407px 142px, white, transparent),
  radial-gradient(2px 2px at 185px 69px, white, transparent),
  radial-gradient(2px 2px at 408px 299px, white, transparent),
  radial-gradient(2px 2px at 344px 121px, white, transparent),
  radial-gradient(2px 2px at 407px 444px, white, transparent),
  radial-gradient(2px 2px at 379px 24px, white, transparent),
  radial-gradient(2px 2px at 55px 269px, white, transparent),
  radial-gradient(3px 3px at 234px 270px, white, transparent),
  radial-gradient(3px 3px at 140px 444px, white, transparent);
  opacity: 0.5;
  animation-duration: 240s;
  animation-name: starsMoveMid;
}

@keyframes starsMoveMid {
  from {
    transform: translate(0, 0);
  }
  to {
    transform: translate(300px, 500px);
  }
}

.stars-front {
  background-image:
  radial-gradient(3px 3px at 488px 158px, white, transparent),
  radial-gradient(3px 3px at 64px 63px, white, transparent),
  radial-gradient(3px 3px at 178px 116px, white, transparent),
  radial-gradient(3px 3px at 159px 265px, white, transparent),
  radial-gradient(3px 3px at 74px 459px, white, transparent),
  radial-gradient(4px 4px at 274px 415px, white, transparent),
  radial-gradient(4px 4px at 93px 495px, white, transparent),
  radial-gradient(3px 3px at 136px 373px, white, transparent),
  radial-gradient(4px 4px at 187px 110px, white, transparent),
  radial-gradient(3px 3px at 162px 317px, white, transparent),
  radial-gradient(4px 4px at 156px 71px, white, transparent),
  radial-gradient(3px 3px at 484px 245px, white, transparent),
  radial-gradient(3px 3px at 196px 365px, white, transparent),
  radial-gradient(3px 3px at 347px 166px, white, transparent),
  radial-gradient(3px 3px at 310px 6px, white, transparent),
  radial-gradient(4px 4px at 241px 121px, white, transparent),
  radial-gradient(4px 4px at 20px 131px, white, transparent),
  radial-gradient(4px 4px at 113px 455px, white, transparent),
  radial-gradient(3px 3px at 77px 144px, white, transparent),
  radial-gradient(4px 4px at 165px 480px, white, transparent);
  opacity: 0.8;
  animation-duration: 180s;
  animation-name: starsMoveFront;
}

@keyframes starsMoveFront {
  from {
    transform: translate(0, 0);
  }
  to {
    transform: translate(500px, 700px);
  }
}

.intro {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 4rem;
  color: #0c66c4;
  opacity: 0;
  z-index: 5;
  text-align: center;
  visibility: hidden;
}

.intro.play {
    visibility: visible;
    animation-name: introFade;
    animation-fill-mode: forwards;
    animation-timing-function: ease-in-out;
}

@keyframes introFade {
  0%   { opacity: 0; }
  10%  { opacity: 1; }
  90%  { opacity: 1; }
  100% { opacity: 0; }
}

.logo {
    position: fixed;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    perspective: 800px; /* Tiefenwirkung */
    opacity: 0;
    z-index: 4;
    text-align: center;
    transform-style: preserve-3d;
}

.logo h1 {
    font-size: 10vw;
}

.logo p {
    font-size: 5vw;
}

.logo p, .logo h1 {
    font-family: 'Arial', sans-serif;
    margin: 0;
    color: transparent;
    -webkit-text-stroke: 3px #feda4a;
    font-weight: bold;
}

.logo.play {
    animation-name: logoFly;
    animation-fill-mode: forwards;
    animation-timing-function: ease-out;
}

@keyframes logoFly {
  0% {
    opacity: 1;
    transform: translateZ(0) scale(2);
  }
  95% {
    opacity: 0;
    transform: translateZ(-1000px) scale(0.1);
  }
}

.scene {
  position: relative;
  height: 100vh;
  perspective: 1000px;
  z-index: 1;
}

.crawl {
  position: absolute;
  bottom: 0px;
  width: 80%;
  left: 10%;
  text-align: center;

  transform-origin: 50% 100%;
  transform: rotateX(75deg) translateY(100%);
}

@keyframes crawl {
  0% {
    transform: rotateX(75deg) translateY(100%);
  }
  100% {
    transform: rotateX(75deg) translateY(var(--crawl-end));
  }
}

.episode {
  font-size: 5rem;
  margin-bottom: 1rem;
  text-align: center;
}

h1 {
  font-size: 5rem;
  margin-bottom: 2rem;
}

p {
  font-size: 5rem;
  line-height: 1.6;
  text-align: justify;
}

#start {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 10;
    padding: 16px 32px;
    font-size: 20px;
    cursor: pointer;
    background: #222;
    color: #feda4a;
    border: 2px solid #feda4a;
    border-radius: 8px;
}