/*
 * THE GILLYWEEDS — COVER FLOW + JUKEBOX FOLLOW v3.5
 * A transparent, edge-to-edge, 3D circular shelf with the selected cover in front.
 * Load AFTER your site CSS. Keep all the original .single_* background-image rules.
 */

#single_info {
  --single-size: clamp(220px, 27vw, 322px);
  --single-step-factor: .60; /* 1.5 × v2.2 center spacing (.40 → .60) */
  --single-active-scale: 1.075; /* slight forward enlargement */
  --single-active-lift: 34px; /* subtle shift toward the viewer */
  --single-edge-fade: clamp(130px, 27vw, 540px); /* length of the wraparound fade at each edge */
  --single-arrow-size: 42px;
  display: block;
  position: relative;
  left: 50%;
  width: 100vw;
  max-width: none;
  float: none;
  clear: both;
  box-sizing: border-box;
  margin-left: 0;
  margin-right: 0;
  padding: 0;
  transform: translateX(-50%);
  text-align: center;
  letter-spacing: normal;
  text-transform: none;
  background: transparent;
  color: #fff;
}

#single_info .single-flow__stage {
  position: relative;
  width: 100%;
  height: calc(var(--single-size) * 1.13 + 42px); /* breathing room for the larger selected cover */
  isolation: isolate;
  background: transparent;
}

#single_info .single-flow__viewport {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: transparent;
  /* Fade only the sleeve lineup, not the navigation arrows or title. */
  /* Graduated opacity of the whole sleeve row; never a black overlay.
     The active cover, at center, stays fully opaque. Arrows/title are outside. */
  -webkit-mask-image: linear-gradient(to right,
    transparent 0,
    rgba(0,0,0,.16) calc(var(--single-edge-fade) * .24),
    rgba(0,0,0,.42) calc(var(--single-edge-fade) * .52),
    rgba(0,0,0,.76) calc(var(--single-edge-fade) * .79),
    #000 var(--single-edge-fade),
    #000 calc(100% - var(--single-edge-fade)),
    rgba(0,0,0,.76) calc(100% - var(--single-edge-fade) * .79),
    rgba(0,0,0,.42) calc(100% - var(--single-edge-fade) * .52),
    rgba(0,0,0,.16) calc(100% - var(--single-edge-fade) * .24),
    transparent 100%);
  mask-image: linear-gradient(to right,
    transparent 0,
    rgba(0,0,0,.16) calc(var(--single-edge-fade) * .24),
    rgba(0,0,0,.42) calc(var(--single-edge-fade) * .52),
    rgba(0,0,0,.76) calc(var(--single-edge-fade) * .79),
    #000 var(--single-edge-fade),
    #000 calc(100% - var(--single-edge-fade)),
    rgba(0,0,0,.76) calc(100% - var(--single-edge-fade) * .79),
    rgba(0,0,0,.42) calc(100% - var(--single-edge-fade) * .52),
    rgba(0,0,0,.16) calc(100% - var(--single-edge-fade) * .24),
    transparent 100%);
  touch-action: pan-y;
  overscroll-behavior-x: contain; /* keep Safari trackpad swipes on the shelf */
  cursor: grab;
  outline-offset: -3px;
  user-select: none;
  -webkit-user-select: none;
}
#single_info .single-flow__viewport.is-dragging,
#single_info .single-flow__viewport.is-dragging a { cursor: grabbing; }

#single_info .single-flow__track {
  position: relative;
  width: 100%;
  height: 100%;
  perspective: 1100px;
  perspective-origin: 50% 50%;
  /* CRITICAL: keep siblings in normal stacking order so center z-index wins.
     Their OWN rotateY / translateZ remain fully three-dimensional. */
  transform-style: flat;
  background: transparent;
}

#single_info .album {
  position: absolute;
  top: 50%;
  left: 50%;
  display: block;
  width: var(--single-size);
  height: var(--single-size);
  max-width: none;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  background: transparent;
  opacity: var(--flow-opacity, 0);
  visibility: var(--flow-visibility, hidden);
  pointer-events: var(--flow-events, none);
  transform: translate3d(calc(-50% + var(--flow-x, 0px)), -50%, var(--flow-z, 0px))
             rotateY(var(--flow-turn, 0deg)) scale(var(--flow-scale, 1));
  transform-style: flat;
  backface-visibility: hidden;
  will-change: transform;
}

