:root {
  --ers-v10-hero-y: 0px;
  --ers-v10-hero-scale: 1.025;
  --ers-v10-hero-pan-y: 50%;
  --ers-v10-speed-opacity: .12;
  --ers-v10-streak-x: 0px;
}

/* Real Durban arrival frame: Blue Lagoon / Durban North southbound M4. */
.ers-premium-v7.ers-v7-home.ers-v8-home .ers-wow-hero::before {
  background:
    linear-gradient(90deg, rgba(5,5,5,.94) 0%, rgba(5,5,5,.78) 31%, rgba(5,5,5,.18) 61%, rgba(5,5,5,.12) 100%),
    linear-gradient(180deg, rgba(5,5,5,.12), rgba(5,5,5,.02) 40%, rgba(5,5,5,.8) 100%);
}

.ers-premium-v7.ers-v7-home.ers-v8-home .ers-wow-hero-stage {
  background-color: #1d2725;
  background-image: url("/assets/responsive/ers-durban-m4-arrival-hero-v4-1672.jpg");
  background-image: image-set(
    url("/assets/responsive/ers-durban-m4-arrival-hero-v4-1672.avif") type("image/avif"),
    url("/assets/responsive/ers-durban-m4-arrival-hero-v4-1672.webp") type("image/webp"),
    url("/assets/responsive/ers-durban-m4-arrival-hero-v4-1672.jpg") type("image/jpeg")
  );
  background-position: 50% var(--ers-v10-hero-pan-y);
  filter: saturate(.96) contrast(1.05) brightness(.78);
  transform: translate3d(0, var(--ers-v10-hero-y), 0) scale(var(--ers-v10-hero-scale));
  transform-origin: 56% 58%;
  will-change: transform, background-position;
}

.ers-premium-v7.ers-v7-home.ers-v8-home .ers-wow-hero-stage::before {
  content: "M4 SOUTHBOUND / DURBAN";
}

.ers-premium-v7.ers-v7-home.ers-v8-home .ers-wow-hero-stage::after {
  z-index: 2;
  background:
    radial-gradient(ellipse at 63% 76%, rgba(255,212,0,.12), transparent 16%),
    repeating-linear-gradient(168deg, transparent 0 10px, rgba(255,255,255,.055) 11px, transparent 12px 25px),
    linear-gradient(120deg, rgba(5,5,5,.16), transparent 54%, rgba(255,212,0,.07));
  opacity: var(--ers-v10-speed-opacity);
  transform: translate3d(var(--ers-v10-streak-x), 0, 0);
  mix-blend-mode: soft-light;
  will-change: transform, opacity;
}

.ers-v10-driving .ers-wow-hero-stage {
  filter: saturate(1) contrast(1.06) brightness(.8);
}

@media (max-width: 1500px) {
  .ers-premium-v7.ers-v7-home.ers-v8-home .ers-wow-hero-stage {
    background-image: url("/assets/responsive/ers-durban-m4-arrival-hero-v4-1440.jpg");
    background-image: image-set(
      url("/assets/responsive/ers-durban-m4-arrival-hero-v4-1440.avif") type("image/avif"),
      url("/assets/responsive/ers-durban-m4-arrival-hero-v4-1440.webp") type("image/webp"),
      url("/assets/responsive/ers-durban-m4-arrival-hero-v4-1440.jpg") type("image/jpeg")
    );
  }
}

@media (max-width: 1180px) {
  .ers-premium-v7.ers-v7-home.ers-v8-home .ers-wow-hero-stage {
    background-image: url("/assets/responsive/ers-durban-m4-arrival-hero-v4-1100.jpg");
    background-image: image-set(
      url("/assets/responsive/ers-durban-m4-arrival-hero-v4-1100.avif") type("image/avif"),
      url("/assets/responsive/ers-durban-m4-arrival-hero-v4-1100.webp") type("image/webp"),
      url("/assets/responsive/ers-durban-m4-arrival-hero-v4-1100.jpg") type("image/jpeg")
    );
  }
}

@media (min-width: 681px) and (max-width: 1023px) {
  .ers-premium-v7.ers-v7-home.ers-v8-home .ers-wow-h1 {
    position: absolute;
    top: clamp(150px, 18svh, 205px);
    left: var(--ers-v7-gutter);
    right: var(--ers-v7-gutter);
    width: auto;
    max-width: none;
    font-size: clamp(70px, 11vw, 88px);
    line-height: .82;
    text-wrap: nowrap;
    text-shadow: 0 4px 30px rgba(0,0,0,.72);
  }

  .ers-premium-v7.ers-v7-home.ers-v8-home .ers-v8-title-mid,
  .ers-premium-v7.ers-v7-home.ers-v8-home .ers-wow-h1 .ers-wow-typeword {
    margin-left: 0;
  }

  .ers-premium-v7.ers-v7-home.ers-v8-home .ers-wow-h1 .ers-wow-typeword {
    width: max-content;
    max-width: 100%;
    margin-top: .1em;
    white-space: nowrap;
  }

  .ers-premium-v7.ers-v7-home.ers-v8-home .ers-wow-h1 .ers-wow-typeword::after {
    right: auto;
    bottom: -.13em;
    width: 100%;
    height: 3px;
  }

  .ers-premium-v7.ers-v7-home.ers-v8-home .ers-wow-hero-copy .ers-wow-actions {
    width: min(400px, 100%);
  }
}

