/* JR_LISTING_PHOTO_AMBIENT_v1
   Listing page, dark themes only. The page top takes the colour of the photo on screen
   (set by jr-listing-photo-ambient.js), scrolls away with the page and fades into #121212.
   Gallery sits on clear glass instead of a charcoal box. Loaded last on purpose. */

@property --jr-amb-r { syntax: "<number>"; inherits: true; initial-value: 44; }
@property --jr-amb-g { syntax: "<number>"; inherits: true; initial-value: 46; }
@property --jr-amb-b { syntax: "<number>"; inherits: true; initial-value: 52; }
@property --jr-amb-l-r { syntax: "<number>"; inherits: true; initial-value: 44; }
@property --jr-amb-l-g { syntax: "<number>"; inherits: true; initial-value: 46; }
@property --jr-amb-l-b { syntax: "<number>"; inherits: true; initial-value: 52; }
@property --jr-amb-rt-r { syntax: "<number>"; inherits: true; initial-value: 44; }
@property --jr-amb-rt-g { syntax: "<number>"; inherits: true; initial-value: 46; }
@property --jr-amb-rt-b { syntax: "<number>"; inherits: true; initial-value: 52; }

html[data-jr-theme="spotify"] body.jr-listing-v2-page div.jr2-listing-shell.jr2-listing-accent,
html[data-jr-theme="dark"] body.jr-listing-v2-page div.jr2-listing-shell.jr2-listing-accent {
  --jr-amb: var(--jr-amb-r) var(--jr-amb-g) var(--jr-amb-b);
  --jr-amb-left: var(--jr-amb-l-r) var(--jr-amb-l-g) var(--jr-amb-l-b);
  --jr-amb-right: var(--jr-amb-rt-r) var(--jr-amb-rt-g) var(--jr-amb-rt-b);
  background:
    radial-gradient(50% 640px at 0 380px, rgb(var(--jr-amb-left) / .30), transparent 76%),
    radial-gradient(50% 640px at 100% 380px, rgb(var(--jr-amb-right) / .30), transparent 76%),
    linear-gradient(180deg,
      rgb(var(--jr-amb) / .40) 0,
      rgb(var(--jr-amb) / .31) 260px,
      rgb(var(--jr-amb) / .20) 540px,
      rgb(var(--jr-amb) / .11) 820px,
      rgb(var(--jr-amb) / .05) 1100px,
      rgb(var(--jr-amb) / .015) 1320px,
      rgb(var(--jr-amb) / 0) 1480px),
    #121212 !important;
  background-attachment: scroll !important;
  transition:
    --jr-amb-r 1s ease, --jr-amb-g 1s ease, --jr-amb-b 1s ease,
    --jr-amb-l-r 1s ease, --jr-amb-l-g 1s ease, --jr-amb-l-b 1s ease,
    --jr-amb-rt-r 1s ease, --jr-amb-rt-g 1s ease, --jr-amb-rt-b 1s ease !important;
}

