/* Admin-selected page character. The fixed flight stage is clipped so off-screen
   turns never widen the document or block controls beneath it. */
html[data-page-character-loading="true"] .hero-opossum,
html[data-page-character-loading="true"] .blue-angels-flight-stage,
html:not([data-page-characters~="hero-opossum"]) .hero-opossum,
html:not([data-page-characters~="blue-angels"]) .blue-angels-flight-stage {
  display: none;
}

.blue-angels-flight-stage {
  position: fixed;
  inset: 0;
  z-index: 10000;
  overflow: clip;
  pointer-events: none;
  contain: strict;
}

.blue-angels-flight {
  position: absolute;
  top: 0;
  left: 0;
  width: clamp(96px, 11vw, 168px);
  height: auto;
  user-select: none;
  will-change: transform;
  transform-origin: 50% 50%;
  filter: drop-shadow(0 7px 7px rgb(0 0 0 / 32%));
}

@media (max-width: 600px) {
  .blue-angels-flight {
    width: clamp(80px, 27vw, 112px);
    filter: drop-shadow(0 5px 5px rgb(0 0 0 / 28%));
  }
}

@media (prefers-reduced-motion: reduce) {
  .blue-angels-flight {
    top: 5rem;
    left: auto;
    right: 1rem;
    transform: rotate(-7deg);
  }
}