:root {
  --hero: url('images/hero-rs5-cinematic.jpg');
}

.hero::before {
  inset: 0;
  z-index: 1;
  background: linear-gradient(90deg, #050505 4%, rgba(5, 5, 5, .9) 34%, rgba(5, 5, 5, .28) 70%, rgba(5, 5, 5, .55));
  pointer-events: none;
}

.hero::after {
  z-index: 1;
  background:
    linear-gradient(105deg, transparent 38%, rgba(189, 140, 101, 0) 44%, rgba(221, 176, 137, .16) 50%, rgba(189, 140, 101, 0) 56%, transparent 62%),
    linear-gradient(115deg, transparent 23%, #ffffff0a 23.2%, transparent 23.7%, transparent 60%, #ffffff08 60.2%, transparent 60.6%);
  background-size: 220% 100%, 100% 100%;
  animation: rs5-light-sweep 8s ease-in-out infinite;
  pointer-events: none;
}

.hero-copy {
  z-index: 2;
  animation: hero-copy-arrival .9s ease-out both;
}

.hero-proof {
  z-index: 2;
}

.hero-video {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 48%;
  filter: brightness(.88) saturate(.95) contrast(1.05);
  animation: hero-video-arrival 1.1s ease-out both;
}

@keyframes hero-video-arrival {
  from { opacity: 0; transform: scale(1.025); }
  to { opacity: 1; transform: scale(1); }
}

@keyframes rs5-light-sweep {
  0%, 18% { background-position: 145% 0, 0 0; opacity: .35; }
  48%, 62% { background-position: -45% 0, 0 0; opacity: 1; }
  100% { background-position: -45% 0, 0 0; opacity: .4; }
}

@keyframes hero-copy-arrival {
  from { opacity: 0; transform: translateY(18px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 760px) {
  .hero::before {
    background: linear-gradient(90deg, #050505f2 3%, #050505b8 54%, #05050554);
  }

  .hero-video {
    object-position: 64% center;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero::after,
  .hero-copy {
    animation: none;
  }

  .hero-video {
    display: none;
  }

  .hero::before {
    background: linear-gradient(90deg,#050505 5%,#050505df 36%,#05050550 75%,#050505bd), var(--hero) 75% 46%/cover;
  }
}