/* Restrained editorial backgrounds for film and poster case pages. */
.case-hero,
.poster-hero {
  isolation: isolate;
  background: #0b0c0f;
}

.case-hero::before,
.poster-hero::before {
  content: "";
  position: absolute;
  inset: -25%;
  z-index: -2;
  background:
    radial-gradient(ellipse 28% 55% at var(--pointer-x,72%) var(--pointer-y,38%), rgba(255,255,255,.11), transparent 72%),
    linear-gradient(115deg, transparent 30%, rgba(255,255,255,.055) 48%, transparent 66%);
  filter: blur(10px);
  animation: editorial-light 13s ease-in-out infinite alternate;
}

.case-hero::after,
.poster-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: .32;
  background-image:
    linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px),
    repeating-radial-gradient(circle at 20% 30%, rgba(255,255,255,.22) 0 1px, transparent 1px 4px);
  background-size: 64px 64px,64px 64px,6px 6px;
  mask-image: linear-gradient(to bottom,rgba(0,0,0,.25),#000 48%,rgba(0,0,0,.5));
}

.case-hero h1 em,
.poster-hero h1 em {
  color: #f2f0e9;
  -webkit-text-stroke: 1px rgba(242,240,233,.28);
}

@keyframes editorial-light {
  from { transform: translate3d(-4%,-2%,0) rotate(-2deg); }
  to { transform: translate3d(5%,2%,0) rotate(2deg); }
}

@media(prefers-reduced-motion:reduce){.case-hero::before,.poster-hero::before{animation:none}}