.opening-scene {
  --bird-duration: 10s;
  --bird-delay: 1.2s;
  position: relative;
  min-height: 92svh;
  overflow: hidden;
  isolation: isolate;
  background: #081451;
}

.opening-scene__stars,
.opening-scene__clouds,
.opening-scene__mountains,
.opening-scene__foreground {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  user-select: none;
}

.opening-scene__stars {
  z-index: 1;
}

.opening-scene__star {
  position: absolute;
  top: var(--star-y);
  left: var(--star-x);
  width: 3px;
  height: 3px;
  background: #d5eeff;
  box-shadow: 0 0 0 1px rgb(153 205 239 / 20%);
  animation: opening-star 2.4s steps(2, end) infinite;
}

.opening-scene__star:nth-child(2n) {
  width: 2px;
  height: 2px;
  animation-delay: -1.2s;
}

.opening-scene__bright-star {
  position: absolute;
  z-index: 2;
  top: 4%;
  left: 58%;
  width: 4px;
  height: 4px;
  background: #fffde1;
  box-shadow:
    0 -8px 0 rgb(255 253 225 / 15%),
    0 -4px 0 rgb(255 253 225 / 45%),
    0 4px 0 rgb(255 253 225 / 45%),
    0 8px 0 rgb(255 253 225 / 15%),
    -8px 0 0 rgb(255 253 225 / 15%),
    -4px 0 0 rgb(255 253 225 / 45%),
    4px 0 0 rgb(255 253 225 / 45%),
    8px 0 0 rgb(255 253 225 / 15%);
}

.opening-scene__clouds {
  z-index: 2;
  top: 15%;
  height: 52%;
  object-fit: fill;
  opacity: 0.14;
  filter: brightness(0.72) saturate(1.5) hue-rotate(166deg);
  image-rendering: pixelated;
}

.opening-scene__mountains {
  z-index: 3;
  top: auto;
  bottom: 0;
  height: 39%;
  object-fit: cover;
  object-position: center bottom;
  image-rendering: pixelated;
}

.opening-scene__foreground {
  z-index: 5;
  top: auto;
  bottom: -1px;
  height: 29%;
  object-fit: fill;
  image-rendering: pixelated;
}

.opening-scene__title {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.opening-scene__logo {
  position: absolute;
  z-index: 7;
  top: 14%;
  left: 50%;
  width: min(calc(100% - 24px), 400px);
  height: auto;
  aspect-ratio: 80 / 37;
  transform: translateX(-50%);
  image-rendering: pixelated;
  pointer-events: none;
  user-select: none;
  animation: opening-title-arrive 760ms steps(5, end) both;
}

.opening-scene__bird {
  position: absolute;
  z-index: 8;
  top: 50%;
  left: 0;
  width: 32px;
  height: 32px;
  animation: opening-bird-crossing var(--bird-duration) linear var(--bird-delay) infinite both;
  will-change: transform;
}

.opening-scene__bird-sprite {
  display: block;
  width: 32px;
  height: 32px;
  background-image: var(--opening-bird-image);
  background-repeat: no-repeat;
  background-size: 128px 32px;
  image-rendering: pixelated;
  transform: scaleX(-1) scale(1.8);
  animation: opening-bird-flap 520ms steps(4) infinite;
}

@keyframes opening-title-arrive {
  from {
    opacity: 0;
    transform: translate(-50%, -18px) scale(0.9);
  }
  to {
    opacity: 1;
    transform: translate(-50%, 0) scale(1);
  }
}

@keyframes opening-star {
  50% {
    opacity: 0.35;
  }
}

@keyframes opening-bird-crossing {
  0% {
    opacity: 0;
    transform: translate3d(-70px, 28px, 0);
  }
  7% {
    opacity: 1;
  }
  35% {
    transform: translate3d(38vw, -18px, 0);
  }
  68% {
    transform: translate3d(72vw, 16px, 0);
  }
  93% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translate3d(calc(100vw + 70px), -24px, 0);
  }
}

@keyframes opening-bird-flap {
  to {
    background-position: -128px 0;
  }
}

@media (min-width: 768px) {
  .opening-scene__logo {
    top: 12%;
  }

  .opening-scene__foreground {
    height: 34%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .opening-scene__logo,
  .opening-scene__star,
  .opening-scene__bird-sprite {
    animation: none;
  }

  .opening-scene__bird {
    top: auto;
    right: 10%;
    bottom: 15%;
    left: auto;
    animation: none;
  }
}