.hero-slideshow{
  position:absolute;
  inset:0;
  z-index:0;
  overflow:hidden;
  background:#0b3526;
}
.hero-slide{
  --hero-position:center;
  position:absolute;
  inset:-2%;
  opacity:0;
  background-image:var(--hero-img);
  background-position:var(--hero-position);
  background-size:cover;
  background-repeat:no-repeat;
  transform:scale(1.08);
  animation:hero-crossfade 25s linear infinite;
  will-change:opacity,transform;
}
.hero-slide:nth-child(1){animation-delay:0s;--hero-position:center 52%}
.hero-slide:nth-child(2){animation-delay:5s;--hero-position:center}
.hero-slide:nth-child(3){animation-delay:10s;--hero-position:center}
.hero-slide:nth-child(4){animation-delay:15s;--hero-position:center 48%}
.hero-slide:nth-child(5){animation-delay:20s;--hero-position:center}
.hero__media{
  z-index:1;
  background:
    radial-gradient(circle at 78% 36%,rgba(12,91,62,.1),rgba(4,24,17,.42) 72%),
    linear-gradient(90deg,rgba(4,31,22,.97) 0%,rgba(6,46,32,.83) 46%,rgba(4,30,21,.34) 77%,rgba(4,25,18,.5) 100%);
  filter:none;
}
.hero__grid{z-index:2}
.hero__content,.hero__foot{z-index:3}
.hero-slideshow:after{
  content:"";
  position:absolute;
  inset:0;
  z-index:6;
  pointer-events:none;
  opacity:.15;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.3'/%3E%3C/svg%3E");
  mix-blend-mode:soft-light;
}
.hero-progress{
  display:flex;
  gap:7px;
  width:155px;
  margin-top:38px;
}
.hero-progress span{
  position:relative;
  width:25px;
  height:2px;
  overflow:hidden;
  background:rgba(255,255,255,.28);
}
.hero-progress span:after{
  content:"";
  position:absolute;
  inset:0;
  background:var(--lime);
  transform:translateX(-105%);
  animation:hero-progress 25s linear infinite;
}
.hero-progress span:nth-child(1):after{animation-delay:0s}
.hero-progress span:nth-child(2):after{animation-delay:5s}
.hero-progress span:nth-child(3):after{animation-delay:10s}
.hero-progress span:nth-child(4):after{animation-delay:15s}
.hero-progress span:nth-child(5):after{animation-delay:20s}
@keyframes hero-crossfade{
  0%,17%{opacity:1;transform:scale(1.08) translate3d(0,0,0)}
  21%,100%{opacity:0;transform:scale(1) translate3d(-.5%,.25%,0)}
}
@keyframes hero-progress{
  0%{transform:translateX(-105%)}
  18%{transform:translateX(0)}
  21%,100%{transform:translateX(105%)}
}
@media(max-width:900px){
  .hero-slide{inset:0;animation-duration:25s}
  .hero__media{background:linear-gradient(90deg,rgba(4,31,22,.96),rgba(5,42,29,.74) 68%,rgba(4,28,20,.55))}
}
@media(max-width:600px){
  .hero-slide:nth-child(1),.hero-slide:nth-child(4){--hero-position:62% center}
  .hero-slide:nth-child(2),.hero-slide:nth-child(3),.hero-slide:nth-child(5){--hero-position:center}
  .hero-progress{margin-top:28px}
}
@media(prefers-reduced-motion:reduce){
  .hero-slide{animation:none;opacity:0;transform:none}
  .hero-slide:first-child{opacity:1}
  .hero-progress{display:none}
}
