.hero-copy {
  isolation: isolate;
  position: relative;
}

.hero-copy::before {
  animation: hero-film-fallback 12s ease-in-out infinite alternate;
  background:
    radial-gradient(circle at 78% 82%, rgba(243, 181, 98, 0.18), transparent 22%),
    linear-gradient(132deg, transparent 8%, rgba(140, 182, 201, 0.12) 36%, transparent 62%),
    linear-gradient(166deg, transparent 28%, rgba(199, 243, 107, 0.08) 50%, transparent 72%);
  content: "";
  inset: -8% -18%;
  pointer-events: none;
  position: absolute;
  transform: translate3d(0, 0, 0);
  z-index: 0;
}

.hero-copy.hero-animation-ready::before {
  opacity: 0;
}

.hero-copy > :not(#filmCanvas) {
  position: relative;
  z-index: 1;
}

#filmCanvas {
  display: block;
  height: 112%;
  inset: -6% -14%;
  opacity: 0;
  pointer-events: none;
  position: absolute;
  width: 128%;
  will-change: filter, opacity;
  z-index: 0;
}

#filmCanvas.is-ready {
  filter: saturate(1.45) brightness(1.22);
  opacity: 0.84;
}

#filmCanvas.is-failed {
  display: none;
}

@media (prefers-reduced-motion: reduce) {
  .hero-copy::before {
    display: none;
  }

  #filmCanvas {
    display: none;
  }
}

@keyframes hero-film-fallback {
  from {
    background-position: 0% 0%, 0% 0%, 0% 0%;
    transform: translate3d(-2%, 1%, 0) scale(1.02);
  }

  to {
    background-position: 8% 5%, 9% -4%, -6% 8%;
    transform: translate3d(2%, -1%, 0) scale(1.06);
  }
}