html[data-jr-theme="spotify"] body.jr-listing-v2-page .jr2-listing-accent section.jr2-gallery-card,
html[data-jr-theme="dark"] body.jr-listing-v2-page .jr2-listing-accent section.jr2-gallery-card {
  background: transparent !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

html[data-jr-theme="spotify"] body.jr-listing-v2-page .jr2-listing-accent .jr2-gallery-card::before,
html[data-jr-theme="dark"] body.jr-listing-v2-page .jr2-listing-accent .jr2-gallery-card::before,
html[data-jr-theme="spotify"] body.jr-listing-v2-page .jr2-listing-accent .jr2-gallery-card::after,
html[data-jr-theme="dark"] body.jr-listing-v2-page .jr2-listing-accent .jr2-gallery-card::after {
  display: none !important;
}

html[data-jr-theme="spotify"] body.jr-listing-v2-page .jr2-listing-accent .jr2-hero-shell,
html[data-jr-theme="dark"] body.jr-listing-v2-page .jr2-listing-accent .jr2-hero-shell {
  background: transparent !important;
  border: 0 !important;
  border-radius: 18px !important;
  overflow: hidden !important;
  -webkit-mask-image: -webkit-radial-gradient(white, black);
  box-shadow: 0 26px 64px -26px rgb(var(--jr-amb) / .48) !important;
}

html[data-jr-theme="spotify"] body.jr-listing-v2-page .jr2-listing-accent .jr2-thumb,
html[data-jr-theme="dark"] body.jr-listing-v2-page .jr2-listing-accent .jr2-thumb,
html[data-jr-theme="spotify"] body.jr-listing-v2-page .jr2-listing-accent .jr2-more-media,
html[data-jr-theme="dark"] body.jr-listing-v2-page .jr2-listing-accent .jr2-more-media {
  border-radius: 12px !important;
  overflow: hidden !important;
}

html[data-jr-theme="spotify"] body.jr-listing-v2-page .jr2-listing-accent .jr2-thumb img,
html[data-jr-theme="dark"] body.jr-listing-v2-page .jr2-listing-accent .jr2-thumb img {
  border-radius: 10px !important;
}

html[data-jr-theme="spotify"] body.jr-listing-v2-page .jr2-listing-accent .jr2-zoom-image,
html[data-jr-theme="dark"] body.jr-listing-v2-page .jr2-listing-accent .jr2-zoom-image {
  width: auto !important;
  height: auto !important;
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: contain !important;
  border-radius: 18px !important;
}

html[data-jr-theme="spotify"] body.jr-listing-v2-page .jr2-listing-accent .jr2-hero-slide,
html[data-jr-theme="dark"] body.jr-listing-v2-page .jr2-listing-accent .jr2-hero-slide,
html[data-jr-theme="spotify"] body.jr-listing-v2-page .jr2-listing-accent .jr2-hero-accent-backdrop,
html[data-jr-theme="dark"] body.jr-listing-v2-page .jr2-listing-accent .jr2-hero-accent-backdrop {
  background: transparent !important;
  background-color: transparent !important;
}

html[data-jr-theme="spotify"] body.jr-listing-v2-page .jr2-listing-accent .jr2-mode-row::before,
html[data-jr-theme="dark"] body.jr-listing-v2-page .jr2-listing-accent .jr2-mode-row::before {
  background: transparent !important;
  border-color: transparent !important;
}

html[data-jr-theme="spotify"] body.jr-listing-v2-page .jr2-listing-accent .jr2-hero-gradient,
html[data-jr-theme="dark"] body.jr-listing-v2-page .jr2-listing-accent .jr2-hero-gradient {
  background: linear-gradient(to top, rgba(0, 0, 0, .26), rgba(0, 0, 0, 0)) !important;
}

html[data-jr-theme="spotify"] body.jr-listing-v2-page div.jr2-listing-shell.jr2-listing-accent .jr2-zoom-overlay.jr2-zoom-overlay,
html[data-jr-theme="dark"] body.jr-listing-v2-page div.jr2-listing-shell.jr2-listing-accent .jr2-zoom-overlay.jr2-zoom-overlay {
  background:
    radial-gradient(66% 76% at 50% 50%, rgb(var(--jr-amb) / .40), transparent 82%),
    radial-gradient(46% 95% at 0 50%, rgb(var(--jr-amb-left) / .30), transparent 80%),
    radial-gradient(46% 95% at 100% 50%, rgb(var(--jr-amb-right) / .30), transparent 80%),
    linear-gradient(180deg, rgb(var(--jr-amb) / .18) 0%, rgb(var(--jr-amb) / .05) 50%, rgb(var(--jr-amb) / .18) 100%),
    #0b0b0c !important;
}

html[data-jr-theme="spotify"] body.jr-listing-v2-page div.jr2-listing-shell.jr2-listing-accent .jr2-zoom-overlay.jr2-zoom-overlay,
html[data-jr-theme="dark"] body.jr-listing-v2-page div.jr2-listing-shell.jr2-listing-accent .jr2-zoom-overlay.jr2-zoom-overlay {
  isolation: isolate;
  overflow: hidden;
}

html[data-jr-theme="spotify"] body.jr-listing-v2-page div.jr2-listing-shell.jr2-listing-accent .jr2-zoom-overlay.jr2-zoom-overlay::before,
html[data-jr-theme="dark"] body.jr-listing-v2-page div.jr2-listing-shell.jr2-listing-accent .jr2-zoom-overlay.jr2-zoom-overlay::before {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  inset: -12% !important;
  z-index: -1 !important;
  background: var(--jr-zoom-bg, none) center / cover no-repeat !important;
  filter: blur(72px) saturate(1.2) brightness(.5) !important;
  opacity: .95 !important;
  pointer-events: none !important;
}

html[data-jr-theme="spotify"] body.jr-listing-v2-page div.jr2-listing-shell.jr2-listing-accent .jr2-zoom-overlay.jr2-zoom-overlay::after,
html[data-jr-theme="dark"] body.jr-listing-v2-page div.jr2-listing-shell.jr2-listing-accent .jr2-zoom-overlay.jr2-zoom-overlay::after {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: -1 !important;
  background: radial-gradient(120% 90% at 50% 50%, transparent 45%, rgba(8, 8, 9, .55) 100%) !important;
  pointer-events: none !important;
}

@media (prefers-reduced-motion: reduce) {
  html[data-jr-theme] body.jr-listing-v2-page div.jr2-listing-shell.jr2-listing-accent {
    transition: none !important;
  }
}