@media (max-width: 680px) {
  :root {
    --ers-v10-hero-pan-y: 44%;
  }

  .ers-premium-v7.ers-v7-home.ers-v8-home .ers-wow-hero::before {
    background:
      linear-gradient(180deg, rgba(5,5,5,.06) 0%, rgba(5,5,5,.08) 35%, rgba(5,5,5,.76) 60%, rgba(5,5,5,.99) 100%),
      linear-gradient(90deg, rgba(5,5,5,.24), rgba(5,5,5,.04));
  }

  .ers-premium-v7.ers-v7-home.ers-v8-home .ers-wow-hero-stage {
    background-image: url("/assets/responsive/ers-durban-m4-arrival-hero-mobile-v1-768.jpg");
    background-image: image-set(
      url("/assets/responsive/ers-durban-m4-arrival-hero-mobile-v1-768.avif") type("image/avif"),
      url("/assets/responsive/ers-durban-m4-arrival-hero-mobile-v1-768.webp") type("image/webp"),
      url("/assets/responsive/ers-durban-m4-arrival-hero-mobile-v1-768.jpg") type("image/jpeg")
    );
    background-position: 50% var(--ers-v10-hero-pan-y);
    filter: saturate(.94) contrast(1.04) brightness(.82);
    transform-origin: 58% 42%;
  }

  .ers-premium-v7.ers-v7-home.ers-v8-home .ers-wow-hero-stage::after {
    background:
      radial-gradient(ellipse at 66% 51%, rgba(255,212,0,.1), transparent 18%),
      repeating-linear-gradient(168deg, transparent 0 13px, rgba(255,255,255,.04) 14px, transparent 15px 31px);
  }

  /* Keep the message, vehicle and actions in three distinct mobile layers. */
  .ers-premium-v7.ers-v7-home.ers-v8-home .ers-wow-hero-copy {
    display: block;
    padding: 0;
  }

  .ers-premium-v7.ers-v7-home.ers-v8-home .ers-wow-h1 {
    position: absolute;
    top: clamp(104px, 13.5svh, 122px);
    left: var(--ers-v7-gutter);
    right: var(--ers-v7-gutter);
    width: auto;
    max-width: none;
    font-size: clamp(48px, 15vw, 61px);
    line-height: .82;
    text-wrap: nowrap;
    text-shadow: 0 4px 28px rgba(0,0,0,.72);
  }

  .ers-premium-v7.ers-v7-home.ers-v8-home .ers-wow-h1 .ers-wow-typeword {
    width: max-content;
    max-width: 100%;
    margin-top: .1em;
    white-space: nowrap;
  }

  .ers-premium-v7.ers-v7-home.ers-v8-home .ers-wow-h1 .ers-wow-typeword::after {
    right: auto;
    bottom: -.13em;
    width: 100%;
    height: 3px;
  }

  .ers-premium-v7.ers-v7-home.ers-v8-home .ers-wow-lead {
    position: absolute;
    left: var(--ers-v7-gutter);
    right: var(--ers-v7-gutter);
    bottom: 112px;
    width: auto;
    max-width: 36ch;
    margin: 0;
  }

  .ers-premium-v7.ers-v7-home.ers-v8-home .ers-wow-hero-copy .ers-wow-actions {
    position: absolute;
    left: var(--ers-v7-gutter);
    right: var(--ers-v7-gutter);
    bottom: 34px;
    width: auto;
    margin: 0;
  }
}

@media (max-width: 430px) {
  .ers-premium-v7.ers-v7-home.ers-v8-home .ers-wow-hero-stage {
    background-image: url("/assets/responsive/ers-durban-m4-arrival-hero-mobile-v1-480.jpg");
    background-image: image-set(
      url("/assets/responsive/ers-durban-m4-arrival-hero-mobile-v1-480.avif") type("image/avif"),
      url("/assets/responsive/ers-durban-m4-arrival-hero-mobile-v1-480.webp") type("image/webp"),
      url("/assets/responsive/ers-durban-m4-arrival-hero-mobile-v1-480.jpg") type("image/jpeg")
    );
  }
}

@media (prefers-reduced-motion: reduce) {
  .ers-premium-v7.ers-v7-home.ers-v8-home .ers-wow-hero-stage {
    transform: none;
    will-change: auto;
  }

  .ers-premium-v7.ers-v7-home.ers-v8-home .ers-wow-hero-stage::after {
    opacity: .08;
    transform: none;
  }
}