/* OPTIONAL HERO REEL FINISH
 * Set --hero-reel-finish to 0 below to restore the previous hero exactly.
 * Or remove this stylesheet's link from src/index.html. The original scrim
 * stays in home-experience.css; this file only adds a removable visual layer.
 *
 * A smooth focal vignette conceals distracting shadow artifacts and a copy
 * scrim steadies contrast as footage changes. It does not repair compression.
 * No grain, blur, animation, video filtering, or additional asset downloads.
 */
.home-page .hero-reel {
  --hero-reel-finish: 1; /* 1 = enabled; 0 = original appearance */
  --hero-reel-focus-x: 68%;
  --hero-reel-focus-y: 42%;
  --hero-reel-edge-darkness: .42;
}

.home-page .hero-reel .hero-visual::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: var(--hero-reel-finish);
  background:
    radial-gradient(ellipse farthest-corner at var(--hero-reel-focus-x) var(--hero-reel-focus-y),
      transparent 20%, rgba(0, 0, 0, .08) 58%, rgba(0, 0, 0, var(--hero-reel-edge-darkness)) 100%),
    linear-gradient(90deg, rgba(0, 0, 0, .32), rgba(0, 0, 0, .30) 36%, transparent 68%);
}

@media (max-width: 767px) {
  .home-page .hero-reel {
    --hero-reel-focus-x: 70%;
    --hero-reel-focus-y: 38%;
    --hero-reel-edge-darkness: .30;
  }

  .home-page .hero-reel .hero-visual::before {
    /* Copy spans the screen on phones; protect its full width and let the
       footage open up below it, rather than keeping a desktop side scrim. */
    background:
      radial-gradient(ellipse farthest-corner at var(--hero-reel-focus-x) var(--hero-reel-focus-y),
        transparent 20%, rgba(0, 0, 0, .06) 58%, rgba(0, 0, 0, var(--hero-reel-edge-darkness)) 100%),
      linear-gradient(180deg, rgba(0, 0, 0, .44) 0%, rgba(0, 0, 0, .44) 64%, transparent 80%);
  }
}