.v22-hero-image .hnrp-banner-scene {
  position: relative;
  aspect-ratio: 2048 / 552;
  overflow: hidden;
  isolation: isolate;
  pointer-events: none;
  background: #06143b;
  mask-image: linear-gradient(to bottom, #000 70%, transparent);
}

.v22-hero-image .hnrp-banner-scene img,
.v22-hero-image .hnrp-banner-glow {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
}

.v22-hero-image .hnrp-banner-clouds,
.v22-hero-image .hnrp-banner-near-clouds {
  position: absolute;
  inset: 0 auto 0 0;
  width: 200%;
  background: url("banner-clouds.webp?v=4") 0 0 / 50% 100% repeat-x;
}

.v22-hero-image .hnrp-banner-clouds {
  animation: hnrp-cloud-drift 180s linear infinite;
}

.v22-hero-image .hnrp-banner-near-clouds {
  z-index: 3;
  background-image: url("banner-near-clouds.webp?v=5");
  opacity: .52;
  mix-blend-mode: screen;
  animation: hnrp-cloud-drift 95s linear -32s infinite;
}

.v22-hero-image .hnrp-banner-scene img {
  object-fit: fill !important;
  mask-image: none !important;
  animation: none !important;
  transform: none !important;
  filter: none !important;
}

.v22-hero-image .hnrp-banner-perspective,
.v22-hero-image .hnrp-banner-heartbeat {
  position: absolute;
  inset: 0;
}

.v22-hero-image .hnrp-banner-perspective {
  z-index: 1;
  perspective: 1000px;
  perspective-origin: 48% 48%;
}

.v22-hero-image .hnrp-banner-heartbeat {
  isolation: isolate;
  --hnrp-pulse-duration: 2s;
  --hnrp-pulse-easing: ease-in-out;
}

.v22-hero-image .hnrp-banner-glow {
  mix-blend-mode: screen;
}

.v22-hero-image .hnrp-banner-glow ellipse {
  transform-box: fill-box;
  transform-origin: center;
  animation: hnrp-letter-pulse var(--hnrp-pulse-duration) var(--hnrp-pulse-easing) infinite;
}

.v22-hero-image .hnrp-banner-scene .hnrp-banner-motion {
  z-index: 2;
  mix-blend-mode: screen;
}

body.hnrp-kawaii-mode .v22-hero-image .hnrp-banner-scene {
  display: none !important;
}

@keyframes hnrp-cloud-drift {
  from { transform: translateX(-50%); }
  to { transform: translateX(0); }
}

@keyframes hnrp-letter-pulse {
  0%, 100% { transform: scale(.72); opacity: .12; }
  50% { transform: scale(1.22); opacity: .67; }
}

@media (max-width: 560px) {
  .v22-hero-image .hnrp-banner-scene {
    width: 130%;
    left: -15%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .v22-hero-image .hnrp-banner-scene {
    background: #06143b url("banner-clean.webp?v=4") center / 100% 100% no-repeat;
  }

  .v22-hero-image .hnrp-banner-clouds,
  .v22-hero-image .hnrp-banner-near-clouds,
  .v22-hero-image .hnrp-banner-perspective,
  .v22-hero-image .hnrp-banner-motion {
    display: none !important;
  }
}