/* FANZANIAN canonical package artwork */

:root {
  --fz-dvd-front-cover-source-share: 47.4%;
}

/*
 * R33 FOUC guard.
 *
 * Public package artwork stays visually hidden until JS has resolved:
 *   MANUAL / PASSED snapshot / AUTO.
 *
 * Layout is preserved while hidden.
 *
 * The animation is a safety fail-open only: if JS/API cannot complete,
 * the original image becomes visible after 1.5 seconds rather than
 * remaining hidden forever.
 *
 * Player is deliberately excluded.
 */
@keyframes fz-package-artwork-fail-open {
  to {
    opacity: 1;
  }
}

body:not(.player-page)
  img[data-package-artwork]:not([data-package-artwork-ready]) {
  opacity: 0;
  animation:
    fz-package-artwork-fail-open
    0s
    1.5s
    forwards;
}

body:not(.player-page)
  img[data-package-artwork][data-package-artwork-ready] {
  opacity: 1;
  animation: none !important;
  transition: opacity 70ms ease-out;
}

@media (prefers-reduced-motion: reduce) {
  body:not(.player-page)
    img[data-package-artwork][data-package-artwork-ready] {
    transition: none;
  }
}


/*
 * Default contract:
 * - smartphone: always show the whole package image
 * - portrait/square/ordinary landscape: always show the whole image
 */
img[data-package-artwork] {
  display: block;
  width: 100%;
  height: 100%;
  padding: 0 !important;
  object-fit: contain !important;
  object-position: center !important;
  background: #07070a;
}

img[data-package-artwork][data-package-orientation="landscape"],
img[data-package-artwork][data-package-orientation="portrait"],
img[data-package-artwork][data-package-orientation="square"] {
  object-fit: contain !important;
  object-position: center !important;
}

/*
 * Desktop/tablet package presentation.
 *
 * For classified DVD spread artwork only:
 *
 *   visible width = source width * 47.4%
 *
 * JS calculates:
 *
 *   --fz-package-front-aspect
 *     = (naturalWidth / naturalHeight) * 0.474
 *
 * Using that exact viewport ratio with object-fit:cover and
 * object-position:right displays exactly the rightmost 47.4%.
 */
@media (min-width: 761px) {
  [data-package-front-frame] {
    min-width: 0;
    overflow: hidden !important;
    aspect-ratio: var(--fz-package-front-aspect) !important;
    background: #07070a;
  }

  [data-package-front-frame]
    > img[data-package-artwork][data-package-orientation="dvd-spread"],
  img[data-package-artwork][data-package-orientation="dvd-spread"] {
    width: 100% !important;
    height: 100% !important;
    padding: 0 !important;
    aspect-ratio: var(--fz-package-front-aspect) !important;
    object-fit: cover !important;
    object-position: right center !important;
  }

  .fz-work-card__image[data-package-front-frame],
  .work-card__image[data-package-front-frame],
  .work-card-image[data-package-front-frame],
  .work-image-wrap[data-package-front-frame],
  .related-work-image[data-package-front-frame],
  .upcoming-package-visual[data-package-front-frame],
  .debut-card-visual[data-package-front-frame],
  .work-directory-card[data-package-front-frame],
  .work-hero-visual[data-package-front-frame],
  .release-archive-card-visual[data-package-front-frame] {
    aspect-ratio: var(--fz-package-front-aspect) !important;
    overflow: hidden !important;
  }
}

/*
 * Mobile R25
 *
 * Keep each surface's native card geometry completely untouched.
 * Only plausible DVD spread artwork switches from whole-image contain
 * to right-edge cover so the front-cover side is shown.
 */
@media (max-width: 760px) {
  img[data-package-artwork][data-package-orientation="dvd-spread"] {
    object-fit: cover !important;
    object-position: right center !important;
  }
}


/*
 * Product-level source-rectangle override R28.
 *
 * MANUAL means the saved rectangle is a region of the original source image,
 * not a destination-frame focus point.
 */
[data-package-manual-frame] {
  min-width: 0;
  overflow: hidden !important;
  aspect-ratio:
    var(--fz-package-front-aspect) !important;
  background: #07070a;
}

img[data-package-artwork][data-package-crop-mode="manual"] {
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  padding: 0 !important;
  aspect-ratio:
    var(--fz-package-front-aspect) !important;
  object-fit: cover !important;
  object-position:
    var(--fz-package-crop-x-position, 50%)
    var(--fz-package-crop-y-position, 50%) !important;
  transform: none !important;
}

img[data-package-artwork][data-package-crop-mode="full"] {
  object-fit: contain !important;
  object-position: center !important;
  transform: none !important;
}