html.intro-pending, html.intro-playing { overflow: hidden; }

.intro-pending body::after, .intro-landscape {
  background:
    radial-gradient(ellipse at 51% 46%, transparent 26%, #05070bc7 100%),
    url('assets/intro-pass.webp') 51% 48% / cover no-repeat #070911;
}

.intro-pending body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 30;
}

.raven-intro {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  overflow: hidden;
  isolation: isolate;
  background: #000;
  color: #f4f1fb;
}

.raven-intro::backdrop { background: transparent; }

.intro-film, .intro-landscape {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.intro-film { object-fit: cover; }
.intro-landscape { transform-origin: 51% 48%; }
.raven-intro.is-playing .intro-landscape {
  animation: into-raven-flight .88s cubic-bezier(.3,.12,.4,1) both;
}

@keyframes into-raven-flight {
  from { opacity: 1; transform: scale(1); }
  16% { opacity: .93; }
  to { opacity: 0; transform: scale(1.09); }
}

@media (min-aspect-ratio: 2/1) {
  .intro-film { object-fit: contain; }
}

@media (prefers-reduced-motion: reduce) {
  .intro-pending body::after, .raven-intro[open] { display: none; }
}