/* Use the supplied product photography as a foreground plane. Its perspective
   and shadow move independently of the background and the live slide copy. */
@media (prefers-reduced-motion: no-preference) {
  .am-slider.am-motion-ready .am-slide:is([data-am-motion-key="macbook-air"], [data-am-motion-key="ipad-air"], [data-am-motion-key="airpods-airpods"], [data-am-motion-key="mac-mini"]):not(.am-has-playing-video) .am-slide-media {
    --am-art-state: paused;
    --am-art-rx: -5deg;
    --am-art-ry: 12deg;
    --am-art-light: #b9d4ee4d;
    inset: 9% 6% 14% 45%;
    isolation: isolate;
    overflow: visible;
  }

  .am-slider.am-motion-ready.am-motion-running .am-slide:is([data-am-motion-key="macbook-air"], [data-am-motion-key="ipad-air"], [data-am-motion-key="airpods-airpods"], [data-am-motion-key="mac-mini"]):not([hidden], .am-has-playing-video) .am-slide-media {
    --am-art-state: running;
  }

  .am-slider.am-motion-ready .am-slide:is([data-am-motion-key="macbook-air"], [data-am-motion-key="ipad-air"], [data-am-motion-key="airpods-airpods"], [data-am-motion-key="mac-mini"]):not(.am-has-playing-video) .am-slide-media img {
    position: relative;
    z-index: 1;
    width: 94%;
    height: 90%;
    max-height: 450px;
    object-fit: contain;
    transform-origin: 50% 55%;
    animation: am-hero-art-turn 8.5s cubic-bezier(.39,.08,.26,.97) infinite;
    animation-play-state: var(--am-art-state);
  }

  .am-slider.am-motion-ready .am-slide:is([data-am-motion-key="macbook-air"], [data-am-motion-key="ipad-air"], [data-am-motion-key="airpods-airpods"], [data-am-motion-key="mac-mini"]):not(.am-has-playing-video) .am-slide-media::before,
  .am-slider.am-motion-ready .am-slide:is([data-am-motion-key="macbook-air"], [data-am-motion-key="ipad-air"], [data-am-motion-key="airpods-airpods"], [data-am-motion-key="mac-mini"]):not(.am-has-playing-video) .am-slide-media::after {
    content: "";
    position: absolute;
    pointer-events: none;
    z-index: 0;
    animation-play-state: var(--am-art-state);
  }

  .am-slider.am-motion-ready .am-slide:is([data-am-motion-key="macbook-air"], [data-am-motion-key="ipad-air"], [data-am-motion-key="airpods-airpods"], [data-am-motion-key="mac-mini"]):not(.am-has-playing-video) .am-slide-media::before {
    inset: 8% 4%;
    background: radial-gradient(ellipse, var(--am-art-light), transparent 69%);
    animation: am-hero-art-light 8.5s ease-in-out infinite var(--am-art-state);
  }

  .am-slider.am-motion-ready .am-slide:is([data-am-motion-key="macbook-air"], [data-am-motion-key="ipad-air"], [data-am-motion-key="airpods-airpods"], [data-am-motion-key="mac-mini"]):not(.am-has-playing-video) .am-slide-media::after {
    inset: 83% 21% 4%;
    background: radial-gradient(ellipse, #263a532e, transparent 70%);
    animation: am-hero-art-shadow 8.5s ease-in-out infinite var(--am-art-state);
  }

  .am-slider.am-motion-ready .am-slide[data-am-motion-key="ipad-air"]:not(.am-has-playing-video) .am-slide-media {
    --am-art-rx: 5deg;
    --am-art-ry: -12deg;
    --am-art-light: #c0bbed55;
  }

  .am-slider.am-motion-ready .am-slide[data-am-motion-key="mac-mini"]:not(.am-has-playing-video) .am-slide-media {
    --am-art-rx: -3deg;
    --am-art-ry: 9deg;
    --am-art-light: #c2d9f048;
  }

  /* Reframe only the product area of the original panoramic AirPods banner. */
  .am-slider.am-motion-ready .am-slide[data-am-motion-key="airpods-airpods"]:not(.am-has-playing-video) .am-slide-media {
    --am-art-rx: 7deg;
    --am-art-ry: -13deg;
    --am-art-light: #dce7f351;
  }

  .am-slider.am-motion-ready .am-slide[data-am-motion-key="airpods-airpods"]:not(.am-has-playing-video) .am-slide-media img[src*="airpods-5-banner.webp"] {
    width: auto;
    height: min(100%, clamp(230px, 29vw, 400px));
    max-width: 100%;
    flex-shrink: 0;
    aspect-ratio: 1.17;
    object-fit: cover;
    object-position: 86% center;
    mask-image: linear-gradient(90deg, transparent, black 9%, black 91%, transparent), linear-gradient(0deg, transparent, black 9%, black 91%, transparent);
    mask-composite: intersect;
  }

  @media (max-width: 767px) {
    .am-slider.am-motion-ready .am-slide:is([data-am-motion-key="macbook-air"], [data-am-motion-key="ipad-air"], [data-am-motion-key="airpods-airpods"], [data-am-motion-key="mac-mini"]):not(.am-has-playing-video) .am-slide-link {
      align-items: flex-start;
    }
    .am-slider.am-motion-ready .am-slide:is([data-am-motion-key="macbook-air"], [data-am-motion-key="ipad-air"], [data-am-motion-key="airpods-airpods"], [data-am-motion-key="mac-mini"]):not(.am-has-playing-video) .am-slide-copy {
      width: 100%;
      padding: 32px 26px 0;
      text-align: center;
    }
    .am-slider.am-motion-ready .am-slide:is([data-am-motion-key="macbook-air"], [data-am-motion-key="ipad-air"], [data-am-motion-key="airpods-airpods"], [data-am-motion-key="mac-mini"]):not(.am-has-playing-video) .am-slide-copy p {
      margin-inline: auto;
    }
    .am-slider.am-motion-ready .am-slide:is([data-am-motion-key="macbook-air"], [data-am-motion-key="ipad-air"], [data-am-motion-key="airpods-airpods"], [data-am-motion-key="mac-mini"]):not(.am-has-playing-video) .am-slide-media {
      inset: 46% 6% 13%;
    }
    .am-slider.am-motion-ready .am-slide[data-am-motion-key="airpods-airpods"]:not(.am-has-playing-video) .am-slide-media img[src*="airpods-5-banner.webp"] {
      height: min(93%, 215px, 57vw);
    }
  }
}

@keyframes am-hero-art-turn {
  0%, 100% { transform: perspective(1060px) translate3d(0, 1px, 0) rotateX(0deg) rotateY(0deg); }
  39% { transform: perspective(1060px) translate3d(0, -10px, 14px) rotateX(var(--am-art-rx)) rotateY(var(--am-art-ry)); }
  70% { transform: perspective(1060px) translate3d(0, -4px, 7px) rotateX(calc(var(--am-art-rx) / -2)) rotateY(calc(var(--am-art-ry) / -2)); }
}

@keyframes am-hero-art-light {
  0%, 100% { transform: translateX(-6%) scale(.91); opacity: .55; }
  39% { transform: translateX(6%) scale(1.06); opacity: .85; }
  70% { transform: translateX(1%) scale(.97); opacity: .66; }
}

@keyframes am-hero-art-shadow {
  0%, 100% { transform: scaleX(.88); opacity: .71; }
  39% { transform: translateX(3%) scaleX(1.11); opacity: .37; }
  70% { transform: translateX(-1%) scaleX(.98); opacity: .53; }
}