/*
 * Mobile and touch carousel v4.9.
 * Slides are normal-flow blocks, not transformed or scrolled tracks.
 * The artwork is repeated as a CSS background so Safari cannot leave a blank
 * hero when it fails to paint an object-fit image inside the carousel.
 */
@media (max-width: 1100px), (pointer: coarse) {
  .hero-shell { display: block; }
  .hero-shell > .hero-arrow { display: none; }

  .hero-viewport {
    width: 100%;
    padding: 0 var(--pad);
    overflow: hidden;
  }

  .hero-track {
    position: relative;
    display: block;
    width: 100%;
    transform: none !important;
    transition: none;
    will-change: auto;
    touch-action: pan-y;
    user-select: none;
    -webkit-user-select: none;
  }

  .hero-slide {
    display: none;
    width: 100%;
    min-width: 0;
  }

  .hero-track:not(.is-mobile-ready) .hero-slide:first-child,
  .hero-track.is-mobile-ready .hero-slide.is-active {
    display: block;
  }

  .hero-track.is-transitioning .hero-slide.is-underlay,
  .hero-track.is-transitioning .hero-slide.is-arriving {
    display: block;
  }

  .hero-track.is-transitioning .hero-slide.is-underlay {
    position: absolute;
    inset: 0;
    z-index: 0;
  }

  .hero-track.is-transitioning .hero-slide.is-arriving {
    position: relative;
    z-index: 1;
  }

  .hero-slide.is-arriving.from-right { transform: translate3d(100%, 0, 0); }
  .hero-slide.is-arriving.from-left { transform: translate3d(-100%, 0, 0); }

  .hero-slide.is-arriving.is-animating.from-right {
    animation: jonjohn-slide-from-right .46s cubic-bezier(.22,.78,.24,1) both;
  }

  .hero-slide.is-arriving.is-animating.from-left {
    animation: jonjohn-slide-from-left .46s cubic-bezier(.22,.78,.24,1) both;
  }

  .hero-slide.is-underlay.is-animating.to-left {
    animation: jonjohn-slide-out-left .46s cubic-bezier(.22,.78,.24,1) both;
  }

  .hero-slide.is-underlay.is-animating.to-right {
    animation: jonjohn-slide-out-right .46s cubic-bezier(.22,.78,.24,1) both;
  }

  .hero-track.is-dragging .hero-slide.is-drag-current,
  .hero-track.is-settling .hero-slide.is-drag-current {
    position: relative;
    display: block;
    z-index: 1;
    transform: translate3d(var(--drag-current-x, 0), 0, 0);
    will-change: transform;
  }

  .hero-track.is-dragging .hero-slide.is-drag-incoming,
  .hero-track.is-settling .hero-slide.is-drag-incoming {
    position: absolute;
    inset: 0;
    display: block;
    z-index: 2;
    transform: translate3d(var(--drag-incoming-x, 100%), 0, 0);
    will-change: transform;
  }

  .hero-track.is-settling .hero-slide.is-drag-current,
  .hero-track.is-settling .hero-slide.is-drag-incoming {
    transition: transform var(--drag-settle-duration, 280ms) cubic-bezier(.18,.82,.22,1);
  }

  .hero-art {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto minmax(104px, auto);
    width: 100%;
    min-height: 0;
    height: auto;
    background: #e7e6e1;
  }

  .hero-mobile-image {
    position: relative;
    inset: auto;
    grid-column: 1;
    grid-row: 1;
    width: 100%;
    aspect-ratio: 4 / 3;
    z-index: 0;
    display: block;
    background-color: #e7e6e1;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
  }

  /* The independent background above is the mobile visual source of truth. */
  .hero-art > img {
    display: none;
  }

  .hero-shade {
    position: relative;
    inset: auto;
    grid-column: 1;
    grid-row: 2;
    min-height: 104px;
    z-index: 1;
    background: linear-gradient(180deg, rgba(231,230,225,.62), rgba(20,20,20,.46));
  }

  .hero-caption {
    position: relative;
    left: auto;
    right: auto;
    bottom: auto;
    grid-column: 1;
    grid-row: 2;
    align-self: center;
    z-index: 2;
    padding: 18px 22px;
  }

  .hero-mobile-controls {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px var(--pad) 0;
  }

  .hero-mobile-button {
    min-width: 48px;
    min-height: 40px;
    border: 0;
    background: transparent;
    font-size: 25px;
    line-height: 1;
    cursor: pointer;
  }

  .hero-mobile-button:first-child { text-align: left; }
  .hero-mobile-button:last-child { text-align: right; }
}

@keyframes jonjohn-slide-from-right {
  from { transform: translate3d(100%, 0, 0); }
  to { transform: translate3d(0, 0, 0); }
}

@keyframes jonjohn-slide-from-left {
  from { transform: translate3d(-100%, 0, 0); }
  to { transform: translate3d(0, 0, 0); }
}

@keyframes jonjohn-slide-out-left {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(-12%, 0, 0); }
}

@keyframes jonjohn-slide-out-right {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(12%, 0, 0); }
}

@media (prefers-reduced-motion: reduce) {
  .hero-slide.is-arriving.is-animating { animation: none !important; transform: none !important; }
  .hero-slide.is-underlay.is-animating { animation: none !important; transform: none !important; }
  .hero-track.is-settling .hero-slide { transition: none !important; }
}