/* Optical scrim trial: independent of the original photographs and eye animation. */
.hero-stage { --texture-presence: 1; }

.hero-scrim,
.hero-scrim-light {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  mix-blend-mode: soft-light;
  -webkit-mask-image: radial-gradient(ellipse 66% 82% at 50% 49%, #000 20%, rgba(0,0,0,.9) 56%, transparent 100%);
  mask-image: radial-gradient(ellipse 66% 82% at 50% 49%, #000 20%, rgba(0,0,0,.9) 56%, transparent 100%);
}

.hero-scrim {
  background: url('assets/hero-scrim-v28.png') center / 360px 360px repeat;
  opacity: calc(.72 * var(--texture-presence));
}

.hero-scrim-light {
  background:
    radial-gradient(ellipse 43% 70% at 28% 39%, rgba(142,80,41,.55), transparent 82%),
    radial-gradient(ellipse 46% 75% at 73% 42%, rgba(96,111,80,.4), transparent 82%);
  opacity: calc(.3 * var(--texture-presence));
}

.hero-stage .camera,
.hero-stage .portrait-fallback {
  filter: blur(calc(.65px * var(--texture-presence)));
}

@media (max-width: 700px) {
  .hero-scrim { background-size: 310px 310px; opacity: calc(.64 * var(--texture-presence)); }
  .hero-stage .camera,
  .hero-stage .portrait-fallback { filter: blur(calc(.45px * var(--texture-presence))); }
}