#single_info .album > a {
  display: block;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  color: inherit;
  text-decoration: none;
  outline-offset: 4px;
  -webkit-user-drag: none;
}

/* No vinyl peek, frame, border, shadow, spine, texture, or title on the image. */
#single_info .album > a::before,
#single_info .album > a::after,
#single_info .album_art::before,
#single_info .album_art::after,
#single_info .single-flow__spine { display: none !important; content: none !important; }

#single_info .album_art {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  border: 0 !important;
  border-radius: 0;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  background-color: transparent;
  box-shadow: none !important;
  filter: none;
}
#single_info .album > a > .album_art > span { display: none !important; }

#single_info .single-flow__title {
  display: block;
  min-height: 1.5em;
  margin: 2px auto 0;
  padding: 0 55px 12px;
  color: #fff;
  font: inherit;
  font-size: clamp(13px, 1.35vw, 18px);
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: .1em;
  text-align: center;
  text-transform: uppercase;
}

/* Same simple dark circles / white chevrons as your Elfsight control. */
#single_info .single-flow__arrow {
  position: absolute;
  top: 50%;
  z-index: 20000;
  display: grid;
  place-items: center;
  width: var(--single-arrow-size);
  height: var(--single-arrow-size);
  padding: 0;
  margin: 0;
  transform: translateY(-50%);
  border: 0;
  border-radius: 50%;
  background: rgba(24,24,26,.94);
  color: #fff;
  box-shadow: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background-color .18s ease;
}
#single_info .single-flow__arrow--previous { left: clamp(10px, 2.6vw, 34px); }
#single_info .single-flow__arrow--next { right: clamp(10px, 2.6vw, 34px); }
#single_info .single-flow__arrow:hover,
#single_info .single-flow__arrow:focus-visible { background: rgba(47,47,49,.98); }
#single_info .single-flow__arrow:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
#single_info .single-flow__arrow svg {
  display: block;
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

@media (max-width: 600px) {
  #single_info { --single-size: clamp(190px, 61vw, 260px); --single-arrow-size: 36px; --single-edge-fade: clamp(36px, 12vw, 65px); }
  #single_info .single-flow__stage { height: calc(var(--single-size) * 1.13 + 32px); }
  #single_info .single-flow__arrow--previous { left: 8px; }
  #single_info .single-flow__arrow--next { right: 8px; }
  #single_info .single-flow__arrow svg { width: 16px; height: 16px; }
  #single_info .single-flow__title { padding: 0 45px 8px; font-size: 13px; }
}

/* v2.8: monochrome heavy-rim chance wheel, matching the supplied reference. */
#single_info .single-flow__footer {
  position: relative;
  width: 100%;
  min-height: 45px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
}
#single_info .single-flow__footer .single-flow__title {
  margin: 0;
  min-height: 1.5em;
  padding: 1px 64px 9px;
}
#single_info .single-flow__spin {
  position: absolute;
  right: clamp(13px, 3vw, 46px);
  top: 0;
  display: grid;
  place-items: center;
  width: 43px;
  height: 43px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: #fff;
  line-height: 1;
  cursor: pointer;
  opacity: 0; /* Hover/focus reveal on desktop; still keyboard accessible. */
  transition: opacity .27s ease, color .2s ease;
  -webkit-tap-highlight-color: transparent;
}
/* The wheel stays out of the way until the user explores the carousel.
   Hover anywhere over the carousel to reveal it; focusing by keyboard
   reveals it too. While spinning it stays visible for the clicker animation. */
