/* New trailer artwork only. The controller reads the first URL of the slide's
   computed background-image after marking the slide as loading. */
#main#main .lp-hero--product-slideshow .product-hero-slides > .product-hero-slide[data-ggg-trailer] {
  --trailer-desktop-width: min(80%, 1440px);
  background-color: #000103;
  background-image: var(--trailer-display, var(--trailer-desktop)) !important;
  background-repeat: no-repeat;
  background-size: var(--trailer-desktop-width) auto !important;
  background-position: right 57% !important;
  filter: none !important;
  transform: none !important;
}

#main#main .lp-hero--product-slideshow .product-hero-slides.is-load-staged > .product-hero-slide[data-ggg-trailer],
#main#main .lp-hero--product-slideshow .product-hero-slides.is-js-controlled > .product-hero-slide[data-ggg-trailer]:not(.is-slide-loaded):not(.is-slide-loading) {
  --trailer-display: none !important;
}

@media (min-width: 721px) {
  /* Soften the photograph's edges where a tall hero exposes the black
     backdrop. This follows the exact footprint of the background image. */
  #main#main .lp-hero--product-slideshow .product-hero-slides > .product-hero-slide[data-ggg-trailer]::after {
    content: "";
    position: absolute;
    inset: 57% 0 auto auto;
    width: var(--trailer-desktop-width);
    aspect-ratio: 1672 / 941;
    transform: translateY(-57%);
    pointer-events: none;
    background: linear-gradient(180deg, #000103, transparent 9%, transparent 89%, #000103);
  }
}

@media (max-width: 720px) {
  #main#main .lp-hero--product-slideshow .product-hero-slides > .product-hero-slide[data-ggg-trailer] {
    --trailer-display: var(--trailer-mobile);
    --trailer-frame-width: min(107%, 500px);
    background-color: #1d2024;
    background-size: var(--trailer-frame-width) auto !important;
    background-position: center !important;
    overflow: hidden;
  }
}

/* Near the ends of the mobile range, a cover crop would cut the towing gear
   or wheels. Blend the composition into an underlay from the same photo. */
@media (max-width: 363px), (min-width: 491px) and (max-width: 720px) {
  #main#main .lp-hero--product-slideshow .product-hero-slides > .product-hero-slide[data-ggg-trailer]::before,
  #main#main .lp-hero--product-slideshow .product-hero-slides > .product-hero-slide[data-ggg-trailer]::after {
    content: "";
    position: absolute;
    pointer-events: none;
    background-image: var(--trailer-display);
    background-position: center;
    background-repeat: no-repeat;
  }

  #main#main .lp-hero--product-slideshow .product-hero-slides > .product-hero-slide[data-ggg-trailer]::before {
    inset: 0;
    background-size: cover;
    filter: blur(28px) brightness(.58);
    transform: scale(1.08);
  }

  #main#main .lp-hero--product-slideshow .product-hero-slides > .product-hero-slide[data-ggg-trailer]::after {
    inset: auto;
    top: 50%;
    left: 50%;
    width: var(--trailer-frame-width);
    aspect-ratio: 39 / 35;
    background-size: 100% auto;
    transform: translate(-50%, -50%);
    mask-image:
      linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent),
      linear-gradient(180deg, transparent, #000 6%, #000 94%, transparent);
    mask-composite: intersect;
  }
}

/* Keep the existing CSS cycle usable if landing-pages.js runs without the
   main slideshow controller. With all JS disabled, first paint stays staged. */
@media (prefers-reduced-motion: no-preference) {
  #main .lp-hero--product-slideshow:not(.lp-hero--products-page-cycle)
    .product-hero-slides:has(> [data-ggg-trailer]):not(.is-load-staged):not(.is-js-controlled) > .product-hero-slide {
    animation-name: ggg-trailer-diesel-fallback;
    animation-duration: 48s;
  }

  #main .lp-hero--product-slideshow:not(.lp-hero--products-page-cycle)
    .product-hero-slides:has(> [data-ggg-trailer]):not(.is-load-staged):not(.is-js-controlled) > .product-hero-slide:nth-child(7) {
    animation-delay: 36s;
  }

  #main .lp-hero--product-slideshow:not(.lp-hero--products-page-cycle)
    .product-hero-slides:has(> [data-ggg-trailer]):not(.is-load-staged):not(.is-js-controlled) > .product-hero-slide:nth-child(8) {
    animation-delay: 42s;
  }

  #main .lp-hero--products-page-cycle
    .product-hero-slides:has(> [data-ggg-trailer]):not(.is-load-staged):not(.is-js-controlled) > .product-hero-slide {
    animation-name: ggg-trailer-products-fallback;
    animation-duration: 48s;
  }

  #main .lp-hero--products-page-cycle
    .product-hero-slides:has(> [data-ggg-trailer]):not(.is-load-staged):not(.is-js-controlled) > .product-hero-slide:nth-child(11) {
    animation-delay: 40s;
  }

  #main .lp-hero--products-page-cycle
    .product-hero-slides:has(> [data-ggg-trailer]):not(.is-load-staged):not(.is-js-controlled) > .product-hero-slide:nth-child(12) {
    animation-delay: 44s;
  }

  @keyframes ggg-trailer-diesel-fallback {
    0%, 12.5% { opacity: 1; }
    15.35%, 100% { opacity: 0; }
  }

  @keyframes ggg-trailer-products-fallback {
    0%, 8.333% { opacity: 1; }
    10.333%, 100% { opacity: 0; }
  }
}