@media (hover: hover) {
  #single_info:hover .single-flow__spin,
  #single_info:focus-within .single-flow__spin,
  #single_info.is-spinning .single-flow__spin { opacity: .83; }
  #single_info .single-flow__spin:hover,
  #single_info .single-flow__spin:focus-visible { opacity: 1; }
}
/* Touchscreens have no reliable hover, so keep a quiet but discoverable button. */
@media (hover: none) {
  #single_info .single-flow__spin { opacity: .65; }
  #single_info.is-spinning .single-flow__spin,
  #single_info .single-flow__spin:focus-visible { opacity: 1; }
}
#single_info .single-flow__spin:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
#single_info .single-flow__spin svg {
  display: block;
  width: 38px;
  height: 38px;
  overflow: visible;
  color: inherit;
  fill: none;
  stroke: none;
}
/* Independent origins: rotor can turn without wobbling, clicker can chatter. */
#single_info .single-flow__wheel-rotor {
  transform-box: view-box;
  transform-origin: 24px 27px;
  transform: rotate(var(--single-wheel-angle, 0deg));
}
#single_info .single-flow__wheel-clicker {
  transform-box: view-box;
  transform-origin: 24px 8px;
  transform: rotate(var(--single-flipper-angle, 0deg));
  transition: transform .13s ease-out;
  visibility: hidden;
}
#single_info.is-spinning .single-flow__wheel-clicker { transition: none; }
#single_info .single-flow__spin:disabled { cursor: progress; }
#single_info.is-spinning .single-flow__spin { opacity: 1; }
#single_info.is-spinning .single-flow__viewport { cursor: progress; }
#single_info .single-flow__arrow:disabled { opacity: .55; cursor: default; }

/* If an existing album cover cannot be found on the page, show a restrained
   text sleeve instead of an empty tile. Replace art URL in the JS at any time. */
#single_info .single-flow__missing-art .album_art {
  background: linear-gradient(125deg, #26232a, #09090b) !important;
  display: grid;
  place-items: center;
}
#single_info .album.single-flow__missing-art > a > .album_art > span {
  display: block !important;
  width: 85%;
  height: auto;
  margin: 0;
  padding: 0;
  background: transparent;
  opacity: .78;
  color: #fff;
  font-size: clamp(16px, 2.1vw, 25px);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: .1em;
  text-transform: uppercase;
  text-align: center;
  box-sizing: border-box;
  pointer-events: none;
}
@media (max-width: 600px) {
  #single_info .single-flow__footer { min-height: 43px; }
  #single_info .single-flow__footer .single-flow__title { padding: 1px 50px 7px; }
  #single_info .single-flow__spin { right: 8px; width: 41px; height: 41px; }
  #single_info .single-flow__spin svg { width: 35px; height: 35px; }
}
@media (prefers-reduced-motion: reduce) {
  #single_info .single-flow__wheel-clicker { transition: none; }
}

/* v3.4 mobile: responsive finger tracking without a sticky browser tap delay. */
@media (pointer: coarse) {
  #single_info .single-flow__viewport {
    touch-action: pan-y;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
  }
  #single_info .album > a { -webkit-tap-highlight-color: transparent; }
}

/* v3.5 MOBILE: the wheel is a real touch control, above the isolated 3D shelf.
   Avoid depending on iOS Safari's occasionally ambiguous (hover:none) query. */
#single_info .single-flow__stage { z-index: 0; }
#single_info .single-flow__footer {
  z-index: 30;
  isolation: isolate;
  pointer-events: auto;
}
#single_info .single-flow__spin {
  z-index: 10;
  pointer-events: auto;
  touch-action: manipulation;
}
#single_info .single-flow__spin svg,
#single_info .single-flow__spin svg * { pointer-events: none; }
@media (max-width: 600px), (pointer: coarse) {
  #single_info .single-flow__footer {
    z-index: 30000;
    overflow: visible;
  }
  #single_info .single-flow__spin {
    display: grid !important;
    visibility: visible !important;
    opacity: .82 !important;
    min-width: 48px;
    min-height: 48px;
    right: 6px;
    top: -2px;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  #single_info .single-flow__spin:active,
  #single_info .single-flow__spin:focus-visible,
  #single_info.is-spinning .single-flow__spin { opacity: 1 !important; }
  #single_info .single-flow__footer .single-flow__title { padding-right: 62px; padding-left: 62px; }
}